@hanzo/design 0.4.9 → 0.4.11

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 (18) hide show
  1. package/dist/index.d.ts +2 -0
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +4 -0
  4. package/dist/preference.d.ts +65 -0
  5. package/dist/preference.d.ts.map +1 -0
  6. package/dist/preference.js +102 -0
  7. package/dist/tokens.gen.d.ts +74 -70
  8. package/dist/tokens.gen.d.ts.map +1 -1
  9. package/dist/tokens.gen.js +74 -70
  10. package/package.json +2 -2
  11. package/scripts/check-preference.mjs +168 -0
  12. package/src/index.ts +6 -0
  13. package/src/preference.ts +122 -0
  14. package/src/tokens.gen.ts +74 -70
  15. package/styles.css +40 -28
  16. package/tailwind.css +40 -28
  17. package/tokens/spacing.css +20 -14
  18. package/tokens/typography.css +20 -14
package/tailwind.css CHANGED
@@ -313,19 +313,25 @@
313
313
  — the two are the SAME scale, mirrored. A surface/tenant overrides any --text-*
314
314
  on :root to retune density on demand. */
315
315
  :root{
316
- --text-xs:0.6875rem; --leading-xs:1rem; /* 11px — eyebrows / section labels */
317
- --text-sm:0.8125rem; --leading-sm:1.15rem; /* 13px — nav labels, dense body */
318
- --text-base:0.875rem; --leading-base:1.35rem; /* 14px — base app text (was 16px) */
319
- --text-lg:0.9375rem; --leading-lg:1.4rem; /* 15px */
320
- --text-xl:1.0625rem; --leading-xl:1.55rem; /* 17px */
321
- --text-2xl:1.3125rem; --leading-2xl:1.7rem; /* 21px */
322
- --text-3xl:1.625rem; --leading-3xl:1.95rem; /* 26px */
323
- --text-4xl:2rem; --leading-4xl:2.25rem; /* 32px */
324
- --text-5xl:2.5rem; --leading-5xl:1.05; /* 40px */
325
- --text-6xl:3.25rem; --leading-6xl:1; /* 52px */
326
- --text-7xl:4rem; --leading-7xl:1; /* 64px */
327
- --text-8xl:5.25rem; --leading-8xl:1; /* 84px */
328
- --text-9xl:7rem; --leading-9xl:1; /* 112px */
316
+ /* The type knob. 1 is the published scale; every rung below multiplies by
317
+ it, so a surface or a person retunes the WHOLE ramp by setting one
318
+ number and no rung can drift out of relation with the others.
319
+ @hanzo/design's `vars({type})` emits exactly this name. */
320
+ --type-scale:1;
321
+
322
+ --text-xs:calc(0.6875rem * var(--type-scale, 1)); --leading-xs:calc(1rem * var(--type-scale, 1)); /* 11px — eyebrows / section labels */
323
+ --text-sm:calc(0.8125rem * var(--type-scale, 1)); --leading-sm:calc(1.15rem * var(--type-scale, 1)); /* 13px — nav labels, dense body */
324
+ --text-base:calc(0.875rem * var(--type-scale, 1)); --leading-base:calc(1.35rem * var(--type-scale, 1)); /* 14px — base app text (was 16px) */
325
+ --text-lg:calc(0.9375rem * var(--type-scale, 1)); --leading-lg:calc(1.4rem * var(--type-scale, 1)); /* 15px */
326
+ --text-xl:calc(1.0625rem * var(--type-scale, 1)); --leading-xl:calc(1.55rem * var(--type-scale, 1)); /* 17px */
327
+ --text-2xl:calc(1.3125rem * var(--type-scale, 1)); --leading-2xl:calc(1.7rem * var(--type-scale, 1)); /* 21px */
328
+ --text-3xl:calc(1.625rem * var(--type-scale, 1)); --leading-3xl:calc(1.95rem * var(--type-scale, 1)); /* 26px */
329
+ --text-4xl:calc(2rem * var(--type-scale, 1)); --leading-4xl:calc(2.25rem * var(--type-scale, 1)); /* 32px */
330
+ --text-5xl:calc(2.5rem * var(--type-scale, 1)); --leading-5xl:1.05; /* 40px */
331
+ --text-6xl:calc(3.25rem * var(--type-scale, 1)); --leading-6xl:1; /* 52px */
332
+ --text-7xl:calc(4rem * var(--type-scale, 1)); --leading-7xl:1; /* 64px */
333
+ --text-8xl:calc(5.25rem * var(--type-scale, 1)); --leading-8xl:1; /* 84px */
334
+ --text-9xl:calc(7rem * var(--type-scale, 1)); --leading-9xl:1; /* 112px */
329
335
 
330
336
  /* The SAME scale under @hanzo/brand's spelling. @hanzo/gui's shell theme and
331
337
  Hanzo Studio address the ramp as --font-size-*; both names are one value, so
@@ -390,7 +396,7 @@
390
396
  form feels broken. pointer:coarse is the real signal — a desktop mouse keeps
391
397
  the compact 13px field. */
392
398
  @media (pointer:coarse){
393
- :root{--text-control:1rem}
399
+ :root{--text-control:calc(1rem * var(--type-scale, 1))}
394
400
  }
395
401
 
396
402
  /* ── tokens/spacing.css ─────────────────────────────────────── */
@@ -398,21 +404,27 @@
398
404
  declared in hanzo.ai's tailwind.config.ts (legacy v3 config, kept for
399
405
  reference) — use it for editorial layouts, not for component padding. */
