@hanzo/design 0.4.10 → 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 (14) hide show
  1. package/dist/preference.d.ts +20 -14
  2. package/dist/preference.d.ts.map +1 -1
  3. package/dist/preference.js +35 -37
  4. package/dist/tokens.gen.d.ts +74 -70
  5. package/dist/tokens.gen.d.ts.map +1 -1
  6. package/dist/tokens.gen.js +74 -70
  7. package/package.json +1 -1
  8. package/scripts/check-preference.mjs +66 -33
  9. package/src/preference.ts +35 -37
  10. package/src/tokens.gen.ts +74 -70
  11. package/styles.css +40 -28
  12. package/tailwind.css +40 -28
  13. package/tokens/spacing.css +20 -14
  14. package/tokens/typography.css +20 -14
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
  }