feat(KB-625): add industrial color theme

- Add industrial to COLOR_THEMES array in types.ts
- Add industrial theme CSS definitions with dark grunge aesthetic
- Add industrial theme selector entry in ThemeSelector component
- Add industrial theme swatch styles for preview

packages/core/src/types.ts

@@ -17,8 +17,9 @@ export const COLOR_THEMES = [
   "sunset",
   "zen",
   "berry",
-  "monochrome",
   "high-contrast",
+  "industrial",
+  "monochrome",
   "solarized",
   "factory",
   "ayu",

packages/dashboard/app/components/ThemeSelector.tsx

@@ -22,8 +22,9 @@ const COLOR_THEMES: { value: ColorTheme; label: string; className: string }[] =
   { 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" },
+  { value: "industrial", label: "Industrial", className: "theme-swatch-industrial" },
+  { value: "monochrome", label: "Mono", className: "theme-swatch-monochrome" },
   { value: "solarized", label: "Solarized", className: "theme-swatch-solarized" },
   { value: "factory", label: "Factory", className: "theme-swatch-factory" },
   { value: "ayu", label: "Ayu", className: "theme-swatch-ayu" },

packages/dashboard/app/styles.css

@@ -5833,6 +5833,47 @@ html .column.drag-over * {
   --color-error: #cc0000;
 }
 
+/* INDUSTRIAL - Technical engineering spec sheet aesthetic */
+[data-color-theme="industrial"] {
+  --bg: #0c0c0c;
+  --surface: #141414;
+  --card: #1a1a1a;
+  --card-hover: #222222;
+  --border: #333333;
+  --text: #e8e8e8;
+  --text-muted: #888888;
+  --text-dim: #555555;
+
+  --todo: #ff6b00;
+  --in-progress: #ff8c00;
+  --in-progress-rgb: 255, 140, 0;
+  --in-review: #00bcd4;
+  --triage: #ff5722;
+  --done: #666666;
+  --color-success: #00bcd4;
+  --color-error: #ff3d00;
+}
+
+[data-color-theme="industrial"][data-theme="light"] {
+  --bg: #f0f0f0;
+  --surface: #fafafa;
+  --card: #ffffff;
+  --card-hover: #f5f5f5;
+  --border: #d0d0d0;
+  --text: #1a1a1a;
+  --text-muted: #666666;
+  --text-dim: #999999;
+
+  --todo: #e65100;
+  --in-progress: #ef6c00;
+  --in-progress-rgb: 239, 108, 0;
+  --in-review: #0097a7;
+  --triage: #d84315;
+  --done: #555555;
+  --color-success: #0097a7;
+  --color-error: #d84315;
+}
+
 /* SOLARIZED - Classic solarized palette */
 [data-color-theme="solarized"] {
   --bg: #002b36;
@@ -6281,6 +6322,11 @@ html .column.drag-over * {
   --surface: #0a0a0a;
 }
 
+.theme-swatch-industrial {
+  --bg: #0c0c0c;
+  --surface: #1a1a1a;
+}
+
 .theme-swatch-solarized {
   --bg: #002b36;
   --surface: #073642;