@hanzo/design 0.5.0 → 0.5.1

package/LICENSE

@@ -1,28 +1,14 @@
-BSD 3-Clause License
+Licensed under either of
 
-Copyright (c) 2026 Hanzo AI, Inc.
+  * Apache License, Version 2.0 (LICENSE-APACHE or
+    https://www.apache.org/licenses/LICENSE-2.0)
+  * MIT license (LICENSE-MIT or https://opensource.org/licenses/MIT)
 
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
+at your option.
 
-1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
+Unless you explicitly state otherwise, any contribution intentionally
+submitted for inclusion in the work by you, as defined in the Apache-2.0
+license, shall be dual licensed as above, without any additional terms or
+conditions.
 
-2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
-3. Neither the name of the copyright holder nor the names of its
-   contributors may be used to endorse or promote products derived from
-   this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+See HIP-0137 (hanzoai/hips) for the standard this follows.

package/README.md

@@ -126,7 +126,7 @@ Tokens track `hanzo.ai` (`app/globals.css`, `tailwind.config.ts`, `DESIGN.md`) a
 
 ## License
 
-BSD-3-Clause. Brand marks (the Hanzo logo, partner and provider logos) are the property of their respective owners and are provided for identification.
+MIT OR Apache-2.0, per [HIP-0137](https://github.com/hanzoai/hips/blob/main/HIPs/hip-0137-one-license.md). Brand marks (the Hanzo logo, partner and provider logos) are the property of their respective owners and are provided for identification.
 
 ## Using it in a Tailwind app
 

package/dist/index.d.ts

@@ -34,4 +34,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.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,cAAc,YAAY,CAAA;AAC1B,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,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

@@ -59,3 +59,7 @@ export function injectDesignCss(href) {
     l.setAttribute('data-hanzo-design', '');
     document.head.appendChild(l);
 }
+// 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.js';

package/dist/preference.d.ts

@@ -0,0 +1,65 @@
+/**
+ * A person's own reading of the system: type size, density, accent.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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 {
+    /** Multiplier on the type ramp. 1 is the published scale. */
+    type?: number;
+    density?: Density;
+    /** A CSS colour for --primary / --accent. Rejected unless it is one. */
+    accent?: string;
+}
+/**
+ * The type multiplier is CLAMPED, and the bounds are not arbitrary.
+ *
+ * Below 0.85 the smallest rung (--text-xs, 11px) drops under 9.4px, which stops
+ * being small and starts being unreadable — and a preference that lets someone
+ * render their own tools illegible is a trap, not a choice. Above 1.4 the
+ * chrome stops fitting its own containers: this app's builder header already
+ * overlaps its actions below 1440px at scale 1.
+ */
+export declare const TYPE_MIN = 0.85;
+export declare const TYPE_MAX = 1.4;
+/**
+ * Is this a colour, or is it something being smuggled into a style attribute?
+ *
+ * A preference is user input and its destination is CSS. `#fff`, `rgb(...)`,
+ * `oklch(...)` and the bare keywords are colours; anything carrying a `;`, a
+ * `}`, or a `url(` is trying to be a second declaration, and the answer is to
+ * drop the axis rather than to sanitise a string into something plausible.
+ */
+export declare function isColor(v: string): boolean;
+/**
+ * The custom properties a preference produces.
+ *
+ * Only the axes actually set appear, so an app can spread the result over
+ * whatever it already has without a default silently overriding a brand.
+ */
+export declare function vars(p: Preference): Record<string, string>;
+/** `vars()` as a declaration block, for a <style> tag or an SSR inline. */
+export declare function css(p: Preference, selector?: string): string;
+//# sourceMappingURL=preference.d.ts.map

package/dist/preference.d.ts.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,102 @@
+/**
+ * A person's own reading of the system: type size, density, accent.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * Below 0.85 the smallest rung (--text-xs, 11px) drops under 9.4px, which stops
+ * being small and starts being unreadable — and a preference that lets someone
+ * render their own tools illegible is a trap, not a choice. Above 1.4 the
+ * chrome stops fitting its own containers: this app's builder header already
+ * overlaps its actions below 1440px at scale 1.
+ */
+export const TYPE_MIN = 0.85;
+export const TYPE_MAX = 1.4;
+/**
+ * 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.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 round = (n) => String(Math.round(n * 10000) / 10000);
+/**
+ * Is this a colour, or is it something being smuggled into a style attribute?
+ *
+ * A preference is user input and its destination is CSS. `#fff`, `rgb(...)`,
+ * `oklch(...)` and the bare keywords are colours; anything carrying a `;`, a
+ * `}`, or a `url(` is trying to be a second declaration, and the answer is to
+ * drop the axis rather than to sanitise a string into something plausible.
+ */
+export function isColor(v) {
+    const s = v.trim();
+    if (!s || s.length > 64)
+        return false;
+    if (/[;{}()]/.test(s) && !/^(rgb|rgba|hsl|hsla|oklch|oklab|lab|lch|color)\([^;{}]*\)$/i.test(s))
+        return false;
+    return (/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(s) ||
+        /^(rgb|rgba|hsl|hsla|oklch|oklab|lab|lch|color)\([^;{}]*\)$/i.test(s) ||
+        /^[a-z]{3,20}$/i.test(s));
+}
+/**
+ * The custom properties a preference produces.
+ *
+ * Only the axes actually set appear, so an app can spread the result over
+ * whatever it already has without a default silently overriding a brand.
+ */
+export function vars(p) {
+    const out = {};
+    if (typeof p.type === "number" && Number.isFinite(p.type)) {
+        out["--type-scale"] = round(clamp(p.type, TYPE_MIN, TYPE_MAX));
+    }
+    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
+        // --accent for selection. One hue, stated once, landing on both.
+        out["--primary"] = p.accent.trim();
+        out["--accent"] = p.accent.trim();
+    }
+    return out;
+}
+/** `vars()` as a declaration block, for a <style> tag or an SSR inline. */
+export function css(p, selector = "html:root") {
+    const v = vars(p);
+    const keys = Object.keys(v);
+    if (!keys.length)
+        return "";
+    return `${selector}{${keys.map((k) => `${k}:${v[k]}`).join(";")}}`;
+}

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',