@kouji-ui/themes 0.0.6

package/src/themes/terminal.css

@@ -0,0 +1,86 @@
+/* ─────────────────────────────────────────────────────────────
+   terminal theme — dark
+   Pure black with phosphor green. Monospace everywhere, sharp
+   geometry, no rounding. Hacker terminal / CRT aesthetic.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.shared {
+  [data-theme="terminal"] {
+    /* ── shape — sharp, hard-edged ── */
+    --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. Phosphor terminals don't kern; keep
+       letter-spacing at 0 and weight medium for that CRT readout look. */
+    --kj-font-sans:    var(--kj-base-font-mono);
+    --kj-font-display: var(--kj-base-font-mono);
+    --kj-display-weight: 500;
+    --kj-letter-spacing: 0;
+    /* ── motion ── */
+    --kj-transition: var(--kj-base-transition-fast);
+
+    --kj-bg-body:        #000000;
+    --kj-bg-surface:     #050505;
+    --kj-bg-field:       #0a0a0a;
+    --kj-bg-elevated:    #0f0f0f;
+    --kj-bg-overlay:     rgba(0, 0, 0, 0.75);
+    --kj-bg-inverse:     #b6ffce;
+    --kj-bg-disabled:    #1a1a1a;
+
+    --kj-bg-primary:         #00ff66;
+    --kj-bg-primary-subtle:  #0a2010;
+    --kj-bg-accent:          #00ff66;
+    --kj-bg-accent-subtle:   #0a2010;
+
+    --kj-bg-info:            #00d4ff;
+    --kj-bg-info-subtle:     #0a1820;
+    --kj-bg-success:         #00ff66;
+    --kj-bg-success-subtle:  #0a2010;
+    --kj-bg-warning:         #ffd000;
+    --kj-bg-warning-subtle:  #1f1a05;
+    --kj-bg-danger:          #ff5050;
+    --kj-bg-danger-subtle:   #2a0a0a;
+
+    --kj-fg-default:    #b6ffce;
+    --kj-fg-muted:      #86cc9a;
+    --kj-fg-subtle:     #5a9b6c;
+    --kj-fg-disabled:   #2a3a30;
+
+    /* Bright fills + black text — phosphor-on-CRT inversion. */
+    --kj-fg-on-primary:   #000000;
+    --kj-fg-on-accent:    #000000;
+    --kj-fg-on-info:      #000000;
+    --kj-fg-on-success:   #000000;
+    --kj-fg-on-warning:   #000000;
+    --kj-fg-on-danger:    #000000;
+    --kj-fg-on-inverse:   #000000;
+
+    --kj-fg-primary:    #00ff66;
+    --kj-fg-accent:     #00ff66;
+    --kj-fg-info:       #00d4ff;
+    --kj-fg-success:    #00ff66;
+    --kj-fg-warning:    #ffd000;
+    --kj-fg-danger:     #ff7575;
+
+    --kj-border-default:   #1a3325;
+    --kj-border-muted:     #0a1f10;
+    --kj-border-strong:    #2a5535;
+    --kj-border-focus:     #00ff66;
+    --kj-border-disabled:  #1a1a1a;
+    --kj-border-primary:   #00ff66;
+    --kj-border-danger:    #ff5050;
+
+    /* Green phosphor glow instead of soft drop-shadow. */
+    --kj-shadow-sm:     0 0 4px rgba(0, 255, 102, 0.20);
+    --kj-shadow-md:     0 0 12px rgba(0, 255, 102, 0.28);
+    --kj-shadow-lg:     0 0 32px rgba(0, 255, 102, 0.40);
+    --kj-shadow-focus:  0 0 0 2px #00ff66;
+
+    /* Dim the phosphor green on hover (slight green-down) instead of
+       black-mixing — keeps the CRT look. */
+    --kj-button-bg-hover: #00cc52;
+  }
+}

package/src/themes.spec.ts