400
406
  :root{
407
+ /* The density knob. 1 is the published spacing; every --space-* rung below
408
+ multiplies by it, and --grid-gap-* reference those rungs rather than
409
+ restating them, so gaps, padding and section rhythm move together.
410
+ @hanzo/design's `vars({density})` emits exactly this name. */
411
+ --density:1;
412
+
401
413
  --space-0:0;
402
- --space-1:0.25rem;
403
- --space-2:0.5rem;
404
- --space-3:0.75rem;
405
- --space-4:1rem;
406
- --space-5:1.25rem;
407
- --space-6:1.5rem;
408
- --space-8:2rem;
409
- --space-10:2.5rem;
410
- --space-12:3rem;
411
- --space-14:3.5rem;
412
- --space-16:4rem;
413
- --space-20:5rem;
414
- --space-24:6rem;
415
- --space-32:8rem;
414
+ --space-1:calc(0.25rem * var(--density, 1));
415
+ --space-2:calc(0.5rem * var(--density, 1));
416
+ --space-3:calc(0.75rem * var(--density, 1));
417
+ --space-4:calc(1rem * var(--density, 1));
418
+ --space-5:calc(1.25rem * var(--density, 1));
419
+ --space-6:calc(1.5rem * var(--density, 1));
420
+ --space-8:calc(2rem * var(--density, 1));
421
+ --space-10:calc(2.5rem * var(--density, 1));
422
+ --space-12:calc(3rem * var(--density, 1));
423
+ --space-14:calc(3.5rem * var(--density, 1));
424
+ --space-16:calc(4rem * var(--density, 1));
425
+ --space-20:calc(5rem * var(--density, 1));
426
+ --space-24:calc(6rem * var(--density, 1));
427
+ --space-32:calc(8rem * var(--density, 1));
416
428
 
417
429
  /* golden ramp (φ) — hanzo.ai tailwind.config.ts */
418
430
  --golden-1:0.25rem;
package/tokens/spacing.css CHANGED
@@ -2,21 +2,27 @@
2
2
  declared in hanzo.ai's tailwind.config.ts (legacy v3 config, kept for
3
3
  reference) — use it for editorial layouts, not for component padding. */
