@kouji-ui/themes 0.0.6

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@kouji-ui/themes",
+  "version": "0.0.6",
+  "description": "Theme tokens and theme stylesheets for kouji-ui — pure CSS, swappable at runtime via data-theme.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kouji-dev/kouji-ui.git",
+    "directory": "packages/themes"
+  },
+  "homepage": "https://kouji-ui.onrender.com",
+  "bugs": {
+    "url": "https://github.com/kouji-dev/kouji-ui/issues"
+  },
+  "keywords": [
+    "css",
+    "theme",
+    "tokens",
+    "design-system",
+    "kouji"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "src/"
+  ],
+  "exports": {
+    ".": "./src/index.css",
+    "./base.css": "./src/base.css",
+    "./themes/dark.css": "./src/themes/dark.css"
+  },
+  "scripts": {
+    "build": "echo 'no build for css-only package'",
+    "test": "vitest run",
+    "lint": "echo 'no lint for css-only package'"
+  }
+}

package/src/base.css

@@ -0,0 +1,165 @@
+/* ─────────────────────────────────────────────────────────────
+   @kouji-ui/themes — base layer
+   Raw primitives. Themes pull values from here.
+   Components MUST NOT read base tokens directly.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.reset, kj.base, kj.shared, kj.component;
+
+@layer kj.reset {
+  /**
+   * Theme-scoped resets. Every `[data-theme]` block starts from these so
+   * nesting one theme inside another (e.g. the theme-generator preview
+   * stage rendered inside the docs `data-theme="kouji"` root) doesn't
+   * inherit brutalist defaults. Themes opt back in by declaring the var
+   * in `kj.shared` — kj.shared wins over kj.reset via layer ordering,
+   * regardless of selector specificity.
+   *
+   * Button shadow: defaults to `none`; kouji + bauhaus set their offset
+   * blocks in their own `[data-theme="X"]` declarations.
+   */
+  [data-theme] {
+    --kj-button-shadow:        none;
+    --kj-button-shadow-hover:  none;
+    --kj-button-shadow-active: none;
+  }
+}
+
+@layer kj.base {
+  :root {
+    /* ── color palette ── */
+    --kj-base-gray-50:  oklch(98% 0    0);
+    --kj-base-gray-100: oklch(95% 0    0);
+    --kj-base-gray-200: oklch(90% 0    0);
+    --kj-base-gray-300: oklch(82% 0    0);
+    --kj-base-gray-500: oklch(60% 0    0);
+    --kj-base-gray-700: oklch(35% 0    0);
+    --kj-base-gray-800: oklch(22% 0    0);
+    --kj-base-gray-900: oklch(15% 0    0);
+    --kj-base-gray-950: oklch(8%  0    0);
+
+    --kj-base-blue-400: oklch(70% 0.16 250);
+    --kj-base-blue-500: oklch(62% 0.19 250);
+    --kj-base-blue-600: oklch(55% 0.20 250);
+    --kj-base-blue-700: oklch(48% 0.20 250);
+
+    --kj-base-red-400:    oklch(72% 0.18  20);
+    --kj-base-red-500:    oklch(63% 0.22  20);
+    --kj-base-red-600:    oklch(55% 0.22  20);
+    --kj-base-green-500:  oklch(70% 0.18 145);
+    --kj-base-yellow-500: oklch(83% 0.16  90);
+    --kj-base-amber-500:  oklch(78% 0.17  60);
+    --kj-base-amber-600:  oklch(70% 0.18  55);
+
+    /* kouji brand lime — #b8f500 */
+    --kj-base-lime-500:   oklch(91% 0.21 124);
+
+    /* ── radii ── */
+    --kj-base-radius-0:    0px;
+    --kj-base-radius-1:    0.25rem;
+    --kj-base-radius-2:    0.5rem;
+    --kj-base-radius-3:    1rem;
+    --kj-base-radius-full: 9999px;
+
+    /* ── spacing — semantic scale (canonical names) ── */
+    --kj-base-space-0:   0;
+    --kj-base-space-xs:  0.25rem;   /*  4px */
+    --kj-base-space-sm:  0.5rem;    /*  8px */
+    --kj-base-space-md:  0.75rem;   /* 12px */
+    --kj-base-space-lg:  1rem;      /* 16px */
+    --kj-base-space-xl:  1.5rem;    /* 24px */
+    --kj-base-space-2xl: 2rem;      /* 32px */
+    --kj-base-space-3xl: 3rem;      /* 48px */
+    --kj-base-space-4xl: 4rem;      /* 64px */
+    --kj-base-space-5xl: 6rem;      /* 96px */
+    --kj-base-space-6xl: 8rem;      /* 128px */
+
+    /* ── type ── */
+    /* Base font families. Themes alias their --kj-font-{sans,mono,display}
+       to one of these. `font-sans` is the workhorse; `font-mono` is for
+       code/kbd/tabular numerics; `font-display` is the brand/headline
+       face (set per theme, defaults to sans). `font-serif` and
+       `font-block` are alternate display options used by editorial /
+       brutalist themes (paper/sakura/retro use serif; bauhaus uses block). */
+    --kj-base-font-sans:    'Space Grotesk', system-ui, -apple-system, sans-serif;
+    --kj-base-font-mono:    'JetBrains Mono', 'Fira Code', monospace;
+    --kj-base-font-display: 'Syne', system-ui, sans-serif;
+    --kj-base-font-serif:   'DM Serif Display', 'Times New Roman', Georgia, serif;
+    --kj-base-font-block:   'Archivo Black', system-ui, sans-serif;
+    --kj-base-text-xs:   0.75rem;
+    --kj-base-text-sm:   0.875rem;
+    --kj-base-text-base: 1rem;
+    --kj-base-text-lg:   1.125rem;
+    --kj-base-text-xl:   1.25rem;
+    --kj-base-text-2xl:  1.5rem;
+
+    /* ── Semantic defaults (inherited by every theme) ─────────────────
+       Themes only redeclare these when they need to differ. The contract
+       spec no longer requires per-theme declarations.
+
+       font-display defaults to sans — the safer, brand-neutral choice.
+       Themes that want a real display face (kouji/dark/retro/bauhaus/
+       nord → Syne; cyberpunk/terminal → mono) override. */
+    --kj-font-sans:    var(--kj-base-font-sans);
+    --kj-font-mono:    var(--kj-base-font-mono);
+    --kj-font-display: var(--kj-base-font-sans);
+
+    --kj-text-xs:   var(--kj-base-text-xs);
+    --kj-text-sm:   var(--kj-base-text-sm);
+    --kj-text-base: var(--kj-base-text-base);
+    --kj-text-lg:   var(--kj-base-text-lg);
+    --kj-text-xl:   var(--kj-base-text-xl);
+    --kj-text-2xl:  var(--kj-base-text-2xl);
+
+    --kj-space-xs:  var(--kj-base-space-xs);
+    --kj-space-sm:  var(--kj-base-space-sm);
+    --kj-space-md:  var(--kj-base-space-md);
+    --kj-space-lg:  var(--kj-base-space-lg);
+    --kj-space-xl:  var(--kj-base-space-xl);
+    --kj-space-2xl: var(--kj-base-space-2xl);
+    --kj-space-3xl: var(--kj-base-space-3xl);
+    --kj-space-4xl: var(--kj-base-space-4xl);
+    --kj-space-5xl: var(--kj-base-space-5xl);
+    --kj-space-6xl: var(--kj-base-space-6xl);
+
+    /* ── borders & motion ── */
+    --kj-base-border-1: 1px;
+    --kj-base-border-2: 2px;
+    --kj-base-transition-fast: 0.12s ease;
+    --kj-base-transition-base: 0.2s ease;
+
+    /* ── Display-tone primitives (per-theme overridable, sane defaults)
+       Themes only redeclare when their identity calls for it (e.g. retro
+       wants italic display; bauhaus wants extra-heavy weight; sakura
+       wants light + tighter tracking). Components read these from the
+       resolved `--kj-display-*` cascade, not directly from base. */
+    --kj-display-weight:   600;
+    --kj-display-italic:   normal;
+    --kj-letter-spacing:  -0.02em;
+    --kj-hover-translate: -2px;
+
+    /* Companion radius for box-level chrome (cards, panels, dialogs).
+       Distinct from --kj-radius-box so a theme can have small box radius
+       (`box`) and a larger hero radius (`box-lg`). Defaults to box. */
+    --kj-radius-box-lg:   var(--kj-base-radius-3);
+
+    /* ── Icon tokens ────────────────────────────────────────────
+       Map [kjIconColor] semantic tokens to the existing --kj-fg-*
+       palette so colored icons inherit theme tone. [kjIconSize]
+       resolves to em-relative steps so icons scale with surrounding
+       text by default. Themes can override any of these to pin a
+       brand-specific icon palette. */
+    --kj-color-icon-muted:   var(--kj-fg-muted);
+    --kj-color-icon-primary: var(--kj-fg-primary);
+    --kj-color-icon-success: var(--kj-fg-success);
+    --kj-color-icon-warning: var(--kj-fg-warning);
+    --kj-color-icon-danger:  var(--kj-fg-danger);
+    --kj-color-icon-info:    var(--kj-fg-info);
+
+    --kj-icon-size-xs: 0.75em;
+    --kj-icon-size-sm: 0.875em;
+    --kj-icon-size-md: 1em;
+    --kj-icon-size-lg: 1.25em;
+    --kj-icon-size-xl: 1.5em;
+  }
+}

