@kouji-ui/themes 0.0.6

package/src/themes/forest.css

@@ -0,0 +1,87 @@
+/* ─────────────────────────────────────────────────────────────
+   forest theme — dark
+   Deep moss & pine surfaces, bark fields, mustard-gold primary,
+   sage-green accent. Warm parchment text. Woodland mood.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="forest"] {
+    /* ── shape — soft, organic ── */
+    --kj-radius-box:      var(--kj-base-radius-2);
+    --kj-radius-field:    var(--kj-base-radius-2);
+    --kj-radius-selector: var(--kj-base-radius-2);
+    --kj-border:          var(--kj-base-border-1);
+    --kj-depth:           1;
+
+    /* ── type — italic serif headlines on dark moss. Warm woodland
+       voice; sans body keeps the long-form text crisp on dark. */
+    --kj-font-display:   var(--kj-base-font-serif);
+    --kj-display-weight: 400;
+    --kj-display-italic: italic;
+    --kj-letter-spacing: -0.025em;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-base);
+
+    --kj-bg-body:        #1a2820;
+    --kj-bg-surface:     #243630;
+    --kj-bg-field:       #1f2e26;
+    --kj-bg-elevated:    #2d4035;
+    --kj-bg-overlay:     rgba(8, 18, 12, 0.65);
+    --kj-bg-inverse:     #f0ead8;
+    --kj-bg-disabled:    #2d3a32;
+
+    --kj-bg-primary:         #d4a017;
+    --kj-bg-primary-subtle:  #3d3520;
+    --kj-bg-accent:          #8fbc4a;
+    --kj-bg-accent-subtle:   #2a3a20;
+
+    --kj-bg-info:            #8ab8d4;
+    --kj-bg-info-subtle:     #1f2a35;
+    --kj-bg-success:         #6ba33e;
+    --kj-bg-success-subtle:  #1f3520;
+    --kj-bg-warning:         #e0a830;
+    --kj-bg-warning-subtle:  #3d3520;
+    --kj-bg-danger:          #d96550;
+    --kj-bg-danger-subtle:   #3d2520;
+
+    --kj-fg-default:    #e8e0c8;
+    --kj-fg-muted:      #c0b89a;
+    --kj-fg-subtle:     #9a9376;
+    --kj-fg-disabled:   #4a5548;
+
+    /* On a dark theme, intent fills are mid-bright; dark text passes
+       AA on every one (golds/greens/blues all sit at L > 0.30). */
+    --kj-fg-on-primary:   #1a1a1a;
+    --kj-fg-on-accent:    #1a1a1a;
+    --kj-fg-on-info:      #1a1a1a;
+    --kj-fg-on-success:   #1a1a1a;
+    --kj-fg-on-warning:   #1a1a1a;
+    --kj-fg-on-danger:    #1a1a1a;
+    --kj-fg-on-inverse:   #1a2820;
+
+    --kj-fg-primary:    #d4a017;
+    --kj-fg-accent:     #8fbc4a;
+    --kj-fg-info:       #8ab8d4;
+    --kj-fg-success:    #8fbc4a;
+    --kj-fg-warning:    #e0a830;
+    --kj-fg-danger:     #d96550;
+
+    --kj-border-default:   #3a4a40;
+    --kj-border-muted:     #2d3d33;
+    --kj-border-strong:    #5a6a60;
+    --kj-border-focus:     #d4a017;
+    --kj-border-disabled:  #2d3a32;
+    --kj-border-primary:   #d4a017;
+    --kj-border-danger:    #d96550;
+
+    --kj-shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.25);
+    --kj-shadow-md:     0 6px 18px rgba(0, 0, 0, 0.38);
+    --kj-shadow-lg:     0 20px 48px rgba(0, 0, 0, 0.50);
+    --kj-shadow-focus:  0 0 0 3px rgba(212, 160, 23, 0.35);
+
+    /* Mustard gold brightens on hover (8% black-mix would push it duller
+       on a dark theme — we want it more luminous against the moss bg). */
+    --kj-button-bg-hover: #e8b22a;
+  }
+}

package/src/themes/kouji.css

