enricobuehler
8402f1ed4d
The docs footer was a hand-maintained mirror of the marketing site's. Both now render the same @unom/app-ui/footer component, so they stay in sync. The shared view themes itself through @unom/style tokens (which the docs already map onto their Fumadocs surfaces), and a resolveHref hook rebases root-relative links onto the marketing-site origin. Footer types now come from the library too. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
89 lines
3.6 KiB
CSS
89 lines
3.6 KiB
CSS
@import 'tailwindcss';
|
|
@import 'fumadocs-ui/css/purple.css';
|
|
@import 'fumadocs-ui/css/preset.css';
|
|
|
|
/* Pull Fumadocs UI's own classes — and @unom/ui's compiled components — into
|
|
the Tailwind 4 scan so their utilities aren't purged. @unom/ui is the shared
|
|
design-token system the punktfunk marketing site also builds on. */
|
|
@source '../../node_modules/fumadocs-ui/dist/**/*.js';
|
|
@source '../../node_modules/@unom/ui/dist/**/*.{js,mjs}';
|
|
@source '../../node_modules/@unom/app-ui/dist/**/*.{js,mjs}';
|
|
|
|
/* ── punktfunk brand ────────────────────────────────────────────────────────
|
|
The brand colour is the violet lens mark. (The marketing site's blue is just
|
|
a page background, not the brand.) These values feed both @unom/ui's semantic
|
|
token contract (--brand/--primary/--accent/--highlight) and the Fumadocs
|
|
--color-fd-* chrome, so the docs carry the same identity in light and dark. */
|
|
:root {
|
|
--pf-brand: #6c5bf3; /* deep violet — primary */
|
|
--pf-brand-light: #a79ff8; /* light violet */
|
|
--pf-highlight: #d2c9fb; /* lens highlight */
|
|
|
|
/* @unom/ui token contract. */
|
|
--brand: var(--pf-brand);
|
|
--primary: var(--pf-brand);
|
|
--accent: var(--pf-brand);
|
|
--highlight: var(--pf-highlight);
|
|
--radius: 0.625rem;
|
|
|
|
/* Fumadocs accent → brand violet (light mode). */
|
|
--color-fd-primary: var(--pf-brand);
|
|
--color-fd-ring: var(--pf-brand);
|
|
|
|
/* The /api Scalar reference injects a *global* `body { background-color:
|
|
var(--scalar-background-1) }` (via its own stylesheet + a runtime
|
|
<style id="scalar-style">) that TanStack does NOT remove on a client-side
|
|
route change. Give that variable a fallback = the docs surface so every
|
|
non-API page still paints correctly while Scalar's sheet lingers (without
|
|
this the docs body went gray, or transparent once the body mode-class was
|
|
stripped). On /api itself the reference's body.{dark,light}-mode rule
|
|
(higher specificity) overrides this back to the brand chrome. */
|
|
--scalar-background-1: var(--color-fd-background);
|
|
}
|
|
|
|
.dark {
|
|
/* Lighter violet reads better against the dark surface. */
|
|
--primary: var(--pf-brand-light);
|
|
--accent: var(--pf-brand-light);
|
|
|
|
--color-fd-primary: var(--pf-brand-light);
|
|
--color-fd-ring: var(--pf-brand-light);
|
|
|
|
/* Tint Fumadocs' dark chrome toward the brand's violet-dark (the app-icon
|
|
surface #1c1530) instead of the default neutral-dark. */
|
|
--color-fd-background: #141019;
|
|
--color-fd-card: #1c1530;
|
|
--color-fd-popover: #1c1530;
|
|
--color-fd-secondary: #221a36;
|
|
--color-fd-muted: #1f1830;
|
|
--color-fd-accent: #241c3d;
|
|
--color-fd-border: #2a2148;
|
|
}
|
|
|
|
@theme {
|
|
/* Geist — the punktfunk brand typeface, same as the marketing site
|
|
(the @fontsource-variable/geist face is loaded in __root.tsx). */
|
|
--font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
|
|
--font-display: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
/* Expose the shared brand + surface tokens as Tailwind colours (bg-brand,
|
|
text-primary, bg-neutral…), mirroring @unom/ui's own @theme mapping so its
|
|
utilities resolve to the docs' current (light/dark) surfaces. */
|
|
@theme inline {
|
|
--color-brand: var(--brand);
|
|
--color-primary: var(--primary);
|
|
--color-accent: var(--accent);
|
|
--color-highlight: var(--highlight);
|
|
--color-main: var(--color-fd-foreground);
|
|
--color-secondary: var(--color-fd-muted-foreground);
|
|
--color-neutral: var(--color-fd-background);
|
|
--color-neutral-accent: var(--color-fd-secondary);
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
font-family: var(--font-sans);
|
|
}
|
|
}
|