package/src/index.css

@@ -0,0 +1,14 @@
+@import './base.css';
+@import './themes/dark.css';
+@import './themes/light.css';
+@import './themes/kouji.css';
+@import './themes/retro.css';
+@import './themes/cyberpunk.css';
+@import './themes/corporate.css';
+@import './themes/sakura.css';
+@import './themes/bauhaus.css';
+@import './themes/dune.css';
+@import './themes/mint.css';
+@import './themes/forest.css';
+@import './themes/nord.css';
+@import './themes/terminal.css';

package/src/themes/bauhaus.css

@@ -0,0 +1,88 @@
+/* ─────────────────────────────────────────────────────────────
+   bauhaus theme — light
+   Primary blocks of red, blue, and yellow on warm cream. Sharp
+   geometry, no rounding, thick borders. Hard offset shadows
+   instead of soft drop-shadows (neo-brutalist signature).
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="bauhaus"] {
+    /* ── shape — sharp, geometric ── */
+    --kj-radius-box:      var(--kj-base-radius-0);
+    --kj-radius-field:    var(--kj-base-radius-0);
+    --kj-radius-selector: var(--kj-base-radius-0);
+    --kj-border:          var(--kj-base-border-2);
+    --kj-depth:           0;
+    /* ── type — Archivo Black for display (constructivist block letters).
+       Heaviest weight, tight tracking, deeper hover lift for the
+       neo-brutalist offset-shadow motif. */
+    --kj-font-display:    var(--kj-base-font-block);
+    --kj-display-weight:  900;
+    --kj-letter-spacing: -0.04em;
+    --kj-hover-translate: -4px;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-fast);
+
+    --kj-bg-body:        #f5efe1;
+    --kj-bg-surface:     #fffaef;
+    --kj-bg-field:       #efe7d4;
+    --kj-bg-elevated:    #ffffff;
+    --kj-bg-overlay:     rgba(26, 26, 26, 0.55);
+    --kj-bg-inverse:     #1a1a1a;
+    --kj-bg-disabled:    #e8e0cc;
+
+    /* Iconic Bauhaus primaries, darkened only as needed to clear AA when
+       used as text-on-fill. The red is the iconic note; blue holds the
+       accent slot; yellow is reserved for warning (with black text). */
+    --kj-bg-primary:         #b81728;
+    --kj-bg-primary-subtle:  #fcd9dd;
+    --kj-bg-accent:          #1d3aff;
+    --kj-bg-accent-subtle:   #d8dcff;
+
+    --kj-bg-info:            #1d3aff;
+    --kj-bg-info-subtle:     #d8dcff;
+    --kj-bg-success:         #1a7a3d;
+    --kj-bg-success-subtle:  #cde6d4;
+    --kj-bg-warning:         #f4c20d;
+    --kj-bg-warning-subtle:  #fcefb8;
+    --kj-bg-danger:          #b81728;
+    --kj-bg-danger-subtle:   #fcd9dd;
+
+    --kj-fg-default:    #1a1a1a;
+    --kj-fg-muted:      #3a3a3a;
+    --kj-fg-subtle:     #5a5a5a;
+    --kj-fg-disabled:   #b8b0a0;
+
+    --kj-fg-on-primary:   #ffffff;
+    --kj-fg-on-accent:    #ffffff;
+    --kj-fg-on-info:      #ffffff;
+    --kj-fg-on-success:   #ffffff;
+    --kj-fg-on-warning:   #1a1a1a;
+    --kj-fg-on-danger:    #ffffff;
+    --kj-fg-on-inverse:   #f5efe1;
+
+    --kj-fg-primary:    #b81728;
+    --kj-fg-accent:     #1d3aff;
+    --kj-fg-info:       #1d3aff;
+    --kj-fg-success:    #156033;
+    --kj-fg-warning:    #6b4a00;
+    --kj-fg-danger:     #b81728;
+
+    --kj-border-default:   #1a1a1a;
+    --kj-border-muted:     #4a4a4a;
+    --kj-border-strong:    #1a1a1a;
+    --kj-border-focus:     #1d3aff;
+    --kj-border-disabled:  #b8b0a0;
+    --kj-border-primary:   #b81728;
+    --kj-border-danger:    #b81728;
+
+    /* Hard offset shadow — neo-brutalist signature. No blur. */
+    --kj-shadow-sm:     2px 2px 0 #1a1a1a;
+    --kj-shadow-md:     4px 4px 0 #1a1a1a;
+    --kj-shadow-lg:     8px 8px 0 #1a1a1a;
+    --kj-shadow-focus:  0 0 0 3px #1d3aff;
+
+    --kj-button-bg-hover: #8e0f1d;
+  }
+}

