@hanzo/design 0.4.0 → 0.4.2

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 (32) hide show
  1. package/components/core/Avatar.jsx +1 -1
  2. package/components/core/Badge.jsx +10 -7
  3. package/components/core/Button.jsx +35 -10
  4. package/components/core/Card.jsx +20 -5
  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 +15 -5
  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/Tabs.jsx +18 -7
  14. package/components/navigation/navigation.card.html +1 -1
  15. package/components/overlays/Dialog.jsx +2 -2
  16. package/components/overlays/DropdownMenu.jsx +10 -6
  17. package/components/overlays/Sheet.jsx +3 -3
  18. package/components/overlays/Toaster.jsx +1 -1
  19. package/dist/tokens.gen.d.ts +126 -76
  20. package/dist/tokens.gen.d.ts.map +1 -1
  21. package/dist/tokens.gen.js +126 -76
  22. package/package.json +1 -1
  23. package/scripts/check-tokens.mjs +71 -4
  24. package/src/tokens.gen.ts +126 -76
  25. package/styles.css +486 -84
  26. package/tailwind.css +486 -84
  27. package/tokens/base.css +146 -5
  28. package/tokens/colors.css +181 -66
  29. package/tokens/elevation.css +76 -5
  30. package/tokens/motion.css +15 -0
  31. package/tokens/spacing.css +46 -7
  32. package/tokens/typography.css +21 -0
package/src/tokens.gen.ts CHANGED
@@ -20,54 +20,68 @@ 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',
44
- 'destructive': '#666666',
45
- 'destructive-foreground': '#f5f5f5',
46
- 'border': '#1f1f1f',
47
- 'input': '#1f1f1f',
48
- 'ring': 'var(--neutral-500)',
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': '#e5e5e5',
44
+ 'primary-foreground': '#0a0a0a',
45
+ 'secondary': '#262626',
46
+ 'secondary-hover': '#333333',
47
+ 'secondary-foreground': '#fafafa',
48
+ 'muted': '#171717',
49
+ 'muted-foreground': '#a3a3a3',
50
+ 'accent': '#262626',
51
+ 'accent-foreground': '#fafafa',
52
+ 'destructive': 'var(--state-error)',
53
+ 'destructive-hover': '#dc2626',
54
+ 'destructive-foreground': '#fafafa',
55
+ 'border': 'var(--white-10)',
56
+ 'border-strong': 'var(--white-16)',
57
+ 'border-control': 'var(--white-15)',
58
+ 'border-focus': 'var(--white-22)',
59
+ 'border-selected': 'var(--white-30)',
60
+ 'input': 'var(--border-control)',
61
+ 'ring': 'var(--white-40)',
62
+ 'ring-halo': 'var(--white-10)',
49
63
  'brand': '#e4e4e7',
50
64
  'brand-foreground': '#09090b',
51
65
  'brand-muted': '#a3a3a3',
52
66
  'black': '#000000',
53
- 'white': '#f5f5f5',
67
+ 'white': '#fafafa',
68
+ 'selection': 'var(--white-20)',
69
+ 'glass': 'var(--white-05)',
70
+ 'glass-strong': 'var(--white-08)',
54
71
  'surface-page': 'var(--background)',
55
- 'surface-card': 'rgb(23 23 23 / .5)',
56
- 'surface-card-emphasis': 'rgb(23 23 23 / .8)',
57
- 'surface-card-quiet': 'rgb(23 23 23 / .4)',
58
- 'surface-overlay': 'rgb(10 10 10 / .95)',
72
+ 'surface-card': 'rgb(38 38 38 / .5)',
73
+ 'surface-card-emphasis': 'rgb(38 38 38 / .75)',
74
+ 'surface-card-quiet': 'rgb(38 38 38 / .35)',
75
+ 'surface-overlay': 'rgb(23 23 23 / .92)',
59
76
  'surface-header': 'rgb(0 0 0 / .7)',
60
77
  '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
78
  'surface-0': 'var(--background)',
65
79
  'surface-1': 'var(--card)',
66
80
  'surface-2': 'var(--muted)',
67
81
  'surface-3': 'var(--secondary)',