@@ -0,0 +1,128 @@
+/* ─────────────────────────────────────────────────────────────
+   kouji theme — shared layer
+   Brand identity: brutalist near-black + lime accent + JetBrains Mono.
+   Recreates the original kouji-ui docs visual identity.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="kouji"] {
+    /* ── shape — brutalist (no radius) ── */
+    --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-1);
+    --kj-depth:           0;
+
+    /* ── type — mono everywhere. Brutalist identity statement: even
+       headlines use JetBrains Mono, no decorative display face. ── */
+    --kj-font-sans:    var(--kj-base-font-mono);
+    --kj-font-display: var(--kj-base-font-mono);
+    --kj-display-weight:  700;
+    --kj-letter-spacing: -0.02em;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-fast);
+
+    /* Neutral surfaces (7) */
+    --kj-bg-body:        #0c0c0c;
+    --kj-bg-surface:     #141414;
+    /* Field sits LIGHTER than both `bg-body` and `bg-surface` so an input
+       reads as a distinct interactive slot whether it's on the page body
+       or nested inside a card. Going darker doesn't work here because
+       body is already near-black — fields would just merge into the page. */
+    --kj-bg-field:       #1f1f1f;
+    --kj-bg-elevated:    #1a1a1a;
+    --kj-bg-overlay:     rgba(0, 0, 0, 0.7);
+    --kj-bg-inverse:     #f0ede6;
+    --kj-bg-disabled:    #1a1a1a;
+
+    /* Intent surfaces — primary */
+    --kj-bg-primary:         #c4ff3d;
+    --kj-bg-primary-subtle:  #2a3300;
+
+    /* Intent surfaces — accent (kouji: same as primary) */
+    --kj-bg-accent:          #c4ff3d;
+    --kj-bg-accent-subtle:   #2a3300;
+
+    /* Intent surfaces — info */
+    --kj-bg-info:            var(--kj-base-blue-400);
+    --kj-bg-info-subtle:     #0a1a2a;
+
+    /* Intent surfaces — success */
+    --kj-bg-success:         var(--kj-base-lime-500);
+    --kj-bg-success-subtle:  #1a2a00;
+
+    /* Intent surfaces — warning */
+    --kj-bg-warning:         var(--kj-base-amber-500);
+    --kj-bg-warning-subtle:  #2a1a00;
+
+    /* Intent surfaces — danger. red-600 (l=55%) gives 5.44:1 vs white,
+       passing AA 4.5:1; red-500 (l=63%) only hit 3.91:1. */
+    --kj-bg-danger:          var(--kj-base-red-600);
+    --kj-bg-danger-subtle:   #2a0a0a;
+
+    /* FG Class A — independent */
+    --kj-fg-default:    #f0ede6;
+    --kj-fg-muted:      #b8b3a3;
+    --kj-fg-subtle:     #8a8578;
+    --kj-fg-disabled:   #5a5648;
+
+    /* FG Class B — paired */
+    --kj-fg-on-primary:   #0c0c0c;
+    --kj-fg-on-accent:    #0c0c0c;
+    --kj-fg-on-info:      var(--kj-base-gray-950);
+    --kj-fg-on-success:   var(--kj-base-gray-950);
+    --kj-fg-on-warning:   var(--kj-base-gray-950);
+    --kj-fg-on-danger:    var(--kj-base-gray-50);
+    --kj-fg-on-inverse:   #0c0c0c;
+
+    /* FG Class C — intent as text */
+    --kj-fg-primary:    #c4ff3d;
+    --kj-fg-accent:     #c4ff3d;
+    --kj-fg-info:       var(--kj-base-blue-400);
+    --kj-fg-success:    var(--kj-base-lime-500);
+    --kj-fg-warning:    var(--kj-base-amber-500);
+    --kj-fg-danger:     var(--kj-base-red-400);
+
+    /* Borders */
+    --kj-border-default:   #1a1a1a;
+    --kj-border-muted:     #141414;
+    --kj-border-strong:    #2a2a2a;
+    --kj-border-focus:     #c4ff3d;
+    --kj-border-disabled:  #1a1a1a;
+    --kj-border-primary:   #c4ff3d;
+    --kj-border-danger:    var(--kj-base-red-600);
+
+    /* Shadows — kouji is brutalist/flat (depth 0) */
+    --kj-shadow-sm:     0 0 0 1px #1a1a1a;
+    --kj-shadow-md:     0 0 0 1px #1a1a1a;
+    --kj-shadow-lg:     0 0 0 2px #1a1a1a;
+    --kj-shadow-focus:  0 0 0 2px #c4ff3d;
+  }
+}
+
+/* Component-layer overrides specific to the kouji theme.
+   Per the brutalist brand: filled buttons brighten + lift on hover instead
+   of the default darken behavior. Flip component tokens — never raw
+   `background` — so `ghost` / `outline` / `link` keep their own hover
+   surfaces (transparent / base-200) instead of the lime accent.
+
+   `default` and `destructive` are the only variants whose surface is
+   filled with brand color in this theme; brightening only those leaves
+   the secondary variants untouched.
+
+   Scoped via `@scope` so the override stops at the nearest nested
+   `[data-theme]` boundary. Without it, a preview swatch with
+   `data-theme="dark"` nested inside `<html data-theme="kouji">` would
+   still receive the lime hover because it remains a descendant of the
+   outer kouji theme. */
+@layer kj.component {
+  @scope ([data-theme="kouji"]) to ([data-theme]:not([data-theme="kouji"])) {
+    .kj-button[data-variant="default"]:hover,
+    .kj-button[data-variant="destructive"]:hover {
+      --kj-button-bg: #d4ff00;
+      --kj-button-fg: #0c0c0c;
+      transform: translateY(-2px);
+    }
+  }
+}

