dowel-ui 0.1.0 → 0.3.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.3.0 - the theme, the scales and an accent per product. Primitives follow; see the [roadmap](#roadmap).
 
 ## The theme
 
@@ -54,8 +54,24 @@ 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.
+
+A product of the line states one thing about its appearance - which product it is:
+
+```css
+@import 'dowel-ui/theme.css';
+@import 'dowel-ui/accents/kilna.css';
+```
+
+Or copy the files in instead of depending on the package:
+
+```bash
+npx shadcn@latest add https://lacodda.github.io/dowel/r/theme.json
+```
+
+Full vocabulary, shown rather than tabulated: **[colours](https://lacodda.github.io/dowel/reference/tokens/)** in both themes, **[the scales](https://lacodda.github.io/dowel/reference/scales/)** - radius, type, motion, elevation and stacking order - and **[the accents](https://lacodda.github.io/dowel/reference/accents/)**, where the same screen is drawn in every colour of the line.
 
 ## Roadmap
 

package/dist/accents/atlas.css

@@ -0,0 +1,10 @@
+/*
+ * atlas - nebula #8A7DF5, the colour of its mark (at).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #8A7DF5;
+}

package/dist/accents/austeris.css

@@ -0,0 +1,10 @@
+/*
+ * austeris - orchid #C25BD9, the colour of its mark (au).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #C25BD9;
+}

package/dist/accents/dowel.css

@@ -0,0 +1,10 @@
+/*
+ * dowel - signal amber #E8862D, the colour of its mark (dw).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #E8862D;
+}

package/dist/accents/efema.css

@@ -0,0 +1,10 @@
+/*
+ * efema - cobalt #5470E8, the colour of its mark (ef).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #5470E8;
+}

package/dist/accents/kasl-server.css

@@ -0,0 +1,10 @@
+/*
+ * kasl-server - gold #D9A82E, the colour of its mark (ks).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #D9A82E;
+}

package/dist/accents/kasl.css

@@ -0,0 +1,10 @@
+/*
+ * kasl - lime #A9C23F, the colour of its mark (ka).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #A9C23F;
+}

package/dist/accents/kilna.css

@@ -0,0 +1,10 @@
+/*
+ * kilna - magenta #D9569E, the colour of its mark (ki).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #D9569E;
+}

package/dist/accents/lyrid.css

@@ -0,0 +1,10 @@
+/*
+ * lyrid - azure #4A8FE8, the colour of its mark (ly).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #4A8FE8;
+}

package/dist/accents/lyrn.css

@@ -0,0 +1,10 @@
+/*
+ * lyrn - indigo #6D7BF2, the colour of its mark (ln).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #6D7BF2;
+}

package/dist/accents/midda.css

@@ -0,0 +1,10 @@
+/*
+ * midda - violet #A46BE8, the colour of its mark (mi).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #A46BE8;
+}

package/dist/accents/nitid.css

@@ -0,0 +1,10 @@
+/*
+ * nitid - cyan #3FA9D9, the colour of its mark (nd).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #3FA9D9;
+}

package/dist/accents/nooma.css

@@ -0,0 +1,10 @@
+/*
+ * nooma - emerald #3FA873, the colour of its mark (nm).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #3FA873;
+}

package/dist/accents/sefy.css

@@ -0,0 +1,10 @@
+/*
+ * sefy - teal #35A8A0, the colour of its mark (se).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #35A8A0;
+}

package/dist/accents/turnout.css

@@ -0,0 +1,10 @@
+/*
+ * turnout - rose #E85B72, the colour of its mark (tn).
+ *
+ * Import after the theme. Everything else - the hover shade, the soft fill,
+ * the focus ring, the colour of text on an accent fill, and the trace of the
+ * hue the greys carry - is derived from this one value.
+ */
+:root {
+  --accent-base: #E85B72;
+}

package/dist/index.d.ts

@@ -1,15 +1,41 @@
+export { lineProducts, lineProduct, type LineProduct } from './line';
+export { defaultStorageKey, initTheme, nextTheme, resolvedTheme, useTheme, useThemeSwitch, type Theme, } from './theme';
 /** Tokens that carry a colour. Ordered as they read on a screen: grounds,
  * then hairlines, then ink, then the accent, then status. */
 export declare const colorTokens: 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"];
 /** 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,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAA;AACpE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,EACd,KAAK,KAAK,GACX,MAAM,SAAS,CAAA;AAEhB;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

@@ -14,6 +14,8 @@
  * Primitives are distributed through the registry, not from here: a component
  * is copied into the product and becomes the product's own code.
  */
+export { lineProducts, lineProduct } from './line';
+export { defaultStorageKey, initTheme, nextTheme, resolvedTheme, useTheme, useThemeSwitch, } from './theme';
 /** Tokens that carry a colour. Ordered as they read on a screen: grounds,
  * then hairlines, then ink, then the accent, then status. */
 export const colorTokens = [
@@ -49,8 +51,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,OAAO,EAAE,YAAY,EAAE,WAAW,EAAoB,MAAM,QAAQ,CAAA;AACpE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,GAEf,MAAM,SAAS,CAAA;AAEhB;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/line.d.ts

@@ -0,0 +1,14 @@
+export interface LineProduct {
+    /** Package-and-directory name, and the name of the accent file. */
+    readonly name: string;
+    /** The two-letter code on the product's mark. */
+    readonly code: string;
+    /** The accent, as the registry states it. */
+    readonly accent: string;
+    /** The colour's name in the line's palette. */
+    readonly colorName: string;
+}
+export declare const lineProducts: readonly LineProduct[];
+/** The product with this name, or `undefined`. */
+export declare function lineProduct(name: string): LineProduct | undefined;
+//# sourceMappingURL=line.d.ts.map

package/dist/line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line.d.ts","sourceRoot":"","sources":["../src/line.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,WAAW;IAC1B,mEAAmE;IACnE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,iDAAiD;IACjD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,+CAA+C;IAC/C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;CAC3B;AAED,eAAO,MAAM,YAAY,EAAE,SAAS,WAAW,EAe9C,CAAA;AAED,kDAAkD;AAClD,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAEjE"}

package/dist/line.js

@@ -0,0 +1,35 @@
+/*
+ * The products of the lacodda line, and the colour each one is known by.
+ *
+ * These are the accents from the line's registry of marks: one hue per
+ * product, fixed for the life of that product. A product's theme is its mark's
+ * colour - the tile on its README, the icon in the taskbar and the primary
+ * button on its screens are the same colour, because they are the same fact.
+ *
+ * The registry itself lives with the mark generator, outside this repository.
+ * It is copied here rather than read, because a build must not reach into a
+ * private toolchain to know what colour a button is; the release gate checks
+ * that every product listed has an accent file, and the contrast tests run
+ * over this list, so a wrong value cannot travel far.
+ */
+export const lineProducts = [
+    { name: 'kasl', code: 'ka', accent: '#A9C23F', colorName: 'lime' },
+    { name: 'kasl-server', code: 'ks', accent: '#D9A82E', colorName: 'gold' },
+    { name: 'turnout', code: 'tn', accent: '#E85B72', colorName: 'rose' },
+    { name: 'sefy', code: 'se', accent: '#35A8A0', colorName: 'teal' },
+    { name: 'atlas', code: 'at', accent: '#8A7DF5', colorName: 'nebula' },
+    { name: 'nitid', code: 'nd', accent: '#3FA9D9', colorName: 'cyan' },
+    { name: 'midda', code: 'mi', accent: '#A46BE8', colorName: 'violet' },
+    { name: 'nooma', code: 'nm', accent: '#3FA873', colorName: 'emerald' },
+    { name: 'kilna', code: 'ki', accent: '#D9569E', colorName: 'magenta' },
+    { name: 'lyrid', code: 'ly', accent: '#4A8FE8', colorName: 'azure' },
+    { name: 'efema', code: 'ef', accent: '#5470E8', colorName: 'cobalt' },
+    { name: 'dowel', code: 'dw', accent: '#E8862D', colorName: 'signal amber' },
+    { name: 'lyrn', code: 'ln', accent: '#6D7BF2', colorName: 'indigo' },
+    { name: 'austeris', code: 'au', accent: '#C25BD9', colorName: 'orchid' },
+];
+/** The product with this name, or `undefined`. */
+export function lineProduct(name) {
+    return lineProducts.find((product) => product.name === name);
+}
+//# sourceMappingURL=line.js.map

package/dist/line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"line.js","sourceRoot":"","sources":["../src/line.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAaH,MAAM,CAAC,MAAM,YAAY,GAA2B;IAClD,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE;IAClE,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE;IACzE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE;IACrE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE;IAClE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE;IACrE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE;IACnE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE;IACrE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE;IACtE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE;IACtE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE;IACpE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE;IACrE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE;IAC3E,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE;IACpE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE;CACzE,CAAA;AAED,kDAAkD;AAClD,MAAM,UAAU,WAAW,CAAC,IAAY;IACtC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,CAAA;AAC9D,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/theme.d.ts

@@ -0,0 +1,67 @@
+/** `system` follows the operating system; the other two pin a class. */
+export type Theme = 'system' | 'light' | 'dark';
+/** Where the choice is remembered. A product may use its own key; the default
+ * is shared, so two products of the line on the same origin agree. */
+export declare const defaultStorageKey = "dowel.theme";
+/**
+ * Apply the remembered theme immediately, before React renders.
+ *
+ * Call this from the entry module, above the first render. Without it the page
+ * paints in the default theme and then corrects itself, which a reader who
+ * chose light sees as a flash of dark.
+ */
+export declare function initTheme(storageKey?: string): void;
+/**
+ * The current theme and a way to change it.
+ *
+ * While the theme is `system` this follows the operating system as it changes,
+ * so a reader who switches their machine to dark at sunset does not have to
+ * reload the page.
+ */
+export declare function useTheme(storageKey?: string): {
+    theme: Theme;
+    /** Which theme is showing: `system` resolved against the operating system. */
+    resolved: 'light' | 'dark';
+    setTheme: (theme: Theme) => void;
+};
+/** The next theme in a fixed cycle, for a control that is one button rather
+ * than three. */
+export declare function nextTheme(current: Theme): Theme;
+/**
+ * A theme switch, as behaviour without markup.
+ *
+ * The control itself is the product's: kilna's is a row in its sidebar with an
+ * icon and a translated label, and a design system that shipped that would be
+ * shipping kilna's sidebar. What is worth sharing is the part every product
+ * would otherwise get subtly wrong - the cycle order, the accessible state,
+ * and telling assistive technology that a button changes the page's own
+ * appearance.
+ *
+ *   const { theme, buttonProps } = useThemeSwitch()
+ *   <button {...buttonProps} aria-label={t(`theme.${theme}`)}>
+ *     <Icon /> {t(`theme.${theme}`)}
+ *   </button>
+ *
+ * The label stays with the product: a primitive with a string of its own is a
+ * primitive that cannot be translated.
+ */
+export declare function useThemeSwitch(storageKey?: string): {
+    theme: Theme;
+    resolved: 'light' | 'dark';
+    setTheme: (theme: Theme) => void;
+    /** Spread onto the button that cycles the theme. */
+    buttonProps: {
+        type: 'button';
+        onClick: () => void;
+        'aria-live': 'polite';
+    };
+};
+/**
+ * Which theme is showing, right now, outside React.
+ *
+ * `useTheme` returns the same thing as `resolved` and keeps it current; this
+ * is for the places a hook cannot reach - a canvas that has to pick a colour,
+ * a chart library told what palette to draw in.
+ */
+export declare function resolvedTheme(theme: Theme): 'light' | 'dark';
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAiBA,wEAAwE;AACxE,MAAM,MAAM,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;AAI/C;sEACsE;AACtE,eAAO,MAAM,iBAAiB,gBAAgB,CAAA;AAiC9C;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,UAAU,GAAE,MAA0B,GAAG,IAAI,CAEtE;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,UAAU,GAAE,MAA0B,GAAG;IAChE,KAAK,EAAE,KAAK,CAAA;IACZ,8EAA8E;IAC9E,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC,CA8BA;AAED;iBACiB;AACjB,wBAAgB,SAAS,CAAC,OAAO,EAAE,KAAK,GAAG,KAAK,CAG/C;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,UAAU,GAAE,MAA0B,GAAG;IACtE,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,oDAAoD;IACpD,WAAW,EAAE;QACX,IAAI,EAAE,QAAQ,CAAA;QACd,OAAO,EAAE,MAAM,IAAI,CAAA;QACnB,WAAW,EAAE,QAAQ,CAAA;KACtB,CAAA;CACF,CAiBA;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAG5D"}

package/dist/theme.js

@@ -0,0 +1,127 @@
+import { useCallback, useEffect, useState } from 'react';
+const THEMES = ['system', 'light', 'dark'];
+/** Where the choice is remembered. A product may use its own key; the default
+ * is shared, so two products of the line on the same origin agree. */
+export const defaultStorageKey = 'dowel.theme';
+/** Storage is a convenience, never a requirement: private windows, embedded
+ * views and blocked site data all make it throw, and a theme switch that
+ * cannot remember should still switch. */
+function readStored(key) {
+    try {
+        const raw = localStorage.getItem(key);
+        return THEMES.includes(raw) ? raw : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeStored(key, theme) {
+    try {
+        localStorage.setItem(key, theme);
+    }
+    catch {
+        // Nothing to do: the choice applies to this page, it just will not survive.
+    }
+}
+function applyTheme(theme) {
+    const root = document.documentElement;
+    root.classList.toggle('light', theme === 'light');
+    root.classList.toggle('dark', theme === 'dark');
+}
+/** Whether the operating system is asking for a dark theme right now. */
+function prefersDark() {
+    return typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+/**
+ * Apply the remembered theme immediately, before React renders.
+ *
+ * Call this from the entry module, above the first render. Without it the page
+ * paints in the default theme and then corrects itself, which a reader who
+ * chose light sees as a flash of dark.
+ */
+export function initTheme(storageKey = defaultStorageKey) {
+    applyTheme(readStored(storageKey) ?? 'system');
+}
+/**
+ * The current theme and a way to change it.
+ *
+ * While the theme is `system` this follows the operating system as it changes,
+ * so a reader who switches their machine to dark at sunset does not have to
+ * reload the page.
+ */
+export function useTheme(storageKey = defaultStorageKey) {
+    const [theme, setThemeState] = useState(() => readStored(storageKey) ?? 'system');
+    const [systemIsDark, setSystemIsDark] = useState(prefersDark);
+    useEffect(() => {
+        applyTheme(theme);
+    }, [theme]);
+    useEffect(() => {
+        // The stylesheet follows the operating system on its own - that is what
+        // the `prefers-color-scheme` block is for, and the classes are already
+        // right. What has to be tracked in React is `resolved`, because a control
+        // that draws a sun or a moon needs to know which one is showing.
+        const query = window.matchMedia('(prefers-color-scheme: dark)');
+        const onChange = (event) => setSystemIsDark(event.matches);
+        query.addEventListener('change', onChange);
+        return () => query.removeEventListener('change', onChange);
+    }, []);
+    const setTheme = useCallback((next) => {
+        writeStored(storageKey, next);
+        setThemeState(next);
+    }, [storageKey]);
+    const resolved = theme === 'system' ? (systemIsDark ? 'dark' : 'light') : theme;
+    return { theme, resolved, setTheme };
+}
+/** The next theme in a fixed cycle, for a control that is one button rather
+ * than three. */
+export function nextTheme(current) {
+    const index = THEMES.indexOf(current);
+    return THEMES[(index + 1) % THEMES.length] ?? 'system';
+}
+/**
+ * A theme switch, as behaviour without markup.
+ *
+ * The control itself is the product's: kilna's is a row in its sidebar with an
+ * icon and a translated label, and a design system that shipped that would be
+ * shipping kilna's sidebar. What is worth sharing is the part every product
+ * would otherwise get subtly wrong - the cycle order, the accessible state,
+ * and telling assistive technology that a button changes the page's own
+ * appearance.
+ *
+ *   const { theme, buttonProps } = useThemeSwitch()
+ *   <button {...buttonProps} aria-label={t(`theme.${theme}`)}>
+ *     <Icon /> {t(`theme.${theme}`)}
+ *   </button>
+ *
+ * The label stays with the product: a primitive with a string of its own is a
+ * primitive that cannot be translated.
+ */
+export function useThemeSwitch(storageKey = defaultStorageKey) {
+    const { theme, resolved, setTheme } = useTheme(storageKey);
+    const onClick = useCallback(() => setTheme(nextTheme(theme)), [theme, setTheme]);
+    return {
+        theme,
+        resolved,
+        setTheme,
+        buttonProps: {
+            type: 'button',
+            onClick,
+            // The button's own label changes when it is pressed - it names the
+            // theme now in force - and a screen reader should hear that.
+            'aria-live': 'polite',
+        },
+    };
+}
+/**
+ * Which theme is showing, right now, outside React.
+ *
+ * `useTheme` returns the same thing as `resolved` and keeps it current; this
+ * is for the places a hook cannot reach - a canvas that has to pick a colour,
+ * a chart library told what palette to draw in.
+ */
+export function resolvedTheme(theme) {
+    if (theme !== 'system')
+        return theme;
+    return prefersDark() ? 'dark' : 'light';
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

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.3.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,12 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./theme.css": "./dist/theme.css"
+    "./theme.css": "./dist/theme.css",
+    "./tokens.json": "./dist/tokens.json",
+    "./accents/*.css": "./dist/accents/*.css"
   },
   "scripts": {
-    "build": "tsc && node ../../tools/copy-theme.mjs",
+    "build": "tsc && node ../../tools/copy-theme.mjs && node ../../tools/build-tokens-json.mjs && node ../../tools/build-accents.mjs && node ../../tools/build-registry.mjs",
     "typecheck": "tsc --noEmit",
     "prepack": "node ../../tools/copy-readme.mjs"
   },