@marianmeres/design-tokens 1.2.0 → 1.3.1

package/AGENTS.md

@@ -18,7 +18,7 @@ declarations with automatic hover/active state derivation via `color-mix()`.
 Entry points:
 - `.` — core generation functions, types, color palette
 - `./reboot` — Bootstrap Reboot `--bs-*` variable bridge
-- `./themes` — 42 pre-built theme definitions
+- `./themes` — 43 pre-built theme definitions + `themeNames` constant
 - `./css/*.css` — pre-built CSS files with `stuic-` prefix (npm only, not on JSR)
 
 ## Project Structure
@@ -32,13 +32,14 @@ Entry points:
   colors.ts           — Tailwind color palette (v3 + v4.2 additions: taupe, mauve, mist, olive)
   reboot-bridge.ts    — Bootstrap Reboot --bs-* variable mapping
   /themes
-    mod.ts            — re-exports all theme definitions
+    mod.ts            — auto-generated barrel (via scripts/build-themes-mod.ts)
     *.ts              — individual theme files (default export: ThemeSchema)
 /css                  — pre-built CSS files (generated by scripts/build-css.ts)
 /tests                — test files (deno test --allow-read)
 /scripts
   build-npm.ts        — npm package build (also copies css/ into dist)
   build-css.ts        — generates css/*.css from all themes with "stuic-" prefix
+  build-themes-mod.ts — auto-generates src/themes/mod.ts from discovered theme files
 /theme-preview-builder — HTML preview tool
 ```
 
@@ -73,6 +74,7 @@ Entry points:
 | Export | Purpose |
 |--------|---------|
 | `colors` | Tailwind hex palette including v4.2 additions (`colors.blue[600]`, `colors.mauve[500]`) |
+| `themeNames` | Kebab-case theme name strings matching CSS filenames (from `./themes`) |
 
 ## Critical Conventions
 
@@ -86,7 +88,7 @@ Entry points:
 ## Adding a New Theme
 
 1. Create `src/themes/{name}.ts` with `export default` of `ThemeSchema`
-2. Add re-export in `src/themes/mod.ts` (alphabetical order)
+2. Run `deno task themes:build` to regenerate `src/themes/mod.ts`
 3. Run `deno task css:build` to regenerate CSS files
 4. Run `deno task preview:build` to rebuild the preview tool
 5. If the theme uses new color families, update `COLOR_FAMILIES` in `theme-preview-builder/index.html`

package/API.md

@@ -273,9 +273,9 @@ colors.white       // → "#ffffff"
 
 *Import from `@marianmeres/design-tokens/themes`*
 
-42 pre-built `ThemeSchema` definitions, each with light + dark mode:
+43 pre-built `ThemeSchema` definitions, each with light + dark mode:
 
-`blueOrange`, `cyanRed`, `cyanSlate`, `emeraldAmberForest`, `emeraldPink`, `fuchsiaEmerald`, `gray`, `indigoAmber`, `limeFuchsiaNeon`, `mauve`, `mauveLimeElectric`, `mauveTeal`, `mist`, `mistIndigoFjord`, `mistVioletAurora`, `monokaiCyan`, `monokaiGreen`, `monokaiPink`, `olive`, `oliveAmberSafari`, `orangePinkSunset`, `pinkEmerald`, `pinkTeal`, `purpleYellow`, `rainbow`, `redBlue`, `redCyan`, `redSky`, `redSkySlate`, `roseTeal`, `skyAmber`, `slateCyan`, `slateTealOcean`, `stone`, `taupe`, `taupeOliveClay`, `taupeRoseBlush`, `stoneOrangeEarth`, `tealRose`, `violetLime`, `violetRoseDusk`, `zinc`
+`amberOliveSafari`, `blueOrange`, `cyanRed`, `cyanSlate`, `emeraldAmberForest`, `emeraldPink`, `fuchsiaEmerald`, `gray`, `indigoAmber`, `limeFuchsiaNeon`, `mauve`, `mauveLimeElectric`, `mauveTeal`, `mist`, `mistIndigoFjord`, `mistVioletAurora`, `monokaiCyan`, `monokaiGreen`, `monokaiPink`, `olive`, `oliveAmberSafari`, `orangePinkSunset`, `pinkEmerald`, `pinkTeal`, `purpleYellow`, `rainbow`, `redBlue`, `redCyan`, `redSky`, `redSkySlate`, `roseTeal`, `skyAmber`, `slateCyan`, `slateTealOcean`, `stone`, `stoneOrangeEarth`, `taupe`, `taupeOliveClay`, `taupeRoseBlush`, `tealRose`, `violetLime`, `violetRoseDusk`, `zinc`
 
 ---
 
@@ -289,4 +289,18 @@ All bundled themes are also distributed as pre-built CSS files using the `stuic-
 import "@marianmeres/design-tokens/css/mauve-teal.css";
 ```
 
-Available files: `blue-orange.css`, `cyan-red.css`, `mauve-teal.css`, `mist-indigo-fjord.css`, `taupe-rose-blush.css`, etc. (one per bundled theme)
+Available files: `amber-olive-safari.css`, `blue-orange.css`, `cyan-red.css`, `mauve-teal.css`, `mist-indigo-fjord.css`, `taupe-rose-blush.css`, etc. (one per bundled theme)
+
+---
+
+### `themeNames`
+
+*Import from `@marianmeres/design-tokens/themes`*
+
+Kebab-case theme name strings matching the generated CSS filenames (without extension). Typed as `readonly` tuple.
+
+```typescript
+import { themeNames } from "@marianmeres/design-tokens/themes";
+
+themeNames; // → ["amber-olive-safari", "blue-orange", ..., "zinc"]
+```

package/dist/themes/mod.d.ts

@@ -79,14 +79,14 @@ export { default as slateCyan } from "./slate-cyan.js";
 export { default as slateTealOcean } from "./slate-teal-ocean.js";
 /** Neutral stone monochrome theme. */
 export { default as stone } from "./stone.js";