68
- 'text-primary': 'var(--pure-white)',
69
- 'text-secondary': 'var(--white-80)',
70
- 'text-tertiary': 'var(--white-60)',
82
+ 'text-primary': '#fafafa',
83
+ 'text-secondary': 'var(--white-78)',
84
+ 'text-tertiary': 'var(--white-55)',
71
85
  'text-helper': 'var(--muted-foreground)',
72
86
  'text-disabled': 'var(--white-30)',
73
87
  'state-error': '#ef4444',
@@ -121,6 +135,7 @@ export const typography = {
121
135
  'font-size-7xl': 'var(--text-7xl)',
122
136
  'font-size-8xl': 'var(--text-8xl)',
123
137
  'font-size-9xl': 'var(--text-9xl)',
138
+ 'text-control': 'var(--text-sm)',
124
139
  'weight-normal': '400',
125
140
  'weight-medium': '500',
126
141
  'weight-semibold': '600',
@@ -175,14 +190,19 @@ export const spacing = {
175
190
  'container-max': '80rem',
176
191
  'container-prose': '48rem',
177
192
  'container-wide': '72rem',
178
- 'gutter': '1rem',
193
+ 'gutter': 'max(1rem,var(--safe-left),var(--safe-right))',
179
194
  'gutter-sm': '1.5rem',
180
195
  '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',
196
+ 'section-y': '2.5rem',
197
+ 'section-y-lg': '3.5rem',
198
+ 'hero-y': '3rem',
199
+ 'hero-y-lg': '4.5rem',
200
+ 'header-height': '3.5rem',
201
+ 'tap-target': '44px',
202
+ 'safe-top': 'env(safe-area-inset-top,0px)',
203
+ 'safe-right': 'env(safe-area-inset-right,0px)',
204
+ 'safe-bottom': 'env(safe-area-inset-bottom,0px)',
205
+ 'safe-left': 'env(safe-area-inset-left,0px)',
186
206
  } as const
187
207
 
188
208
  /** grid tokens (from tokens/grid.css). Values are raw CSS. */
@@ -215,9 +235,11 @@ export const radius = {
215
235
  /** elevation tokens (from tokens/elevation.css). Values are raw CSS. */
216
236
  export const elevation = {
217
237
  'shadow-none': 'none',
218
- 'shadow-floating': '0 25px 50px -12px rgb(0 0 0 / .25)',
238
+ 'shadow-floating': '0 24px 60px -16px rgb(0 0 0 / .75)',
219
239
  'shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
220
- 'ring-focus': '0 0 0 2px var(--ring)',
240
+ 'edge-highlight': 'inset 0 1px 0 0 rgb(255 255 255 / .10)',
241
+ 'bloom': '0 0 24px -2px rgb(255 255 255 / .28)',
242
+ 'ring-focus': '0 0 0 3px var(--ring-halo)',
221
243
  'shadow-sm': '0 1px 2px 0 rgb(0 0 0 / .40)',
222
244
  'shadow': '0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .45)',
223
245
  'shadow-md': '0 4px 6px -1px rgb(0 0 0 / .50), 0 2px 4px -2px rgb(0 0 0 / .50)',
@@ -227,6 +249,7 @@ export const elevation = {
227
249
  'glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
228
250
  'glow-hero-blur': '120px',
229
251
  'sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
252
+ 'sheen-edge': 'linear-gradient(90deg,transparent,rgb(255 255 255 / .14) 50%,transparent)',
230
253
  'gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
231
254
  'gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
232
255
  'gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
@@ -239,8 +262,10 @@ export const motion = {
239
262
  'duration-slow': '400ms',
240
263
  'duration-slower': '500ms',
241
264
  'duration-glow': '9s',
265
+ 'duration-press': '90ms',
242
266
  'ease-out': 'cubic-bezier(0,0,0.2,1)',
243
267
  'ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
268
+ 'ease-emphasis': 'cubic-bezier(0.16,1,0.3,1)',
244
269
  'stagger': '60ms',
245
270
  'entry-rise': '16px',
246
271
  'entry-rise-lg': '24px',
@@ -293,54 +318,68 @@ export const cssVars = {
293
318
  '--hanzo-black': '#0A0A0B',
294
319
  '--hanzo-white': '#FFFFFF',
295
320
  '--white-05': 'rgb(255 255 255 / .05)',
321
+ '--white-06': 'rgb(255 255 255 / .06)',
322
+ '--white-08': 'rgb(255 255 255 / .08)',
296
323
  '--white-10': 'rgb(255 255 255 / .10)',
297
324
  '--white-15': 'rgb(255 255 255 / .15)',
325
+ '--white-16': 'rgb(255 255 255 / .16)',
298
326
  '--white-20': 'rgb(255 255 255 / .20)',
327
+ '--white-22': 'rgb(255 255 255 / .22)',
299
328
  '--white-30': 'rgb(255 255 255 / .30)',
300
329
  '--white-40': 'rgb(255 255 255 / .40)',
330
+ '--white-55': 'rgb(255 255 255 / .55)',
301
331
  '--white-60': 'rgb(255 255 255 / .60)',
332
+ '--white-78': 'rgb(255 255 255 / .78)',
302
333
  '--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',
317
- '--destructive': '#666666',
318
- '--destructive-foreground': '#f5f5f5',
319
- '--border': '#1f1f1f',
320
- '--input': '#1f1f1f',
321
- '--ring': 'var(--neutral-500)',
334
+ '--background': '#0a0a0a',
335
+ '--foreground': '#fafafa',
336
+ '--card': '#0f0f0f',
337
+ '--card-foreground': '#fafafa',
338
+ '--popover': '#0f0f0f',
339
+ '--popover-foreground': '#fafafa',
340
+ '--primary': '#fafafa',
341
+ '--primary-hover': '#e5e5e5',
342
+ '--primary-foreground': '#0a0a0a',
343
+ '--secondary': '#262626',
344
+ '--secondary-hover': '#333333',
345
+ '--secondary-foreground': '#fafafa',
346
+ '--muted': '#171717',
347
+ '--muted-foreground': '#a3a3a3',
348
+ '--accent': '#262626',
349
+ '--accent-foreground': '#fafafa',
350
+ '--destructive': 'var(--state-error)',
351
+ '--destructive-hover': '#dc2626',
352
+ '--destructive-foreground': '#fafafa',
353
+ '--border': 'var(--white-10)',
354
+ '--border-strong': 'var(--white-16)',
355
+ '--border-control': 'var(--white-15)',
356
+ '--border-focus': 'var(--white-22)',
357
+ '--border-selected': 'var(--white-30)',
358
+ '--input': 'var(--border-control)',
359
+ '--ring': 'var(--white-40)',
360
+ '--ring-halo': 'var(--white-10)',
322
361
  '--brand': '#e4e4e7',
323
362
  '--brand-foreground': '#09090b',
324
363
  '--brand-muted': '#a3a3a3',
325
364
  '--black': '#000000',
326
- '--white': '#f5f5f5',
365
+ '--white': '#fafafa',
366
+ '--selection': 'var(--white-20)',
367
+ '--glass': 'var(--white-05)',
368
+ '--glass-strong': 'var(--white-08)',
327
369
  '--surface-page': 'var(--background)',
328
- '--surface-card': 'rgb(23 23 23 / .5)',
329
- '--surface-card-emphasis': 'rgb(23 23 23 / .8)',
330
- '--surface-card-quiet': 'rgb(23 23 23 / .4)',
331
- '--surface-overlay': 'rgb(10 10 10 / .95)',
370
+ '--surface-card': 'rgb(38 38 38 / .5)',
371
+ '--surface-card-emphasis': 'rgb(38 38 38 / .75)',
372
+ '--surface-card-quiet': 'rgb(38 38 38 / .35)',
373
+ '--surface-overlay': 'rgb(23 23 23 / .92)',
332
374
  '--surface-header': 'rgb(0 0 0 / .7)',
333
375
  '--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
376
  '--surface-0': 'var(--background)',
338
377
  '--surface-1': 'var(--card)',
339
378
  '--surface-2': 'var(--muted)',
340
379
  '--surface-3': 'var(--secondary)',
341
- '--text-primary': 'var(--pure-white)',
342
- '--text-secondary': 'var(--white-80)',
343
- '--text-tertiary': 'var(--white-60)',
380
+ '--text-primary': '#fafafa',
381
+ '--text-secondary': 'var(--white-78)',
382
+ '--text-tertiary': 'var(--white-55)',
344
383
  '--text-helper': 'var(--muted-foreground)',
345
384
  '--text-disabled': 'var(--white-30)',
346
385
  '--state-error': '#ef4444',
@@ -390,6 +429,7 @@ export const cssVars = {
390
429
  '--font-size-7xl': 'var(--text-7xl)',
391
430
  '--font-size-8xl': 'var(--text-8xl)',
392
431
  '--font-size-9xl': 'var(--text-9xl)',
432
+ '--text-control': 'var(--text-sm)',
393
433
  '--weight-normal': '400',
394
434
  '--weight-medium': '500',
395
435
  '--weight-semibold': '600',
@@ -440,14 +480,19 @@ export const cssVars = {
440
480
  '--container-max': '80rem',
441
481
  '--container-prose': '48rem',
442
482
  '--container-wide': '72rem',
443
- '--gutter': '1rem',
483
+ '--gutter': 'max(1rem,var(--safe-left),var(--safe-right))',
444
484
  '--gutter-sm': '1.5rem',
445
485
  '--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',
486
+ '--section-y': '2.5rem',
487
+ '--section-y-lg': '3.5rem',
488
+ '--hero-y': '3rem',
489
+ '--hero-y-lg': '4.5rem',
490
+ '--header-height': '3.5rem',
491
+ '--tap-target': '44px',
492
+ '--safe-top': 'env(safe-area-inset-top,0px)',
493
+ '--safe-right': 'env(safe-area-inset-right,0px)',
494
+ '--safe-bottom': 'env(safe-area-inset-bottom,0px)',
495
+ '--safe-left': 'env(safe-area-inset-left,0px)',
451
496
  '--grid-columns': '12',
452
497
  '--grid-gap': 'var(--space-6)',
453
498
  '--grid-gap-tight': 'var(--space-4)',
@@ -468,9 +513,11 @@ export const cssVars = {
468
513
  '--radius-composer': '28px',
469
514
  '--radius-full': '9999px',
470
515
  '--shadow-none': 'none',
471
- '--shadow-floating': '0 25px 50px -12px rgb(0 0 0 / .25)',
516
+ '--shadow-floating': '0 24px 60px -16px rgb(0 0 0 / .75)',
472
517
  '--shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
473
- '--ring-focus': '0 0 0 2px var(--ring)',
518
+ '--edge-highlight': 'inset 0 1px 0 0 rgb(255 255 255 / .10)',
519
+ '--bloom': '0 0 24px -2px rgb(255 255 255 / .28)',
520
+ '--ring-focus': '0 0 0 3px var(--ring-halo)',
474
521
  '--shadow-sm': '0 1px 2px 0 rgb(0 0 0 / .40)',
475
522
  '--shadow': '0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .45)',
476
523
  '--shadow-md': '0 4px 6px -1px rgb(0 0 0 / .50), 0 2px 4px -2px rgb(0 0 0 / .50)',
@@ -480,6 +527,7 @@ export const cssVars = {
480
527
  '--glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
481
528
  '--glow-hero-blur': '120px',
482
529
  '--sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
530
+ '--sheen-edge': 'linear-gradient(90deg,transparent,rgb(255 255 255 / .14) 50%,transparent)',
483
531
  '--gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
484
532
  '--gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
485
533
  '--gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
@@ -488,8 +536,10 @@ export const cssVars = {
488
536
  '--duration-slow': '400ms',
489
537
  '--duration-slower': '500ms',
490
538
  '--duration-glow': '9s',
539
+ '--duration-press': '90ms',
491
540
  '--ease-out': 'cubic-bezier(0,0,0.2,1)',
492
541
  '--ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
542
+ '--ease-emphasis': 'cubic-bezier(0.16,1,0.3,1)',
493
543
  '--stagger': '60ms',
494
544
  '--entry-rise': '16px',
495
545
  '--entry-rise-lg': '24px',