mirror of
https://github.com/hanzoai/hanzo.industries.git
synced 2026-10-30 14:39:32 +00:00
zeekayandHanzo Dev
91e2cbae11
8.0.47 deletes the `@font-face` pair from `dist/styles.css` and `dist/theme.css`. They were a duplicate of @hanzo/design's, pointing at `./assets/fonts/*.woff2` that @hanzo/ui has never shipped — which webpack, unlike Vite, compiles into a throwing module. Removing the duplicate leaves @hanzo/design the one owner of the faces and makes the sheets safe for a Next app to import. So the host declares the faces, and this app now delivers both halves: @import '@hanzo/design/tokens/fonts.css' the two variable woff2, self-hosted @import '@hanzo/ui/styles.css' the tokens AND the component classes Neither is optional and both fail silently. Without the first, every surface renders in `ui-sans-serif, system-ui` with a green build. Without the second, a Button's gui atomic classes name rules that do not exist. @hanzo/design's own `styles.css` is deliberately NOT imported next to ui's: their token blocks are byte-identical, 257 of 257 values, so importing both delivers every token twice. `gui-css-check` runs as `postbuild` because that second failure has no other witness — it reads every class in the rendered markup against every selector in every delivered sheet, linked and inline, and fails the build on a miss. It found three groups. The `btn-*` and `SelectTrigger` handles are @hanzo/ui's own (`buttonVariants`: "a stable class handle for hosts that hook buttons from CSS … styling lives in the tokens"), the same contract as the `hanzo-button` names css-check already allows by default — 8.0.47 renamed them and gui 8.0.2's list has not caught up. The third is /install's literal installer text, which quotes another origin's markup. All three are allowed in `gui-css-check.json`, each with the source that emits it, because an allowance without one is a shrug. Also drops `css-modules.d.ts`, which declared `*.css` a second time — `css.d.ts` already did, and one of them was always going to rot. Co-authored-by: Hanzo Dev <[email protected]>
55 lines
2.5 KiB
CSS
55 lines
2.5 KiB
CSS
/* hanzo.industries — the whole stylesheet, in import order.
|
|
*
|
|
* 1. @hanzo/design/tokens/fonts.css — the two faces, self-hosted. Geist Sans and
|
|
* Geist Mono ship inside @hanzo/design as variable woff2 (141 KB, 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.
|
|
*
|
|
* @hanzo/ui used to declare the same two faces and pointed them at assets it
|
|
* did not ship; 8.0.47 dropped the duplicate, leaving @hanzo/design the sole
|
|
* owner. So the host declares them — 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`. `document.fonts.check('16px Geist')` is what
|
|
* actually proves it.
|
|
*
|
|
* 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, byte-identical
|
|
* (257 of 257 values, plus 15 gui adds), 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 (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;
|
|
}
|