mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-28 07:32:52 +00:00
zooqueen
dcfe6ab6ec
**The config.** This site carried 244 lines of `createGui` on `@hanzogui/config/v4` while the fleet had moved to v5, and it disagreed with the canon on nearly every rung it defined — `$4` 14 against 15, `$9` 32 against 26, `$12` 64 against 48, `$14` 112 against 64, and a spacing ramp reading `$N = 4N` against a t-shirt scale. That is not a preference two surfaces may hold separately: every `@hanzo/ui` component asks the HOST's table for its sizes, so one library rendered at two sizes depending on which site it was on, and nothing said so. `lib/gui.ts` is one line onto `@hanzo/ui/gui-config`, the same object hanzo.app mounts. Its 63 call sites were renamed to the canon rung of the SAME pixel — `$6`→`$5` is 24px both times, `$9`→`$10` is 32px, `borderRadius="$9"`→`"$10"` is the pill — so the swap moved no type and no gap. Measured before and after at 390, 834 and 1440: identical H1s (32/40/40), identical shell, no overflow either side. What moved is who decides. MONOCHROME, which is a brand fact: this site renders no hue but the WebGL globe, which owes gui nothing. `monochrome` is the same table minus the eight chromatic families — a theme table is data that ships, since a theme is chosen by string at run time — and the sheet is 88KB rather than 356KB. `css()` from the package emits it, never `getCSS()`. gui declares `--background`, `--black` and `--white` on its root themes, which ties design's `:root` and wins on load order; the raw sheet shipped gui's grey over design's black and nothing in this repo could reach it. @hanzo/ui 8.0.82 also stopped gui asking the OS for the theme, so the 124 `prefers-color-scheme` blocks are gone — the class on `<html>` is the one authority. **The material.** `@hanzo/ui/glass.css`, which is the frosted surfaces, the row separators and the PAPER ladder — `.elevation-1/2` over @hanzo/design's `--shadow-sheet-*`, and `.fold`. Not `theme.css`: that inlines `base.css` unlayered, and bare element selectors outrank every layered utility, which is how the header CTA once rendered white-on-white here. **The box.** A tap target is a BOX and the floor applies to the SMALLER SIDE. The rule set `min-height` only, and scoped the width to `:is(header, footer)` — so the composer's three controls, the one place on this homepage a thumb actually goes, rendered 30×30 at 390 and 834 while the rule claimed 44. It carries `!important` now, which is load-bearing rather than lazy: gui writes a control's size INLINE, and an inline declaration beats a stylesheet rule at any specificity, so those three were `min-height:30px;min-width:30px` and the polite version lost to them. Two standalone links wear `.hz-tap`, the mark that means "this is a control", because a link inside a paragraph is not one. Measured: 4 controls under the floor at 390 and 5 at 834, now zero at both. **The gate.** `pnpm lint:design` runs @hanzo/design's twelve rules — eight about writing a value that should have been a token, four about owning a layer that should have been imported — with `hanzo-design.allow.json` as the ratchet: what this site still owes, per rule, shrinking only. `local-token-table` and `second-publisher` are absent from that file, which means zero.
41 lines
2.2 KiB
TypeScript
41 lines
2.2 KiB
TypeScript
/**
|
|
* The one gui config, and it is not this repo's.
|
|
*
|
|
* `@hanzo/ui/gui-config` is the fleet's token table — the same object hanzo.app
|
|
* and console mount — so a Button, an Input or a shell menu is the same size on
|
|
* every Hanzo surface. This site used to carry a 244-line copy of that job,
|
|
* built on `@hanzogui/config/v4` while the fleet had moved to v5, and it
|
|
* disagreed with the canon on nearly every rung it defined: `$4` 14 against 15,
|
|
* `$9` 32 against 26, `$12` 64 against 48, `$14` 112 against 64, and a spacing
|
|
* ramp that read `$N = 4N` where the canon reads a t-shirt scale.
|
|
*
|
|
* That is not a preference two surfaces may hold separately. Every `@hanzo/ui`
|
|
* component asks the HOST's config for its sizes, so one copy of the library
|
|
* rendered at two sizes depending on which site it was on, and nothing said so.
|
|
*
|
|
* MONOCHROME, which is a brand fact and not an optimisation. This site renders
|
|
* no hue: the one place colour appears is the WebGL globe, which is GLSL and
|
|
* owes gui nothing. `monochrome` is the same table with the eight chromatic
|
|
* families dropped — 150 themes instead of 390 — from the same scale, so
|
|
* nothing in it can drift from `config`, only be absent from it. A theme table
|
|
* is DATA that ships (a theme is selected by string at run time, so it cannot
|
|
* be tree-shaken), and the sheet it emits is 356KB against 137KB.
|
|
*
|
|
* `createGui()` registers the token and media tables in module-global state; it
|
|
* runs once, in the package, and `GuiProvider` hands the same object down.
|
|
*
|
|
* The rungs this repo's own 63 call sites used were renamed to the canon rung of
|
|
* the SAME pixel value in the commit that landed this, so the swap moved no
|
|
* type and no gap. What it moved is who decides.
|
|
*/
|
|
import { css as sheet, monochrome } from '@hanzo/ui/gui-config'
|
|
|
|
export default monochrome
|
|
|
|
/** The sheet for the table above — `scripts/gen-gui-css.mjs` writes this to
|
|
* `app/gui.css`. It is the package's emitter, never `getCSS()`: gui declares
|
|
* `--background`, `--black` and `--white` on its root themes, which ties
|
|
* design's `:root` and wins on load order, so the raw sheet ships gui's grey
|
|
* over design's black and no CSS in this repo can reach it. */
|
|
export const css = () => sheet(monochrome)
|