feat(KB-173): add Zen theme to dashboard

- Add Zen to COLOR_THEMES array in core types
- Add Zen theme CSS styles with dark and light variants
- Add Zen theme option to ThemeSelector component
- Add tests for Zen theme selection in ThemeSelector
- Update index.html theme initialization to include Zen
- Add changeset for the new theme

packages/core/src/types.ts

@@ -15,6 +15,7 @@ export const COLOR_THEMES = [
   "ocean",
   "forest",
   "sunset",
+  "zen",
   "berry",
   "monochrome",
   "high-contrast",

packages/dashboard/app/components/ThemeSelector.tsx

@@ -20,6 +20,7 @@ const COLOR_THEMES: { value: ColorTheme; label: string; className: string }[] =
   { value: "ocean", label: "Ocean", className: "theme-swatch-ocean" },
   { value: "forest", label: "Forest", className: "theme-swatch-forest" },
   { value: "sunset", label: "Sunset", className: "theme-swatch-sunset" },
+  { value: "zen", label: "Zen", className: "theme-swatch-zen" },
   { value: "berry", label: "Berry", className: "theme-swatch-berry" },
   { value: "monochrome", label: "Mono", className: "theme-swatch-monochrome" },
   { value: "high-contrast", label: "High Contrast", className: "theme-swatch-high-contrast" },

packages/dashboard/app/components/__tests__/ThemeSelector.test.tsx

@@ -81,6 +81,7 @@ describe("ThemeSelector", () => {
     expect(screen.getByLabelText("Ocean theme")).toBeDefined();
     expect(screen.getByLabelText("Forest theme")).toBeDefined();
     expect(screen.getByLabelText("Sunset theme")).toBeDefined();
+    expect(screen.getByLabelText("Zen theme")).toBeDefined();
     expect(screen.getByLabelText("Berry theme")).toBeDefined();
     expect(screen.getByLabelText("Mono theme")).toBeDefined();
     expect(screen.getByLabelText("High Contrast theme")).toBeDefined();
@@ -121,6 +122,9 @@ describe("ThemeSelector", () => {
 
     fireEvent.click(screen.getByLabelText("Berry theme"));
     expect(onColorThemeChange).toHaveBeenCalledWith("berry");
+
+    fireEvent.click(screen.getByLabelText("Zen theme"));
+    expect(onColorThemeChange).toHaveBeenCalledWith("zen");
   });
 
   it("displays current theme preview", () => {

packages/dashboard/app/index.html

@@ -11,7 +11,7 @@
         try {
           var mode = localStorage.getItem('kb-dashboard-theme-mode') || 'dark';
           var colorTheme = localStorage.getItem('kb-dashboard-color-theme') || 'default';
-          var validThemes = ['default', 'ocean', 'forest', 'sunset', 'berry', 'monochrome', 'high-contrast', 'solarized', 'factory', 'ayu', 'one-dark'];
+          var validThemes = ['default', 'ocean', 'forest', 'sunset', 'zen', 'berry', 'monochrome', 'high-contrast', 'solarized', 'factory', 'ayu', 'one-dark'];
           if (!validThemes.includes(colorTheme)) {
             colorTheme = 'default';
           }

packages/dashboard/app/styles.css

@@ -5052,6 +5052,61 @@ html .column.drag-over * {
   --color-error: #d32f2f;
 }
 
+/* ZEN - Minimal, clean monochrome with subtle accents */
+[data-color-theme="zen"] {
+  --bg: #0c0c0c;
+  --surface: #111111;
+  --card: #1a1a1a;
+  --card-hover: #222222;
+  --border: #2a2a2a;
+  --text: #e0e0e0;
+  --text-muted: #808080;
+  --text-dim: #555555;
+
+  --todo: #6b7b8c;
+  --in-progress: #7a8590;
+  --in-progress-rgb: 122, 133, 144;
+  --in-review: #6b8c7a;
+  --triage: #8c7b6b;
+  --done: #666666;
+  --color-success: #6b8c7a;
+  --color-error: #8c6b6b;
+
+  /* Minimal glow effects */
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 1px var(--border);
+}
+
+[data-color-theme="zen"][data-theme="light"] {
+  --bg: #f5f5f5;
+  --surface: #fafafa;
+  --card: #ffffff;
+  --card-hover: #f0f0f0;
+  --border: #e0e0e0;
+  --text: #333333;
+  --text-muted: #777777;
+  --text-dim: #999999;
+
+  --todo: #5a6a7a;
+  --in-progress: #6a757f;
+  --in-progress-rgb: 106, 117, 127;
+  --in-review: #5a7a6a;
+  --triage: #7a6a5a;
+  --done: #555555;
+  --color-success: #5a7a6a;
+  --color-error: #7a5a5a;
+
+  /* Minimal glow effects */
+  --shadow-glow: none;
+  --glow-success: none;
+  --glow-warning: none;
+  --glow-danger: none;
+  --focus-ring: 0 0 0 1px var(--border);
+}
+
 /* HIGH CONTRAST - Extreme contrast for accessibility */
 [data-color-theme="high-contrast"] {
   --bg: #000000;
@@ -5521,6 +5576,11 @@ html .column.drag-over * {
   --surface: #4a2c2c;
 }
 
+.theme-swatch-zen {
+  --bg: #0c0c0c;
+  --surface: #111111;
+}
+
 .theme-swatch-berry {
   --bg: #1a0b2e;
   --surface: #2d1b4e;
@@ -5567,6 +5627,11 @@ html .column.drag-over * {
   --surface: #f3f3f3;
 }
 
+[data-theme="light"] .theme-swatch-zen {
+  --bg: #f5f5f5;
+  --surface: #fafafa;
+}
+
 /* Reset to defaults button */
 .theme-reset-btn {
   display: flex;