package/src/themes/light.css

@@ -0,0 +1,97 @@
+/* ─────────────────────────────────────────────────────────────
+   light theme — "Paper (ink)"
+   Editorial / print feel: pure white surfaces, warm paper field,
+   ink-black primary, dark goldenrod accent. Single signature
+   accent hue; intent colors stay restrained and AAA-friendly.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="light"] {
+    /* ── shape — soft, editorial ── */
+    --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 — editorial serif headlines (DM Serif Display) on a sans
+       body. The "paper / ink" identity calls for serif voice; light
+       weight + tight tracking match a print magazine. */
+    --kj-font-display:   var(--kj-base-font-serif);
+    --kj-display-weight: 400;
+    --kj-letter-spacing: -0.03em;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-fast);
+
+    /* Body is pure white; field gets a warm paper tint so inputs sit
+       slightly recessed against surface (which is also white). */
+    --kj-bg-body:        #ffffff;
+    --kj-bg-surface:     #ffffff;
+    --kj-bg-field:       #f6f6f4;
+    --kj-bg-elevated:    #ffffff;
+    --kj-bg-overlay:     rgba(26, 26, 26, 0.5);
+    --kj-bg-inverse:     #1a1a1a;
+    --kj-bg-disabled:    #ececea;
+
+    /* Ink primary + goldenrod accent — the theme's signature pair.
+       fg-on-accent stays ink (#1a1a1a on #b8860b → 5.14:1) instead of
+       white because white-on-goldenrod fails AA. */
+    --kj-bg-primary:         #1a1a1a;
+    --kj-bg-primary-subtle:  #f2f2f0;
+    /* Goldenrod brightened (#b8860b → #d6a300) to match the design's
+       paper-with-gilt-edge identity. fg-on-accent stays ink — black on
+       #d6a300 ≈ 7.6:1 AA AAA. */
+    --kj-bg-accent:          #d6a300;
+    --kj-bg-accent-subtle:   #fdf6e3;
+
+    --kj-bg-info:            #1e40af;
+    --kj-bg-info-subtle:     #e0e7ff;
+    --kj-bg-success:         #166534;
+    --kj-bg-success-subtle:  #d4ecdc;
+    --kj-bg-warning:         #d97706;
+    --kj-bg-warning-subtle:  #fef3c7;
+    --kj-bg-danger:          #991b1b;
+    --kj-bg-danger-subtle:   #fee2e2;
+
+    --kj-fg-default:    #1a1a1a;
+    --kj-fg-muted:      #4a4a4a;
+    --kj-fg-subtle:     #6a6a6a;
+    --kj-fg-disabled:   #b8b8b6;
+
+    --kj-fg-on-primary:   #ffffff;
+    --kj-fg-on-accent:    #1a1a1a;
+    --kj-fg-on-info:      #ffffff;
+    --kj-fg-on-success:   #ffffff;
+    --kj-fg-on-warning:   #1a1a1a;
+    --kj-fg-on-danger:    #ffffff;
+    --kj-fg-on-inverse:   #ffffff;
+
+    /* fg.accent is darker than bg.accent — white #b8860b only hits ~3:1
+       on body, so use #8b6508 (~5.3:1) for accent-colored text. */
+    --kj-fg-primary:    #1a1a1a;
+    --kj-fg-accent:     #8b6508;
+    --kj-fg-info:       #1e40af;
+    --kj-fg-success:    #166534;
+    --kj-fg-warning:    #92400e;
+    --kj-fg-danger:     #991b1b;
+
+    --kj-border-default:   #e8e6e0;
+    --kj-border-muted:     #f0eee8;
+    --kj-border-strong:    #c8c4b8;
+    --kj-border-focus:     #1a1a1a;
+    --kj-border-disabled:  #ececea;
+    --kj-border-primary:   #1a1a1a;
+    --kj-border-danger:    #991b1b;
+
+    /* Slightly heavier shadow profile so cards read as paper-on-paper. */
+    --kj-shadow-sm:     0 1px 2px rgba(26, 26, 26, 0.06);
+    --kj-shadow-md:     0 6px 16px rgba(26, 26, 26, 0.10);
+    --kj-shadow-lg:     0 20px 48px rgba(26, 26, 26, 0.16);
+    --kj-shadow-focus:  0 0 0 3px rgba(26, 26, 26, 0.25);
+
+    /* 8% darken against #1a1a1a is nearly imperceptible; lift toward
+       #3a3a3a so the hover reads as a deliberate state change. */
+    --kj-button-bg-hover: #3a3a3a;
+  }
+}