+/** Stone primary / orange accent earth theme. */
+export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
 /** Warm neutral taupe monochrome theme. */
 export { default as taupe } from "./taupe.js";
 /** Taupe primary / olive accent clay theme — all-earthy, warm and grounded. */
 export { default as taupeOliveClay } from "./taupe-olive-clay.js";
 /** Rose primary / pink accent on taupe base — warm blush tones. */
 export { default as taupeRoseBlush } from "./taupe-rose-blush.js";
-/** Stone primary / orange accent earth theme. */
-export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
 /** Teal primary / rose accent theme. */
 export { default as tealRose } from "./teal-rose.js";
 /** Violet primary / lime accent theme. */
@@ -95,3 +95,5 @@ export { default as violetLime } from "./violet-lime.js";
 export { default as violetRoseDusk } from "./violet-rose-dusk.js";
 /** Neutral zinc monochrome theme. */
 export { default as zinc } from "./zinc.js";
+/** Kebab-case theme names matching the generated CSS filenames (without extension). */
+export declare const themeNames: readonly ["amber-olive-safari", "blue-orange", "cyan-red", "cyan-slate", "emerald-amber-forest", "emerald-pink", "fuchsia-emerald", "gray", "indigo-amber", "lime-fuchsia-neon", "mauve", "mauve-lime-electric", "mauve-teal", "mist", "mist-indigo-fjord", "mist-violet-aurora", "monokai-cyan", "monokai-green", "monokai-pink", "olive", "olive-amber-safari", "orange-pink-sunset", "pink-emerald", "pink-teal", "purple-yellow", "rainbow", "red-blue", "red-cyan", "red-sky", "red-sky-slate", "rose-teal", "sky-amber", "slate-cyan", "slate-teal-ocean", "stone", "stone-orange-earth", "taupe", "taupe-olive-clay", "taupe-rose-blush", "teal-rose", "violet-lime", "violet-rose-dusk", "zinc"];

