@hanzo/design 0.5.2 → 0.5.4

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 (9) hide show
  1. package/dist/tokens.gen.d.ts +74 -74
  2. package/dist/tokens.gen.js +74 -74
  3. package/package.json +1 -1
  4. package/scripts/check-tokens.mjs +25 -0
  5. package/scripts/gen-tokens.mjs +25 -1
  6. package/src/tokens.gen.ts +74 -74
  7. package/styles.css +17 -2
  8. package/tailwind.css +17 -2
  9. package/tokens/elevation.css +17 -2
package/dist/tokens.gen.d.ts CHANGED
@@ -92,31 +92,31 @@ export declare const colors: {
92
92
  /** typography tokens (from tokens/typography.css). Values are raw CSS. */
93
93
  export declare const typography: {
94
94
  readonly 'type-scale': "1";
95
- readonly 'text-xs': "calc(0.6875rem * var(--type-scale, 1))";
96
- readonly 'leading-xs': "calc(1rem * var(--type-scale, 1))";
97
- readonly 'text-sm': "calc(0.8125rem * var(--type-scale, 1))";
98
- readonly 'leading-sm': "calc(1.15rem * var(--type-scale, 1))";
99
- readonly 'text-base': "calc(0.875rem * var(--type-scale, 1))";
100
- readonly 'leading-base': "calc(1.35rem * var(--type-scale, 1))";
101
- readonly 'text-lg': "calc(0.9375rem * var(--type-scale, 1))";
102
- readonly 'leading-lg': "calc(1.4rem * var(--type-scale, 1))";
103
- readonly 'text-xl': "calc(1.0625rem * var(--type-scale, 1))";
104
- readonly 'leading-xl': "calc(1.55rem * var(--type-scale, 1))";
105
- readonly 'text-2xl': "calc(1.3125rem * var(--type-scale, 1))";
106
- readonly 'leading-2xl': "calc(1.7rem * var(--type-scale, 1))";
107
- readonly 'text-3xl': "calc(1.625rem * var(--type-scale, 1))";
108
- readonly 'leading-3xl': "calc(1.95rem * var(--type-scale, 1))";
109
- readonly 'text-4xl': "calc(2rem * var(--type-scale, 1))";
110
- readonly 'leading-4xl': "calc(2.25rem * var(--type-scale, 1))";
111
- readonly 'text-5xl': "calc(2.5rem * var(--type-scale, 1))";
95
+ readonly 'text-xs': "0.6875rem";
96
+ readonly 'leading-xs': "1rem";
97
+ readonly 'text-sm': "0.8125rem";
98
+ readonly 'leading-sm': "1.15rem";
99
+ readonly 'text-base': "0.875rem";
100
+ readonly 'leading-base': "1.35rem";
101
+ readonly 'text-lg': "0.9375rem";
102
+ readonly 'leading-lg': "1.4rem";
103
+ readonly 'text-xl': "1.0625rem";
104
+ readonly 'leading-xl': "1.55rem";
105
+ readonly 'text-2xl': "1.3125rem";
106
+ readonly 'leading-2xl': "1.7rem";
107
+ readonly 'text-3xl': "1.625rem";
108
+ readonly 'leading-3xl': "1.95rem";
109
+ readonly 'text-4xl': "2rem";
110
+ readonly 'leading-4xl': "2.25rem";
111
+ readonly 'text-5xl': "2.5rem";
112
112
  readonly 'leading-5xl': "1.05";
113
- readonly 'text-6xl': "calc(3.25rem * var(--type-scale, 1))";
113
+ readonly 'text-6xl': "3.25rem";
114
114
  readonly 'leading-6xl': "1";
115
- readonly 'text-7xl': "calc(4rem * var(--type-scale, 1))";
115
+ readonly 'text-7xl': "4rem";
116
116
  readonly 'leading-7xl': "1";
117
- readonly 'text-8xl': "calc(5.25rem * var(--type-scale, 1))";
117
+ readonly 'text-8xl': "5.25rem";
118
118
  readonly 'leading-8xl': "1";
119
- readonly 'text-9xl': "calc(7rem * var(--type-scale, 1))";
119
+ readonly 'text-9xl': "7rem";
120
120
  readonly 'leading-9xl': "1";
121
121
  readonly 'font-size-xs': "var(--text-xs)";
122
122
  readonly 'font-size-sm': "var(--text-sm)";
@@ -159,20 +159,20 @@ export declare const typography: {
159
159
  export declare const spacing: {
160
160
  readonly density: "1";
161
161
  readonly 'space-0': "0";
162
- readonly 'space-1': "calc(0.25rem * var(--density, 1))";
163
- readonly 'space-2': "calc(0.5rem * var(--density, 1))";
164
- readonly 'space-3': "calc(0.75rem * var(--density, 1))";
165
- readonly 'space-4': "calc(1rem * var(--density, 1))";
166
- readonly 'space-5': "calc(1.25rem * var(--density, 1))";
167
- readonly 'space-6': "calc(1.5rem * var(--density, 1))";
168
- readonly 'space-8': "calc(2rem * var(--density, 1))";
169
- readonly 'space-10': "calc(2.5rem * var(--density, 1))";
170
- readonly 'space-12': "calc(3rem * var(--density, 1))";
171
- readonly 'space-14': "calc(3.5rem * var(--density, 1))";
172
- readonly 'space-16': "calc(4rem * var(--density, 1))";
173
- readonly 'space-20': "calc(5rem * var(--density, 1))";
174
- readonly 'space-24': "calc(6rem * var(--density, 1))";
175
- readonly 'space-32': "calc(8rem * var(--density, 1))";
162
+ readonly 'space-1': "0.25rem";
163
+ readonly 'space-2': "0.5rem";
164
+ readonly 'space-3': "0.75rem";
165
+ readonly 'space-4': "1rem";
166
+ readonly 'space-5': "1.25rem";
167
+ readonly 'space-6': "1.5rem";
168
+ readonly 'space-8': "2rem";
169
+ readonly 'space-10': "2.5rem";
170
+ readonly 'space-12': "3rem";
171
+ readonly 'space-14': "3.5rem";
172
+ readonly 'space-16': "4rem";
173
+ readonly 'space-20': "5rem";
174
+ readonly 'space-24': "6rem";
175
+ readonly 'space-32': "8rem";
176
176
  readonly 'golden-1': "0.25rem";
177
177
  readonly 'golden-2': "0.405rem";
178
178
  readonly 'golden-3': "0.654rem";
@@ -242,8 +242,8 @@ export declare const elevation: {
242
242
  readonly 'sheet-0': "var(--surface-page)";
243
243
  readonly 'sheet-1': "var(--surface-card)";
244
244
  readonly 'sheet-2': "var(--surface-card-emphasis)";
245
- readonly 'shadow-sheet-1': "var(--edge-highlight),var(--shadow-md)";
246
- readonly 'shadow-sheet-2': "var(--edge-highlight),var(--shadow-lg)";
245
+ readonly 'shadow-sheet-1': "var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)";
246
+ readonly 'shadow-sheet-2': "var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)";
247
247
  readonly fold: "12px";
248
248
  readonly 'fold-face': "linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))";
249
249
  readonly 'glow-hero': "radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)";
@@ -384,31 +384,31 @@ export declare const cssVars: {
384
384
  readonly '--chrome-dot-yellow': "rgb(234 179 8 / .6)";
385
385
  readonly '--chrome-dot-green': "rgb(34 197 94 / .6)";
386
386
  readonly '--type-scale': "1";
387
- readonly '--text-xs': "calc(0.6875rem * var(--type-scale, 1))";
388
- readonly '--leading-xs': "calc(1rem * var(--type-scale, 1))";
389
- readonly '--text-sm': "calc(0.8125rem * var(--type-scale, 1))";
390
- readonly '--leading-sm': "calc(1.15rem * var(--type-scale, 1))";
391
- readonly '--text-base': "calc(0.875rem * var(--type-scale, 1))";
392
- readonly '--leading-base': "calc(1.35rem * var(--type-scale, 1))";
393
- readonly '--text-lg': "calc(0.9375rem * var(--type-scale, 1))";
394
- readonly '--leading-lg': "calc(1.4rem * var(--type-scale, 1))";
395
- readonly '--text-xl': "calc(1.0625rem * var(--type-scale, 1))";
396
- readonly '--leading-xl': "calc(1.55rem * var(--type-scale, 1))";
397
- readonly '--text-2xl': "calc(1.3125rem * var(--type-scale, 1))";
398
- readonly '--leading-2xl': "calc(1.7rem * var(--type-scale, 1))";
399
- readonly '--text-3xl': "calc(1.625rem * var(--type-scale, 1))";
400
- readonly '--leading-3xl': "calc(1.95rem * var(--type-scale, 1))";
401
- readonly '--text-4xl': "calc(2rem * var(--type-scale, 1))";
402
- readonly '--leading-4xl': "calc(2.25rem * var(--type-scale, 1))";
403
- readonly '--text-5xl': "calc(2.5rem * var(--type-scale, 1))";
387
+ readonly '--text-xs': "0.6875rem";
388
+ readonly '--leading-xs': "1rem";
389
+ readonly '--text-sm': "0.8125rem";
390
+ readonly '--leading-sm': "1.15rem";
391
+ readonly '--text-base': "0.875rem";
392
+ readonly '--leading-base': "1.35rem";
393
+ readonly '--text-lg': "0.9375rem";
394
+ readonly '--leading-lg': "1.4rem";
395
+ readonly '--text-xl': "1.0625rem";
396
+ readonly '--leading-xl': "1.55rem";
397
+ readonly '--text-2xl': "1.3125rem";
398
+ readonly '--leading-2xl': "1.7rem";
399
+ readonly '--text-3xl': "1.625rem";
400
+ readonly '--leading-3xl': "1.95rem";
401
+ readonly '--text-4xl': "2rem";
402
+ readonly '--leading-4xl': "2.25rem";
403
+ readonly '--text-5xl': "2.5rem";
404
404
  readonly '--leading-5xl': "1.05";
405
- readonly '--text-6xl': "calc(3.25rem * var(--type-scale, 1))";
405
+ readonly '--text-6xl': "3.25rem";
406
406
  readonly '--leading-6xl': "1";
407
- readonly '--text-7xl': "calc(4rem * var(--type-scale, 1))";
407
+ readonly '--text-7xl': "4rem";
408
408
  readonly '--leading-7xl': "1";
409
- readonly '--text-8xl': "calc(5.25rem * var(--type-scale, 1))";
409
+ readonly '--text-8xl': "5.25rem";
410
410
  readonly '--leading-8xl': "1";
411
- readonly '--text-9xl': "calc(7rem * var(--type-scale, 1))";
411
+ readonly '--text-9xl': "7rem";
412
412
  readonly '--leading-9xl': "1";
413
413
  readonly '--font-size-xs': "var(--text-xs)";
414
414
  readonly '--font-size-sm': "var(--text-sm)";
@@ -448,20 +448,20 @@ export declare const cssVars: {
448
448
  readonly '--type-eyebrow': "600 0.625rem/1 var(--font-sans)";
449
449
  readonly '--density': "1";
450
450
  readonly '--space-0': "0";
451
- readonly '--space-1': "calc(0.25rem * var(--density, 1))";
452
- readonly '--space-2': "calc(0.5rem * var(--density, 1))";
453
- readonly '--space-3': "calc(0.75rem * var(--density, 1))";
454
- readonly '--space-4': "calc(1rem * var(--density, 1))";
455
- readonly '--space-5': "calc(1.25rem * var(--density, 1))";
456
- readonly '--space-6': "calc(1.5rem * var(--density, 1))";
457
- readonly '--space-8': "calc(2rem * var(--density, 1))";
458
- readonly '--space-10': "calc(2.5rem * var(--density, 1))";
459
- readonly '--space-12': "calc(3rem * var(--density, 1))";
460
- readonly '--space-14': "calc(3.5rem * var(--density, 1))";
461
- readonly '--space-16': "calc(4rem * var(--density, 1))";
462
- readonly '--space-20': "calc(5rem * var(--density, 1))";
463
- readonly '--space-24': "calc(6rem * var(--density, 1))";
464
- readonly '--space-32': "calc(8rem * var(--density, 1))";
451
+ readonly '--space-1': "0.25rem";
452
+ readonly '--space-2': "0.5rem";
453
+ readonly '--space-3': "0.75rem";
454
+ readonly '--space-4': "1rem";
455
+ readonly '--space-5': "1.25rem";
456
+ readonly '--space-6': "1.5rem";
457
+ readonly '--space-8': "2rem";
458
+ readonly '--space-10': "2.5rem";
459
+ readonly '--space-12': "3rem";
460
+ readonly '--space-14': "3.5rem";
461
+ readonly '--space-16': "4rem";
462
+ readonly '--space-20': "5rem";
463
+ readonly '--space-24': "6rem";
464
+ readonly '--space-32': "8rem";
465
465
  readonly '--golden-1': "0.25rem";
466
466
  readonly '--golden-2': "0.405rem";
467
467
  readonly '--golden-3': "0.654rem";
@@ -522,8 +522,8 @@ export declare const cssVars: {
522
522
  readonly '--sheet-0': "var(--surface-page)";
523
523
  readonly '--sheet-1': "var(--surface-card)";
524
524
  readonly '--sheet-2': "var(--surface-card-emphasis)";
525
- readonly '--shadow-sheet-1': "var(--edge-highlight),var(--shadow-md)";
526
- readonly '--shadow-sheet-2': "var(--edge-highlight),var(--shadow-lg)";
525
+ readonly '--shadow-sheet-1': "var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)";
526
+ readonly '--shadow-sheet-2': "var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)";
527
527
  readonly '--fold': "12px";
528
528
  readonly '--fold-face': "linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))";
529
529
  readonly '--glow-hero': "radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)";
package/dist/tokens.gen.js CHANGED
@@ -95,31 +95,31 @@ export const colors = {
95
95
  /** typography tokens (from tokens/typography.css). Values are raw CSS. */
96
96
  export const typography = {
97
97
  'type-scale': '1',
98
- 'text-xs': 'calc(0.6875rem * var(--type-scale, 1))',
99
- 'leading-xs': 'calc(1rem * var(--type-scale, 1))',
100
- 'text-sm': 'calc(0.8125rem * var(--type-scale, 1))',
101
- 'leading-sm': 'calc(1.15rem * var(--type-scale, 1))',
102
- 'text-base': 'calc(0.875rem * var(--type-scale, 1))',
103
- 'leading-base': 'calc(1.35rem * var(--type-scale, 1))',
104
- 'text-lg': 'calc(0.9375rem * var(--type-scale, 1))',
105
- 'leading-lg': 'calc(1.4rem * var(--type-scale, 1))',
106
- 'text-xl': 'calc(1.0625rem * var(--type-scale, 1))',
107
- 'leading-xl': 'calc(1.55rem * var(--type-scale, 1))',
108
- 'text-2xl': 'calc(1.3125rem * var(--type-scale, 1))',
109
- 'leading-2xl': 'calc(1.7rem * var(--type-scale, 1))',
110
- 'text-3xl': 'calc(1.625rem * var(--type-scale, 1))',
111
- 'leading-3xl': 'calc(1.95rem * var(--type-scale, 1))',
112
- 'text-4xl': 'calc(2rem * var(--type-scale, 1))',
113
- 'leading-4xl': 'calc(2.25rem * var(--type-scale, 1))',
114
- 'text-5xl': 'calc(2.5rem * var(--type-scale, 1))',
98
+ 'text-xs': '0.6875rem',
99
+ 'leading-xs': '1rem',
100
+ 'text-sm': '0.8125rem',
101
+ 'leading-sm': '1.15rem',
102
+ 'text-base': '0.875rem',
103
+ 'leading-base': '1.35rem',
104
+ 'text-lg': '0.9375rem',
105
+ 'leading-lg': '1.4rem',
106
+ 'text-xl': '1.0625rem',
107
+ 'leading-xl': '1.55rem',
108
+ 'text-2xl': '1.3125rem',
109
+ 'leading-2xl': '1.7rem',
110
+ 'text-3xl': '1.625rem',
111
+ 'leading-3xl': '1.95rem',
112
+ 'text-4xl': '2rem',
113
+ 'leading-4xl': '2.25rem',
114
+ 'text-5xl': '2.5rem',
115
115
  'leading-5xl': '1.05',
116
- 'text-6xl': 'calc(3.25rem * var(--type-scale, 1))',
116
+ 'text-6xl': '3.25rem',
117
117
  'leading-6xl': '1',
118
- 'text-7xl': 'calc(4rem * var(--type-scale, 1))',
118
+ 'text-7xl': '4rem',
119
119
  'leading-7xl': '1',
120
- 'text-8xl': 'calc(5.25rem * var(--type-scale, 1))',
120
+ 'text-8xl': '5.25rem',
121
121
  'leading-8xl': '1',
122
- 'text-9xl': 'calc(7rem * var(--type-scale, 1))',
122
+ 'text-9xl': '7rem',
123
123
  'leading-9xl': '1',
124
124
  'font-size-xs': 'var(--text-xs)',
125
125
  'font-size-sm': 'var(--text-sm)',
@@ -162,20 +162,20 @@ export const typography = {
162
162
  export const spacing = {
163
163
  'density': '1',
164
164
  'space-0': '0',
165
- 'space-1': 'calc(0.25rem * var(--density, 1))',
166
- 'space-2': 'calc(0.5rem * var(--density, 1))',
167
- 'space-3': 'calc(0.75rem * var(--density, 1))',
168
- 'space-4': 'calc(1rem * var(--density, 1))',
169
- 'space-5': 'calc(1.25rem * var(--density, 1))',
170
- 'space-6': 'calc(1.5rem * var(--density, 1))',
171
- 'space-8': 'calc(2rem * var(--density, 1))',
172
- 'space-10': 'calc(2.5rem * var(--density, 1))',
173
- 'space-12': 'calc(3rem * var(--density, 1))',
174
- 'space-14': 'calc(3.5rem * var(--density, 1))',
175
- 'space-16': 'calc(4rem * var(--density, 1))',
176
- 'space-20': 'calc(5rem * var(--density, 1))',
177
- 'space-24': 'calc(6rem * var(--density, 1))',
178
- 'space-32': 'calc(8rem * var(--density, 1))',
165
+ 'space-1': '0.25rem',
166
+ 'space-2': '0.5rem',
167
+ 'space-3': '0.75rem',
168
+ 'space-4': '1rem',
169
+ 'space-5': '1.25rem',
170
+ 'space-6': '1.5rem',
171
+ 'space-8': '2rem',
172
+ 'space-10': '2.5rem',
173
+ 'space-12': '3rem',
174
+ 'space-14': '3.5rem',
175
+ 'space-16': '4rem',
176
+ 'space-20': '5rem',
177
+ 'space-24': '6rem',
178
+ 'space-32': '8rem',
179
179
  'golden-1': '0.25rem',
180
180
  'golden-2': '0.405rem',
181
181
  'golden-3': '0.654rem',
@@ -245,8 +245,8 @@ export const elevation = {
245
245
  'sheet-0': 'var(--surface-page)',
246
246
  'sheet-1': 'var(--surface-card)',
247
247
  'sheet-2': 'var(--surface-card-emphasis)',
248
- 'shadow-sheet-1': 'var(--edge-highlight),var(--shadow-md)',
249
- 'shadow-sheet-2': 'var(--edge-highlight),var(--shadow-lg)',
248
+ 'shadow-sheet-1': 'var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)',
249
+ 'shadow-sheet-2': 'var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)',
250
250
  'fold': '12px',
251
251
  'fold-face': 'linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))',
252
252
  'glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
@@ -387,31 +387,31 @@ export const cssVars = {
387
387
  '--chrome-dot-yellow': 'rgb(234 179 8 / .6)',
388
388
  '--chrome-dot-green': 'rgb(34 197 94 / .6)',
389
389
  '--type-scale': '1',
390
- '--text-xs': 'calc(0.6875rem * var(--type-scale, 1))',
391
- '--leading-xs': 'calc(1rem * var(--type-scale, 1))',
392
- '--text-sm': 'calc(0.8125rem * var(--type-scale, 1))',
393
- '--leading-sm': 'calc(1.15rem * var(--type-scale, 1))',
394
- '--text-base': 'calc(0.875rem * var(--type-scale, 1))',
395
- '--leading-base': 'calc(1.35rem * var(--type-scale, 1))',
396
- '--text-lg': 'calc(0.9375rem * var(--type-scale, 1))',
397
- '--leading-lg': 'calc(1.4rem * var(--type-scale, 1))',
398
- '--text-xl': 'calc(1.0625rem * var(--type-scale, 1))',
399
- '--leading-xl': 'calc(1.55rem * var(--type-scale, 1))',
400
- '--text-2xl': 'calc(1.3125rem * var(--type-scale, 1))',
401
- '--leading-2xl': 'calc(1.7rem * var(--type-scale, 1))',
402
- '--text-3xl': 'calc(1.625rem * var(--type-scale, 1))',
403
- '--leading-3xl': 'calc(1.95rem * var(--type-scale, 1))',
404
- '--text-4xl': 'calc(2rem * var(--type-scale, 1))',
405
- '--leading-4xl': 'calc(2.25rem * var(--type-scale, 1))',
406
- '--text-5xl': 'calc(2.5rem * var(--type-scale, 1))',
390
+ '--text-xs': '0.6875rem',
391
+ '--leading-xs': '1rem',
392
+ '--text-sm': '0.8125rem',
393
+ '--leading-sm': '1.15rem',
394
+ '--text-base': '0.875rem',
395
+ '--leading-base': '1.35rem',
396
+ '--text-lg': '0.9375rem',
397
+ '--leading-lg': '1.4rem',
398
+ '--text-xl': '1.0625rem',
399
+ '--leading-xl': '1.55rem',
400
+ '--text-2xl': '1.3125rem',
401
+ '--leading-2xl': '1.7rem',
402
+ '--text-3xl': '1.625rem',
403
+ '--leading-3xl': '1.95rem',
404
+ '--text-4xl': '2rem',
405
+ '--leading-4xl': '2.25rem',
406
+ '--text-5xl': '2.5rem',
407
407
  '--leading-5xl': '1.05',
408
- '--text-6xl': 'calc(3.25rem * var(--type-scale, 1))',
408
+ '--text-6xl': '3.25rem',
409
409
  '--leading-6xl': '1',
410
- '--text-7xl': 'calc(4rem * var(--type-scale, 1))',
410
+ '--text-7xl': '4rem',
411
411
  '--leading-7xl': '1',
412
- '--text-8xl': 'calc(5.25rem * var(--type-scale, 1))',
412
+ '--text-8xl': '5.25rem',
413
413
  '--leading-8xl': '1',
414
- '--text-9xl': 'calc(7rem * var(--type-scale, 1))',
414
+ '--text-9xl': '7rem',
415
415
  '--leading-9xl': '1',
416
416
  '--font-size-xs': 'var(--text-xs)',
417
417
  '--font-size-sm': 'var(--text-sm)',
@@ -451,20 +451,20 @@ export const cssVars = {
451
451
  '--type-eyebrow': '600 0.625rem/1 var(--font-sans)',
452
452
  '--density': '1',
453
453
  '--space-0': '0',
454
- '--space-1': 'calc(0.25rem * var(--density, 1))',
455
- '--space-2': 'calc(0.5rem * var(--density, 1))',
456
- '--space-3': 'calc(0.75rem * var(--density, 1))',
457
- '--space-4': 'calc(1rem * var(--density, 1))',
458
- '--space-5': 'calc(1.25rem * var(--density, 1))',
459
- '--space-6': 'calc(1.5rem * var(--density, 1))',
460
- '--space-8': 'calc(2rem * var(--density, 1))',
461
- '--space-10': 'calc(2.5rem * var(--density, 1))',
462
- '--space-12': 'calc(3rem * var(--density, 1))',
463
- '--space-14': 'calc(3.5rem * var(--density, 1))',
464
- '--space-16': 'calc(4rem * var(--density, 1))',
465
- '--space-20': 'calc(5rem * var(--density, 1))',
466
- '--space-24': 'calc(6rem * var(--density, 1))',
467
- '--space-32': 'calc(8rem * var(--density, 1))',
454
+ '--space-1': '0.25rem',
455
+ '--space-2': '0.5rem',
456
+ '--space-3': '0.75rem',
457
+ '--space-4': '1rem',
458
+ '--space-5': '1.25rem',
459
+ '--space-6': '1.5rem',
460
+ '--space-8': '2rem',
461
+ '--space-10': '2.5rem',
462
+ '--space-12': '3rem',
463
+ '--space-14': '3.5rem',
464
+ '--space-16': '4rem',
465
+ '--space-20': '5rem',
466
+ '--space-24': '6rem',
467
+ '--space-32': '8rem',
468
468
  '--golden-1': '0.25rem',
469
469
  '--golden-2': '0.405rem',
470
470
  '--golden-3': '0.654rem',
@@ -525,8 +525,8 @@ export const cssVars = {
525
525
  '--sheet-0': 'var(--surface-page)',
526
526
  '--sheet-1': 'var(--surface-card)',
527
527
  '--sheet-2': 'var(--surface-card-emphasis)',
528
- '--shadow-sheet-1': 'var(--edge-highlight),var(--shadow-md)',
529
- '--shadow-sheet-2': 'var(--edge-highlight),var(--shadow-lg)',
528
+ '--shadow-sheet-1': 'var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)',
529
+ '--shadow-sheet-2': 'var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)',
530
530
  '--fold': '12px',
531
531
  '--fold-face': 'linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))',
532
532
  '--glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hanzo/design",
3
- "version": "0.5.2",
3
+ "version": "0.5.4",
4
4
  "packageManager": "pnpm@11.17.0",
5
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.",
6
6
  "license": "MIT OR Apache-2.0",
package/scripts/check-tokens.mjs CHANGED
@@ -328,5 +328,30 @@ const pass = (msg) => console.log(` ok ${msg}`)
328
328
  : pass('one light direction — every shadow in elevation.css drops straight down')
329
329
  }
330
330
 
331
+ // ── 6. the TS table is arithmetic, not CSS ───────────────────────────────
332
+ // `--text-xs` is `calc(0.6875rem * var(--type-scale, 1))` in the sheet, which is
333
+ // how one property retunes the whole ramp. Emitting that string into the
334
+ // programmatic table too shipped a value no JavaScript can use: a consumer
335
+ // computing with it gets NaN, silently, and a consumer writing it into an inline
336
+ // style outranks every stylesheet.
337
+ //
338
+ // It happened. hanzo.ai's accuracy-at-cost scatter sizes SVG text by
339
+ // `parseFloat(typography['text-xs']) * 16`; against 0.5.x every label measured NaN,
340
+ // the placement pass could not seat a single one, and the chart gate went red —
341
+ // which, because the gates run in the publishing job, froze the whole SITE.
342
+ //
343
+ // So the generator unwraps a knob (`scale()` in gen-tokens.mjs) and this holds it:
344
+ // the knob belongs to the cascade, the value belongs to the table, and neither may
345
+ // take the other's job. styles.css is generated from the CSS directly, so the
346
+ // runtime knob is untouched — this only governs what JavaScript is handed.
347
+ {
348
+ const gen = read(join(root, 'src', 'tokens.gen.ts'))
349
+ const offenders = [...gen.matchAll(/'([^']+)': '([^']*var\(--(?:type-scale|density)[^']*)'/g)]
350
+ offenders.length
351
+ ? offenders.forEach(([, n, v]) =>
352
+ fail(`${n} is emitted as \`${v}\` — a knob cannot be resolved in JS; the table carries the value`))
353
+ : pass('the generated table carries values, not knobs — every length parses as a number')
354
+ }
355
+
331
356
  console.log(failures ? `\n${failures} check(s) failed` : '\nall token checks passed')
332
357
  process.exit(failures ? 1 : 0)
package/scripts/gen-tokens.mjs CHANGED
@@ -33,6 +33,29 @@ function parse(css) {
33
33
  // light `@media`/`[data-theme]` override carry the SAME name. Keep the FIRST
34
34
  // occurrence (dark, the default theme): the static map is the authored default;
35
35
  // live theme switching happens through the CSS cascade via cssVar()/var(--x).
36
+ /**
37
+ * A knob is CSS's, so the TS table publishes the VALUE and leaves the knob behind.
38
+ *
39
+ * `--text-xs` and `--space-1` are authored as `calc(0.6875rem * var(--type-scale, 1))`
40
+ * so one property retunes the whole ramp at runtime. That is right in a stylesheet
41
+ * and unusable in JavaScript twice over: nothing in JS can resolve a `var()`, so a
42
+ * consumer computing with the value gets NaN, and a consumer writing it into an
43
+ * inline style outranks every stylesheet — which is the one thing this package
44
+ * spends its whole cascade avoiding.
45
+ *
46
+ * So the two facts braided into that one string are separated here. The value is
47
+ * the ramp; the knob is the cascade's, and `styles.css` is generated straight from
48
+ * the CSS, so it keeps the calc and the runtime knob still works. `cssVar()`'s
49
+ * fallback gets the literal too, which is what a host with no token layer mounted
50
+ * actually wants — there is no `--type-scale` there either.
51
+ *
52
+ * The shape is exact (`calc(<value> * var(--<knob>, 1))`) and only that shape is
53
+ * unwrapped; a genuinely composite calc (`calc(var(--fold) - 1px)`) is untouched.
54
+ * check-tokens.mjs holds it: no emitted value may name a knob.
55
+ */
56
+ const KNOB = /^calc\(\s*([^*]+?)\s*\*\s*var\(--(?:type-scale|density),\s*1\)\s*\)$/
57
+ const scale = (v) => v.match(KNOB)?.[1] ?? v
58
+
36
59
  const groupMaps = {} // groupName -> Map(name->value), first-wins
37
60
  const flatMap = new Map() // '--name' -> value, first-wins
38
61
  for (const f of FILES) {
@@ -44,7 +67,8 @@ for (const f of FILES) {
44
67
  }
45
68
  const g = GROUP[f] ?? f
46
69
  const gm = (groupMaps[g] ??= new Map())
47
- for (const [n, v] of parse(css)) {
70
+ for (const [n, v0] of parse(css)) {
71
+ const v = scale(v0)
48
72
  if (!gm.has(n)) gm.set(n, v)
49
73
  if (!flatMap.has(`--${n}`)) flatMap.set(`--${n}`, v)
50
74
  }
package/src/tokens.gen.ts CHANGED
@@ -97,31 +97,31 @@ export const colors = {
97
97
  /** typography tokens (from tokens/typography.css). Values are raw CSS. */
98
98
  export const typography = {
99
99
  'type-scale': '1',
100
- 'text-xs': 'calc(0.6875rem * var(--type-scale, 1))',
101
- 'leading-xs': 'calc(1rem * var(--type-scale, 1))',
102
- 'text-sm': 'calc(0.8125rem * var(--type-scale, 1))',
103
- 'leading-sm': 'calc(1.15rem * var(--type-scale, 1))',
104
- 'text-base': 'calc(0.875rem * var(--type-scale, 1))',
105
- 'leading-base': 'calc(1.35rem * var(--type-scale, 1))',
106
- 'text-lg': 'calc(0.9375rem * var(--type-scale, 1))',
107
- 'leading-lg': 'calc(1.4rem * var(--type-scale, 1))',
108
- 'text-xl': 'calc(1.0625rem * var(--type-scale, 1))',
109
- 'leading-xl': 'calc(1.55rem * var(--type-scale, 1))',
110
- 'text-2xl': 'calc(1.3125rem * var(--type-scale, 1))',
111
- 'leading-2xl': 'calc(1.7rem * var(--type-scale, 1))',
112
- 'text-3xl': 'calc(1.625rem * var(--type-scale, 1))',
113
- 'leading-3xl': 'calc(1.95rem * var(--type-scale, 1))',
114
- 'text-4xl': 'calc(2rem * var(--type-scale, 1))',
115
- 'leading-4xl': 'calc(2.25rem * var(--type-scale, 1))',
116
- 'text-5xl': 'calc(2.5rem * var(--type-scale, 1))',
100
+ 'text-xs': '0.6875rem',
101
+ 'leading-xs': '1rem',
102
+ 'text-sm': '0.8125rem',
103
+ 'leading-sm': '1.15rem',
104
+ 'text-base': '0.875rem',
105
+ 'leading-base': '1.35rem',
106
+ 'text-lg': '0.9375rem',
107
+ 'leading-lg': '1.4rem',
108
+ 'text-xl': '1.0625rem',
109
+ 'leading-xl': '1.55rem',
110
+ 'text-2xl': '1.3125rem',
111
+ 'leading-2xl': '1.7rem',
112
+ 'text-3xl': '1.625rem',
113
+ 'leading-3xl': '1.95rem',
114
+ 'text-4xl': '2rem',
115
+ 'leading-4xl': '2.25rem',
116
+ 'text-5xl': '2.5rem',
117
117
  'leading-5xl': '1.05',
118
- 'text-6xl': 'calc(3.25rem * var(--type-scale, 1))',
118
+ 'text-6xl': '3.25rem',
119
119
  'leading-6xl': '1',
120
- 'text-7xl': 'calc(4rem * var(--type-scale, 1))',
120
+ 'text-7xl': '4rem',
121
121
  'leading-7xl': '1',
122
- 'text-8xl': 'calc(5.25rem * var(--type-scale, 1))',
122
+ 'text-8xl': '5.25rem',
123
123
  'leading-8xl': '1',
124
- 'text-9xl': 'calc(7rem * var(--type-scale, 1))',
124
+ 'text-9xl': '7rem',
125
125
  'leading-9xl': '1',
126
126
  'font-size-xs': 'var(--text-xs)',
127
127
  'font-size-sm': 'var(--text-sm)',
@@ -165,20 +165,20 @@ export const typography = {
165
165
  export const spacing = {
166
166
  'density': '1',
167
167
  'space-0': '0',
168
- 'space-1': 'calc(0.25rem * var(--density, 1))',
169
- 'space-2': 'calc(0.5rem * var(--density, 1))',
170
- 'space-3': 'calc(0.75rem * var(--density, 1))',
171
- 'space-4': 'calc(1rem * var(--density, 1))',
172
- 'space-5': 'calc(1.25rem * var(--density, 1))',
173
- 'space-6': 'calc(1.5rem * var(--density, 1))',
174
- 'space-8': 'calc(2rem * var(--density, 1))',
175
- 'space-10': 'calc(2.5rem * var(--density, 1))',
176
- 'space-12': 'calc(3rem * var(--density, 1))',
177
- 'space-14': 'calc(3.5rem * var(--density, 1))',
178
- 'space-16': 'calc(4rem * var(--density, 1))',
179
- 'space-20': 'calc(5rem * var(--density, 1))',
180
- 'space-24': 'calc(6rem * var(--density, 1))',
181
- 'space-32': 'calc(8rem * var(--density, 1))',
168
+ 'space-1': '0.25rem',
169
+ 'space-2': '0.5rem',
170
+ 'space-3': '0.75rem',
171
+ 'space-4': '1rem',
172
+ 'space-5': '1.25rem',
173
+ 'space-6': '1.5rem',
174
+ 'space-8': '2rem',
175
+ 'space-10': '2.5rem',
176
+ 'space-12': '3rem',
177
+ 'space-14': '3.5rem',
178
+ 'space-16': '4rem',
179
+ 'space-20': '5rem',
180
+ 'space-24': '6rem',
181
+ 'space-32': '8rem',
182
182
  'golden-1': '0.25rem',
183
183
  'golden-2': '0.405rem',
184
184
  'golden-3': '0.654rem',
@@ -251,8 +251,8 @@ export const elevation = {
251
251
  'sheet-0': 'var(--surface-page)',
252
252
  'sheet-1': 'var(--surface-card)',
253
253
  'sheet-2': 'var(--surface-card-emphasis)',
254
- 'shadow-sheet-1': 'var(--edge-highlight),var(--shadow-md)',
255
- 'shadow-sheet-2': 'var(--edge-highlight),var(--shadow-lg)',
254
+ 'shadow-sheet-1': 'var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)',
255
+ 'shadow-sheet-2': 'var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)',
256
256
  'fold': '12px',
257
257
  'fold-face': 'linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))',
258
258
  'glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
@@ -400,31 +400,31 @@ export const cssVars = {
400
400
  '--chrome-dot-yellow': 'rgb(234 179 8 / .6)',
401
401
  '--chrome-dot-green': 'rgb(34 197 94 / .6)',
402
402
  '--type-scale': '1',
403
- '--text-xs': 'calc(0.6875rem * var(--type-scale, 1))',
404
- '--leading-xs': 'calc(1rem * var(--type-scale, 1))',
405
- '--text-sm': 'calc(0.8125rem * var(--type-scale, 1))',
406
- '--leading-sm': 'calc(1.15rem * var(--type-scale, 1))',
407
- '--text-base': 'calc(0.875rem * var(--type-scale, 1))',
408
- '--leading-base': 'calc(1.35rem * var(--type-scale, 1))',
409
- '--text-lg': 'calc(0.9375rem * var(--type-scale, 1))',
410
- '--leading-lg': 'calc(1.4rem * var(--type-scale, 1))',
411
- '--text-xl': 'calc(1.0625rem * var(--type-scale, 1))',
412
- '--leading-xl': 'calc(1.55rem * var(--type-scale, 1))',
413
- '--text-2xl': 'calc(1.3125rem * var(--type-scale, 1))',
414
- '--leading-2xl': 'calc(1.7rem * var(--type-scale, 1))',
415
- '--text-3xl': 'calc(1.625rem * var(--type-scale, 1))',
416
- '--leading-3xl': 'calc(1.95rem * var(--type-scale, 1))',
417
- '--text-4xl': 'calc(2rem * var(--type-scale, 1))',
418
- '--leading-4xl': 'calc(2.25rem * var(--type-scale, 1))',
419
- '--text-5xl': 'calc(2.5rem * var(--type-scale, 1))',
403
+ '--text-xs': '0.6875rem',
404
+ '--leading-xs': '1rem',
405
+ '--text-sm': '0.8125rem',
406
+ '--leading-sm': '1.15rem',
407
+ '--text-base': '0.875rem',
408
+ '--leading-base': '1.35rem',
409
+ '--text-lg': '0.9375rem',
410
+ '--leading-lg': '1.4rem',
411
+ '--text-xl': '1.0625rem',
412
+ '--leading-xl': '1.55rem',
413
+ '--text-2xl': '1.3125rem',
414
+ '--leading-2xl': '1.7rem',
415
+ '--text-3xl': '1.625rem',
416
+ '--leading-3xl': '1.95rem',
417
+ '--text-4xl': '2rem',
418
+ '--leading-4xl': '2.25rem',
419
+ '--text-5xl': '2.5rem',
420
420
  '--leading-5xl': '1.05',
421
- '--text-6xl': 'calc(3.25rem * var(--type-scale, 1))',
421
+ '--text-6xl': '3.25rem',
422
422
  '--leading-6xl': '1',
423
- '--text-7xl': 'calc(4rem * var(--type-scale, 1))',
423
+ '--text-7xl': '4rem',
424
424
  '--leading-7xl': '1',
425
- '--text-8xl': 'calc(5.25rem * var(--type-scale, 1))',
425
+ '--text-8xl': '5.25rem',
426
426
  '--leading-8xl': '1',
427
- '--text-9xl': 'calc(7rem * var(--type-scale, 1))',
427
+ '--text-9xl': '7rem',
428
428
  '--leading-9xl': '1',
429
429
  '--font-size-xs': 'var(--text-xs)',
430
430
  '--font-size-sm': 'var(--text-sm)',
@@ -464,20 +464,20 @@ export const cssVars = {
464
464
  '--type-eyebrow': '600 0.625rem/1 var(--font-sans)',
465
465
  '--density': '1',
466
466
  '--space-0': '0',
467
- '--space-1': 'calc(0.25rem * var(--density, 1))',
468
- '--space-2': 'calc(0.5rem * var(--density, 1))',
469
- '--space-3': 'calc(0.75rem * var(--density, 1))',
470
- '--space-4': 'calc(1rem * var(--density, 1))',
471
- '--space-5': 'calc(1.25rem * var(--density, 1))',
472
- '--space-6': 'calc(1.5rem * var(--density, 1))',
473
- '--space-8': 'calc(2rem * var(--density, 1))',
474
- '--space-10': 'calc(2.5rem * var(--density, 1))',
475
- '--space-12': 'calc(3rem * var(--density, 1))',
476
- '--space-14': 'calc(3.5rem * var(--density, 1))',
477
- '--space-16': 'calc(4rem * var(--density, 1))',
478
- '--space-20': 'calc(5rem * var(--density, 1))',
479
- '--space-24': 'calc(6rem * var(--density, 1))',
480
- '--space-32': 'calc(8rem * var(--density, 1))',
467
+ '--space-1': '0.25rem',
468
+ '--space-2': '0.5rem',
469
+ '--space-3': '0.75rem',
470
+ '--space-4': '1rem',
471
+ '--space-5': '1.25rem',
472
+ '--space-6': '1.5rem',
473
+ '--space-8': '2rem',
474
+ '--space-10': '2.5rem',
475
+ '--space-12': '3rem',
476
+ '--space-14': '3.5rem',
477
+ '--space-16': '4rem',
478
+ '--space-20': '5rem',
479
+ '--space-24': '6rem',
480
+ '--space-32': '8rem',
481
481
  '--golden-1': '0.25rem',
482
482
  '--golden-2': '0.405rem',
483
483
  '--golden-3': '0.654rem',
@@ -538,8 +538,8 @@ export const cssVars = {
538
538
  '--sheet-0': 'var(--surface-page)',
539
539
  '--sheet-1': 'var(--surface-card)',
540
540
  '--sheet-2': 'var(--surface-card-emphasis)',
541
- '--shadow-sheet-1': 'var(--edge-highlight),var(--shadow-md)',
542
- '--shadow-sheet-2': 'var(--edge-highlight),var(--shadow-lg)',
541
+ '--shadow-sheet-1': 'var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)',
542
+ '--shadow-sheet-2': 'var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)',
543
543
  '--fold': '12px',
544
544
  '--fold-face': 'linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))',
545
545
  '--glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
package/styles.css CHANGED
@@ -610,8 +610,18 @@
610
610
  --sheet-0:var(--surface-page); /* the workspace ground */
611
611
  --sheet-1:var(--surface-card); /* an active tool */
612
612
  --sheet-2:var(--surface-card-emphasis); /* what opened, or what is inside */
613
- --shadow-sheet-1:var(--edge-highlight),var(--shadow-md);
614
- --shadow-sheet-2:var(--edge-highlight),var(--shadow-lg);
613
+ /* The drops are spelled out rather than read from the t-shirt ramp above, and
614
+ that is the whole reason this ladder can be shared. `--shadow-sm` is a name
615
+ this package does not own — @hanzo/brand declares the same names at :root
616
+ with white-canvas alphas, and load order decides who wins — so a rung built
617
+ on one is a rung somebody else can flatten. `--shadow-sheet-*` is ours
618
+ alone, which is what lets @hanzo/ui's `.elevation-*` read it instead of
619
+ keeping a private copy. The numbers ARE rung 1 and rung 2 of the ramp; if
620
+ one moves, move both. `--edge-highlight` stays deferred: it is role-named,
621
+ uncollided, and its `.light` zeroing is what makes one value work on both
622
+ canvases. */
623
+ --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40);
624
+ --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55);
615
625
 
616
626
  /* The fold — a corner turned back, and the one mark that means THIS OPENS.
617
627
  Ornament nowhere: a sheet that does not expand does not wear one.
@@ -655,6 +665,11 @@
655
665
  costs nothing. */
656
666
  .light{
657
667
  --shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
668
+ /* On white the drop does all of it, so the paper rungs are restated here even
669
+ though check 4 does not demand it — their white is inside --edge-highlight,
670
+ which flips underneath. Rung 1 and rung 2 of the light ramp, same as dark. */
671
+ --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .06);
672
+ --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .09),0 4px 6px -4px rgb(0 0 0 / .07);
658
673
  --shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
659
674
  --edge-highlight:inset 0 0 0 0 transparent;
660
675
  --bloom:0 6px 20px -4px rgb(0 0 0 / .18);
package/tailwind.css CHANGED
@@ -633,8 +633,18 @@
633
633
  --sheet-0:var(--surface-page); /* the workspace ground */
634
634
  --sheet-1:var(--surface-card); /* an active tool */
635
635
  --sheet-2:var(--surface-card-emphasis); /* what opened, or what is inside */
636
- --shadow-sheet-1:var(--edge-highlight),var(--shadow-md);
637
- --shadow-sheet-2:var(--edge-highlight),var(--shadow-lg);
636
+ /* The drops are spelled out rather than read from the t-shirt ramp above, and
637
+ that is the whole reason this ladder can be shared. `--shadow-sm` is a name
638
+ this package does not own — @hanzo/brand declares the same names at :root
639
+ with white-canvas alphas, and load order decides who wins — so a rung built
640
+ on one is a rung somebody else can flatten. `--shadow-sheet-*` is ours
641
+ alone, which is what lets @hanzo/ui's `.elevation-*` read it instead of
642
+ keeping a private copy. The numbers ARE rung 1 and rung 2 of the ramp; if
643
+ one moves, move both. `--edge-highlight` stays deferred: it is role-named,
644
+ uncollided, and its `.light` zeroing is what makes one value work on both
645
+ canvases. */
646
+ --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40);
647
+ --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55);
638
648
 
639
649
  /* The fold — a corner turned back, and the one mark that means THIS OPENS.
640
650
  Ornament nowhere: a sheet that does not expand does not wear one.
@@ -678,6 +688,11 @@
678
688
  costs nothing. */
679
689
  .light{
680
690
  --shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
691
+ /* On white the drop does all of it, so the paper rungs are restated here even
692
+ though check 4 does not demand it — their white is inside --edge-highlight,
693
+ which flips underneath. Rung 1 and rung 2 of the light ramp, same as dark. */
694
+ --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .06);
695
+ --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .09),0 4px 6px -4px rgb(0 0 0 / .07);
681
696
  --shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
682
697
  --edge-highlight:inset 0 0 0 0 transparent;
683
698
  --bloom:0 6px 20px -4px rgb(0 0 0 / .18);
package/tokens/elevation.css CHANGED
@@ -75,8 +75,18 @@
75
75
  --sheet-0:var(--surface-page); /* the workspace ground */
76
76
  --sheet-1:var(--surface-card); /* an active tool */
77
77
  --sheet-2:var(--surface-card-emphasis); /* what opened, or what is inside */
78
- --shadow-sheet-1:var(--edge-highlight),var(--shadow-md);
79
- --shadow-sheet-2:var(--edge-highlight),var(--shadow-lg);
78
+ /* The drops are spelled out rather than read from the t-shirt ramp above, and
79
+ that is the whole reason this ladder can be shared. `--shadow-sm` is a name
80
+ this package does not own — @hanzo/brand declares the same names at :root
81
+ with white-canvas alphas, and load order decides who wins — so a rung built
82
+ on one is a rung somebody else can flatten. `--shadow-sheet-*` is ours
83
+ alone, which is what lets @hanzo/ui's `.elevation-*` read it instead of
84
+ keeping a private copy. The numbers ARE rung 1 and rung 2 of the ramp; if
85
+ one moves, move both. `--edge-highlight` stays deferred: it is role-named,
86
+ uncollided, and its `.light` zeroing is what makes one value work on both
87
+ canvases. */
88
+ --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40);
89
+ --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55);
80
90
 
81
91
  /* The fold — a corner turned back, and the one mark that means THIS OPENS.
82
92
  Ornament nowhere: a sheet that does not expand does not wear one.
@@ -120,6 +130,11 @@
120
130
  costs nothing. */
121
131
  .light{
122
132
  --shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
133
+ /* On white the drop does all of it, so the paper rungs are restated here even
134
+ though check 4 does not demand it — their white is inside --edge-highlight,
135
+ which flips underneath. Rung 1 and rung 2 of the light ramp, same as dark. */
136
+ --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .06);
137
+ --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .09),0 4px 6px -4px rgb(0 0 0 / .07);
123
138
  --shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
124
139
  --edge-highlight:inset 0 0 0 0 transparent;
125
140
  --bloom:0 6px 20px -4px rgb(0 0 0 / .18);