From da5fea6e11e70213fdb181b56349a5b5b148a24d Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Sat, 20 Jun 2026 17:17:32 -0700 Subject: [PATCH] FN-6756: add Shadcn color theme variants Add the Shadcn color family to dashboard theme selection and persisted theme validation. - Register blue, green, red, purple, pink, orange, yellow, mono, and black Shadcn theme IDs across core and dashboard selectors. - Add swatches and CSS token blocks for light and dark variants, including bootstrap loading coverage. - Document the expanded theme count and include a minor changeset for the published CLI package. Files changed: .changeset/shadcn-color-variants.md | 5 + docs/dashboard-guide.md | 2 +- packages/core/src/types.ts | 10 + .../dashboard/app/components/ThemeSelector.css | 126 +++ packages/dashboard/app/components/themeOptions.ts | 9 + .../dashboard/app/hooks/__tests__/useTheme.test.ts | 41 + packages/dashboard/app/index.html | 2 +- packages/dashboard/app/public/theme-data.css | 1177 ++++++++++++++++++++ 8 files changed, 1370 insertions(+), 2 deletions(-) Fusion-Task-Id: FN-6756 Fusion-Task-Lineage: 143e717a-9718-419f-a6c5-34305e53c65d --- .changeset/shadcn-color-variants.md | 5 + docs/dashboard-guide.md | 2 +- packages/core/src/types.ts | 10 + .../app/components/ThemeSelector.css | 126 ++ .../dashboard/app/components/themeOptions.ts | 9 + .../app/hooks/__tests__/useTheme.test.ts | 41 + packages/dashboard/app/index.html | 2 +- packages/dashboard/app/public/theme-data.css | 1177 +++++++++++++++++ 8 files changed, 1370 insertions(+), 2 deletions(-) create mode 100644 .changeset/shadcn-color-variants.md diff --git a/.changeset/shadcn-color-variants.md b/.changeset/shadcn-color-variants.md new file mode 100644 index 0000000000..826b9a55a5 --- /dev/null +++ b/.changeset/shadcn-color-variants.md @@ -0,0 +1,5 @@ +--- +"@runfusion/fusion": minor +--- + +Add Shadcn color-variant dashboard themes for blue, green, red, purple, pink, orange, yellow, mono, and black variants. diff --git a/docs/dashboard-guide.md b/docs/dashboard-guide.md index 374f0ac53c..9317f36997 100644 --- a/docs/dashboard-guide.md +++ b/docs/dashboard-guide.md @@ -1280,7 +1280,7 @@ Non-Command-Center dashboard CSS uses `--text` as the canonical primary text tok ### Theme system -Dark/light modes via `data-theme`; 57 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. Air is the minimal, borderless, paper-like preset with near-monochrome tokens and CSS-only chrome flattening. +Dark/light modes via `data-theme`; 66 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), and Shadcn Black (pure black and white). 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 28e58ee1d9..5bca54843c 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -330,6 +330,16 @@ 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. + "shadcn-blue", + "shadcn-green", + "shadcn-red", + "shadcn-purple", + "shadcn-pink", + "shadcn-orange", + "shadcn-yellow", + "shadcn-mono", + "shadcn-black", ] 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 aa8362f214..7d809e483d 100644 --- a/packages/dashboard/app/components/ThemeSelector.css +++ b/packages/dashboard/app/components/ThemeSelector.css @@ -388,6 +388,69 @@ --swatch-sample-4: #27272a; } +.theme-swatch-shadcn-blue { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #3b82f6; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-green { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #22c55e; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-red { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #ef4444; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-purple { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #8b5cf6; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-pink { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #ec4899; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-orange { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #f97316; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-yellow { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #eab308; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-mono { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #ef4444; + --swatch-sample-4: #27272a; +} + +.theme-swatch-shadcn-black { + --swatch-sample-1: #09090b; + --swatch-sample-2: #18181b; + --swatch-sample-3: #fafafa; + --swatch-sample-4: #27272a; +} + .theme-swatch-ayu { --swatch-sample-1: #0f1419; --swatch-sample-2: #131d27; @@ -606,6 +669,69 @@ --swatch-sample-4: #e4e4e7; } +[data-theme="light"] .theme-swatch-shadcn-blue { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #2563eb; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-green { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #16a34a; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-red { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #dc2626; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-purple { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #7c3aed; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-pink { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #db2777; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-orange { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #ea580c; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-yellow { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #ca8a04; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-mono { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #dc2626; + --swatch-sample-4: #e4e4e7; +} + +[data-theme="light"] .theme-swatch-shadcn-black { + --swatch-sample-1: #ffffff; + --swatch-sample-2: #f4f4f5; + --swatch-sample-3: #09090b; + --swatch-sample-4: #e4e4e7; +} + [data-theme="light"] .theme-swatch-ayu { --swatch-sample-1: #fafafa; --swatch-sample-2: #f3f3f3; diff --git a/packages/dashboard/app/components/themeOptions.ts b/packages/dashboard/app/components/themeOptions.ts index 7f801d8153..fd6d1894ac 100644 --- a/packages/dashboard/app/components/themeOptions.ts +++ b/packages/dashboard/app/components/themeOptions.ts @@ -69,4 +69,13 @@ export const COLOR_THEMES: { value: ColorTheme; label: string; className: string { value: "neon-bloom", label: "Neon Bloom", className: "theme-swatch-neon-bloom" }, { value: "sepia", label: "Sepia", className: "theme-swatch-sepia" }, { value: "shadcn", label: "Shadcn", className: "theme-swatch-shadcn" }, + { value: "shadcn-blue", label: "Shadcn Blue", className: "theme-swatch-shadcn-blue" }, + { value: "shadcn-green", label: "Shadcn Green", className: "theme-swatch-shadcn-green" }, + { value: "shadcn-red", label: "Shadcn Red", className: "theme-swatch-shadcn-red" }, + { value: "shadcn-purple", label: "Shadcn Purple", className: "theme-swatch-shadcn-purple" }, + { 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-black", label: "Shadcn Black", className: "theme-swatch-shadcn-black" }, ]; diff --git a/packages/dashboard/app/hooks/__tests__/useTheme.test.ts b/packages/dashboard/app/hooks/__tests__/useTheme.test.ts index cac64ebc14..af44eb5410 100644 --- a/packages/dashboard/app/hooks/__tests__/useTheme.test.ts +++ b/packages/dashboard/app/hooks/__tests__/useTheme.test.ts @@ -551,6 +551,47 @@ describe("useTheme", () => { document.head.removeChild(style); }); + it("applies representative shadcn color-family design tokens with neutralized glow effects", () => { + const style = document.createElement("style"); + const baseCss = readFileSync(resolve(PACKAGE_ROOT, "app/styles.css"), "utf8"); + 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-black", accent: "#fafafa" }, + ] as const; + style.textContent = `${baseCss}\n${themeDataCss}`; + document.head.appendChild(style); + + for (const variant of shadcnVariants) { + const block = themeDataCss.match( + new RegExp(`\\[data-color-theme="${variant.id}"\\] \\{(?[\\s\\S]*?)\\n\\}`), + )?.groups?.body; + expect(block).toBeDefined(); + + localStorageMock[COLOR_THEME_STORAGE_KEY] = variant.id; + renderHook(() => useTheme()); + + expect(document.documentElement.getAttribute("data-color-theme")).toBe(variant.id); + expect(block).toContain("--btn-border-width: 1px;"); + expect(block).toContain(`--accent: ${variant.accent};`); + 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 blueBlock = themeDataCss.match(/\[data-color-theme="shadcn-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(blackBlock).toContain("--todo: #d4d4d8;"); + expect(blackBlock).toContain("--in-progress: #a1a1aa;"); + expect(blackBlock).not.toContain("--todo: #60a5fa;"); + + document.head.removeChild(style); + }); + it("supports all valid theme modes", () => { const { result } = renderHook(() => useTheme()); diff --git a/packages/dashboard/app/index.html b/packages/dashboard/app/index.html index d0a46ec21f..7d49303281 100644 --- a/packages/dashboard/app/index.html +++ b/packages/dashboard/app/index.html @@ -160,7 +160,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', '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']; + 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']; 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 a5fb639912..c0c71832df 100644 --- a/packages/dashboard/app/public/theme-data.css +++ b/packages/dashboard/app/public/theme-data.css @@ -1397,6 +1397,1183 @@ FN-6758 makes the default shadcn highlight/accent orange for focus rings, active border-width: var(--btn-border-width); } +/* +FNXC:Theming 2026-06-19-16:12: +FN-6756 adds shadcn color-family themes as exact zinc-neutral shadcn variants with only primary/accent/CTA/info tokens changed for the named color. Shadcn Mono keeps red as the single accent while desaturating workflow statuses toward zinc gray, and Shadcn Black removes chroma from all status tokens for a pure black-and-white option. +*/ +[data-color-theme="shadcn-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: #60a5fa; + --in-progress: #38bdf8; + --in-progress-rgb: 56, 189, 248; + --in-review: #34d399; + --triage: #f59e0b; + --done: #71717a; + + --color-success: #22c55e; + --color-warning: #f59e0b; + --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: #3b82f6; + --accent: #3b82f6; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-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: #2563eb; + --in-progress: #0284c7; + --in-progress-rgb: 2, 132, 199; + --in-review: #16a34a; + --triage: #d97706; + --done: #a1a1aa; + + --color-success: #16a34a; + --color-warning: #d97706; + --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: #2563eb; + --accent: #2563eb; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-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: #60a5fa; + --in-progress: #38bdf8; + --in-progress-rgb: 56, 189, 248; + --in-review: #34d399; + --triage: #f59e0b; + --done: #71717a; + + --color-success: #22c55e; + --color-warning: #f59e0b; + --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: #22c55e; + --accent: #22c55e; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-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: #2563eb; + --in-progress: #0284c7; + --in-progress-rgb: 2, 132, 199; + --in-review: #16a34a; + --triage: #d97706; + --done: #a1a1aa; + + --color-success: #16a34a; + --color-warning: #d97706; + --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: #16a34a; + --accent: #16a34a; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-red"] { + --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: #60a5fa; + --in-progress: #38bdf8; + --in-progress-rgb: 56, 189, 248; + --in-review: #34d399; + --triage: #f59e0b; + --done: #71717a; + + --color-success: #22c55e; + --color-warning: #f59e0b; + --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: #ef4444; + --cta-border: #ef4444; + --cta-text: #ffffff; + --cta-bg-hover: #dc2626; + --cta-border-hover: #dc2626; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #ef4444; + --accent: #ef4444; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-red"][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: #2563eb; + --in-progress: #0284c7; + --in-progress-rgb: 2, 132, 199; + --in-review: #16a34a; + --triage: #d97706; + --done: #a1a1aa; + + --color-success: #16a34a; + --color-warning: #d97706; + --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: #dc2626; + --cta-border: #dc2626; + --cta-text: #ffffff; + --cta-bg-hover: #b91c1c; + --cta-border-hover: #b91c1c; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #dc2626; + --accent: #dc2626; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-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: #60a5fa; + --in-progress: #38bdf8; + --in-progress-rgb: 56, 189, 248; + --in-review: #34d399; + --triage: #f59e0b; + --done: #71717a; + + --color-success: #22c55e; + --color-warning: #f59e0b; + --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: #8b5cf6; + --accent: #8b5cf6; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-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: #2563eb; + --in-progress: #0284c7; + --in-progress-rgb: 2, 132, 199; + --in-review: #16a34a; + --triage: #d97706; + --done: #a1a1aa; + + --color-success: #16a34a; + --color-warning: #d97706; + --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: #7c3aed; + --accent: #7c3aed; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-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: #60a5fa; + --in-progress: #38bdf8; + --in-progress-rgb: 56, 189, 248; + --in-review: #34d399; + --triage: #f59e0b; + --done: #71717a; + + --color-success: #22c55e; + --color-warning: #f59e0b; + --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: #ec4899; + --accent: #ec4899; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-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: #2563eb; + --in-progress: #0284c7; + --in-progress-rgb: 2, 132, 199; + --in-review: #16a34a; + --triage: #d97706; + --done: #a1a1aa; + + --color-success: #16a34a; + --color-warning: #d97706; + --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: #db2777; + --accent: #db2777; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-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: #60a5fa; + --in-progress: #38bdf8; + --in-progress-rgb: 56, 189, 248; + --in-review: #34d399; + --triage: #f59e0b; + --done: #71717a; + + --color-success: #22c55e; + --color-warning: #f59e0b; + --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: #f97316; + --accent: #f97316; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-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: #2563eb; + --in-progress: #0284c7; + --in-progress-rgb: 2, 132, 199; + --in-review: #16a34a; + --triage: #d97706; + --done: #a1a1aa; + + --color-success: #16a34a; + --color-warning: #d97706; + --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: #ea580c; + --accent: #ea580c; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-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: #60a5fa; + --in-progress: #38bdf8; + --in-progress-rgb: 56, 189, 248; + --in-review: #34d399; + --triage: #f59e0b; + --done: #71717a; + + --color-success: #22c55e; + --color-warning: #f59e0b; + --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: #eab308; + --accent: #eab308; + --accent-text: #18181b; +} + +[data-color-theme="shadcn-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: #2563eb; + --in-progress: #0284c7; + --in-progress-rgb: 2, 132, 199; + --in-review: #16a34a; + --triage: #d97706; + --done: #a1a1aa; + + --color-success: #16a34a; + --color-warning: #d97706; + --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: #ca8a04; + --accent: #ca8a04; + --accent-text: #18181b; +} + +[data-color-theme="shadcn-mono"] { + --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: #ef4444; + --cta-border: #ef4444; + --cta-text: #ffffff; + --cta-bg-hover: #dc2626; + --cta-border-hover: #dc2626; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #a1a1aa; + --accent: #ef4444; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-mono"][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: #dc2626; + --cta-border: #dc2626; + --cta-text: #ffffff; + --cta-bg-hover: #b91c1c; + --cta-border-hover: #b91c1c; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #71717a; + --accent: #dc2626; + --accent-text: #ffffff; +} + +[data-color-theme="shadcn-black"] { + --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: #d4d4d8; + --in-progress: #a1a1aa; + --in-progress-rgb: 161, 161, 170; + --in-review: #a1a1aa; + --triage: #71717a; + --done: #52525b; + + --color-success: #a1a1aa; + --color-warning: #71717a; + --color-error: #d4d4d8; + --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: #fafafa; + --cta-border: #fafafa; + --cta-text: #18181b; + --cta-bg-hover: #e4e4e7; + --cta-border-hover: #e4e4e7; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #fafafa; + --accent: #fafafa; + --accent-text: #18181b; +} + +[data-color-theme="shadcn-black"][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: #18181b; + --in-progress: #3f3f46; + --in-progress-rgb: 63, 63, 70; + --in-review: #52525b; + --triage: #71717a; + --done: #a1a1aa; + + --color-success: #3f3f46; + --color-warning: #71717a; + --color-error: #18181b; + --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: #09090b; + --cta-border: #09090b; + --cta-text: #fafafa; + --cta-bg-hover: #27272a; + --cta-border-hover: #27272a; + --cta-glow: none; + --logo-accent: var(--accent); + --color-info: #09090b; + --accent: #09090b; + --accent-text: #fafafa; +} + +[data-color-theme="shadcn-blue"] .card.agent-active, +[data-color-theme="shadcn-green"] .card.agent-active, +[data-color-theme="shadcn-red"] .card.agent-active, +[data-color-theme="shadcn-purple"] .card.agent-active, +[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-black"] .card.agent-active { + border-color: var(--accent); + box-shadow: none; + animation: none; +} + +[data-color-theme="shadcn-blue"][data-theme="light"] .card.agent-active, +[data-color-theme="shadcn-green"][data-theme="light"] .card.agent-active, +[data-color-theme="shadcn-red"][data-theme="light"] .card.agent-active, +[data-color-theme="shadcn-purple"][data-theme="light"] .card.agent-active, +[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-black"][data-theme="light"] .card.agent-active { + border-color: var(--accent); + box-shadow: none; + animation: none; +} + +[data-color-theme="shadcn-blue"] .btn, +[data-color-theme="shadcn-green"] .btn, +[data-color-theme="shadcn-red"] .btn, +[data-color-theme="shadcn-purple"] .btn, +[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-black"] .btn { + text-transform: none; + letter-spacing: normal; + font-weight: 500; +} + +[data-color-theme="shadcn-blue"] .btn-primary, +[data-color-theme="shadcn-blue"] .btn-task-create, +[data-color-theme="shadcn-green"] .btn-primary, +[data-color-theme="shadcn-green"] .btn-task-create, +[data-color-theme="shadcn-red"] .btn-primary, +[data-color-theme="shadcn-red"] .btn-task-create, +[data-color-theme="shadcn-purple"] .btn-primary, +[data-color-theme="shadcn-purple"] .btn-task-create, +[data-color-theme="shadcn-pink"] .btn-primary, +[data-color-theme="shadcn-pink"] .btn-task-create, +[data-color-theme="shadcn-orange"] .btn-primary, +[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-black"] .btn-primary, +[data-color-theme="shadcn-black"] .btn-task-create { + background: var(--cta-bg); + border-color: var(--cta-border); + color: var(--cta-text); + box-shadow: none; +} + +[data-color-theme="shadcn-blue"] .btn-primary:hover, +[data-color-theme="shadcn-blue"] .btn-task-create:hover, +[data-color-theme="shadcn-green"] .btn-primary:hover, +[data-color-theme="shadcn-green"] .btn-task-create:hover, +[data-color-theme="shadcn-red"] .btn-primary:hover, +[data-color-theme="shadcn-red"] .btn-task-create:hover, +[data-color-theme="shadcn-purple"] .btn-primary:hover, +[data-color-theme="shadcn-purple"] .btn-task-create:hover, +[data-color-theme="shadcn-pink"] .btn-primary:hover, +[data-color-theme="shadcn-pink"] .btn-task-create:hover, +[data-color-theme="shadcn-orange"] .btn-primary:hover, +[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-black"] .btn-primary:hover, +[data-color-theme="shadcn-black"] .btn-task-create:hover { + background: var(--cta-bg-hover); + border-color: var(--cta-border-hover); + color: var(--cta-text); + box-shadow: none; +} + +[data-color-theme="shadcn-blue"] .card, +[data-color-theme="shadcn-blue"] .column, +[data-color-theme="shadcn-green"] .card, +[data-color-theme="shadcn-green"] .column, +[data-color-theme="shadcn-red"] .card, +[data-color-theme="shadcn-red"] .column, +[data-color-theme="shadcn-purple"] .card, +[data-color-theme="shadcn-purple"] .column, +[data-color-theme="shadcn-pink"] .card, +[data-color-theme="shadcn-pink"] .column, +[data-color-theme="shadcn-orange"] .card, +[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-black"] .card, +[data-color-theme="shadcn-black"] .column { + border-width: var(--btn-border-width); +} + /* AYU - Popular code editor theme with dark and light variants */ [data-color-theme="ayu"] { --bg: #0f1419;