package/src/themes/corporate.css

@@ -0,0 +1,91 @@
+/* ─────────────────────────────────────────────────────────────
+   corporate theme — "Navy (banking)"
+   Institutional / banking feel: cool off-white surfaces, deep
+   navy as a single signature hue (primary === accent === info).
+   Subdued intent colors (forest/oxblood/dark amber) and sharp
+   small-radius geometry. Restrained shadows.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="corporate"] {
+    /* ── shape — sharp, institutional ── */
+    --kj-radius-box:      var(--kj-base-radius-1);
+    --kj-radius-field:    var(--kj-base-radius-1);
+    --kj-radius-selector: var(--kj-base-radius-1);
+    --kj-border:          var(--kj-base-border-1);
+    --kj-depth:           1;
+
+    /* ── type — sans display (banking ≠ decorative). Tighter tracking
+       than the default for confident corporate headlines. */
+    --kj-display-weight:  600;
+    --kj-letter-spacing: -0.035em;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-fast);
+
+    --kj-bg-body:        #f5f7fa;
+    --kj-bg-surface:     #ffffff;
+    --kj-bg-field:       #eef1f5;
+    --kj-bg-elevated:    #ffffff;
+    --kj-bg-overlay:     rgba(10, 37, 64, 0.55);
+    --kj-bg-inverse:     #0a2540;
+    --kj-bg-disabled:    #dde2ea;
+
+    /* Single signature navy. primary === accent === info on purpose —
+       this is the banking-mono identity. Intent colors stay subdued
+       (forest, oxblood, dark amber) so the navy reads as the only
+       confident hue in the palette. */
+    --kj-bg-primary:         #0a2540;
+    --kj-bg-primary-subtle:  #dce4f0;
+    --kj-bg-accent:          #0a2540;
+    --kj-bg-accent-subtle:   #dce4f0;
+
+    --kj-bg-info:            #0a2540;
+    --kj-bg-info-subtle:     #dce4f0;
+    --kj-bg-success:         #15543d;
+    --kj-bg-success-subtle:  #d9eae0;
+    --kj-bg-warning:         #a05a00;
+    --kj-bg-warning-subtle:  #f6e2c5;
+    --kj-bg-danger:          #8b1a1a;
+    --kj-bg-danger-subtle:   #f0d4d4;
+
+    --kj-fg-default:    #0a2540;
+    --kj-fg-muted:      #2d3e54;
+    --kj-fg-subtle:     #4a5568;
+    --kj-fg-disabled:   #aebbcb;
+
+    --kj-fg-on-primary:   #ffffff;
+    --kj-fg-on-accent:    #ffffff;
+    --kj-fg-on-info:      #ffffff;
+    --kj-fg-on-success:   #ffffff;
+    --kj-fg-on-warning:   #ffffff;
+    --kj-fg-on-danger:    #ffffff;
+    --kj-fg-on-inverse:   #ffffff;
+
+    /* fg-warning darkened so warning-tinted text passes AA on bg-body. */
+    --kj-fg-primary:    #0a2540;
+    --kj-fg-accent:     #0a2540;
+    --kj-fg-info:       #0a2540;
+    --kj-fg-success:    #15543d;
+    --kj-fg-warning:    #804600;
+    --kj-fg-danger:     #7a1414;
+
+    --kj-border-default:   #d8dee5;
+    --kj-border-muted:     #e6ebf0;
+    --kj-border-strong:    #b0bac5;
+    --kj-border-focus:     #0a2540;
+    --kj-border-disabled:  #dde2ea;
+    --kj-border-primary:   #0a2540;
+    --kj-border-danger:    #8b1a1a;
+
+    /* Restrained shadows — banking doesn't float. */
+    --kj-shadow-sm:     0 1px 2px rgba(10, 37, 64, 0.06);
+    --kj-shadow-md:     0 4px 10px rgba(10, 37, 64, 0.09);
+    --kj-shadow-lg:     0 12px 28px rgba(10, 37, 64, 0.14);
+    --kj-shadow-focus:  0 0 0 3px rgba(10, 37, 64, 0.30);
+
+    /* 8% darken on #0a2540 is invisible; lift to #15355a so the hover
+       reads against the deep navy primary. */
+    --kj-button-bg-hover: #15355a;
+  }
+}

