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
This commit is contained in:
gsxdsm
5
.changeset/shadcn-mono-color-family.md
Normal file
5
.changeset/shadcn-mono-color-family.md
Normal file
@@ -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`.
|
||||
@@ -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.
|
||||
|
||||
@@ -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];
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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" },
|
||||
|
||||
@@ -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"\] \{(?<body>[\s\S]*?)\n\}/)?.groups
|
||||
?.body;
|
||||
const monoRedBlock = themeDataCss.match(/\[data-color-theme="shadcn-mono-red"\] \{(?<body>[\s\S]*?)\n\}/)
|
||||
?.groups?.body;
|
||||
const monoBlueBlock = themeDataCss.match(/\[data-color-theme="shadcn-mono-blue"\] \{(?<body>[\s\S]*?)\n\}/)
|
||||
?.groups?.body;
|
||||
const blackBlock = themeDataCss.match(/\[data-color-theme="shadcn-black"\] \{(?<body>[\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'");
|
||||
});
|
||||
|
||||
|
||||
@@ -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';
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user