package/src/themes/mint.css

@@ -0,0 +1,99 @@
+/* ─────────────────────────────────────────────────────────────
+   mint theme — light
+   Fresh herbal cool greens. Mint-tinted cream body, crisp white
+   cards, deep spearmint primary (mono-hue: primary === accent ===
+   success). Calm spa / ceramic / fresh-herb feel.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="mint"] {
+    /* ── shape — soft, organic ── */
+    --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 — clean sans display, slightly tighter tracking for a
+       fresh ceramic-shop feel. */
+    --kj-display-weight:  600;
+    --kj-letter-spacing: -0.035em;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-base);
+
+    /* Surfaces — mint-tinted cream body, pure white cards. ~10% L
+       between body (#eef5ec ≈ 0.88) and surface (#ffffff = 1.00) so
+       cards visibly lift. Field is a deeper mint recess for inputs. */
+    --kj-bg-body:        #eef5ec;
+    --kj-bg-surface:     #ffffff;
+    --kj-bg-field:       #def0db;
+    --kj-bg-elevated:    #ffffff;
+    --kj-bg-overlay:     rgba(8, 40, 28, 0.55);
+    --kj-bg-inverse:     #0c2a1f;
+    --kj-bg-disabled:    #cee0cb;
+
+    /* Signature spearmint — used for primary/accent/success. Mono-hue
+       identity (cf. corporate Navy / dark Cobalt). Info gets a separate
+       restrained slate-blue so it doesn't collide with the spearmint
+       success state. */
+    --kj-bg-primary:         #047857;
+    --kj-bg-primary-subtle:  #d0ebde;
+    --kj-bg-accent:          #047857;
+    --kj-bg-accent-subtle:   #d0ebde;
+
+    --kj-bg-info:            #195e85;
+    --kj-bg-info-subtle:     #d4e3ed;
+    --kj-bg-success:         #047857;
+    --kj-bg-success-subtle:  #d0ebde;
+    --kj-bg-warning:         #a06400;
+    --kj-bg-warning-subtle:  #f5e2c0;
+    --kj-bg-danger:          #b8362c;
+    --kj-bg-danger-subtle:   #f3d4d0;
+
+    --kj-fg-default:    #0c2a1f;
+    --kj-fg-muted:      #284a3a;
+    --kj-fg-subtle:     #4a6a5a;
+    --kj-fg-disabled:   #a8b8ad;
+
+    /* Every intent fill is dark enough that white text passes AA
+       (≥ 4.5:1). Spearmint #047857 ≈ 5.5:1 with white. */
+    --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:   #eef5ec;
+
+    /* fg-* tuned so each intent-as-text clears AA on both the mint body
+       (~0.88 L) AND the docs-app navbar's primary-subtle-derived bg
+       (~0.77 L). `#047857` only hits 4.19:1 on the navbar; deepening to
+       `#035a42` reaches ~5.47:1 there. Same color is used for the
+       hover-deep button bg below — coincidence is intentional. */
+    --kj-fg-primary:    #035a42;
+    --kj-fg-accent:     #035a42;
+    --kj-fg-info:       #195e85;
+    --kj-fg-success:    #035a42;
+    --kj-fg-warning:    #6b4200;
+    --kj-fg-danger:     #8b2a22;
+
+    --kj-border-default:   #c8dec5;
+    --kj-border-muted:     #def0db;
+    --kj-border-strong:    #94b099;
+    --kj-border-focus:     #047857;
+    --kj-border-disabled:  #cee0cb;
+    --kj-border-primary:   #047857;
+    --kj-border-danger:    #b8362c;
+
+    /* Cool mint-tinted shadows — spa softness, not generic gray. */
+    --kj-shadow-sm:     0 1px 3px rgba(8, 60, 40, 0.10);
+    --kj-shadow-md:     0 6px 16px rgba(8, 60, 40, 0.15);
+    --kj-shadow-lg:     0 20px 48px rgba(8, 60, 40, 0.22);
+    --kj-shadow-focus:  0 0 0 3px rgba(4, 120, 87, 0.30);
+
+    /* Deepen the spearmint on hover (~10% darker) so the interaction
+       reads on the bright body. */
+    --kj-button-bg-hover: #035a42;
+  }
+}

