@hanzo/design 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/components/core/Avatar.jsx +1 -1
  2. package/components/core/Badge.jsx +10 -7
  3. package/components/core/Button.jsx +1 -2
  4. package/components/core/Card.jsx +1 -1
  5. package/components/core/Progress.jsx +1 -1
  6. package/components/core/Table.jsx +2 -2
  7. package/components/forms/Checkbox.jsx +1 -1
  8. package/components/forms/Input.jsx +4 -4
  9. package/components/forms/Select.jsx +3 -3
  10. package/components/forms/Slider.jsx +1 -1
  11. package/components/forms/Textarea.jsx +3 -3
  12. package/components/navigation/Accordion.jsx +2 -2
  13. package/components/navigation/navigation.card.html +1 -1
  14. package/components/overlays/Dialog.jsx +1 -1
  15. package/components/overlays/DropdownMenu.jsx +3 -3
  16. package/components/overlays/Sheet.jsx +3 -3
  17. package/components/overlays/Toaster.jsx +1 -1
  18. package/dist/tokens.gen.d.ts +92 -60
  19. package/dist/tokens.gen.d.ts.map +1 -1
  20. package/dist/tokens.gen.js +92 -60
  21. package/package.json +8 -10
  22. package/scripts/check-tokens.mjs +24 -1
  23. package/src/tokens.gen.ts +92 -60
  24. package/styles.css +281 -64
  25. package/tailwind.css +281 -64
  26. package/tokens/base.css +93 -5
  27. package/tokens/colors.css +121 -52
  28. package/tokens/spacing.css +46 -7
  29. package/tokens/typography.css +21 -0
