mirror of https://github.com/hanzoai/theming.git synced 2026-10-30 18:19:35 +00:00

Files

T

zeekayandHanzo Dev 6370fee218 Converge on Hanzo 8.x: @hanzo/gui, no Tailwind, one compiler

The 8.x refactor happened upstream; this package was still pinned to the
102.0.0-rc line and importing the pre-rename `hanzogui`. Two of its barrels
exported names that no longer existed (`createHanzoguiConfig`,
`HanzoguiConfigOptions`) and `src/tg/index.ts` re-exported files that were not
in its directory, so `tsc` could not have passed on `main`.

Packages
  [email protected] → @hanzo/gui@^8.0.1, and the four @hanzogui/* peers to
  ^8.0.0. Dropped @hanzogui/config-default and @hanzogui/animations-react-native
  entirely: the config package was consulted for exactly three static maps
  (tokens.radius, tokens.zIndex, media) and dragged react-native into a web
  theming package to get them. Those maps now live beside the size and space
  scales they belong with, in src/gui/defaults/. Verified against @hanzo/gui
  8.0.1 that the produced config is unchanged — radius $4 = 9, zIndex $3 = 300,
  all fourteen media keys, 280 themes.

Tailwind, shadcn, Radix
  The generated stylesheets emitted `@theme` and `@theme inline` blocks to
  register colors as Tailwind utilities. Those blocks are gone; what remains is
  `:root` / `.dark` custom properties, the same shape and the same dark selector
  as @hanzo/ui/theme.css. The semantic token map had drifted into two homes — a
  hand-edited shadcn-semantic-colors.css and a TS map that disagreed with it
  about `--primary` (step 9 vs step 10) — so the CSS file is deleted and
  dist/css/semantic.css is emitted from the map at build time. The dark block
  now carries only the roles whose step actually changes.

TypeScript 7
  tsgo for both typecheck and emit (~0.5s). It needs types: ["node", "react"]
  spelled out in tsconfig or it fails to find @types/node. tsup is gone with it:
  it and tsc were both writing dist/css/generate-palettes.js, and tsc's own ESM
  output is a perfectly good bin. One compiler, one output format — the package
  is now "type": "module" with explicit .js extensions, so Node resolves it
  rather than relying on a bundler to forgive extensionless ESM.

Also
  Export paths follow the rename (/gui, /gui/components, /gui/defaults, /css,
  /semantic.css) and a new root export carries the dependency-free color math.
  LLM.md was a tracked symlink to a gitignored file, dangling in every clone;
  it is a real file now. README described a differently-named package with
  export paths that did not exist.

Verified: pnpm build green, tsgo and tsc 5.9 both clean, CLI exercised on a real
brand.json, all six export subpaths resolved and imported from a linked dist.

Co-authored-by: Hanzo Dev <[email protected]>

2026-08-03 17:55:59 -07:00

1.5 KiB

Raw Permalink Blame History

Components

Themed components built on @hanzo/gui and aware of our theming mechanism, so they work with any palette — not just primary.

import { ThemedButton, StatusBox, ToggleSwitch } from '@hanzo/theming/gui/components'

ThemedButton

Solid color button. Defaults to theme="primary".

<ThemedButton onPress={handleSubmit}>Submit</ThemedButton>
<ThemedButton theme="danger" onPress={handleDelete}>Delete</ThemedButton>
<ThemedButton theme={null}>Cancel</ThemedButton>

GhostButton

Borderless button that reveals border + tint on hover/press.

<GhostButton onPress={handleAlt}>Try another way</GhostButton>

OutlineButton

Outlined button with border and subtle background.

<OutlineButton onPress={handleCancel}>Cancel</OutlineButton>

StatusBox

Callout box for tips, errors, warnings. Takes a theme name and bullet points.

<StatusBox title="Tip" points={['First point', 'Second point']} />
<StatusBox title="Error" points={['Something broke']} theme="danger" symbol="⚠️" />
<StatusBox title="Done" points={['All set']} theme="success" symbol="✓" />

ToggleSwitch

Branded toggle. Uses the theme palette when checked, neutral when unchecked.

<ToggleSwitch checked={value} onCheckedChange={setValue} />
<ToggleSwitch checked={value} onCheckedChange={setValue} theme="success" />

StyledCard

Pressable card with optional icon slots.

<StyledCard
  title="Bank Account"
  subtitle="Chase ••1234"
  iconLeft={<BankIcon />}
  onPress={handleSelect}
/>

1.5 KiB Raw Permalink Blame History