mirror of
https://github.com/hanzoai/rfc.git
synced 2026-10-30 18:23:14 +00:00
zeekayandHanzo Dev
b103359659
Two things in this tree were done twice, and the second one was broken.
BUTTON. `.rfc-btn` (a local CSS class) and `<Button>` (@hanzo/ui) were both
"the button". Every call site now uses the component and the CSS is deleted —
variant, size, hover, focus ring and the 44px touch floor come from one
definition, shared with every other Hanzo surface and with native.
Imported per member (`@hanzo/ui/primitives/Button`, which the package publishes
"for hosts that modularize @hanzo/ui imports"), not off the barrel. The barrel
re-exports the whole library, so one button pulled Dialog, Command, Select and
Slider into the page: 270 kB First Load, 1033 kB of raw chunks. Now 168 kB and
726 kB. `experimental.optimizePackageImports` does NOT fix this — it was tried,
and Slider/Toaster/AspectRatio still shipped, because transpilePackages opts the
package out of that transform.
THEME. Two token sources read two different classes: `@hanzo/ui/theme.css` keys
the identity off `.dark`, gui resolves `$color…` off `t_light`/`t_dark`. Only
the gui side was wired, and to `'system'` — a name gui has no theme for — so
<html> carried a `t_system` class that nothing matches. Chromium, before:
DARK : --background: hsla(0,0%,97%,1) <- near-white page
--foreground: oklch(0.985 0 0) <- near-white text
Dark mode was unreadable. `--background` is the one token gui also declares (at
bare `:root`, injected after the stylesheet, so it beat `.dark` on source order
at equal specificity); the other 30 switched correctly, which is why the text
went white and the page did not.
Now one state writes both classes, one writer each — NextThemeProvider owns
`.dark` via its `value` map, GuiProvider owns `t_dark` via `defaultTheme` — and
next-themes is gone, since @hanzogui/next-theme IS next-themes with the gui hook
already on it. Chromium, after:
LIGHT html="t_light light" body=rgb(247,247,247)/rgb(5,5,5) card=oklch(1 0 0)
DARK html="dark t_dark" body=rgb(20,20,20)/rgb(255,255,255) card=oklch(0.205 0 0)
RELOADED html="dark t_dark" body=rgb(20,20,20)/rgb(255,255,255)
button bg rgb(255,255,255) on dark, rgb(5,5,5) on light — inverts with the theme
/docs, /contribute, /docs/category/core all dark; 0 console errors
$ pnpm build
✓ Compiled successfully in 22.0s
✓ Generating static pages (11/11)
✓ Exporting (2/2)
$ pnpm typecheck # exit 0
Co-authored-by: Hanzo Dev <[email protected]>