package/dist/tokens.gen.js CHANGED
@@ -19,37 +19,50 @@ export const colors = {
19
19
  'hanzo-black': '#0A0A0B',
20
20
  'hanzo-white': '#FFFFFF',
21
21
  'white-05': 'rgb(255 255 255 / .05)',
22
+ 'white-06': 'rgb(255 255 255 / .06)',
23
+ 'white-08': 'rgb(255 255 255 / .08)',
22
24
  'white-10': 'rgb(255 255 255 / .10)',
23
25
  'white-15': 'rgb(255 255 255 / .15)',
26
+ 'white-16': 'rgb(255 255 255 / .16)',
24
27
  'white-20': 'rgb(255 255 255 / .20)',
28
+ 'white-22': 'rgb(255 255 255 / .22)',
25
29
  'white-30': 'rgb(255 255 255 / .30)',
26
30
  'white-40': 'rgb(255 255 255 / .40)',
31
+ 'white-55': 'rgb(255 255 255 / .55)',
27
32
  'white-60': 'rgb(255 255 255 / .60)',
33
+ 'white-78': 'rgb(255 255 255 / .78)',
28
34
  'white-80': 'rgb(255 255 255 / .80)',
29
- 'background': '#000000',
30
- 'foreground': '#ededed',
31
- 'card': '#0a0a0a',
32
- 'card-foreground': '#f5f5f5',
33
- 'popover': '#0a0a0a',
34
- 'popover-foreground': '#f5f5f5',
35
- 'primary': '#ffffff',
36
- 'primary-foreground': '#000000',
37
- 'secondary': '#1a1a1a',
38
- 'secondary-foreground': '#f5f5f5',
39
- 'muted': '#101010',
40
- 'muted-foreground': '#888888',
41
- 'accent': '#1a1a1a',
42
- 'accent-foreground': '#f5f5f5',
35
+ 'background': '#0a0a0a',
36
+ 'foreground': '#fafafa',
37
+ 'card': '#0f0f0f',
38
+ 'card-foreground': '#fafafa',
39
+ 'popover': '#0f0f0f',
40
+ 'popover-foreground': '#fafafa',
41
+ 'primary': '#fafafa',
42
+ 'primary-hover': '#d4d4d4',
43
+ 'primary-foreground': '#0a0a0a',
44
+ 'secondary': '#262626',
45
+ 'secondary-foreground': '#fafafa',
46
+ 'muted': '#171717',
47
+ 'muted-foreground': '#a3a3a3',
48
+ 'accent': '#262626',
49
+ 'accent-foreground': '#fafafa',
43
50
  'destructive': '#666666',
44
- 'destructive-foreground': '#f5f5f5',
45
- 'border': '#1f1f1f',
46
- 'input': '#1f1f1f',
51
+ 'destructive-foreground': '#fafafa',
52
+ 'border': 'var(--white-10)',
53
+ 'border-strong': 'var(--white-16)',
54
+ 'border-control': 'var(--neutral-500)',
55
+ 'border-focus': 'var(--neutral-400)',
56
+ 'input': 'var(--border-control)',
47
57
  'ring': 'var(--neutral-500)',
48
58
  'brand': '#e4e4e7',
49
59
  'brand-foreground': '#09090b',
50
60
  'brand-muted': '#a3a3a3',
51
61
  'black': '#000000',
52
- 'white': '#f5f5f5',
62
+ 'white': '#fafafa',
63
+ 'selection': 'var(--white-20)',
64
+ 'glass': 'var(--white-05)',
65
+ 'glass-strong': 'var(--white-08)',
53
66
  'surface-page': 'var(--background)',
54
67
  'surface-card': 'rgb(23 23 23 / .5)',
55
68
  'surface-card-emphasis': 'rgb(23 23 23 / .8)',
@@ -57,16 +70,13 @@ export const colors = {
57
70
  'surface-overlay': 'rgb(10 10 10 / .95)',
58
71
  'surface-header': 'rgb(0 0 0 / .7)',
59
72
  'surface-scrim': 'rgb(0 0 0 / .8)',
60
- 'border-hairline': 'var(--neutral-800)',
61
- 'border-card': 'var(--white-10)',
62
- 'border-strong': 'var(--neutral-500)',
63
73
  'surface-0': 'var(--background)',
64
74
  'surface-1': 'var(--card)',
65
75
  'surface-2': 'var(--muted)',
66
76
  'surface-3': 'var(--secondary)',
67
- 'text-primary': 'var(--pure-white)',
68
- 'text-secondary': 'var(--white-80)',
69
- 'text-tertiary': 'var(--white-60)',
77
+ 'text-primary': '#fafafa',
78
+ 'text-secondary': 'var(--white-78)',
79
+ 'text-tertiary': 'var(--white-55)',
70
80
  'text-helper': 'var(--muted-foreground)',
71
81
  'text-disabled': 'var(--white-30)',
72
82
  'state-error': '#ef4444',
@@ -119,6 +129,7 @@ export const typography = {
119
129
  'font-size-7xl': 'var(--text-7xl)',
120
130
  'font-size-8xl': 'var(--text-8xl)',
121
131
  'font-size-9xl': 'var(--text-9xl)',
132
+ 'text-control': 'var(--text-sm)',
122
133
  'weight-normal': '400',
123
134
  'weight-medium': '500',
124
135
  'weight-semibold': '600',
@@ -172,14 +183,19 @@ export const spacing = {
172
183
  'container-max': '80rem',
173
184
  'container-prose': '48rem',
174
185
  'container-wide': '72rem',
175
- 'gutter': '1rem',
186
+ 'gutter': 'max(1rem,var(--safe-left),var(--safe-right))',
176
187
  'gutter-sm': '1.5rem',
177
188
  'gutter-lg': '2rem',
178
- 'section-y': '4rem',
179
- 'section-y-lg': '6rem',
180
- 'hero-y': '5rem',
181
- 'hero-y-lg': '8rem',
182
- 'header-height': '4rem',
189
+ 'section-y': '2.5rem',
190
+ 'section-y-lg': '3.5rem',
191
+ 'hero-y': '3rem',
192
+ 'hero-y-lg': '4.5rem',
193
+ 'header-height': '3.5rem',
194
+ 'tap-target': '44px',
195
+ 'safe-top': 'env(safe-area-inset-top,0px)',
196
+ 'safe-right': 'env(safe-area-inset-right,0px)',
197
+ 'safe-bottom': 'env(safe-area-inset-bottom,0px)',
198
+ 'safe-left': 'env(safe-area-inset-left,0px)',
183
199
  };
184
200
  /** grid tokens (from tokens/grid.css). Values are raw CSS. */
185
201
  export const grid = {
@@ -280,37 +296,50 @@ export const cssVars = {
280
296
  '--hanzo-black': '#0A0A0B',
281
297
  '--hanzo-white': '#FFFFFF',
282
298
  '--white-05': 'rgb(255 255 255 / .05)',
299
+ '--white-06': 'rgb(255 255 255 / .06)',
300
+ '--white-08': 'rgb(255 255 255 / .08)',
283
301
  '--white-10': 'rgb(255 255 255 / .10)',
284
302
  '--white-15': 'rgb(255 255 255 / .15)',
303
+ '--white-16': 'rgb(255 255 255 / .16)',
285
304
  '--white-20': 'rgb(255 255 255 / .20)',
305
+ '--white-22': 'rgb(255 255 255 / .22)',
286
306
  '--white-30': 'rgb(255 255 255 / .30)',
287
307
  '--white-40': 'rgb(255 255 255 / .40)',
308
+ '--white-55': 'rgb(255 255 255 / .55)',
288
309
  '--white-60': 'rgb(255 255 255 / .60)',
310
+ '--white-78': 'rgb(255 255 255 / .78)',
289
311
  '--white-80': 'rgb(255 255 255 / .80)',
290
- '--background': '#000000',
291
- '--foreground': '#ededed',
292
- '--card': '#0a0a0a',
293
- '--card-foreground': '#f5f5f5',
294
- '--popover': '#0a0a0a',
295
- '--popover-foreground': '#f5f5f5',
296
- '--primary': '#ffffff',
297
- '--primary-foreground': '#000000',
298
- '--secondary': '#1a1a1a',
299
- '--secondary-foreground': '#f5f5f5',
300
- '--muted': '#101010',
301
- '--muted-foreground': '#888888',
302
- '--accent': '#1a1a1a',
303
- '--accent-foreground': '#f5f5f5',
312
+ '--background': '#0a0a0a',
313
+ '--foreground': '#fafafa',
314
+ '--card': '#0f0f0f',
315
+ '--card-foreground': '#fafafa',
316
+ '--popover': '#0f0f0f',
317
+ '--popover-foreground': '#fafafa',
318
+ '--primary': '#fafafa',
319
+ '--primary-hover': '#d4d4d4',
320
+ '--primary-foreground': '#0a0a0a',
321
+ '--secondary': '#262626',
322
+ '--secondary-foreground': '#fafafa',
323
+ '--muted': '#171717',
324
+ '--muted-foreground': '#a3a3a3',
325
+ '--accent': '#262626',
326
+ '--accent-foreground': '#fafafa',
304
327
  '--destructive': '#666666',
305
- '--destructive-foreground': '#f5f5f5',
306
- '--border': '#1f1f1f',
307
- '--input': '#1f1f1f',
328
+ '--destructive-foreground': '#fafafa',
329
+ '--border': 'var(--white-10)',
330
+ '--border-strong': 'var(--white-16)',
331
+ '--border-control': 'var(--neutral-500)',
332
+ '--border-focus': 'var(--neutral-400)',
333
+ '--input': 'var(--border-control)',
308
334
  '--ring': 'var(--neutral-500)',
309
335
  '--brand': '#e4e4e7',
310
336
  '--brand-foreground': '#09090b',
311
337
  '--brand-muted': '#a3a3a3',
312
338
  '--black': '#000000',
313
- '--white': '#f5f5f5',
339
+ '--white': '#fafafa',
340
+ '--selection': 'var(--white-20)',
341
+ '--glass': 'var(--white-05)',
342
+ '--glass-strong': 'var(--white-08)',
314
343
  '--surface-page': 'var(--background)',
315
344
  '--surface-card': 'rgb(23 23 23 / .5)',
316
345
  '--surface-card-emphasis': 'rgb(23 23 23 / .8)',
@@ -318,16 +347,13 @@ export const cssVars = {
318
347
  '--surface-overlay': 'rgb(10 10 10 / .95)',
319
348
  '--surface-header': 'rgb(0 0 0 / .7)',
320
349
  '--surface-scrim': 'rgb(0 0 0 / .8)',
321
- '--border-hairline': 'var(--neutral-800)',
322
- '--border-card': 'var(--white-10)',
323
- '--border-strong': 'var(--neutral-500)',
324
350
  '--surface-0': 'var(--background)',
325
351
  '--surface-1': 'var(--card)',
326
352
  '--surface-2': 'var(--muted)',
327
353
  '--surface-3': 'var(--secondary)',
328
- '--text-primary': 'var(--pure-white)',
329
- '--text-secondary': 'var(--white-80)',
330
- '--text-tertiary': 'var(--white-60)',
354
+ '--text-primary': '#fafafa',
355
+ '--text-secondary': 'var(--white-78)',
356
+ '--text-tertiary': 'var(--white-55)',
331
357
  '--text-helper': 'var(--muted-foreground)',
332
358
  '--text-disabled': 'var(--white-30)',
333
359
  '--state-error': '#ef4444',
@@ -377,6 +403,7 @@ export const cssVars = {
377
403
  '--font-size-7xl': 'var(--text-7xl)',
378
404
  '--font-size-8xl': 'var(--text-8xl)',
379
405
  '--font-size-9xl': 'var(--text-9xl)',
406
+ '--text-control': 'var(--text-sm)',
380
407
  '--weight-normal': '400',
381
408
  '--weight-medium': '500',
382
409
  '--weight-semibold': '600',
@@ -427,14 +454,19 @@ export const cssVars = {
427
454
  '--container-max': '80rem',
428
455
  '--container-prose': '48rem',
429
456
  '--container-wide': '72rem',
430
- '--gutter': '1rem',
457
+ '--gutter': 'max(1rem,var(--safe-left),var(--safe-right))',
431
458
  '--gutter-sm': '1.5rem',
432
459
  '--gutter-lg': '2rem',
433
- '--section-y': '4rem',
434
- '--section-y-lg': '6rem',
435
- '--hero-y': '5rem',
436
- '--hero-y-lg': '8rem',
437
- '--header-height': '4rem',
460
+ '--section-y': '2.5rem',
461
+ '--section-y-lg': '3.5rem',
462
+ '--hero-y': '3rem',
463
+ '--hero-y-lg': '4.5rem',
464
+ '--header-height': '3.5rem',
465
+ '--tap-target': '44px',
466
+ '--safe-top': 'env(safe-area-inset-top,0px)',
467
+ '--safe-right': 'env(safe-area-inset-right,0px)',
468
+ '--safe-bottom': 'env(safe-area-inset-bottom,0px)',
469
+ '--safe-left': 'env(safe-area-inset-left,0px)',
438
470
  '--grid-columns': '12',
439
471
  '--grid-gap': 'var(--space-6)',
440
472
  '--grid-gap-tight': 'var(--space-4)',
package/package.json CHANGED
@@ -1,8 +1,7 @@
1
1
  {
2
2
  "name": "@hanzo/design",
3
- "version": "0.4.0",
4
- "packageManager": "pnpm@11.17.0",
5
- "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.",
3
+ "version": "0.4.1",
4
+ "description": "Hanzo Design System — monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
6
5
  "license": "BSD-3-Clause",
7
6
  "repository": {
8
7
  "type": "git",
@@ -30,13 +29,6 @@
30
29
  "./skills/*": "./skills/*",
31
30
  "./tailwind.css": "./tailwind.css"
32
31
  },
33
- "scripts": {
34
- "gen": "node scripts/gen-tokens.mjs",
35
- "test": "node scripts/check-tokens.mjs && node scripts/lint.mjs components",
36
- "build": "pnpm gen && pnpm test && tsc -p tsconfig.json",
37
- "prepublishOnly": "pnpm build",
38
- "lint": "node scripts/lint.mjs"
39
- },
40
32
  "devDependencies": {
41
33
  "typescript": "^5.9.3"
42
34
  },
@@ -69,5 +61,11 @@
69
61
  },
70
62
  "bin": {
71
63
  "hanzo-design-lint": "./scripts/lint.mjs"
64
+ },
65
+ "scripts": {
66
+ "gen": "node scripts/gen-tokens.mjs",
67
+ "test": "node scripts/check-tokens.mjs && node scripts/lint.mjs components",
68
+ "build": "pnpm gen && pnpm test && tsc -p tsconfig.json",
69
+ "lint": "node scripts/lint.mjs"
72
70
  }
73
71
  }
package/scripts/check-tokens.mjs CHANGED
@@ -144,7 +144,11 @@ const pass = (msg) => console.log(` ok ${msg}`)
144
144
  }
145
145
 
146
146
  const CANVASES = ['background', 'card', 'popover', 'muted', 'secondary', 'surface-card', 'surface-overlay']
147
- const GATED = { ring: 3, 'border-strong': 3 }
147
+ // The gate follows the DUTY, not the name. --border-control is the rung that
148
+ // draws a control's edge and --ring the focus indicator; those two owe 3:1.
149
+ // --border / --border-strong are decorative hairlines and owe nothing — that
150
+ // is exactly why they are allowed to be quiet enough to look like something.
151
+ const GATED = { ring: 3, 'border-control': 3 }
148
152
  for (const [theme, scope] of Object.entries(themes)) {
149
153
  for (const [tok, min] of Object.entries(GATED)) {
150
154
  let worst = Infinity, where = ''
@@ -158,6 +162,25 @@ const pass = (msg) => console.log(` ok ${msg}`)
158
162
  : pass(`--${tok} (${theme}) ${worst.toFixed(2)}:1 worst case (${where})`)
159
163
  }
160
164
  }
165
+
166
+ // ── 4. every white-alpha token must be restated for the light theme ──────
167
+ // The opacity ladder does NOT invert. A semantic token whose dark value is
168
+ // rgb(255 255 255 / a) is white-on-white in `.light` — the border does not
169
+ // change colour, it stops existing — and nothing renders an error. The raw
170
+ // ladder itself (--white-*) is exempt: it is a palette, not a semantic token,
171
+ // and light-theme tokens are expected to restate rather than invert it.
172
+ {
173
+ const PALETTE = /^(white|neutral|pure|hanzo)-/
174
+ const lightKeys = new Set(Object.keys(block(/\.light\s*\{([\s\S]*?)\n\}/)))
175
+ const leaked = Object.keys(dark).filter((k) => {
176
+ if (PALETTE.test(k) || lightKeys.has(k)) return false
177
+ const c = rgb(deref(dark[k], dark))
178
+ return c && c[3] < 1 && c[0] > 200 && c[1] > 200 && c[2] > 200
179
+ })
180
+ leaked.length
181
+ ? leaked.forEach((k) => fail(`--${k} is white-alpha and has no .light value — it vanishes in the light theme`))
182
+ : pass(`every white-alpha token is restated in .light`)
183
+ }
161
184
  }
162
185
 
163
186
  console.log(failures ? `\n${failures} check(s) failed` : '\nall token checks passed')
package/src/tokens.gen.ts CHANGED
@@ -20,37 +20,50 @@ export const colors = {
20
20
  'hanzo-black': '#0A0A0B',
21
21
  'hanzo-white': '#FFFFFF',
22
22
  'white-05': 'rgb(255 255 255 / .05)',
23
+ 'white-06': 'rgb(255 255 255 / .06)',
24
+ 'white-08': 'rgb(255 255 255 / .08)',
23
25
  'white-10': 'rgb(255 255 255 / .10)',
24
26
  'white-15': 'rgb(255 255 255 / .15)',
27
+ 'white-16': 'rgb(255 255 255 / .16)',
25
28
  'white-20': 'rgb(255 255 255 / .20)',
29
+ 'white-22': 'rgb(255 255 255 / .22)',
26
30
  'white-30': 'rgb(255 255 255 / .30)',
27
31
  'white-40': 'rgb(255 255 255 / .40)',
32
+ 'white-55': 'rgb(255 255 255 / .55)',
28
33
  'white-60': 'rgb(255 255 255 / .60)',
34
+ 'white-78': 'rgb(255 255 255 / .78)',
29
35
  'white-80': 'rgb(255 255 255 / .80)',
30
- 'background': '#000000',
31
- 'foreground': '#ededed',
32
- 'card': '#0a0a0a',
33
- 'card-foreground': '#f5f5f5',
34
- 'popover': '#0a0a0a',
35
- 'popover-foreground': '#f5f5f5',
36
- 'primary': '#ffffff',
37
- 'primary-foreground': '#000000',
38
- 'secondary': '#1a1a1a',
39
- 'secondary-foreground': '#f5f5f5',
40
- 'muted': '#101010',
41
- 'muted-foreground': '#888888',
42
- 'accent': '#1a1a1a',
43
- 'accent-foreground': '#f5f5f5',
36
+ 'background': '#0a0a0a',
37
+ 'foreground': '#fafafa',
38
+ 'card': '#0f0f0f',
39
+ 'card-foreground': '#fafafa',
40
+ 'popover': '#0f0f0f',
41
+ 'popover-foreground': '#fafafa',
42
+ 'primary': '#fafafa',
43
+ 'primary-hover': '#d4d4d4',
44
+ 'primary-foreground': '#0a0a0a',
45
+ 'secondary': '#262626',
46
+ 'secondary-foreground': '#fafafa',
47
+ 'muted': '#171717',
48
+ 'muted-foreground': '#a3a3a3',
49
+ 'accent': '#262626',
50
+ 'accent-foreground': '#fafafa',
44
51
  'destructive': '#666666',
45
- 'destructive-foreground': '#f5f5f5',
46
- 'border': '#1f1f1f',
47
- 'input': '#1f1f1f',
52
+ 'destructive-foreground': '#fafafa',
53
+ 'border': 'var(--white-10)',
54
+ 'border-strong': 'var(--white-16)',
55
+ 'border-control': 'var(--neutral-500)',
56
+ 'border-focus': 'var(--neutral-400)',
57
+ 'input': 'var(--border-control)',
48
58
  'ring': 'var(--neutral-500)',
49
59
  'brand': '#e4e4e7',
50
60
  'brand-foreground': '#09090b',
51
61
  'brand-muted': '#a3a3a3',
52
62
  'black': '#000000',
53
- 'white': '#f5f5f5',
63
+ 'white': '#fafafa',
64
+ 'selection': 'var(--white-20)',
65
+ 'glass': 'var(--white-05)',
66
+ 'glass-strong': 'var(--white-08)',
54
67
  'surface-page': 'var(--background)',
55
68
  'surface-card': 'rgb(23 23 23 / .5)',
56
69
  'surface-card-emphasis': 'rgb(23 23 23 / .8)',
@@ -58,16 +71,13 @@ export const colors = {
58
71
  'surface-overlay': 'rgb(10 10 10 / .95)',
59
72
  'surface-header': 'rgb(0 0 0 / .7)',
60
73
  'surface-scrim': 'rgb(0 0 0 / .8)',
61
- 'border-hairline': 'var(--neutral-800)',
62
- 'border-card': 'var(--white-10)',
63
- 'border-strong': 'var(--neutral-500)',
64
74
  'surface-0': 'var(--background)',
65
75
  'surface-1': 'var(--card)',
66
76
  'surface-2': 'var(--muted)',
67
77
  'surface-3': 'var(--secondary)',
68
- 'text-primary': 'var(--pure-white)',
69
- 'text-secondary': 'var(--white-80)',
70
- 'text-tertiary': 'var(--white-60)',
78
+ 'text-primary': '#fafafa',
79
+ 'text-secondary': 'var(--white-78)',
80
+ 'text-tertiary': 'var(--white-55)',
71
81
  'text-helper': 'var(--muted-foreground)',
72
82
  'text-disabled': 'var(--white-30)',
73
83
  'state-error': '#ef4444',
@@ -121,6 +131,7 @@ export const typography = {
121
131
  'font-size-7xl': 'var(--text-7xl)',
122
132
  'font-size-8xl': 'var(--text-8xl)',
123
133
  'font-size-9xl': 'var(--text-9xl)',
134
+ 'text-control': 'var(--text-sm)',
124
135
  'weight-normal': '400',
125
136
  'weight-medium': '500',
126
137
  'weight-semibold': '600',
@@ -175,14 +186,19 @@ export const spacing = {
175
186
  'container-max': '80rem',
176
187
  'container-prose': '48rem',
177
188
  'container-wide': '72rem',
178
- 'gutter': '1rem',
189
+ 'gutter': 'max(1rem,var(--safe-left),var(--safe-right))',
179
190
  'gutter-sm': '1.5rem',
180
191
  'gutter-lg': '2rem',
181
- 'section-y': '4rem',
182
- 'section-y-lg': '6rem',
183
- 'hero-y': '5rem',
184
- 'hero-y-lg': '8rem',
185
- 'header-height': '4rem',
192
+ 'section-y': '2.5rem',
193
+ 'section-y-lg': '3.5rem',
194
+ 'hero-y': '3rem',
195
+ 'hero-y-lg': '4.5rem',
196
+ 'header-height': '3.5rem',
197
+ 'tap-target': '44px',
198
+ 'safe-top': 'env(safe-area-inset-top,0px)',
199
+ 'safe-right': 'env(safe-area-inset-right,0px)',
200
+ 'safe-bottom': 'env(safe-area-inset-bottom,0px)',
201
+ 'safe-left': 'env(safe-area-inset-left,0px)',
186
202
  } as const
187
203
 
188
204
  /** grid tokens (from tokens/grid.css). Values are raw CSS. */
@@ -293,37 +309,50 @@ export const cssVars = {
293
309
  '--hanzo-black': '#0A0A0B',
294
310
  '--hanzo-white': '#FFFFFF',
295
311
  '--white-05': 'rgb(255 255 255 / .05)',
312
+ '--white-06': 'rgb(255 255 255 / .06)',
313
+ '--white-08': 'rgb(255 255 255 / .08)',
296
314
  '--white-10': 'rgb(255 255 255 / .10)',
297
315
  '--white-15': 'rgb(255 255 255 / .15)',
316
+ '--white-16': 'rgb(255 255 255 / .16)',
298
317
  '--white-20': 'rgb(255 255 255 / .20)',
318
+ '--white-22': 'rgb(255 255 255 / .22)',
299
319
  '--white-30': 'rgb(255 255 255 / .30)',
300
320
  '--white-40': 'rgb(255 255 255 / .40)',
321
+ '--white-55': 'rgb(255 255 255 / .55)',
301
322
  '--white-60': 'rgb(255 255 255 / .60)',
323
+ '--white-78': 'rgb(255 255 255 / .78)',
302
324
  '--white-80': 'rgb(255 255 255 / .80)',
303
- '--background': '#000000',
304
- '--foreground': '#ededed',
305
- '--card': '#0a0a0a',
306
- '--card-foreground': '#f5f5f5',
307
- '--popover': '#0a0a0a',
308
- '--popover-foreground': '#f5f5f5',
309
- '--primary': '#ffffff',
310
- '--primary-foreground': '#000000',
311
- '--secondary': '#1a1a1a',
312
- '--secondary-foreground': '#f5f5f5',
313
- '--muted': '#101010',
314
- '--muted-foreground': '#888888',
315
- '--accent': '#1a1a1a',
316
- '--accent-foreground': '#f5f5f5',
325
+ '--background': '#0a0a0a',
326
+ '--foreground': '#fafafa',
327
+ '--card': '#0f0f0f',
328
+ '--card-foreground': '#fafafa',
329
+ '--popover': '#0f0f0f',
330
+ '--popover-foreground': '#fafafa',
331
+ '--primary': '#fafafa',
332
+ '--primary-hover': '#d4d4d4',
333
+ '--primary-foreground': '#0a0a0a',
334
+ '--secondary': '#262626',
335
+ '--secondary-foreground': '#fafafa',
336
+ '--muted': '#171717',
337
+ '--muted-foreground': '#a3a3a3',
338
+ '--accent': '#262626',
339
+ '--accent-foreground': '#fafafa',
317
340
  '--destructive': '#666666',
318
- '--destructive-foreground': '#f5f5f5',
319
- '--border': '#1f1f1f',
320
- '--input': '#1f1f1f',
341
+ '--destructive-foreground': '#fafafa',
342
+ '--border': 'var(--white-10)',
343
+ '--border-strong': 'var(--white-16)',
344
+ '--border-control': 'var(--neutral-500)',
345
+ '--border-focus': 'var(--neutral-400)',
346
+ '--input': 'var(--border-control)',
321
347
  '--ring': 'var(--neutral-500)',
322
348
  '--brand': '#e4e4e7',
323
349
  '--brand-foreground': '#09090b',
324
350
  '--brand-muted': '#a3a3a3',
325
351
  '--black': '#000000',
326
- '--white': '#f5f5f5',
352
+ '--white': '#fafafa',
353
+ '--selection': 'var(--white-20)',
354
+ '--glass': 'var(--white-05)',
355
+ '--glass-strong': 'var(--white-08)',
327
356
  '--surface-page': 'var(--background)',
328
357
  '--surface-card': 'rgb(23 23 23 / .5)',
329
358
  '--surface-card-emphasis': 'rgb(23 23 23 / .8)',
@@ -331,16 +360,13 @@ export const cssVars = {
331
360
  '--surface-overlay': 'rgb(10 10 10 / .95)',
332
361
  '--surface-header': 'rgb(0 0 0 / .7)',
333
362
  '--surface-scrim': 'rgb(0 0 0 / .8)',
334
- '--border-hairline': 'var(--neutral-800)',
335
- '--border-card': 'var(--white-10)',
336
- '--border-strong': 'var(--neutral-500)',
337
363
  '--surface-0': 'var(--background)',
338
364
  '--surface-1': 'var(--card)',
339
365
  '--surface-2': 'var(--muted)',
340
366
  '--surface-3': 'var(--secondary)',
341
- '--text-primary': 'var(--pure-white)',
342
- '--text-secondary': 'var(--white-80)',
343
- '--text-tertiary': 'var(--white-60)',
367
+ '--text-primary': '#fafafa',
368
+ '--text-secondary': 'var(--white-78)',
369
+ '--text-tertiary': 'var(--white-55)',
344
370
  '--text-helper': 'var(--muted-foreground)',
345
371
  '--text-disabled': 'var(--white-30)',
346
372
  '--state-error': '#ef4444',
@@ -390,6 +416,7 @@ export const cssVars = {
390
416
  '--font-size-7xl': 'var(--text-7xl)',
391
417
  '--font-size-8xl': 'var(--text-8xl)',
392
418
  '--font-size-9xl': 'var(--text-9xl)',
419
+ '--text-control': 'var(--text-sm)',
393
420
  '--weight-normal': '400',
394
421
  '--weight-medium': '500',
395
422
  '--weight-semibold': '600',
@@ -440,14 +467,19 @@ export const cssVars = {
440
467
  '--container-max': '80rem',
441
468
  '--container-prose': '48rem',
442
469
  '--container-wide': '72rem',
443
- '--gutter': '1rem',
470
+ '--gutter': 'max(1rem,var(--safe-left),var(--safe-right))',
444
471
  '--gutter-sm': '1.5rem',
445
472
  '--gutter-lg': '2rem',
446
- '--section-y': '4rem',
447
- '--section-y-lg': '6rem',
448
- '--hero-y': '5rem',
449
- '--hero-y-lg': '8rem',
450
- '--header-height': '4rem',
473
+ '--section-y': '2.5rem',
474
+ '--section-y-lg': '3.5rem',
475
+ '--hero-y': '3rem',
476
+ '--hero-y-lg': '4.5rem',
477
+ '--header-height': '3.5rem',
478
+ '--tap-target': '44px',
479
+ '--safe-top': 'env(safe-area-inset-top,0px)',
480
+ '--safe-right': 'env(safe-area-inset-right,0px)',
481
+ '--safe-bottom': 'env(safe-area-inset-bottom,0px)',
482
+ '--safe-left': 'env(safe-area-inset-left,0px)',
451
483
  '--grid-columns': '12',
452
484
  '--grid-gap': 'var(--space-6)',
453
485
  '--grid-gap-tight': 'var(--space-4)',