mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-25 04:20:02 +00:00
zooqueen
b605993234
The docs estate declared its typeface in 30 root layouts and one linked stylesheet, each pulling a third-party family off a hosted font CDN on the critical path of every route. Two of those surfaces also self-hosted the faces, so the same bytes were vendored by hand in the repo. @hanzo/font 1.8.8 is where Zen is authored. It is now mounted the way this repo already mounts every other package stylesheet — `@import '@hanzo/font/css'` at the top of the app's own sheet — which declares the @font-face rules and publishes --font-zen-sans / --font-zen-mono. A single :root block per app binds those to --font-sans / --font-mono, the pair every rule and every font-* utility already read, so the variable contract is untouched and the next face swap is two lines rather than a sweep. Genuine system fallbacks stay. Mounting through the sheet rather than a JS side-effect import also drops the untyped bare subpath TypeScript could not resolve, so no per-app declaration shim is needed. public/reference/ is static HTML with no bundler, so it keeps its own @font-face; scripts/sync-reference-fonts.ts copies the two variable faces out of the installed package on each build and the directory is ignored, the same rule public/openapi/ already follows. The hand-vendored faces are deleted. Also corrects the brand typography table, which still named a face Hanzo does not ship, and the three sample configs and two skill pages that repeated it.
111 lines
3.4 KiB
CSS
111 lines
3.4 KiB
CSS
@import '@hanzo/font/css';
|
|
@import 'tailwindcss';
|
|
@import '@hanzo/docs-base-ui/css/neutral.css';
|
|
@import '@hanzo/docs-base-ui/css/preset.css';
|
|
@plugin 'tailwindcss-animate';
|
|
|
|
/* Zen is the family. The import above declares the faces and publishes
|
|
--font-zen-sans / --font-zen-mono; they are spelled HERE and nowhere else,
|
|
bound to the --font-sans / --font-mono pair every rule and every font-*
|
|
utility already reads — so the next face swap is these two lines, not a sweep.
|
|
Unlayered, so it outranks Tailwind's own @layer theme defaults. */
|
|
:root {
|
|
--font-sans: var(--font-zen-sans), ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: var(--font-zen-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
@theme {
|
|
--spacing-page: 1436px;
|
|
--color-brand: hsl(265, 90%, 60%);
|
|
--color-brand-foreground: white;
|
|
--color-brand-secondary: hsl(200, 80%, 50%);
|
|
--color-brand-secondary-foreground: white;
|
|
--color-brand-200: hsl(265, 80%, 70%);
|
|
|
|
--color-landing-foreground: #1a1a2e;
|
|
--color-landing-foreground-200: #4a4a6a;
|
|
}
|
|
|
|
.dark {
|
|
--color-landing-foreground: #e4e4f0;
|
|
--color-landing-foreground-200: #a0a0c0;
|
|
|
|
--color-brand: hsl(265, 100%, 72%);
|
|
--color-brand-secondary: hsl(200, 100%, 65%);
|
|
--color-brand-secondary-foreground: black;
|
|
--color-brand-foreground: white;
|
|
--color-brand-200: hsl(265, 90%, 80%);
|
|
}
|
|
|
|
@theme inline {
|
|
--default-mono-font-family: var(--font-mono);
|
|
--animate-pulse-fast: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
html {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
html:has(body[data-scroll-locked]) {
|
|
scrollbar-gutter: auto;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-fd-background);
|
|
}
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
--color-fd-background: hsl(0, 0%, 2%);
|
|
--color-fd-foreground: hsl(0, 0%, 96%);
|
|
--color-fd-muted: hsl(0, 0%, 10%);
|
|
--color-fd-muted-foreground: hsla(0, 0%, 70%, 0.85);
|
|
--color-fd-popover: hsl(0, 0%, 4%);
|
|
--color-fd-popover-foreground: hsl(0, 0%, 90%);
|
|
--color-fd-card: hsl(0, 0%, 4%);
|
|
--color-fd-card-foreground: hsl(0, 0%, 96%);
|
|
--color-fd-border: hsla(0, 0%, 40%, 0.2);
|
|
--color-fd-primary: hsl(0, 0%, 96%);
|
|
--color-fd-primary-foreground: hsl(0, 0%, 8%);
|
|
--color-fd-secondary: hsl(0, 0%, 12%);
|
|
--color-fd-secondary-foreground: hsl(0, 0%, 92%);
|
|
--color-fd-accent: hsla(0, 0%, 40%, 0.3);
|
|
--color-fd-accent-foreground: hsl(0, 0%, 92%);
|
|
--color-fd-ring: hsl(0, 0%, 55%);
|
|
--color-fd-overlay: hsla(0, 0%, 0%, 0.3);
|
|
--color-fd-warning: hsl(0, 0%, 96%);
|
|
--color-fd-idea: hsl(0, 0%, 96%);
|
|
--color-fd-info: hsl(0, 0%, 96%);
|
|
--color-fd-error: hsl(0, 0%, 96%);
|
|
--color-fd-success: hsl(0, 0%, 96%);
|
|
}
|
|
|
|
.dark {
|
|
--color-fd-background: hsl(0, 0%, 2%);
|
|
--color-fd-foreground: hsl(0, 0%, 96%);
|
|
--color-fd-muted: hsl(0, 0%, 10%);
|
|
--color-fd-muted-foreground: hsla(0, 0%, 70%, 0.85);
|
|
--color-fd-popover: hsl(0, 0%, 4%);
|
|
--color-fd-popover-foreground: hsl(0, 0%, 90%);
|
|
--color-fd-card: hsl(0, 0%, 4%);
|
|
--color-fd-card-foreground: hsl(0, 0%, 96%);
|
|
--color-fd-border: hsla(0, 0%, 40%, 0.2);
|
|
--color-fd-primary: hsl(0, 0%, 96%);
|
|
--color-fd-primary-foreground: hsl(0, 0%, 8%);
|
|
--color-fd-secondary: hsl(0, 0%, 12%);
|
|
--color-fd-secondary-foreground: hsl(0, 0%, 92%);
|
|
--color-fd-accent: hsla(0, 0%, 40%, 0.3);
|
|
--color-fd-accent-foreground: hsl(0, 0%, 92%);
|
|
--color-fd-ring: hsl(0, 0%, 55%);
|
|
--color-fd-overlay: hsla(0, 0%, 0%, 0.3);
|
|
}
|