@hanzo/design 0.4.0 → 0.4.2

package/dist/tokens.gen.js

@@ -19,54 +19,68 @@ 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',
-    'destructive': '#666666',
-    'destructive-foreground': '#f5f5f5',
-    'border': '#1f1f1f',
-    'input': '#1f1f1f',
-    'ring': 'var(--neutral-500)',
+    'background': '#0a0a0a',
+    'foreground': '#fafafa',
+    'card': '#0f0f0f',
+    'card-foreground': '#fafafa',
+    'popover': '#0f0f0f',
+    'popover-foreground': '#fafafa',
+    'primary': '#fafafa',
+    'primary-hover': '#e5e5e5',
+    'primary-foreground': '#0a0a0a',
+    'secondary': '#262626',
+    'secondary-hover': '#333333',
+    'secondary-foreground': '#fafafa',
+    'muted': '#171717',
+    'muted-foreground': '#a3a3a3',
+    'accent': '#262626',
+    'accent-foreground': '#fafafa',
+    'destructive': 'var(--state-error)',
+    'destructive-hover': '#dc2626',
+    'destructive-foreground': '#fafafa',
+    'border': 'var(--white-10)',
+    'border-strong': 'var(--white-16)',
+    'border-control': 'var(--white-15)',
+    'border-focus': 'var(--white-22)',
+    'border-selected': 'var(--white-30)',
+    'input': 'var(--border-control)',
+    'ring': 'var(--white-40)',
+    'ring-halo': 'var(--white-10)',
     '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)',
-    'surface-card-quiet': 'rgb(23 23 23 / .4)',
-    'surface-overlay': 'rgb(10 10 10 / .95)',
+    'surface-card': 'rgb(38 38 38 / .5)',
+    'surface-card-emphasis': 'rgb(38 38 38 / .75)',
+    'surface-card-quiet': 'rgb(38 38 38 / .35)',
+    'surface-overlay': 'rgb(23 23 23 / .92)',
     '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 +133,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 +187,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 = {