@@ -0,0 +1,87 @@
+import { readFileSync, readdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+import postcss from 'postcss';
+import { describe, expect, test } from 'vitest';
+
+/**
+ * The shared-layer token contract. Every theme MUST define every token in this list.
+ * Update this list when §3.2 of the design spec changes.
+ */
+const REQUIRED_SHARED_TOKENS = [
+  // Neutral surfaces
+  '--kj-bg-body', '--kj-bg-surface', '--kj-bg-field',
+  '--kj-bg-elevated', '--kj-bg-overlay', '--kj-bg-inverse', '--kj-bg-disabled',
+  // Intent surfaces
+  '--kj-bg-primary', '--kj-bg-primary-subtle',
+  '--kj-bg-accent', '--kj-bg-accent-subtle',
+  '--kj-bg-info', '--kj-bg-info-subtle',
+  '--kj-bg-success', '--kj-bg-success-subtle',
+  '--kj-bg-warning', '--kj-bg-warning-subtle',
+  '--kj-bg-danger', '--kj-bg-danger-subtle',
+  // FG Class A
+  '--kj-fg-default', '--kj-fg-muted', '--kj-fg-subtle', '--kj-fg-disabled',
+  // FG Class B
+  '--kj-fg-on-primary', '--kj-fg-on-accent',
+  '--kj-fg-on-info', '--kj-fg-on-success', '--kj-fg-on-warning', '--kj-fg-on-danger',
+  '--kj-fg-on-inverse',
+  // FG Class C
+  '--kj-fg-primary', '--kj-fg-accent',
+  '--kj-fg-info', '--kj-fg-success', '--kj-fg-warning', '--kj-fg-danger',
+  // Borders
+  '--kj-border-default', '--kj-border-muted', '--kj-border-strong',
+  '--kj-border-focus', '--kj-border-disabled',
+  '--kj-border-primary', '--kj-border-danger',
+  // Shadows
+  '--kj-shadow-sm', '--kj-shadow-md', '--kj-shadow-lg', '--kj-shadow-focus',
+  // shape
+  '--kj-radius-box', '--kj-radius-field', '--kj-radius-selector',
+  '--kj-border', '--kj-depth',
+  // motion
+  '--kj-transition',
+  // Note: font tokens (--kj-font-sans/mono/display), text-* scale, and
+  // space-* scale are NOT required per-theme. They cascade from `:root`
+  // defaults declared in base.css and are overridden by themes only when
+  // they need to differ (e.g. kouji sans=mono; corporate display=sans).
+] as const;
+
+const themesDir = resolve(import.meta.dirname, 'themes');
+
+function discoverThemes(): { name: string; cssPath: string }[] {
+  return readdirSync(themesDir)
+    .filter(f => f.endsWith('.css'))
+    .map(f => ({ name: f.replace(/\.css$/, ''), cssPath: resolve(themesDir, f) }));
+}
+
+function tokensDefinedInThemeBlock(cssText: string, themeName: string): Set<string> {
+  const root = postcss.parse(cssText);
+  const tokens = new Set<string>();
+  root.walkRules(rule => {
+    // Match either bare [data-theme="X"] or layered :where([data-theme="X"]).
+    if (!rule.selector.includes(`[data-theme="${themeName}"]`)) return;
+    rule.walkDecls(decl => {
+      if (decl.prop.startsWith('--kj-')) tokens.add(decl.prop);
+    });
+  });
+  return tokens;
+}
+
+describe('theme contract', () => {
+  const themes = discoverThemes();
+
+  test('at least one theme is present', () => {
+    expect(themes.length).toBeGreaterThan(0);
+  });
+
+  for (const theme of themes) {
+    describe(theme.name, () => {
+      const css = readFileSync(theme.cssPath, 'utf-8');
+      const defined = tokensDefinedInThemeBlock(css, theme.name);
+
+      for (const token of REQUIRED_SHARED_TOKENS) {
+        test(`defines ${token}`, () => {
+          expect(defined).toContain(token);
+        });
+      }
+    });
+  }
+});