@hanzo/design 0.4.10 → 0.4.12

package/dist/index.d.ts

@@ -33,6 +33,6 @@ export declare function tokenValue(name: CssVarName): string | undefined;
  * bare. Pass a URL you serve.
  */
 export declare function injectDesignCss(href: string): void;
-export { vars, css, isColor, TYPE_MIN, TYPE_MAX } from './preference';
-export type { Preference, Density } from './preference';
+export { vars, css, isColor, TYPE_MIN, TYPE_MAX } from './preference.js';
+export type { Preference, Density } from './preference.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE1D,uFAAuF;AACvF,MAAM,MAAM,SAAS,GAAG,UAAU,SAAS,KAAK,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAErE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAI9E;AAED,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAE/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAQlD;AAKD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACtE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE1D,uFAAuF;AACvF,MAAM,MAAM,SAAS,GAAG,UAAU,SAAS,KAAK,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAErE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAI9E;AAED,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAE/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAQlD;AAKD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACzE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -61,4 +61,4 @@ export function injectDesignCss(href) {
 // A person's own reading of the system — type size, density, accent — as CSS
 // custom properties. Pure: it maps a preference to variables and returns them,
 // so an app, an embedded preview and a server render all apply it the same way.
-export { vars, css, isColor, TYPE_MIN, TYPE_MAX } from './preference';
+export { vars, css, isColor, TYPE_MIN, TYPE_MAX } from './preference.js';

package/dist/preference.d.ts