package/dist/themes/mod.js

@@ -1,12 +1,4 @@
-/**
- * Pre-built {@link ThemeSchema} definitions ready to use with
- * {@link generateThemeCss} or {@link generateThemedCss}.
- *
- * Each theme exports a complete light + dark mode token schema built
- * from the bundled Tailwind color palette.
- *
- * @module
- */
+// This file is auto-generated by scripts/build-themes-mod.ts — do not edit manually.
 /** Amber primary / olive accent safari theme — golden warmth with earthy highlights. */
 export { default as amberOliveSafari } from "./amber-olive-safari.js";
 /** Blue primary / orange accent theme. */
@@ -77,14 +69,14 @@ export { default as slateCyan } from "./slate-cyan.js";
 export { default as slateTealOcean } from "./slate-teal-ocean.js";
 /** Neutral stone monochrome theme. */
 export { default as stone } from "./stone.js";
+/** Stone primary / orange accent earth theme. */
+export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
 /** Warm neutral taupe monochrome theme. */
 export { default as taupe } from "./taupe.js";
 /** Taupe primary / olive accent clay theme — all-earthy, warm and grounded. */
 export { default as taupeOliveClay } from "./taupe-olive-clay.js";
 /** Rose primary / pink accent on taupe base — warm blush tones. */
 export { default as taupeRoseBlush } from "./taupe-rose-blush.js";
-/** Stone primary / orange accent earth theme. */
-export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
 /** Teal primary / rose accent theme. */
 export { default as tealRose } from "./teal-rose.js";
 /** Violet primary / lime accent theme. */
@@ -93,3 +85,49 @@ export { default as violetLime } from "./violet-lime.js";
 export { default as violetRoseDusk } from "./violet-rose-dusk.js";
 /** Neutral zinc monochrome theme. */
 export { default as zinc } from "./zinc.js";
+/** Kebab-case theme names matching the generated CSS filenames (without extension). */
+export const themeNames = [
+    "amber-olive-safari",
+    "blue-orange",
+    "cyan-red",
+    "cyan-slate",
+    "emerald-amber-forest",
+    "emerald-pink",
+    "fuchsia-emerald",
+    "gray",
+    "indigo-amber",
+    "lime-fuchsia-neon",
+    "mauve",
+    "mauve-lime-electric",
+    "mauve-teal",
+    "mist",
+    "mist-indigo-fjord",
+    "mist-violet-aurora",
+    "monokai-cyan",
+    "monokai-green",
+    "monokai-pink",
+    "olive",
+    "olive-amber-safari",
+    "orange-pink-sunset",
+    "pink-emerald",
+    "pink-teal",
+    "purple-yellow",
+    "rainbow",
+    "red-blue",
+    "red-cyan",
+    "red-sky",
+    "red-sky-slate",
+    "rose-teal",
+    "sky-amber",
+    "slate-cyan",
+    "slate-teal-ocean",
+    "stone",
+    "stone-orange-earth",
+    "taupe",
+    "taupe-olive-clay",
+    "taupe-rose-blush",
+    "teal-rose",
+    "violet-lime",
+    "violet-rose-dusk",
+    "zinc",
+];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/design-tokens",
-	"version": "1.2.0",
+	"version": "1.3.1",
 	"type": "module",
 	"main": "dist/mod.js",
 	"types": "dist/mod.d.ts",

package/dist/themes/dds.d.ts

@@ -1,3 +0,0 @@
-import type { ThemeSchema } from "../types.js";
-declare const theme: ThemeSchema;
-export default theme;

package/dist/themes/dds.js

