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/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", () => {