@@ -1,23 +1,29 @@
 /**
  * A person's own reading of the system: type size, density, accent.
  *
- * The ramps in `tokens/*.css` are the SHAPE — the relationships between sizes,
- * gaps and hues that make a surface read as one thing. A preference does not
- * replace them and cannot reach inside them. It applies ONE transform to a whole
- * axis, so every size still stands in the same relation to every other size and
- * a customised UI is the same design at a different setting, not a different
- * design.
+ * Three knobs, and each is ONE multiplier on a whole axis — never a restated
+ * ramp. The ramps live in `tokens/*.css`, authored once, and each rung carries
+ * its own `calc(<base> * var(--type-scale, 1))`. So a preference sets three
+ * numbers and every rung follows, including rungs added later and rungs this
+ * file has never heard of.
  *
- * It is a pure function on purpose. `vars()` maps a preference to the custom
- * properties that carry it, and returns them; nothing here touches a document.
- * That is what lets it be tested without a browser and reused by every surface —
- * an app, an embedded builder preview, a server render that inlines the result.
+ * That is not a style choice; it is the fix for a real bug. The first version of
+ * this module kept its own copy of the type ramp so it could recompute each
+ * rung, and the copy was WRONG — it had `lg: 1rem` and `xl: 1.125rem` (16px and
+ * 18px) while `tokens/typography.css` says `0.9375rem` and `1.0625rem` (15px and
+ * 17px). Setting a preference of 1 — "leave it alone" — would have silently
+ * resized two rungs of the published design. A second copy of a value is a
+ * second source of truth, and it drifted before anyone used it.
  *
- * Three axes, because those are the three the token files already separate:
+ * Because the knobs are plain multipliers, any OTHER ramp can opt in the same
+ * way. @hanzo/gui compiles its own `--f-size-*` scale for the 1600-odd
+ * `fontSize="$n"` call sites in the apps; an app that redeclares those as
+ * `calc(<its px> * var(--type-scale, 1))` gets the same control with no change
+ * at scale 1.
  *
- *   type    scales the --text-* ramp
- *   density scales the --grid-gap-* ramp (the spacing between things)
- *   accent  sets --primary / --accent (the one hue the monochrome brand allows)
+ * It is a pure function on purpose: it maps a preference to custom properties
+ * and returns them, touching no document. That is what lets an app, an embedded
+ * preview and a server render apply it identically.
  */
 export type Density = "compact" | "default" | "comfortable";
 export interface Preference {

package/dist/preference.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preference.d.ts","sourceRoot":"","sources":["../src/preference.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAE5D,MAAM,WAAW,UAAU;IACzB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,OAAO,CAAC;AAC7B,eAAO,MAAM,QAAQ,MAAM,CAAC;AA2B5B;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAS1C;AAED;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAqB1D;AAED,2EAA2E;AAC3E,wBAAgB,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,SAAc,GAAG,MAAM,CAKjE"}
+{"version":3,"file":"preference.d.ts","sourceRoot":"","sources":["../src/preference.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAE5D,MAAM,WAAW,UAAU;IACzB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,OAAO,CAAC;AAC7B,eAAO,MAAM,QAAQ,MAAM,CAAC;AAqB5B;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAS1C;AAED;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmB1D;AAED,2EAA2E;AAC3E,wBAAgB,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,SAAc,GAAG,MAAM,CAKjE"}

package/dist/preference.js

@@ -1,23 +1,29 @@
 /**
  * A person's own reading of the system: type size, density, accent.
  *
- * The ramps in `tokens/*.css` are the SHAPE — the relationships between sizes,
- * gaps and hues that make a surface read as one thing. A preference does not
- * replace them and cannot reach inside them. It applies ONE transform to a whole
- * axis, so every size still stands in the same relation to every other size and
- * a customised UI is the same design at a different setting, not a different
- * design.
+ * Three knobs, and each is ONE multiplier on a whole axis — never a restated
+ * ramp. The ramps live in `tokens/*.css`, authored once, and each rung carries
+ * its own `calc(<base> * var(--type-scale, 1))`. So a preference sets three
+ * numbers and every rung follows, including rungs added later and rungs this
+ * file has never heard of.
  *
- * It is a pure function on purpose. `vars()` maps a preference to the custom
- * properties that carry it, and returns them; nothing here touches a document.
- * That is what lets it be tested without a browser and reused by every surface —
- * an app, an embedded builder preview, a server render that inlines the result.
+ * That is not a style choice; it is the fix for a real bug. The first version of
+ * this module kept its own copy of the type ramp so it could recompute each
+ * rung, and the copy was WRONG — it had `lg: 1rem` and `xl: 1.125rem` (16px and
+ * 18px) while `tokens/typography.css` says `0.9375rem` and `1.0625rem` (15px and
+ * 17px). Setting a preference of 1 — "leave it alone" — would have silently
+ * resized two rungs of the published design. A second copy of a value is a
+ * second source of truth, and it drifted before anyone used it.
  *
- * Three axes, because those are the three the token files already separate:
+ * Because the knobs are plain multipliers, any OTHER ramp can opt in the same
+ * way. @hanzo/gui compiles its own `--f-size-*` scale for the 1600-odd
+ * `fontSize="$n"` call sites in the apps; an app that redeclares those as
+ * `calc(<its px> * var(--type-scale, 1))` gets the same control with no change
+ * at scale 1.
  *
- *   type    scales the --text-* ramp
- *   density scales the --grid-gap-* ramp (the spacing between things)
- *   accent  sets --primary / --accent (the one hue the monochrome brand allows)
+ * It is a pure function on purpose: it maps a preference to custom properties
+ * and returns them, touching no document. That is what lets an app, an embedded
+ * preview and a server render apply it identically.
  */
 /**
  * The type multiplier is CLAMPED, and the bounds are not arbitrary.
@@ -30,26 +36,22 @@
  */
 export const TYPE_MIN = 0.85;
 export const TYPE_MAX = 1.4;
-const DENSITY_SCALE = {
-    compact: 0.75,
+/**
+ * Density moves SPACING only, and its range is much tighter than type's.
+ *
+ * Spacing compounds: a page nests padding inside gap inside margin, so a 0.75
+ * multiplier is already three-quarters of every one of those in sequence. Below
+ * that, touch targets fall under the 44px floor `base.css` sets for coarse
+ * pointers, and the control that promised comfort takes it away.
+ */
+const DENSITY = {
+    compact: 0.85,
     default: 1,
-    comfortable: 1.35,
-};
-/** The type ramp, by name, in rem at a 16px root — mirrors tokens/typography.css. */
-const TEXT = {
-    xs: 0.6875, sm: 0.8125, base: 0.875, lg: 1, xl: 1.125,
-    "2xl": 1.3125, "3xl": 1.625, "4xl": 2, "5xl": 2.5,
-    "6xl": 3.25, "7xl": 4, "8xl": 5.25, "9xl": 7,
-};
-/** The gap ramp, in rem — mirrors tokens/grid.css. */
-const GAP = {
-    "grid-gap-tight": 0.5,
-    "grid-gap": 1,
-    "grid-gap-loose": 1.5,
+    comfortable: 1.15,
 };
 const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
 /** Trim to 4dp so a multiplier cannot emit a 17-digit float into a stylesheet. */
-const rem = (n) => `${Math.round(n * 10000) / 10000}rem`;
+const round = (n) => String(Math.round(n * 10000) / 10000);
 /**
  * Is this a colour, or is it something being smuggled into a style attribute?
  *
@@ -77,14 +79,10 @@ export function isColor(v) {
 export function vars(p) {
     const out = {};
     if (typeof p.type === "number" && Number.isFinite(p.type)) {
-        const k = clamp(p.type, TYPE_MIN, TYPE_MAX);
-        for (const [name, size] of Object.entries(TEXT))
-            out[`--text-${name}`] = rem(size * k);
+        out["--type-scale"] = round(clamp(p.type, TYPE_MIN, TYPE_MAX));
     }
-    if (p.density && p.density in DENSITY_SCALE) {
-        const k = DENSITY_SCALE[p.density];
-        for (const [name, size] of Object.entries(GAP))
-            out[`--${name}`] = rem(size * k);
+    if (p.density && p.density in DENSITY) {
+        out["--density"] = round(DENSITY[p.density]);
     }
     if (p.accent && isColor(p.accent)) {
         // Both names, because the ramp uses --primary for action surfaces and

package/dist/tokens.gen.d.ts

@@ -91,31 +91,32 @@ export declare const colors: {
 };
 /** typography tokens (from tokens/typography.css). Values are raw CSS. */
 export declare const typography: {
-    readonly 'text-xs': "0.6875rem";
-    readonly 'leading-xs': "1rem";
-    readonly 'text-sm': "0.8125rem";
-    readonly 'leading-sm': "1.15rem";
-    readonly 'text-base': "0.875rem";
-    readonly 'leading-base': "1.35rem";
-    readonly 'text-lg': "0.9375rem";
-    readonly 'leading-lg': "1.4rem";
-    readonly 'text-xl': "1.0625rem";
-    readonly 'leading-xl': "1.55rem";
-    readonly 'text-2xl': "1.3125rem";
-    readonly 'leading-2xl': "1.7rem";
-    readonly 'text-3xl': "1.625rem";
-    readonly 'leading-3xl': "1.95rem";
-    readonly 'text-4xl': "2rem";
-    readonly 'leading-4xl': "2.25rem";
-    readonly 'text-5xl': "2.5rem";
+    readonly 'type-scale': "1";
+    readonly 'text-xs': "calc(0.6875rem * var(--type-scale, 1))";
+    readonly 'leading-xs': "calc(1rem * var(--type-scale, 1))";
+    readonly 'text-sm': "calc(0.8125rem * var(--type-scale, 1))";
+    readonly 'leading-sm': "calc(1.15rem * var(--type-scale, 1))";
+    readonly 'text-base': "calc(0.875rem * var(--type-scale, 1))";
+    readonly 'leading-base': "calc(1.35rem * var(--type-scale, 1))";
+    readonly 'text-lg': "calc(0.9375rem * var(--type-scale, 1))";
+    readonly 'leading-lg': "calc(1.4rem * var(--type-scale, 1))";
+    readonly 'text-xl': "calc(1.0625rem * var(--type-scale, 1))";
+    readonly 'leading-xl': "calc(1.55rem * var(--type-scale, 1))";
+    readonly 'text-2xl': "calc(1.3125rem * var(--type-scale, 1))";
+    readonly 'leading-2xl': "calc(1.7rem * var(--type-scale, 1))";
+    readonly 'text-3xl': "calc(1.625rem * var(--type-scale, 1))";
+    readonly 'leading-3xl': "calc(1.95rem * var(--type-scale, 1))";
+    readonly 'text-4xl': "calc(2rem * var(--type-scale, 1))";
+    readonly 'leading-4xl': "calc(2.25rem * var(--type-scale, 1))";
+    readonly 'text-5xl': "calc(2.5rem * var(--type-scale, 1))";
     readonly 'leading-5xl': "1.05";
-    readonly 'text-6xl': "3.25rem";
+    readonly 'text-6xl': "calc(3.25rem * var(--type-scale, 1))";
     readonly 'leading-6xl': "1";
-    readonly 'text-7xl': "4rem";
+    readonly 'text-7xl': "calc(4rem * var(--type-scale, 1))";
     readonly 'leading-7xl': "1";
-    readonly 'text-8xl': "5.25rem";
+    readonly 'text-8xl': "calc(5.25rem * var(--type-scale, 1))";
     readonly 'leading-8xl': "1";
-    readonly 'text-9xl': "7rem";
+    readonly 'text-9xl': "calc(7rem * var(--type-scale, 1))";
     readonly 'leading-9xl': "1";
     readonly 'font-size-xs': "var(--text-xs)";
     readonly 'font-size-sm': "var(--text-sm)";
@@ -156,21 +157,22 @@ export declare const typography: {
 };
 /** spacing tokens (from tokens/spacing.css). Values are raw CSS. */
 export declare const spacing: {
+    readonly density: "1";
     readonly 'space-0': "0";
-    readonly 'space-1': "0.25rem";
-    readonly 'space-2': "0.5rem";
-    readonly 'space-3': "0.75rem";
-    readonly 'space-4': "1rem";
-    readonly 'space-5': "1.25rem";
-    readonly 'space-6': "1.5rem";
-    readonly 'space-8': "2rem";
-    readonly 'space-10': "2.5rem";
-    readonly 'space-12': "3rem";
-    readonly 'space-14': "3.5rem";
-    readonly 'space-16': "4rem";
-    readonly 'space-20': "5rem";
-    readonly 'space-24': "6rem";
-    readonly 'space-32': "8rem";
+    readonly 'space-1': "calc(0.25rem * var(--density, 1))";
+    readonly 'space-2': "calc(0.5rem * var(--density, 1))";
+    readonly 'space-3': "calc(0.75rem * var(--density, 1))";
+    readonly 'space-4': "calc(1rem * var(--density, 1))";
+    readonly 'space-5': "calc(1.25rem * var(--density, 1))";
+    readonly 'space-6': "calc(1.5rem * var(--density, 1))";
+    readonly 'space-8': "calc(2rem * var(--density, 1))";
+    readonly 'space-10': "calc(2.5rem * var(--density, 1))";
+    readonly 'space-12': "calc(3rem * var(--density, 1))";
+    readonly 'space-14': "calc(3.5rem * var(--density, 1))";
+    readonly 'space-16': "calc(4rem * var(--density, 1))";
+    readonly 'space-20': "calc(5rem * var(--density, 1))";
+    readonly 'space-24': "calc(6rem * var(--density, 1))";
+    readonly 'space-32': "calc(8rem * var(--density, 1))";
     readonly 'golden-1': "0.25rem";
     readonly 'golden-2': "0.405rem";
     readonly 'golden-3': "0.654rem";
@@ -374,31 +376,32 @@ export declare const cssVars: {
     readonly '--chrome-dot-red': "rgb(239 68 68 / .6)";
     readonly '--chrome-dot-yellow': "rgb(234 179 8 / .6)";
     readonly '--chrome-dot-green': "rgb(34 197 94 / .6)";
-    readonly '--text-xs': "0.6875rem";
-    readonly '--leading-xs': "1rem";
-    readonly '--text-sm': "0.8125rem";
-    readonly '--leading-sm': "1.15rem";
-    readonly '--text-base': "0.875rem";
-    readonly '--leading-base': "1.35rem";
-    readonly '--text-lg': "0.9375rem";
-    readonly '--leading-lg': "1.4rem";
-    readonly '--text-xl': "1.0625rem";
-    readonly '--leading-xl': "1.55rem";
-    readonly '--text-2xl': "1.3125rem";
-    readonly '--leading-2xl': "1.7rem";
-    readonly '--text-3xl': "1.625rem";
-    readonly '--leading-3xl': "1.95rem";
-    readonly '--text-4xl': "2rem";
-    readonly '--leading-4xl': "2.25rem";
-    readonly '--text-5xl': "2.5rem";
+    readonly '--type-scale': "1";
+    readonly '--text-xs': "calc(0.6875rem * var(--type-scale, 1))";
+    readonly '--leading-xs': "calc(1rem * var(--type-scale, 1))";
+    readonly '--text-sm': "calc(0.8125rem * var(--type-scale, 1))";
+    readonly '--leading-sm': "calc(1.15rem * var(--type-scale, 1))";
+    readonly '--text-base': "calc(0.875rem * var(--type-scale, 1))";
+    readonly '--leading-base': "calc(1.35rem * var(--type-scale, 1))";
+    readonly '--text-lg': "calc(0.9375rem * var(--type-scale, 1))";
+    readonly '--leading-lg': "calc(1.4rem * var(--type-scale, 1))";
+    readonly '--text-xl': "calc(1.0625rem * var(--type-scale, 1))";
+    readonly '--leading-xl': "calc(1.55rem * var(--type-scale, 1))";
+    readonly '--text-2xl': "calc(1.3125rem * var(--type-scale, 1))";
+    readonly '--leading-2xl': "calc(1.7rem * var(--type-scale, 1))";
+    readonly '--text-3xl': "calc(1.625rem * var(--type-scale, 1))";
+    readonly '--leading-3xl': "calc(1.95rem * var(--type-scale, 1))";
+    readonly '--text-4xl': "calc(2rem * var(--type-scale, 1))";
+    readonly '--leading-4xl': "calc(2.25rem * var(--type-scale, 1))";
+    readonly '--text-5xl': "calc(2.5rem * var(--type-scale, 1))";
     readonly '--leading-5xl': "1.05";
-    readonly '--text-6xl': "3.25rem";
+    readonly '--text-6xl': "calc(3.25rem * var(--type-scale, 1))";
     readonly '--leading-6xl': "1";
-    readonly '--text-7xl': "4rem";
+    readonly '--text-7xl': "calc(4rem * var(--type-scale, 1))";
     readonly '--leading-7xl': "1";
-    readonly '--text-8xl': "5.25rem";
+    readonly '--text-8xl': "calc(5.25rem * var(--type-scale, 1))";
     readonly '--leading-8xl': "1";
-    readonly '--text-9xl': "7rem";
+    readonly '--text-9xl': "calc(7rem * var(--type-scale, 1))";
     readonly '--leading-9xl': "1";
     readonly '--font-size-xs': "var(--text-xs)";
     readonly '--font-size-sm': "var(--text-sm)";
@@ -436,21 +439,22 @@ export declare const cssVars: {
     readonly '--type-caption': "400 var(--text-xs)/var(--leading-xs) var(--font-sans)";
     readonly '--type-code': "400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)";
     readonly '--type-eyebrow': "600 0.625rem/1 var(--font-sans)";
+    readonly '--density': "1";
     readonly '--space-0': "0";
-    readonly '--space-1': "0.25rem";
-    readonly '--space-2': "0.5rem";
-    readonly '--space-3': "0.75rem";
-    readonly '--space-4': "1rem";
-    readonly '--space-5': "1.25rem";
-    readonly '--space-6': "1.5rem";
-    readonly '--space-8': "2rem";
-    readonly '--space-10': "2.5rem";
-    readonly '--space-12': "3rem";
-    readonly '--space-14': "3.5rem";
-    readonly '--space-16': "4rem";
-    readonly '--space-20': "5rem";
-    readonly '--space-24': "6rem";
-    readonly '--space-32': "8rem";
+    readonly '--space-1': "calc(0.25rem * var(--density, 1))";
+    readonly '--space-2': "calc(0.5rem * var(--density, 1))";
+    readonly '--space-3': "calc(0.75rem * var(--density, 1))";
+    readonly '--space-4': "calc(1rem * var(--density, 1))";
+    readonly '--space-5': "calc(1.25rem * var(--density, 1))";
+    readonly '--space-6': "calc(1.5rem * var(--density, 1))";
+    readonly '--space-8': "calc(2rem * var(--density, 1))";
+    readonly '--space-10': "calc(2.5rem * var(--density, 1))";
+    readonly '--space-12': "calc(3rem * var(--density, 1))";
+    readonly '--space-14': "calc(3.5rem * var(--density, 1))";
+    readonly '--space-16': "calc(4rem * var(--density, 1))";
+    readonly '--space-20': "calc(5rem * var(--density, 1))";
+    readonly '--space-24': "calc(6rem * var(--density, 1))";
+    readonly '--space-32': "calc(8rem * var(--density, 1))";
     readonly '--golden-1': "0.25rem";
     readonly '--golden-2': "0.405rem";
     readonly '--golden-3': "0.654rem";

package/dist/tokens.gen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Db,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI,IAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkQV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}
+{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEb,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI,IAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoQV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}

package/dist/tokens.gen.js

@@ -94,31 +94,32 @@ export const colors = {
 };
 /** typography tokens (from tokens/typography.css). Values are raw CSS. */
 export const typography = {
-    'text-xs': '0.6875rem',
-    'leading-xs': '1rem',
-    'text-sm': '0.8125rem',
-    'leading-sm': '1.15rem',
-    'text-base': '0.875rem',
-    'leading-base': '1.35rem',
-    'text-lg': '0.9375rem',
-    'leading-lg': '1.4rem',
-    'text-xl': '1.0625rem',
-    'leading-xl': '1.55rem',
-    'text-2xl': '1.3125rem',
-    'leading-2xl': '1.7rem',
-    'text-3xl': '1.625rem',
-    'leading-3xl': '1.95rem',
-    'text-4xl': '2rem',
-    'leading-4xl': '2.25rem',
-    'text-5xl': '2.5rem',
+    'type-scale': '1',
+    'text-xs': 'calc(0.6875rem * var(--type-scale, 1))',
+    'leading-xs': 'calc(1rem * var(--type-scale, 1))',
+    'text-sm': 'calc(0.8125rem * var(--type-scale, 1))',
+    'leading-sm': 'calc(1.15rem * var(--type-scale, 1))',
+    'text-base': 'calc(0.875rem * var(--type-scale, 1))',
+    'leading-base': 'calc(1.35rem * var(--type-scale, 1))',
+    'text-lg': 'calc(0.9375rem * var(--type-scale, 1))',
+    'leading-lg': 'calc(1.4rem * var(--type-scale, 1))',
+    'text-xl': 'calc(1.0625rem * var(--type-scale, 1))',
+    'leading-xl': 'calc(1.55rem * var(--type-scale, 1))',
+    'text-2xl': 'calc(1.3125rem * var(--type-scale, 1))',
+    'leading-2xl': 'calc(1.7rem * var(--type-scale, 1))',
+    'text-3xl': 'calc(1.625rem * var(--type-scale, 1))',
+    'leading-3xl': 'calc(1.95rem * var(--type-scale, 1))',
+    'text-4xl': 'calc(2rem * var(--type-scale, 1))',
+    'leading-4xl': 'calc(2.25rem * var(--type-scale, 1))',
+    'text-5xl': 'calc(2.5rem * var(--type-scale, 1))',
     'leading-5xl': '1.05',
-    'text-6xl': '3.25rem',
+    'text-6xl': 'calc(3.25rem * var(--type-scale, 1))',
     'leading-6xl': '1',
-    'text-7xl': '4rem',
+    'text-7xl': 'calc(4rem * var(--type-scale, 1))',
     'leading-7xl': '1',
-    'text-8xl': '5.25rem',
+    'text-8xl': 'calc(5.25rem * var(--type-scale, 1))',
     'leading-8xl': '1',
-    'text-9xl': '7rem',
+    'text-9xl': 'calc(7rem * var(--type-scale, 1))',
     'leading-9xl': '1',
     'font-size-xs': 'var(--text-xs)',
     'font-size-sm': 'var(--text-sm)',
@@ -159,21 +160,22 @@ export const typography = {
 };
 /** spacing tokens (from tokens/spacing.css). Values are raw CSS. */
 export const spacing = {
+    'density': '1',
     'space-0': '0',
-    'space-1': '0.25rem',
-    'space-2': '0.5rem',
-    'space-3': '0.75rem',
-    'space-4': '1rem',
-    'space-5': '1.25rem',
-    'space-6': '1.5rem',
-    'space-8': '2rem',
-    'space-10': '2.5rem',
-    'space-12': '3rem',
-    'space-14': '3.5rem',
-    'space-16': '4rem',
-    'space-20': '5rem',
-    'space-24': '6rem',
-    'space-32': '8rem',
+    'space-1': 'calc(0.25rem * var(--density, 1))',
+    'space-2': 'calc(0.5rem * var(--density, 1))',
+    'space-3': 'calc(0.75rem * var(--density, 1))',
+    'space-4': 'calc(1rem * var(--density, 1))',
+    'space-5': 'calc(1.25rem * var(--density, 1))',
+    'space-6': 'calc(1.5rem * var(--density, 1))',
+    'space-8': 'calc(2rem * var(--density, 1))',
+    'space-10': 'calc(2.5rem * var(--density, 1))',
+    'space-12': 'calc(3rem * var(--density, 1))',
+    'space-14': 'calc(3.5rem * var(--density, 1))',
+    'space-16': 'calc(4rem * var(--density, 1))',
+    'space-20': 'calc(5rem * var(--density, 1))',
+    'space-24': 'calc(6rem * var(--density, 1))',
+    'space-32': 'calc(8rem * var(--density, 1))',
     'golden-1': '0.25rem',
     'golden-2': '0.405rem',
     'golden-3': '0.654rem',
@@ -377,31 +379,32 @@ export const cssVars = {
     '--chrome-dot-red': 'rgb(239 68 68 / .6)',
     '--chrome-dot-yellow': 'rgb(234 179 8 / .6)',
     '--chrome-dot-green': 'rgb(34 197 94 / .6)',
-    '--text-xs': '0.6875rem',
-    '--leading-xs': '1rem',
-    '--text-sm': '0.8125rem',
-    '--leading-sm': '1.15rem',
-    '--text-base': '0.875rem',
-    '--leading-base': '1.35rem',
-    '--text-lg': '0.9375rem',
-    '--leading-lg': '1.4rem',
-    '--text-xl': '1.0625rem',
-    '--leading-xl': '1.55rem',
-    '--text-2xl': '1.3125rem',
-    '--leading-2xl': '1.7rem',
-    '--text-3xl': '1.625rem',
-    '--leading-3xl': '1.95rem',
-    '--text-4xl': '2rem',
-    '--leading-4xl': '2.25rem',
-    '--text-5xl': '2.5rem',
+    '--type-scale': '1',
+    '--text-xs': 'calc(0.6875rem * var(--type-scale, 1))',
+    '--leading-xs': 'calc(1rem * var(--type-scale, 1))',
+    '--text-sm': 'calc(0.8125rem * var(--type-scale, 1))',
+    '--leading-sm': 'calc(1.15rem * var(--type-scale, 1))',
+    '--text-base': 'calc(0.875rem * var(--type-scale, 1))',
+    '--leading-base': 'calc(1.35rem * var(--type-scale, 1))',
+    '--text-lg': 'calc(0.9375rem * var(--type-scale, 1))',
+    '--leading-lg': 'calc(1.4rem * var(--type-scale, 1))',
+    '--text-xl': 'calc(1.0625rem * var(--type-scale, 1))',
+    '--leading-xl': 'calc(1.55rem * var(--type-scale, 1))',
+    '--text-2xl': 'calc(1.3125rem * var(--type-scale, 1))',
+    '--leading-2xl': 'calc(1.7rem * var(--type-scale, 1))',
+    '--text-3xl': 'calc(1.625rem * var(--type-scale, 1))',
+    '--leading-3xl': 'calc(1.95rem * var(--type-scale, 1))',
+    '--text-4xl': 'calc(2rem * var(--type-scale, 1))',
+    '--leading-4xl': 'calc(2.25rem * var(--type-scale, 1))',
+    '--text-5xl': 'calc(2.5rem * var(--type-scale, 1))',
     '--leading-5xl': '1.05',
-    '--text-6xl': '3.25rem',
+    '--text-6xl': 'calc(3.25rem * var(--type-scale, 1))',
     '--leading-6xl': '1',
-    '--text-7xl': '4rem',
+    '--text-7xl': 'calc(4rem * var(--type-scale, 1))',
     '--leading-7xl': '1',
-    '--text-8xl': '5.25rem',
+    '--text-8xl': 'calc(5.25rem * var(--type-scale, 1))',
     '--leading-8xl': '1',
-    '--text-9xl': '7rem',
+    '--text-9xl': 'calc(7rem * var(--type-scale, 1))',
     '--leading-9xl': '1',
     '--font-size-xs': 'var(--text-xs)',
     '--font-size-sm': 'var(--text-sm)',
@@ -439,21 +442,22 @@ export const cssVars = {
     '--type-caption': '400 var(--text-xs)/var(--leading-xs) var(--font-sans)',
     '--type-code': '400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)',
     '--type-eyebrow': '600 0.625rem/1 var(--font-sans)',
+    '--density': '1',
     '--space-0': '0',
-    '--space-1': '0.25rem',
-    '--space-2': '0.5rem',
-    '--space-3': '0.75rem',
-    '--space-4': '1rem',
-    '--space-5': '1.25rem',
-    '--space-6': '1.5rem',
-    '--space-8': '2rem',
-    '--space-10': '2.5rem',
-    '--space-12': '3rem',
-    '--space-14': '3.5rem',
-    '--space-16': '4rem',
-    '--space-20': '5rem',
-    '--space-24': '6rem',
-    '--space-32': '8rem',
+    '--space-1': 'calc(0.25rem * var(--density, 1))',
+    '--space-2': 'calc(0.5rem * var(--density, 1))',
+    '--space-3': 'calc(0.75rem * var(--density, 1))',
+    '--space-4': 'calc(1rem * var(--density, 1))',
+    '--space-5': 'calc(1.25rem * var(--density, 1))',
+    '--space-6': 'calc(1.5rem * var(--density, 1))',
+    '--space-8': 'calc(2rem * var(--density, 1))',
+    '--space-10': 'calc(2.5rem * var(--density, 1))',
+    '--space-12': 'calc(3rem * var(--density, 1))',
+    '--space-14': 'calc(3.5rem * var(--density, 1))',
+    '--space-16': 'calc(4rem * var(--density, 1))',
+    '--space-20': 'calc(5rem * var(--density, 1))',
+    '--space-24': 'calc(6rem * var(--density, 1))',
+    '--space-32': 'calc(8rem * var(--density, 1))',
     '--golden-1': '0.25rem',
     '--golden-2': '0.405rem',
     '--golden-3': '0.654rem',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/design",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "packageManager": "pnpm@11.17.0",
   "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.",
   "license": "MIT OR Apache-2.0",
@@ -33,7 +33,7 @@
   "scripts": {
     "gen": "node scripts/gen-tokens.mjs",
     "test": "node scripts/check-tokens.mjs && node scripts/check-preference.mjs && node scripts/lint.mjs .",
-    "build": "pnpm gen && pnpm test && tsc -p tsconfig.json",
+    "build": "pnpm gen && pnpm test && tsc -p tsconfig.json && node scripts/check-dist.mjs",
     "prepublishOnly": "pnpm build",
     "lint": "node scripts/lint.mjs"
   },