feat(web): drop material gloss, full punktfunk theme for Scalar, center mobile tabs

- console: remove @unom/ui's specular "material" gloss (drop UnomProviders + the material.css import) so components render flat like the marketing site; the violet brand + Geist stay. - mobile bottom tab bar: center the labels (w-full text-center, leading-tight) and even out the per-tab layout. - docs /api: roll the punktfunk dark-violet palette across the whole Scalar reference (surfaces/text/sidebar/links/buttons/method colours via the full --scalar-* token set), locked to dark (hideDarkModeToggle). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-21 12:19:51 +00:00
parent f3555d5eb5
commit 527c2f677e
6 changed files with 73 additions and 43 deletions
@@ -76,11 +76,11 @@ export function AppShell({ children }: { children: ReactNode }) {
            key={to}
            to={to}
            activeOptions={{ exact: to === '/' }}
-            className="flex flex-1 flex-col items-center gap-1 py-2 text-[10px] text-muted-foreground transition-colors"
+            className="flex flex-1 flex-col items-center justify-center gap-1 px-0.5 py-2 text-muted-foreground transition-colors"
            activeProps={{ className: 'text-[var(--brand-light)]' }}
          >
-            <Icon className="size-5" />
-            <span className="leading-none">{label()}</span>
+            <Icon className="size-5 shrink-0" />
+            <span className="w-full text-center text-[10px] leading-tight">{label()}</span>
          </Link>
        ))}
      </nav>
@@ -1,21 +0,0 @@
-import type { ReactNode } from 'react'
-import { MaterialProvider } from '@unom/ui/material'
-
-// Turn on @unom/ui's specular "material" gloss for the whole console — the same
-// design system the punktfunk marketing site is built on. SSR-safe (material
-// gates its effects on a mounted flag). No SoundProvider: like the marketing
-// site, the console stays silent (@unom/ui's useSound no-ops without a provider).
-const MATERIAL = {
-  button: { enabled: true },
-  card: { enabled: true },
-  dialog: { enabled: true },
-  tabs: { enabled: true },
-  select: { enabled: true },
-  input: { enabled: true },
-  checkbox: { enabled: true },
-  toast: { enabled: true },
-} as const
-
-export function UnomProviders({ children }: { children: ReactNode }) {
-  return <MaterialProvider theme={MATERIAL}>{children}</MaterialProvider>
-}
@@ -9,7 +9,6 @@ import {
 import type { QueryClient } from '@tanstack/react-query'
 import '@fontsource-variable/geist'
 import { AppShell } from '@/components/app-shell'
-import { UnomProviders } from '@/components/unom-providers'
 import appCss from '@/styles.css?url'

 export interface RouterContext {
@@ -38,15 +37,13 @@ function RootComponent() {
        <HeadContent />
      </head>
      <body className="min-h-screen">
-        <UnomProviders>
-          {isLogin ? (
+        {isLogin ? (
+          <Outlet />
+        ) : (
+          <AppShell>
            <Outlet />
-          ) : (
-            <AppShell>
-              <Outlet />
-            </AppShell>
-          )}
-        </UnomProviders>
+          </AppShell>
+        )}
        <Scripts />
      </body>
    </html>
@@ -1,9 +1,6 @@
@import 'tailwindcss';
@import 'tw-animate-css';
@import './timing-functions.css';
-/* @unom/ui's specular "material" gloss layer (.material / .material-fx). Colours
-   derive from --neutral / --neutral-accent via the --mat-* knobs it ships. */
-@import '@unom/ui/styles/material.css';

@custom-variant dark (&:is(.dark *));