@kouji-ui/themes 0.0.6 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kouji-ui/themes",
-  "version": "0.0.6",
+  "version": "0.1.1",
   "description": "Theme tokens and theme stylesheets for kouji-ui — pure CSS, swappable at runtime via data-theme.",
   "license": "MIT",
   "repository": {
@@ -32,7 +32,8 @@
   "exports": {
     ".": "./src/index.css",
     "./base.css": "./src/base.css",
-    "./themes/dark.css": "./src/themes/dark.css"
+    "./density.css": "./src/density.css",
+    "./themes/*.css": "./src/themes/*.css"
   },
   "scripts": {
     "build": "echo 'no build for css-only package'",

package/src/base.css

@@ -128,6 +128,26 @@
     --kj-base-transition-fast: 0.12s ease;
     --kj-base-transition-base: 0.2s ease;
 
+    /* Motion primitives — durations + easings for the motion preset
+       library (@kouji-ui/core motion.css). Semantic --kj-motion-* tokens
+       below resolve from these; motion.css also carries inline fallbacks
+       so it works when themes aren't loaded. Themes may retune any of
+       these for a distinct motion identity. */
+    --kj-base-duration-fast: 150ms;
+    --kj-base-duration-base: 250ms;
+    --kj-base-duration-slow: 400ms;
+    --kj-base-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+    --kj-base-ease-in:         cubic-bezier(0.7, 0, 0.84, 0);
+    --kj-base-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    --kj-motion-duration-sm: var(--kj-base-duration-fast);
+    --kj-motion-duration-md: var(--kj-base-duration-base);
+    --kj-motion-duration-lg: var(--kj-base-duration-slow);
+    --kj-motion-ease:        var(--kj-base-ease-emphasized);
+    --kj-motion-ease-in:     var(--kj-base-ease-in);
+    --kj-motion-ease-spring: var(--kj-base-ease-spring);
+    --kj-motion-distance:    0.5rem;
+
     /* ── 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

package/src/density.css

@@ -0,0 +1,135 @@
+/* ─────────────────────────────────────────────────────────────
+   @kouji-ui/themes — density layer
+   App-wide density. Before this, density existed only on the table
+   (--kj-table-row-height); everything else was fixed.
+
+   Mechanism: two inherited scalars, not per-component selectors.
+   Components use ViewEncapsulation.None, so a [data-density] selector
+   WOULD reach them — but it would need one block per component per level,
+   and the ratio would live in dozens of places. Two inherited numbers put
+   the ratio in one place and, because custom properties inherit, a dense
+   region nests correctly inside a comfortable app with no extra rules.
+
+   Every derived value is round()ed to a whole pixel. Fractional heights
+   blur hairlines and desync rows from any JS/SVG surface that mirrors them.
+
+   Layer note: these rules join the EXISTING kj.base layer. Do not add a
+   kj.density sublayer — that would mean editing the @layer statement in
+   base.css, which desyncs consumers who re-declare the layer order.
+   Sitting in kj.base keeps themes (kj.shared) and consumer CSS above it.
+   ──────────────────────────────────────────────────────────── */
+
+/* Registered so JS can read a resolved px value. An UNregistered custom
+   property has no computed value: getComputedStyle() returns the raw token
+   stream ("round(calc(...))"), and parseFloat gives NaN.
+
+   Only the scalars and the JS-read ladders are registered. The existing
+   --kj-space-* / --kj-text-* deliberately are NOT: registration makes
+   invalid-at-computed-value-time *apply*, which would silently discard a
+   legitimate consumer override and is a breaking change. */
+@property --kj-density    { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --kj-type-scale { syntax: "<number>"; inherits: true; initial-value: 1; }
+
+@property --kj-ctl-h-xs { syntax: "<length>"; inherits: true; initial-value: 28px; }
+@property --kj-ctl-h-sm { syntax: "<length>"; inherits: true; initial-value: 32px; }
+@property --kj-ctl-h-md { syntax: "<length>"; inherits: true; initial-value: 36px; }
+@property --kj-ctl-h-lg { syntax: "<length>"; inherits: true; initial-value: 44px; }
+@property --kj-ctl-h-xl { syntax: "<length>"; inherits: true; initial-value: 52px; }
+@property --kj-row-h    { syntax: "<length>"; inherits: true; initial-value: 36px; }
+
+@layer kj.base {
+  :root {
+    --kj-density: 1;
+    --kj-type-scale: 1;
+
+    /* ── numeric spacing ladder ──
+       The t-shirt names below re-point at these. Values are kept in rem so
+       spacing still tracks the root font size, exactly as before. At
+       density 1 every t-shirt token resolves to its previous value to the
+       byte — this is a re-pointing, not a re-scaling. */
+    --kj-space-1:  round(calc(0.125rem  * var(--kj-density)), 1px); /*  2px */
+    --kj-space-2:  round(calc(0.25rem   * var(--kj-density)), 1px); /*  4px */
+    --kj-space-3:  round(calc(0.375rem  * var(--kj-density)), 1px); /*  6px */
+    --kj-space-4:  round(calc(0.5rem    * var(--kj-density)), 1px); /*  8px */
+    --kj-space-5:  round(calc(0.625rem  * var(--kj-density)), 1px); /* 10px */
+    --kj-space-6:  round(calc(0.75rem   * var(--kj-density)), 1px); /* 12px */
+    --kj-space-7:  round(calc(1rem      * var(--kj-density)), 1px); /* 16px */
+    --kj-space-8:  round(calc(1.25rem   * var(--kj-density)), 1px); /* 20px */
+    --kj-space-9:  round(calc(1.5rem    * var(--kj-density)), 1px); /* 24px */
+    --kj-space-10: round(calc(1.75rem   * var(--kj-density)), 1px); /* 28px */
+    --kj-space-11: round(calc(2rem      * var(--kj-density)), 1px); /* 32px */
+
+    /* t-shirt names stay the documented API; numeric is the dense-UI
+       escape hatch. These land on the same values they always had. */
+    --kj-space-xs:  var(--kj-space-2);   /*  4px */
+    --kj-space-sm:  var(--kj-space-4);   /*  8px */
+    --kj-space-md:  var(--kj-space-6);   /* 12px */
+    --kj-space-lg:  var(--kj-space-7);   /* 16px */
+    --kj-space-xl:  var(--kj-space-9);   /* 24px */
+    --kj-space-2xl: var(--kj-space-11);  /* 32px */
+    --kj-space-3xl: round(calc(3rem * var(--kj-density)), 1px);  /*  48px */
+    --kj-space-4xl: round(calc(4rem * var(--kj-density)), 1px);  /*  64px */
+    --kj-space-5xl: round(calc(6rem * var(--kj-density)), 1px);  /*  96px */
+    --kj-space-6xl: round(calc(8rem * var(--kj-density)), 1px);  /* 128px */
+
+    /* ── type ──
+       xs..2xl keep their existing values at scale 1. 3xs/2xs and 3xl/4xl/
+       display are ADDITIVE: dense UIs need badge- and meta-sized steps that
+       a 6-step scale cannot express, and new names mean no reflow for
+       existing consumers. Type is snapped to a half pixel, not a whole one —
+       fonts render fine on halves and it keeps the ramp from collapsing. */
+    --kj-text-3xs:     round(calc(0.625rem  * var(--kj-type-scale)), 0.5px); /* 10px */
+    --kj-text-2xs:     round(calc(0.6875rem * var(--kj-type-scale)), 0.5px); /* 11px */
+    --kj-text-xs:      round(calc(0.75rem   * var(--kj-type-scale)), 0.5px); /* 12px */
+    --kj-text-sm:      round(calc(0.875rem  * var(--kj-type-scale)), 0.5px); /* 14px */
+    --kj-text-base:    round(calc(1rem      * var(--kj-type-scale)), 0.5px); /* 16px */
+    --kj-text-lg:      round(calc(1.125rem  * var(--kj-type-scale)), 0.5px); /* 18px */
+    --kj-text-xl:      round(calc(1.25rem   * var(--kj-type-scale)), 0.5px); /* 20px */
+    --kj-text-2xl:     round(calc(1.5rem    * var(--kj-type-scale)), 0.5px); /* 24px */
+    --kj-text-3xl:     round(calc(2rem      * var(--kj-type-scale)), 0.5px); /* 32px */
+    --kj-text-4xl:     round(calc(2.5rem    * var(--kj-type-scale)), 0.5px); /* 40px */
+    --kj-text-display: round(calc(3rem      * var(--kj-type-scale)), 0.5px); /* 48px */
+
+    /* Code surfaces (Monaco, terminals) take metrics as JS numbers — they
+       cannot inherit font-size — so they read these two directly. */
+    --kj-text-code:    round(calc(0.8125rem * var(--kj-type-scale)), 0.5px); /* 13px */
+    --kj-leading-code: round(calc(1.125rem  * var(--kj-type-scale)), 1px);   /* 18px */
+
+    /* ── control heights ──
+       sm/md/lg stay each component's semantic API; this shared ladder is
+       what those variants resolve to, so density scales every variant
+       uniformly instead of each component hardcoding a rem value. Values
+       match the current button heights exactly at density 1. */
+    --kj-ctl-h-xs: round(calc(1.75rem * var(--kj-density)), 1px); /* 28px */
+    --kj-ctl-h-sm: round(calc(2rem    * var(--kj-density)), 1px); /* 32px */
+    --kj-ctl-h-md: round(calc(2.25rem * var(--kj-density)), 1px); /* 36px */
+    --kj-ctl-h-lg: round(calc(2.75rem * var(--kj-density)), 1px); /* 44px */
+    --kj-ctl-h-xl: round(calc(3.25rem * var(--kj-density)), 1px); /* 52px */
+
+    /* Row height for list/table/tree surfaces. */
+    --kj-row-h: var(--kj-ctl-h-md);
+  }
+
+  /* ── presets ──
+     Ratios validated in a dense IDE: type breathes more gently than boxes,
+     because an 0.85 squeeze that flatters padding is punishing on 12px text.
+
+     "standard" is declared as an explicit no-op so KjTableDensity's existing
+     three values all remain valid — renaming or dropping one would be an API
+     break. "comfy" is accepted as an alias; "comfortable" stays canonical. */
+  [data-density="compact"] {
+    --kj-density: 0.85;
+    --kj-type-scale: 0.875;
+  }
+
+  [data-density="standard"] {
+    --kj-density: 1;
+    --kj-type-scale: 1;
+  }
+
+  [data-density="comfortable"],
+  [data-density="comfy"] {
+    --kj-density: 1.18;
+    --kj-type-scale: 1.125;
+  }
+}

package/src/density.spec.ts

@@ -0,0 +1,144 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import postcss from 'postcss';
+import { describe, expect, test } from 'vitest';
+
+const css = readFileSync(resolve(import.meta.dirname, 'density.css'), 'utf-8');
+const baseCss = readFileSync(resolve(import.meta.dirname, 'base.css'), 'utf-8');
+const indexCss = readFileSync(resolve(import.meta.dirname, 'index.css'), 'utf-8');
+
+/** Custom properties registered via `@property` in density.css. */
+function registeredProps(text: string): Set<string> {
+  const out = new Set<string>();
+  postcss.parse(text).walkAtRules('property', rule => out.add(rule.params.trim()));
+  return out;
+}
+
+/** Declarations inside a rule whose selector matches `selector`. */
+function declsFor(text: string, selector: string): Map<string, string> {
+  const out = new Map<string, string>();
+  postcss.parse(text).walkRules(rule => {
+    if (!rule.selector.includes(selector)) return;
+    rule.walkDecls(decl => out.set(decl.prop, decl.value));
+  });
+  return out;
+}
+
+describe('density layer', () => {
+  test('is exported from the package entry', () => {
+    expect(indexCss).toContain("@import './density.css';");
+  });
+
+  test('joins the existing kj.base layer without redeclaring layer order', () => {
+    // Editing the `@layer kj.reset, kj.base, kj.shared, kj.component` statement
+    // desyncs consumers who re-declare it, so density.css must not carry one.
+    expect(css).toMatch(/@layer\s+kj\.base\s*\{/);
+    expect(css).not.toMatch(/@layer\s+[\w.]+\s*,/);
+    expect(baseCss).toMatch(/@layer kj\.reset, kj\.base, kj\.shared, kj\.component;/);
+  });
+
+  describe('@property registration', () => {
+    const registered = registeredProps(css);
+
+    test('registers the two scalars', () => {
+      expect(registered).toContain('--kj-density');
+      expect(registered).toContain('--kj-type-scale');
+    });
+
+    test('registers the height ladder that JS reads', () => {
+      for (const t of ['xs', 'sm', 'md', 'lg', 'xl']) {
+        expect(registered).toContain(`--kj-ctl-h-${t}`);
+      }
+      expect(registered).toContain('--kj-row-h');
+    });
+
+    test('does NOT register the pre-existing space/text tokens', () => {
+      // Registering them would make invalid-at-computed-value-time APPLY,
+      // silently discarding a legitimate consumer override such as
+      // `--kj-space-md: 0`. That is a breaking change, so it must not happen.
+      for (const prop of registered) {
+        expect(prop, `${prop} must not be registered`).not.toMatch(
+          /^--kj-(space|text)-/,
+        );
+      }
+    });
+  });
+
+  describe('scale', () => {
+    const root = declsFor(css, ':root');
+
+    test('every t-shirt spacing name re-points at the numeric ladder', () => {
+      const expected: Record<string, string> = {
+        '--kj-space-xs': 'var(--kj-space-2)',
+        '--kj-space-sm': 'var(--kj-space-4)',
+        '--kj-space-md': 'var(--kj-space-6)',
+        '--kj-space-lg': 'var(--kj-space-7)',
+        '--kj-space-xl': 'var(--kj-space-9)',
+        '--kj-space-2xl': 'var(--kj-space-11)',
+      };
+      for (const [name, target] of Object.entries(expected)) {
+        expect(root.get(name), `${name} must re-point at ${target}`).toBe(target);
+      }
+    });
+
+    test('the numeric ladder and heights derive from --kj-density', () => {
+      for (const n of [1, 4, 7, 11]) {
+        expect(root.get(`--kj-space-${n}`)).toMatch(
+          /round\(calc\(.*var\(--kj-density\).*\),\s*1px\)/,
+        );
+      }
+      for (const t of ['xs', 'sm', 'md', 'lg', 'xl']) {
+        expect(root.get(`--kj-ctl-h-${t}`)).toMatch(
+          /round\(calc\(.*var\(--kj-density\).*\),\s*1px\)/,
+        );
+      }
+    });
+
+    test('the type ramp derives from --kj-type-scale, snapped to a half px', () => {
+      for (const t of ['3xs', '2xs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl']) {
+        expect(root.get(`--kj-text-${t}`)).toMatch(
+          /round\(calc\(.*var\(--kj-type-scale\).*\),\s*0\.5px\)/,
+        );
+      }
+    });
+
+    test('exposes code metrics for editor and terminal surfaces', () => {
+      expect(root.get('--kj-text-code')).toBeDefined();
+      expect(root.get('--kj-leading-code')).toBeDefined();
+    });
+  });
+
+  describe('presets', () => {
+    test('all three KjTableDensity values remain valid selectors', () => {
+      // Renaming or dropping one would break the existing table API.
+      for (const level of ['compact', 'standard', 'comfortable']) {
+        expect(css).toContain(`[data-density="${level}"]`);
+      }
+    });
+
+    test('standard is an explicit no-op', () => {
+      const standard = declsFor(css, '[data-density="standard"]');
+      expect(standard.get('--kj-density')).toBe('1');
+      expect(standard.get('--kj-type-scale')).toBe('1');
+    });
+
+    test('comfy is accepted as an alias of comfortable', () => {
+      expect(css).toMatch(/\[data-density="comfortable"\],\s*\[data-density="comfy"\]/);
+    });
+
+    test('type breathes more gently than boxes at both ends', () => {
+      const compact = declsFor(css, '[data-density="compact"]');
+      const comfortable = declsFor(css, '[data-density="comfortable"]');
+
+      const cDensity = Number(compact.get('--kj-density'));
+      const cType = Number(compact.get('--kj-type-scale'));
+      const fDensity = Number(comfortable.get('--kj-density'));
+      const fType = Number(comfortable.get('--kj-type-scale'));
+
+      // An 0.85 squeeze that flatters padding is punishing on 12px text, so the
+      // type scalar must always sit closer to 1 than the box scalar.
+      expect(1 - cType).toBeLessThan(1 - cDensity);
+      expect(fType - 1).toBeLessThan(fDensity - 1);
+    });
+  });
+});

package/src/index.css

@@ -1,4 +1,5 @@
 @import './base.css';
+@import './density.css';
 @import './themes/dark.css';
 @import './themes/light.css';
 @import './themes/kouji.css';
@@ -12,3 +13,5 @@
 @import './themes/forest.css';
 @import './themes/nord.css';
 @import './themes/terminal.css';
+@import './themes/orrery.css';
+@import './themes/orrery-light.css';

package/src/themes/bauhaus.css

@@ -84,5 +84,12 @@
     --kj-shadow-focus:  0 0 0 3px #1d3aff;
 
     --kj-button-bg-hover: #8e0f1d;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/corporate.css

@@ -87,5 +87,12 @@
     /* 8% darken on #0a2540 is invisible; lift to #15355a so the hover
        reads against the deep navy primary. */
     --kj-button-bg-hover: #15355a;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/cyberpunk.css

@@ -78,5 +78,12 @@
     --kj-shadow-md:     4px 4px 0 #0a0a0a;
     --kj-shadow-lg:     8px 8px 0 #0a0a0a;
     --kj-shadow-focus:  0 0 0 3px #ff007f;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/dark.css

@@ -87,5 +87,12 @@
     --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);
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/dune.css

@@ -81,5 +81,12 @@
     /* 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;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/forest.css

@@ -83,5 +83,12 @@
     /* 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;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/kouji.css

@@ -98,6 +98,13 @@
     --kj-shadow-md:     0 0 0 1px #1a1a1a;
     --kj-shadow-lg:     0 0 0 2px #1a1a1a;
     --kj-shadow-focus:  0 0 0 2px #c4ff3d;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }
 

package/src/themes/light.css

@@ -93,5 +93,12 @@
     /* 8% darken against #1a1a1a is nearly imperceptible; lift toward
        #3a3a3a so the hover reads as a deliberate state change. */
     --kj-button-bg-hover: #3a3a3a;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/mint.css

@@ -95,5 +95,12 @@
     /* Deepen the spearmint on hover (~10% darker) so the interaction
        reads on the bright body. */
     --kj-button-bg-hover: #035a42;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/nord.css

@@ -81,5 +81,12 @@
     /* Brighten frost teal on hover (dark themes need luminosity lift,
        not the default 8% black-mix darken). */
     --kj-button-bg-hover: #a3d4e2;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/orrery-light.css

@@ -0,0 +1,103 @@
+/* ─────────────────────────────────────────────────────────────
+   orrery-light theme — shared layer
+   "Paper": One Light's structure and soft ink, shifted down into real grey.
+   Pure neutral (chroma 0.0000). Elevation goes DOWN, not up — the editor is
+   the single brightest surface and everything else recedes, and `elevated`
+   is capped short of white so popovers never glare.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="orrery-light"] {
+    /* ── shape ── */
+    --kj-radius-box:      0.5rem;
+    --kj-radius-box-lg:   0.75rem;
+    --kj-radius-field:    0.3125rem;
+    --kj-radius-selector: 0.3125rem;
+    --kj-border:          var(--kj-base-border-1);
+    --kj-depth:           1;
+
+    /* ── type ── */
+    --kj-font-sans:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --kj-font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+    --kj-font-display:   var(--kj-font-sans);
+    --kj-display-weight: 600;
+    --kj-letter-spacing: -0.01em;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-fast);
+
+    /* ── neutral surfaces ── */
+    --kj-bg-body:      #dedede;
+    --kj-bg-surface:   #e8e8e8;
+    --kj-bg-field:     #e4e4e4;
+    --kj-bg-elevated:  #f7f7f7;
+    --kj-bg-overlay:   rgba(30, 30, 30, 0.34);
+    --kj-bg-inverse:   #1d1e20;
+    --kj-bg-disabled:  #e4e4e4;
+
+    /* ── intent surfaces ──
+       One Light's own syntax palette fails AA on light (#50a14f = 2.86:1,
+       #4078f2 = 3.62:1), so these keep its muted character while clearing
+       4.6:1. They are dark enough to carry white ink. */
+    --kj-bg-primary:        #752cb3;
+    --kj-bg-primary-subtle: color-mix(in oklch, #752cb3 12%, #dedede);
+    --kj-bg-accent:         #752cb3;
+    --kj-bg-accent-subtle:  color-mix(in oklch, #752cb3 12%, #dedede);
+
+    --kj-bg-info:            #1c6dc8;
+    --kj-bg-info-subtle:     color-mix(in oklch, #1c6dc8 12%, #dedede);
+    --kj-bg-success:         #1e7d3e;
+    --kj-bg-success-subtle:  color-mix(in oklch, #1e7d3e 12%, #dedede);
+    --kj-bg-warning:         #996100;
+    --kj-bg-warning-subtle:  color-mix(in oklch, #996100 12%, #dedede);
+    --kj-bg-danger:          #bf4240;
+    --kj-bg-danger-subtle:   color-mix(in oklch, #bf4240 12%, #dedede);
+
+    /* ── fg class A — soft foreground, not near-black (~10:1, not 16:1) ── */
+    --kj-fg-default:  #3b3b3b;  /* 10.0:1 */
+    --kj-fg-muted:    #515151;  /*  7.1:1 */
+    --kj-fg-subtle:   #6e6e6e;  /*  4.6:1 */
+    --kj-fg-disabled: #8c8c8c;  /*  3.0:1 — non-text / disabled only */
+
+    /* ── fg class B — every intent fill here is dark enough for white ink,
+       which is the inverse of the dark theme's pastel fills. ── */
+    --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: #dee0e2;
+
+    /* ── fg class C — intent as text on the body ── */
+    --kj-fg-primary: #8d4dcc;  /* 4.6:1 */
+    --kj-fg-accent:  #8d4dcc;
+    --kj-fg-info:    #1c6dc8;
+    --kj-fg-success: #1e7d3e;
+    --kj-fg-warning: #996100;
+    --kj-fg-danger:  #bf4240;
+
+    /* ── borders ── */
+    --kj-border-default:  #d1d1d1;
+    --kj-border-muted:    #e4e4e4;
+    --kj-border-strong:   #bababa;
+    --kj-border-focus:    #8d4dcc;
+    --kj-border-disabled: #d1d1d1;
+    --kj-border-primary:  #8d4dcc;
+    --kj-border-danger:   #bf4240;
+
+    /* ── shadows — shorter and weaker than dark; light elevation recedes ── */
+    --kj-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.12);
+    --kj-shadow-md:    0 6px 18px -10px rgba(0, 0, 0, 0.28);
+    --kj-shadow-lg:    0 14px 32px -12px rgba(0, 0, 0, 0.34);
+    --kj-shadow-focus: 0 0 0 3px color-mix(in oklch, #8d4dcc, transparent 80%);
+
+    /* ── chart palette — lane identity, darkened for the paper ground ── */
+    --kj-chart-1: #6b53b8;
+    --kj-chart-2: #3f6d96;
+    --kj-chart-3: #3f8664;
+    --kj-chart-4: #9a7530;
+    --kj-chart-5: #96566c;
+    --kj-chart-6: #4d6da2;
+  }
+}

package/src/themes/orrery.css

@@ -0,0 +1,108 @@
+/* ─────────────────────────────────────────────────────────────
+   orrery theme — shared layer
+   Graphite: a dense IDE palette. Chroma is held flat at ~0.005 OKLCH
+   across the whole neutral ramp — elevation is a lightness step plus a
+   hairline, never a hue shift. The single violet accent carries meaning;
+   everything else stays grey or semantic.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="orrery"] {
+    /* ── shape ── */
+    --kj-radius-box:      0.5rem;
+    --kj-radius-box-lg:   0.75rem;
+    --kj-radius-field:    0.3125rem;
+    --kj-radius-selector: 0.3125rem;
+    --kj-border:          var(--kj-base-border-1);
+    --kj-depth:           1;
+
+    /* ── type — Inter for chrome, JetBrains Mono for code, paths, shas and
+       figures. Display is sans: an IDE has no headline face. ── */
+    --kj-font-sans:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --kj-font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+    --kj-font-display:   var(--kj-font-sans);
+    --kj-display-weight: 600;
+    --kj-letter-spacing: -0.01em;
+
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-fast);
+
+    /* ── neutral surfaces — the graphite ramp ── */
+    --kj-bg-body:      #121315;
+    --kj-bg-surface:   #17181a;
+    --kj-bg-field:     #232427;
+    --kj-bg-elevated:  #2c2d30;
+    --kj-bg-overlay:   rgba(4, 5, 9, 0.58);
+    --kj-bg-inverse:   #f2f2f2;
+    --kj-bg-disabled:  #232427;
+
+    /* ── intent surfaces ──
+       Accent aliases primary: graphite is a single-hue system. The `-subtle`
+       fills are mixed INTO the body rather than made translucent, so a subtle
+       surface stays opaque over any parent. */
+    --kj-bg-primary:        #b082f7;
+    --kj-bg-primary-subtle: color-mix(in oklch, #b082f7 14%, #121315);
+    --kj-bg-accent:         #b082f7;
+    --kj-bg-accent-subtle:  color-mix(in oklch, #b082f7 14%, #121315);
+
+    --kj-bg-info:            #5e9cf5;
+    --kj-bg-info-subtle:     color-mix(in oklch, #5e9cf5 14%, #121315);
+    --kj-bg-success:         #57c98a;
+    --kj-bg-success-subtle:  color-mix(in oklch, #57c98a 14%, #121315);
+    --kj-bg-warning:         #d9a441;
+    --kj-bg-warning-subtle:  color-mix(in oklch, #d9a441 14%, #121315);
+    --kj-bg-danger:          #e06c7a;
+    --kj-bg-danger-subtle:   color-mix(in oklch, #e06c7a 14%, #121315);
+
+    /* ── fg class A — the ink ramp, contrast-checked against bg-field ── */
+    --kj-fg-default:  #dee0e2;  /* 12.6:1 */
+    --kj-fg-muted:    #b0b1b3;  /*  7.8:1 */
+    --kj-fg-subtle:   #8a8b8c;  /*  4.9:1 */
+    --kj-fg-disabled: #68696b;  /*  3.0:1 — non-text / disabled only */
+
+    /* ── fg class B — ink ON a solid intent fill.
+       Every intent hue here is a light pastel (they double as ink on the dark
+       body), so near-black is the only choice that clears AA on the fill —
+       white would land near 2:1 on all of them. */
+    --kj-fg-on-primary: #0d0d0f;
+    --kj-fg-on-accent:  #0d0d0f;
+    --kj-fg-on-info:    #0d0d0f;
+    --kj-fg-on-success: #0d0d0f;
+    --kj-fg-on-warning: #0d0d0f;
+    --kj-fg-on-danger:  #0d0d0f;
+    --kj-fg-on-inverse: #3b3b3b;
+
+    /* ── fg class C — intent as text on the body ── */
+    --kj-fg-primary: #c39afc;
+    --kj-fg-accent:  #c39afc;
+    --kj-fg-info:    #5e9cf5;
+    --kj-fg-success: #57c98a;
+    --kj-fg-warning: #d9a441;
+    --kj-fg-danger:  #e06c7a;
+
+    /* ── borders — hairlines, not boxes ── */
+    --kj-border-default:  #353739;
+    --kj-border-muted:    #232427;
+    --kj-border-strong:   #444548;
+    --kj-border-focus:    #a855f7;
+    --kj-border-disabled: #353739;
+    --kj-border-primary:  #a855f7;
+    --kj-border-danger:   #e06c7a;
+
+    /* ── shadows — long and soft, lifted off pure black ── */
+    --kj-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.5);
+    --kj-shadow-md:    0 8px 24px -10px rgba(0, 0, 0, 0.65);
+    --kj-shadow-lg:    0 16px 40px -12px rgba(0, 0, 0, 0.72);
+    --kj-shadow-focus: 0 0 0 3px color-mix(in oklch, #a855f7, transparent 84%);
+
+    /* ── chart palette — the lane identity colours.
+       Series need identity, not intent: six distinguishable hues at matched
+       lightness beat six semantic colours that all mean something else. */
+    --kj-chart-1: #8f7bd6;
+    --kj-chart-2: #5e8fb8;
+    --kj-chart-3: #67a888;
+    --kj-chart-4: #c09a54;
+    --kj-chart-5: #b8798f;
+    --kj-chart-6: #6f8fc4;
+  }
+}

package/src/themes/retro.css

@@ -85,5 +85,13 @@
        reads better than the default ink on the deepened terracotta. */
     --kj-button-bg-hover: #d05c57;
     --kj-button-fg-hover: #fff5e4;
+
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/sakura.css

@@ -81,5 +81,12 @@
     /* Lift the cherry magenta to a deeper rose so the hover reads
        against the warm body. */
     --kj-button-bg-hover: #a01548;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/terminal.css

@@ -82,5 +82,12 @@
     /* Dim the phosphor green on hover (slight green-down) instead of
        black-mixing — keeps the CRT look. */
     --kj-button-bg-hover: #00cc52;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }