@hanzo/design 0.5.3 → 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.
- package/dist/tokens.gen.d.ts +70 -70
- package/dist/tokens.gen.js +70 -70
- package/package.json +1 -1
- package/scripts/check-tokens.mjs +25 -0
- package/scripts/gen-tokens.mjs +25 -1
- package/src/tokens.gen.ts +70 -70
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': "
|
|
96
|
-
readonly 'leading-xs': "
|
|
97
|
-
readonly 'text-sm': "
|
|
98
|
-
readonly 'leading-sm': "
|
|
99
|
-
readonly 'text-base': "
|
|
100
|
-
readonly 'leading-base': "
|
|
101
|
-
readonly 'text-lg': "
|
|
102
|
-
readonly 'leading-lg': "
|
|
103
|
-
readonly 'text-xl': "
|
|
104
|
-
readonly 'leading-xl': "
|
|
105
|
-
readonly 'text-2xl': "
|
|
106
|
-
readonly 'leading-2xl': "
|
|
107
|
-
readonly 'text-3xl': "
|
|
108
|
-
readonly 'leading-3xl': "
|
|
109
|
-
readonly 'text-4xl': "
|
|
110
|
-
readonly 'leading-4xl': "
|
|
111
|
-
readonly 'text-5xl': "
|
|
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': "
|
|
113
|
+
readonly 'text-6xl': "3.25rem";
|
|
114
114
|
readonly 'leading-6xl': "1";
|
|
115
|
-
readonly 'text-7xl': "
|
|
115
|
+
readonly 'text-7xl': "4rem";
|
|
116
116
|
readonly 'leading-7xl': "1";
|
|
117
|
-
readonly 'text-8xl': "
|
|
117
|
+
readonly 'text-8xl': "5.25rem";
|
|
118
118
|
readonly 'leading-8xl': "1";
|
|
119
|
-
readonly 'text-9xl': "
|
|
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': "
|
|
163
|
-
readonly 'space-2': "
|
|
164
|
-
readonly 'space-3': "
|
|
165
|
-
readonly 'space-4': "
|
|
166
|
-
readonly 'space-5': "
|
|
167
|
-
readonly 'space-6': "
|
|
168
|
-
readonly 'space-8': "
|
|
169
|
-
readonly 'space-10': "
|
|
170
|
-
readonly 'space-12': "
|
|
171
|
-
readonly 'space-14': "
|
|
172
|
-
readonly 'space-16': "
|
|
173
|
-
readonly 'space-20': "
|
|
174
|
-
readonly 'space-24': "
|
|
175
|
-
readonly 'space-32': "
|
|
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";
|
|
@@ -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': "
|
|
388
|
-
readonly '--leading-xs': "
|
|
389
|
-
readonly '--text-sm': "
|
|
390
|
-
readonly '--leading-sm': "
|
|
391
|
-
readonly '--text-base': "
|
|
392
|
-
readonly '--leading-base': "
|
|
393
|
-
readonly '--text-lg': "
|
|
394
|
-
readonly '--leading-lg': "
|
|
395
|
-
readonly '--text-xl': "
|
|
396
|
-
readonly '--leading-xl': "
|
|
397
|
-
readonly '--text-2xl': "
|
|
398
|
-
readonly '--leading-2xl': "
|
|
399
|
-
readonly '--text-3xl': "
|
|
400
|
-
readonly '--leading-3xl': "
|
|
401
|
-
readonly '--text-4xl': "
|
|
402
|
-
readonly '--leading-4xl': "
|
|
403
|
-
readonly '--text-5xl': "
|
|
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': "
|
|
405
|
+
readonly '--text-6xl': "3.25rem";
|
|
406
406
|
readonly '--leading-6xl': "1";
|
|
407
|
-
readonly '--text-7xl': "
|
|
407
|
+
readonly '--text-7xl': "4rem";
|
|
408
408
|
readonly '--leading-7xl': "1";
|
|
409
|
-
readonly '--text-8xl': "
|
|
409
|
+
readonly '--text-8xl': "5.25rem";
|
|
410
410
|
readonly '--leading-8xl': "1";
|
|
411
|
-
readonly '--text-9xl': "
|
|
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': "
|
|
452
|
-
readonly '--space-2': "
|
|
453
|
-
readonly '--space-3': "
|
|
454
|
-
readonly '--space-4': "
|
|
455
|
-
readonly '--space-5': "
|
|
456
|
-
readonly '--space-6': "
|
|
457
|
-
readonly '--space-8': "
|
|
458
|
-
readonly '--space-10': "
|
|
459
|
-
readonly '--space-12': "
|
|
460
|
-
readonly '--space-14': "
|
|
461
|
-
readonly '--space-16': "
|
|
462
|
-
readonly '--space-20': "
|
|
463
|
-
readonly '--space-24': "
|
|
464
|
-
readonly '--space-32': "
|
|
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";
|
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': '
|
|
99
|
-
'leading-xs': '
|
|
100
|
-
'text-sm': '
|
|
101
|
-
'leading-sm': '
|
|
102
|
-
'text-base': '
|
|
103
|
-
'leading-base': '
|
|
104
|
-
'text-lg': '
|
|
105
|
-
'leading-lg': '
|
|
106
|
-
'text-xl': '
|
|
107
|
-
'leading-xl': '
|
|
108
|
-
'text-2xl': '
|
|
109
|
-
'leading-2xl': '
|
|
110
|
-
'text-3xl': '
|
|
111
|
-
'leading-3xl': '
|
|
112
|
-
'text-4xl': '
|
|
113
|
-
'leading-4xl': '
|
|
114
|
-
'text-5xl': '
|
|
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': '
|
|
116
|
+
'text-6xl': '3.25rem',
|
|
117
117
|
'leading-6xl': '1',
|
|
118
|
-
'text-7xl': '
|
|
118
|
+
'text-7xl': '4rem',
|
|
119
119
|
'leading-7xl': '1',
|
|
120
|
-
'text-8xl': '
|
|
120
|
+
'text-8xl': '5.25rem',
|
|
121
121
|
'leading-8xl': '1',
|
|
122
|
-
'text-9xl': '
|
|
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': '
|
|
166
|
-
'space-2': '
|
|
167
|
-
'space-3': '
|
|
168
|
-
'space-4': '
|
|
169
|
-
'space-5': '
|
|
170
|
-
'space-6': '
|
|
171
|
-
'space-8': '
|
|
172
|
-
'space-10': '
|
|
173
|
-
'space-12': '
|
|
174
|
-
'space-14': '
|
|
175
|
-
'space-16': '
|
|
176
|
-
'space-20': '
|
|
177
|
-
'space-24': '
|
|
178
|
-
'space-32': '
|
|
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',
|
|
@@ -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': '
|
|
391
|
-
'--leading-xs': '
|
|
392
|
-
'--text-sm': '
|
|
393
|
-
'--leading-sm': '
|
|
394
|
-
'--text-base': '
|
|
395
|
-
'--leading-base': '
|
|
396
|
-
'--text-lg': '
|
|
397
|
-
'--leading-lg': '
|
|
398
|
-
'--text-xl': '
|
|
399
|
-
'--leading-xl': '
|
|
400
|
-
'--text-2xl': '
|
|
401
|
-
'--leading-2xl': '
|
|
402
|
-
'--text-3xl': '
|
|
403
|
-
'--leading-3xl': '
|
|
404
|
-
'--text-4xl': '
|
|
405
|
-
'--leading-4xl': '
|
|
406
|
-
'--text-5xl': '
|
|
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': '
|
|
408
|
+
'--text-6xl': '3.25rem',
|
|
409
409
|
'--leading-6xl': '1',
|
|
410
|
-
'--text-7xl': '
|
|
410
|
+
'--text-7xl': '4rem',
|
|
411
411
|
'--leading-7xl': '1',
|
|
412
|
-
'--text-8xl': '
|
|
412
|
+
'--text-8xl': '5.25rem',
|
|
413
413
|
'--leading-8xl': '1',
|
|
414
|
-
'--text-9xl': '
|
|
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': '
|
|
455
|
-
'--space-2': '
|
|
456
|
-
'--space-3': '
|
|
457
|
-
'--space-4': '
|
|
458
|
-
'--space-5': '
|
|
459
|
-
'--space-6': '
|
|
460
|
-
'--space-8': '
|
|
461
|
-
'--space-10': '
|
|
462
|
-
'--space-12': '
|
|
463
|
-
'--space-14': '
|
|
464
|
-
'--space-16': '
|
|
465
|
-
'--space-20': '
|
|
466
|
-
'--space-24': '
|
|
467
|
-
'--space-32': '
|
|
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',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzo/design",
|
|
3
|
-
"version": "0.5.
|
|
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,
|
|
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': '
|
|
101
|
-
'leading-xs': '
|
|
102
|
-
'text-sm': '
|
|
103
|
-
'leading-sm': '
|
|
104
|
-
'text-base': '
|
|
105
|
-
'leading-base': '
|
|
106
|
-
'text-lg': '
|
|
107
|
-
'leading-lg': '
|
|
108
|
-
'text-xl': '
|
|
109
|
-
'leading-xl': '
|
|
110
|
-
'text-2xl': '
|
|
111
|
-
'leading-2xl': '
|
|
112
|
-
'text-3xl': '
|
|
113
|
-
'leading-3xl': '
|
|
114
|
-
'text-4xl': '
|
|
115
|
-
'leading-4xl': '
|
|
116
|
-
'text-5xl': '
|
|
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': '
|
|
118
|
+
'text-6xl': '3.25rem',
|
|
119
119
|
'leading-6xl': '1',
|
|
120
|
-
'text-7xl': '
|
|
120
|
+
'text-7xl': '4rem',
|
|
121
121
|
'leading-7xl': '1',
|
|
122
|
-
'text-8xl': '
|
|
122
|
+
'text-8xl': '5.25rem',
|
|
123
123
|
'leading-8xl': '1',
|
|
124
|
-
'text-9xl': '
|
|
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': '
|
|
169
|
-
'space-2': '
|
|
170
|
-
'space-3': '
|
|
171
|
-
'space-4': '
|
|
172
|
-
'space-5': '
|
|
173
|
-
'space-6': '
|
|
174
|
-
'space-8': '
|
|
175
|
-
'space-10': '
|
|
176
|
-
'space-12': '
|
|
177
|
-
'space-14': '
|
|
178
|
-
'space-16': '
|
|
179
|
-
'space-20': '
|
|
180
|
-
'space-24': '
|
|
181
|
-
'space-32': '
|
|
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',
|
|
@@ -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': '
|
|
404
|
-
'--leading-xs': '
|
|
405
|
-
'--text-sm': '
|
|
406
|
-
'--leading-sm': '
|
|
407
|
-
'--text-base': '
|
|
408
|
-
'--leading-base': '
|
|
409
|
-
'--text-lg': '
|
|
410
|
-
'--leading-lg': '
|
|
411
|
-
'--text-xl': '
|
|
412
|
-
'--leading-xl': '
|
|
413
|
-
'--text-2xl': '
|
|
414
|
-
'--leading-2xl': '
|
|
415
|
-
'--text-3xl': '
|
|
416
|
-
'--leading-3xl': '
|
|
417
|
-
'--text-4xl': '
|
|
418
|
-
'--leading-4xl': '
|
|
419
|
-
'--text-5xl': '
|
|
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': '
|
|
421
|
+
'--text-6xl': '3.25rem',
|
|
422
422
|
'--leading-6xl': '1',
|
|
423
|
-
'--text-7xl': '
|
|
423
|
+
'--text-7xl': '4rem',
|
|
424
424
|
'--leading-7xl': '1',
|
|
425
|
-
'--text-8xl': '
|
|
425
|
+
'--text-8xl': '5.25rem',
|
|
426
426
|
'--leading-8xl': '1',
|
|
427
|
-
'--text-9xl': '
|
|
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': '
|
|
468
|
-
'--space-2': '
|
|
469
|
-
'--space-3': '
|
|
470
|
-
'--space-4': '
|
|
471
|
-
'--space-5': '
|
|
472
|
-
'--space-6': '
|
|
473
|
-
'--space-8': '
|
|
474
|
-
'--space-10': '
|
|
475
|
-
'--space-12': '
|
|
476
|
-
'--space-14': '
|
|
477
|
-
'--space-16': '
|
|
478
|
-
'--space-20': '
|
|
479
|
-
'--space-24': '
|
|
480
|
-
'--space-32': '
|
|
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',
|