package/src/themes/nord.css

@@ -0,0 +1,85 @@
+/* ─────────────────────────────────────────────────────────────
+   nord theme — dark
+   Arctic Ice Studios palette: polar-night surfaces, frost teal
+   primary, aurora accents (green/yellow/red). Cool, desaturated.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="nord"] {
+    /* ── 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 — clean arctic sans (Space Grotesk via base sans). Tighter
+       tracking + medium weight for cool calm headlines. */
+    --kj-display-weight:  600;
+    --kj-letter-spacing: -0.035em;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-fast);
+
+    /* Polar Night surfaces: nord0 → nord3 */
+    --kj-bg-body:        #2e3440;
+    --kj-bg-surface:     #3b4252;
+    --kj-bg-field:       #434c5e;
+    --kj-bg-elevated:    #4c566a;
+    --kj-bg-overlay:     rgba(20, 24, 32, 0.55);
+    --kj-bg-inverse:     #eceff4;
+    --kj-bg-disabled:    #3b4252;
+
+    --kj-bg-primary:         #88c0d0;
+    --kj-bg-primary-subtle:  #3a4658;
+    --kj-bg-accent:          #81a1c1;
+    --kj-bg-accent-subtle:   #3a4555;
+
+    --kj-bg-info:            #88c0d0;
+    --kj-bg-info-subtle:     #3a4658;
+    --kj-bg-success:         #a3be8c;
+    --kj-bg-success-subtle:  #3a4540;
+    --kj-bg-warning:         #ebcb8b;
+    --kj-bg-warning-subtle:  #4a4535;
+    --kj-bg-danger:          #d8a0a5;
+    --kj-bg-danger-subtle:   #4a3838;
+
+    /* Snow Storm scaled: default = nord6, muted = nord4, subtle = nord4
+       darkened. */
+    --kj-fg-default:    #eceff4;
+    --kj-fg-muted:      #d8dee9;
+    --kj-fg-subtle:     #b8c0cd;
+    --kj-fg-disabled:   #4c566a;
+
+    --kj-fg-on-primary:   #1a1a1a;
+    --kj-fg-on-accent:    #1a1a1a;
+    --kj-fg-on-info:      #1a1a1a;
+    --kj-fg-on-success:   #1a1a1a;
+    --kj-fg-on-warning:   #1a1a1a;
+    --kj-fg-on-danger:    #1a1a1a;
+    --kj-fg-on-inverse:   #2e3440;
+
+    --kj-fg-primary:    #88c0d0;
+    --kj-fg-accent:     #81a1c1;
+    --kj-fg-info:       #88c0d0;
+    --kj-fg-success:    #a3be8c;
+    --kj-fg-warning:    #ebcb8b;
+    --kj-fg-danger:     #d8a0a5;
+
+    --kj-border-default:   #434c5e;
+    --kj-border-muted:     #3b4252;
+    --kj-border-strong:    #4c566a;
+    --kj-border-focus:     #88c0d0;
+    --kj-border-disabled:  #3b4252;
+    --kj-border-primary:   #88c0d0;
+    --kj-border-danger:    #d8a0a5;
+
+    --kj-shadow-sm:     0 1px 3px rgba(20, 24, 32, 0.30);
+    --kj-shadow-md:     0 6px 18px rgba(20, 24, 32, 0.42);
+    --kj-shadow-lg:     0 20px 48px rgba(20, 24, 32, 0.55);
+    --kj-shadow-focus:  0 0 0 3px rgba(136, 192, 208, 0.40);
+
+    /* Brighten frost teal on hover (dark themes need luminosity lift,
+       not the default 8% black-mix darken). */
+    --kj-button-bg-hover: #a3d4e2;
+  }
+}

