dowel-ui 0.1.0 → 0.2.0

package/README.md

@@ -8,7 +8,7 @@ The lacodda line design system: theme tokens and React primitives, distributed a
 
 A dowel is the hidden peg that joins two boards so the seam does not show. That is what this does for the products of the line: they look made by one hand, and nobody sees the joint.
 
-**Status:** v0.1.0 - the theme. Primitives and the registry follow; see the [roadmap](#roadmap).
+**Status:** v0.2.0 - the theme and the scales. Primitives and the registry follow; see the [roadmap](#roadmap).
 
 ## The theme
 
@@ -54,8 +54,11 @@ The stock palette is dropped deliberately, so a stray `bg-zinc-800` does not com
 - **The accent is derived, not configured.** A product states one hue and the theme works out the rest, including what colour text has to be to sit on top of it. A light accent takes dark glyphs, a dark one white - checked against every colour in the line rather than left to each product to get right.
 - **The greys belong to the product.** They carry a trace of its hue, so the chrome of one product is not the chrome of another with a different button colour.
 - **Contrast is a test, not an intention.** Every accent of the line is measured against WCAG AA in CI, in both themes, as a fill and as text.
+- **The scales were read, not invented.** Radius, type, elevation and stacking order come from what the line's products already draw, so existing code fits them - and the places where those products disagreed with themselves are settled rather than preserved.
 
-Full vocabulary, with every token shown in both themes: **[the token reference](https://lacodda.github.io/dowel/reference/tokens/)**.
+The same vocabulary also ships as [DTCG](https://www.designtokens.org/tr/2025.10/format/) JSON at `dowel-ui/tokens.json`, generated from the stylesheet so the two cannot drift.
+
+Full vocabulary, shown rather than tabulated: **[colours](https://lacodda.github.io/dowel/reference/tokens/)** in both themes, and **[the scales](https://lacodda.github.io/dowel/reference/scales/)** - radius, type, motion, elevation and stacking order.
 
 ## Roadmap
 

package/dist/index.d.ts

@@ -4,12 +4,36 @@ export declare const colorTokens: readonly ["bg", "raise", "soft", "softer", "li
 /** Tokens a product overrides to make the theme its own: the accent from the
  * brand-line registry, and how much of it bleeds into the greys. */
 export declare const themeParameters: readonly ["accent-base", "neutral-base", "neutral-tint", "neutral-tint-strong", "ground", "ink"];
-/** Everything else the theme defines. */
-export declare const otherTokens: readonly ["shadow-raise"];
+/** Elevation. Three steps, and they change with the theme: a shadow that
+ * works on a dark ground is invisible on a light one. */
+export declare const elevationTokens: readonly ["shadow-lift", "shadow-raise", "shadow-float"];
+/** Corner radius. `md` is the control radius - inputs, buttons, list rows;
+ * `inner` is what a shape nested inside another one takes. */
+export declare const radiusTokens: readonly ["radius-xs", "radius-sm", "radius-md", "radius-lg", "radius-xl", "radius-2xl", "radius-inner"];
+/** Type: sizes with their line heights, weights, and the two tracking steps
+ * the products actually need. */
+export declare const typeTokens: readonly ["font-sans", "font-mono", "text-2xs", "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "font-weight-normal", "font-weight-medium", "font-weight-semibold", "tracking-caption", "tracking-tight"];
+/** Motion. The durations are read directly rather than through a utility -
+ * Tailwind's `duration-*` takes a literal number - while the easings are a
+ * namespace, so `ease-out` is a class. */
+export declare const motionTokens: readonly ["duration-quick", "duration-base", "duration-slow", "ease-out", "ease-in-out"];
+/** Stacking order. Not a Tailwind namespace either: a component reads these
+ * as `z-index: var(--z-modal)`. The names are a promise about what covers
+ * what, and the values only mean anything relative to each other. */
+export declare const layerTokens: readonly ["z-popup", "z-sticky", "z-menu", "z-floating", "z-overlay", "z-modal", "z-palette", "z-toast"];
+/** Every token the theme defines, in one list. Anything that iterates the
+ * vocabulary - a docs page, an inspector, the JSON export, the test that keeps
+ * this file honest against the stylesheet - reads this, so a new category
+ * cannot be added and quietly missed by half of them. */
+export declare const allTokens: readonly ["bg", "raise", "soft", "softer", "line", "line-2", "text", "dim", "faint", "accent", "accent-2", "accent-soft", "on-accent", "good", "good-soft", "warn", "warn-soft", "bad", "bad-soft", "info", "info-soft", "accent-base", "neutral-base", "neutral-tint", "neutral-tint-strong", "ground", "ink", "shadow-lift", "shadow-raise", "shadow-float", "radius-xs", "radius-sm", "radius-md", "radius-lg", "radius-xl", "radius-2xl", "radius-inner", "font-sans", "font-mono", "text-2xs", "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "font-weight-normal", "font-weight-medium", "font-weight-semibold", "tracking-caption", "tracking-tight", "duration-quick", "duration-base", "duration-slow", "ease-out", "ease-in-out", "z-popup", "z-sticky", "z-menu", "z-floating", "z-overlay", "z-modal", "z-palette", "z-toast"];
 export type ColorToken = (typeof colorTokens)[number];
 export type ThemeParameter = (typeof themeParameters)[number];
-export type OtherToken = (typeof otherTokens)[number];
-export type Token = ColorToken | ThemeParameter | OtherToken;
+export type ElevationToken = (typeof elevationTokens)[number];
+export type RadiusToken = (typeof radiusTokens)[number];
+export type TypeToken = (typeof typeTokens)[number];
+export type MotionToken = (typeof motionTokens)[number];
+export type LayerToken = (typeof layerTokens)[number];
+export type Token = ColorToken | ThemeParameter | ElevationToken | RadiusToken | TypeToken | MotionToken | LayerToken;
 /** The custom property a token is read from: `token('accent')` is
  * `'--accent'`. Spelled out here so that no caller builds the string itself
  * and gets the prefix subtly wrong. */

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA;6DAC6D;AAC7D,eAAO,MAAM,WAAW,0NAsBd,CAAA;AAEV;oEACoE;AACpE,eAAO,MAAM,eAAe,kGAOlB,CAAA;AAEV,yCAAyC;AACzC,eAAO,MAAM,WAAW,2BAA4B,CAAA;AAEpD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,KAAK,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,CAAA;AAE5D;;uCAEuC;AACvC,wBAAgB,KAAK,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAEzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA;6DAC6D;AAC7D,eAAO,MAAM,WAAW,0NAsBd,CAAA;AAEV;oEACoE;AACpE,eAAO,MAAM,eAAe,kGAOlB,CAAA;AAEV;yDACyD;AACzD,eAAO,MAAM,eAAe,0DAA2D,CAAA;AAEvF;8DAC8D;AAC9D,eAAO,MAAM,YAAY,0GAQf,CAAA;AAEV;iCACiC;AACjC,eAAO,MAAM,UAAU,gOAeb,CAAA;AAEV;;0CAE0C;AAC1C,eAAO,MAAM,YAAY,0FAMf,CAAA;AAEV;;qEAEqE;AACrE,eAAO,MAAM,WAAW,0GASd,CAAA;AAEV;;;yDAGyD;AACzD,eAAO,MAAM,SAAS,k0BAQZ,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,KAAK,GACb,UAAU,GACV,cAAc,GACd,cAAc,GACd,WAAW,GACX,SAAS,GACT,WAAW,GACX,UAAU,CAAA;AAEd;;uCAEuC;AACvC,wBAAgB,KAAK,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAEzC"}

package/dist/index.js

@@ -49,8 +49,74 @@ export const themeParameters = [
     'ground',
     'ink',
 ];
-/** Everything else the theme defines. */
-export const otherTokens = ['shadow-raise'];
+/** Elevation. Three steps, and they change with the theme: a shadow that
+ * works on a dark ground is invisible on a light one. */
+export const elevationTokens = ['shadow-lift', 'shadow-raise', 'shadow-float'];
+/** Corner radius. `md` is the control radius - inputs, buttons, list rows;
+ * `inner` is what a shape nested inside another one takes. */
+export const radiusTokens = [
+    'radius-xs',
+    'radius-sm',
+    'radius-md',
+    'radius-lg',
+    'radius-xl',
+    'radius-2xl',
+    'radius-inner',
+];
+/** Type: sizes with their line heights, weights, and the two tracking steps
+ * the products actually need. */
+export const typeTokens = [
+    'font-sans',
+    'font-mono',
+    'text-2xs',
+    'text-xs',
+    'text-sm',
+    'text-base',
+    'text-lg',
+    'text-xl',
+    'text-2xl',
+    'font-weight-normal',
+    'font-weight-medium',
+    'font-weight-semibold',
+    'tracking-caption',
+    'tracking-tight',
+];
+/** Motion. The durations are read directly rather than through a utility -
+ * Tailwind's `duration-*` takes a literal number - while the easings are a
+ * namespace, so `ease-out` is a class. */
+export const motionTokens = [
+    'duration-quick',
+    'duration-base',
+    'duration-slow',
+    'ease-out',
+    'ease-in-out',
+];
+/** Stacking order. Not a Tailwind namespace either: a component reads these
+ * as `z-index: var(--z-modal)`. The names are a promise about what covers
+ * what, and the values only mean anything relative to each other. */
+export const layerTokens = [
+    'z-popup',
+    'z-sticky',
+    'z-menu',
+    'z-floating',
+    'z-overlay',
+    'z-modal',
+    'z-palette',
+    'z-toast',
+];
+/** Every token the theme defines, in one list. Anything that iterates the
+ * vocabulary - a docs page, an inspector, the JSON export, the test that keeps
+ * this file honest against the stylesheet - reads this, so a new category
+ * cannot be added and quietly missed by half of them. */
+export const allTokens = [
+    ...colorTokens,
+    ...themeParameters,
+    ...elevationTokens,
+    ...radiusTokens,
+    ...typeTokens,
+    ...motionTokens,
+    ...layerTokens,
+];
 /** The custom property a token is read from: `token('accent')` is
  * `'--accent'`. Spelled out here so that no caller builds the string itself
  * and gets the prefix subtly wrong. */

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH;6DAC6D;AAC7D,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI;IACJ,OAAO;IACP,MAAM;IACN,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,MAAM;IACN,KAAK;IACL,OAAO;IACP,QAAQ;IACR,UAAU;IACV,aAAa;IACb,WAAW;IACX,MAAM;IACN,WAAW;IACX,MAAM;IACN,WAAW;IACX,KAAK;IACL,UAAU;IACV,MAAM;IACN,WAAW;CACH,CAAA;AAEV;oEACoE;AACpE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,aAAa;IACb,cAAc;IACd,cAAc;IACd,qBAAqB;IACrB,QAAQ;IACR,KAAK;CACG,CAAA;AAEV,yCAAyC;AACzC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,cAAc,CAAU,CAAA;AAOpD;;uCAEuC;AACvC,MAAM,UAAU,KAAK,CAAC,IAAW;IAC/B,OAAO,KAAK,IAAI,EAAE,CAAA;AACpB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH;6DAC6D;AAC7D,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI;IACJ,OAAO;IACP,MAAM;IACN,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,MAAM;IACN,KAAK;IACL,OAAO;IACP,QAAQ;IACR,UAAU;IACV,aAAa;IACb,WAAW;IACX,MAAM;IACN,WAAW;IACX,MAAM;IACN,WAAW;IACX,KAAK;IACL,UAAU;IACV,MAAM;IACN,WAAW;CACH,CAAA;AAEV;oEACoE;AACpE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,aAAa;IACb,cAAc;IACd,cAAc;IACd,qBAAqB;IACrB,QAAQ;IACR,KAAK;CACG,CAAA;AAEV;yDACyD;AACzD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,CAAU,CAAA;AAEvF;8DAC8D;AAC9D,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,YAAY;IACZ,cAAc;CACN,CAAA;AAEV;iCACiC;AACjC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,WAAW;IACX,WAAW;IACX,UAAU;IACV,SAAS;IACT,SAAS;IACT,WAAW;IACX,SAAS;IACT,SAAS;IACT,UAAU;IACV,oBAAoB;IACpB,oBAAoB;IACpB,sBAAsB;IACtB,kBAAkB;IAClB,gBAAgB;CACR,CAAA;AAEV;;0CAE0C;AAC1C,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,gBAAgB;IAChB,eAAe;IACf,eAAe;IACf,UAAU;IACV,aAAa;CACL,CAAA;AAEV;;qEAEqE;AACrE,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,SAAS;IACT,UAAU;IACV,QAAQ;IACR,YAAY;IACZ,WAAW;IACX,SAAS;IACT,WAAW;IACX,SAAS;CACD,CAAA;AAEV;;;yDAGyD;AACzD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,GAAG,WAAW;IACd,GAAG,eAAe;IAClB,GAAG,eAAe;IAClB,GAAG,YAAY;IACf,GAAG,UAAU;IACb,GAAG,YAAY;IACf,GAAG,WAAW;CACN,CAAA;AAkBV;;uCAEuC;AACvC,MAAM,UAAU,KAAK,CAAC,IAAW;IAC/B,OAAO,KAAK,IAAI,EAAE,CAAA;AACpB,CAAC"}

package/dist/theme.css

@@ -80,7 +80,14 @@
   --bad-soft: color-mix(in oklab, var(--bad) 14%, transparent);
   --info-soft: color-mix(in oklab, var(--info) 15%, transparent);
 
+  /* Elevation, three steps. The products had one shadow and used it for
+   * everything that leaves the flow - a toast, a dropdown and a modal all
+   * floated by the same amount, so a modal never felt further away than the
+   * menu it covered. `raise` keeps its original value, so nothing shifts under
+   * the products already using it; the other two are the steps either side. */
+  --shadow-lift: 0 2px 8px rgb(0 0 0 / 0.3);
   --shadow-raise: 0 10px 34px rgb(0 0 0 / 0.45);
+  --shadow-float: 0 24px 60px rgb(0 0 0 / 0.55);
 }
 
 /*
@@ -125,7 +132,9 @@
     --bad-soft: color-mix(in oklab, var(--bad) 12%, transparent);
     --info-soft: color-mix(in oklab, var(--info) 11%, transparent);
 
+    --shadow-lift: 0 2px 8px rgb(30 24 38 / 0.08);
     --shadow-raise: 0 10px 30px rgb(30 24 38 / 0.14);
+    --shadow-float: 0 24px 60px rgb(30 24 38 / 0.18);
   }
 }
 
@@ -161,7 +170,9 @@
   --bad-soft: color-mix(in oklab, var(--bad) 12%, transparent);
   --info-soft: color-mix(in oklab, var(--info) 11%, transparent);
 
+  --shadow-lift: 0 2px 8px rgb(30 24 38 / 0.08);
   --shadow-raise: 0 10px 30px rgb(30 24 38 / 0.14);
+  --shadow-float: 0 24px 60px rgb(30 24 38 / 0.18);
 }
 
 /*
@@ -236,10 +247,131 @@
   --color-white: #fff;
   --color-black: #000;
 
+  /*
+   * Type. System stacks on purpose: a downloaded face costs a network round
+   * trip before the first word appears, and the line's products are desktop
+   * tools where the operating system's own face is the one the user already
+   * reads everything else in.
+   */
   --font-sans: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
   --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
 
+  /*
+   * Radius. Taken from what the products actually draw, not from a ratio:
+   * `rounded-[9px]` appears twenty times and `rounded-[10px]` twelve, because
+   * a control and the primary button were tuned by eye and then copied. The
+   * scale keeps the cluster they landed in and gives it names.
+   *
+   * `md` is the control radius - inputs, buttons, list rows. That the primary
+   * button was one pixel rounder than every other variant is not preserved:
+   * the products differ from themselves there, and buttons of the same size
+   * sitting side by side should not have mismatched corners.
+   */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 9px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 20px;
+
+  /*
+   * A radius nested inside another has to be smaller by the gap between them,
+   * or the inner corner looks wrong against the outer one. The products did
+   * this by hand once - 18px outside, 17px inside - and nowhere else.
+   */
+  --radius-inner: calc(var(--radius-lg) - 1px);
+
+  /*
+   * Type scale. The products live between 10px and 14px: `text-sm` and
+   * `text-xs` together account for nine tenths of every size in both, and the
+   * rest scattered across 9, 9.5, 10, 10.5, 11, 11.5, 12.5 and 13 - nine steps
+   * inside four pixels, which no eye distinguishes and no reason justifies.
+   * This is the same range with the noise removed.
+   */
+  --text-2xs: 10px;
+  --text-2xs--line-height: 14px;
+  --text-xs: 11px;
+  --text-xs--line-height: 15px;
+  --text-sm: 12px;
+  --text-sm--line-height: 16px;
+  --text-base: 14px;
+  --text-base--line-height: 20px;
+  --text-lg: 16px;
+  --text-lg--line-height: 22px;
+  --text-xl: 18px;
+  --text-xl--line-height: 24px;
+  --text-2xl: 21px;
+  --text-2xl--line-height: 28px;
+
+  /* Weights. `semibold` is what both products use for anything emphasised;
+   * `bold` appears in neither, and the one `font-[650]` in a page title is the
+   * kind of value a scale exists to absorb. */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+
+  /* Tracking. The uppercase caption is the only place the products track at
+   * all - and they do it at 0.08em in six files and 0.09em in three, a
+   * difference nobody can see. One name settles it. */
+  --tracking-caption: 0.085em;
+  --tracking-tight: -0.01em;
+
+  /* Easing. `out` for anything the user asked for - it arrives fast and
+   * settles, which reads as responsive. `in-out` for something moving on its
+   * own. `in` is deliberately absent: it starts slowly, which on a control
+   * reads as lag. */
+  --ease-out: cubic-bezier(0.2, 0, 0, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /*
+   * Elevation. Three steps, because the products had one and used it for a
+   * toast, a dropdown and a modal alike - so a modal never sat further from
+   * the page than the menu it covered.
+   */
+  --shadow-lift: var(--shadow-lift);
   --shadow-raise: var(--shadow-raise);
+  --shadow-float: var(--shadow-float);
+}
+
+/*
+ * Stacking order.
+ *
+ * Not in `@theme`: Tailwind has no z-index namespace, so `z-50` is a literal
+ * fifty and a named step would not compile. These are custom properties a
+ * component reads directly - `z-index: var(--z-modal)`.
+ *
+ * The order is the products' own, with the gaps closed. They ran 10 for an
+ * in-flow popup, 20 sticky, 30 menu, 40 for a floating button, 50 for modals
+ * and drawers, then jumped to 70 and 80 for the command palette - which had to
+ * clear the modal layer and had no name to do it with.
+ */
+:root {
+  /*
+   * Motion. One duration existed before this - 160ms on a route change - and
+   * everything else rode Tailwind's default. These are the steps around it:
+   * `quick` for a colour or an opacity that should feel immediate, `base` for
+   * something that moves, `slow` for something arriving from off-screen.
+   *
+   * Not in `@theme`: Tailwind's `duration-*` utility takes a literal number,
+   * not a named step, so these are read directly - `transition-duration:
+   * var(--duration-base)`. The easing curves opposite them ARE a namespace,
+   * so `ease-out` is a class.
+   *
+   * Every duration here is for people who want motion: `prefers-reduced-
+   * motion` cuts them to nothing further down.
+   */
+  --duration-quick: 120ms;
+  --duration-base: 160ms;
+  --duration-slow: 240ms;
+
+  --z-popup: 10;
+  --z-sticky: 20;
+  --z-menu: 30;
+  --z-floating: 40;
+  --z-overlay: 50;
+  --z-modal: 60;
+  --z-palette: 70;
+  --z-toast: 80;
 }
 
 /*

package/dist/tokens.json

@@ -0,0 +1,233 @@
+{
+  "$description": "The dowel token vocabulary: the scales every product of the lacodda line is drawn on. Colours are omitted - they are derived per product from its own accent.",
+  "radius": {
+    "$type": "dimension",
+    "$description": "Corner radius. `md` is the control radius: inputs, buttons, list rows.",
+    "xs": {
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      }
+    },
+    "sm": {
+      "$value": {
+        "value": 6,
+        "unit": "px"
+      }
+    },
+    "md": {
+      "$value": {
+        "value": 9,
+        "unit": "px"
+      }
+    },
+    "lg": {
+      "$value": {
+        "value": 12,
+        "unit": "px"
+      }
+    },
+    "xl": {
+      "$value": {
+        "value": 16,
+        "unit": "px"
+      }
+    },
+    "2xl": {
+      "$value": {
+        "value": 20,
+        "unit": "px"
+      }
+    }
+  },
+  "typography": {
+    "$type": "typography",
+    "$description": "Type steps, each with the line height it is set on.",
+    "2xs": {
+      "$value": {
+        "fontSize": {
+          "value": 10,
+          "unit": "px"
+        },
+        "lineHeight": {
+          "value": 14,
+          "unit": "px"
+        }
+      }
+    },
+    "xs": {
+      "$value": {
+        "fontSize": {
+          "value": 11,
+          "unit": "px"
+        },
+        "lineHeight": {
+          "value": 15,
+          "unit": "px"
+        }
+      }
+    },
+    "sm": {
+      "$value": {
+        "fontSize": {
+          "value": 12,
+          "unit": "px"
+        },
+        "lineHeight": {
+          "value": 16,
+          "unit": "px"
+        }
+      }
+    },
+    "base": {
+      "$value": {
+        "fontSize": {
+          "value": 14,
+          "unit": "px"
+        },
+        "lineHeight": {
+          "value": 20,
+          "unit": "px"
+        }
+      }
+    },
+    "lg": {
+      "$value": {
+        "fontSize": {
+          "value": 16,
+          "unit": "px"
+        },
+        "lineHeight": {
+          "value": 22,
+          "unit": "px"
+        }
+      }
+    },
+    "xl": {
+      "$value": {
+        "fontSize": {
+          "value": 18,
+          "unit": "px"
+        },
+        "lineHeight": {
+          "value": 24,
+          "unit": "px"
+        }
+      }
+    },
+    "2xl": {
+      "$value": {
+        "fontSize": {
+          "value": 21,
+          "unit": "px"
+        },
+        "lineHeight": {
+          "value": 28,
+          "unit": "px"
+        }
+      }
+    }
+  },
+  "fontFamily": {
+    "$type": "fontFamily",
+    "sans": {
+      "$value": [
+        "Segoe UI Variable Text",
+        "Segoe UI",
+        "system-ui",
+        "-apple-system",
+        "sans-serif"
+      ]
+    },
+    "mono": {
+      "$value": [
+        "ui-monospace",
+        "Cascadia Code",
+        "SF Mono",
+        "Consolas",
+        "monospace"
+      ]
+    }
+  },
+  "fontWeight": {
+    "$type": "fontWeight",
+    "normal": {
+      "$value": 400
+    },
+    "medium": {
+      "$value": 500
+    },
+    "semibold": {
+      "$value": 600
+    }
+  },
+  "duration": {
+    "$type": "duration",
+    "$description": "Motion. Cut to nothing under `prefers-reduced-motion`.",
+    "quick": {
+      "$value": {
+        "value": 120,
+        "unit": "ms"
+      }
+    },
+    "base": {
+      "$value": {
+        "value": 160,
+        "unit": "ms"
+      }
+    },
+    "slow": {
+      "$value": {
+        "value": 240,
+        "unit": "ms"
+      }
+    }
+  },
+  "easing": {
+    "$type": "cubicBezier",
+    "out": {
+      "$value": [
+        0.2,
+        0,
+        0,
+        1
+      ]
+    },
+    "in-out": {
+      "$value": [
+        0.4,
+        0,
+        0.2,
+        1
+      ]
+    }
+  },
+  "layer": {
+    "$type": "number",
+    "$description": "Stacking order. The names are a promise about what covers what; the values only mean anything relative to each other.",
+    "popup": {
+      "$value": 10
+    },
+    "sticky": {
+      "$value": 20
+    },
+    "menu": {
+      "$value": 30
+    },
+    "floating": {
+      "$value": 40
+    },
+    "overlay": {
+      "$value": 50
+    },
+    "modal": {
+      "$value": 60
+    },
+    "palette": {
+      "$value": 70
+    },
+    "toast": {
+      "$value": 80
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dowel-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "The lacodda line design system: theme tokens and React primitives, distributed as a shadcn-compatible registry.",
   "license": "MIT",
   "type": "module",
@@ -33,10 +33,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./theme.css": "./dist/theme.css"
+    "./theme.css": "./dist/theme.css",
+    "./tokens.json": "./dist/tokens.json"
   },
   "scripts": {
-    "build": "tsc && node ../../tools/copy-theme.mjs",
+    "build": "tsc && node ../../tools/copy-theme.mjs && node ../../tools/build-tokens-json.mjs",
     "typecheck": "tsc --noEmit",
     "prepack": "node ../../tools/copy-readme.mjs"
   },