package/src/themes/cyberpunk.css

@@ -0,0 +1,82 @@
+/* ─────────────────────────────────────────────────────────────
+   cyberpunk theme — shared layer
+   Hot yellow on near-black, magenta + cyan accents, hard edges.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="cyberpunk"] {
+    /* ── shape — sharp, no rounding ── */
+    --kj-radius-box:      var(--kj-base-radius-0);
+    --kj-radius-field:    var(--kj-base-radius-0);
+    --kj-radius-selector: var(--kj-base-radius-0);
+    --kj-border:          var(--kj-base-border-2);
+    --kj-depth:           0;
+
+    /* ── type — mono everywhere. Heavy weight + tight tracking gives
+       the headlines an aggressive techno-poster feel. */
+    --kj-font-sans:    var(--kj-base-font-mono);
+    --kj-font-display: var(--kj-base-font-mono);
+    --kj-display-weight: 800;
+    --kj-letter-spacing: -0.04em;
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-fast);
+
+    --kj-bg-body:        #ffee00;
+    --kj-bg-surface:     #f0d808;
+    --kj-bg-field:       #f8e604;
+    --kj-bg-elevated:    #fff84e;
+    --kj-bg-overlay:     rgba(10, 10, 10, 0.7);
+    --kj-bg-inverse:     #0a0a0a;
+    --kj-bg-disabled:    #d6c008;
+
+    --kj-bg-primary:         #ff007f;
+    --kj-bg-primary-subtle:  #ffd1e6;
+    --kj-bg-accent:          #4d00b8;
+    --kj-bg-accent-subtle:   #d8c4f2;
+
+    --kj-bg-info:            #00f0ff;
+    --kj-bg-info-subtle:     #c4f8fb;
+    --kj-bg-success:         #39ff14;
+    --kj-bg-success-subtle:  #d4f8ce;
+    --kj-bg-warning:         #ff8c00;
+    --kj-bg-warning-subtle:  #ffe1c4;
+    --kj-bg-danger:          #ff0040;
+    --kj-bg-danger-subtle:   #ffd2dc;
+
+    --kj-fg-default:    #0a0a0a;
+    --kj-fg-muted:      #1a1a1a;
+    --kj-fg-subtle:     #3a3a3a;
+    --kj-fg-disabled:   #8a8000;
+
+    /* Yellow on hot-pink/red fails AA (3.14:1); swap to near-black on
+       primary + danger. Accent stays yellow (8.71:1 on deep violet). */
+    --kj-fg-on-primary:   #0a0a0a;
+    --kj-fg-on-accent:    #ffee00;
+    --kj-fg-on-info:      #0a0a0a;
+    --kj-fg-on-success:   #0a0a0a;
+    --kj-fg-on-warning:   #0a0a0a;
+    --kj-fg-on-danger:    #0a0a0a;
+    --kj-fg-on-inverse:   #ffee00;
+
+    /* fg.primary must meet AA on yellow body — pink darkened from #ff007f */
+    --kj-fg-primary:    #8c003f;
+    --kj-fg-accent:     #2a0066;
+    --kj-fg-info:       #006670;
+    --kj-fg-success:    #1a7a08;
+    --kj-fg-warning:    #6b3a00;
+    --kj-fg-danger:     #8c0024;
+
+    --kj-border-default:   #0a0a0a;
+    --kj-border-muted:     #d6c008;
+    --kj-border-strong:    #0a0a0a;
+    --kj-border-focus:     #ff007f;
+    --kj-border-disabled:  #d6c008;
+    --kj-border-primary:   #ff007f;
+    --kj-border-danger:    #ff0040;
+
+    --kj-shadow-sm:     2px 2px 0 #0a0a0a;
+    --kj-shadow-md:     4px 4px 0 #0a0a0a;
+    --kj-shadow-lg:     8px 8px 0 #0a0a0a;
+    --kj-shadow-focus:  0 0 0 3px #ff007f;
+  }
+}

