@hanzo/design 0.3.5 → 0.4.1

package/dist/tokens.gen.js

@@ -19,37 +19,50 @@ export const colors = {
     'hanzo-black': '#0A0A0B',
     'hanzo-white': '#FFFFFF',
     'white-05': 'rgb(255 255 255 / .05)',
+    'white-06': 'rgb(255 255 255 / .06)',
+    'white-08': 'rgb(255 255 255 / .08)',
     'white-10': 'rgb(255 255 255 / .10)',
     'white-15': 'rgb(255 255 255 / .15)',
+    'white-16': 'rgb(255 255 255 / .16)',
     'white-20': 'rgb(255 255 255 / .20)',
+    'white-22': 'rgb(255 255 255 / .22)',
     'white-30': 'rgb(255 255 255 / .30)',
     'white-40': 'rgb(255 255 255 / .40)',
+    'white-55': 'rgb(255 255 255 / .55)',
     'white-60': 'rgb(255 255 255 / .60)',
+    'white-78': 'rgb(255 255 255 / .78)',
     'white-80': 'rgb(255 255 255 / .80)',
-    'background': '#000000',
-    'foreground': '#ededed',
-    'card': '#0a0a0a',
-    'card-foreground': '#f5f5f5',
-    'popover': '#0a0a0a',
-    'popover-foreground': '#f5f5f5',
-    'primary': '#ffffff',
-    'primary-foreground': '#000000',
-    'secondary': '#1a1a1a',
-    'secondary-foreground': '#f5f5f5',
-    'muted': '#101010',
-    'muted-foreground': '#888888',
-    'accent': '#1a1a1a',
-    'accent-foreground': '#f5f5f5',
+    'background': '#0a0a0a',
+    'foreground': '#fafafa',
+    'card': '#0f0f0f',
+    'card-foreground': '#fafafa',
+    'popover': '#0f0f0f',
+    'popover-foreground': '#fafafa',
+    'primary': '#fafafa',
+    'primary-hover': '#d4d4d4',
+    'primary-foreground': '#0a0a0a',
+    'secondary': '#262626',
+    'secondary-foreground': '#fafafa',
+    'muted': '#171717',
+    'muted-foreground': '#a3a3a3',
+    'accent': '#262626',
+    'accent-foreground': '#fafafa',
     'destructive': '#666666',
-    'destructive-foreground': '#f5f5f5',
-    'border': '#1f1f1f',
-    'input': '#1f1f1f',
+    'destructive-foreground': '#fafafa',
+    'border': 'var(--white-10)',
+    'border-strong': 'var(--white-16)',
+    'border-control': 'var(--neutral-500)',
+    'border-focus': 'var(--neutral-400)',
+    'input': 'var(--border-control)',
     'ring': 'var(--neutral-500)',
     'brand': '#e4e4e7',
     'brand-foreground': '#09090b',
     'brand-muted': '#a3a3a3',
     'black': '#000000',
-    'white': '#f5f5f5',
+    'white': '#fafafa',
+    'selection': 'var(--white-20)',
+    'glass': 'var(--white-05)',
+    'glass-strong': 'var(--white-08)',
     'surface-page': 'var(--background)',
     'surface-card': 'rgb(23 23 23 / .5)',
     'surface-card-emphasis': 'rgb(23 23 23 / .8)',
@@ -57,16 +70,13 @@ export const colors = {
     'surface-overlay': 'rgb(10 10 10 / .95)',
     'surface-header': 'rgb(0 0 0 / .7)',
     'surface-scrim': 'rgb(0 0 0 / .8)',
-    'border-hairline': 'var(--neutral-800)',
-    'border-card': 'var(--white-10)',
-    'border-strong': 'var(--neutral-500)',
     'surface-0': 'var(--background)',
     'surface-1': 'var(--card)',
     'surface-2': 'var(--muted)',
     'surface-3': 'var(--secondary)',
-    'text-primary': 'var(--pure-white)',
-    'text-secondary': 'var(--white-80)',
-    'text-tertiary': 'var(--white-60)',
+    'text-primary': '#fafafa',
+    'text-secondary': 'var(--white-78)',
+    'text-tertiary': 'var(--white-55)',
     'text-helper': 'var(--muted-foreground)',
     'text-disabled': 'var(--white-30)',
     'state-error': '#ef4444',
@@ -119,6 +129,7 @@ export const typography = {
     'font-size-7xl': 'var(--text-7xl)',
     'font-size-8xl': 'var(--text-8xl)',
     'font-size-9xl': 'var(--text-9xl)',
+    'text-control': 'var(--text-sm)',
     'weight-normal': '400',
     'weight-medium': '500',
     'weight-semibold': '600',
@@ -172,14 +183,19 @@ export const spacing = {
     'container-max': '80rem',
     'container-prose': '48rem',
     'container-wide': '72rem',
-    'gutter': '1rem',
+    'gutter': 'max(1rem,var(--safe-left),var(--safe-right))',
     'gutter-sm': '1.5rem',
     'gutter-lg': '2rem',
-    'section-y': '4rem',
-    'section-y-lg': '6rem',
-    'hero-y': '5rem',
-    'hero-y-lg': '8rem',
-    'header-height': '4rem',
+    'section-y': '2.5rem',
+    'section-y-lg': '3.5rem',
+    'hero-y': '3rem',
+    'hero-y-lg': '4.5rem',
+    'header-height': '3.5rem',
+    'tap-target': '44px',
+    'safe-top': 'env(safe-area-inset-top,0px)',
+    'safe-right': 'env(safe-area-inset-right,0px)',
+    'safe-bottom': 'env(safe-area-inset-bottom,0px)',
+    'safe-left': 'env(safe-area-inset-left,0px)',
 };
 /** grid tokens (from tokens/grid.css). Values are raw CSS. */
 export const grid = {
@@ -280,37 +296,50 @@ export const cssVars = {
     '--hanzo-black': '#0A0A0B',
     '--hanzo-white': '#FFFFFF',
     '--white-05': 'rgb(255 255 255 / .05)',
+    '--white-06': 'rgb(255 255 255 / .06)',
+    '--white-08': 'rgb(255 255 255 / .08)',
     '--white-10': 'rgb(255 255 255 / .10)',
     '--white-15': 'rgb(255 255 255 / .15)',
+    '--white-16': 'rgb(255 255 255 / .16)',
     '--white-20': 'rgb(255 255 255 / .20)',
+    '--white-22': 'rgb(255 255 255 / .22)',
     '--white-30': 'rgb(255 255 255 / .30)',
     '--white-40': 'rgb(255 255 255 / .40)',
+    '--white-55': 'rgb(255 255 255 / .55)',
     '--white-60': 'rgb(255 255 255 / .60)',
+    '--white-78': 'rgb(255 255 255 / .78)',
     '--white-80': 'rgb(255 255 255 / .80)',
-    '--background': '#000000',
-    '--foreground': '#ededed',
-    '--card': '#0a0a0a',
-    '--card-foreground': '#f5f5f5',
-    '--popover': '#0a0a0a',
-    '--popover-foreground': '#f5f5f5',
-    '--primary': '#ffffff',
-    '--primary-foreground': '#000000',
-    '--secondary': '#1a1a1a',
-    '--secondary-foreground': '#f5f5f5',
-    '--muted': '#101010',
-    '--muted-foreground': '#888888',
-    '--accent': '#1a1a1a',
-    '--accent-foreground': '#f5f5f5',
+    '--background': '#0a0a0a',
+    '--foreground': '#fafafa',
+    '--card': '#0f0f0f',
+    '--card-foreground': '#fafafa',
+    '--popover': '#0f0f0f',
+    '--popover-foreground': '#fafafa',
+    '--primary': '#fafafa',
+    '--primary-hover': '#d4d4d4',
+    '--primary-foreground': '#0a0a0a',
+    '--secondary': '#262626',
+    '--secondary-foreground': '#fafafa',
+    '--muted': '#171717',
+    '--muted-foreground': '#a3a3a3',
+    '--accent': '#262626',
+    '--accent-foreground': '#fafafa',
     '--destructive': '#666666',
-    '--destructive-foreground': '#f5f5f5',
-    '--border': '#1f1f1f',
-    '--input': '#1f1f1f',
+    '--destructive-foreground': '#fafafa',
+    '--border': 'var(--white-10)',
+    '--border-strong': 'var(--white-16)',
+    '--border-control': 'var(--neutral-500)',
+    '--border-focus': 'var(--neutral-400)',
+    '--input': 'var(--border-control)',
     '--ring': 'var(--neutral-500)',
     '--brand': '#e4e4e7',
     '--brand-foreground': '#09090b',
     '--brand-muted': '#a3a3a3',
     '--black': '#000000',
-    '--white': '#f5f5f5',
+    '--white': '#fafafa',
+    '--selection': 'var(--white-20)',
+    '--glass': 'var(--white-05)',
+    '--glass-strong': 'var(--white-08)',
     '--surface-page': 'var(--background)',
     '--surface-card': 'rgb(23 23 23 / .5)',
     '--surface-card-emphasis': 'rgb(23 23 23 / .8)',
@@ -318,16 +347,13 @@ export const cssVars = {
     '--surface-overlay': 'rgb(10 10 10 / .95)',
     '--surface-header': 'rgb(0 0 0 / .7)',
     '--surface-scrim': 'rgb(0 0 0 / .8)',
-    '--border-hairline': 'var(--neutral-800)',
-    '--border-card': 'var(--white-10)',
-    '--border-strong': 'var(--neutral-500)',
     '--surface-0': 'var(--background)',
     '--surface-1': 'var(--card)',
     '--surface-2': 'var(--muted)',
     '--surface-3': 'var(--secondary)',
-    '--text-primary': 'var(--pure-white)',
-    '--text-secondary': 'var(--white-80)',
-    '--text-tertiary': 'var(--white-60)',
+    '--text-primary': '#fafafa',
+    '--text-secondary': 'var(--white-78)',
+    '--text-tertiary': 'var(--white-55)',
     '--text-helper': 'var(--muted-foreground)',
     '--text-disabled': 'var(--white-30)',
     '--state-error': '#ef4444',
@@ -377,6 +403,7 @@ export const cssVars = {
     '--font-size-7xl': 'var(--text-7xl)',
     '--font-size-8xl': 'var(--text-8xl)',
     '--font-size-9xl': 'var(--text-9xl)',
+    '--text-control': 'var(--text-sm)',
     '--weight-normal': '400',
     '--weight-medium': '500',
     '--weight-semibold': '600',
@@ -427,14 +454,19 @@ export const cssVars = {
     '--container-max': '80rem',
     '--container-prose': '48rem',
     '--container-wide': '72rem',
-    '--gutter': '1rem',
+    '--gutter': 'max(1rem,var(--safe-left),var(--safe-right))',
     '--gutter-sm': '1.5rem',
     '--gutter-lg': '2rem',
-    '--section-y': '4rem',
-    '--section-y-lg': '6rem',
-    '--hero-y': '5rem',
-    '--hero-y-lg': '8rem',
-    '--header-height': '4rem',
+    '--section-y': '2.5rem',
+    '--section-y-lg': '3.5rem',
+    '--hero-y': '3rem',
+    '--hero-y-lg': '4.5rem',
+    '--header-height': '3.5rem',
+    '--tap-target': '44px',
+    '--safe-top': 'env(safe-area-inset-top,0px)',
+    '--safe-right': 'env(safe-area-inset-right,0px)',
+    '--safe-bottom': 'env(safe-area-inset-bottom,0px)',
+    '--safe-left': 'env(safe-area-inset-left,0px)',
     '--grid-columns': '12',
     '--grid-gap': 'var(--space-6)',
     '--grid-gap-tight': 'var(--space-4)',

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@hanzo/design",
-  "version": "0.3.5",
-  "packageManager": "pnpm@11.17.0",
-  "description": "Hanzo Design System \u2014 monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
+  "version": "0.4.1",
+  "description": "Hanzo Design System — monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -27,20 +26,15 @@
     "./prompts/*": "./prompts/*",
     "./content/*": "./content/*",
     "./assets/*": "./assets/*",
-    "./skills/*": "./skills/*"
-  },
-  "scripts": {
-    "gen": "node scripts/gen-tokens.mjs",
-    "test": "node scripts/check-tokens.mjs && node scripts/lint.mjs components",
-    "build": "pnpm gen && pnpm test && tsc -p tsconfig.json",
-    "prepublishOnly": "pnpm build",
-    "lint": "node scripts/lint.mjs"
+    "./skills/*": "./skills/*",
+    "./tailwind.css": "./tailwind.css"
   },
   "devDependencies": {
     "typescript": "^5.9.3"
   },
   "files": [
     "dist",
+    "tailwind.css",
     "src",
     "styles.css",
     "tokens",
@@ -67,5 +61,11 @@
   },
   "bin": {
     "hanzo-design-lint": "./scripts/lint.mjs"
+  },
+  "scripts": {
+    "gen": "node scripts/gen-tokens.mjs",
+    "test": "node scripts/check-tokens.mjs && node scripts/lint.mjs components",
+    "build": "pnpm gen && pnpm test && tsc -p tsconfig.json",
+    "lint": "node scripts/lint.mjs"
   }
 }

package/scripts/check-tokens.mjs

@@ -59,6 +59,46 @@ const pass = (msg) => console.log(`  ok    ${msg}`)
     : pass(`all ${urls.length} asset url()s resolve from the package root`)
 }
 
+// ── 1b. the Tailwind bridge is complete and self-contained ───────────────
+// An app should write ONE import and get working utilities. Each thing checked
+// here failed silently in production before it was checked: a missing slot
+// makes that utility resolve to nothing (`border-border` -> currentColor -> a
+// white hairline on black), and a surviving @import makes the browser drop
+// every token without a word.
+{
+  const tw = strip(read(join(root, 'tailwind.css')))
+  tw.includes('@import')
+    ? fail('tailwind.css contains an @import — invalid after `@import "tailwindcss"`, so the tokens are dropped')
+    : pass('tailwind.css has no @import to invalidate')
+
+  // Every Tailwind colour slot an app will reach for must be mapped.
+  const slots = ['background', 'foreground', 'card', 'popover', 'primary', 'secondary',
+                 'muted', 'muted-foreground', 'accent', 'destructive', 'border', 'input', 'ring']
+  const unmapped = slots.filter((s) => !tw.includes(`--color-${s}:`))
+  unmapped.length
+    ? fail(`tailwind.css does not map: ${unmapped.join(', ')}`)
+    : pass(`tailwind.css maps all ${slots.length} core colour slots`)
+
+  // And it must carry the values, not merely reference them.
+  tw.includes('--border:')
+    ? pass('tailwind.css carries the token values inline')
+    : fail('tailwind.css maps slots but carries no tokens — every utility resolves to nothing')
+}
+
+// ── 1c. element defaults must LOSE to an app's utilities ─────────────────
+// A rule outside a cascade layer beats a rule inside one regardless of
+// specificity, so an unlayered `a{color:...}` here silently outranked every
+// Tailwind text utility on every anchor — a `text-neutral-950` primary button
+// rendered white-on-white and read as a rendering glitch. These are DEFAULTS;
+// a default that cannot be overridden is not a default.
+{
+  const base = strip(read(join(tokensDir, 'base.css'))).trim()
+  const layered = /^@layer\s+base\s*\{/.test(base) && base.endsWith('}')
+  layered
+    ? pass('base.css element defaults are inside @layer base')
+    : fail('base.css is UNLAYERED — its element rules outrank every utility an app writes')
+}
+
 // ── 2. every var() used inside the token layer must resolve ──────────────
 {
   const declared = new Set()
@@ -104,7 +144,11 @@ const pass = (msg) => console.log(`  ok    ${msg}`)
   }
 
   const CANVASES = ['background', 'card', 'popover', 'muted', 'secondary', 'surface-card', 'surface-overlay']
-  const GATED = { ring: 3, 'border-strong': 3 }
+  // The gate follows the DUTY, not the name. --border-control is the rung that
+  // draws a control's edge and --ring the focus indicator; those two owe 3:1.
+  // --border / --border-strong are decorative hairlines and owe nothing — that
+  // is exactly why they are allowed to be quiet enough to look like something.
+  const GATED = { ring: 3, 'border-control': 3 }
   for (const [theme, scope] of Object.entries(themes)) {
     for (const [tok, min] of Object.entries(GATED)) {
       let worst = Infinity, where = ''
@@ -118,6 +162,25 @@ const pass = (msg) => console.log(`  ok    ${msg}`)
         : pass(`--${tok} (${theme}) ${worst.toFixed(2)}:1 worst case (${where})`)
     }
   }
+
+  // ── 4. every white-alpha token must be restated for the light theme ──────
+  // The opacity ladder does NOT invert. A semantic token whose dark value is
+  // rgb(255 255 255 / a) is white-on-white in `.light` — the border does not
+  // change colour, it stops existing — and nothing renders an error. The raw
+  // ladder itself (--white-*) is exempt: it is a palette, not a semantic token,
+  // and light-theme tokens are expected to restate rather than invert it.
+  {
+    const PALETTE = /^(white|neutral|pure|hanzo)-/
+    const lightKeys = new Set(Object.keys(block(/\.light\s*\{([\s\S]*?)\n\}/)))
+    const leaked = Object.keys(dark).filter((k) => {
+      if (PALETTE.test(k) || lightKeys.has(k)) return false
+      const c = rgb(deref(dark[k], dark))
+      return c && c[3] < 1 && c[0] > 200 && c[1] > 200 && c[2] > 200
+    })
+    leaked.length
+      ? leaked.forEach((k) => fail(`--${k} is white-alpha and has no .light value — it vanishes in the light theme`))
+      : pass(`every white-alpha token is restated in .light`)
+  }
 }
 
 console.log(failures ? `\n${failures} check(s) failed` : '\nall token checks passed')

package/scripts/gen-tokens.mjs

@@ -124,3 +124,82 @@ const bundle = banner + FILES.map((f) => {
 }).join('')
 writeFileSync(join(root, 'styles.css'), bundle)
 console.log(`gen-tokens: wrote styles.css — ${FILES.length} token groups, flattened`)
+
+// ── tailwind.css — the ONE line a Tailwind app writes ────────────────────
+// Every app that consumed these tokens still had to hand-write the bridge from
+// our variable names to Tailwind's utility namespace:
+//
+//   @theme inline { --color-background: var(--background); ...twenty more }
+//
+// Twenty lines of boilerplate, copied into each new app, is a drift vector with
+// a silent failure mode: miss one and that utility resolves to nothing —
+// `border-border` becomes currentColor and paints a white hairline on black,
+// which reads as a design choice rather than a missing line. Tabs shipped with
+// three of these and used forty-one.
+//
+// So the bridge is generated here from SLOTS, and an app writes one import
+// after `@import "tailwindcss"`. There is nothing left to get wrong, and adding
+// a semantic token wires it up for every app at once.
+const SLOTS = [
+  'background', 'foreground',
+  'card', 'card-foreground',
+  'popover', 'popover-foreground',
+  'primary', 'primary-foreground',
+  'secondary', 'secondary-foreground',
+  'muted', 'muted-foreground',
+  'accent', 'accent-foreground',
+  'destructive', 'destructive-foreground',
+  'border', 'input', 'ring',
+]
+// State colours are their own vocabulary and keep their names, so `text-error`
+// and `bg-online` mean what they say instead of borrowing a neutral slot.
+const STATE = { error: 'state-error', success: 'state-success', online: 'state-online' }
+
+const declared = new Set(flat.map(([n]) => n.replace(/^--/, '')))
+const missing = SLOTS.filter((s) => !declared.has(s))
+if (missing.length) {
+  console.error(`gen-tokens: tokens/colors.css declares no --${missing.join(', --')}`)
+  process.exit(1)
+}
+
+const tw = `/* Hanzo Design System — Tailwind v4 bridge. The ONE import a Tailwind app adds.
+ *
+ * AUTO-GENERATED by scripts/gen-tokens.mjs — DO NOT EDIT.
+ *
+ *   @import "tailwindcss";
+ *   @import "@hanzo/design/tailwind.css";
+ *
+ * It carries the tokens AND maps them onto Tailwind's utility namespace, so
+ * \`bg-background\`, \`text-muted-foreground\` and \`border-border\` resolve to the
+ * system's values with nothing to wire up by hand.
+ *
+ * Import it AFTER tailwindcss: @theme has to come after the framework it
+ * extends, and the element defaults are layered so your utilities still win.
+ *
+ * "inline" is deliberate — it compiles \`border-border\` to var(--border) rather
+ * than to that variable's build-time value, so switching .light at runtime moves
+ * the UI and not merely the variables.
+ *
+ * The tokens are inlined below rather than @imported for the reason styles.css
+ * is flattened: an @import must precede every other rule, so importing this
+ * after tailwindcss would invalidate it and the browser would drop the whole
+ * token layer without a word.
+ */
+${bundle}
+
+@theme inline {
+${SLOTS.map((s) => `  --color-${s}: var(--${s});`).join('\n')}
+
+${Object.entries(STATE).map(([k, v]) => `  --color-${k}: var(--${v});`).join('\n')}
+
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+}
+`
+writeFileSync(join(root, 'tailwind.css'), tw)
+console.log(`gen-tokens: wrote tailwind.css — ${SLOTS.length} colour slots + ${Object.keys(STATE).length} states`)