Scalar's /api reference injects a *global* `body { background-color:
var(--scalar-background-1) }` (via its linked stylesheet + a runtime
<style id=scalar-style>) that TanStack doesn't remove on a client-side route
change. After navigating /api -> /docs without a reload, that rule kept
painting the docs body: Scalar's stock gray (#0f0f0f) while .dark-mode lingered
on <body>, or transparent once the class was gone. A hard reload was fine
because the stylesheet was never loaded there.
Fix: give --scalar-background-1 a global fallback = --color-fd-background so any
non-API page paints its own surface while Scalar's sheet lingers; /api itself
overrides it via the higher-specificity body.{dark,light}-mode rule. Also strip
the leftover #scalar-style/#scalar-refs nodes and body mode-class when /api
unmounts so the DOM matches a fresh load. Verified light + dark via headless
CDP: post-nav docs body now equals a fresh reload (#141019 / #f0ebff).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Scalar puts .light-mode/.dark-mode on document.body and renders customCss
*before* its built-in theme preset in the same <style> tag, so a bare
.dark-mode override loses at equal specificity and the stock #0f0f0f gray
showed through. Scope the palette to body.{dark,light}-mode (0,1,1) so it beats
both the linked base sheet and the in-component preset, and add a full
light-lavender palette to match the docs light surface.
Drive Scalar's darkMode from the resolved Fumadocs theme (next-themes) instead
of hard-locking it on, so toggling the docs theme switch flips the API
reference too; the React wrapper's updateConfiguration effect live-swaps the
body mode class.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@scalar/api-reference-react@0.9.47's entry imports createApiReference but does
NOT import its own style.css (nor inject it at runtime), so /api rendered with
no Scalar CSS at all. Import the sheet as a route-scoped <link> (?url +
head.links, same pattern as the root app.css) so it loads for SSR + the
client-side Vue mount. The brand customCss still themes on top.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- 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>
Move the management console (web/) off shadcn/ui to the shared @unom/ui
design system the marketing site + docs are built on, on the punktfunk
violet brand over dark chrome:
- Add @unom/ui/@unom/style/motion/radix-ui/zod + Geist; web/.npmrc maps the
@unom scope (packages are public-read, so CI needs no npm auth).
- styles.css: one dark-violet palette (#141019/#1c1530, brand #6c5bf3 ->
#a79ff8) exposed under BOTH the shadcn token names the routes use and
@unom/ui's contract, so routes + components both resolve; pulls in
@unom/ui's material gloss + easings.
- components/ui/* now back onto @unom/ui (AnimatedButton/InputText/Label/
AnimatedCard); brand-mark/wordmark/logo replace the generic Radio icon in
the shell + login.
- MaterialProvider (specular gloss) at the root. No UI sounds, like the site.
docs-site: new /api route renders the host management REST API as an
interactive Scalar reference (reads public/openapi.json, a snapshot of
docs/api/openapi.json), branded violet and linked from the top nav, the
docs sidebar, the landing page, and host-cli.md.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The shared unom CMS is now multi-tenant; the footer global became a per-tenant
collection. Query footers scoped to tenant.slug = punktfunk instead of the
removed /globals/footer.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Pull the same footer from the shared unom CMS global (cms.unom.io) and render
it globally under both the home and docs layouts. Read-only typed fetch in a
server-side root loader (falls back to null on a CMS hiccup). Root-relative
links target the marketing site, so they're resolved against its origin (the
docs don't host /legal/* etc.); themed with Fumadocs tokens for light/dark.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the CSS-mask/webp wordmark with the inline vector from
Export/Punktfunk_Logo-Text_No-Border_Dark.svg (white export background
dropped), painted via currentColor — deep-violet on light, light-violet on
dark. Crisp at any size; drops the now-unused funk-wordmark.{webp,png}.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Swap the plain "punktfunk" text in the nav and landing hero for the real
brand wordmark from the marketing site. The source asset is a single
light-violet variant (made for dark surfaces), so it's painted as a CSS
mask and coloured per theme — deep-violet on light, light-violet on dark —
to stay legible with the docs' light/dark toggle.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Theme the Fumadocs docs site with the punktfunk identity, mirroring the
marketing site:
- Swap the stock `neutral` preset for `purple`, then override --color-fd-*
with the violet lens-mark palette (#6c5bf3 / #a79ff8). The brand is the
violet, not the site's blue marketing background, so the blue is not used
as a reading surface; dark mode tints the chrome toward the app-icon
violet-dark (#1c1530).
- Adopt @unom/ui's token contract (--brand/--primary/--accent + bg-brand
etc.) as the shared token source, and @source its dist.
- Load Geist (the brand typeface) via @fontsource-variable/geist.
- Add the BrandMark lens to the nav + landing hero, wire the brand
favicon.svg, and add Docs/Website nav links.
- Keep the Fumadocs light/dark toggle.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
enricobuehler