mirror of
https://github.com/hanzo-apps/industries.git
synced 2026-10-30 14:47:50 +00:00
zeekayandHanzo Dev
18c16ecf2c
The site rendered in the system fallback: @hanzo/design 0.5.x replaced Geist with Zen, and this app pinned 0.4.6, so the family every surface asked for was one nothing declared any more. Bumping design alone strands it — @hanzo/ui inlines a copy of that token block — so the pair moves together, to @hanzo/design 0.5.21 and @hanzo/ui 8.3.4. @hanzo/ui depends on none of its @hanzogui/* peers; it declares them, so this app installs them. With only @hanzo/gui declared, pnpm resolved @hanzogui/lucide-icons-2 a generation behind, which dragged a second @hanzogui/core, and every @hanzo/ui component carrying an icon then read a theme context no provider fills — prerender died on "Missing theme.". Declaring the cohort, as hanzo.ai and the console already do, collapses it to one core. The old font test matched /geist|system-ui|sans-serif/, so it passed on the fallback: the exact failure it existed to catch. Both checks ask the font loader now. shots.mjs asks for Zen Mono only where a page renders mono, because a face loads when a glyph wants it; mutation-checked by aborting **/*.woff2. CommandPalette was controlled, nothing ever owned it, and its global handler could only close — so Cmd+K opened nothing and its test had never passed. A palette is the thing Cmd+K opens, so it owns the shortcut and mounts itself. 51 pages, 414/414 gui classes covered, 36/36 e2e, 60/60 routes across phone+desktop x light+dark. Co-authored-by: Hanzo Dev <[email protected]>
53 lines
2.3 KiB
CSS
53 lines
2.3 KiB
CSS
/* hanzo.industries — the whole stylesheet, in import order.
|
|
*
|
|
* 1. @hanzo/design/tokens/fonts.css — the two faces, self-hosted. Zen and Zen
|
|
* Mono ship inside @hanzo/design as variable woff2 (SIL OFL-1.1), and the
|
|
* @font-face `url()`s there are relative to `tokens/`, so they resolve out of
|
|
* node_modules with no configuration and no request to a host we do not
|
|
* control. This is the ONE place the site's typeface is named.
|
|
*
|
|
* Omit this line and the build is still green, css-check is still green, and
|
|
* every surface silently renders in `ui-sans-serif, system-ui`. The computed
|
|
* family cannot tell you which of those happened — only the font loader can,
|
|
* which is why `scripts/shots.mjs` asks `document.fonts.check('16px Zen')`.
|
|
*
|
|
* 2. @hanzo/ui/styles.css — the tokens AND the class vocabulary @hanzo/ui's own
|
|
* components render into. Its token block is @hanzo/design's, which is why
|
|
* design's `styles.css` is NOT imported alongside it: that would deliver
|
|
* every token twice to say the same thing. The classes are not optional — a
|
|
* Button emits gui atomic classes, and without this sheet they name rules
|
|
* that do not exist. Dark is `:root`; `.light` is the counterpart, and
|
|
* next-themes writes the class.
|
|
*
|
|
* 3. system.css — this site's own semantic vocabulary, in those tokens. Last, so
|
|
* the page can state what a component only defaults.
|
|
*
|
|
* There is no fourth layer, no utility framework and no per-page stylesheet.
|
|
*/
|
|
@import '@hanzo/design/tokens/fonts.css';
|
|
@import '@hanzo/ui/styles.css';
|
|
@import './system.css';
|
|
|
|
/* The document owns its own surface.
|
|
@hanzo/gui injects `body{background:var(--background);color:var(--color)}`
|
|
into <head> AFTER this stylesheet, and redefines --background along the way —
|
|
so the page rendered at 8% grey on dark and 97% grey on light instead of this
|
|
brand's pure black and white (LLM.md: monochrome, black/white only). It is
|
|
stated here once, from @hanzo/design's base ladder — the two tokens gui does
|
|
not name — and `html body` is just the specificity that says so. */
|
|
html body {
|
|
background: var(--page);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
html {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
/* @hanzo/design is dark at :root, so a document with no theme class is dark. */
|
|
html:not(.light) {
|
|
color-scheme: dark;
|
|
}
|
|
html.light {
|
|
color-scheme: light;
|
|
}
|