dowel-ui 0.2.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.2.0 - the theme and the scales. 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
 
@@ -58,7 +58,20 @@ The stock palette is dropped deliberately, so a stray `bg-zinc-800` does not com
 
 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.
+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,3 +1,5 @@
+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"];

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;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"}
+{"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 = [

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;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"}
+{"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.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dowel-ui",
-  "version": "0.2.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",
@@ -34,10 +34,11 @@
       "import": "./dist/index.js"
     },
     "./theme.css": "./dist/theme.css",
-    "./tokens.json": "./dist/tokens.json"
+    "./tokens.json": "./dist/tokens.json",
+    "./accents/*.css": "./dist/accents/*.css"
   },
   "scripts": {
-    "build": "tsc && node ../../tools/copy-theme.mjs && node ../../tools/build-tokens-json.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"
   },