package/src/themes/dark.css

@@ -0,0 +1,91 @@
+/* ─────────────────────────────────────────────────────────────
+   dark theme — shared layer
+   Sets every shared-layer token from the contract.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="dark"] {
+    /* ── shape ── */
+    --kj-radius-box:      var(--kj-base-radius-2);
+    --kj-radius-field:    var(--kj-base-radius-1);
+    --kj-radius-selector: var(--kj-base-radius-1);
+    --kj-border:          var(--kj-base-border-1);
+    --kj-depth:           1;
+    /* ── type — crisp modern sans for headlines (Space Grotesk via
+       --kj-base-font-sans). Cobalt mono's identity is the palette, not
+       a decorative typeface. */
+    --kj-display-weight:  600;
+    --kj-letter-spacing: -0.04em;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-fast);
+
+    /* Pure neutral charcoal. The single cobalt accent below carries the
+       brand colour; everything else stays grey or semantic. */
+    --kj-bg-body:        #1a1a1a;
+    --kj-bg-surface:     #232323;
+    --kj-bg-field:       #232323;
+    --kj-bg-elevated:    #383838;
+    --kj-bg-overlay:     rgba(0, 0, 0, 0.7);
+    --kj-bg-inverse:     var(--kj-base-gray-50);
+    --kj-bg-disabled:    #232323;
+
+    /* "Cobalt mono" dark palette — single signature cobalt blue is reused
+       for primary/accent/info. Success/warning/danger remain semantically
+       distinct but at low chroma so the cobalt stays the hero. White text
+       passes AA 4.5:1 on every fill except warning, which carries dark text. */
+    --kj-bg-primary:         #2b62db;
+    --kj-bg-primary-subtle:  #16243d;
+    --kj-bg-accent:          #2b62db;
+    --kj-bg-accent-subtle:   #16243d;
+
+    --kj-bg-info:            #2b62db;
+    --kj-bg-info-subtle:     #16243d;
+    --kj-bg-success:         #1f7a4a;
+    --kj-bg-success-subtle:  #14271c;
+    --kj-bg-warning:         #d59930;
+    --kj-bg-warning-subtle:  #2a2114;
+    --kj-bg-danger:          #c83026;
+    --kj-bg-danger-subtle:   #2a1414;
+
+    --kj-fg-default:    var(--kj-base-gray-50);
+    --kj-fg-muted:      var(--kj-base-gray-300);
+    /* gray-500 (oklch 60%) renders as #808080 and only hits 4.40:1 on
+       bg-body; bump to oklch 65% (~#8e8e8e) so subtle labels pass AA. */
+    --kj-fg-subtle:     oklch(65% 0 0);
+    --kj-fg-disabled:   var(--kj-base-gray-700);
+
+    /* Synthwave palette uses #fff on deep saturated fills; only warning
+       (gold, lightest) keeps near-black text. */
+    --kj-fg-on-primary:   #ffffff;
+    --kj-fg-on-accent:    #ffffff;
+    --kj-fg-on-info:      #ffffff;
+    --kj-fg-on-success:   #ffffff;
+    --kj-fg-on-warning:   var(--kj-base-gray-950);
+    --kj-fg-on-danger:    #ffffff;
+    --kj-fg-on-inverse:   var(--kj-base-gray-950);
+
+    /* Class C — intent as text against body. Lifted versions of bg-{intent}
+       so they read on the dark body. Cobalt-as-text uses a lighter sky
+       shade for readability. */
+    --kj-fg-primary:    #6ea1ff;
+    --kj-fg-accent:     #6ea1ff;
+    --kj-fg-info:       #6ea1ff;
+    --kj-fg-success:    #5fbf8a;
+    --kj-fg-warning:    #e0b266;
+    --kj-fg-danger:     #ee7d6e;
+
+    --kj-border-default:   var(--kj-base-gray-700);
+    --kj-border-muted:     var(--kj-base-gray-800);
+    --kj-border-strong:    var(--kj-base-gray-500);
+    --kj-border-focus:     #2b62db;
+    --kj-border-disabled:  var(--kj-base-gray-700);
+    --kj-border-primary:   #2b62db;
+    --kj-border-danger:    #c83026;
+
+    --kj-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.4);
+    --kj-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.5);
+    --kj-shadow-lg:     0 16px 40px rgba(0, 0, 0, 0.6);
+    --kj-shadow-focus:  0 0 0 3px rgba(43, 98, 219, 0.5);
+  }
+}

