From 12aae944478cc90e0766726afb1a1c5b2ead6fd9 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Sun, 21 Jun 2026 10:27:44 -0700 Subject: [PATCH] FN-6813: add shadcn mono accent variants Expand the shadcn theme family with mono accent variants and migrate the legacy mono id. - Rename the legacy shadcn-mono theme path to shadcn-mono-red with compatibility migration. - Add shadcn mono blue, green, purple, pink, orange, and yellow theme tokens and swatches. - Keep Shadcn Gray registered alongside the expanded shadcn family after conflict resolution. - Cover theme migration and option registration with hook tests and docs. Files changed: .changeset/shadcn-mono-color-family.md | 5 + docs/dashboard-guide.md | 2 +- packages/core/src/types.ts | 14 +- .../dashboard/app/components/ThemeSelector.css | 90 ++- packages/dashboard/app/components/themeOptions.ts | 8 +- .../dashboard/app/hooks/__tests__/useTheme.test.ts | 35 +- packages/dashboard/app/hooks/useTheme.ts | 10 +- packages/dashboard/app/index.html | 4 +- packages/dashboard/app/public/theme-data.css | 802 ++++++++++++++++++++- 9 files changed, 947 insertions(+), 23 deletions(-) Fusion-Task-Id: FN-6813 Fusion-Task-Lineage: c489300c-2131-4914-84f6-41b8e12929d3 --- .changeset/shadcn-mono-color-family.md | 5 + docs/dashboard-guide.md | 2 +- packages/core/src/types.ts | 14 +- .../app/components/ThemeSelector.css | 90 +- .../dashboard/app/components/themeOptions.ts | 8 +- .../app/hooks/__tests__/useTheme.test.ts | 35 +- packages/dashboard/app/hooks/useTheme.ts | 10 +- packages/dashboard/app/index.html | 4 +- packages/dashboard/app/public/theme-data.css | 802 +++++++++++++++++- 9 files changed, 947 insertions(+), 23 deletions(-) create mode 100644 .changeset/shadcn-mono-color-family.md diff --git a/.changeset/shadcn-mono-color-family.md b/.changeset/shadcn-mono-color-family.md new file mode 100644 index 0000000000..8dae317b2c --- /dev/null +++ b/.changeset/shadcn-mono-color-family.md @@ -0,0 +1,5 @@ +--- +"@runfusion/fusion": minor +--- + +Add Shadcn Mono Red/Blue/Green/Purple/Pink/Orange/Yellow dashboard color themes and migrate legacy `shadcn-mono` selections to `shadcn-mono-red`. diff --git a/docs/dashboard-guide.md b/docs/dashboard-guide.md index 2b79c5e6fc..5975e4773d 100644 --- a/docs/dashboard-guide.md +++ b/docs/dashboard-guide.md @@ -1290,7 +1290,7 @@ Non-Command-Center dashboard CSS uses `--text` as the canonical primary text tok ### Theme system -Dark/light modes via `data-theme`; 67 color themes via `data-color-theme` (lazy-loaded from `app/public/theme-data.css`), including the Shadcn zinc-neutral theme with an orange default highlight/accent and its color family: Shadcn Blue/Green/Red/Purple/Pink/Orange/Yellow, Shadcn Mono (grayscale with red accent), Shadcn Black (pure black and white), and Shadcn Gray (fully neutral zinc-gray accent). Air is the minimal, borderless, paper-like preset with near-monochrome tokens and CSS-only chrome flattening. +Dark/light modes via `data-theme`; 73 color themes via `data-color-theme` (lazy-loaded from `app/public/theme-data.css`), including the Shadcn zinc-neutral theme with an orange default highlight/accent and its color family: Shadcn Blue/Green/Red/Purple/Pink/Orange/Yellow, Shadcn Mono Red/Blue/Green/Purple/Pink/Orange/Yellow (grayscale surfaces with color-specific accents; legacy `shadcn-mono` selections migrate to Shadcn Mono Red), Shadcn Black (pure black and white), and Shadcn Gray (fully neutral zinc-gray accent). Air is the minimal, borderless, paper-like preset with near-monochrome tokens and CSS-only chrome flattening. - **Base tokens** (`--bg`, `--surface`, etc.) — redefine in `:root`, `[data-theme="light"]`, and every theme block. - **Semantic tokens** (`--autopilot-pulse`, `--event-error-text`, `--badge-mission-*`, `--fab-*`) — `:root` + `[data-theme="light"]` only; no per-color-theme overrides. diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 21a27ce392..f2094f69fa 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -330,7 +330,8 @@ export const COLOR_THEMES = [ "neon-bloom", "sepia", "shadcn", - // FNXC:DashboardTheming 2026-06-19-16:07: FN-6756 extends the published color-theme union with shadcn-family accent variants; keep dashboard theme options, bootstrap validation, swatches, and theme-data token blocks in lockstep with this ordered list. FNXC:DashboardTheming 2026-06-20-00:00: FN-6814 adds Shadcn Gray as the fully-neutral zinc accent variant; keep it distinct from Shadcn Mono's red accent and Shadcn Black's black/white CTA while preserving the shadcn-family lockstep ordering. + // FNXC:DashboardTheming 2026-06-19-16:07: FN-6756 extends the published color-theme union with shadcn-family accent variants; keep dashboard theme options, bootstrap validation, swatches, and theme-data token blocks in lockstep with this ordered list. + // FNXC:DashboardTheming 2026-06-20-00:00: FN-6813 renames the grayscale-base mono theme to shadcn-mono-red and adds the remaining mono accent variants; keep Shadcn Gray adjacent to Shadcn Black so the color-family order stays stable with FN-6814. "shadcn-blue", "shadcn-green", "shadcn-red", @@ -338,8 +339,15 @@ export const COLOR_THEMES = [ "shadcn-pink", "shadcn-orange", "shadcn-yellow", - "shadcn-mono", - "shadcn-black", "shadcn-gray", + "shadcn-mono-red", + "shadcn-mono-blue", + "shadcn-mono-green", + "shadcn-mono-purple", + "shadcn-mono-pink", + "shadcn-mono-orange", + "shadcn-mono-yellow", + "shadcn-black", + "shadcn-gray", ] as const; export type ColorTheme = (typeof COLOR_THEMES)[number]; diff --git a/packages/dashboard/app/components/ThemeSelector.css b/packages/dashboard/app/components/ThemeSelector.css index b2f0beff66..be444d668f 100644 --- a/packages/dashboard/app/components/ThemeSelector.css +++ b/packages/dashboard/app/components/ThemeSelector.css @@ -437,13 +437,56 @@ --swatch-sample-4: #27272a; } -.theme-swatch-shadcn-mono { +.theme-swatch-shadcn-mono-red { --swatch-sample-1: #09090b; --swatch-sample-2: #18181b; --swatch-sample-3: #ef4444; --swatch-sample-4: #27272a; } +.theme-swatch-shadcn-mono-blue { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #3b82f6; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-mono-green { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #22c55e; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-mono-purple { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #8b5cf6; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-mono-pink { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #ec4899; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-mono-orange { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #f97316; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-mono-yellow { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #eab308; + --swatch-sample-4: #27272a; +} + + .theme-swatch-shadcn-black { --swatch-sample-1: #09090b; --swatch-sample-2: #18181b; @@ -726,13 +769,56 @@ --swatch-sample-4: #e4e4e7; } -[data-theme="light"] .theme-swatch-shadcn-mono { +[data-theme="light"] .theme-swatch-shadcn-mono-red { --swatch-sample-1: #ffffff; --swatch-sample-2: #f4f4f5; --swatch-sample-3: #dc2626; --swatch-sample-4: #e4e4e7; } +[data-theme="light"] .theme-swatch-shadcn-mono-blue { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #2563eb; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-mono-green { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #16a34a; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-mono-purple { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #7c3aed; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-mono-pink { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #db2777; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-mono-orange { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #ea580c; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-mono-yellow { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #ca8a04; + --swatch-sample-4: #e4e4e7; +} + + [data-theme="light"] .theme-swatch-shadcn-black { --swatch-sample-1: #ffffff; --swatch-sample-2: #f4f4f5; diff --git a/packages/dashboard/app/components/themeOptions.ts b/packages/dashboard/app/components/themeOptions.ts index 5e0594e415..b3fe0d73a0 100644 --- a/packages/dashboard/app/components/themeOptions.ts +++ b/packages/dashboard/app/components/themeOptions.ts @@ -76,7 +76,13 @@ export const COLOR_THEMES: { value: ColorTheme; label: string; className: string { value: "shadcn-pink", label: "Shadcn Pink", className: "theme-swatch-shadcn-pink" }, { value: "shadcn-orange", label: "Shadcn Orange", className: "theme-swatch-shadcn-orange" }, { value: "shadcn-yellow", label: "Shadcn Yellow", className: "theme-swatch-shadcn-yellow" }, - { value: "shadcn-mono", label: "Shadcn Mono", className: "theme-swatch-shadcn-mono" }, + { value: "shadcn-mono-red", label: "Shadcn Mono Red", className: "theme-swatch-shadcn-mono-red" }, + { value: "shadcn-mono-blue", label: "Shadcn Mono Blue", className: "theme-swatch-shadcn-mono-blue" }, + { value: "shadcn-mono-green", label: "Shadcn Mono Green", className: "theme-swatch-shadcn-mono-green" }, + { value: "shadcn-mono-purple", label: "Shadcn Mono Purple", className: "theme-swatch-shadcn-mono-purple" }, + { value: "shadcn-mono-pink", label: "Shadcn Mono Pink", className: "theme-swatch-shadcn-mono-pink" }, + { value: "shadcn-mono-orange", label: "Shadcn Mono Orange", className: "theme-swatch-shadcn-mono-orange" }, + { value: "shadcn-mono-yellow", label: "Shadcn Mono Yellow", className: "theme-swatch-shadcn-mono-yellow" }, { value: "shadcn-black", label: "Shadcn Black", className: "theme-swatch-shadcn-black" }, /* FNXC:DashboardTheming 2026-06-20-00:00: Shadcn Gray is the fully-neutral zinc accent option; keep it adjacent to Shadcn Black so selectors mirror the core COLOR_THEMES order. */ { value: "shadcn-gray", label: "Shadcn Gray", className: "theme-swatch-shadcn-gray" }, diff --git a/packages/dashboard/app/hooks/__tests__/useTheme.test.ts b/packages/dashboard/app/hooks/__tests__/useTheme.test.ts index af44eb5410..4c7df026bb 100644 --- a/packages/dashboard/app/hooks/__tests__/useTheme.test.ts +++ b/packages/dashboard/app/hooks/__tests__/useTheme.test.ts @@ -557,7 +557,8 @@ describe("useTheme", () => { const themeDataCss = readFileSync(resolve(PACKAGE_ROOT, "app/public/theme-data.css"), "utf8"); const shadcnVariants = [ { id: "shadcn-blue", accent: "#3b82f6" }, - { id: "shadcn-mono", accent: "#ef4444" }, + { id: "shadcn-mono-red", accent: "#ef4444" }, + { id: "shadcn-mono-blue", accent: "#3b82f6" }, { id: "shadcn-black", accent: "#fafafa" }, ] as const; style.textContent = `${baseCss}\n${themeDataCss}`; @@ -569,6 +570,10 @@ describe("useTheme", () => { )?.groups?.body; expect(block).toBeDefined(); + const variantStyle = document.createElement("style"); + variantStyle.textContent = `:root[data-color-theme="${variant.id}"] {${block}}`; + document.head.appendChild(variantStyle); + localStorageMock[COLOR_THEME_STORAGE_KEY] = variant.id; renderHook(() => useTheme()); @@ -578,13 +583,31 @@ describe("useTheme", () => { expect(block).toContain("--shadow-glow: none;"); expect(block).toContain("--cta-glow: none;"); expect(block).not.toMatch(/--(?:shadow-glow|glow-success|glow-warning|glow-danger|cta-glow):\s*0 0/); + + const resolvedStyle = getComputedStyle(document.documentElement); + expect(resolvedStyle.getPropertyValue("--accent").trim()).toBe(variant.accent); + expect(resolvedStyle.getPropertyValue("--shadow-glow").trim()).toBe("none"); + expect(resolvedStyle.getPropertyValue("--cta-glow").trim()).toBe("none"); + expect(resolvedStyle.getPropertyValue("--btn-border-width").trim()).toBe("1px"); + + document.head.removeChild(variantStyle); } const blueBlock = themeDataCss.match(/\[data-color-theme="shadcn-blue"\] \{(?[\s\S]*?)\n\}/)?.groups ?.body; + const monoRedBlock = themeDataCss.match(/\[data-color-theme="shadcn-mono-red"\] \{(?[\s\S]*?)\n\}/) + ?.groups?.body; + const monoBlueBlock = themeDataCss.match(/\[data-color-theme="shadcn-mono-blue"\] \{(?[\s\S]*?)\n\}/) + ?.groups?.body; const blackBlock = themeDataCss.match(/\[data-color-theme="shadcn-black"\] \{(?[\s\S]*?)\n\}/) ?.groups?.body; expect(blueBlock).toContain("--todo: #60a5fa;"); + expect(monoRedBlock).toContain("--todo: #a1a1aa;"); + expect(monoRedBlock).toContain("--in-progress: #71717a;"); + expect(monoBlueBlock).toContain("--todo: #a1a1aa;"); + expect(monoBlueBlock).toContain("--in-progress: #71717a;"); + expect(monoBlueBlock).toContain("--color-error: #ef4444;"); + expect(monoBlueBlock).not.toContain("--todo: #60a5fa;"); expect(blackBlock).toContain("--todo: #d4d4d8;"); expect(blackBlock).toContain("--in-progress: #a1a1aa;"); expect(blackBlock).not.toContain("--todo: #60a5fa;"); @@ -622,6 +645,15 @@ describe("useTheme", () => { expect(result.current.themeMode).toBe("dark"); }); + it("remaps legacy shadcn mono color theme from localStorage", () => { + localStorageMock[COLOR_THEME_STORAGE_KEY] = "shadcn-mono"; + + const { result } = renderHook(() => useTheme()); + + expect(result.current.colorTheme).toBe("shadcn-mono-red"); + expect(document.documentElement.getAttribute("data-color-theme")).toBe("shadcn-mono-red"); + }); + it("ignores invalid color theme in localStorage", () => { localStorageMock[COLOR_THEME_STORAGE_KEY] = "invalid-theme"; @@ -737,6 +769,7 @@ describe("getThemeInitScript", () => { expect(script).toContain(theme); }); expect(script).toContain("validThemes"); + expect(script).toContain("if (colorTheme === 'shadcn-mono') colorTheme = 'shadcn-mono-red';"); expect(script).toContain("colorTheme = 'default'"); }); diff --git a/packages/dashboard/app/hooks/useTheme.ts b/packages/dashboard/app/hooks/useTheme.ts index c84b434f49..16e2c8955e 100644 --- a/packages/dashboard/app/hooks/useTheme.ts +++ b/packages/dashboard/app/hooks/useTheme.ts @@ -75,9 +75,11 @@ function readCachedThemeMode(): ThemeMode { function readCachedColorTheme(): ColorTheme { if (!isBrowser) return "default"; try { - const saved = localStorage.getItem(COLOR_THEME_STORAGE_KEY); - if (saved && VALID_COLOR_THEMES.includes(saved as ColorTheme)) { - return saved as ColorTheme; + let colorTheme = localStorage.getItem(COLOR_THEME_STORAGE_KEY); + // FNXC:DashboardTheming 2026-06-20-00:00: FN-6813 keeps existing shadcn-mono users on the renamed red mono variant before the validity guard would otherwise fall back to default. + if (colorTheme === 'shadcn-mono') colorTheme = 'shadcn-mono-red'; + if (colorTheme && VALID_COLOR_THEMES.includes(colorTheme as ColorTheme)) { + return colorTheme as ColorTheme; } } catch { // localStorage not available, use default @@ -390,6 +392,8 @@ export function getThemeInitScript(): string { var mode = localStorage.getItem('${THEME_MODE_STORAGE_KEY}') || 'dark'; var colorTheme = localStorage.getItem('${COLOR_THEME_STORAGE_KEY}') || 'default'; var validThemes = ${JSON.stringify(VALID_COLOR_THEMES)}; + // FNXC:DashboardTheming 2026-06-20-00:00: FN-6813 remaps the legacy mono id before bootstrap validation so persisted users keep the red mono accent. + if (colorTheme === 'shadcn-mono') colorTheme = 'shadcn-mono-red'; if (!validThemes.includes(colorTheme)) { colorTheme = 'default'; } diff --git a/packages/dashboard/app/index.html b/packages/dashboard/app/index.html index bd8e94e77d..6926a9fe59 100644 --- a/packages/dashboard/app/index.html +++ b/packages/dashboard/app/index.html @@ -160,7 +160,9 @@ 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', 'zen', 'berry', 'high-contrast', 'industrial', 'monochrome', 'slate', 'ash', 'air', 'graphite', 'silver', 'solarized', 'factory', 'factory-mono', 'ayu', 'one-dark', 'nord', 'dracula', 'gruvbox', 'tokyo-night', 'catppuccin-mocha', 'github-dark', 'everforest', 'rose-pine', 'kanagawa', 'night-owl', 'palenight', 'monokai-pro', 'slime', 'brutalist', 'neon-city', 'parchment', 'terminal', 'glass', 'horizon', 'vitesse', 'outrun', 'snazzy', 'porple', 'espresso', 'mars', 'poimandres', 'ember', 'rust', 'copper', 'foundry', 'carbon', 'sandstone', 'lagoon', 'frost', 'lavender', 'neon-bloom', 'sepia', 'shadcn', 'shadcn-blue', 'shadcn-green', 'shadcn-red', 'shadcn-purple', 'shadcn-pink', 'shadcn-orange', 'shadcn-yellow', 'shadcn-mono', 'shadcn-black', 'shadcn-gray']; + var validThemes = ['default', 'ocean', 'forest', 'sunset', 'zen', 'berry', 'high-contrast', 'industrial', 'monochrome', 'slate', 'ash', 'air', 'graphite', 'silver', 'solarized', 'factory', 'factory-mono', 'ayu', 'one-dark', 'nord', 'dracula', 'gruvbox', 'tokyo-night', 'catppuccin-mocha', 'github-dark', 'everforest', 'rose-pine', 'kanagawa', 'night-owl', 'palenight', 'monokai-pro', 'slime', 'brutalist', 'neon-city', 'parchment', 'terminal', 'glass', 'horizon', 'vitesse', 'outrun', 'snazzy', 'porple', 'espresso', 'mars', 'poimandres', 'ember', 'rust', 'copper', 'foundry', 'carbon', 'sandstone', 'lagoon', 'frost', 'lavender', 'neon-bloom', 'sepia', 'shadcn', 'shadcn-blue', 'shadcn-green', 'shadcn-red', 'shadcn-purple', 'shadcn-pink', 'shadcn-orange', 'shadcn-yellow', 'shadcn-mono-red', 'shadcn-mono-blue', 'shadcn-mono-green', 'shadcn-mono-purple', 'shadcn-mono-pink', 'shadcn-mono-orange', 'shadcn-mono-yellow', 'shadcn-black', 'shadcn-gray']; + // FNXC:DashboardTheming 2026-06-20-00:00: FN-6813 remaps the legacy mono id before pre-hydration validation so persisted users keep the red mono accent. + if (colorTheme === 'shadcn-mono') colorTheme = 'shadcn-mono-red'; if (!validThemes.includes(colorTheme)) { colorTheme = 'default'; } diff --git a/packages/dashboard/app/public/theme-data.css b/packages/dashboard/app/public/theme-data.css index 1d9a69714f..9f6920025b 100644 --- a/packages/dashboard/app/public/theme-data.css +++ b/packages/dashboard/app/public/theme-data.css @@ -2227,7 +2227,11 @@ FN-6756 adds shadcn color-family themes as exact zinc-neutral shadcn variants wi --accent-text: #18181b; } -[data-color-theme="shadcn-mono"] { +/* +FNXC:DashboardTheming 2026-06-20-00:00: +FN-6813 makes the shadcn mono theme a color family: shadcn-mono-red preserves the renamed legacy red accent while the other mono variants reuse the same zinc-neutral tokens and swap only accent/CTA values. Legacy stored shadcn-mono selections remap in bootstrap/theme hooks so users keep the red mono theme instead of falling back to default. +*/ +[data-color-theme="shadcn-mono-red"] { --bg: #09090b; --surface: #0c0c0e; --card: #18181b; @@ -2298,7 +2302,8 @@ FN-6756 adds shadcn color-family themes as exact zinc-neutral shadcn variants wi --accent-text: #ffffff; } -[data-color-theme="shadcn-mono"][data-theme="light"] { + +[data-color-theme="shadcn-mono-red"][data-theme="light"] { --bg: #ffffff; --surface: #ffffff; --card: #ffffff; @@ -2345,6 +2350,727 @@ FN-6756 adds shadcn color-family themes as exact zinc-neutral shadcn variants wi --accent-text: #ffffff; } + +[data-color-theme="shadcn-mono-blue"] { + --bg: #09090b; + --surface: #0c0c0e; + --card: #18181b; + --card-hover: #1f1f23; + --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%); + --border: #27272a; + + --text: #fafafa; + --text-muted: #a1a1aa; + --text-dim: #52525b; + + --todo: #a1a1aa; + --in-progress: #71717a; + --in-progress-rgb: 113, 113, 122; + --in-review: #71717a; + --triage: #a1a1aa; + --done: #52525b; + + --color-success: #71717a; + --color-warning: #a1a1aa; + --color-error: #ef4444; + --color-muted: #71717a; + + --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; + + --space-xs: 4px; + --space-sm: 6px; + --space-md: 10px; + --space-lg: 16px; + --space-xl: 20px; + --space-2xl: 28px; + + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius: var(--radius-md); + + --btn-padding: 6px 12px; + --btn-border-width: 1px; + --card-padding: 10px 12px; + --modal-padding: var(--space-md) var(--space-lg); + --header-padding: var(--space-sm) var(--space-lg); + --column-gap: var(--space-md); + --board-padding: var(--space-md) var(--space-lg); + + --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent); + --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent); + --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent); + --shadow-glow: none; + --glow-success: none; + --glow-warning: none; + --glow-danger: none; + --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent); + --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent); + --shadow: var(--shadow-lg); + + --cta-bg: #3b82f6; + --cta-border: #3b82f6; + --cta-text: #ffffff; + --cta-bg-hover: #2563eb; + --cta-border-hover: #2563eb; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #a1a1aa; + --accent: #3b82f6; + --accent-text: #ffffff; +} + + +[data-color-theme="shadcn-mono-blue"][data-theme="light"] { + --bg: #ffffff; + --surface: #ffffff; + --card: #ffffff; + --card-hover: #f4f4f5; + --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%); + --border: #e4e4e7; + + --text: #09090b; + --text-muted: #71717a; + --text-dim: #a1a1aa; + + --todo: #71717a; + --in-progress: #71717a; + --in-progress-rgb: 113, 113, 122; + --in-review: #52525b; + --triage: #71717a; + --done: #a1a1aa; + + --color-success: #71717a; + --color-warning: #71717a; + --color-error: #dc2626; + --color-muted: #71717a; + + --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent); + --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent); + --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent); + --shadow-glow: none; + --glow-success: none; + --glow-warning: none; + --glow-danger: none; + --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent); + --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent); + --shadow: var(--shadow-lg); + + --cta-bg: #2563eb; + --cta-border: #2563eb; + --cta-text: #ffffff; + --cta-bg-hover: #1d4ed8; + --cta-border-hover: #1d4ed8; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #71717a; + --accent: #2563eb; + --accent-text: #ffffff; +} + + +[data-color-theme="shadcn-mono-green"] { + --bg: #09090b; + --surface: #0c0c0e; + --card: #18181b; + --card-hover: #1f1f23; + --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%); + --border: #27272a; + + --text: #fafafa; + --text-muted: #a1a1aa; + --text-dim: #52525b; + + --todo: #a1a1aa; + --in-progress: #71717a; + --in-progress-rgb: 113, 113, 122; + --in-review: #71717a; + --triage: #a1a1aa; + --done: #52525b; + + --color-success: #71717a; + --color-warning: #a1a1aa; + --color-error: #ef4444; + --color-muted: #71717a; + + --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; + + --space-xs: 4px; + --space-sm: 6px; + --space-md: 10px; + --space-lg: 16px; + --space-xl: 20px; + --space-2xl: 28px; + + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius: var(--radius-md); + + --btn-padding: 6px 12px; + --btn-border-width: 1px; + --card-padding: 10px 12px; + --modal-padding: var(--space-md) var(--space-lg); + --header-padding: var(--space-sm) var(--space-lg); + --column-gap: var(--space-md); + --board-padding: var(--space-md) var(--space-lg); + + --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent); + --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent); + --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent); + --shadow-glow: none; + --glow-success: none; + --glow-warning: none; + --glow-danger: none; + --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent); + --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent); + --shadow: var(--shadow-lg); + + --cta-bg: #22c55e; + --cta-border: #22c55e; + --cta-text: #ffffff; + --cta-bg-hover: #16a34a; + --cta-border-hover: #16a34a; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #a1a1aa; + --accent: #22c55e; + --accent-text: #ffffff; +} + + +[data-color-theme="shadcn-mono-green"][data-theme="light"] { + --bg: #ffffff; + --surface: #ffffff; + --card: #ffffff; + --card-hover: #f4f4f5; + --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%); + --border: #e4e4e7; + + --text: #09090b; + --text-muted: #71717a; + --text-dim: #a1a1aa; + + --todo: #71717a; + --in-progress: #71717a; + --in-progress-rgb: 113, 113, 122; + --in-review: #52525b; + --triage: #71717a; + --done: #a1a1aa; + + --color-success: #71717a; + --color-warning: #71717a; + --color-error: #dc2626; + --color-muted: #71717a; + + --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent); + --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent); + --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent); + --shadow-glow: none; + --glow-success: none; + --glow-warning: none; + --glow-danger: none; + --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent); + --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent); + --shadow: var(--shadow-lg); + + --cta-bg: #16a34a; + --cta-border: #16a34a; + --cta-text: #ffffff; + --cta-bg-hover: #15803d; + --cta-border-hover: #15803d; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #71717a; + --accent: #16a34a; + --accent-text: #ffffff; +} + + +[data-color-theme="shadcn-mono-purple"] { + --bg: #09090b; + --surface: #0c0c0e; + --card: #18181b; + --card-hover: #1f1f23; + --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%); + --border: #27272a; + + --text: #fafafa; + --text-muted: #a1a1aa; + --text-dim: #52525b; + + --todo: #a1a1aa; + --in-progress: #71717a; + --in-progress-rgb: 113, 113, 122; + --in-review: #71717a; + --triage: #a1a1aa; + --done: #52525b; + + --color-success: #71717a; + --color-warning: #a1a1aa; + --color-error: #ef4444; + --color-muted: #71717a; + + --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; + + --space-xs: 4px; + --space-sm: 6px; + --space-md: 10px; + --space-lg: 16px; + --space-xl: 20px; + --space-2xl: 28px; + + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius: var(--radius-md); + + --btn-padding: 6px 12px; + --btn-border-width: 1px; + --card-padding: 10px 12px; + --modal-padding: var(--space-md) var(--space-lg); + --header-padding: var(--space-sm) var(--space-lg); + --column-gap: var(--space-md); + --board-padding: var(--space-md) var(--space-lg); + + --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent); + --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent); + --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent); + --shadow-glow: none; + --glow-success: none; + --glow-warning: none; + --glow-danger: none; + --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent); + --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent); + --shadow: var(--shadow-lg); + + --cta-bg: #8b5cf6; + --cta-border: #8b5cf6; + --cta-text: #ffffff; + --cta-bg-hover: #7c3aed; + --cta-border-hover: #7c3aed; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #a1a1aa; + --accent: #8b5cf6; + --accent-text: #ffffff; +} + + +[data-color-theme="shadcn-mono-purple"][data-theme="light"] { + --bg: #ffffff; + --surface: #ffffff; + --card: #ffffff; + --card-hover: #f4f4f5; + --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%); + --border: #e4e4e7; + + --text: #09090b; + --text-muted: #71717a; + --text-dim: #a1a1aa; + + --todo: #71717a; + --in-progress: #71717a; + --in-progress-rgb: 113, 113, 122; + --in-review: #52525b; + --triage: #71717a; + --done: #a1a1aa; + + --color-success: #71717a; + --color-warning: #71717a; + --color-error: #dc2626; + --color-muted: #71717a; + + --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent); + --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent); + --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent); + --shadow-glow: none; + --glow-success: none; + --glow-warning: none; + --glow-danger: none; + --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent); + --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent); + --shadow: var(--shadow-lg); + + --cta-bg: #7c3aed; + --cta-border: #7c3aed; + --cta-text: #ffffff; + --cta-bg-hover: #6d28d9; + --cta-border-hover: #6d28d9; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #71717a; + --accent: #7c3aed; + --accent-text: #ffffff; +} + + +[data-color-theme="shadcn-mono-pink"] { + --bg: #09090b; + --surface: #0c0c0e; + --card: #18181b; + --card-hover: #1f1f23; + --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%); + --border: #27272a; + + --text: #fafafa; + --text-muted: #a1a1aa; + --text-dim: #52525b; + + --todo: #a1a1aa; + --in-progress: #71717a; + --in-progress-rgb: 113, 113, 122; + --in-review: #71717a; + --triage: #a1a1aa; + --done: #52525b; + + --color-success: #71717a; + --color-warning: #a1a1aa; + --color-error: #ef4444; + --color-muted: #71717a; + + --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; + + --space-xs: 4px; + --space-sm: 6px; + --space-md: 10px; + --space-lg: 16px; + --space-xl: 20px; + --space-2xl: 28px; + + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius: var(--radius-md); + + --btn-padding: 6px 12px; + --btn-border-width: 1px; + --card-padding: 10px 12px; + --modal-padding: var(--space-md) var(--space-lg); + --header-padding: var(--space-sm) var(--space-lg); + --column-gap: var(--space-md); + --board-padding: var(--space-md) var(--space-lg); + + --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent); + --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent); + --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent); + --shadow-glow: none; + --glow-success: none; + --glow-warning: none; + --glow-danger: none; + --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent); + --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent); + --shadow: var(--shadow-lg); + + --cta-bg: #ec4899; + --cta-border: #ec4899; + --cta-text: #ffffff; + --cta-bg-hover: #db2777; + --cta-border-hover: #db2777; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #a1a1aa; + --accent: #ec4899; + --accent-text: #ffffff; +} + + +[data-color-theme="shadcn-mono-pink"][data-theme="light"] { + --bg: #ffffff; + --surface: #ffffff; + --card: #ffffff; + --card-hover: #f4f4f5; + --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%); + --border: #e4e4e7; + + --text: #09090b; + --text-muted: #71717a; + --text-dim: #a1a1aa; + + --todo: #71717a; + --in-progress: #71717a; + --in-progress-rgb: 113, 113, 122; + --in-review: #52525b; + --triage: #71717a; + --done: #a1a1aa; + + --color-success: #71717a; + --color-warning: #71717a; + --color-error: #dc2626; + --color-muted: #71717a; + + --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent); + --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent); + --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent); + --shadow-glow: none; + --glow-success: none; + --glow-warning: none; + --glow-danger: none; + --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent); + --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent); + --shadow: var(--shadow-lg); + + --cta-bg: #db2777; + --cta-border: #db2777; + --cta-text: #ffffff; + --cta-bg-hover: #be185d; + --cta-border-hover: #be185d; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #71717a; + --accent: #db2777; + --accent-text: #ffffff; +} + + +[data-color-theme="shadcn-mono-orange"] { + --bg: #09090b; + --surface: #0c0c0e; + --card: #18181b; + --card-hover: #1f1f23; + --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%); + --border: #27272a; + + --text: #fafafa; + --text-muted: #a1a1aa; + --text-dim: #52525b; + + --todo: #a1a1aa; + --in-progress: #71717a; + --in-progress-rgb: 113, 113, 122; + --in-review: #71717a; + --triage: #a1a1aa; + --done: #52525b; + + --color-success: #71717a; + --color-warning: #a1a1aa; + --color-error: #ef4444; + --color-muted: #71717a; + + --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; + + --space-xs: 4px; + --space-sm: 6px; + --space-md: 10px; + --space-lg: 16px; + --space-xl: 20px; + --space-2xl: 28px; + + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius: var(--radius-md); + + --btn-padding: 6px 12px; + --btn-border-width: 1px; + --card-padding: 10px 12px; + --modal-padding: var(--space-md) var(--space-lg); + --header-padding: var(--space-sm) var(--space-lg); + --column-gap: var(--space-md); + --board-padding: var(--space-md) var(--space-lg); + + --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent); + --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent); + --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent); + --shadow-glow: none; + --glow-success: none; + --glow-warning: none; + --glow-danger: none; + --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent); + --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent); + --shadow: var(--shadow-lg); + + --cta-bg: #f97316; + --cta-border: #f97316; + --cta-text: #ffffff; + --cta-bg-hover: #ea580c; + --cta-border-hover: #ea580c; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #a1a1aa; + --accent: #f97316; + --accent-text: #ffffff; +} + + +[data-color-theme="shadcn-mono-orange"][data-theme="light"] { + --bg: #ffffff; + --surface: #ffffff; + --card: #ffffff; + --card-hover: #f4f4f5; + --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%); + --border: #e4e4e7; + + --text: #09090b; + --text-muted: #71717a; + --text-dim: #a1a1aa; + + --todo: #71717a; + --in-progress: #71717a; + --in-progress-rgb: 113, 113, 122; + --in-review: #52525b; + --triage: #71717a; + --done: #a1a1aa; + + --color-success: #71717a; + --color-warning: #71717a; + --color-error: #dc2626; + --color-muted: #71717a; + + --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent); + --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent); + --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent); + --shadow-glow: none; + --glow-success: none; + --glow-warning: none; + --glow-danger: none; + --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent); + --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent); + --shadow: var(--shadow-lg); + + --cta-bg: #ea580c; + --cta-border: #ea580c; + --cta-text: #ffffff; + --cta-bg-hover: #c2410c; + --cta-border-hover: #c2410c; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #71717a; + --accent: #ea580c; + --accent-text: #ffffff; +} + + +[data-color-theme="shadcn-mono-yellow"] { + --bg: #09090b; + --surface: #0c0c0e; + --card: #18181b; + --card-hover: #1f1f23; + --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%); + --border: #27272a; + + --text: #fafafa; + --text-muted: #a1a1aa; + --text-dim: #52525b; + + --todo: #a1a1aa; + --in-progress: #71717a; + --in-progress-rgb: 113, 113, 122; + --in-review: #71717a; + --triage: #a1a1aa; + --done: #52525b; + + --color-success: #71717a; + --color-warning: #a1a1aa; + --color-error: #ef4444; + --color-muted: #71717a; + + --font-primary: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; + + --space-xs: 4px; + --space-sm: 6px; + --space-md: 10px; + --space-lg: 16px; + --space-xl: 20px; + --space-2xl: 28px; + + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius: var(--radius-md); + + --btn-padding: 6px 12px; + --btn-border-width: 1px; + --card-padding: 10px 12px; + --modal-padding: var(--space-md) var(--space-lg); + --header-padding: var(--space-sm) var(--space-lg); + --column-gap: var(--space-md); + --board-padding: var(--space-md) var(--space-lg); + + --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 18%, transparent); + --shadow-md: 0 1px 3px color-mix(in srgb, #000000 22%, transparent); + --shadow-lg: 0 4px 12px color-mix(in srgb, #000000 24%, transparent); + --shadow-glow: none; + --glow-success: none; + --glow-warning: none; + --glow-danger: none; + --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 35%, transparent); + --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 45%, transparent); + --shadow: var(--shadow-lg); + + --cta-bg: #eab308; + --cta-border: #eab308; + --cta-text: #18181b; + --cta-bg-hover: #ca8a04; + --cta-border-hover: #ca8a04; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #a1a1aa; + --accent: #eab308; + --accent-text: #18181b; +} + + +[data-color-theme="shadcn-mono-yellow"][data-theme="light"] { + --bg: #ffffff; + --surface: #ffffff; + --card: #ffffff; + --card-hover: #f4f4f5; + --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%); + --border: #e4e4e7; + + --text: #09090b; + --text-muted: #71717a; + --text-dim: #a1a1aa; + + --todo: #71717a; + --in-progress: #71717a; + --in-progress-rgb: 113, 113, 122; + --in-review: #52525b; + --triage: #71717a; + --done: #a1a1aa; + + --color-success: #71717a; + --color-warning: #71717a; + --color-error: #dc2626; + --color-muted: #71717a; + + --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent); + --shadow-md: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent); + --shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent); + --shadow-glow: none; + --glow-success: none; + --glow-warning: none; + --glow-danger: none; + --focus-ring: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 18%, transparent); + --focus-ring-strong: 0 0 0 calc(var(--btn-border-width) * 3) color-mix(in srgb, var(--accent) 28%, transparent); + --shadow: var(--shadow-lg); + + --cta-bg: #ca8a04; + --cta-border: #ca8a04; + --cta-text: #18181b; + --cta-bg-hover: #a16207; + --cta-border-hover: #a16207; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #71717a; + --accent: #ca8a04; + --accent-text: #18181b; +} + + [data-color-theme="shadcn-black"] { --bg: #09090b; --surface: #0c0c0e; @@ -2592,7 +3318,13 @@ Shadcn Gray is the fully-neutral zinc variant: it keeps the shadcn surfaces and [data-color-theme="shadcn-pink"] .card.agent-active, [data-color-theme="shadcn-orange"] .card.agent-active, [data-color-theme="shadcn-yellow"] .card.agent-active, -[data-color-theme="shadcn-mono"] .card.agent-active, +[data-color-theme="shadcn-mono-red"] .card.agent-active, +[data-color-theme="shadcn-mono-blue"] .card.agent-active, +[data-color-theme="shadcn-mono-green"] .card.agent-active, +[data-color-theme="shadcn-mono-purple"] .card.agent-active, +[data-color-theme="shadcn-mono-pink"] .card.agent-active, +[data-color-theme="shadcn-mono-orange"] .card.agent-active, +[data-color-theme="shadcn-mono-yellow"] .card.agent-active, [data-color-theme="shadcn-black"] .card.agent-active, [data-color-theme="shadcn-gray"] .card.agent-active { border-color: var(--accent); @@ -2607,7 +3339,13 @@ Shadcn Gray is the fully-neutral zinc variant: it keeps the shadcn surfaces and [data-color-theme="shadcn-pink"][data-theme="light"] .card.agent-active, [data-color-theme="shadcn-orange"][data-theme="light"] .card.agent-active, [data-color-theme="shadcn-yellow"][data-theme="light"] .card.agent-active, -[data-color-theme="shadcn-mono"][data-theme="light"] .card.agent-active, +[data-color-theme="shadcn-mono-red"][data-theme="light"] .card.agent-active, +[data-color-theme="shadcn-mono-blue"][data-theme="light"] .card.agent-active, +[data-color-theme="shadcn-mono-green"][data-theme="light"] .card.agent-active, +[data-color-theme="shadcn-mono-purple"][data-theme="light"] .card.agent-active, +[data-color-theme="shadcn-mono-pink"][data-theme="light"] .card.agent-active, +[data-color-theme="shadcn-mono-orange"][data-theme="light"] .card.agent-active, +[data-color-theme="shadcn-mono-yellow"][data-theme="light"] .card.agent-active, [data-color-theme="shadcn-black"][data-theme="light"] .card.agent-active, [data-color-theme="shadcn-gray"][data-theme="light"] .card.agent-active { border-color: var(--accent); @@ -2622,7 +3360,13 @@ Shadcn Gray is the fully-neutral zinc variant: it keeps the shadcn surfaces and [data-color-theme="shadcn-pink"] .btn, [data-color-theme="shadcn-orange"] .btn, [data-color-theme="shadcn-yellow"] .btn, -[data-color-theme="shadcn-mono"] .btn, +[data-color-theme="shadcn-mono-red"] .btn, +[data-color-theme="shadcn-mono-blue"] .btn, +[data-color-theme="shadcn-mono-green"] .btn, +[data-color-theme="shadcn-mono-purple"] .btn, +[data-color-theme="shadcn-mono-pink"] .btn, +[data-color-theme="shadcn-mono-orange"] .btn, +[data-color-theme="shadcn-mono-yellow"] .btn, [data-color-theme="shadcn-black"] .btn, [data-color-theme="shadcn-gray"] .btn { text-transform: none; @@ -2644,8 +3388,20 @@ Shadcn Gray is the fully-neutral zinc variant: it keeps the shadcn surfaces and [data-color-theme="shadcn-orange"] .btn-task-create, [data-color-theme="shadcn-yellow"] .btn-primary, [data-color-theme="shadcn-yellow"] .btn-task-create, -[data-color-theme="shadcn-mono"] .btn-primary, -[data-color-theme="shadcn-mono"] .btn-task-create, +[data-color-theme="shadcn-mono-red"] .btn-primary, +[data-color-theme="shadcn-mono-red"] .btn-task-create, +[data-color-theme="shadcn-mono-blue"] .btn-primary, +[data-color-theme="shadcn-mono-blue"] .btn-task-create, +[data-color-theme="shadcn-mono-green"] .btn-primary, +[data-color-theme="shadcn-mono-green"] .btn-task-create, +[data-color-theme="shadcn-mono-purple"] .btn-primary, +[data-color-theme="shadcn-mono-purple"] .btn-task-create, +[data-color-theme="shadcn-mono-pink"] .btn-primary, +[data-color-theme="shadcn-mono-pink"] .btn-task-create, +[data-color-theme="shadcn-mono-orange"] .btn-primary, +[data-color-theme="shadcn-mono-orange"] .btn-task-create, +[data-color-theme="shadcn-mono-yellow"] .btn-primary, +[data-color-theme="shadcn-mono-yellow"] .btn-task-create, [data-color-theme="shadcn-black"] .btn-primary, [data-color-theme="shadcn-black"] .btn-task-create, [data-color-theme="shadcn-gray"] .btn-primary, @@ -2670,8 +3426,20 @@ Shadcn Gray is the fully-neutral zinc variant: it keeps the shadcn surfaces and [data-color-theme="shadcn-orange"] .btn-task-create:hover, [data-color-theme="shadcn-yellow"] .btn-primary:hover, [data-color-theme="shadcn-yellow"] .btn-task-create:hover, -[data-color-theme="shadcn-mono"] .btn-primary:hover, -[data-color-theme="shadcn-mono"] .btn-task-create:hover, +[data-color-theme="shadcn-mono-red"] .btn-primary:hover, +[data-color-theme="shadcn-mono-red"] .btn-task-create:hover, +[data-color-theme="shadcn-mono-blue"] .btn-primary:hover, +[data-color-theme="shadcn-mono-blue"] .btn-task-create:hover, +[data-color-theme="shadcn-mono-green"] .btn-primary:hover, +[data-color-theme="shadcn-mono-green"] .btn-task-create:hover, +[data-color-theme="shadcn-mono-purple"] .btn-primary:hover, +[data-color-theme="shadcn-mono-purple"] .btn-task-create:hover, +[data-color-theme="shadcn-mono-pink"] .btn-primary:hover, +[data-color-theme="shadcn-mono-pink"] .btn-task-create:hover, +[data-color-theme="shadcn-mono-orange"] .btn-primary:hover, +[data-color-theme="shadcn-mono-orange"] .btn-task-create:hover, +[data-color-theme="shadcn-mono-yellow"] .btn-primary:hover, +[data-color-theme="shadcn-mono-yellow"] .btn-task-create:hover, [data-color-theme="shadcn-black"] .btn-primary:hover, [data-color-theme="shadcn-black"] .btn-task-create:hover, [data-color-theme="shadcn-gray"] .btn-primary:hover, @@ -2696,8 +3464,20 @@ Shadcn Gray is the fully-neutral zinc variant: it keeps the shadcn surfaces and [data-color-theme="shadcn-orange"] .column, [data-color-theme="shadcn-yellow"] .card, [data-color-theme="shadcn-yellow"] .column, -[data-color-theme="shadcn-mono"] .card, -[data-color-theme="shadcn-mono"] .column, +[data-color-theme="shadcn-mono-red"] .card, +[data-color-theme="shadcn-mono-red"] .column, +[data-color-theme="shadcn-mono-blue"] .card, +[data-color-theme="shadcn-mono-blue"] .column, +[data-color-theme="shadcn-mono-green"] .card, +[data-color-theme="shadcn-mono-green"] .column, +[data-color-theme="shadcn-mono-purple"] .card, +[data-color-theme="shadcn-mono-purple"] .column, +[data-color-theme="shadcn-mono-pink"] .card, +[data-color-theme="shadcn-mono-pink"] .column, +[data-color-theme="shadcn-mono-orange"] .card, +[data-color-theme="shadcn-mono-orange"] .column, +[data-color-theme="shadcn-mono-yellow"] .card, +[data-color-theme="shadcn-mono-yellow"] .column, [data-color-theme="shadcn-black"] .card, [data-color-theme="shadcn-black"] .column, [data-color-theme="shadcn-gray"] .card,