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
This commit is contained in:
@@ -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" },
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user