4
4
  :root{
5
+ /* The density knob. 1 is the published spacing; every --space-* rung below
6
+ multiplies by it, and --grid-gap-* reference those rungs rather than
7
+ restating them, so gaps, padding and section rhythm move together.
8
+ @hanzo/design's `vars({density})` emits exactly this name. */
9
+ --density:1;
10
+
5
11
  --space-0:0;
6
- --space-1:0.25rem;
7
- --space-2:0.5rem;
8
- --space-3:0.75rem;
9
- --space-4:1rem;
10
- --space-5:1.25rem;
11
- --space-6:1.5rem;
12
- --space-8:2rem;
13
- --space-10:2.5rem;
14
- --space-12:3rem;
15
- --space-14:3.5rem;
16
- --space-16:4rem;
17
- --space-20:5rem;
18
- --space-24:6rem;
19
- --space-32:8rem;
12
+ --space-1:calc(0.25rem * var(--density, 1));
13
+ --space-2:calc(0.5rem * var(--density, 1));
14
+ --space-3:calc(0.75rem * var(--density, 1));
15
+ --space-4:calc(1rem * var(--density, 1));
16
+ --space-5:calc(1.25rem * var(--density, 1));
17
+ --space-6:calc(1.5rem * var(--density, 1));
18
+ --space-8:calc(2rem * var(--density, 1));
19
+ --space-10:calc(2.5rem * var(--density, 1));
20
+ --space-12:calc(3rem * var(--density, 1));
21
+ --space-14:calc(3.5rem * var(--density, 1));
22
+ --space-16:calc(4rem * var(--density, 1));
23
+ --space-20:calc(5rem * var(--density, 1));
24
+ --space-24:calc(6rem * var(--density, 1));
25
+ --space-32:calc(8rem * var(--density, 1));
20
26
 
21
27
  /* golden ramp (φ) — hanzo.ai tailwind.config.ts */
22
28
  --golden-1:0.25rem;
package/tokens/typography.css CHANGED
@@ -5,19 +5,25 @@
5
5
  — the two are the SAME scale, mirrored. A surface/tenant overrides any --text-*
6
6
  on :root to retune density on demand. */
7
7
  :root{
8
- --text-xs:0.6875rem; --leading-xs:1rem; /* 11px — eyebrows / section labels */
9
- --text-sm:0.8125rem; --leading-sm:1.15rem; /* 13px — nav labels, dense body */
10
- --text-base:0.875rem; --leading-base:1.35rem; /* 14px — base app text (was 16px) */
11
- --text-lg:0.9375rem; --leading-lg:1.4rem; /* 15px */
12
- --text-xl:1.0625rem; --leading-xl:1.55rem; /* 17px */
13
- --text-2xl:1.3125rem; --leading-2xl:1.7rem; /* 21px */
14
- --text-3xl:1.625rem; --leading-3xl:1.95rem; /* 26px */
15
- --text-4xl:2rem; --leading-4xl:2.25rem; /* 32px */
16
- --text-5xl:2.5rem; --leading-5xl:1.05; /* 40px */
17
- --text-6xl:3.25rem; --leading-6xl:1; /* 52px */
18
- --text-7xl:4rem; --leading-7xl:1; /* 64px */
19
- --text-8xl:5.25rem; --leading-8xl:1; /* 84px */
20
- --text-9xl:7rem; --leading-9xl:1; /* 112px */
8
+ /* The type knob. 1 is the published scale; every rung below multiplies by
9
+ it, so a surface or a person retunes the WHOLE ramp by setting one
10
+ number and no rung can drift out of relation with the others.
11
+ @hanzo/design's `vars({type})` emits exactly this name. */
12
+ --type-scale:1;
13
+
14
+ --text-xs:calc(0.6875rem * var(--type-scale, 1)); --leading-xs:calc(1rem * var(--type-scale, 1)); /* 11px — eyebrows / section labels */
15
+ --text-sm:calc(0.8125rem * var(--type-scale, 1)); --leading-sm:calc(1.15rem * var(--type-scale, 1)); /* 13px — nav labels, dense body */
16
+ --text-base:calc(0.875rem * var(--type-scale, 1)); --leading-base:calc(1.35rem * var(--type-scale, 1)); /* 14px — base app text (was 16px) */
17
+ --text-lg:calc(0.9375rem * var(--type-scale, 1)); --leading-lg:calc(1.4rem * var(--type-scale, 1)); /* 15px */
18
+ --text-xl:calc(1.0625rem * var(--type-scale, 1)); --leading-xl:calc(1.55rem * var(--type-scale, 1)); /* 17px */
19
+ --text-2xl:calc(1.3125rem * var(--type-scale, 1)); --leading-2xl:calc(1.7rem * var(--type-scale, 1)); /* 21px */
20
+ --text-3xl:calc(1.625rem * var(--type-scale, 1)); --leading-3xl:calc(1.95rem * var(--type-scale, 1)); /* 26px */
21
+ --text-4xl:calc(2rem * var(--type-scale, 1)); --leading-4xl:calc(2.25rem * var(--type-scale, 1)); /* 32px */
22
+ --text-5xl:calc(2.5rem * var(--type-scale, 1)); --leading-5xl:1.05; /* 40px */
23
+ --text-6xl:calc(3.25rem * var(--type-scale, 1)); --leading-6xl:1; /* 52px */
24
+ --text-7xl:calc(4rem * var(--type-scale, 1)); --leading-7xl:1; /* 64px */
25
+ --text-8xl:calc(5.25rem * var(--type-scale, 1)); --leading-8xl:1; /* 84px */
26
+ --text-9xl:calc(7rem * var(--type-scale, 1)); --leading-9xl:1; /* 112px */
21
27
 
22
28
  /* The SAME scale under @hanzo/brand's spelling. @hanzo/gui's shell theme and
23
29
  Hanzo Studio address the ramp as --font-size-*; both names are one value, so
@@ -82,5 +88,5 @@
82
88
  form feels broken. pointer:coarse is the real signal — a desktop mouse keeps
83
89
  the compact 13px field. */
84
90
  @media (pointer:coarse){
85
- :root{--text-control:1rem}
91
+ :root{--text-control:calc(1rem * var(--type-scale, 1))}
86
92
  }