package/src/themes/retro.css

@@ -0,0 +1,89 @@
+/* ─────────────────────────────────────────────────────────────
+   retro theme — shared layer
+   Warm cream surfaces, terracotta accents, vintage paper feel.
+   Inspired by sun-faded mid-century print design.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="retro"] {
+    /* ── shape — soft rounded, vintage cards ── */
+    --kj-radius-box:      var(--kj-base-radius-2);
+    --kj-radius-field:    var(--kj-base-radius-2);
+    --kj-radius-selector: var(--kj-base-radius-2);
+    --kj-border:          var(--kj-base-border-1);
+    --kj-depth:           1;
+    /* ── type — italic serif headlines (mid-century print feel). Light
+       weight, italic. Sans body for legibility on warm cream. */
+    --kj-font-display:   var(--kj-base-font-serif);
+    --kj-display-weight: 400;
+    --kj-display-italic: italic;
+    --kj-letter-spacing: -0.02em;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-base);
+
+    --kj-bg-body:        #ede5d0;
+    --kj-bg-surface:     #e4d8b4;
+    --kj-bg-field:       #f4ecd8;
+    --kj-bg-elevated:    #fff8e4;
+    --kj-bg-overlay:     rgba(40, 36, 37, 0.5);
+    --kj-bg-inverse:     #282425;
+    --kj-bg-disabled:    #d6c89a;
+
+    --kj-bg-primary:         #ef9995;
+    --kj-bg-primary-subtle:  #fce3df;
+    --kj-bg-accent:          #7a9eb1;
+    --kj-bg-accent-subtle:   #d6e2ea;
+
+    --kj-bg-info:            #7a9eb1;
+    --kj-bg-info-subtle:     #d6e2ea;
+    --kj-bg-success:         #91b859;
+    --kj-bg-success-subtle:  #dfecc8;
+    --kj-bg-warning:         #e9b872;
+    --kj-bg-warning-subtle:  #faedd5;
+    --kj-bg-danger:          #c4625d;
+    --kj-bg-danger-subtle:   #f3d4d2;
+
+    --kj-fg-default:    #282425;
+    --kj-fg-muted:      #4a3530;
+    /* Subtle pulled darker so h3 / muted labels clear AA on bg-body. */
+    --kj-fg-subtle:     #6a4f43;
+    --kj-fg-disabled:   #bdb098;
+
+    --kj-fg-on-primary:   #282425;
+    --kj-fg-on-accent:    #282425;
+    --kj-fg-on-info:      #282425;
+    --kj-fg-on-success:   #282425;
+    --kj-fg-on-warning:   #282425;
+    --kj-fg-on-danger:    #ede5d0;
+    --kj-fg-on-inverse:   #ede5d0;
+
+    /* fg.primary must meet AA on body — terracotta darkened from #ef9995 */
+    --kj-fg-primary:    #8a3a36;
+    --kj-fg-accent:     #3d5a6b;
+    --kj-fg-info:       #3d5a6b;
+    --kj-fg-success:    #4a6b2b;
+    --kj-fg-warning:    #8a5a1f;
+    --kj-fg-danger:     #8a2f2a;
+
+    --kj-border-default:   #d6c89a;
+    --kj-border-muted:     #e4d8b4;
+    --kj-border-strong:    #b8a578;
+    --kj-border-focus:     #7a9eb1;
+    --kj-border-disabled:  #d6c89a;
+    --kj-border-primary:   #ef9995;
+    --kj-border-danger:    #c4625d;
+
+    --kj-shadow-sm:     0 1px 3px rgba(93, 64, 55, 0.1);
+    --kj-shadow-md:     0 4px 12px rgba(93, 64, 55, 0.18);
+    --kj-shadow-lg:     0 16px 40px rgba(93, 64, 55, 0.25);
+    --kj-shadow-focus:  0 0 0 3px rgba(122, 158, 177, 0.45);
+
+    /* Retro's `bg-primary` is pale salmon (#ef9995). The 8% darken in
+       button.css is nearly imperceptible against it; lift to a deeper
+       terracotta so the hover reads on the sun-faded palette. Cream fg
+       reads better than the default ink on the deepened terracotta. */
+    --kj-button-bg-hover: #d05c57;
+    --kj-button-fg-hover: #fff5e4;
+  }
+}