@@ -1,133 +0,0 @@
-import { colors } from "../colors.js";
-// Custom color palette — hover/active states must be explicit (no auto-derivation)
-const theme = {
-    light: {
-        colors: {
-            intent: {
-                primary: {
-                    DEFAULT: "#13BF89",
-                    foreground: "#2B2A28",
-                    hover: "#42CCA1",
-                    active: "#0F996E",
-                },
-                accent: {
-                    DEFAULT: "#F89B20",
-                    foreground: "#2B2A28",
-                    hover: "#C87F16",
-                    active: "#A56A12",
-                },
-                destructive: {
-                    DEFAULT: "#E60523",
-                    foreground: "#fff",
-                    hover: "#B8041C",
-                    active: "#930316",
-                },
-                warning: {
-                    DEFAULT: "#F37903",
-                    foreground: "#2B2A28",
-                    hover: "#FBB249",
-                    active: "#9E581B",
-                },
-                success: {
-                    DEFAULT: "#0DB064",
-                    foreground: "#fff",
-                    hover: "#00853E",
-                    active: "#006A32",
-                },
-            },
-            role: {
-                paired: {
-                    background: {
-                        DEFAULT: "#fff",
-                        foreground: "#2B2A28",
-                    },
-                    muted: {
-                        DEFAULT: "#E9E8E7",
-                        foreground: "#726F6B",
-                    },
-                    surface: {
-                        DEFAULT: "#DDDCDB",
-                        foreground: "#2B2A28",
-                        hover: "#B1AEAA",
-                        active: "#726F6B",
-                    },
-                    "surface-1": {
-                        DEFAULT: "#B1AEAA",
-                        foreground: "#2B2A28",
-                        hover: "#726F6B",
-                        active: "#5A5855",
-                    },
-                },
-                single: {
-                    foreground: "#2B2A28",
-                    border: {
-                        DEFAULT: "#B1AEAA",
-                    },
-                    input: {
-                        DEFAULT: "#fff",
-                        hover: "#F4F3F3",
-                    },
-                    ring: "color-mix(in srgb, #13BF89 20%, transparent)",
-                },
-            },
-        },
-    },
-    dark: {
-        colors: {
-            intent: {
-                primary: {
-                    DEFAULT: colors.zinc[200], // zinc-200 (neutral)
-                    foreground: colors.black,
-                },
-                accent: {
-                    DEFAULT: colors.amber[400], // amber-400
-                    foreground: colors.black,
-                },
-                destructive: {
-                    DEFAULT: colors.rose[500], // rose-500
-                    foreground: colors.white,
-                },
-                warning: {
-                    DEFAULT: colors.amber[400], // amber-400
-                    foreground: colors.black,
-                },
-                success: {
-                    DEFAULT: colors.teal[500], // teal-500
-                    foreground: colors.white,
-                },
-            },
-            role: {
-                paired: {
-                    background: {
-                        DEFAULT: colors.zinc[900], // zinc-900 (neutral)
-                        foreground: colors.neutral[50], // zinc-50
-                    },
-                    muted: {
-                        DEFAULT: colors.zinc[800], // zinc-800
-                        foreground: colors.zinc[400], // zinc-400
-                    },
-                    surface: {
-                        DEFAULT: colors.zinc[700], // zinc-700
-                        foreground: colors.zinc[300], // zinc-300
-                    },
-                    "surface-1": {
-                        DEFAULT: colors.zinc[600], // zinc-600
-                        foreground: colors.zinc[200], // zinc-200
-                    },
-                },
-                single: {
-                    foreground: colors.neutral[50], // zinc-50
-                    border: {
-                        DEFAULT: colors.zinc[700], // zinc-700
-                    },
-                    input: {
-                        DEFAULT: colors.zinc[900], // zinc-900
-                        hover: colors.zinc[800], // zinc-800
-                    },
-                    ring: `color-mix(in srgb, ${colors.zinc[400]} 25%, transparent)`, // zinc-400
-                },
-            },
-        },
-    },
-};
-export default theme;