@hanzo/design 0.3.5 → 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 (31) hide show
  1. package/README.md +25 -0
  2. package/components/core/Avatar.jsx +1 -1
  3. package/components/core/Badge.jsx +10 -7
  4. package/components/core/Button.jsx +1 -2
  5. package/components/core/Card.jsx +1 -1
  6. package/components/core/Progress.jsx +1 -1
  7. package/components/core/Table.jsx +2 -2
  8. package/components/forms/Checkbox.jsx +1 -1
  9. package/components/forms/Input.jsx +4 -4
  10. package/components/forms/Select.jsx +3 -3
  11. package/components/forms/Slider.jsx +1 -1
  12. package/components/forms/Textarea.jsx +3 -3
  13. package/components/navigation/Accordion.jsx +2 -2
  14. package/components/navigation/navigation.card.html +1 -1
  15. package/components/overlays/Dialog.jsx +1 -1
  16. package/components/overlays/DropdownMenu.jsx +3 -3
  17. package/components/overlays/Sheet.jsx +3 -3
  18. package/components/overlays/Toaster.jsx +1 -1
  19. package/dist/tokens.gen.d.ts +92 -60
  20. package/dist/tokens.gen.d.ts.map +1 -1
  21. package/dist/tokens.gen.js +92 -60
  22. package/package.json +11 -11
  23. package/scripts/check-tokens.mjs +64 -1
  24. package/scripts/gen-tokens.mjs +79 -0
  25. package/src/tokens.gen.ts +92 -60
  26. package/styles.css +313 -81
  27. package/tailwind.css +787 -0
  28. package/tokens/base.css +125 -22
  29. package/tokens/colors.css +121 -52
  30. package/tokens/spacing.css +46 -7
  31. package/tokens/typography.css +21 -0
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)',