a4049971e5
Adds a frosted silver/gray dashboard color theme across app, desktop, and release metadata. - Register glass-silver in shared theme types, selector options, and startup validation hooks. - Add Glass Silver CSS tokens, swatch styling, and dashboard/desktop stylesheet preload coverage. - Cover theme registration, dropdown/selector rendering, theme persistence, and CSS token invariants with tests. - Document the new dashboard theme and publish a minor changeset for @runfusion/fusion. Files changed: .changeset/fn-7401-glass-silver-theme.md | 7 + docs/dashboard-guide.md | 3 +- packages/core/src/types.ts | 2 + .../app/__tests__/glass-silver-theme.test.ts | 155 ++++++++++++++++++++ .../dashboard/app/components/ThemeSelector.css | 14 ++ .../components/__tests__/ThemeDropdown.test.tsx | 13 ++ .../components/__tests__/ThemeSelector.test.tsx | 16 +++ packages/dashboard/app/components/themeOptions.ts | 1 + .../dashboard/app/hooks/__tests__/useTheme.test.ts | 15 ++ packages/dashboard/app/index.html | 2 +- packages/dashboard/app/public/theme-data.css | 156 +++++++++++++++++++++ packages/desktop/src/renderer/index.html | 1 + 12 files changed, 383 insertions(+), 2 deletions(-) Fusion-Task-Id: FN-7401 Fusion-Task-Lineage: e64f14cc-590e-458b-adf6-7c9baa488157 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
7155 lines
205 KiB
CSS
7155 lines
205 KiB
CSS
/* ============================================================
|
|
COLOR THEMES (data-color-theme="...")
|
|
Contract: every dark/light theme block defines --surface-hover
|
|
so component hover states can use var(--surface-hover) without
|
|
per-selector fallbacks or mode-specific overrides.
|
|
|
|
FNXC:DashboardTheming 2026-06-15-00:00:
|
|
Theme token translucency uses color-mix(in srgb, var(--token) N%, transparent) or exact literal color-mix values for glass surfaces. Raw RGB alpha color functions are banned outside var() fallbacks by FN-6489.
|
|
============================================================ */
|
|
|
|
/* OCEAN - Deep blues and cyans */
|
|
[data-color-theme="ocean"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--todo: #00b8d4;
|
|
--in-progress: #00e5ff;
|
|
--in-progress-rgb: 0, 229, 255;
|
|
--in-review: #00c853;
|
|
--triage: #ffab00;
|
|
--done: #607d8b;
|
|
--color-success: #00c853;
|
|
--color-error: #ff5252;
|
|
|
|
--cta-bg: #00897b;
|
|
--cta-border: #00a08a;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #00a08a;
|
|
--cta-border-hover: #00c853;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #0288d1;
|
|
--accent: #00b8d4;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="ocean"][data-theme="light"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--todo: #0097a7;
|
|
--in-progress: #00bcd4;
|
|
--in-progress-rgb: 0, 188, 212;
|
|
--in-review: #4caf50;
|
|
--triage: #f57c00;
|
|
--done: #546e7a;
|
|
--color-success: #4caf50;
|
|
--color-error: #f44336;
|
|
|
|
--cta-bg: #00796b;
|
|
--cta-border: #00897b;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #00897b;
|
|
--cta-border-hover: #4caf50;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #0277bd;
|
|
--accent: #0097a7;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* FOREST - Deep greens and emeralds */
|
|
[data-color-theme="forest"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--todo: #34d399;
|
|
--in-progress: #10b981;
|
|
--in-progress-rgb: 16, 185, 129;
|
|
--in-review: #22c55e;
|
|
--triage: #fbbf24;
|
|
--done: #6b7280;
|
|
--color-success: #22c55e;
|
|
--color-error: #ef4444;
|
|
|
|
--cta-bg: #16a34a;
|
|
--cta-border: #22c55e;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #22c55e;
|
|
--cta-border-hover: #34d399;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #29b6f6;
|
|
--accent: #16a34a;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="forest"][data-theme="light"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--todo: #059669;
|
|
--in-progress: #047857;
|
|
--in-progress-rgb: 4, 120, 87;
|
|
--in-review: #16a34a;
|
|
--triage: #d97706;
|
|
--done: #4b5563;
|
|
--color-success: #16a34a;
|
|
--color-error: #dc2626;
|
|
|
|
--cta-bg: #15803d;
|
|
--cta-border: #16a34a;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #16a34a;
|
|
--cta-border-hover: #22c55e;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #0288d1;
|
|
--accent: #15803d;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* SUNSET - Warm oranges and reds */
|
|
[data-color-theme="sunset"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--todo: #ffab00;
|
|
--in-progress: #ff6d00;
|
|
--in-progress-rgb: 255, 109, 0;
|
|
--in-review: #ff9100;
|
|
--triage: #ff3d00;
|
|
--done: #8d6e63;
|
|
--color-success: #ff9100;
|
|
--color-error: #ff1744;
|
|
|
|
--cta-bg: #e65100;
|
|
--cta-border: #ff6d00;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #ff6d00;
|
|
--cta-border-hover: #ff9100;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #2196f3;
|
|
--accent: #ff6d00;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="sunset"][data-theme="light"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--todo: #e65100;
|
|
--in-progress: #ef6c00;
|
|
--in-progress-rgb: 239, 108, 0;
|
|
--in-review: #f57c00;
|
|
--triage: #d84315;
|
|
--done: #5d4037;
|
|
--color-success: #f57c00;
|
|
--color-error: #c62828;
|
|
|
|
--cta-bg: #bf360c;
|
|
--cta-border: #e65100;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #e65100;
|
|
--cta-border-hover: #ff6d00;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #1565c0;
|
|
--accent: #e65100;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* BERRY - Purple/pink tones */
|
|
[data-color-theme="berry"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--todo: #e040fb;
|
|
--in-progress: #00e5ff;
|
|
--in-progress-rgb: 0, 229, 255;
|
|
--in-review: #b388ff;
|
|
--triage: #ff4081;
|
|
--done: #9575cd;
|
|
--color-success: #b388ff;
|
|
--color-error: #ff5252;
|
|
|
|
--cta-bg: #9c27b0;
|
|
--cta-border: #ab47bc;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #ab47bc;
|
|
--cta-border-hover: #ce93d8;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #7c4dff;
|
|
--accent: #9c27b0;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="berry"][data-theme="light"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--todo: #7b1fa2;
|
|
--in-progress: #00bcd4;
|
|
--in-progress-rgb: 0, 188, 212;
|
|
--in-review: #9c27b0;
|
|
--triage: #c2185b;
|
|
--done: #673ab7;
|
|
--color-success: #9c27b0;
|
|
--color-error: #d32f2f;
|
|
|
|
--cta-bg: #7b1fa2;
|
|
--cta-border: #9c27b0;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #9c27b0;
|
|
--cta-border-hover: #ab47bc;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #6200ea;
|
|
--accent: #7b1fa2;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* MONOCHROME - Pure grays */
|
|
[data-color-theme="monochrome"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--todo: #9e9e9e;
|
|
--in-progress: #bdbdbd;
|
|
--in-progress-rgb: 189, 189, 189;
|
|
--in-review: #e0e0e0;
|
|
--triage: #757575;
|
|
--done: #616161;
|
|
--color-success: #e0e0e0;
|
|
--color-error: #ff5252;
|
|
|
|
--cta-bg: #757575;
|
|
--cta-border: #9e9e9e;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #9e9e9e;
|
|
--cta-border-hover: #bdbdbd;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #64b5f6;
|
|
--accent: #b0b0b0;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="monochrome"][data-theme="light"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--todo: #616161;
|
|
--in-progress: #757575;
|
|
--in-progress-rgb: 117, 117, 117;
|
|
--in-review: #9e9e9e;
|
|
--triage: #424242;
|
|
--done: #424242;
|
|
--color-success: #616161;
|
|
--color-error: #d32f2f;
|
|
|
|
--cta-bg: #616161;
|
|
--cta-border: #757575;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #757575;
|
|
--cta-border-hover: #9e9e9e;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #1976d2;
|
|
--accent: #616161;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* SLATE - Cool blue-gray tones */
|
|
[data-color-theme="slate"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--todo: #7c8fa4;
|
|
--in-progress: #94a3b8;
|
|
--in-progress-rgb: 148, 163, 184;
|
|
--in-review: #cbd5e1;
|
|
--triage: #64748b;
|
|
--done: #64748b;
|
|
--color-success: #cbd5e1;
|
|
--color-error: #f87171;
|
|
--cta-bg: #64748b;
|
|
--cta-border: #7c8fa4;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #7c8fa4;
|
|
--cta-border-hover: #94a3b8;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border-hover) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #60a5fa;
|
|
--accent: #64748b;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="slate"][data-theme="light"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--todo: #475569;
|
|
--in-progress: #64748b;
|
|
--in-progress-rgb: 100, 116, 139;
|
|
--in-review: #64748b;
|
|
--triage: #334155;
|
|
--done: #64748b;
|
|
--color-success: #475569;
|
|
--color-error: #dc2626;
|
|
--cta-bg: #475569;
|
|
--cta-border: #64748b;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #64748b;
|
|
--cta-border-hover: #94a3b8;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #3b82f6;
|
|
--accent: #475569;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* ASH - Warm medium grays */
|
|
[data-color-theme="ash"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--todo: #9ca3af;
|
|
--in-progress: #a8a29e;
|
|
--in-progress-rgb: 168, 162, 158;
|
|
--in-review: #d4d4d8;
|
|
--triage: #78716c;
|
|
--done: #71717a;
|
|
--color-success: #d4d4d8;
|
|
--color-error: #fca5a5;
|
|
--cta-bg: #78716c;
|
|
--cta-border: #9ca3af;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #9ca3af;
|
|
--cta-border-hover: #a8a29e;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border-hover) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #93c5fd;
|
|
--accent: #a1887f;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="ash"][data-theme="light"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--todo: #57534e;
|
|
--in-progress: #78716c;
|
|
--in-progress-rgb: 120, 113, 108;
|
|
--in-review: #78716c;
|
|
--triage: #44403c;
|
|
--done: #78716c;
|
|
--color-success: #57534e;
|
|
--color-error: #ef4444;
|
|
--cta-bg: #57534e;
|
|
--cta-border: #78716c;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #78716c;
|
|
--cta-border-hover: #a8a29e;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #3b82f6;
|
|
--accent: #6d5d53;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/*
|
|
FNXC:DashboardTheming 2026-06-19-15:39:
|
|
Air must be the calmest, flattest theme: near-monochrome tokens, a restrained blue-gray accent, a clean system sans stack, and faint color-mix borders.
|
|
The "remove unnecessary UI" requirement is intentionally CSS-only and scoped to [data-color-theme="air"] so shared DOM affordances remain present while borders, shadows, and decorative chrome flatten visually.
|
|
|
|
FNXC:DashboardTheming 2026-06-22-14:24:
|
|
Air should hide horizontal divider lines across headers, modal title bars, footers, and tab rails while preserving vertical pane dividers and component outlines. Keep this as theme CSS so the DOM and hit targets remain shared across themes.
|
|
*/
|
|
[data-color-theme="air"] {
|
|
--bg: #0f1115;
|
|
--surface: #151820;
|
|
--card: #171a22;
|
|
--card-hover: color-mix(in srgb, var(--card) 92%, var(--text) 8%);
|
|
--text: #eef1f4;
|
|
--text-muted: #9aa3ad;
|
|
--border: color-mix(in srgb, var(--text) 8%, transparent);
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--font-primary: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--todo: #a5adba;
|
|
--in-progress: #b8c0cc;
|
|
--in-progress-rgb: 184, 192, 204;
|
|
--in-review: #c7ced8;
|
|
--triage: #8d96a3;
|
|
--done: #737d8a;
|
|
--color-success: #c7ced8;
|
|
--color-error: #d8a7a7;
|
|
--color-warning: #b7ad9a;
|
|
--color-info: #a8bfd8;
|
|
--cta-bg: #dbe5ef;
|
|
--cta-border: color-mix(in srgb, var(--cta-bg) 72%, transparent);
|
|
--cta-text: #111318;
|
|
--cta-bg-hover: #eef3f8;
|
|
--cta-border-hover: color-mix(in srgb, var(--cta-bg-hover) 82%, transparent);
|
|
--cta-glow: 0 0 0 transparent;
|
|
--logo-accent: var(--accent);
|
|
--accent: #a8bfd8;
|
|
--accent-text: #111318;
|
|
}
|
|
|
|
[data-color-theme="air"][data-theme="light"] {
|
|
--bg: #fbfbfa;
|
|
--surface: #ffffff;
|
|
--card: #ffffff;
|
|
--card-hover: color-mix(in srgb, var(--card) 96%, var(--text) 4%);
|
|
--text: #1f242b;
|
|
--text-muted: #69717c;
|
|
--border: color-mix(in srgb, var(--text) 8%, transparent);
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--font-primary: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--todo: #667085;
|
|
--in-progress: #4f5f73;
|
|
--in-progress-rgb: 79, 95, 115;
|
|
--in-review: #5f6f83;
|
|
--triage: #7a7368;
|
|
--done: #8a929f;
|
|
--color-success: #526273;
|
|
--color-error: #b45f5f;
|
|
--color-warning: #8a7760;
|
|
--color-info: #536b86;
|
|
--cta-bg: #26313d;
|
|
--cta-border: color-mix(in srgb, var(--cta-bg) 76%, transparent);
|
|
--cta-text: #ffffff;
|
|
--cta-bg-hover: #354253;
|
|
--cta-border-hover: color-mix(in srgb, var(--cta-bg-hover) 84%, transparent);
|
|
--cta-glow: 0 0 0 transparent;
|
|
--logo-accent: var(--accent);
|
|
--accent: #536b86;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
[data-color-theme="air"] .card,
|
|
[data-color-theme="air"] .column,
|
|
[data-color-theme="air"] .panel,
|
|
[data-color-theme="air"] .modal,
|
|
[data-color-theme="air"] .task-card {
|
|
border-color: var(--border);
|
|
box-shadow: 0 0 0 transparent;
|
|
background-image: none;
|
|
}
|
|
|
|
[data-color-theme="air"] .btn,
|
|
[data-color-theme="air"] .btn-icon,
|
|
[data-color-theme="air"] .input,
|
|
[data-color-theme="air"] input,
|
|
[data-color-theme="air"] textarea,
|
|
[data-color-theme="air"] select {
|
|
border-color: var(--border);
|
|
box-shadow: 0 0 0 transparent;
|
|
}
|
|
|
|
[data-color-theme="air"] .btn:hover,
|
|
[data-color-theme="air"] .btn-icon:hover,
|
|
[data-color-theme="air"] .card:hover,
|
|
[data-color-theme="air"] .task-card:hover {
|
|
box-shadow: 0 0 0 transparent;
|
|
}
|
|
|
|
[data-color-theme="air"] .badge,
|
|
[data-color-theme="air"] .pill,
|
|
[data-color-theme="air"] .tag {
|
|
border-color: var(--border);
|
|
box-shadow: 0 0 0 transparent;
|
|
}
|
|
|
|
[data-color-theme="air"] .view-header,
|
|
[data-color-theme="air"] .header,
|
|
[data-color-theme="air"] .modal-header,
|
|
[data-color-theme="air"] .modal-actions,
|
|
[data-color-theme="air"] .modal-footer,
|
|
[data-color-theme="air"] .floating-window-header,
|
|
[data-color-theme="air"] .settings-section-heading,
|
|
[data-color-theme="air"] .settings-section-divider,
|
|
[data-color-theme="air"] .runtime-card__tabs,
|
|
[data-color-theme="air"] .runtime-card__footer,
|
|
[data-color-theme="air"] .mailbox-thread-detail-header,
|
|
[data-color-theme="air"] .chat-sidebar-footer,
|
|
[data-color-theme="air"] .task-detail-tabs,
|
|
[data-color-theme="air"] .task-detail-section,
|
|
[data-color-theme="air"] .workflow-output-modal-header,
|
|
[data-color-theme="air"] .file-browser-modal-header,
|
|
[data-color-theme="air"] .activity-log-header {
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
/*
|
|
FNXC:DashboardTheming 2026-06-22-14:24:
|
|
Shadcn-family themes should read as seamless app shells: header and modal-title separators disappear, but vertical pane borders and local control outlines stay intact.
|
|
*/
|
|
[data-color-theme^="shadcn"] .view-header,
|
|
[data-color-theme^="shadcn"] .header,
|
|
[data-color-theme^="shadcn"] .modal-header,
|
|
[data-color-theme^="shadcn"] .modal-actions,
|
|
[data-color-theme^="shadcn"] .modal-footer,
|
|
[data-color-theme^="shadcn"] .floating-window-header,
|
|
[data-color-theme^="shadcn"] .settings-section-heading,
|
|
[data-color-theme^="shadcn"] .settings-section-divider,
|
|
[data-color-theme^="shadcn"] .workflow-output-modal-header,
|
|
[data-color-theme^="shadcn"] .file-browser-modal-header,
|
|
[data-color-theme^="shadcn"] .activity-log-header {
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
/*
|
|
FNXC:DashboardTheming 2026-06-23-00:07:
|
|
All shadcn-family themes should use one UI font family across app chrome, forms, popovers, and buttons. Native controls do not reliably inherit the document font in every browser, so pin shadcn UI controls to --font-primary while preserving --font-mono for code-oriented text.
|
|
*/
|
|
[data-color-theme^="shadcn"],
|
|
[data-color-theme^="shadcn"] body,
|
|
[data-color-theme^="shadcn"] button,
|
|
[data-color-theme^="shadcn"] input,
|
|
[data-color-theme^="shadcn"] select,
|
|
[data-color-theme^="shadcn"] textarea,
|
|
[data-color-theme^="shadcn"] optgroup,
|
|
[data-color-theme^="shadcn"] .btn,
|
|
[data-color-theme^="shadcn"] .input,
|
|
[data-color-theme^="shadcn"] .select,
|
|
[data-color-theme^="shadcn"] .modal,
|
|
[data-color-theme^="shadcn"] .card {
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
[data-color-theme^="shadcn"] code,
|
|
[data-color-theme^="shadcn"] pre,
|
|
[data-color-theme^="shadcn"] kbd,
|
|
[data-color-theme^="shadcn"] samp,
|
|
[data-color-theme^="shadcn"] .font-mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* GRAPHITE - Dark graphite blacks */
|
|
[data-color-theme="graphite"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--todo: #a0a0a0;
|
|
--in-progress: #b8b8b8;
|
|
--in-progress-rgb: 184, 184, 184;
|
|
--in-review: #d0d0d0;
|
|
--triage: #808080;
|
|
--done: #686868;
|
|
--color-success: #d0d0d0;
|
|
--color-error: #ff6b6b;
|
|
--cta-bg: #808080;
|
|
--cta-border: #a0a0a0;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #a0a0a0;
|
|
--cta-border-hover: #b8b8b8;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border-hover) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #7ab8ff;
|
|
--accent: #a0a0a0;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="graphite"][data-theme="light"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--todo: #404040;
|
|
--in-progress: #606060;
|
|
--in-progress-rgb: 96, 96, 96;
|
|
--in-review: #606060;
|
|
--triage: #2a2a2a;
|
|
--done: #606060;
|
|
--color-success: #404040;
|
|
--color-error: #dc2626;
|
|
--cta-bg: #404040;
|
|
--cta-border: #606060;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #606060;
|
|
--cta-border-hover: #808080;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #2563eb;
|
|
--accent: #606060;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* EMBER - Dark graphite with orange accent */
|
|
[data-color-theme="ember"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--todo: #a0a0a0;
|
|
--in-progress: #b8b8b8;
|
|
--in-progress-rgb: 184, 184, 184;
|
|
--in-review: #d0d0d0;
|
|
--triage: #808080;
|
|
--done: #686868;
|
|
--color-success: #d0d0d0;
|
|
--color-error: #ff6b6b;
|
|
--cta-bg: #d4622a;
|
|
--cta-border: #e8773a;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #e8773a;
|
|
--cta-border-hover: #f09050;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: #e8773a;
|
|
--color-info: #e8773a;
|
|
--accent: #e8773a;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="ember"][data-theme="light"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--todo: #404040;
|
|
--in-progress: #606060;
|
|
--in-progress-rgb: 96, 96, 96;
|
|
--in-review: #606060;
|
|
--triage: #2a2a2a;
|
|
--done: #606060;
|
|
--color-success: #404040;
|
|
--color-error: #dc2626;
|
|
--cta-bg: #c05820;
|
|
--cta-border: #d4622a;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #d4622a;
|
|
--cta-border-hover: #e07030;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 30%, transparent);
|
|
--logo-accent: #d4622a;
|
|
--color-info: #c05820;
|
|
--accent: #d4622a;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* SILVER - Light silvery grays */
|
|
[data-color-theme="silver"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--todo: #b0b0b0;
|
|
--in-progress: #c0c0c0;
|
|
--in-progress-rgb: 192, 192, 192;
|
|
--in-review: #e8e8e8;
|
|
--triage: #909090;
|
|
--done: #a0a0a0;
|
|
--color-success: #e8e8e8;
|
|
--color-error: #ff8080;
|
|
--cta-bg: #909090;
|
|
--cta-border: #b0b0b0;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #b0b0b0;
|
|
--cta-border-hover: #c0c0c0;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border-hover) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #90c0ff;
|
|
--accent: #b8b8b8;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="silver"][data-theme="light"] {
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--todo: #525252;
|
|
--in-progress: #737373;
|
|
--in-progress-rgb: 115, 115, 115;
|
|
--in-review: #737373;
|
|
--triage: #404040;
|
|
--done: #737373;
|
|
--color-success: #525252;
|
|
--color-error: #dc2626;
|
|
--cta-bg: #525252;
|
|
--cta-border: #737373;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #737373;
|
|
--cta-border-hover: #909090;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #2563eb;
|
|
--accent: #707070;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* ZEN - Minimal, clean monochrome with subtle accents */
|
|
[data-color-theme="zen"] {
|
|
--bg: #0c0c0c;
|
|
--surface: #111111;
|
|
--card: #1a1a1a;
|
|
--card-hover: #222222;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #2a2a2a;
|
|
--text: #e0e0e0;
|
|
--text-muted: #808080;
|
|
--text-dim: #555555;
|
|
|
|
--todo: #6b7b8c;
|
|
--in-progress: #7a8590;
|
|
--in-progress-rgb: 122, 133, 144;
|
|
--in-review: #6b8c7a;
|
|
--triage: #8c7b6b;
|
|
--done: #666666;
|
|
--color-success: #6b8c7a;
|
|
--color-error: #8c6b6b;
|
|
|
|
/* CTA tokens — muted green to match zen restraint */
|
|
--cta-bg: #5a7a6a;
|
|
--cta-border: #6b8c7a;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #6b8c7a;
|
|
--cta-border-hover: #7a9a8a;
|
|
--cta-glow: none;
|
|
--logo-accent: var(--todo);
|
|
--color-info: #5c7c8a;
|
|
|
|
/* Minimal glow effects */
|
|
--shadow-glow: none;
|
|
--glow-success: none;
|
|
--glow-warning: none;
|
|
--glow-danger: none;
|
|
--focus-ring: 0 0 0 1px var(--border);
|
|
--accent: #7da88e;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="zen"][data-theme="light"] {
|
|
--bg: #f5f5f5;
|
|
--surface: #fafafa;
|
|
--card: #ffffff;
|
|
--card-hover: #f0f0f0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #e0e0e0;
|
|
--text: #333333;
|
|
--text-muted: #777777;
|
|
--text-dim: #999999;
|
|
|
|
--todo: #5a6a7a;
|
|
--in-progress: #6a757f;
|
|
--in-progress-rgb: 106, 117, 127;
|
|
--in-review: #5a7a6a;
|
|
--triage: #7a6a5a;
|
|
--done: #555555;
|
|
--color-success: #5a7a6a;
|
|
--color-error: #7a5a5a;
|
|
|
|
/* CTA tokens — muted green to match zen restraint */
|
|
--cta-bg: #4a6a5a;
|
|
--cta-border: #5a7a6a;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #5a7a6a;
|
|
--cta-border-hover: #6b8c7a;
|
|
--cta-glow: none;
|
|
--logo-accent: var(--todo);
|
|
--color-info: #4a6a7a;
|
|
|
|
/* Minimal glow effects */
|
|
--shadow-glow: none;
|
|
--glow-success: none;
|
|
--glow-warning: none;
|
|
--glow-danger: none;
|
|
--focus-ring: 0 0 0 1px var(--border);
|
|
--accent: #4a6b56;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* HIGH CONTRAST - Extreme contrast for accessibility */
|
|
[data-color-theme="high-contrast"] {
|
|
--bg: #000000;
|
|
--surface: #0a0a0a;
|
|
--card: #141414;
|
|
--card-hover: #1f1f1f;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #ffffff;
|
|
--text: #ffffff;
|
|
--text-muted: #cccccc;
|
|
--text-dim: #999999;
|
|
|
|
--todo: #00ffff;
|
|
--in-progress: #ffff00;
|
|
--in-progress-rgb: 255, 255, 0;
|
|
--in-review: #00ff00;
|
|
--triage: #ffff00;
|
|
--done: #ffffff;
|
|
--color-success: #00ff00;
|
|
--color-error: #ff0000;
|
|
|
|
--cta-bg: #00cc00;
|
|
--cta-border: #00ff00;
|
|
--cta-text: #000000;
|
|
--cta-bg-hover: #00ff00;
|
|
--cta-border-hover: #33ff33;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 40%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #00ccff;
|
|
--accent: #00ff00;
|
|
--accent-text: #000000;
|
|
}
|
|
|
|
[data-color-theme="high-contrast"][data-theme="light"] {
|
|
--bg: #ffffff;
|
|
--surface: #ffffff;
|
|
--card: #ffffff;
|
|
--card-hover: #f0f0f0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #000000;
|
|
--text: #000000;
|
|
--text-muted: #333333;
|
|
--text-dim: #666666;
|
|
|
|
--todo: #0066ff;
|
|
--in-progress: #0066cc;
|
|
--in-progress-rgb: 0, 102, 204;
|
|
--in-review: #009900;
|
|
--triage: #cc6600;
|
|
--done: #000000;
|
|
--color-success: #009900;
|
|
--color-error: #cc0000;
|
|
|
|
--cta-bg: #006600;
|
|
--cta-border: #009900;
|
|
--cta-text: #ffffff;
|
|
--cta-bg-hover: #009900;
|
|
--cta-border-hover: #00cc00;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #0055cc;
|
|
--accent: #00cc00;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
/* INDUSTRIAL - Technical engineering spec sheet aesthetic */
|
|
[data-color-theme="industrial"] {
|
|
--bg: #0c0c0c;
|
|
--surface: #141414;
|
|
--card: #1a1a1a;
|
|
--card-hover: #222222;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #333333;
|
|
--text: #e8e8e8;
|
|
--text-muted: #888888;
|
|
--text-dim: #555555;
|
|
|
|
--todo: #ff6b00;
|
|
--in-progress: #ff8c00;
|
|
--in-progress-rgb: 255, 140, 0;
|
|
--in-review: #00bcd4;
|
|
--triage: #ff5722;
|
|
--done: #666666;
|
|
--color-success: #00bcd4;
|
|
--color-error: #ff3d00;
|
|
|
|
--cta-bg: #e65100;
|
|
--cta-border: #ff6b00;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #ff6b00;
|
|
--cta-border-hover: #ff8c00;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #42a5f5;
|
|
--accent: #ff6d00;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="industrial"][data-theme="light"] {
|
|
--bg: #f0f0f0;
|
|
--surface: #fafafa;
|
|
--card: #ffffff;
|
|
--card-hover: #f5f5f5;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d0d0d0;
|
|
--text: #1a1a1a;
|
|
--text-muted: #666666;
|
|
--text-dim: #999999;
|
|
|
|
--todo: #e65100;
|
|
--in-progress: #ef6c00;
|
|
--in-progress-rgb: 239, 108, 0;
|
|
--in-review: #0097a7;
|
|
--triage: #d84315;
|
|
--done: #555555;
|
|
--color-success: #0097a7;
|
|
--color-error: #d84315;
|
|
|
|
--cta-bg: #bf360c;
|
|
--cta-border: #e65100;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #e65100;
|
|
--cta-border-hover: #ff6b00;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #1565c0;
|
|
--accent: #bf360c;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* SOLARIZED - Classic solarized palette */
|
|
[data-color-theme="solarized"] {
|
|
--bg: #002b36;
|
|
--surface: #073642;
|
|
--card: #083c4a;
|
|
--card-hover: #094c5e;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #586e75;
|
|
--text: #839496;
|
|
--text-muted: #657b83;
|
|
--text-dim: #586e75;
|
|
|
|
--todo: #268bd2;
|
|
--in-progress: #2aa198;
|
|
--in-progress-rgb: 42, 161, 152;
|
|
--in-review: #859900;
|
|
--triage: #b58900;
|
|
--done: #93a1a1;
|
|
--color-success: #859900;
|
|
--color-error: #dc322f;
|
|
|
|
--cta-bg: #719e00;
|
|
--cta-border: #859900;
|
|
--cta-text: #002b36;
|
|
--cta-bg-hover: #859900;
|
|
--cta-border-hover: #a4b800;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #2aa198;
|
|
--accent: #859900;
|
|
--accent-text: #002b36;
|
|
}
|
|
|
|
[data-color-theme="solarized"][data-theme="light"] {
|
|
--bg: #fdf6e3;
|
|
--surface: #eee8d5;
|
|
--card: #f5efdc;
|
|
--card-hover: #e8e2d0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #93a1a1;
|
|
--text: #586e75;
|
|
--text-muted: #657b83;
|
|
--text-dim: #839496;
|
|
|
|
--todo: #268bd2;
|
|
--in-progress: #2aa198;
|
|
--in-progress-rgb: 42, 161, 152;
|
|
--in-review: #859900;
|
|
--triage: #b58900;
|
|
--done: #93a1a1;
|
|
--color-success: #859900;
|
|
--color-error: #dc322f;
|
|
|
|
--cta-bg: #6a8800;
|
|
--cta-border: #719e00;
|
|
--cta-text: #fdf6e3;
|
|
--cta-bg-hover: #719e00;
|
|
--cta-border-hover: #859900;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #2aa198;
|
|
--accent: #637b00;
|
|
--accent-text: #fdf6e3;
|
|
}
|
|
|
|
/* FACTORY - Industrial Mission Control Theme
|
|
A comprehensive design theme that overrides fonts, spacing, and
|
|
component styling for an industrial sci-fi aesthetic.
|
|
*/
|
|
[data-color-theme="factory"] {
|
|
--bg: #0a0a0a;
|
|
--surface: #111111;
|
|
--card: #1a1a1a;
|
|
--card-hover: #222222;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #333333;
|
|
|
|
--text: #e5e5e5;
|
|
--text-muted: #888888;
|
|
--text-dim: #555555;
|
|
|
|
--todo: #f59e0b;
|
|
--in-progress: #06b6d4;
|
|
--in-progress-rgb: 6, 182, 212;
|
|
--in-review: #22c55e;
|
|
--triage: #ef4444;
|
|
--done: #6b7280;
|
|
|
|
--color-success: #22c55e;
|
|
--color-error: #ef4444;
|
|
--color-muted: #6b7280;
|
|
|
|
--font-primary: "SF Mono", "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;
|
|
--font-mono: "SF Mono", "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;
|
|
|
|
--space-xs: 2px;
|
|
--space-sm: 4px;
|
|
--space-md: 8px;
|
|
--space-lg: 12px;
|
|
--space-xl: 16px;
|
|
--space-2xl: 24px;
|
|
|
|
--radius-sm: 2px;
|
|
--radius-md: 4px;
|
|
--radius-lg: 6px;
|
|
--radius-xl: 8px;
|
|
--radius: var(--radius-md);
|
|
|
|
--btn-padding: 6px 12px;
|
|
--btn-border-width: 2px;
|
|
--card-padding: 8px 10px;
|
|
--modal-padding: var(--space-md) var(--space-lg);
|
|
--header-padding: var(--space-sm) var(--space-lg);
|
|
--column-gap: var(--space-sm);
|
|
--board-padding: var(--space-md) var(--space-lg);
|
|
|
|
--shadow-sm: 0 1px 1px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow-md: 0 2px 4px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow-lg: 0 4px 12px color-mix(in srgb, #000000 60%, transparent);
|
|
--shadow-glow: 0 0 6px color-mix(in srgb, var(--todo) 40%, transparent);
|
|
--glow-success: 0 0 8px color-mix(in srgb, var(--color-success) 35%, transparent);
|
|
--glow-warning: 0 0 8px color-mix(in srgb, var(--todo) 40%, transparent);
|
|
--glow-danger: 0 0 8px color-mix(in srgb, var(--color-error) 35%, transparent);
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--todo) 18%, transparent);
|
|
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--todo) 30%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--transition-instant: 0.05s ease;
|
|
--transition-fast: 0.1s ease;
|
|
--transition-normal: 0.15s ease;
|
|
--transition-slow: 0.2s ease;
|
|
|
|
--cta-bg: #d97706;
|
|
--cta-border: #f59e0b;
|
|
--cta-text: #0a0a0a;
|
|
--cta-bg-hover: #f59e0b;
|
|
--cta-border-hover: #fbbf24;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 40%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #2563eb;
|
|
--accent: #d97706;
|
|
--accent-text: #0a0a0a;
|
|
}
|
|
|
|
[data-color-theme="factory"][data-theme="light"] {
|
|
--bg: #f5f5f5;
|
|
--surface: #ffffff;
|
|
--card: #fafafa;
|
|
--card-hover: #f0f0f0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d4d4d4;
|
|
|
|
--text: #1a1a1a;
|
|
--text-muted: #666666;
|
|
--text-dim: #999999;
|
|
|
|
--todo: #d97706;
|
|
--in-progress: #0891b2;
|
|
--in-progress-rgb: 8, 145, 178;
|
|
--in-review: #16a34a;
|
|
--triage: #dc2626;
|
|
--done: #4b5563;
|
|
|
|
--color-success: #16a34a;
|
|
--color-error: #dc2626;
|
|
--color-muted: #6b7280;
|
|
|
|
--shadow-sm: 0 1px 1px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow-md: 0 2px 4px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow-lg: 0 4px 12px color-mix(in srgb, var(--text) 15%, transparent);
|
|
--shadow-glow: 0 0 6px color-mix(in srgb, var(--todo) 30%, transparent);
|
|
--glow-success: 0 0 8px color-mix(in srgb, var(--color-success) 25%, transparent);
|
|
--glow-warning: 0 0 8px color-mix(in srgb, var(--todo) 30%, transparent);
|
|
--glow-danger: 0 0 8px color-mix(in srgb, var(--color-error) 22%, transparent);
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--todo) 14%, transparent);
|
|
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--todo) 24%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #b45309;
|
|
--cta-border: #d97706;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #d97706;
|
|
--cta-border-hover: #f59e0b;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #1d4ed8;
|
|
--accent: #b45309;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="factory"] .card.agent-active {
|
|
border-color: var(--todo);
|
|
box-shadow:
|
|
0 0 6px color-mix(in srgb, #f59e0b 50%, transparent),
|
|
0 0 12px color-mix(in srgb, #f59e0b 20%, transparent);
|
|
animation: agent-glow-factory 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes agent-glow-factory {
|
|
0%,
|
|
100% {
|
|
box-shadow:
|
|
0 0 6px color-mix(in srgb, #f59e0b 50%, transparent),
|
|
0 0 12px color-mix(in srgb, #f59e0b 20%, transparent);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 10px color-mix(in srgb, #f59e0b 70%, transparent),
|
|
0 0 20px color-mix(in srgb, #f59e0b 40%, transparent);
|
|
}
|
|
}
|
|
|
|
[data-color-theme="factory"][data-theme="light"] .card.agent-active {
|
|
box-shadow:
|
|
0 0 6px color-mix(in srgb, #d97706 40%, transparent),
|
|
0 0 12px color-mix(in srgb, #d97706 15%, transparent);
|
|
animation: agent-glow-factory-light 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes agent-glow-factory-light {
|
|
0%,
|
|
100% {
|
|
box-shadow:
|
|
0 0 6px color-mix(in srgb, #d97706 40%, transparent),
|
|
0 0 12px color-mix(in srgb, #d97706 15%, transparent);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 10px color-mix(in srgb, #d97706 60%, transparent),
|
|
0 0 20px color-mix(in srgb, #d97706 30%, transparent);
|
|
}
|
|
}
|
|
|
|
[data-color-theme="factory"] .btn {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
[data-color-theme="factory"] .btn-primary,
|
|
[data-color-theme="factory"] .btn-task-create {
|
|
background: transparent;
|
|
border-color: var(--todo);
|
|
color: var(--todo);
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-color-theme="factory"] .btn-primary:hover,
|
|
[data-color-theme="factory"] .btn-task-create:hover {
|
|
background: var(--todo);
|
|
color: var(--bg);
|
|
box-shadow: var(--shadow-glow);
|
|
}
|
|
|
|
[data-color-theme="factory"] .card,
|
|
[data-color-theme="factory"] .column {
|
|
border-width: 2px;
|
|
}
|
|
|
|
[data-color-theme="factory"] .column-header h2 {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
[data-color-theme="factory"] .column-count,
|
|
[data-color-theme="factory"] .card-id {
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/*
|
|
FNXC:Theming 2026-06-19-00:00:
|
|
Factory Mono is a monochrome Factory variant for FN-6724: keep the industrial monospace density, uppercase controls, and 2px border system while limiting color to red accents and removing pulsing glow effects.
|
|
*/
|
|
[data-color-theme="factory-mono"] {
|
|
--bg: #0a0a0a;
|
|
--surface: #111111;
|
|
--card: #1a1a1a;
|
|
--card-hover: #222222;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #333333;
|
|
|
|
--text: #f5f5f5;
|
|
--text-muted: #a3a3a3;
|
|
--text-dim: #737373;
|
|
|
|
--todo: #d4d4d4;
|
|
--in-progress: #a3a3a3;
|
|
--in-progress-rgb: 163, 163, 163;
|
|
--in-review: #e5e5e5;
|
|
--triage: #737373;
|
|
--done: #525252;
|
|
|
|
--color-success: #e5e5e5;
|
|
--color-warning: #d4d4d4;
|
|
--color-error: #ef4444;
|
|
--color-muted: #737373;
|
|
|
|
--font-primary: "SF Mono", "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;
|
|
--font-mono: "SF Mono", "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;
|
|
|
|
--space-xs: 2px;
|
|
--space-sm: 4px;
|
|
--space-md: 8px;
|
|
--space-lg: 12px;
|
|
--space-xl: 16px;
|
|
--space-2xl: 24px;
|
|
|
|
--radius-sm: 2px;
|
|
--radius-md: 4px;
|
|
--radius-lg: 6px;
|
|
--radius-xl: 8px;
|
|
--radius: var(--radius-md);
|
|
|
|
--btn-padding: 6px 12px;
|
|
--btn-border-width: 2px;
|
|
--card-padding: 8px 10px;
|
|
--modal-padding: var(--space-md) var(--space-lg);
|
|
--header-padding: var(--space-sm) var(--space-lg);
|
|
--column-gap: var(--space-sm);
|
|
--board-padding: var(--space-md) var(--space-lg);
|
|
|
|
--shadow-sm: none;
|
|
--shadow-md: 0 1px 0 color-mix(in srgb, #000000 60%, transparent);
|
|
--shadow-lg: 0 1px 0 color-mix(in srgb, #000000 70%, transparent);
|
|
--shadow-glow: none;
|
|
--glow-success: none;
|
|
--glow-warning: none;
|
|
--glow-danger: none;
|
|
--focus-ring: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--accent) 30%, transparent);
|
|
--focus-ring-strong: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--accent) 45%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--transition-instant: 0.05s ease;
|
|
--transition-fast: 0.1s ease;
|
|
--transition-normal: 0.15s ease;
|
|
--transition-slow: 0.2s ease;
|
|
|
|
--cta-bg: transparent;
|
|
--cta-border: #ef4444;
|
|
--cta-text: #ef4444;
|
|
--cta-bg-hover: #ef4444;
|
|
--cta-border-hover: #f87171;
|
|
--cta-glow: none;
|
|
--logo-accent: #ef4444;
|
|
--color-info: #d4d4d4;
|
|
--accent: #ef4444;
|
|
--accent-text: #0a0a0a;
|
|
}
|
|
|
|
[data-color-theme="factory-mono"][data-theme="light"] {
|
|
--bg: #f5f5f5;
|
|
--surface: #ffffff;
|
|
--card: #fafafa;
|
|
--card-hover: #f0f0f0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d4d4d4;
|
|
|
|
--text: #1a1a1a;
|
|
--text-muted: #525252;
|
|
--text-dim: #737373;
|
|
|
|
--todo: #525252;
|
|
--in-progress: #737373;
|
|
--in-progress-rgb: 115, 115, 115;
|
|
--in-review: #404040;
|
|
--triage: #a3a3a3;
|
|
--done: #8a8a8a;
|
|
|
|
--color-success: #404040;
|
|
--color-warning: #525252;
|
|
--color-error: #dc2626;
|
|
--color-muted: #737373;
|
|
|
|
--shadow-sm: none;
|
|
--shadow-md: 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent);
|
|
--shadow-lg: 0 1px 0 color-mix(in srgb, var(--text) 18%, transparent);
|
|
--shadow-glow: none;
|
|
--glow-success: none;
|
|
--glow-warning: none;
|
|
--glow-danger: none;
|
|
--focus-ring: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--accent) 25%, transparent);
|
|
--focus-ring-strong: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--accent) 38%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: transparent;
|
|
--cta-border: #dc2626;
|
|
--cta-text: #dc2626;
|
|
--cta-bg-hover: #dc2626;
|
|
--cta-border-hover: #ef4444;
|
|
--cta-glow: none;
|
|
--logo-accent: #dc2626;
|
|
--color-info: #525252;
|
|
--accent: #dc2626;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
[data-color-theme="factory-mono"] .card.agent-active {
|
|
border-color: var(--accent);
|
|
box-shadow: none;
|
|
animation: none;
|
|
}
|
|
|
|
[data-color-theme="factory-mono"][data-theme="light"] .card.agent-active {
|
|
border-color: var(--accent);
|
|
box-shadow: none;
|
|
animation: none;
|
|
}
|
|
|
|
[data-color-theme="factory-mono"] .btn {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
[data-color-theme="factory-mono"] .btn-primary,
|
|
[data-color-theme="factory-mono"] .btn-task-create {
|
|
background: transparent;
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-color-theme="factory-mono"] .btn-primary:hover,
|
|
[data-color-theme="factory-mono"] .btn-task-create:hover {
|
|
background: var(--accent);
|
|
color: var(--accent-text);
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-color-theme="factory-mono"] .card,
|
|
[data-color-theme="factory-mono"] .column {
|
|
border-width: var(--btn-border-width);
|
|
}
|
|
|
|
[data-color-theme="factory-mono"] .column-header h2 {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
[data-color-theme="factory-mono"] .column-count,
|
|
[data-color-theme="factory-mono"] .card-id {
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/*
|
|
FNXC:Theming 2026-06-19-15:35:
|
|
The shadcn theme for FN-6747 approximates the shadcn/ui new-york zinc aesthetic with sans-serif typography, tokenized comfortable spacing, 1px borders, subtle flat shadows, neutralized glow tokens, and a solid primary button instead of Factory-style outlined uppercase controls.
|
|
|
|
FNXC:Theming 2026-06-20-00:00:
|
|
FN-6758 makes the default shadcn highlight/accent orange for focus rings, active borders, links, and selection affordances while preserving the zinc-neutral surfaces, neutralized glows, and solid neutral primary button.
|
|
*/
|
|
[data-color-theme="shadcn"] {
|
|
--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);
|
|
|
|
--transition-instant: 0.05s ease;
|
|
--transition-fast: 0.1s ease;
|
|
--transition-normal: 0.15s ease;
|
|
--transition-slow: 0.2s ease;
|
|
|
|
--cta-bg: #fafafa;
|
|
--cta-border: #fafafa;
|
|
--cta-text: #18181b;
|
|
--cta-bg-hover: #e4e4e7;
|
|
--cta-border-hover: #e4e4e7;
|
|
--cta-glow: none;
|
|
--logo-accent: var(--text);
|
|
--color-info: #38bdf8;
|
|
--accent: #f97316;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
[data-color-theme="shadcn"][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: #18181b;
|
|
--cta-border: #18181b;
|
|
--cta-text: #fafafa;
|
|
--cta-bg-hover: #27272a;
|
|
--cta-border-hover: #27272a;
|
|
--cta-glow: none;
|
|
--logo-accent: var(--text);
|
|
--color-info: #0284c7;
|
|
--accent: #ea580c;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
/*
|
|
FNXC:DashboardTheming 2026-06-30-00:00:
|
|
Shadcn Ember combines shadcn/ui zinc structure with Ember's warm orange/graphite CTA, status, accent, and info colors. It is the default for unset installs while explicit legacy theme ids stay valid.
|
|
|
|
FNXC:DashboardTheming 2026-06-30-21:41:
|
|
Shadcn Ember must keep shadcn structure but match every Ember-owned color token byte-for-byte against Ember in dark and light mode so the default theme cannot drift from Ember's palette.
|
|
*/
|
|
[data-color-theme="shadcn-ember"] {
|
|
--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: #a0a0a0;
|
|
--in-progress: #b8b8b8;
|
|
--in-progress-rgb: 184, 184, 184;
|
|
--in-review: #d0d0d0;
|
|
--triage: #808080;
|
|
--done: #686868;
|
|
|
|
--color-success: #d0d0d0;
|
|
--color-warning: #f59e0b;
|
|
--color-error: #ff6b6b;
|
|
--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);
|
|
|
|
--transition-instant: 0.05s ease;
|
|
--transition-fast: 0.1s ease;
|
|
--transition-normal: 0.15s ease;
|
|
--transition-slow: 0.2s ease;
|
|
|
|
--cta-bg: #d4622a;
|
|
--cta-border: #e8773a;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #e8773a;
|
|
--cta-border-hover: #f09050;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: #e8773a;
|
|
--color-info: #e8773a;
|
|
--accent: #e8773a;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="shadcn-ember"][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: #404040;
|
|
--in-progress: #606060;
|
|
--in-progress-rgb: 96, 96, 96;
|
|
--in-review: #606060;
|
|
--triage: #2a2a2a;
|
|
--done: #606060;
|
|
|
|
--color-success: #404040;
|
|
--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: #c05820;
|
|
--cta-border: #d4622a;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #d4622a;
|
|
--cta-border-hover: #e07030;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 30%, transparent);
|
|
--logo-accent: #d4622a;
|
|
--color-info: #c05820;
|
|
--accent: #d4622a;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
|
|
/*
|
|
FNXC:Theming 2026-06-20-18:30:
|
|
FN-6816 keeps shadcn-custom visually identical to the base shadcn theme until sanitized user token overrides are applied inline by the dashboard theme hook.
|
|
*/
|
|
[data-color-theme="shadcn-custom"] {
|
|
--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);
|
|
|
|
--transition-instant: 0.05s ease;
|
|
--transition-fast: 0.1s ease;
|
|
--transition-normal: 0.15s ease;
|
|
--transition-slow: 0.2s ease;
|
|
|
|
--cta-bg: #fafafa;
|
|
--cta-border: #fafafa;
|
|
--cta-text: #18181b;
|
|
--cta-bg-hover: #e4e4e7;
|
|
--cta-border-hover: #e4e4e7;
|
|
--cta-glow: none;
|
|
--logo-accent: var(--text);
|
|
--color-info: #38bdf8;
|
|
--accent: #f97316;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
[data-color-theme="shadcn-custom"][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: #18181b;
|
|
--cta-border: #18181b;
|
|
--cta-text: #fafafa;
|
|
--cta-bg-hover: #27272a;
|
|
--cta-border-hover: #27272a;
|
|
--cta-glow: none;
|
|
--logo-accent: var(--text);
|
|
--color-info: #0284c7;
|
|
--accent: #ea580c;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
[data-color-theme="shadcn"] .card.agent-active,
|
|
[data-color-theme="shadcn-ember"] .card.agent-active,
|
|
[data-color-theme="shadcn-custom"] .card.agent-active {
|
|
border-color: var(--accent);
|
|
box-shadow: none;
|
|
animation: none;
|
|
}
|
|
|
|
[data-color-theme="shadcn"][data-theme="light"] .card.agent-active,
|
|
[data-color-theme="shadcn-ember"][data-theme="light"] .card.agent-active,
|
|
[data-color-theme="shadcn-custom"][data-theme="light"] .card.agent-active {
|
|
border-color: var(--accent);
|
|
box-shadow: none;
|
|
animation: none;
|
|
}
|
|
|
|
[data-color-theme="shadcn"] .btn,
|
|
[data-color-theme="shadcn-ember"] .btn,
|
|
[data-color-theme="shadcn-custom"] .btn {
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
font-weight: 500;
|
|
}
|
|
|
|
[data-color-theme="shadcn"] .btn-primary,
|
|
[data-color-theme="shadcn"] .btn-task-create,
|
|
[data-color-theme="shadcn-ember"] .btn-primary,
|
|
[data-color-theme="shadcn-ember"] .btn-task-create,
|
|
[data-color-theme="shadcn-custom"] .btn-primary,
|
|
[data-color-theme="shadcn-custom"] .btn-task-create {
|
|
background: var(--cta-bg);
|
|
border-color: var(--cta-border);
|
|
color: var(--cta-text);
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-color-theme="shadcn"] .btn-primary:hover,
|
|
[data-color-theme="shadcn"] .btn-task-create:hover,
|
|
[data-color-theme="shadcn-ember"] .btn-primary:hover,
|
|
[data-color-theme="shadcn-ember"] .btn-task-create:hover,
|
|
[data-color-theme="shadcn-custom"] .btn-primary:hover,
|
|
[data-color-theme="shadcn-custom"] .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"] .card,
|
|
[data-color-theme="shadcn"] .column,
|
|
[data-color-theme="shadcn-ember"] .card,
|
|
[data-color-theme="shadcn-ember"] .column,
|
|
[data-color-theme="shadcn-custom"] .card,
|
|
[data-color-theme="shadcn-custom"] .column {
|
|
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;
|
|
}
|
|
|
|
/*
|
|
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;
|
|
--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-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: #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-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;
|
|
--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;
|
|
}
|
|
|
|
/*
|
|
FNXC:DashboardTheming 2026-06-20-00:00:
|
|
Shadcn Gray is the fully-neutral zinc variant: it keeps the shadcn surfaces and button treatment while using only zinc/gray accent, CTA, and info tokens instead of red, blue, or other chroma.
|
|
*/
|
|
[data-color-theme="shadcn-gray"] {
|
|
--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: #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: #71717a;
|
|
--cta-border: #71717a;
|
|
--cta-text: #ffffff;
|
|
--cta-bg-hover: #52525b;
|
|
--cta-border-hover: #52525b;
|
|
--cta-glow: none;
|
|
--logo-accent: var(--accent);
|
|
--color-info: #a1a1aa;
|
|
--accent: #a1a1aa;
|
|
--accent-text: #18181b;
|
|
}
|
|
|
|
[data-color-theme="shadcn-gray"][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: #52525b;
|
|
--in-progress-rgb: 82, 82, 91;
|
|
--in-review: #52525b;
|
|
--triage: #71717a;
|
|
--done: #a1a1aa;
|
|
|
|
--color-success: #52525b;
|
|
--color-warning: #71717a;
|
|
--color-error: #3f3f46;
|
|
--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: #52525b;
|
|
--cta-border: #52525b;
|
|
--cta-text: #ffffff;
|
|
--cta-bg-hover: #3f3f46;
|
|
--cta-border-hover: #3f3f46;
|
|
--cta-glow: none;
|
|
--logo-accent: var(--accent);
|
|
--color-info: #52525b;
|
|
--accent: #52525b;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
/*
|
|
FNXC:Theming 2026-06-21-00:00:
|
|
FN-6815 adds Shadcn Gray Blue as the slate-neutral shadcn variant: the whole surface ramp moves from zinc to blue-gray slate while CTA/accent tokens use muted slate-blue and the shadcn flat-shadow/no-glow treatment stays intact.
|
|
*/
|
|
[data-color-theme="shadcn-gray-blue"] {
|
|
--bg: #020617;
|
|
--surface: #0b1220;
|
|
--card: #0f172a;
|
|
--card-hover: #1e293b;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #1e293b;
|
|
|
|
--text: #f8fafc;
|
|
--text-muted: #94a3b8;
|
|
--text-dim: #475569;
|
|
|
|
--todo: #60a5fa;
|
|
--in-progress: #38bdf8;
|
|
--in-progress-rgb: 56, 189, 248;
|
|
--in-review: #34d399;
|
|
--triage: #f59e0b;
|
|
--done: #64748b;
|
|
|
|
--color-success: #22c55e;
|
|
--color-warning: #f59e0b;
|
|
--color-error: #ef4444;
|
|
--color-muted: #64748b;
|
|
|
|
--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: #64748b;
|
|
--cta-border: #64748b;
|
|
--cta-text: #ffffff;
|
|
--cta-bg-hover: #475569;
|
|
--cta-border-hover: #475569;
|
|
--cta-glow: none;
|
|
--logo-accent: var(--accent);
|
|
--color-info: #64748b;
|
|
--accent: #64748b;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
[data-color-theme="shadcn-gray-blue"][data-theme="light"] {
|
|
--bg: #ffffff;
|
|
--surface: #ffffff;
|
|
--card: #ffffff;
|
|
--card-hover: #f1f5f9;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #e2e8f0;
|
|
|
|
--text: #0f172a;
|
|
--text-muted: #64748b;
|
|
--text-dim: #94a3b8;
|
|
|
|
--todo: #2563eb;
|
|
--in-progress: #0284c7;
|
|
--in-progress-rgb: 2, 132, 199;
|
|
--in-review: #16a34a;
|
|
--triage: #d97706;
|
|
--done: #94a3b8;
|
|
|
|
--color-success: #16a34a;
|
|
--color-warning: #d97706;
|
|
--color-error: #dc2626;
|
|
--color-muted: #64748b;
|
|
|
|
--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: #475569;
|
|
--cta-border: #475569;
|
|
--cta-text: #ffffff;
|
|
--cta-bg-hover: #334155;
|
|
--cta-border-hover: #334155;
|
|
--cta-glow: none;
|
|
--logo-accent: var(--accent);
|
|
--color-info: #475569;
|
|
--accent: #475569;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
[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-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,
|
|
[data-color-theme="shadcn-gray-blue"] .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-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,
|
|
[data-color-theme="shadcn-gray-blue"][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-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,
|
|
[data-color-theme="shadcn-gray-blue"] .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-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,
|
|
[data-color-theme="shadcn-gray"] .btn-task-create,
|
|
[data-color-theme="shadcn-gray-blue"] .btn-primary,
|
|
[data-color-theme="shadcn-gray-blue"] .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-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,
|
|
[data-color-theme="shadcn-gray"] .btn-task-create:hover,
|
|
[data-color-theme="shadcn-gray-blue"] .btn-primary:hover,
|
|
[data-color-theme="shadcn-gray-blue"] .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-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,
|
|
[data-color-theme="shadcn-gray"] .column,
|
|
[data-color-theme="shadcn-gray-blue"] .card,
|
|
[data-color-theme="shadcn-gray-blue"] .column {
|
|
border-width: var(--btn-border-width);
|
|
}
|
|
|
|
/* AYU - Popular code editor theme with dark and light variants */
|
|
[data-color-theme="ayu"] {
|
|
--bg: #0f1419;
|
|
--surface: #131d27;
|
|
--card: #1a2634;
|
|
--card-hover: #232d3b;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #304357;
|
|
--text: #bfbdb6;
|
|
--text-muted: #565b66;
|
|
--text-dim: #4d5666;
|
|
|
|
--todo: #39bae6;
|
|
--in-progress: #ffb454;
|
|
--in-progress-rgb: 255, 180, 84;
|
|
--in-review: #7ee787;
|
|
--triage: #f2966b;
|
|
--done: #6c7986;
|
|
--color-success: #7ee787;
|
|
--color-error: #f07178;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #5cb85c;
|
|
--cta-border: #7ee787;
|
|
--cta-text: #0f1419;
|
|
--cta-bg-hover: #7ee787;
|
|
--cta-border-hover: #9af09a;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #39bae6;
|
|
--accent: #5cb85c;
|
|
--accent-text: #0f1419;
|
|
}
|
|
|
|
[data-color-theme="ayu"][data-theme="light"] {
|
|
--bg: #fafafa;
|
|
--surface: #f3f3f3;
|
|
--card: #ffffff;
|
|
--card-hover: #f0f0f0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #e0e0e0;
|
|
--text: #5c6166;
|
|
--text-muted: #8a9199;
|
|
--text-dim: #a0a0a0;
|
|
|
|
--todo: #007acc;
|
|
--in-progress: #ff8f40;
|
|
--in-progress-rgb: 255, 143, 64;
|
|
--in-review: #86b300;
|
|
--triage: #fa8d3e;
|
|
--done: #8a9199;
|
|
--color-success: #86b300;
|
|
--color-error: #f07178;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 15%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #6d9a00;
|
|
--cta-border: #86b300;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #86b300;
|
|
--cta-border-hover: #9cc800;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #007acc;
|
|
--accent: #3a8a3a;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* ONE DARK - Atom's iconic dark theme */
|
|
[data-color-theme="one-dark"] {
|
|
--bg: #282c34;
|
|
--surface: #21252b;
|
|
--card: #2c313a;
|
|
--card-hover: #353b45;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #3e4451;
|
|
--text: #abb2bf;
|
|
--text-muted: #636d83;
|
|
--text-dim: #5c6370;
|
|
|
|
--todo: #61afef;
|
|
--in-progress: #00e5ff;
|
|
--in-progress-rgb: 0, 229, 255;
|
|
--in-review: #98c379;
|
|
--triage: #e5c07b;
|
|
--done: #828997;
|
|
--color-success: #98c379;
|
|
--color-error: #e06c75;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #7ec77a;
|
|
--cta-border: #98c379;
|
|
--cta-text: #282c34;
|
|
--cta-bg-hover: #98c379;
|
|
--cta-border-hover: #b5d4a8;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #61afef;
|
|
--accent: #7ec77a;
|
|
--accent-text: #282c34;
|
|
}
|
|
|
|
/* ONE DARK - Light variant */
|
|
[data-color-theme="one-dark"][data-theme="light"] {
|
|
--bg: #fafafa;
|
|
--surface: #f0f0f0;
|
|
--card: #ffffff;
|
|
--card-hover: #f5f5f5;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d4d4d4;
|
|
--text: #383a42;
|
|
--text-muted: #636d83;
|
|
--text-dim: #9da5b4;
|
|
|
|
--todo: #4078f2;
|
|
--in-progress: #0184bc;
|
|
--in-progress-rgb: 1, 132, 188;
|
|
--in-review: #50a14f;
|
|
--triage: #c18401;
|
|
--done: #9da5b4;
|
|
--color-success: #50a14f;
|
|
--color-error: #e45649;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #3d8c3b;
|
|
--cta-border: #50a14f;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #50a14f;
|
|
--cta-border-hover: #66b865;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #4078f2;
|
|
--accent: #4a9e46;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
/* NORD - Arctic blue palette inspired by the Nord color scheme */
|
|
[data-color-theme="nord"] {
|
|
--bg: #2e3440;
|
|
--surface: #3b4252;
|
|
--card: #434c5e;
|
|
--card-hover: #4c566a;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #4c566a;
|
|
--text: #eceff4;
|
|
--text-muted: #d8dee9;
|
|
--text-dim: #81a1c1;
|
|
|
|
--todo: #88c0d0;
|
|
--in-progress: #81a1c1;
|
|
--in-progress-rgb: 129, 161, 193;
|
|
--in-review: #a3be8c;
|
|
--triage: #ebcb8b;
|
|
--done: #7b88a1;
|
|
--color-success: #a3be8c;
|
|
--color-error: #bf616a;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 40%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #8fa879;
|
|
--cta-border: #a3be8c;
|
|
--cta-text: #2e3440;
|
|
--cta-bg-hover: #a3be8c;
|
|
--cta-border-hover: #b8cfab;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #81a1c1;
|
|
--accent: #88c0d0;
|
|
--accent-text: #2e3440;
|
|
}
|
|
|
|
[data-color-theme="nord"][data-theme="light"] {
|
|
--bg: #eceff4;
|
|
--surface: #e5e9f0;
|
|
--card: #d8dee9;
|
|
--card-hover: #cdd3e0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #b0b8c9;
|
|
--text: #2e3440;
|
|
--text-muted: #4c566a;
|
|
--text-dim: #7b88a1;
|
|
|
|
--todo: #5e81ac;
|
|
--in-progress: #5e81ac;
|
|
--in-progress-rgb: 94, 129, 172;
|
|
--in-review: #7ca373;
|
|
--triage: #c98530;
|
|
--done: #4c566a;
|
|
--color-success: #7ca373;
|
|
--color-error: #b54a52;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #6a8f63;
|
|
--cta-border: #7ca373;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #7ca373;
|
|
--cta-border-hover: #8fb588;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #5e81ac;
|
|
--accent: #5e81ac;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* DRACULA - Popular dark theme with deep purples and vivid accents */
|
|
[data-color-theme="dracula"] {
|
|
--bg: #282a36;
|
|
--surface: #21222c;
|
|
--card: #2c2e3a;
|
|
--card-hover: #363848;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #44475a;
|
|
--text: #f8f8f2;
|
|
--text-muted: #bd93f9;
|
|
--text-dim: #6272a4;
|
|
|
|
--todo: #8be9fd;
|
|
--in-progress: #00e5ff;
|
|
--in-progress-rgb: 0, 229, 255;
|
|
--in-review: #50fa7b;
|
|
--triage: #f1fa8c;
|
|
--done: #6272a4;
|
|
--color-success: #50fa7b;
|
|
--color-error: #ff5555;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #40d870;
|
|
--cta-border: #50fa7b;
|
|
--cta-text: #282a36;
|
|
--cta-bg-hover: #50fa7b;
|
|
--cta-border-hover: #70ff95;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #8be9fd;
|
|
--accent: #bd93f9;
|
|
--accent-text: #282a36;
|
|
}
|
|
|
|
[data-color-theme="dracula"][data-theme="light"] {
|
|
--bg: #f8f8f2;
|
|
--surface: #efeefa;
|
|
--card: #e8e8f4;
|
|
--card-hover: #dddde8;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #b0b0c0;
|
|
--text: #282a36;
|
|
--text-muted: #5a5a72;
|
|
--text-dim: #8888a0;
|
|
|
|
--todo: #0097a7;
|
|
--in-progress: #00bcd4;
|
|
--in-progress-rgb: 0, 188, 212;
|
|
--in-review: #2e8b57;
|
|
--triage: #c98600;
|
|
--done: #5a5a72;
|
|
--color-success: #2e8b57;
|
|
--color-error: #cc3333;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #267a4d;
|
|
--cta-border: #2e8b57;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #2e8b57;
|
|
--cta-border-hover: #3aa870;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #00838f;
|
|
--accent: #8662c7;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* GRUVBOX - Warm, retro earth-tone palette */
|
|
[data-color-theme="gruvbox"] {
|
|
--bg: #282828;
|
|
--surface: #1d2021;
|
|
--card: #32302f;
|
|
--card-hover: #3c3836;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #504945;
|
|
--text: #ebdbb2;
|
|
--text-muted: #bdae93;
|
|
--text-dim: #665c54;
|
|
|
|
--todo: #83a598;
|
|
--in-progress: #d3869b;
|
|
--in-progress-rgb: 211, 134, 155;
|
|
--in-review: #b8bb26;
|
|
--triage: #fabd2f;
|
|
--done: #928374;
|
|
--color-success: #b8bb26;
|
|
--color-error: #fb4934;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #a0a325;
|
|
--cta-border: #b8bb26;
|
|
--cta-text: #282828;
|
|
--cta-bg-hover: #b8bb26;
|
|
--cta-border-hover: #d0d340;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #83a598;
|
|
--accent: #d4a017;
|
|
--accent-text: #282828;
|
|
}
|
|
|
|
[data-color-theme="gruvbox"][data-theme="light"] {
|
|
--bg: #fbf1c7;
|
|
--surface: #f2e5bc;
|
|
--card: #ebdbb2;
|
|
--card-hover: #e0d0a0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #bdae93;
|
|
--text: #3c3836;
|
|
--text-muted: #504945;
|
|
--text-dim: #7c7066;
|
|
|
|
--todo: #076678;
|
|
--in-progress: #8f3f71;
|
|
--in-progress-rgb: 143, 63, 113;
|
|
--in-review: #427b58;
|
|
--triage: #b57614;
|
|
--done: #504945;
|
|
--color-success: #427b58;
|
|
--color-error: #9d0006;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #3a6a4e;
|
|
--cta-border: #427b58;
|
|
--cta-text: #fbf1c7;
|
|
--cta-bg-hover: #427b58;
|
|
--cta-border-hover: #528c68;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #076678;
|
|
--accent: #a08010;
|
|
--accent-text: #fbf1c7;
|
|
}
|
|
|
|
/* TOKYO NIGHT - Deep blues and soft purples inspired by the VS Code theme */
|
|
[data-color-theme="tokyo-night"] {
|
|
--bg: #1a1b26;
|
|
--surface: #16161e;
|
|
--card: #24283b;
|
|
--card-hover: #2e324e;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #3b4261;
|
|
--text: #c0caf5;
|
|
--text-muted: #a9b1d6;
|
|
--text-dim: #565f89;
|
|
|
|
--todo: #7aa2f7;
|
|
--in-progress: #00e5ff;
|
|
--in-progress-rgb: 0, 229, 255;
|
|
--in-review: #9ece6a;
|
|
--triage: #e0af68;
|
|
--done: #565f89;
|
|
--color-success: #9ece6a;
|
|
--color-error: #f7768e;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #8ab855;
|
|
--cta-border: #9ece6a;
|
|
--cta-text: #1a1b26;
|
|
--cta-bg-hover: #9ece6a;
|
|
--cta-border-hover: #b8e080;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #7aa2f7;
|
|
--accent: #7aa2f7;
|
|
--accent-text: #1a1b26;
|
|
}
|
|
|
|
[data-color-theme="tokyo-night"][data-theme="light"] {
|
|
--bg: #e1e2e7;
|
|
--surface: #d5d6db;
|
|
--card: #e1e2e7;
|
|
--card-hover: #d0d1d8;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #b4b5bc;
|
|
--text: #1a1b26;
|
|
--text-muted: #414868;
|
|
--text-dim: #68709a;
|
|
|
|
--todo: #3b5ea5;
|
|
--in-progress: #00bcd4;
|
|
--in-progress-rgb: 0, 188, 212;
|
|
--in-review: #48703e;
|
|
--triage: #9a6b20;
|
|
--done: #414868;
|
|
--color-success: #48703e;
|
|
--color-error: #c53b53;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #3d6035;
|
|
--cta-border: #48703e;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #48703e;
|
|
--cta-border-hover: #5a8550;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #3b5ea5;
|
|
--accent: #5b7ec7;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* CATPPUCCIN MOCHA - Popular pastel dark theme */
|
|
[data-color-theme="catppuccin-mocha"] {
|
|
--bg: #1e1e2e;
|
|
--surface: #181825;
|
|
--card: #1e1e2e;
|
|
--card-hover: #262637;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #313244;
|
|
--text: #cdd6f4;
|
|
--text-muted: #a6adc8;
|
|
--text-dim: #6c7086;
|
|
|
|
--todo: #89b4fa;
|
|
--in-progress: #89dceb;
|
|
--in-progress-rgb: 137, 220, 235;
|
|
--in-review: #a6e3a1;
|
|
--triage: #f9e2af;
|
|
--done: #6c7086;
|
|
--color-success: #a6e3a1;
|
|
--color-error: #f38ba8;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #8ad985;
|
|
--cta-border: #a6e3a1;
|
|
--cta-text: #1e1e2e;
|
|
--cta-bg-hover: #a6e3a1;
|
|
--cta-border-hover: #b8edb4;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #89b4fa;
|
|
--accent: #cba6f7;
|
|
--accent-text: #1e1e2e;
|
|
}
|
|
|
|
[data-color-theme="catppuccin-mocha"][data-theme="light"] {
|
|
--bg: #eff1f5;
|
|
--surface: #e6e9ef;
|
|
--card: #eff1f5;
|
|
--card-hover: #dce0e8;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #bcc0cc;
|
|
--text: #4c4f69;
|
|
--text-muted: #5c5f77;
|
|
--text-dim: #7c7f93;
|
|
|
|
--todo: #1e66f5;
|
|
--in-progress: #04a5e5;
|
|
--in-progress-rgb: 4, 165, 229;
|
|
--in-review: #40a02b;
|
|
--triage: #df8e1d;
|
|
--done: #7c7f93;
|
|
--color-success: #40a02b;
|
|
--color-error: #d20f39;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #36891f;
|
|
--cta-border: #40a02b;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #40a02b;
|
|
--cta-border-hover: #52b93d;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #1e66f5;
|
|
--accent: #9a6fd9;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* GITHUB DARK - GitHub's dark theme */
|
|
[data-color-theme="github-dark"] {
|
|
--bg: #0d1117;
|
|
--surface: #010409;
|
|
--card: #0d1117;
|
|
--card-hover: #161b22;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #30363d;
|
|
--text: #e6edf3;
|
|
--text-muted: #8b949e;
|
|
--text-dim: #484f58;
|
|
|
|
--todo: #58a6ff;
|
|
--in-progress: #79c0ff;
|
|
--in-progress-rgb: 121, 192, 255;
|
|
--in-review: #3fb950;
|
|
--triage: #d29922;
|
|
--done: #484f58;
|
|
--color-success: #3fb950;
|
|
--color-error: #f85149;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #2ea043;
|
|
--cta-border: #3fb950;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #3fb950;
|
|
--cta-border-hover: #56d364;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #58a6ff;
|
|
--accent: #58a6ff;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="github-dark"][data-theme="light"] {
|
|
--bg: #ffffff;
|
|
--surface: #f6f8fa;
|
|
--card: #ffffff;
|
|
--card-hover: #f3f4f6;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d0d7de;
|
|
--text: #1f2328;
|
|
--text-muted: #656d76;
|
|
--text-dim: #8c959f;
|
|
|
|
--todo: #0969da;
|
|
--in-progress: #0969da;
|
|
--in-progress-rgb: 9, 105, 218;
|
|
--in-review: #1a7f37;
|
|
--triage: #9a6700;
|
|
--done: #656d76;
|
|
--color-success: #1a7f37;
|
|
--color-error: #cf222e;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #1a7f37;
|
|
--cta-border: #1a7f37;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #1a7f37;
|
|
--cta-border-hover: #2da44e;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #0969da;
|
|
--accent: #0969da;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* EVERFOREST - Green-focused dark theme */
|
|
[data-color-theme="everforest"] {
|
|
--bg: #2d353b;
|
|
--surface: #272e33;
|
|
--card: #2d353b;
|
|
--card-hover: #343f44;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #414b50;
|
|
--text: #d3c6aa;
|
|
--text-muted: #a7c080;
|
|
--text-dim: #859289;
|
|
|
|
--todo: #7fbbb3;
|
|
--in-progress: #e0c8a8;
|
|
--in-progress-rgb: 224, 200, 168;
|
|
--in-review: #a7c080;
|
|
--triage: #dbbc7f;
|
|
--done: #859289;
|
|
--color-success: #a7c080;
|
|
--color-error: #e67e80;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #8aad75;
|
|
--cta-border: #a7c080;
|
|
--cta-text: #2d353b;
|
|
--cta-bg-hover: #a7c080;
|
|
--cta-border-hover: #bcd09a;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #7fbbb3;
|
|
--accent: #a7c080;
|
|
--accent-text: #2d353b;
|
|
}
|
|
|
|
[data-color-theme="everforest"][data-theme="light"] {
|
|
--bg: #fdf6e3;
|
|
--surface: #f4f0d9;
|
|
--card: #fdf6e3;
|
|
--card-hover: #eee8c9;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #c9ccae;
|
|
--text: #5c6a72;
|
|
--text-muted: #657b69;
|
|
--text-dim: #8da489;
|
|
|
|
--todo: #3a94a5;
|
|
--in-progress: #83a08a;
|
|
--in-progress-rgb: 131, 160, 138;
|
|
--in-review: #6d9b3a;
|
|
--triage: #b58905;
|
|
--done: #8da489;
|
|
--color-success: #6d9b3a;
|
|
--color-error: #c44040;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #5a8a2e;
|
|
--cta-border: #6d9b3a;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #6d9b3a;
|
|
--cta-border-hover: #80b34c;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #3a94a5;
|
|
--accent: #6b8f55;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* ROSÉ PINE - Soft purple/pink tones */
|
|
[data-color-theme="rose-pine"] {
|
|
--bg: #191724;
|
|
--surface: #1f1d2e;
|
|
--card: #191724;
|
|
--card-hover: #26233a;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #26233a;
|
|
--text: #e0def4;
|
|
--text-muted: #908caa;
|
|
--text-dim: #6e6a86;
|
|
|
|
--todo: #c4a7e7;
|
|
--in-progress: #ebbcba;
|
|
--in-progress-rgb: 235, 188, 186;
|
|
--in-review: #9ccfd8;
|
|
--triage: #f6c177;
|
|
--done: #6e6a86;
|
|
--color-success: #9ccfd8;
|
|
--color-error: #eb6f92;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #7dbbc4;
|
|
--cta-border: #9ccfd8;
|
|
--cta-text: #191724;
|
|
--cta-bg-hover: #9ccfd8;
|
|
--cta-border-hover: #b3dfe6;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #c4a7e7;
|
|
--accent: #c4a7e7;
|
|
--accent-text: #191724;
|
|
}
|
|
|
|
[data-color-theme="rose-pine"][data-theme="light"] {
|
|
--bg: #faf4ed;
|
|
--surface: #fffaf3;
|
|
--card: #faf4ed;
|
|
--card-hover: #f2e9de;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #dfdad0;
|
|
--text: #575279;
|
|
--text-muted: #797593;
|
|
--text-dim: #9893a5;
|
|
|
|
--todo: #907aa9;
|
|
--in-progress: #b4637a;
|
|
--in-progress-rgb: 180, 99, 122;
|
|
--in-review: #56949f;
|
|
--triage: #ea9d34;
|
|
--done: #9893a5;
|
|
--color-success: #56949f;
|
|
--color-error: #b4637a;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #428089;
|
|
--cta-border: #56949f;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #56949f;
|
|
--cta-border-hover: #6daab4;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #907aa9;
|
|
--accent: #907aac;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* KANAGAWA - Japanese-inspired wave theme */
|
|
[data-color-theme="kanagawa"] {
|
|
--bg: #1f1f28;
|
|
--surface: #16161d;
|
|
--card: #1f1f28;
|
|
--card-hover: #2a2a37;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #363646;
|
|
--text: #dcd7ba;
|
|
--text-muted: #c8c093;
|
|
--text-dim: #727169;
|
|
|
|
--todo: #7e9cd8;
|
|
--in-progress: #7e9cd8;
|
|
--in-progress-rgb: 126, 156, 216;
|
|
--in-review: #98bb6c;
|
|
--triage: #e6c384;
|
|
--done: #727169;
|
|
--color-success: #98bb6c;
|
|
--color-error: #c34043;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #7da55a;
|
|
--cta-border: #98bb6c;
|
|
--cta-text: #1f1f28;
|
|
--cta-bg-hover: #98bb6c;
|
|
--cta-border-hover: #aed085;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #7e9cd8;
|
|
--accent: #957fb8;
|
|
--accent-text: #1f1f28;
|
|
}
|
|
|
|
[data-color-theme="kanagawa"][data-theme="light"] {
|
|
--bg: #edeadd;
|
|
--surface: #e1ddd4;
|
|
--card: #edeadd;
|
|
--card-hover: #ddd8cc;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #c5c1b6;
|
|
--text: #434350;
|
|
--text-muted: #5e5e6a;
|
|
--text-dim: #81818c;
|
|
|
|
--todo: #4e76b5;
|
|
--in-progress: #4e76b5;
|
|
--in-progress-rgb: 78, 118, 181;
|
|
--in-review: #5a8249;
|
|
--triage: #a57c30;
|
|
--done: #81818c;
|
|
--color-success: #5a8249;
|
|
--color-error: #b03438;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #49703f;
|
|
--cta-border: #5a8249;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #5a8249;
|
|
--cta-border-hover: #6b9a5c;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #4e76b5;
|
|
--accent: #7560a0;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* NIGHT OWL - Blue/cyan with warm yellow accents (Sarah Drasner) */
|
|
[data-color-theme="night-owl"] {
|
|
--bg: #011627;
|
|
--surface: #01111d;
|
|
--card: #0a192f;
|
|
--card-hover: #112240;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #1d3557;
|
|
--text: #d6deeb;
|
|
--text-muted: #8da6c2;
|
|
--text-dim: #5c7a99;
|
|
|
|
--todo: #82aaff;
|
|
--in-progress: #addb67;
|
|
--in-progress-rgb: 173, 219, 103;
|
|
--in-review: #4ec9b0;
|
|
--triage: #ecc48d;
|
|
--done: #5c7a99;
|
|
--color-success: #4ec9b0;
|
|
--color-error: #ef5350;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 60%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #3da890;
|
|
--cta-border: #4ec9b0;
|
|
--cta-text: #011627;
|
|
--cta-bg-hover: #4ec9b0;
|
|
--cta-border-hover: #70dbc9;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #82aaff;
|
|
--accent: #82aaff;
|
|
--accent-text: #011627;
|
|
}
|
|
|
|
[data-color-theme="night-owl"][data-theme="light"] {
|
|
--bg: #f6f7f9;
|
|
--surface: #eef0f4;
|
|
--card: #ffffff;
|
|
--card-hover: #f0f2f5;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #c8cdd5;
|
|
--text: #2d3549;
|
|
--text-muted: #5c6a7e;
|
|
--text-dim: #8a95a5;
|
|
|
|
--todo: #2563eb;
|
|
--in-progress: #5a9e2f;
|
|
--in-progress-rgb: 90, 158, 47;
|
|
--in-review: #2b8a73;
|
|
--triage: #b07d2e;
|
|
--done: #8a95a5;
|
|
--color-success: #2b8a73;
|
|
--color-error: #c0392b;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #257a68;
|
|
--cta-border: #2b8a73;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #2b8a73;
|
|
--cta-border-hover: #3a9f8a;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #2563eb;
|
|
--accent: #5a7fd4;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* PALENIGHT - Warm purple-free dark blue palette */
|
|
[data-color-theme="palenight"] {
|
|
--bg: #292d3e;
|
|
--surface: #1e2235;
|
|
--card: #2c3044;
|
|
--card-hover: #353a50;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #3e445e;
|
|
--text: #bfc7d5;
|
|
--text-muted: #8394a5;
|
|
--text-dim: #676e95;
|
|
|
|
--todo: #82aaff;
|
|
--in-progress: #ffcb6b;
|
|
--in-progress-rgb: 255, 203, 107;
|
|
--in-review: #c3e88d;
|
|
--triage: #f78c6c;
|
|
--done: #676e95;
|
|
--color-success: #c3e88d;
|
|
--color-error: #ff5370;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #a3c570;
|
|
--cta-border: #c3e88d;
|
|
--cta-text: #292d3e;
|
|
--cta-bg-hover: #c3e88d;
|
|
--cta-border-hover: #d4f0a5;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #82aaff;
|
|
--accent: #c792ea;
|
|
--accent-text: #292d3e;
|
|
}
|
|
|
|
[data-color-theme="palenight"][data-theme="light"] {
|
|
--bg: #f5f7fa;
|
|
--surface: #ebeef5;
|
|
--card: #ffffff;
|
|
--card-hover: #f0f2f6;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #c5cae0;
|
|
--text: #2c3044;
|
|
--text-muted: #5c6370;
|
|
--text-dim: #8a8fa0;
|
|
|
|
--todo: #3b6fcf;
|
|
--in-progress: #c49020;
|
|
--in-progress-rgb: 196, 144, 32;
|
|
--in-review: #5a9e2f;
|
|
--triage: #c06030;
|
|
--done: #8a8fa0;
|
|
--color-success: #5a9e2f;
|
|
--color-error: #c0392b;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #4a8c28;
|
|
--cta-border: #5a9e2f;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #5a9e2f;
|
|
--cta-border-hover: #6db23c;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #3b6fcf;
|
|
--accent: #9a60c0;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* MONOKAI PRO - Warm oranges and greens */
|
|
[data-color-theme="monokai-pro"] {
|
|
--bg: #2d2a2e;
|
|
--surface: #252229;
|
|
--card: #353036;
|
|
--card-hover: #3f3a40;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #4a434a;
|
|
--text: #fcfcfa;
|
|
--text-muted: #939293;
|
|
--text-dim: #727072;
|
|
|
|
--todo: #78dce8;
|
|
--in-progress: #ff6188;
|
|
--in-progress-rgb: 255, 97, 136;
|
|
--in-review: #a9dc76;
|
|
--triage: #ffd866;
|
|
--done: #727072;
|
|
--color-success: #a9dc76;
|
|
--color-error: #ff6188;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #88c060;
|
|
--cta-border: #a9dc76;
|
|
--cta-text: #2d2a2e;
|
|
--cta-bg-hover: #a9dc76;
|
|
--cta-border-hover: #c2ec92;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #78dce8;
|
|
--accent: #ffd866;
|
|
--accent-text: #2d2a2e;
|
|
}
|
|
|
|
[data-color-theme="monokai-pro"][data-theme="light"] {
|
|
--bg: #faf8f5;
|
|
--surface: #f0ece5;
|
|
--card: #ffffff;
|
|
--card-hover: #f5f2ed;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #c9c3b8;
|
|
--text: #3a3632;
|
|
--text-muted: #6b6460;
|
|
--text-dim: #9a9490;
|
|
|
|
--todo: #2d8fa0;
|
|
--in-progress: #c4405e;
|
|
--in-progress-rgb: 196, 64, 94;
|
|
--in-review: #5a9030;
|
|
--triage: #b8860b;
|
|
--done: #9a9490;
|
|
--color-success: #5a9030;
|
|
--color-error: #c4405e;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #4a7a28;
|
|
--cta-border: #5a9030;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #5a9030;
|
|
--cta-border-hover: #6da63c;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #2d8fa0;
|
|
--accent: #d4a830;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* SLIME - Retro lime green theme */
|
|
[data-color-theme="slime"] {
|
|
--bg: #0a0e09;
|
|
--surface: #0f150d;
|
|
--card: #141c12;
|
|
--card-hover: #1a2418;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #2a3a24;
|
|
--text: #c8e6a0;
|
|
--text-muted: #8ab860;
|
|
--text-dim: #5a7a40;
|
|
|
|
--todo: #8aff40;
|
|
--in-progress: #40e8a0;
|
|
--in-progress-rgb: 64, 232, 160;
|
|
--in-review: #a0ff60;
|
|
--triage: #e0ff40;
|
|
--done: #5a7a40;
|
|
--color-success: #a0ff60;
|
|
--color-error: #ff4040;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 70%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #78d840;
|
|
--cta-border: #a0ff60;
|
|
--cta-text: #0a0e09;
|
|
--cta-bg-hover: #a0ff60;
|
|
--cta-border-hover: #b8ff80;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #60d8a0;
|
|
--accent: #78d840;
|
|
--accent-text: #0a0e09;
|
|
}
|
|
|
|
[data-color-theme="slime"][data-theme="light"] {
|
|
--bg: #f2f7ea;
|
|
--surface: #e6efda;
|
|
--card: #ffffff;
|
|
--card-hover: #f0f5e6;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #b8ccaa;
|
|
--text: #2a3a20;
|
|
--text-muted: #4a6040;
|
|
--text-dim: #7a8a70;
|
|
|
|
--todo: #3d8f10;
|
|
--in-progress: #1a8a6a;
|
|
--in-progress-rgb: 26, 138, 106;
|
|
--in-review: #4a8a20;
|
|
--triage: #8a8a10;
|
|
--done: #7a8a70;
|
|
--color-success: #4a8a20;
|
|
--color-error: #b03030;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #3a7a18;
|
|
--cta-border: #4a8a20;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #4a8a20;
|
|
--cta-border-hover: #5a9a2c;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #1a7a5a;
|
|
--accent: #5ab030;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* BRUTALIST - Concrete and signage inspired harsh UI */
|
|
[data-color-theme="brutalist"] {
|
|
--bg: #101010;
|
|
--surface: #171717;
|
|
--card: #1d1d1d;
|
|
--card-hover: #232323;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #f5f5f5;
|
|
--text: #f7f7f7;
|
|
--text-muted: #b8b8b8;
|
|
--text-dim: #6f6f6f;
|
|
|
|
--todo: #ff6a00;
|
|
--in-progress: #ffd100;
|
|
--in-progress-rgb: 255, 209, 0;
|
|
--in-review: #8de000;
|
|
--triage: #ff3d00;
|
|
--done: #7f7f7f;
|
|
--color-success: #8de000;
|
|
--color-error: #ff3d00;
|
|
|
|
--font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
|
--font-mono: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
|
|
|
|
--space-xs: 3px;
|
|
--space-sm: 6px;
|
|
--space-md: 9px;
|
|
--space-lg: 12px;
|
|
--space-xl: 18px;
|
|
--space-2xl: 24px;
|
|
|
|
--radius-sm: 0px;
|
|
--radius-md: 0px;
|
|
--radius-lg: 0px;
|
|
--radius-xl: 0px;
|
|
--radius-pill: 0px;
|
|
--radius: 0px;
|
|
|
|
--btn-padding: 8px 12px;
|
|
--btn-border-width: 3px;
|
|
--card-padding: 9px 11px;
|
|
--modal-padding: var(--space-lg) var(--space-xl);
|
|
--header-padding: var(--space-md) var(--space-xl);
|
|
--column-gap: var(--space-sm);
|
|
--board-padding: var(--space-lg) var(--space-xl);
|
|
|
|
--shadow-sm: none;
|
|
--shadow-md: none;
|
|
--shadow-lg: none;
|
|
--shadow-glow: none;
|
|
--focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
|
|
--focus-ring-strong: 0 0 0 3px color-mix(in srgb, var(--accent) 44%, transparent);
|
|
--shadow: none;
|
|
|
|
--transition-instant: 0.04s linear;
|
|
--transition-fast: 0.08s linear;
|
|
--transition-normal: 0.12s linear;
|
|
--transition-slow: 0.16s linear;
|
|
|
|
--cta-bg: #ff6a00;
|
|
--cta-border: #ffd100;
|
|
--cta-text: #0f0f0f;
|
|
--cta-bg-hover: #ff7f23;
|
|
--cta-border-hover: #ffe266;
|
|
--cta-glow: none;
|
|
--logo-accent: var(--todo);
|
|
--color-info: #ffd100;
|
|
--accent: #ff6a00;
|
|
--accent-text: #0f0f0f;
|
|
}
|
|
|
|
[data-color-theme="brutalist"][data-theme="light"] {
|
|
--bg: #ece9e4;
|
|
--surface: #f7f4ef;
|
|
--card: #ffffff;
|
|
--card-hover: #f0ece6;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #161616;
|
|
--text: #121212;
|
|
--text-muted: #424242;
|
|
--text-dim: #717171;
|
|
|
|
--todo: #d9480f;
|
|
--in-progress: #b8860b;
|
|
--in-progress-rgb: 184, 134, 11;
|
|
--in-review: #4f8f00;
|
|
--triage: #b32000;
|
|
--done: #666666;
|
|
--color-success: #4f8f00;
|
|
--color-error: #b32000;
|
|
|
|
--focus-ring: 0 0 0 3px color-mix(in srgb, var(--todo) 22%, transparent);
|
|
--focus-ring-strong: 0 0 0 3px color-mix(in srgb, var(--todo) 35%, transparent);
|
|
|
|
--cta-bg: #c2410c;
|
|
--cta-border: #d9480f;
|
|
--cta-text: #ffffff;
|
|
--cta-bg-hover: #d9480f;
|
|
--cta-border-hover: #ea580c;
|
|
--logo-accent: var(--todo);
|
|
--color-info: #b8860b;
|
|
--accent: #c2410c;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
[data-color-theme="brutalist"] .btn {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-weight: 800;
|
|
border-width: 3px;
|
|
}
|
|
|
|
[data-color-theme="brutalist"] .btn-primary,
|
|
[data-color-theme="brutalist"] .btn-task-create {
|
|
background: transparent;
|
|
border-color: var(--todo);
|
|
color: var(--todo);
|
|
}
|
|
|
|
[data-color-theme="brutalist"] .btn-primary:hover,
|
|
[data-color-theme="brutalist"] .btn-task-create:hover {
|
|
background: var(--todo);
|
|
color: var(--bg);
|
|
}
|
|
|
|
[data-color-theme="brutalist"] .card,
|
|
[data-color-theme="brutalist"] .column {
|
|
border-width: 3px;
|
|
border-style: solid;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-color-theme="brutalist"] .column-header h2,
|
|
[data-color-theme="brutalist"] .theme-section-title,
|
|
[data-color-theme="brutalist"] .modal-header h3 {
|
|
font-family: Impact, "Arial Black", "Franklin Gothic Heavy", sans-serif;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
[data-color-theme="brutalist"] .theme-option-swatch {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* NEON CITY - Cyberpunk neon-on-black */
|
|
[data-color-theme="neon-city"] {
|
|
--bg: #0d0d15;
|
|
--surface: #121326;
|
|
--card: #171933;
|
|
--card-hover: #1d2040;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #3d2466;
|
|
--text: #f2edff;
|
|
--text-muted: #a89dc9;
|
|
--text-dim: #6c6490;
|
|
|
|
--todo: #ff2d95;
|
|
--in-progress: #00f0ff;
|
|
--in-progress-rgb: 0, 240, 255;
|
|
--in-review: #78ff4d;
|
|
--triage: #ffab00;
|
|
--done: #7f739f;
|
|
--color-success: #78ff4d;
|
|
--color-error: #ff568f;
|
|
|
|
--font-primary: "Rajdhani", "Orbitron", "Share Tech Mono", "Segoe UI", sans-serif;
|
|
--font-mono: "Share Tech Mono", "Fira Code", "JetBrains Mono", monospace;
|
|
|
|
--space-xs: 3px;
|
|
--space-sm: 7px;
|
|
--space-md: 10px;
|
|
--space-lg: 14px;
|
|
--space-xl: 20px;
|
|
--space-2xl: 28px;
|
|
|
|
--radius-sm: 10px;
|
|
--radius-md: 16px;
|
|
--radius-lg: 24px;
|
|
--radius-xl: 28px;
|
|
--radius-pill: 999px;
|
|
--radius: var(--radius-md);
|
|
|
|
--btn-padding: 8px 16px;
|
|
--btn-border-width: 2px;
|
|
--card-padding: 10px 12px;
|
|
|
|
--shadow-sm: 0 2px 6px color-mix(in srgb, #000000 35%, transparent);
|
|
--shadow-md: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent);
|
|
--shadow-lg: 0 0 26px color-mix(in srgb, var(--color-info) 20%, transparent);
|
|
--shadow-glow: 0 0 10px color-mix(in srgb, var(--todo) 45%, transparent);
|
|
--glow-success: 0 0 10px color-mix(in srgb, var(--color-success) 45%, transparent);
|
|
--glow-warning: 0 0 10px color-mix(in srgb, var(--triage) 45%, transparent);
|
|
--glow-danger: 0 0 10px color-mix(in srgb, var(--color-error) 42%, transparent);
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-info) 20%, transparent);
|
|
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--transition-instant: 0.08s ease;
|
|
--transition-fast: 0.13s ease;
|
|
--transition-normal: 0.2s ease;
|
|
--transition-slow: 0.28s ease;
|
|
|
|
--cta-bg: #ff2d95;
|
|
--cta-border: #00f0ff;
|
|
--cta-text: #0d0d15;
|
|
--cta-bg-hover: #ff4aa4;
|
|
--cta-border-hover: #7ff7ff;
|
|
--cta-glow: 0 0 12px color-mix(in srgb, var(--cta-bg) 45%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #00f0ff;
|
|
--accent: #ff2d95;
|
|
--accent-text: #0d0d15;
|
|
}
|
|
|
|
[data-color-theme="neon-city"][data-theme="light"] {
|
|
--bg: #f7f5ff;
|
|
--surface: #f1edff;
|
|
--card: #ffffff;
|
|
--card-hover: #f8f3ff;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #cbbee8;
|
|
--text: #22163c;
|
|
--text-muted: #6b5f85;
|
|
--text-dim: #8a82a8;
|
|
|
|
--todo: #cc166e;
|
|
--in-progress: #008e9b;
|
|
--in-progress-rgb: 0, 142, 155;
|
|
--in-review: #3a8a2e;
|
|
--triage: #b57200;
|
|
--done: #8a82a8;
|
|
--color-success: #3a8a2e;
|
|
--color-error: #b11f5b;
|
|
|
|
--shadow-md: 0 0 10px color-mix(in srgb, var(--todo) 14%, transparent);
|
|
--shadow-lg: 0 0 22px color-mix(in srgb, var(--color-info) 12%, transparent);
|
|
--shadow-glow: 0 0 10px color-mix(in srgb, var(--todo) 24%, transparent);
|
|
--glow-success: 0 0 10px color-mix(in srgb, var(--color-success) 24%, transparent);
|
|
--glow-warning: 0 0 10px color-mix(in srgb, var(--triage) 24%, transparent);
|
|
--glow-danger: 0 0 10px color-mix(in srgb, var(--color-error) 20%, transparent);
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-info) 17%, transparent);
|
|
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--todo) 24%, transparent);
|
|
|
|
--cta-bg: #b1145f;
|
|
--cta-border: #008e9b;
|
|
--cta-text: #ffffff;
|
|
--cta-bg-hover: #cc166e;
|
|
--cta-border-hover: #00a8b8;
|
|
--cta-glow: 0 0 10px color-mix(in srgb, var(--cta-bg) 26%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #008e9b;
|
|
--accent: #d63384;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
[data-color-theme="neon-city"] .btn {
|
|
border-width: 2px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
[data-color-theme="neon-city"] .btn-primary,
|
|
[data-color-theme="neon-city"] .btn-task-create {
|
|
border-color: color-mix(in srgb, var(--todo) 70%, var(--in-progress) 30%);
|
|
color: var(--todo);
|
|
box-shadow: 0 0 10px color-mix(in srgb, #ff2d95 25%, transparent);
|
|
}
|
|
|
|
[data-color-theme="neon-city"] .btn-primary:hover,
|
|
[data-color-theme="neon-city"] .btn-task-create:hover {
|
|
color: var(--text);
|
|
border-color: var(--in-progress);
|
|
box-shadow:
|
|
0 0 8px color-mix(in srgb, #ff2d95 60%, transparent),
|
|
0 0 14px color-mix(in srgb, #00f0ff 45%, transparent);
|
|
}
|
|
|
|
[data-color-theme="neon-city"] .card,
|
|
[data-color-theme="neon-city"] .column {
|
|
border-color: color-mix(in srgb, var(--todo) 40%, var(--border) 60%);
|
|
box-shadow:
|
|
inset 0 0 0 1px color-mix(in srgb, var(--in-progress) 25%, transparent),
|
|
var(--shadow-md);
|
|
}
|
|
|
|
[data-color-theme="neon-city"] .column-header h2 {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
[data-color-theme="neon-city"] .card.agent-active {
|
|
border-color: var(--in-progress);
|
|
animation: neon-agent-pulse 2.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes neon-agent-pulse {
|
|
0%,
|
|
100% {
|
|
box-shadow:
|
|
0 0 8px color-mix(in srgb, #ff2d95 35%, transparent),
|
|
0 0 16px color-mix(in srgb, #00f0ff 25%, transparent);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 14px color-mix(in srgb, #ff2d95 65%, transparent),
|
|
0 0 24px color-mix(in srgb, #00f0ff 45%, transparent);
|
|
}
|
|
}
|
|
|
|
[data-color-theme="neon-city"][data-theme="light"] .card.agent-active {
|
|
animation: neon-agent-pulse-light 2.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes neon-agent-pulse-light {
|
|
0%,
|
|
100% {
|
|
box-shadow:
|
|
0 0 8px color-mix(in srgb, #b1145f 22%, transparent),
|
|
0 0 16px color-mix(in srgb, #008e9b 18%, transparent);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 12px color-mix(in srgb, #b1145f 32%, transparent),
|
|
0 0 20px color-mix(in srgb, #008e9b 26%, transparent);
|
|
}
|
|
}
|
|
|
|
/* PARCHMENT - Warm manuscript aesthetic */
|
|
[data-color-theme="parchment"] {
|
|
--bg: #1b1712;
|
|
--surface: #252019;
|
|
--card: #2f281f;
|
|
--card-hover: #392f24;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #5a4632;
|
|
--text: #efe0c8;
|
|
--text-muted: #b89f7e;
|
|
--text-dim: #8a7258;
|
|
|
|
--todo: #d08a4b;
|
|
--in-progress: #be6e3c;
|
|
--in-progress-rgb: 190, 110, 60;
|
|
--in-review: #8ca65f;
|
|
--triage: #e4ac54;
|
|
--done: #8a7258;
|
|
--color-success: #8ca65f;
|
|
--color-error: #d36d45;
|
|
|
|
--font-primary: Georgia, "Times New Roman", Times, serif;
|
|
--font-mono: "Courier New", Courier, monospace;
|
|
|
|
--space-xs: 5px;
|
|
--space-sm: 10px;
|
|
--space-md: 14px;
|
|
--space-lg: 19px;
|
|
--space-xl: 29px;
|
|
--space-2xl: 38px;
|
|
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 10px;
|
|
--radius-xl: 14px;
|
|
--radius-pill: 999px;
|
|
--radius: var(--radius-md);
|
|
|
|
--btn-padding: 9px 18px;
|
|
--btn-border-width: 1px;
|
|
--card-padding: 12px 14px;
|
|
--modal-padding: var(--space-lg) calc(var(--space-xl) + 2px);
|
|
--header-padding: var(--space-md) var(--space-xl);
|
|
|
|
--shadow-sm: 0 1px 2px color-mix(in srgb, #0a0805 45%, transparent);
|
|
--shadow-md: 0 4px 12px color-mix(in srgb, #0a0805 35%, transparent);
|
|
--shadow-lg: 0 12px 28px color-mix(in srgb, #0a0805 40%, transparent);
|
|
--shadow-glow: 0 0 8px color-mix(in srgb, var(--todo) 25%, transparent);
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-info) 22%, transparent);
|
|
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--color-info) 34%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #be6e3c;
|
|
--cta-border: #d08a4b;
|
|
--cta-text: #f8eedf;
|
|
--cta-bg-hover: #d08a4b;
|
|
--cta-border-hover: #dda165;
|
|
--cta-glow: 0 0 10px color-mix(in srgb, var(--cta-border) 25%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #d08a4b;
|
|
--accent: #d08a4b;
|
|
--accent-text: #f8eedf;
|
|
}
|
|
|
|
[data-color-theme="parchment"][data-theme="light"] {
|
|
--bg: #f5f0e8;
|
|
--surface: #efe7dc;
|
|
--card: #fffaf2;
|
|
--card-hover: #f6eee2;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d1bda6;
|
|
--text: #3a2f23;
|
|
--text-muted: #6a5844;
|
|
--text-dim: #9a8774;
|
|
|
|
--todo: #a8562f;
|
|
--in-progress: #8f4e2a;
|
|
--in-progress-rgb: 143, 78, 42;
|
|
--in-review: #5f7d3f;
|
|
--triage: #b07a2a;
|
|
--done: #9a8774;
|
|
--color-success: #5f7d3f;
|
|
--color-error: #b24f2f;
|
|
|
|
--shadow-sm: 0 1px 2px color-mix(in srgb, #4a3723 12%, transparent);
|
|
--shadow-md: 0 5px 14px color-mix(in srgb, #4a3723 14%, transparent);
|
|
--shadow-lg: 0 14px 30px color-mix(in srgb, #4a3723 16%, transparent);
|
|
--shadow-glow: 0 0 8px color-mix(in srgb, var(--todo) 20%, transparent);
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--todo) 15%, transparent);
|
|
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--todo) 24%, transparent);
|
|
|
|
--cta-bg: #99502d;
|
|
--cta-border: #a8562f;
|
|
--cta-text: #fff9f2;
|
|
--cta-bg-hover: #a8562f;
|
|
--cta-border-hover: #bf6a3f;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 20%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #8f4e2a;
|
|
--accent: #a66b35;
|
|
--accent-text: #fff9f2;
|
|
}
|
|
|
|
[data-color-theme="parchment"] .btn {
|
|
font-family: var(--font-primary);
|
|
border-color: color-mix(in srgb, var(--todo) 40%, var(--border) 60%);
|
|
box-shadow: inset 0 -1px 0 color-mix(in srgb, #000000 18%, transparent);
|
|
}
|
|
|
|
[data-color-theme="parchment"] .btn-primary,
|
|
[data-color-theme="parchment"] .btn-task-create {
|
|
background: color-mix(in srgb, var(--todo) 18%, var(--surface) 82%);
|
|
color: var(--text);
|
|
}
|
|
|
|
[data-color-theme="parchment"] .card,
|
|
[data-color-theme="parchment"] .column {
|
|
border-color: color-mix(in srgb, var(--border) 76%, var(--todo) 24%);
|
|
background-image:
|
|
linear-gradient(180deg, color-mix(in srgb, #ffffff 2%, transparent), color-mix(in srgb, #000000 6%, transparent)),
|
|
linear-gradient(0deg, color-mix(in srgb, #c9a070 8%, transparent), color-mix(in srgb, #c9a070 8%, transparent));
|
|
box-shadow:
|
|
inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
|
|
0 2px 10px color-mix(in srgb, #1a140e 20%, transparent);
|
|
}
|
|
|
|
[data-color-theme="parchment"][data-theme="light"] .card,
|
|
[data-color-theme="parchment"][data-theme="light"] .column {
|
|
box-shadow:
|
|
inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent),
|
|
0 3px 12px color-mix(in srgb, #795a3a 15%, transparent);
|
|
}
|
|
|
|
[data-color-theme="parchment"] .column-header h2 {
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* TERMINAL - Retro CRT monospace */
|
|
[data-color-theme="terminal"] {
|
|
--bg: #0a0a0a;
|
|
--surface: #0f120d;
|
|
--card: #121712;
|
|
--card-hover: #171e16;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #2e5c1f;
|
|
--text: #8dff6f;
|
|
--text-muted: #61b74b;
|
|
--text-dim: #3f6c32;
|
|
|
|
--todo: #33ff00;
|
|
--in-progress: #8fff38;
|
|
--in-progress-rgb: 143, 255, 56;
|
|
--in-review: #a8ff5a;
|
|
--triage: #ffb000;
|
|
--done: #3f6c32;
|
|
--color-success: #a8ff5a;
|
|
--color-error: #ff8a00;
|
|
|
|
--font-primary: "IBM Plex Mono", "Source Code Pro", "Courier New", monospace;
|
|
--font-mono: "IBM Plex Mono", "Source Code Pro", "Courier New", monospace;
|
|
|
|
--space-xs: 2px;
|
|
--space-sm: 6px;
|
|
--space-md: 10px;
|
|
--space-lg: 14px;
|
|
--space-xl: 20px;
|
|
--space-2xl: 28px;
|
|
|
|
--radius-sm: 0px;
|
|
--radius-md: 2px;
|
|
--radius-lg: 2px;
|
|
--radius-xl: 2px;
|
|
--radius-pill: 2px;
|
|
--radius: var(--radius-md);
|
|
|
|
--btn-padding: 7px 12px;
|
|
--btn-border-width: 2px;
|
|
--card-padding: 9px 10px;
|
|
|
|
--shadow-sm: 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
|
|
--shadow-md: 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
|
|
--shadow-lg: 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent);
|
|
--shadow-glow: 0 0 10px color-mix(in srgb, var(--todo) 35%, transparent);
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent);
|
|
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 42%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--transition-instant: 0.02s steps(2, end);
|
|
--transition-fast: 0.06s steps(3, end);
|
|
--transition-normal: 0.1s steps(4, end);
|
|
--transition-slow: 0.16s steps(5, end);
|
|
|
|
--cta-bg: #33ff00;
|
|
--cta-border: #8fff38;
|
|
--cta-text: #061004;
|
|
--cta-bg-hover: #6dff2f;
|
|
--cta-border-hover: #b2ff67;
|
|
--cta-glow: 0 0 10px color-mix(in srgb, var(--cta-bg) 35%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #8fff38;
|
|
--accent: #33ff00;
|
|
--accent-text: #061004;
|
|
}
|
|
|
|
[data-color-theme="terminal"][data-theme="light"] {
|
|
--bg: #e7f5dd;
|
|
--surface: #deefd2;
|
|
--card: #f4fbef;
|
|
--card-hover: #e8f4e0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #6a8e59;
|
|
--text: #19420f;
|
|
--text-muted: #2f6a21;
|
|
--text-dim: #5a7d50;
|
|
|
|
--todo: #2d6b14;
|
|
--in-progress: #4c8f25;
|
|
--in-progress-rgb: 76, 143, 37;
|
|
--in-review: #5e9c2d;
|
|
--triage: #8f5f00;
|
|
--done: #5a7d50;
|
|
--color-success: #5e9c2d;
|
|
--color-error: #8f5f00;
|
|
|
|
--shadow-sm: 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
|
|
--shadow-md: 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent);
|
|
--shadow-lg: 0 0 14px color-mix(in srgb, var(--accent) 15%, transparent);
|
|
--shadow-glow: 0 0 8px color-mix(in srgb, var(--todo) 20%, transparent);
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
|
|
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
|
|
|
|
--cta-bg: #2d6b14;
|
|
--cta-border: #4c8f25;
|
|
--cta-text: #f4fbef;
|
|
--cta-bg-hover: #3d7d1c;
|
|
--cta-border-hover: #5ea82f;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 20%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #4c8f25;
|
|
--accent: #2d6b14;
|
|
--accent-text: #f4fbef;
|
|
}
|
|
|
|
[data-color-theme="terminal"] .btn,
|
|
[data-color-theme="terminal"] input,
|
|
[data-color-theme="terminal"] textarea,
|
|
[data-color-theme="terminal"] select {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
[data-color-theme="terminal"] .btn {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
}
|
|
|
|
[data-color-theme="terminal"] .btn-primary,
|
|
[data-color-theme="terminal"] .btn-task-create {
|
|
border-color: var(--todo);
|
|
color: var(--todo);
|
|
background: color-mix(in srgb, var(--todo) 8%, transparent);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--todo) 55%, transparent);
|
|
}
|
|
|
|
[data-color-theme="terminal"] .card,
|
|
[data-color-theme="terminal"] .column {
|
|
border-style: dashed;
|
|
border-width: 2px;
|
|
box-shadow:
|
|
inset 0 0 0 1px color-mix(in srgb, var(--todo) 28%, transparent),
|
|
var(--shadow-sm);
|
|
}
|
|
|
|
[data-color-theme="terminal"] .column-header h2 {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
text-shadow: 0 0 6px color-mix(in srgb, var(--todo) 35%, transparent);
|
|
}
|
|
|
|
:root[data-color-theme="terminal"] body::before,
|
|
body[data-color-theme="terminal"]::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background: repeating-linear-gradient(
|
|
to bottom,
|
|
color-mix(in srgb, #33ff00 8%, transparent) 0px,
|
|
color-mix(in srgb, #33ff00 8%, transparent) 1px,
|
|
transparent 1px,
|
|
transparent 3px
|
|
);
|
|
mix-blend-mode: screen;
|
|
opacity: 0.16;
|
|
pointer-events: none;
|
|
z-index: 2147483647;
|
|
}
|
|
|
|
:root[data-color-theme="terminal"][data-theme="light"] body::before,
|
|
body[data-color-theme="terminal"][data-theme="light"]::before {
|
|
background: repeating-linear-gradient(
|
|
to bottom,
|
|
color-mix(in srgb, #11340c 7%, transparent) 0px,
|
|
color-mix(in srgb, #11340c 7%, transparent) 1px,
|
|
transparent 1px,
|
|
transparent 3px
|
|
);
|
|
mix-blend-mode: multiply;
|
|
opacity: 0.12;
|
|
}
|
|
|
|
/* GLASS - Frosted translucent surfaces */
|
|
[data-color-theme="glass"] {
|
|
--bg: #13111f;
|
|
--surface: color-mix(in srgb, #221b34 78%, transparent);
|
|
--card: color-mix(in srgb, #362c52 55%, transparent);
|
|
--card-hover: color-mix(in srgb, #423863 65%, transparent);
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: color-mix(in srgb, #ffffff 22%, transparent);
|
|
--text: #f2effa;
|
|
--text-muted: #b8b0d2;
|
|
--text-dim: #827aa1;
|
|
|
|
--todo: #c86bff;
|
|
--in-progress: #ff7aa8;
|
|
--in-progress-rgb: 255, 122, 168;
|
|
--in-review: #89d7b0;
|
|
--triage: #f2ba5b;
|
|
--done: #827aa1;
|
|
--color-success: #89d7b0;
|
|
--color-error: #ff7a9c;
|
|
|
|
--font-primary: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-mono: "SF Mono", "JetBrains Mono", "Menlo", monospace;
|
|
|
|
--space-xs: 5px;
|
|
--space-sm: 10px;
|
|
--space-md: 14px;
|
|
--space-lg: 20px;
|
|
--space-xl: 28px;
|
|
--space-2xl: 38px;
|
|
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-xl: 26px;
|
|
--radius-pill: 999px;
|
|
--radius: var(--radius-md);
|
|
|
|
--btn-padding: 9px 16px;
|
|
--btn-border-width: 1px;
|
|
--card-padding: 12px 14px;
|
|
--modal-padding: var(--space-lg) var(--space-xl);
|
|
|
|
--shadow-sm: 0 8px 16px color-mix(in srgb, #050212 24%, transparent);
|
|
--shadow-md: 0 14px 30px color-mix(in srgb, #060318 30%, transparent);
|
|
--shadow-lg: 0 22px 42px color-mix(in srgb, #08041e 35%, transparent);
|
|
--shadow-glow: 0 0 12px color-mix(in srgb, var(--todo) 26%, transparent);
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
|
|
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--transition-instant: 0.08s ease;
|
|
--transition-fast: 0.14s ease;
|
|
--transition-normal: 0.22s ease;
|
|
--transition-slow: 0.34s ease;
|
|
|
|
--cta-bg: color-mix(in srgb, var(--accent) 32%, transparent);
|
|
--cta-border: color-mix(in srgb, #ffffff 38%, transparent);
|
|
--cta-text: #f8f5ff;
|
|
--cta-bg-hover: color-mix(in srgb, var(--accent) 46%, transparent);
|
|
--cta-border-hover: color-mix(in srgb, #ffffff 50%, transparent);
|
|
--cta-glow: 0 0 12px color-mix(in srgb, var(--accent) 24%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #ff7aa8;
|
|
--accent: #c86bff;
|
|
--accent-text: #f8f5ff;
|
|
}
|
|
|
|
[data-color-theme="glass"][data-theme="light"] {
|
|
--bg: #eceaf5;
|
|
--surface: color-mix(in srgb, #ffffff 75%, transparent);
|
|
--card: color-mix(in srgb, #ffffff 60%, transparent);
|
|
--card-hover: color-mix(in srgb, #ffffff 75%, transparent);
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: color-mix(in srgb, #725b9c 22%, transparent);
|
|
--text: #2f2448;
|
|
--text-muted: #66597f;
|
|
--text-dim: #948aa8;
|
|
|
|
--todo: #9d40cf;
|
|
--in-progress: #c74b7a;
|
|
--in-progress-rgb: 199, 75, 122;
|
|
--in-review: #3e8f6b;
|
|
--triage: #b67a1f;
|
|
--done: #948aa8;
|
|
--color-success: #3e8f6b;
|
|
--color-error: #c74b7a;
|
|
|
|
--shadow-sm: 0 8px 16px color-mix(in srgb, #3f2c66 8%, transparent);
|
|
--shadow-md: 0 14px 30px color-mix(in srgb, #3f2c66 10%, transparent);
|
|
--shadow-lg: 0 22px 42px color-mix(in srgb, #3f2c66 14%, transparent);
|
|
--shadow-glow: 0 0 10px color-mix(in srgb, var(--todo) 20%, transparent);
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
|
|
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
|
|
|
|
--cta-bg: color-mix(in srgb, var(--accent) 24%, transparent);
|
|
--cta-border: color-mix(in srgb, var(--accent) 38%, transparent);
|
|
--cta-text: #2f2448;
|
|
--cta-bg-hover: color-mix(in srgb, var(--accent) 34%, transparent);
|
|
--cta-border-hover: color-mix(in srgb, var(--accent) 48%, transparent);
|
|
--cta-glow: 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #c74b7a;
|
|
--accent: #9d40cf;
|
|
--accent-text: #2f2448;
|
|
}
|
|
|
|
[data-color-theme="glass"] .card,
|
|
[data-color-theme="glass"] .column {
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
background: color-mix(in srgb, #ffffff 8%, transparent);
|
|
border-color: color-mix(in srgb, #ffffff 24%, transparent);
|
|
}
|
|
|
|
[data-color-theme="glass"][data-theme="light"] .card,
|
|
[data-color-theme="glass"][data-theme="light"] .column {
|
|
background: color-mix(in srgb, #ffffff 60%, transparent);
|
|
border-color: color-mix(in srgb, #725b9c 24%, transparent);
|
|
}
|
|
|
|
[data-color-theme="glass"] .btn {
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border-color: color-mix(in srgb, #ffffff 34%, transparent);
|
|
background: color-mix(in srgb, #ffffff 10%, transparent);
|
|
}
|
|
|
|
[data-color-theme="glass"] .btn-primary,
|
|
[data-color-theme="glass"] .btn-task-create {
|
|
background: linear-gradient(135deg, color-mix(in srgb, #c86bff 35%, transparent), color-mix(in srgb, #ff7aa8 30%, transparent));
|
|
border-color: color-mix(in srgb, #ffffff 42%, transparent);
|
|
}
|
|
|
|
[data-color-theme="glass"] .btn-primary:hover,
|
|
[data-color-theme="glass"] .btn-task-create:hover {
|
|
background: linear-gradient(135deg, color-mix(in srgb, #c86bff 50%, transparent), color-mix(in srgb, #ff7aa8 42%, transparent));
|
|
box-shadow: 0 12px 24px color-mix(in srgb, #180e2c 28%, transparent);
|
|
}
|
|
|
|
[data-color-theme="glass"][data-theme="light"] .btn {
|
|
background: color-mix(in srgb, #ffffff 52%, transparent);
|
|
border-color: color-mix(in srgb, #725b9c 28%, transparent);
|
|
}
|
|
|
|
[data-color-theme="glass"] .modal-overlay {
|
|
/*
|
|
FNXC:ModalChrome 2026-06-23-21:36:
|
|
Even glass-style themes should keep modal overlays non-dimming/non-blurring; modal panels provide depth with shadows and their own translucent surfaces.
|
|
*/
|
|
background: transparent;
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
}
|
|
|
|
|
|
/* GLASS SILVER - Frosted translucent silver/gray surfaces */
|
|
[data-color-theme="glass-silver"] {
|
|
/*
|
|
FNXC:DashboardTheming 2026-07-01-00:00:
|
|
Glass Silver must preserve the same frosted, translucent surface contract as Glass while replacing the purple/pink accents with silver and graphite tones across dark and light modes.
|
|
*/
|
|
--bg: #101216;
|
|
--surface: color-mix(in srgb, #252a32 78%, transparent);
|
|
--card: color-mix(in srgb, #3a414c 55%, transparent);
|
|
--card-hover: color-mix(in srgb, #49515d 65%, transparent);
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: color-mix(in srgb, #f5f7fa 22%, transparent);
|
|
--text: #f3f4f6;
|
|
--text-muted: #c5cad3;
|
|
--text-dim: #8f97a3;
|
|
|
|
--todo: #d7dde6;
|
|
--in-progress: #b9c2cf;
|
|
--in-progress-rgb: 185, 194, 207;
|
|
--in-review: #a7b4c2;
|
|
--triage: #c7b88f;
|
|
--done: #8f97a3;
|
|
--color-success: #a7b4c2;
|
|
--color-error: #ef8f8f;
|
|
|
|
--font-primary: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-mono: "SF Mono", "JetBrains Mono", "Menlo", monospace;
|
|
|
|
--space-xs: 5px;
|
|
--space-sm: 10px;
|
|
--space-md: 14px;
|
|
--space-lg: 20px;
|
|
--space-xl: 28px;
|
|
--space-2xl: 38px;
|
|
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-xl: 26px;
|
|
--radius-pill: 999px;
|
|
--radius: var(--radius-md);
|
|
|
|
--btn-padding: 9px 16px;
|
|
--btn-border-width: 1px;
|
|
--card-padding: 12px 14px;
|
|
--modal-padding: var(--space-lg) var(--space-xl);
|
|
|
|
--shadow-sm: 0 8px 16px color-mix(in srgb, #020305 24%, transparent);
|
|
--shadow-md: 0 14px 30px color-mix(in srgb, #030407 30%, transparent);
|
|
--shadow-lg: 0 22px 42px color-mix(in srgb, #04060a 35%, transparent);
|
|
--shadow-glow: 0 0 12px color-mix(in srgb, var(--todo) 22%, transparent);
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
|
|
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--transition-instant: 0.08s ease;
|
|
--transition-fast: 0.14s ease;
|
|
--transition-normal: 0.22s ease;
|
|
--transition-slow: 0.34s ease;
|
|
|
|
--cta-bg: color-mix(in srgb, var(--accent) 32%, transparent);
|
|
--cta-border: color-mix(in srgb, #f5f7fa 38%, transparent);
|
|
--cta-text: #f7f8fa;
|
|
--cta-bg-hover: color-mix(in srgb, var(--accent) 46%, transparent);
|
|
--cta-border-hover: color-mix(in srgb, #f5f7fa 50%, transparent);
|
|
--cta-glow: 0 0 12px color-mix(in srgb, var(--accent) 24%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #b9c2cf;
|
|
--accent: #d7dde6;
|
|
--accent-text: #111318;
|
|
}
|
|
|
|
[data-color-theme="glass-silver"][data-theme="light"] {
|
|
--bg: #eef0f3;
|
|
--surface: color-mix(in srgb, #ffffff 75%, transparent);
|
|
--card: color-mix(in srgb, #ffffff 60%, transparent);
|
|
--card-hover: color-mix(in srgb, #ffffff 75%, transparent);
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: color-mix(in srgb, #5d6673 22%, transparent);
|
|
--text: #252a31;
|
|
--text-muted: #58616d;
|
|
--text-dim: #8a929d;
|
|
|
|
--todo: #5f6875;
|
|
--in-progress: #747f8c;
|
|
--in-progress-rgb: 116, 127, 140;
|
|
--in-review: #667383;
|
|
--triage: #907d53;
|
|
--done: #8a929d;
|
|
--color-success: #667383;
|
|
--color-error: #b24f4f;
|
|
|
|
--shadow-sm: 0 8px 16px color-mix(in srgb, #1f2933 8%, transparent);
|
|
--shadow-md: 0 14px 30px color-mix(in srgb, #1f2933 10%, transparent);
|
|
--shadow-lg: 0 22px 42px color-mix(in srgb, #1f2933 14%, transparent);
|
|
--shadow-glow: 0 0 10px color-mix(in srgb, var(--todo) 20%, transparent);
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
|
|
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
|
|
|
|
--cta-bg: color-mix(in srgb, var(--accent) 24%, transparent);
|
|
--cta-border: color-mix(in srgb, var(--accent) 38%, transparent);
|
|
--cta-text: #252a31;
|
|
--cta-bg-hover: color-mix(in srgb, var(--accent) 34%, transparent);
|
|
--cta-border-hover: color-mix(in srgb, var(--accent) 48%, transparent);
|
|
--cta-glow: 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #747f8c;
|
|
--accent: #5f6875;
|
|
--accent-text: #ffffff;
|
|
}
|
|
|
|
[data-color-theme="glass-silver"] .card,
|
|
[data-color-theme="glass-silver"] .column {
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
background: color-mix(in srgb, #f5f7fa 8%, transparent);
|
|
border-color: color-mix(in srgb, #f5f7fa 24%, transparent);
|
|
}
|
|
|
|
[data-color-theme="glass-silver"][data-theme="light"] .card,
|
|
[data-color-theme="glass-silver"][data-theme="light"] .column {
|
|
background: color-mix(in srgb, #ffffff 60%, transparent);
|
|
border-color: color-mix(in srgb, #5d6673 24%, transparent);
|
|
}
|
|
|
|
[data-color-theme="glass-silver"] .btn {
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border-color: color-mix(in srgb, #f5f7fa 34%, transparent);
|
|
background: color-mix(in srgb, #f5f7fa 10%, transparent);
|
|
}
|
|
|
|
[data-color-theme="glass-silver"] .btn-primary,
|
|
[data-color-theme="glass-silver"] .btn-task-create {
|
|
background: linear-gradient(135deg, color-mix(in srgb, #d7dde6 35%, transparent), color-mix(in srgb, #9ca6b4 30%, transparent));
|
|
border-color: color-mix(in srgb, #f5f7fa 42%, transparent);
|
|
}
|
|
|
|
[data-color-theme="glass-silver"] .btn-primary:hover,
|
|
[data-color-theme="glass-silver"] .btn-task-create:hover {
|
|
background: linear-gradient(135deg, color-mix(in srgb, #d7dde6 50%, transparent), color-mix(in srgb, #9ca6b4 42%, transparent));
|
|
box-shadow: 0 12px 24px color-mix(in srgb, #030407 28%, transparent);
|
|
}
|
|
|
|
[data-color-theme="glass-silver"][data-theme="light"] .btn {
|
|
background: color-mix(in srgb, #ffffff 52%, transparent);
|
|
border-color: color-mix(in srgb, #5d6673 28%, transparent);
|
|
}
|
|
|
|
[data-color-theme="glass-silver"] .modal-overlay {
|
|
background: transparent;
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
}
|
|
|
|
/* HORIZON - Warm sunset-inspired palette */
|
|
[data-color-theme="horizon"] {
|
|
--bg: #1c1e26;
|
|
--surface: #16161c;
|
|
--card: #1c1e26;
|
|
--card-hover: #252731;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #3b3d4f;
|
|
--text: #faf0ef;
|
|
--text-muted: #c9cbd1;
|
|
--text-dim: #8a8ca1;
|
|
|
|
--todo: #e59371;
|
|
--in-progress: #f08c42;
|
|
--in-progress-rgb: 240, 140, 66;
|
|
--in-review: #29d398;
|
|
--triage: #ee64ac;
|
|
--done: #7a7d91;
|
|
--color-success: #29d398;
|
|
--color-error: #e8646a;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #e8646a;
|
|
--cta-border: #f08c42;
|
|
--cta-text: #1c1e26;
|
|
--cta-bg-hover: #f08c42;
|
|
--cta-border-hover: #f8c967;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, #e96370 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #f8c967;
|
|
--accent: #e59371;
|
|
--accent-text: #1c1e26;
|
|
}
|
|
|
|
[data-color-theme="horizon"][data-theme="light"] {
|
|
--bg: #fdf0ed;
|
|
--surface: #f9cec0;
|
|
--card: #fceee7;
|
|
--card-hover: #f5e2d8;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #e8c8b8;
|
|
--text: #3a2a26;
|
|
--text-muted: #6a5a52;
|
|
--text-dim: #9a8a82;
|
|
|
|
--todo: #e8646a;
|
|
--in-progress: #f08c42;
|
|
--in-progress-rgb: 240, 140, 66;
|
|
--in-review: #29a87c;
|
|
--triage: #e8646a;
|
|
--done: #8a7d78;
|
|
--color-success: #29a87c;
|
|
--color-error: #d84050;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #e8646a;
|
|
--cta-border: #f08c42;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #f08c42;
|
|
--cta-border-hover: #f8c967;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #d88030;
|
|
--accent: #e8646a;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* VITEsse - Warm natural tones with teal accents */
|
|
[data-color-theme="vitesse"] {
|
|
--bg: #121817;
|
|
--surface: #0d1210;
|
|
--card: #1b2321;
|
|
--card-hover: #232e2a;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #2a3832;
|
|
--text: #d9d4cc;
|
|
--text-muted: #8a857a;
|
|
--text-dim: #5a5850;
|
|
|
|
--todo: #4c9a91;
|
|
--in-progress: #dca561;
|
|
--in-progress-rgb: 220, 165, 97;
|
|
--in-review: #7cb586;
|
|
--triage: #c0692d;
|
|
--done: #5a5850;
|
|
--color-success: #7cb586;
|
|
--color-error: #cb4b16;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #4c9a91;
|
|
--cta-border: #7cb586;
|
|
--cta-text: #0d1210;
|
|
--cta-bg-hover: #7cb586;
|
|
--cta-border-hover: #9cd4a6;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #dca561;
|
|
--accent: #4c9a91;
|
|
--accent-text: #0d1210;
|
|
}
|
|
|
|
[data-color-theme="vitesse"][data-theme="light"] {
|
|
--bg: #f8f5f0;
|
|
--surface: #efe9e0;
|
|
--card: #faf7f2;
|
|
--card-hover: #f0ebe2;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d9d0c0;
|
|
--text: #2a2820;
|
|
--text-muted: #6a6860;
|
|
--text-dim: #9a9890;
|
|
|
|
--todo: #3a8578;
|
|
--in-progress: #c08040;
|
|
--in-progress-rgb: 192, 128, 64;
|
|
--in-review: #5a9a68;
|
|
--triage: #b06028;
|
|
--done: #8a8880;
|
|
--color-success: #5a9a68;
|
|
--color-error: #b04820;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #3a8578;
|
|
--cta-border: #5a9a68;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #5a9a68;
|
|
--cta-border-hover: #7aba88;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #c08040;
|
|
--accent: #3a8578;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* OUTRUN - Retrowave/synthwave aesthetic */
|
|
[data-color-theme="outrun"] {
|
|
--bg: #0a0a14;
|
|
--surface: #0d0d1a;
|
|
--card: #14142b;
|
|
--card-hover: #1e1e3f;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #2a2a5a;
|
|
--text: #f0e8ff;
|
|
--text-muted: #a090c8;
|
|
--text-dim: #6a60a0;
|
|
|
|
--todo: #ff2d95;
|
|
--in-progress: #b537f2;
|
|
--in-progress-rgb: 181, 55, 242;
|
|
--in-review: #00e5ff;
|
|
--triage: #ffab00;
|
|
--done: #6a60a0;
|
|
--color-success: #00e5ff;
|
|
--color-error: #ff2d95;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--accent) 40%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #b537f2;
|
|
--cta-border: #ff2d95;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #ff2d95;
|
|
--cta-border-hover: #ff6bbf;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #00e5ff;
|
|
--accent: #b537f2;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="outrun"][data-theme="light"] {
|
|
--bg: #f0f0f5;
|
|
--surface: #e8e8ef;
|
|
--card: #f5f5fa;
|
|
--card-hover: #ececf0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #c8c8d8;
|
|
--text: #2a2a40;
|
|
--text-muted: #606080;
|
|
--text-dim: #9090a8;
|
|
|
|
--todo: #d02080;
|
|
--in-progress: #9030c8;
|
|
--in-progress-rgb: 144, 48, 200;
|
|
--in-review: #00a8b8;
|
|
--triage: #c08000;
|
|
--done: #8080a0;
|
|
--color-success: #00a8b8;
|
|
--color-error: #d02080;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--accent) 15%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #9030c8;
|
|
--cta-border: #d02080;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #d02080;
|
|
--cta-border-hover: #e04090;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #00a8b8;
|
|
--accent: #9030c8;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* SNazzy - Bright playful colors */
|
|
[data-color-theme="snazzy"] {
|
|
--bg: #282a36;
|
|
--surface: #1e1f29;
|
|
--card: #343746;
|
|
--card-hover: #404455;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #44475a;
|
|
--text: #f8f8f2;
|
|
--text-muted: #a8a8b8;
|
|
--text-dim: #707080;
|
|
|
|
--todo: #ff5c57;
|
|
--in-progress: #5af78e;
|
|
--in-progress-rgb: 90, 247, 142;
|
|
--in-review: #f3f99d;
|
|
--triage: #ff6f91;
|
|
--done: #707080;
|
|
--color-success: #5af78e;
|
|
--color-error: #ff5c57;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #50fa7b;
|
|
--cta-border: #5af78e;
|
|
--cta-text: #282a36;
|
|
--cta-bg-hover: #5af78e;
|
|
--cta-border-hover: #8afaaa;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #f3f99d;
|
|
--accent: #ff6f91;
|
|
--accent-text: #282a36;
|
|
}
|
|
|
|
[data-color-theme="snazzy"][data-theme="light"] {
|
|
--bg: #fafafa;
|
|
--surface: #f0f0f2;
|
|
--card: #ffffff;
|
|
--card-hover: #f5f5f8;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #dcdce0;
|
|
--text: #2a2a32;
|
|
--text-muted: #606070;
|
|
--text-dim: #909098;
|
|
|
|
--todo: #d04040;
|
|
--in-progress: #30a050;
|
|
--in-progress-rgb: 48, 160, 80;
|
|
--in-review: #a0a030;
|
|
--triage: #d06070;
|
|
--done: #808088;
|
|
--color-success: #30a050;
|
|
--color-error: #d04040;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #28a048;
|
|
--cta-border: #30a050;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #30a050;
|
|
--cta-border-hover: #50c070;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #a0a030;
|
|
--accent: #d06070;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* PORPLE - Rich purple with gold accents */
|
|
[data-color-theme="porple"] {
|
|
--bg: #292d3e;
|
|
--surface: #1e2030;
|
|
--card: #333751;
|
|
--card-hover: #3e4265;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #4a4e6a;
|
|
--text: #d0d4e8;
|
|
--text-muted: #9094b0;
|
|
--text-dim: #7074880;
|
|
|
|
--todo: #c792ea;
|
|
--in-progress: #82aaff;
|
|
--in-progress-rgb: 130, 170, 255;
|
|
--in-review: #c3e88d;
|
|
--triage: #f78c6c;
|
|
--done: #707488;
|
|
--color-success: #c3e88d;
|
|
--color-error: #f07178;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 40%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #9a7ee8;
|
|
--cta-border: #c792ea;
|
|
--cta-text: #1e2030;
|
|
--cta-bg-hover: #c792ea;
|
|
--cta-border-hover: #d8b0ff;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #ffcb6b;
|
|
--accent: #c792ea;
|
|
--accent-text: #1e2030;
|
|
}
|
|
|
|
[data-color-theme="porple"][data-theme="light"] {
|
|
--bg: #f5f3f7;
|
|
--surface: #eae7ef;
|
|
--card: #ffffff;
|
|
--card-hover: #f0eef5;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #c8c4d0;
|
|
--text: #2a2840;
|
|
--text-muted: #606080;
|
|
--text-dim: #9090a8;
|
|
|
|
--todo: #9060d8;
|
|
--in-progress: #4080c8;
|
|
--in-progress-rgb: 64, 128, 200;
|
|
--in-review: #60a050;
|
|
--triage: #d07050;
|
|
--done: #8080a0;
|
|
--color-success: #60a050;
|
|
--color-error: #c04050;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #8058c8;
|
|
--cta-border: #9060d8;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #9060d8;
|
|
--cta-border-hover: #a080e8;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #d0a030;
|
|
--accent: #9060d8;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* ESPRESSO - Deep coffee browns */
|
|
[data-color-theme="espresso"] {
|
|
--bg: #2c1f1a;
|
|
--surface: #231813;
|
|
--card: #3d2b22;
|
|
--card-hover: #4a352c;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #5a453a;
|
|
--text: #e8ddd5;
|
|
--text-muted: #a09080;
|
|
--text-dim: #706050;
|
|
|
|
--todo: #d4a574;
|
|
--in-progress: #c17d56;
|
|
--in-progress-rgb: 193, 125, 86;
|
|
--in-review: #8f6552;
|
|
--triage: #d47a6a;
|
|
--done: #706050;
|
|
--color-success: #8f6552;
|
|
--color-error: #d47a6a;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #c17d56;
|
|
--cta-border: #d4a574;
|
|
--cta-text: #231813;
|
|
--cta-bg-hover: #d4a574;
|
|
--cta-border-hover: #e4b884;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #8f6552;
|
|
--accent: #d4a574;
|
|
--accent-text: #231813;
|
|
}
|
|
|
|
[data-color-theme="espresso"][data-theme="light"] {
|
|
--bg: #f5ece4;
|
|
--surface: #ebe1d6;
|
|
--card: #fff8f0;
|
|
--card-hover: #f0e8e0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d0c0b0;
|
|
--text: #2a2018;
|
|
--text-muted: #6a5a4a;
|
|
--text-dim: #9a8a78;
|
|
|
|
--todo: #a07050;
|
|
--in-progress: #906040;
|
|
--in-progress-rgb: 144, 96, 64;
|
|
--in-review: #706050;
|
|
--triage: #b06050;
|
|
--done: #8a7a68;
|
|
--color-success: #706050;
|
|
--color-error: #b06050;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #906040;
|
|
--cta-border: #a07050;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #a07050;
|
|
--cta-border-hover: #b08060;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #806040;
|
|
--accent: #a07050;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* MARS - Red planet inspired */
|
|
[data-color-theme="mars"] {
|
|
--bg: #1a1210;
|
|
--surface: #140e0c;
|
|
--card: #2a1e18;
|
|
--card-hover: #352820;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #4a3828;
|
|
--text: #e8ddd0;
|
|
--text-muted: #a09080;
|
|
--text-dim: #706050;
|
|
|
|
--todo: #c1440e;
|
|
--in-progress: #e77d3d;
|
|
--in-progress-rgb: 231, 125, 61;
|
|
--in-review: #d4874d;
|
|
--triage: #c44030;
|
|
--done: #706050;
|
|
--color-success: #d4874d;
|
|
--color-error: #c44030;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 50%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #c1440e;
|
|
--cta-border: #e77d3d;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #e77d3d;
|
|
--cta-border-hover: #f7a060;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #d4874d;
|
|
--accent: #c1440e;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="mars"][data-theme="light"] {
|
|
--bg: #f5ece6;
|
|
--surface: #ebe0d4;
|
|
--card: #fff5ee;
|
|
--card-hover: #f0e8e0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d0c0b0;
|
|
--text: #2a2018;
|
|
--text-muted: #6a5a4a;
|
|
--text-dim: #9a8a78;
|
|
|
|
--todo: #a03010;
|
|
--in-progress: #c06030;
|
|
--in-progress-rgb: 192, 96, 48;
|
|
--in-review: #b07040;
|
|
--triage: #a03020;
|
|
--done: #8a7a68;
|
|
--color-success: #b07040;
|
|
--color-error: #a03020;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #a03010;
|
|
--cta-border: #c06030;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #c06030;
|
|
--cta-border-hover: #d08050;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-bg) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #b07040;
|
|
--accent: #a03010;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* POIMANDRES - Pastel blue/purple with teal accents */
|
|
[data-color-theme="poimandres"] {
|
|
--bg: #1a1b26;
|
|
--surface: #14151f;
|
|
--card: #252736;
|
|
--card-hover: #303245;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #3d3e50;
|
|
--text: #d4d7e5;
|
|
--text-muted: #8b8fa8;
|
|
--text-dim: #5d5f78;
|
|
|
|
--todo: #89ddff;
|
|
--in-progress: #5de4c7;
|
|
--in-progress-rgb: 93, 228, 199;
|
|
--in-review: #b4bcff;
|
|
--triage: #f0c674;
|
|
--done: #5d5f78;
|
|
--color-success: #5de4c7;
|
|
--color-error: #d0679d;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, #000000 40%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #5de4c7;
|
|
--cta-border: #89ddff;
|
|
--cta-text: #14151f;
|
|
--cta-bg-hover: #89ddff;
|
|
--cta-border-hover: #aae8ff;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #b4bcff;
|
|
--accent: #89ddff;
|
|
--accent-text: #14151f;
|
|
}
|
|
|
|
[data-color-theme="poimandres"][data-theme="light"] {
|
|
--bg: #f0f0f5;
|
|
--surface: #e6e6ee;
|
|
--card: #f5f5fa;
|
|
--card-hover: #ececf0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #c8c8d8;
|
|
--text: #2a2b40;
|
|
--text-muted: #606080;
|
|
--text-dim: #9090a8;
|
|
|
|
--todo: #4090c0;
|
|
--in-progress: #30a090;
|
|
--in-progress-rgb: 48, 160, 144;
|
|
--in-review: #8070c0;
|
|
--triage: #b08030;
|
|
--done: #8080a0;
|
|
--color-success: #30a090;
|
|
--color-error: #c04080;
|
|
--shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 10%, transparent);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
--cta-bg: #30a090;
|
|
--cta-border: #4090c0;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #4090c0;
|
|
--cta-border-hover: #60a8d8;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #8070c0;
|
|
--accent: #4090c0;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* RUST - Deep oxidized red-brown with warm rust accents */
|
|
[data-color-theme="rust"] {
|
|
--bg: #0f0b09;
|
|
--surface: #1a1410;
|
|
--card: #231b14;
|
|
--card-hover: #2e241c;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #4a3528;
|
|
--text: #f0e8e0;
|
|
--text-muted: #a09080;
|
|
--text-dim: #605040;
|
|
|
|
--todo: #e06830;
|
|
--in-progress: #e88040;
|
|
--in-progress-rgb: 232, 128, 64;
|
|
--in-review: #40b8b0;
|
|
--triage: #e05030;
|
|
--done: #a08870;
|
|
--color-success: #40b8b0;
|
|
--color-error: #e04030;
|
|
|
|
--cta-bg: #a04020;
|
|
--cta-border: #c05828;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #c05828;
|
|
--cta-border-hover: #d87038;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #58a8d0;
|
|
--accent: #c75b2a;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="rust"][data-theme="light"] {
|
|
--bg: #f5efe8;
|
|
--surface: #ebe3d8;
|
|
--card: #fdfaf6;
|
|
--card-hover: #f5efe8;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d8d0c0;
|
|
--text: #1a1510;
|
|
--text-muted: #685a48;
|
|
--text-dim: #8a7a66;
|
|
|
|
--todo: #a04020;
|
|
--in-progress: #b85828;
|
|
--in-progress-rgb: 184, 88, 40;
|
|
--in-review: #209090;
|
|
--triage: #c03820;
|
|
--done: #887868;
|
|
--color-success: #209090;
|
|
--color-error: #c03020;
|
|
|
|
--cta-bg: #803818;
|
|
--cta-border: #a04820;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #a04820;
|
|
--cta-border-hover: #b85a28;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #2878a0;
|
|
--accent: #a04520;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* COPPER - Warm metallic copper tones */
|
|
[data-color-theme="copper"] {
|
|
--bg: #0e0c0a;
|
|
--surface: #181410;
|
|
--card: #211c16;
|
|
--card-hover: #2c251c;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #4d3d2e;
|
|
--text: #f0e8e0;
|
|
--text-muted: #a09080;
|
|
--text-dim: #605040;
|
|
|
|
--todo: #e89545;
|
|
--in-progress: #f0a858;
|
|
--in-progress-rgb: 240, 168, 88;
|
|
--in-review: #40c0a8;
|
|
--triage: #e06838;
|
|
--done: #a09078;
|
|
--color-success: #40c0a8;
|
|
--color-error: #e05830;
|
|
|
|
--cta-bg: #b06830;
|
|
--cta-border: #c87840;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #c87840;
|
|
--cta-border-hover: #d88a50;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #60a8d8;
|
|
--accent: #d4854a;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="copper"][data-theme="light"] {
|
|
--bg: #f3ede6;
|
|
--surface: #e8e0d6;
|
|
--card: #fdfaf7;
|
|
--card-hover: #f5efe8;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d8d0c0;
|
|
--text: #1a1512;
|
|
--text-muted: #665a50;
|
|
--text-dim: #8a7a68;
|
|
|
|
--todo: #905820;
|
|
--in-progress: #a87030;
|
|
--in-progress-rgb: 168, 112, 48;
|
|
--in-review: #30a090;
|
|
--triage: #b04820;
|
|
--done: #887868;
|
|
--color-success: #30a090;
|
|
--color-error: #b03020;
|
|
|
|
--cta-bg: #785020;
|
|
--cta-border: #906828;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #906828;
|
|
--cta-border-hover: #a87830;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, #905420 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #306090;
|
|
--accent: #b06830;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* FOUNDRY - Molten metal with orange-yellow glows */
|
|
[data-color-theme="foundry"] {
|
|
--bg: #0c0806;
|
|
--surface: #15100c;
|
|
--card: #1e1610;
|
|
--card-hover: #28201a;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #40301e;
|
|
--text: #f0e8e0;
|
|
--text-muted: #a09080;
|
|
--text-dim: #605040;
|
|
|
|
--todo: #ffab20;
|
|
--in-progress: #ffc040;
|
|
--in-progress-rgb: 255, 192, 64;
|
|
--in-review: #40c0c0;
|
|
--triage: #ff6020;
|
|
--done: #a08060;
|
|
--color-success: #40c0c0;
|
|
--color-error: #ff4020;
|
|
|
|
--cta-bg: #c07808;
|
|
--cta-border: #e08a10;
|
|
--cta-text: #1a1008;
|
|
--cta-bg-hover: #e08a10;
|
|
--cta-border-hover: #f09a18;
|
|
--cta-glow: 0 0 12px color-mix(in srgb, var(--cta-border-hover) 40%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #60b0e0;
|
|
--accent: #f0960a;
|
|
--accent-text: #1a1008;
|
|
}
|
|
|
|
[data-color-theme="foundry"][data-theme="light"] {
|
|
--bg: #f5f0e6;
|
|
--surface: #ebe4d6;
|
|
--card: #fdfaf5;
|
|
--card-hover: #f5f0e8;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d0c4b0;
|
|
--text: #1a1510;
|
|
--text-muted: #685a48;
|
|
--text-dim: #8a7a66;
|
|
|
|
--todo: #c07808;
|
|
--in-progress: #d08a10;
|
|
--in-progress-rgb: 208, 138, 16;
|
|
--in-review: #208080;
|
|
--triage: #a04818;
|
|
--done: #787068;
|
|
--color-success: #208080;
|
|
--color-error: #a03020;
|
|
|
|
--cta-bg: #906008;
|
|
--cta-border: #b07810;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #b07810;
|
|
--cta-border-hover: #c08818;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, #c07810 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #3070a0;
|
|
--accent: #c07808;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* CARBON - Graphite-like carbon fiber aesthetic */
|
|
[data-color-theme="carbon"] {
|
|
--bg: #0a0b0d;
|
|
--surface: #111318;
|
|
--card: #181b22;
|
|
--card-hover: #222630;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #2a3040;
|
|
--text: #e8ecf0;
|
|
--text-muted: #8090a0;
|
|
--text-dim: #505860;
|
|
|
|
--todo: #6a9acf;
|
|
--in-progress: #7ab0e0;
|
|
--in-progress-rgb: 122, 176, 224;
|
|
--in-review: #80c0c0;
|
|
--triage: #c08080;
|
|
--done: #687080;
|
|
--color-success: #80c0c0;
|
|
--color-error: #c06060;
|
|
|
|
--cta-bg: #406080;
|
|
--cta-border: #5a7898;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #5a7898;
|
|
--cta-border-hover: #6a8aac;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, #5a7aa0 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #6090c0;
|
|
--accent: #5a8abf;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="carbon"][data-theme="light"] {
|
|
--bg: #eef0f4;
|
|
--surface: #e2e6ec;
|
|
--card: #f5f7fa;
|
|
--card-hover: #eef2f6;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #c0c8d0;
|
|
--text: #1a2028;
|
|
--text-muted: #586070;
|
|
--text-dim: #78808a;
|
|
|
|
--todo: #3a6090;
|
|
--in-progress: #4878a0;
|
|
--in-progress-rgb: 72, 120, 160;
|
|
--in-review: #4090a0;
|
|
--triage: #a05050;
|
|
--done: #687080;
|
|
--color-success: #4090a0;
|
|
--color-error: #a03030;
|
|
|
|
--cta-bg: #305878;
|
|
--cta-border: #4070a0;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #4070a0;
|
|
--cta-border-hover: #5080b0;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #306090;
|
|
--accent: #3a6a9f;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* SANDSTONE - Warm desert sandstone */
|
|
[data-color-theme="sandstone"] {
|
|
--bg: #1a1712;
|
|
--surface: #241f18;
|
|
--card: #2e2820;
|
|
--card-hover: #38322a;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #4a4035;
|
|
--text: #f0e8dc;
|
|
--text-muted: #a09080;
|
|
--text-dim: #706858;
|
|
|
|
--todo: #d4a06a;
|
|
--in-progress: #e0b080;
|
|
--in-progress-rgb: 224, 176, 128;
|
|
--in-review: #c09060;
|
|
--triage: #b08070;
|
|
--done: #a09080;
|
|
--color-success: #80a070;
|
|
--color-error: #b06060;
|
|
|
|
--cta-bg: #a07840;
|
|
--cta-border: #c09060;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #b08850;
|
|
--cta-border-hover: #d0a070;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #90a8c0;
|
|
--accent: #c4905a;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="sandstone"][data-theme="light"] {
|
|
--bg: #f5f0e8;
|
|
--surface: #ebe4d8;
|
|
--card: #faf6ee;
|
|
--card-hover: #f0e8e0;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d0c8b8;
|
|
--text: #2a2418;
|
|
--text-muted: #605848;
|
|
--text-dim: #888070;
|
|
|
|
--todo: #a07040;
|
|
--in-progress: #b08050;
|
|
--in-progress-rgb: 176, 128, 80;
|
|
--in-review: #907060;
|
|
--triage: #c09080;
|
|
--done: #807060;
|
|
--color-success: #607840;
|
|
--color-error: #a04040;
|
|
|
|
--cta-bg: #8a6830;
|
|
--cta-border: #a08050;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #9a7840;
|
|
--cta-border-hover: #b09060;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #5888a8;
|
|
--accent: #a07040;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* LAGOON - Deep tropical lagoon */
|
|
[data-color-theme="lagoon"] {
|
|
--bg: #0a1214;
|
|
--surface: #101c1f;
|
|
--card: #162628;
|
|
--card-hover: #1c3034;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #2a4045;
|
|
--text: #e0f0f0;
|
|
--text-muted: #80a0a8;
|
|
--text-dim: #507880;
|
|
|
|
--todo: #50d8c0;
|
|
--in-progress: #60e8d0;
|
|
--in-progress-rgb: 96, 232, 208;
|
|
--in-review: #48c0b0;
|
|
--triage: #c08080;
|
|
--done: #70a8a0;
|
|
--color-success: #50c8b0;
|
|
--color-error: #b05060;
|
|
|
|
--cta-bg: #308880;
|
|
--cta-border: #40a8a0;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #409898;
|
|
--cta-border-hover: #50b8b0;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #50a8c0;
|
|
--accent: #40c8b0;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="lagoon"][data-theme="light"] {
|
|
--bg: #eef5f3;
|
|
--surface: #e0ebe8;
|
|
--card: #f0f8f5;
|
|
--card-hover: #e4f0ec;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #b0c8c0;
|
|
--text: #102420;
|
|
--text-muted: #486058;
|
|
--text-dim: #688078;
|
|
|
|
--todo: #208070;
|
|
--in-progress: #289080;
|
|
--in-progress-rgb: 40, 144, 128;
|
|
--in-review: #308078;
|
|
--triage: #a06060;
|
|
--done: #587878;
|
|
--color-success: #308070;
|
|
--color-error: #983030;
|
|
|
|
--cta-bg: #287060;
|
|
--cta-border: #389080;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #308070;
|
|
--cta-border-hover: #40a090;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #2880a0;
|
|
--accent: #2a9080;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* FROST - Cool icy blue-white */
|
|
[data-color-theme="frost"] {
|
|
--bg: #0c0e14;
|
|
--surface: #121520;
|
|
--card: #1a1e2c;
|
|
--card-hover: #222638;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #2a3048;
|
|
--text: #e8f0f8;
|
|
--text-muted: #8098b0;
|
|
--text-dim: #506878;
|
|
|
|
--todo: #8ac8f8;
|
|
--in-progress: #9ad8ff;
|
|
--in-progress-rgb: 154, 216, 255;
|
|
--in-review: #78b8e8;
|
|
--triage: #c08080;
|
|
--done: #6878a0;
|
|
--color-success: #70b8d0;
|
|
--color-error: #b06070;
|
|
|
|
--cta-bg: #4070a8;
|
|
--cta-border: #5888c0;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #5080b8;
|
|
--cta-border-hover: #6898d0;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #60a0c8;
|
|
--accent: #7ab8e8;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="frost"][data-theme="light"] {
|
|
--bg: #f0f4f8;
|
|
--surface: #e4eaf0;
|
|
--card: #f8fafc;
|
|
--card-hover: #ecf2f8;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #b0c0d0;
|
|
--text: #101828;
|
|
--text-muted: #485868;
|
|
--text-dim: #687888;
|
|
|
|
--todo: #3078a8;
|
|
--in-progress: #4088b8;
|
|
--in-progress-rgb: 64, 136, 184;
|
|
--in-review: #407898;
|
|
--triage: #a06060;
|
|
--done: #586878;
|
|
--color-success: #3088a0;
|
|
--color-error: #982830;
|
|
|
|
--cta-bg: #2870a0;
|
|
--cta-border: #3888b8;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #3080b0;
|
|
--cta-border-hover: #4898c8;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #2080a8;
|
|
--accent: #4a90c0;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* LAVENDER - Soft purple-lavender tones */
|
|
[data-color-theme="lavender"] {
|
|
--bg: #14101a;
|
|
--surface: #1c1624;
|
|
--card: #241e30;
|
|
--card-hover: #2c2838;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #3a3050;
|
|
--text: #f0e8f8;
|
|
--text-muted: #a090b8;
|
|
--text-dim: #706880;
|
|
|
|
--todo: #c8a0e8;
|
|
--in-progress: #d8b0f0;
|
|
--in-progress-rgb: 216, 176, 240;
|
|
--in-review: #b890d8;
|
|
--triage: #c080a0;
|
|
--done: #9880a8;
|
|
--color-success: #a090c0;
|
|
--color-error: #b06878;
|
|
|
|
--cta-bg: #8060a0;
|
|
--cta-border: #9878b8;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #9070b0;
|
|
--cta-border-hover: #a888c8;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #9090c0;
|
|
--accent: #b890d8;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="lavender"][data-theme="light"] {
|
|
--bg: #f4f0f8;
|
|
--surface: #e8e2f0;
|
|
--card: #faf8fc;
|
|
--card-hover: #f2eef8;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #c8c0d8;
|
|
--text: #18101c;
|
|
--text-muted: #504858;
|
|
--text-dim: #706878;
|
|
|
|
--todo: #8060a0;
|
|
--in-progress: #9070b0;
|
|
--in-progress-rgb: 144, 112, 176;
|
|
--in-review: #7870a0;
|
|
--triage: #a08090;
|
|
--done: #786878;
|
|
--color-success: #607898;
|
|
--color-error: #983048;
|
|
|
|
--cta-bg: #685090;
|
|
--cta-border: #8068a8;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #7860a0;
|
|
--cta-border-hover: #9078b8;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #6868a0;
|
|
--accent: #8060a8;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* NEON-BLOOM - Vibrant neon pastels */
|
|
[data-color-theme="neon-bloom"] {
|
|
--bg: #120a18;
|
|
--surface: #1a1024;
|
|
--card: #241630;
|
|
--card-hover: #2c1e3c;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #3a2850;
|
|
--text: #f8e8f8;
|
|
--text-muted: #b090b8;
|
|
--text-dim: #806880;
|
|
|
|
--todo: #f080d0;
|
|
--in-progress: #ff90e0;
|
|
--in-progress-rgb: 255, 144, 224;
|
|
--in-review: #e870c0;
|
|
--triage: #c0a0a8;
|
|
--done: #b090c0;
|
|
--color-success: #c0d0a0;
|
|
--color-error: #c06878;
|
|
|
|
--cta-bg: #a04898;
|
|
--cta-border: #c060b8;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #b058a8;
|
|
--cta-border-hover: #d070c8;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #b090d0;
|
|
--accent: #e870c0;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="neon-bloom"][data-theme="light"] {
|
|
--bg: #f8f0f8;
|
|
--surface: #f0e4f0;
|
|
--card: #fcf8fc;
|
|
--card-hover: #f8f0f8;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d8d0e0;
|
|
--text: #18081c;
|
|
--text-muted: #584868;
|
|
--text-dim: #786888;
|
|
|
|
--todo: #a03090;
|
|
--in-progress: #b040a0;
|
|
--in-progress-rgb: 176, 64, 160;
|
|
--in-review: #9838a0;
|
|
--triage: #a08090;
|
|
--done: #786878;
|
|
--color-success: #587898;
|
|
--color-error: #982848;
|
|
|
|
--cta-bg: #8030a0;
|
|
--cta-border: #9848b8;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #9040b0;
|
|
--cta-border-hover: #a858c8;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #7878c0;
|
|
--accent: #c040a0;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
/* SEPIA - Warm vintage sepia photography aesthetic */
|
|
[data-color-theme="sepia"] {
|
|
--bg: #161210;
|
|
--surface: #201a16;
|
|
--card: #2a2420;
|
|
--card-hover: #342e28;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
|
--border: #4a4038;
|
|
--text: #f0e8d8;
|
|
--text-muted: #a09078;
|
|
--text-dim: #706858;
|
|
|
|
--todo: #d8b878;
|
|
--in-progress: #e8c888;
|
|
--in-progress-rgb: 232, 200, 136;
|
|
--in-review: #c8a868;
|
|
--triage: #b8a088;
|
|
--done: #908070;
|
|
--color-success: #a0b080;
|
|
--color-error: #b87068;
|
|
|
|
--cta-bg: #907850;
|
|
--cta-border: #a89068;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #a08858;
|
|
--cta-border-hover: #b8a078;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #a8a0b0;
|
|
--accent: #c8a868;
|
|
--accent-text: #fff;
|
|
}
|
|
|
|
[data-color-theme="sepia"][data-theme="light"] {
|
|
--bg: #f5f0e4;
|
|
--surface: #ece4d4;
|
|
--card: #faf8f0;
|
|
--card-hover: #f4eedc;
|
|
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
|
--border: #d0c8b8;
|
|
--text: #201810;
|
|
--text-muted: #584838;
|
|
--text-dim: #786858;
|
|
|
|
--todo: #907040;
|
|
--in-progress: #a08050;
|
|
--in-progress-rgb: 160, 128, 80;
|
|
--in-review: #886838;
|
|
--triage: #a08878;
|
|
--done: #786858;
|
|
--color-success: #607038;
|
|
--color-error: #983020;
|
|
|
|
--cta-bg: #786030;
|
|
--cta-border: #907840;
|
|
--cta-text: #fff;
|
|
--cta-bg-hover: #887038;
|
|
--cta-border-hover: #a08848;
|
|
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
|
--logo-accent: var(--todo);
|
|
--color-info: #888098;
|
|
--accent: #9a8050;
|
|
--accent-text: #fff;
|
|
}
|