@@ -209,9 +229,11 @@ export const radius = {
 /** elevation tokens (from tokens/elevation.css). Values are raw CSS. */
 export const elevation = {
     'shadow-none': 'none',
-    'shadow-floating': '0 25px 50px -12px rgb(0 0 0 / .25)',
+    'shadow-floating': '0 24px 60px -16px rgb(0 0 0 / .75)',
     'shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
-    'ring-focus': '0 0 0 2px var(--ring)',
+    'edge-highlight': 'inset 0 1px 0 0 rgb(255 255 255 / .10)',
+    'bloom': '0 0 24px -2px rgb(255 255 255 / .28)',
+    'ring-focus': '0 0 0 3px var(--ring-halo)',
     'shadow-sm': '0 1px 2px 0 rgb(0 0 0 / .40)',
     'shadow': '0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .45)',
     'shadow-md': '0 4px 6px -1px rgb(0 0 0 / .50), 0 2px 4px -2px rgb(0 0 0 / .50)',
@@ -221,6 +243,7 @@ export const elevation = {
     'glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
     'glow-hero-blur': '120px',
     'sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
+    'sheen-edge': 'linear-gradient(90deg,transparent,rgb(255 255 255 / .14) 50%,transparent)',
     'gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
     'gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
     'gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
@@ -232,8 +255,10 @@ export const motion = {
     'duration-slow': '400ms',
     'duration-slower': '500ms',
     'duration-glow': '9s',
+    'duration-press': '90ms',
     'ease-out': 'cubic-bezier(0,0,0.2,1)',
     'ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
+    'ease-emphasis': 'cubic-bezier(0.16,1,0.3,1)',
     'stagger': '60ms',
     'entry-rise': '16px',
     'entry-rise-lg': '24px',
@@ -280,54 +305,68 @@ 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',
-    '--destructive': '#666666',
-    '--destructive-foreground': '#f5f5f5',
-    '--border': '#1f1f1f',
-    '--input': '#1f1f1f',
-    '--ring': 'var(--neutral-500)',
+    '--background': '#0a0a0a',
+    '--foreground': '#fafafa',
+    '--card': '#0f0f0f',
+    '--card-foreground': '#fafafa',
+    '--popover': '#0f0f0f',
+    '--popover-foreground': '#fafafa',
+    '--primary': '#fafafa',
+    '--primary-hover': '#e5e5e5',
+    '--primary-foreground': '#0a0a0a',
+    '--secondary': '#262626',
+    '--secondary-hover': '#333333',
+    '--secondary-foreground': '#fafafa',
+    '--muted': '#171717',
+    '--muted-foreground': '#a3a3a3',
+    '--accent': '#262626',
+    '--accent-foreground': '#fafafa',
+    '--destructive': 'var(--state-error)',
+    '--destructive-hover': '#dc2626',
+    '--destructive-foreground': '#fafafa',
+    '--border': 'var(--white-10)',
+    '--border-strong': 'var(--white-16)',
+    '--border-control': 'var(--white-15)',
+    '--border-focus': 'var(--white-22)',
+    '--border-selected': 'var(--white-30)',
+    '--input': 'var(--border-control)',
+    '--ring': 'var(--white-40)',
+    '--ring-halo': 'var(--white-10)',
     '--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)',
-    '--surface-card-quiet': 'rgb(23 23 23 / .4)',
-    '--surface-overlay': 'rgb(10 10 10 / .95)',
+    '--surface-card': 'rgb(38 38 38 / .5)',
+    '--surface-card-emphasis': 'rgb(38 38 38 / .75)',
+    '--surface-card-quiet': 'rgb(38 38 38 / .35)',
+    '--surface-overlay': 'rgb(23 23 23 / .92)',
     '--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 +416,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 +467,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)',
@@ -455,9 +500,11 @@ export const cssVars = {
     '--radius-composer': '28px',
     '--radius-full': '9999px',
     '--shadow-none': 'none',
-    '--shadow-floating': '0 25px 50px -12px rgb(0 0 0 / .25)',
+    '--shadow-floating': '0 24px 60px -16px rgb(0 0 0 / .75)',
     '--shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
-    '--ring-focus': '0 0 0 2px var(--ring)',
+    '--edge-highlight': 'inset 0 1px 0 0 rgb(255 255 255 / .10)',
+    '--bloom': '0 0 24px -2px rgb(255 255 255 / .28)',
+    '--ring-focus': '0 0 0 3px var(--ring-halo)',
     '--shadow-sm': '0 1px 2px 0 rgb(0 0 0 / .40)',
     '--shadow': '0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .45)',
     '--shadow-md': '0 4px 6px -1px rgb(0 0 0 / .50), 0 2px 4px -2px rgb(0 0 0 / .50)',
@@ -467,6 +514,7 @@ export const cssVars = {
     '--glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
     '--glow-hero-blur': '120px',
     '--sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
+    '--sheen-edge': 'linear-gradient(90deg,transparent,rgb(255 255 255 / .14) 50%,transparent)',
     '--gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
     '--gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
     '--gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
@@ -475,8 +523,10 @@ export const cssVars = {
     '--duration-slow': '400ms',
     '--duration-slower': '500ms',
     '--duration-glow': '9s',
+    '--duration-press': '90ms',
     '--ease-out': 'cubic-bezier(0,0,0.2,1)',
     '--ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
+    '--ease-emphasis': 'cubic-bezier(0.16,1,0.3,1)',
     '--stagger': '60ms',
     '--entry-rise': '16px',
     '--entry-rise-lg': '24px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/design",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "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.",
   "license": "BSD-3-Clause",

package/scripts/check-tokens.mjs

@@ -114,9 +114,17 @@ const pass = (msg) => console.log(`  ok    ${msg}`)
     : pass(`all ${used.size} internal var() references resolve`)
 }
 
-// ── 3. the non-text contrast gate (WCAG 1.4.11 / 2.4.11) ─────────────────
-// A focus indicator and a control boundary must clear 3:1 against EVERY surface
-// they can land on, in BOTH themes. --ring was #333333 = 1.66:1 on --background.
+// ── 3. the focus-indicator contrast gate (WCAG 2.4.11) ───────────────────
+// The focus indicator must clear 3:1 against EVERY surface it can land on, in
+// BOTH themes. --ring was #333333 = 1.66:1 on --background.
+//
+// --border-control was gated here too and no longer is. That was not a
+// regression, it was the point: pinning a control's RESTING edge at 3:1 forces
+// it to a mid-grey on a near-black ground, four times heavier than the hairline
+// beside it, and a form drawn that way reads as a wireframe. The edge is now
+// rgb(255 255 255 / .15) — the reference's own value — and the contrast budget
+// is spent entirely on --ring, which is what a keyboard user actually navigates
+// by. A resting edge is an affordance; a focus ring is a position.
 {
   const css = strip(read(join(tokensDir, 'colors.css')))
   const block = (re) => { const m = css.match(re); const o = {}; if (m) for (const [, n, v] of m[1].matchAll(/--([A-Za-z0-9-]+)\s*:\s*([^;]+);/g)) o[n] = v.trim(); return o }
@@ -144,7 +152,12 @@ 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 — and exactly ONE duty owes a
+  // ratio. --ring is the focus indicator: transient, keyboard-only, and the
+  // whole of how someone knows where they are. Every boundary that is merely an
+  // affordance — --border, --border-strong, --border-control, --border-focus,
+  // --border-selected — is free to be as quiet as it looks.
+  const GATED = { ring: 3 }
   for (const [theme, scope] of Object.entries(themes)) {
     for (const [tok, min] of Object.entries(GATED)) {
       let worst = Infinity, where = ''
@@ -158,6 +171,60 @@ 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 built from
+  // 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.
+  //
+  // Two things widen this from where it started. It scans tokens/elevation.css
+  // as well as tokens/colors.css, because that is where the light lives now —
+  // an inset white highlight, a white hover bloom and a white panel sheen all
+  // fail in `.light` exactly the way a white border does, and more invisibly,
+  // since a missing lift looks like a design choice. And it matches white-alpha
+  // ANYWHERE INSIDE a value rather than requiring the whole value to be one
+  // colour, because every one of those tokens is a shadow or a gradient with
+  // the colour buried in it — `inset 0 1px 0 0 rgb(255 255 255 / .07)` would
+  // have sailed through a whole-value parse.
+  {
+    const PALETTE = /^(white|neutral|pure|hanzo)-/
+    const FILES = ['colors', 'elevation']
+    const blockOf = (src, re) => { const m = strip(src).match(re); const o = {}; if (m) for (const [, n, v] of m[1].matchAll(/--([A-Za-z0-9-]+)\s*:\s*([^;]+);/g)) o[n] = v.trim(); return o }
+    const ROOT = /:root\s*\{([\s\S]*?)\n\}/
+    const LIGHT = /\.light\s*\{([\s\S]*?)\n\}/
+
+    const sources = Object.fromEntries(FILES.map((f) => [f, read(join(tokensDir, `${f}.css`))]))
+    // One scope to resolve against: elevation references --white-* rungs that
+    // colors declares, so a per-file scope could not expand them.
+    const scope = {}
+    for (const f of FILES) Object.assign(scope, blockOf(sources[f], ROOT))
+    // Restating in ANY file's .light block counts — the cascade does not care
+    // which file a declaration came from.
+    const lightKeys = new Set()
+    for (const f of FILES) for (const k of Object.keys(blockOf(sources[f], LIGHT))) lightKeys.add(k)
+
+    // Expansion STOPS at any token that is itself restated in `.light`.
+    // `--ring-focus: 0 0 0 3px var(--ring-halo)` is theme-safe precisely
+    // because --ring-halo inverts underneath it — var() resolves per theme at
+    // use time, so deferring to a token that flips IS the fix, and a checker
+    // that expanded through it would demand every wrapper be restated too.
+    const expand = (v, d = 0) =>
+      d > 10 ? v : String(v).replace(/var\(\s*--([A-Za-z0-9-]+)\s*\)/g,
+        (m, n) => (n in scope && !lightKeys.has(n) ? expand(scope[n], d + 1) : m))
+    const WHITE_ALPHA = /rgba?\(\s*255[\s,]+255[\s,]+255\s*[/,]\s*(?:0?\.\d+|0)\s*\)/i
+
+    const leaked = []
+    for (const f of FILES)
+      for (const k of Object.keys(blockOf(sources[f], ROOT))) {
+        if (PALETTE.test(k) || lightKeys.has(k)) continue
+        if (WHITE_ALPHA.test(expand(scope[k]))) leaked.push(`${k} (tokens/${f}.css)`)
+      }
+    leaked.length
+      ? leaked.forEach((k) => fail(`--${k} is built from white-alpha and has no .light value — it vanishes in the light theme`))
+      : pass(`every white-alpha token in ${FILES.join('/')}.css is restated in .light`)
+  }
 }
 
 console.log(failures ? `\n${failures} check(s) failed` : '\nall token checks passed')