@marianmeres/design-tokens 1.1.2 → 1.1.3

package/AGENTS.md

@@ -4,6 +4,8 @@
 - **Stack**: Deno / TypeScript
 - **Run**: `deno task test` | **Watch**: `deno task test:watch`
 - **Build (npm)**: `deno task npm:build`
+- **Build (CSS)**: `deno task css:build` (generates pre-built CSS files + updates deno.json exports)
+- **Build (preview)**: `deno task preview:build`
 - **Publish**: `deno task publish` (JSR + npm)
 - **Format**: `deno fmt` (tabs, 90 chars, indent 4)
 
@@ -13,10 +15,11 @@ CSS custom property generator for design token systems. Takes a structured
 `ThemeSchema` (light + optional dark mode) and produces CSS `--custom-property`
 declarations with automatic hover/active state derivation via `color-mix()`.
 
-Three entry points:
+Entry points:
 - `.` — core generation functions, types, color palette
 - `./reboot` — Bootstrap Reboot `--bs-*` variable bridge
-- `./themes` — 31 pre-built theme definitions
+- `./themes` — 42 pre-built theme definitions
+- `./css/*.css` — pre-built CSS files with `stuic-` prefix (npm only, not on JSR)
 
 ## Project Structure
 
@@ -26,13 +29,16 @@ Three entry points:
   types.ts            — core type definitions (ThemeSchema, TokenSchema, etc.)
   generate.ts         — token generation + CSS output (generateCssTokens, toCssString, generateThemeCss)
   utils.ts            — hex color parsing (hexToRgb, hexToRgbTriplet)
-  colors.ts           — complete Tailwind v3 color palette (hex values)
+  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
     *.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              — npm build script
+/scripts
+  build-npm.ts        — npm package build (also copies css/ into dist)
+  build-css.ts        — generates css/*.css from all themes with "stuic-" prefix
 /theme-preview-builder — HTML preview tool
 ```
 
@@ -66,7 +72,7 @@ Three entry points:
 ### Constants
 | Export | Purpose |
 |--------|---------|
-| `colors` | Complete Tailwind v3 hex palette (`colors.blue[600]`) |
+| `colors` | Tailwind hex palette including v4.2 additions (`colors.blue[600]`, `colors.mauve[500]`) |
 
 ## Critical Conventions
 
@@ -77,9 +83,17 @@ Three entry points:
 5. Theme files use `export default` with `ThemeSchema` type annotation
 6. Formatting: tabs, 90-char line width, 4-space indent width (`deno fmt`)
 
+## 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)
+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`
+
 ## Before Making Changes
 
 - [ ] Read existing patterns in similar files
-- [ ] Run `deno task test` — all 37 tests must pass
+- [ ] Run `deno task test` — all tests must pass
 - [ ] Follow `deno fmt` conventions
 - [ ] Ensure new exports have JSDoc + explicit return types

package/API.md

@@ -251,13 +251,20 @@ type RoleSingleKey = "foreground" | "border" | "input" | "ring";
 
 ### `colors`
 
-Complete Tailwind CSS v3 color palette as hex values. Contains `black`, `white`, and 22 color scales (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) each with shades 50–950.
+Tailwind CSS color palette as hex values. Contains `black`, `white`, and 26 color scales each with shades 50–950:
+
+- **Neutrals**: slate, gray, zinc, neutral, stone
+- **Earthy/muted (v4.2)**: taupe, mauve, mist, olive
+- **Warm**: red, orange, amber, yellow
+- **Cool**: lime, green, emerald, teal, cyan, sky, blue, indigo
+- **Vibrant**: violet, purple, fuchsia, pink, rose
 
 ```typescript
 import { colors } from "@marianmeres/design-tokens";
 
 colors.blue[600]   // → "#2563eb"
-colors.white        // → "#ffffff"
+colors.mauve[500]  // → "#79697b"
+colors.white       // → "#ffffff"
 ```
 
 ---
@@ -266,6 +273,20 @@ colors.white        // → "#ffffff"
 
 *Import from `@marianmeres/design-tokens/themes`*
 
-31 pre-built `ThemeSchema` definitions, each with light + dark mode:
+42 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`
+
+---
+
+## Pre-built CSS
+
+*npm only — not available on JSR*
+
+All bundled themes are also distributed as pre-built CSS files using the `stuic-` prefix. Import via `@marianmeres/design-tokens/css/{theme-name}.css`.
+
+```typescript
+import "@marianmeres/design-tokens/css/mauve-teal.css";
+```
 
-`blueOrange`, `cyanRed`, `cyanSlate`, `emeraldAmberForest`, `emeraldPink`, `fuchsiaEmerald`, `gray`, `indigoAmber`, `limeFuchsiaNeon`, `monokaiCyan`, `monokaiGreen`, `monokaiPink`, `orangePinkSunset`, `pinkEmerald`, `pinkTeal`, `purpleYellow`, `rainbow`, `redBlue`, `redCyan`, `redSky`, `redSkySlate`, `roseTeal`, `skyAmber`, `slateCyan`, `slateTealOcean`, `stone`, `stoneOrangeEarth`, `tealRose`, `violetLime`, `violetRoseDusk`, `zinc`
+Available files: `blue-orange.css`, `cyan-red.css`, `mauve-teal.css`, `mist-indigo-fjord.css`, `taupe-rose-blush.css`, etc. (one per bundled theme)

package/README.md

@@ -53,9 +53,22 @@ const css = generateThemeCss(theme, "my-");
 // → :root { --my-color-primary: #2563eb; ... }
 ```
 
+## Pre-built CSS
+
+All bundled themes are available as pre-built CSS files with the `stuic-` prefix (npm only):
+
+```html
+<link rel="stylesheet" href="node_modules/@marianmeres/design-tokens/css/mauve-teal.css">
+```
+
+Or via bundler import:
+```ts
+import "@marianmeres/design-tokens/css/mauve-teal.css";
+```
+
 ## Creating a custom theme
 
-Use the bundled `colors` map (complete Tailwind v3 palette) to avoid looking up hex values:
+Use the bundled `colors` map (Tailwind palette including v4.2 additions) to avoid looking up hex values:
 
 ```ts
 import { colors, generateThemeCss } from "@marianmeres/design-tokens";

package/package.json

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