package/src/themes/dune.css

@@ -0,0 +1,85 @@
+/* ─────────────────────────────────────────────────────────────
+   dune theme — light
+   Desert warmth: coral cream body, terracotta surfaces, deep
+   indigo ink, burnt-orange accent. Earthy, hand-printed feel.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="dune"] {
+    /* ── shape — soft, hand-made ── */
+    --kj-radius-box:      var(--kj-base-radius-2);
+    --kj-radius-field:    var(--kj-base-radius-1);
+    --kj-radius-selector: var(--kj-base-radius-1);
+    --kj-border:          var(--kj-base-border-1);
+    --kj-depth:           1;
+
+    /* ── type — light serif headlines on a sans body; warm hand-printed
+       feel without being overwrought. */
+    --kj-font-display:   var(--kj-base-font-serif);
+    --kj-display-weight: 400;
+    --kj-letter-spacing: -0.02em;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-base);
+
+    --kj-bg-body:        #f5e9d6;
+    --kj-bg-surface:     #ead4b3;
+    --kj-bg-field:       #f0dcc0;
+    --kj-bg-elevated:    #faf0db;
+    --kj-bg-overlay:     rgba(42, 26, 64, 0.55);
+    --kj-bg-inverse:     #2a1a40;
+    --kj-bg-disabled:    #ddc5a3;
+
+    --kj-bg-primary:         #3a2862;
+    --kj-bg-primary-subtle:  #d4ccdf;
+    --kj-bg-accent:          #a8401a;
+    --kj-bg-accent-subtle:   #f5d8c8;
+
+    --kj-bg-info:            #1e3a8a;
+    --kj-bg-info-subtle:     #d4dcec;
+    --kj-bg-success:         #4a6b2b;
+    --kj-bg-success-subtle:  #dde4c8;
+    --kj-bg-warning:         #b8841f;
+    --kj-bg-warning-subtle:  #f5dfb8;
+    --kj-bg-danger:          #8b1818;
+    --kj-bg-danger-subtle:   #f3d8d4;
+
+    --kj-fg-default:    #2a1a40;
+    --kj-fg-muted:      #4a3258;
+    --kj-fg-subtle:     #6a5278;
+    --kj-fg-disabled:   #b8a085;
+
+    --kj-fg-on-primary:   #f5e9d6;
+    --kj-fg-on-accent:    #ffffff;
+    --kj-fg-on-info:      #ffffff;
+    --kj-fg-on-success:   #ffffff;
+    --kj-fg-on-warning:   #2a1a40;
+    --kj-fg-on-danger:    #ffffff;
+    --kj-fg-on-inverse:   #f5e9d6;
+
+    --kj-fg-primary:    #3a2862;
+    --kj-fg-accent:     #8a3415;
+    --kj-fg-info:       #1e3a8a;
+    --kj-fg-success:    #4a6b2b;
+    --kj-fg-warning:    #6b4a0e;
+    --kj-fg-danger:     #8b1818;
+
+    --kj-border-default:   #d4c2a0;
+    --kj-border-muted:     #e0d2b8;
+    --kj-border-strong:    #ad9468;
+    --kj-border-focus:     #3a2862;
+    --kj-border-disabled:  #ddc5a3;
+    --kj-border-primary:   #3a2862;
+    --kj-border-danger:    #8b1818;
+
+    /* Warm earth-tinted shadows. */
+    --kj-shadow-sm:     0 1px 3px rgba(80, 50, 20, 0.12);
+    --kj-shadow-md:     0 6px 16px rgba(80, 50, 20, 0.18);
+    --kj-shadow-lg:     0 20px 48px rgba(80, 50, 20, 0.26);
+    --kj-shadow-focus:  0 0 0 3px rgba(58, 40, 98, 0.35);
+
+    /* Indigo deepens on hover; fg stays cream to match the desert tone
+       (already the default fg-on-primary, so no fg-hover needed). */
+    --kj-button-bg-hover: #281a48;
+  }
+}