package/src/themes/sakura.css

@@ -0,0 +1,85 @@
+/* ─────────────────────────────────────────────────────────────
+   sakura theme — light
+   Soft pink dawn, washi-paper surfaces, deep aubergine text,
+   cherry-magenta primary + plum accent. Cherry-blossom mood.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="sakura"] {
+    /* ── shape — soft, organic ── */
+    --kj-radius-box:      var(--kj-base-radius-3);
+    --kj-radius-field:    var(--kj-base-radius-2);
+    --kj-radius-selector: var(--kj-base-radius-2);
+    --kj-border:          var(--kj-base-border-1);
+    --kj-depth:           1;
+
+    /* ── type — light italic serif (DM Serif Display italic). The soft
+       feminine voice of the palette calls for elegance, not weight. */
+    --kj-font-display:   var(--kj-base-font-serif);
+    --kj-display-weight: 400;
+    --kj-display-italic: italic;
+    --kj-letter-spacing: -0.025em;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-base);
+
+    --kj-bg-body:        #fef5f3;
+    --kj-bg-surface:     #ffffff;
+    --kj-bg-field:       #fbe9e6;
+    --kj-bg-elevated:    #ffffff;
+    --kj-bg-overlay:     rgba(45, 24, 48, 0.45);
+    --kj-bg-inverse:     #2d1830;
+    --kj-bg-disabled:    #f0d9d4;
+
+    --kj-bg-primary:         #c2185b;
+    --kj-bg-primary-subtle:  #fce4ec;
+    --kj-bg-accent:          #6a1b4f;
+    --kj-bg-accent-subtle:   #f0e0ee;
+
+    --kj-bg-info:            #5b4880;
+    --kj-bg-info-subtle:     #ece6f5;
+    --kj-bg-success:         #2e7d52;
+    --kj-bg-success-subtle:  #d4ecdc;
+    --kj-bg-warning:         #d48838;
+    --kj-bg-warning-subtle:  #fce8d0;
+    --kj-bg-danger:          #9b1b3a;
+    --kj-bg-danger-subtle:   #f9d8e0;
+
+    --kj-fg-default:    #2d1830;
+    --kj-fg-muted:      #4d3050;
+    --kj-fg-subtle:     #6b4f70;
+    --kj-fg-disabled:   #c4a8c8;
+
+    --kj-fg-on-primary:   #ffffff;
+    --kj-fg-on-accent:    #ffffff;
+    --kj-fg-on-info:      #ffffff;
+    --kj-fg-on-success:   #ffffff;
+    --kj-fg-on-warning:   #2d1830;
+    --kj-fg-on-danger:    #ffffff;
+    --kj-fg-on-inverse:   #fef5f3;
+
+    --kj-fg-primary:    #a01548;
+    --kj-fg-accent:     #6a1b4f;
+    --kj-fg-info:       #5b4880;
+    --kj-fg-success:    #2e7d52;
+    --kj-fg-warning:    #8a5a1f;
+    --kj-fg-danger:     #9b1b3a;
+
+    --kj-border-default:   #f0d9d4;
+    --kj-border-muted:     #f7e6e3;
+    --kj-border-strong:    #d4a4a0;
+    --kj-border-focus:     #c2185b;
+    --kj-border-disabled:  #f0d9d4;
+    --kj-border-primary:   #c2185b;
+    --kj-border-danger:    #9b1b3a;
+
+    --kj-shadow-sm:     0 1px 3px rgba(194, 24, 91, 0.08);
+    --kj-shadow-md:     0 6px 16px rgba(194, 24, 91, 0.12);
+    --kj-shadow-lg:     0 20px 48px rgba(194, 24, 91, 0.18);
+    --kj-shadow-focus:  0 0 0 3px rgba(194, 24, 91, 0.30);
+
+    /* Lift the cherry magenta to a deeper rose so the hover reads
+       against the warm body. */
+    --kj-button-bg-hover: #a01548;
+  }
+}