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
@@ -7,7 +7,7 @@ clients, the pairing-PIN flow, and session controls.
 Stack: **TanStack Start** (full SSR) on **Bun** via **Nitro v2** (`bun` preset) · **React
 Query** through **orval** codegen from the OpenAPI spec · **[`@unom/ui`](https://git.unom.io/unom/ui)**
 — the shared punktfunk/unom design system the marketing site + docs are built on (Tailwind v4,
-animated components + specular "material" gloss, the violet brand on dark chrome) ·
+animated components on the violet brand over dark chrome) ·
 **Paraglide** i18n (en/de). Package manager + runtime: **Bun**.

 The `@unom` registry mapping lives in [`.npmrc`](.npmrc); the auth token comes from
@@ -98,7 +98,6 @@ src/
  components/
    app-shell.tsx    sidebar nav (brand lens + wordmark) + language switcher
    brand-mark/wordmark/logo.tsx   punktfunk lens mark + wordmark (shared with the site/docs)
-    unom-providers.tsx   @unom/ui Material provider (specular gloss; no sounds, like the site)
    ui/              @unom/ui-backed primitives (button, input, label, card; badge/table/skeleton)
    query-state.tsx  loading/error wrapper (incl. 401 → "set a token")
  api/
@@ -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 *));