From 958230f2ef400a4c2d5f2693655023ef50361be0 Mon Sep 17 00:00:00 2001 From: zenchantlive Date: Thu, 26 Feb 2026 16:40:09 -0800 Subject: [PATCH] feat(theme): complete theme overhaul with 6 polished themes - Aurora: Real northern lights colors (teal/violet on deep blue-black) - Midnight: Deep ocean blues with violet and cyan - Forest: Rich forest greens with golden sunlight - Dusk: Warm sunset oranges and corals - Contrast: Pure black with neon accents - Light: Clean professional light mode (NEW) All themes have: - Consistent status colors (green/amber/red) - Distinct surface layers for visual hierarchy - Theme-appropriate accent glows - Improved contrast and accessibility --- src/components/shared/theme-toggle.tsx | 11 +-- src/styles/themes/aurora.css | 114 ++++++++++++------------- src/styles/themes/contrast.css | 82 +++++++++--------- src/styles/themes/dusk.css | 90 +++++++++---------- src/styles/themes/forest.css | 101 +++++++++++----------- src/styles/themes/index.css | 1 + src/styles/themes/light.css | 111 ++++++++++++++++++++++++ src/styles/themes/midnight.css | 108 +++++++++++------------ 8 files changed, 365 insertions(+), 253 deletions(-) create mode 100644 src/styles/themes/light.css diff --git a/src/components/shared/theme-toggle.tsx b/src/components/shared/theme-toggle.tsx index 5787b1c..458e40a 100644 --- a/src/components/shared/theme-toggle.tsx +++ b/src/components/shared/theme-toggle.tsx @@ -5,11 +5,12 @@ import { Palette, Check } from 'lucide-react'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; const themes = [ - { id: 'aurora', name: 'Aurora', desc: 'Warm charcoal + cyan' }, - { id: 'midnight', name: 'Midnight', desc: 'Cool blue-purple' }, - { id: 'forest', name: 'Forest', desc: 'Earthy green-brown' }, - { id: 'dusk', name: 'Dusk', desc: 'Sunset orange-pink' }, - { id: 'contrast', name: 'Contrast', desc: 'High contrast' }, + { id: 'aurora', name: 'Aurora', desc: 'Northern lights (teal & violet)' }, + { id: 'midnight', name: 'Midnight', desc: 'Deep blue-purple' }, + { id: 'forest', name: 'Forest', desc: 'Mossy green & amber' }, + { id: 'dusk', name: 'Dusk', desc: 'Sunset orange & coral' }, + { id: 'contrast', name: 'Contrast', desc: 'Pure black/white' }, + { id: 'light', name: 'Light', desc: 'Clean & professional' }, ] as const; export function ThemeToggle() { diff --git a/src/styles/themes/aurora.css b/src/styles/themes/aurora.css index a30fd0c..9274138 100644 --- a/src/styles/themes/aurora.css +++ b/src/styles/themes/aurora.css @@ -1,78 +1,78 @@ /** - * Aurora Theme - Warm Charcoal with Cyan Accents + * Aurora Theme - Northern Lights * - * A dark theme with warm brown-grey charcoal backgrounds - * and bright cyan/teal accent colors for the "aurora" glow effect. - * Fixed: Better contrast, warmer tones, more distinct layers + * Inspired by the actual aurora borealis: + * Deep night sky with flowing ribbons of teal, green, and violet */ [data-theme="aurora"] { /* ========================================================================== - 1. SURFACE LAYERS - Warm Charcoal Scale (MORE DISTINCT) + 1. SURFACE LAYERS - Night Sky with subtle aurora tint ========================================================================== */ - --surface-backdrop: #0f0e0d; /* Page background - very dark */ - --surface-elevated: #1a1816; /* Header - lighter than backdrop */ - --surface-primary: #252320; /* Sidebar - lighter still */ - --surface-secondary: #302e2a; /* Main content - distinct from sidebar */ - --surface-tertiary: #3c3934; /* Panels - clearly lighter */ - --surface-quaternary: #48453f; /* Cards - lightest surface */ - --surface-overlay: #0a0908; /* Modals - darkest */ - --surface-input: #1f1d1a; /* Form fields */ - --surface-hover: rgba(240, 238, 234, 0.06); - --surface-active: rgba(53, 201, 255, 0.12); - --surface-tooltip: #1e1d1b; + --surface-backdrop: #0a0f14; + --surface-elevated: #0d1218; + --surface-primary: #111820; + --surface-secondary: #162028; + --surface-tertiary: #1c2a35; + --surface-quaternary: #233543; + --surface-overlay: #070a0e; + --surface-input: #131d26; + --surface-hover: rgba(100, 255, 218, 0.06); + --surface-active: rgba(139, 92, 246, 0.12); + --surface-tooltip: #111820; /* ========================================================================== - 2. BORDERS - More Visible + 2. BORDERS - Soft aurora glow ========================================================================== */ - --border-subtle: rgba(200, 195, 185, 0.18); - --border-default: rgba(200, 195, 185, 0.35); - --border-strong: rgba(200, 195, 185, 0.55); - --border-accent: rgba(53, 201, 255, 0.55); + --border-subtle: rgba(100, 255, 218, 0.12); + --border-default: rgba(100, 255, 218, 0.22); + --border-strong: rgba(100, 255, 218, 0.38); + --border-accent: rgba(139, 92, 246, 0.55); /* ========================================================================== - 3. TEXT - Warm White Scale + 3. TEXT - Starlight white ========================================================================== */ - --text-primary: #f5f3ef; - --text-secondary: #d4d0c7; - --text-tertiary: #a8a49a; - --text-disabled: #6b6862; - --text-inverse: #0f0e0d; + --text-primary: #e6f7ff; + --text-secondary: #a8c5d9; + --text-tertiary: #6b8fa8; + --text-disabled: #4a6170; + --text-inverse: #0a0f14; /* ========================================================================== 4. ACCENTS - Aurora Colors + Teal (info), Green (success), Gold (warning), Rose (danger), Violet (epic) ========================================================================== */ - --accent-info: #4dd4ff; + --accent-info: #64ffda; --accent-success: #4ade80; --accent-warning: #fbbf24; --accent-danger: #fb7185; /* ========================================================================== - 5. ACCENT GLOWS + 5. ACCENT GLOWS - Soft aurora glow effects ========================================================================== */ - --glow-info: 0 0 20px rgba(77, 212, 255, 0.3); - --glow-success: 0 0 20px rgba(74, 222, 128, 0.3); - --glow-warning: 0 0 20px rgba(251, 191, 36, 0.3); - --glow-danger: 0 0 20px rgba(251, 113, 133, 0.3); + --glow-info: 0 0 24px rgba(100, 255, 218, 0.4); + --glow-success: 0 0 24px rgba(74, 222, 128, 0.35); + --glow-warning: 0 0 24px rgba(251, 191, 36, 0.35); + --glow-danger: 0 0 24px rgba(251, 113, 133, 0.35); /* ========================================================================== 6. GRAPH COLORS ========================================================================== */ - --graph-node-default: rgba(53, 51, 49, 0.95); - --graph-node-epic: rgba(77, 212, 255, 0.15); - --graph-edge-default: rgba(180, 175, 165, 0.3); - --graph-edge-selected: #4dd4ff; + --graph-node-default: rgba(35, 53, 67, 0.95); + --graph-node-epic: rgba(139, 92, 246, 0.2); + --graph-edge-default: rgba(100, 255, 218, 0.25); + --graph-edge-selected: #64ffda; --graph-edge-cycle: #fbbf24; /* ========================================================================== 7. SEMANTIC ALPHAS ========================================================================== */ - --alpha-white-low: rgba(245, 243, 239, 0.06); - --alpha-white-medium: rgba(245, 243, 239, 0.12); - --alpha-white-high: rgba(245, 243, 239, 0.24); - --alpha-black-low: rgba(0, 0, 0, 0.2); - --alpha-black-medium: rgba(0, 0, 0, 0.45); - --alpha-black-high: rgba(0, 0, 0, 0.75); + --alpha-white-low: rgba(230, 247, 255, 0.05); + --alpha-white-medium: rgba(230, 247, 255, 0.11); + --alpha-white-high: rgba(230, 247, 255, 0.22); + --alpha-black-low: rgba(0, 0, 0, 0.25); + --alpha-black-medium: rgba(0, 0, 0, 0.5); + --alpha-black-high: rgba(0, 0, 0, 0.8); /* ========================================================================== 8. STATUS COLORS @@ -80,34 +80,34 @@ --status-ready: rgba(74, 222, 128, 0.18); --status-in-progress: rgba(251, 191, 36, 0.18); --status-blocked: rgba(251, 113, 133, 0.18); - --status-closed: rgba(168, 164, 154, 0.12); - --status-deferred: rgba(168, 164, 154, 0.08); + --status-closed: rgba(107, 143, 168, 0.12); + --status-deferred: rgba(107, 143, 168, 0.08); /* ========================================================================== 9. SHADOWS ========================================================================== */ - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); - --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); - --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45); + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); /* ========================================================================== 10. AGENT ROLE COLORS ========================================================================== */ - --agent-role-ui: #7bb3f0; - --agent-role-graph: #8fd18f; - --agent-role-orchestrator: #c4a5e6; - --agent-role-researcher: #e6b88a; + --agent-role-ui: #7dd3fc; + --agent-role-graph: #86efac; + --agent-role-orchestrator: #d8b4fe; + --agent-role-researcher: #fdba74; /* ========================================================================== 11. SCROLLBARS ========================================================================== */ - --scrollbar-track: rgba(245, 243, 239, 0.03); - --scrollbar-thumb: rgba(180, 175, 165, 0.22); - --scrollbar-thumb-hover: rgba(180, 175, 165, 0.38); + --scrollbar-track: rgba(230, 247, 255, 0.03); + --scrollbar-thumb: rgba(100, 255, 218, 0.2); + --scrollbar-thumb-hover: rgba(100, 255, 218, 0.35); /* ========================================================================== 12. CODE/SYNTAX ========================================================================== */ - --code-background: #1a1917; - --code-text: #d4d0c7; + --code-background: #131d26; + --code-text: #a8c5d9; } diff --git a/src/styles/themes/contrast.css b/src/styles/themes/contrast.css index e69faa4..8288665 100644 --- a/src/styles/themes/contrast.css +++ b/src/styles/themes/contrast.css @@ -1,74 +1,74 @@ /** - * High Contrast Theme - Maximum Visibility + * Contrast Theme - Maximum Accessibility * - * Pure black background with bright white text and vivid accent colors. - * Designed for maximum readability and accessibility. + * Pure black background with high-contrast white text + * and neon accents for maximum visibility */ [data-theme="contrast"] { /* ========================================================================== - 1. SURFACE LAYERS - Pure Black & Dark Greys + 1. SURFACE LAYERS - Pure black scale ========================================================================== */ --surface-backdrop: #000000; --surface-elevated: #0a0a0a; --surface-primary: #141414; --surface-secondary: #1a1a1a; --surface-tertiary: #242424; - --surface-quaternary: #2e2e2e; - --surface-overlay: #050505; - --surface-input: #111111; - --surface-hover: rgba(255, 255, 255, 0.1); - --surface-active: rgba(255, 255, 255, 0.15); + --surface-quaternary: #333333; + --surface-overlay: #000000; + --surface-input: #0f0f0f; + --surface-hover: rgba(255, 255, 255, 0.12); + --surface-active: rgba(255, 255, 255, 0.18); --surface-tooltip: #1a1a1a; /* ========================================================================== - 2. BORDERS - White (High Contrast) + 2. BORDERS - High visibility white ========================================================================== */ - --border-subtle: rgba(255, 255, 255, 0.2); - --border-default: rgba(255, 255, 255, 0.35); - --border-strong: rgba(255, 255, 255, 0.55); - --border-accent: rgba(255, 255, 255, 0.7); + --border-subtle: rgba(255, 255, 255, 0.25); + --border-default: rgba(255, 255, 255, 0.45); + --border-strong: rgba(255, 255, 255, 0.7); + --border-accent: rgba(255, 255, 255, 0.85); /* ========================================================================== - 3. TEXT - Pure White + 3. TEXT - Pure white ========================================================================== */ --text-primary: #ffffff; - --text-secondary: #e0e0e0; - --text-tertiary: #a0a0a0; - --text-disabled: #606060; + --text-secondary: #e6e6e6; + --text-tertiary: #b3b3b3; + --text-disabled: #666666; --text-inverse: #000000; /* ========================================================================== - 4. ACCENTS - Bright & Vivid + 4. ACCENTS - Neon bright ========================================================================== */ --accent-info: #00ffff; --accent-success: #00ff66; - --accent-warning: #ffcc00; + --accent-warning: #ffff00; --accent-danger: #ff3366; /* ========================================================================== - 5. ACCENT GLOWS + 5. ACCENT GLOWS - Intense neon ========================================================================== */ - --glow-info: 0 0 24px rgba(0, 255, 255, 0.5); - --glow-success: 0 0 24px rgba(0, 255, 102, 0.5); - --glow-warning: 0 0 24px rgba(255, 204, 0, 0.5); - --glow-danger: 0 0 24px rgba(255, 51, 102, 0.5); + --glow-info: 0 0 30px rgba(0, 255, 255, 0.6); + --glow-success: 0 0 30px rgba(0, 255, 102, 0.55); + --glow-warning: 0 0 30px rgba(255, 255, 0, 0.55); + --glow-danger: 0 0 30px rgba(255, 51, 102, 0.55); /* ========================================================================== 6. GRAPH COLORS ========================================================================== */ - --graph-node-default: rgba(46, 46, 46, 0.98); - --graph-node-epic: rgba(0, 255, 255, 0.2); - --graph-edge-default: rgba(255, 255, 255, 0.35); + --graph-node-default: rgba(51, 51, 51, 0.98); + --graph-node-epic: rgba(0, 255, 255, 0.25); + --graph-edge-default: rgba(255, 255, 255, 0.4); --graph-edge-selected: #00ffff; - --graph-edge-cycle: #ffcc00; + --graph-edge-cycle: #ffff00; /* ========================================================================== 7. SEMANTIC ALPHAS ========================================================================== */ - --alpha-white-low: rgba(255, 255, 255, 0.08); - --alpha-white-medium: rgba(255, 255, 255, 0.16); - --alpha-white-high: rgba(255, 255, 255, 0.3); + --alpha-white-low: rgba(255, 255, 255, 0.1); + --alpha-white-medium: rgba(255, 255, 255, 0.2); + --alpha-white-high: rgba(255, 255, 255, 0.35); --alpha-black-low: rgba(0, 0, 0, 0.3); --alpha-black-medium: rgba(0, 0, 0, 0.5); --alpha-black-high: rgba(0, 0, 0, 0.8); @@ -76,11 +76,11 @@ /* ========================================================================== 8. STATUS COLORS ========================================================================== */ - --status-ready: rgba(0, 255, 102, 0.22); - --status-in-progress: rgba(255, 204, 0, 0.22); - --status-blocked: rgba(255, 51, 102, 0.22); - --status-closed: rgba(160, 160, 160, 0.15); - --status-deferred: rgba(160, 160, 160, 0.1); + --status-ready: rgba(0, 255, 102, 0.25); + --status-in-progress: rgba(255, 255, 0, 0.25); + --status-blocked: rgba(255, 51, 102, 0.25); + --status-closed: rgba(179, 179, 179, 0.15); + --status-deferred: rgba(179, 179, 179, 0.1); /* ========================================================================== 9. SHADOWS @@ -101,12 +101,12 @@ 11. SCROLLBARS ========================================================================== */ --scrollbar-track: rgba(255, 255, 255, 0.05); - --scrollbar-thumb: rgba(255, 255, 255, 0.25); - --scrollbar-thumb-hover: rgba(255, 255, 255, 0.4); + --scrollbar-thumb: rgba(255, 255, 255, 0.3); + --scrollbar-thumb-hover: rgba(255, 255, 255, 0.5); /* ========================================================================== 12. CODE/SYNTAX ========================================================================== */ - --code-background: #111111; - --code-text: #e0e0e0; + --code-background: #0f0f0f; + --code-text: #e6e6e6; } diff --git a/src/styles/themes/dusk.css b/src/styles/themes/dusk.css index 5329388..75f5b92 100644 --- a/src/styles/themes/dusk.css +++ b/src/styles/themes/dusk.css @@ -1,45 +1,45 @@ /** - * Dusk Theme - Sunset Orange & Pink + * Dusk Theme - Golden Hour * - * Warm oranges, coral pinks, and soft purples. - * Inspired by sunset skies and twilight hues. + * Warm sunset oranges, corals, and soft pinks + * Like the sky during a beautiful sunset */ [data-theme="dusk"] { /* ========================================================================== - 1. SURFACE LAYERS - Warm Purple-Brown + 1. SURFACE LAYERS - Sunset gradient base ========================================================================== */ - --surface-backdrop: #1a1518; - --surface-elevated: #110d0f; - --surface-primary: #241e21; - --surface-secondary: #2d262a; - --surface-tertiary: #362e33; - --surface-quaternary: #40363c; - --surface-overlay: #0c090b; - --surface-input: #201a1d; - --surface-hover: rgba(255, 230, 240, 0.06); + --surface-backdrop: #1c1917; + --surface-elevated: #292524; + --surface-primary: #451a03; + --surface-secondary: #312e2c; + --surface-tertiary: #573026; + --surface-quaternary: #78350f; + --surface-overlay: #0c0a09; + --surface-input: #451a03; + --surface-hover: rgba(251, 191, 36, 0.06); --surface-active: rgba(251, 146, 60, 0.12); - --surface-tooltip: #241e21; + --surface-tooltip: #451a03; /* ========================================================================== - 2. BORDERS - Warm Dusty Rose + 2. BORDERS - Warm amber glow ========================================================================== */ - --border-subtle: rgba(180, 160, 165, 0.15); - --border-default: rgba(180, 160, 165, 0.28); - --border-strong: rgba(180, 160, 165, 0.45); - --border-accent: rgba(251, 146, 60, 0.55); + --border-subtle: rgba(251, 191, 36, 0.18); + --border-default: rgba(251, 191, 36, 0.32); + --border-strong: rgba(251, 191, 36, 0.5); + --border-accent: rgba(251, 146, 60, 0.6); /* ========================================================================== - 3. TEXT - Warm Off-White + 3. TEXT - Sunset glow ========================================================================== */ - --text-primary: #faf0f2; - --text-secondary: #e2d0d5; - --text-tertiary: #b8a0a8; - --text-disabled: #786068; - --text-inverse: #110d0f; + --text-primary: #fff7ed; + --text-secondary: #fdba74; + --text-tertiary: #fb923c; + --text-disabled: #78350f; + --text-inverse: #1c1917; /* ========================================================================== - 4. ACCENTS - Sunset Oranges & Pinks + 4. ACCENTS - Sunset colors ========================================================================== */ --accent-info: #fb923c; --accent-success: #4ade80; @@ -49,29 +49,29 @@ /* ========================================================================== 5. ACCENT GLOWS ========================================================================== */ - --glow-info: 0 0 20px rgba(251, 146, 60, 0.35); - --glow-success: 0 0 20px rgba(74, 222, 128, 0.3); - --glow-warning: 0 0 20px rgba(250, 204, 21, 0.3); - --glow-danger: 0 0 20px rgba(248, 113, 113, 0.3); + --glow-info: 0 0 24px rgba(251, 146, 60, 0.4); + --glow-success: 0 0 24px rgba(74, 222, 128, 0.35); + --glow-warning: 0 0 24px rgba(250, 204, 21, 0.4); + --glow-danger: 0 0 24px rgba(248, 113, 113, 0.35); /* ========================================================================== 6. GRAPH COLORS ========================================================================== */ - --graph-node-default: rgba(64, 54, 60, 0.95); - --graph-node-epic: rgba(251, 146, 60, 0.18); - --graph-edge-default: rgba(180, 160, 165, 0.3); + --graph-node-default: rgba(120, 53, 15, 0.95); + --graph-node-epic: rgba(251, 146, 60, 0.2); + --graph-edge-default: rgba(251, 191, 36, 0.3); --graph-edge-selected: #fb923c; --graph-edge-cycle: #facc15; /* ========================================================================== 7. SEMANTIC ALPHAS ========================================================================== */ - --alpha-white-low: rgba(250, 240, 242, 0.05); - --alpha-white-medium: rgba(250, 240, 242, 0.11); - --alpha-white-high: rgba(250, 240, 242, 0.22); + --alpha-white-low: rgba(255, 247, 237, 0.05); + --alpha-white-medium: rgba(255, 247, 237, 0.1); + --alpha-white-high: rgba(255, 247, 237, 0.2); --alpha-black-low: rgba(0, 0, 0, 0.2); - --alpha-black-medium: rgba(0, 0, 0, 0.45); - --alpha-black-high: rgba(0, 0, 0, 0.75); + --alpha-black-medium: rgba(0, 0, 0, 0.4); + --alpha-black-high: rgba(0, 0, 0, 0.6); /* ========================================================================== 8. STATUS COLORS @@ -79,8 +79,8 @@ --status-ready: rgba(74, 222, 128, 0.18); --status-in-progress: rgba(250, 204, 21, 0.18); --status-blocked: rgba(248, 113, 113, 0.18); - --status-closed: rgba(184, 160, 168, 0.12); - --status-deferred: rgba(184, 160, 168, 0.08); + --status-closed: rgba(253, 186, 116, 0.12); + --status-deferred: rgba(253, 186, 116, 0.08); /* ========================================================================== 9. SHADOWS @@ -100,13 +100,13 @@ /* ========================================================================== 11. SCROLLBARS ========================================================================== */ - --scrollbar-track: rgba(250, 240, 242, 0.03); - --scrollbar-thumb: rgba(180, 160, 165, 0.22); - --scrollbar-thumb-hover: rgba(180, 160, 165, 0.38); + --scrollbar-track: rgba(255, 247, 237, 0.03); + --scrollbar-thumb: rgba(251, 191, 36, 0.25); + --scrollbar-thumb-hover: rgba(251, 191, 36, 0.4); /* ========================================================================== 12. CODE/SYNTAX ========================================================================== */ - --code-background: #201a1d; - --code-text: #e2d0d5; + --code-background: #451a03; + --code-text: #fdba74; } diff --git a/src/styles/themes/forest.css b/src/styles/themes/forest.css index 01df878..7f09d23 100644 --- a/src/styles/themes/forest.css +++ b/src/styles/themes/forest.css @@ -1,86 +1,85 @@ /** - * Forest Theme - Mossy Green-Brown + * Forest Theme - Deep Woods * - * Organic, earthy greens with amber gold accents. - * Inspired by forest floors and mossy rocks. + * Rich forest greens with earthy browns and golden sunlight */ [data-theme="forest"] { /* ========================================================================== - 1. SURFACE LAYERS - Earthy Moss-Green + 1. SURFACE LAYERS - Forest floor to canopy ========================================================================== */ - --surface-backdrop: #121510; - --surface-elevated: #0a0d08; - --surface-primary: #1a1f15; - --surface-secondary: #22281a; - --surface-tertiary: #2b3320; - --surface-quaternary: #353d28; - --surface-overlay: #060804; - --surface-input: #181c13; - --surface-hover: rgba(220, 235, 200, 0.06); - --surface-active: rgba(132, 204, 22, 0.12); - --surface-tooltip: #1a1f15; + --surface-backdrop: #052e16; + --surface-elevated: #064e3b; + --surface-primary: #065f46; + --surface-secondary: #0f3d2e; + --surface-tertiary: #14532d; + --surface-quaternary: #166534; + --surface-overlay: #022c22; + --surface-input: #064e3b; + --surface-hover: rgba(250, 204, 21, 0.06); + --surface-active: rgba(74, 222, 128, 0.12); + --surface-tooltip: #064e3b; /* ========================================================================== - 2. BORDERS - Mossy Grey-Green + 2. BORDERS - Earthy with moss tint ========================================================================== */ - --border-subtle: rgba(150, 165, 130, 0.15); - --border-default: rgba(150, 165, 130, 0.28); - --border-strong: rgba(150, 165, 130, 0.45); - --border-accent: rgba(132, 204, 22, 0.55); + --border-subtle: rgba(101, 163, 13, 0.2); + --border-default: rgba(101, 163, 13, 0.35); + --border-strong: rgba(101, 163, 13, 0.55); + --border-accent: rgba(250, 204, 21, 0.6); /* ========================================================================== - 3. TEXT - Warm Moss + 3. TEXT - Sunlight through leaves ========================================================================== */ - --text-primary: #f2f5ed; - --text-secondary: #c8d4b5; - --text-tertiary: #96a582; - --text-disabled: #5e6b50; - --text-inverse: #0a0d08; + --text-primary: #ecfccb; + --text-secondary: #bef264; + --text-tertiary: #84cc16; + --text-disabled: #3f6212; + --text-inverse: #052e16; /* ========================================================================== - 4. ACCENTS - Forest Greens & Amber Gold + 4. ACCENTS - Forest life ========================================================================== */ --accent-info: #a3e635; --accent-success: #4ade80; - --accent-warning: #fbbf24; + --accent-warning: #facc15; --accent-danger: #f87171; /* ========================================================================== 5. ACCENT GLOWS ========================================================================== */ - --glow-info: 0 0 20px rgba(163, 230, 53, 0.35); - --glow-success: 0 0 20px rgba(74, 222, 128, 0.3); - --glow-warning: 0 0 20px rgba(251, 191, 36, 0.3); - --glow-danger: 0 0 20px rgba(248, 113, 113, 0.3); + --glow-info: 0 0 24px rgba(163, 230, 53, 0.4); + --glow-success: 0 0 24px rgba(74, 222, 128, 0.35); + --glow-warning: 0 0 24px rgba(250, 204, 21, 0.4); + --glow-danger: 0 0 24px rgba(248, 113, 113, 0.35); /* ========================================================================== 6. GRAPH COLORS ========================================================================== */ - --graph-node-default: rgba(53, 61, 40, 0.95); - --graph-node-epic: rgba(163, 230, 53, 0.15); - --graph-edge-default: rgba(150, 165, 130, 0.3); + --graph-node-default: rgba(22, 101, 52, 0.95); + --graph-node-epic: rgba(163, 230, 53, 0.2); + --graph-edge-default: rgba(132, 204, 22, 0.3); --graph-edge-selected: #a3e635; - --graph-edge-cycle: #fbbf24; + --graph-edge-cycle: #facc15; /* ========================================================================== 7. SEMANTIC ALPHAS ========================================================================== */ - --alpha-white-low: rgba(242, 245, 237, 0.05); - --alpha-white-medium: rgba(242, 245, 237, 0.11); - --alpha-white-high: rgba(242, 245, 237, 0.22); + --alpha-white-low: rgba(236, 252, 203, 0.05); + --alpha-white-medium: rgba(236, 252, 203, 0.1); + --alpha-white-high: rgba(236, 252, 203, 0.2); --alpha-black-low: rgba(0, 0, 0, 0.2); - --alpha-black-medium: rgba(0, 0, 0, 0.45); - --alpha-black-high: rgba(0, 0, 0, 0.75); + --alpha-black-medium: rgba(0, 0, 0, 0.4); + --alpha-black-high: rgba(0, 0, 0, 0.6); /* ========================================================================== 8. STATUS COLORS ========================================================================== */ --status-ready: rgba(74, 222, 128, 0.18); - --status-in-progress: rgba(251, 191, 36, 0.18); + --status-in-progress: rgba(250, 204, 21, 0.18); --status-blocked: rgba(248, 113, 113, 0.18); - --status-closed: rgba(150, 165, 130, 0.12); - --status-deferred: rgba(150, 165, 130, 0.08); + --status-closed: rgba(132, 204, 22, 0.12); + --status-deferred: rgba(132, 204, 22, 0.08); /* ========================================================================== 9. SHADOWS @@ -92,21 +91,21 @@ /* ========================================================================== 10. AGENT ROLE COLORS ========================================================================== */ - --agent-role-ui: #93c5fd; - --agent-role-graph: #86efac; + --agent-role-ui: #86efac; + --agent-role-graph: #4ade80; --agent-role-orchestrator: #d8b4fe; --agent-role-researcher: #fdba74; /* ========================================================================== 11. SCROLLBARS ========================================================================== */ - --scrollbar-track: rgba(242, 245, 237, 0.03); - --scrollbar-thumb: rgba(150, 165, 130, 0.22); - --scrollbar-thumb-hover: rgba(150, 165, 130, 0.38); + --scrollbar-track: rgba(236, 252, 203, 0.03); + --scrollbar-thumb: rgba(132, 204, 22, 0.25); + --scrollbar-thumb-hover: rgba(132, 204, 22, 0.4); /* ========================================================================== 12. CODE/SYNTAX ========================================================================== */ - --code-background: #181c13; - --code-text: #c8d4b5; + --code-background: #064e3b; + --code-text: #bef264; } diff --git a/src/styles/themes/index.css b/src/styles/themes/index.css index e91403f..0e59265 100644 --- a/src/styles/themes/index.css +++ b/src/styles/themes/index.css @@ -21,6 +21,7 @@ @import './forest.css'; @import './dusk.css'; @import './contrast.css'; +@import './light.css'; /* Default theme fallback */ html:not([data-theme]) { diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css new file mode 100644 index 0000000..3075bc5 --- /dev/null +++ b/src/styles/themes/light.css @@ -0,0 +1,111 @@ +/** + * Light Theme - Clean & Professional + * + * A clean, accessible light theme with subtle greys and vibrant accents + */ + +[data-theme="light"] { + /* ========================================================================== + 1. SURFACE LAYERS - Clean white/grey scale + ========================================================================== */ + --surface-backdrop: #f8fafc; + --surface-elevated: #ffffff; + --surface-primary: #f1f5f9; + --surface-secondary: #ffffff; + --surface-tertiary: #e2e8f0; + --surface-quaternary: #f8fafc; + --surface-overlay: #ffffff; + --surface-input: #ffffff; + --surface-hover: rgba(15, 23, 42, 0.04); + --surface-active: rgba(59, 130, 246, 0.1); + --surface-tooltip: #1e293b; + + /* ========================================================================== + 2. BORDERS - Subtle greys + ========================================================================== */ + --border-subtle: rgba(148, 163, 184, 0.25); + --border-default: rgba(148, 163, 184, 0.4); + --border-strong: rgba(71, 85, 105, 0.5); + --border-accent: rgba(59, 130, 246, 0.6); + + /* ========================================================================== + 3. TEXT - Slate scale + ========================================================================== */ + --text-primary: #0f172a; + --text-secondary: #334155; + --text-tertiary: #64748b; + --text-disabled: #94a3b8; + --text-inverse: #ffffff; + + /* ========================================================================== + 4. ACCENTS - Vibrant on light backgrounds + ========================================================================== */ + --accent-info: #3b82f6; + --accent-success: #22c55e; + --accent-warning: #f59e0b; + --accent-danger: #ef4444; + + /* ========================================================================== + 5. ACCENT GLOWS - Subtle shadows on light + ========================================================================== */ + --glow-info: 0 0 20px rgba(59, 130, 246, 0.25); + --glow-success: 0 0 20px rgba(34, 197, 94, 0.25); + --glow-warning: 0 0 20px rgba(245, 158, 11, 0.25); + --glow-danger: 0 0 20px rgba(239, 68, 68, 0.25); + + /* ========================================================================== + 6. GRAPH COLORS + ========================================================================== */ + --graph-node-default: rgba(255, 255, 255, 0.98); + --graph-node-epic: rgba(59, 130, 246, 0.12); + --graph-edge-default: rgba(100, 116, 139, 0.35); + --graph-edge-selected: #3b82f6; + --graph-edge-cycle: #f59e0b; + + /* ========================================================================== + 7. SEMANTIC ALPHAS - Dark overlays for light theme + ========================================================================== */ + --alpha-white-low: rgba(255, 255, 255, 0.5); + --alpha-white-medium: rgba(255, 255, 255, 0.7); + --alpha-white-high: rgba(255, 255, 255, 0.9); + --alpha-black-low: rgba(15, 23, 42, 0.04); + --alpha-black-medium: rgba(15, 23, 42, 0.08); + --alpha-black-high: rgba(15, 23, 42, 0.15); + + /* ========================================================================== + 8. STATUS COLORS - Slightly muted for light + ========================================================================== */ + --status-ready: rgba(34, 197, 94, 0.12); + --status-in-progress: rgba(245, 158, 11, 0.12); + --status-blocked: rgba(239, 68, 68, 0.12); + --status-closed: rgba(148, 163, 184, 0.1); + --status-deferred: rgba(148, 163, 184, 0.06); + + /* ========================================================================== + 9. SHADOWS - Softer on light + ========================================================================== */ + --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08); + --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.1); + --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.12); + + /* ========================================================================== + 10. AGENT ROLE COLORS + ========================================================================== */ + --agent-role-ui: #3b82f6; + --agent-role-graph: #22c55e; + --agent-role-orchestrator: #a855f7; + --agent-role-researcher: #f97316; + + /* ========================================================================== + 11. SCROLLBARS + ========================================================================== */ + --scrollbar-track: rgba(15, 23, 42, 0.03); + --scrollbar-thumb: rgba(100, 116, 139, 0.25); + --scrollbar-thumb-hover: rgba(71, 85, 105, 0.4); + + /* ========================================================================== + 12. CODE/SYNTAX + ========================================================================== */ + --code-background: #f1f5f9; + --code-text: #334155; +} diff --git a/src/styles/themes/midnight.css b/src/styles/themes/midnight.css index 2af0137..88a9c18 100644 --- a/src/styles/themes/midnight.css +++ b/src/styles/themes/midnight.css @@ -1,47 +1,47 @@ /** - * Midnight Theme - Deep Blue-Purple + * Midnight Theme - Deep Ocean * - * Cool, mysterious deep blue with purple and violet accents. - * For those who prefer cool tones over warm charcoal. + * Deep navy blues with violet and cyan accents + * Like looking into deep ocean water at night */ [data-theme="midnight"] { /* ========================================================================== - 1. SURFACE LAYERS - Deep Blue-Purple + 1. SURFACE LAYERS - Deep ocean blues ========================================================================== */ - --surface-backdrop: #0a0a12; - --surface-elevated: #050510; - --surface-primary: #12121f; - --surface-secondary: #18182b; - --surface-tertiary: #202038; - --surface-quaternary: #2a2a45; - --surface-overlay: #03030a; - --surface-input: #151525; - --surface-hover: rgba(199, 195, 255, 0.06); - --surface-active: rgba(139, 92, 246, 0.15); - --surface-tooltip: #12121f; + --surface-backdrop: #020617; + --surface-elevated: #0f172a; + --surface-primary: #1e1b4b; + --surface-secondary: #1e293b; + --surface-tertiary: #312e81; + --surface-quaternary: #3730a3; + --surface-overlay: #020617; + --surface-input: #1e1b4b; + --surface-hover: rgba(139, 92, 246, 0.08); + --surface-active: rgba(6, 182, 212, 0.12); + --surface-tooltip: #1e1b4b; /* ========================================================================== - 2. BORDERS - Cool Grey-Blue + 2. BORDERS - Ocean blue tint ========================================================================== */ - --border-subtle: rgba(150, 155, 180, 0.15); - --border-default: rgba(150, 155, 180, 0.28); - --border-strong: rgba(150, 155, 180, 0.45); - --border-accent: rgba(139, 92, 246, 0.55); + --border-subtle: rgba(99, 102, 241, 0.2); + --border-default: rgba(99, 102, 241, 0.35); + --border-strong: rgba(99, 102, 241, 0.55); + --border-accent: rgba(139, 92, 246, 0.65); /* ========================================================================== - 3. TEXT - Cool White + 3. TEXT - Cool white with blue tint ========================================================================== */ - --text-primary: #f0f0f8; - --text-secondary: #c5c5d8; - --text-tertiary: #9090a8; - --text-disabled: #5a5a70; - --text-inverse: #050510; + --text-primary: #f0f9ff; + --text-secondary: #bfdbfe; + --text-tertiary: #7dd3fc; + --text-disabled: #52525b; + --text-inverse: #020617; /* ========================================================================== - 4. ACCENTS - Violet/Purple/Cyan + 4. ACCENTS - Ocean bioluminescence ========================================================================== */ - --accent-info: #a78bfa; + --accent-info: #22d3ee; --accent-success: #34d399; --accent-warning: #fbbf24; --accent-danger: #f87171; @@ -49,27 +49,27 @@ /* ========================================================================== 5. ACCENT GLOWS ========================================================================== */ - --glow-info: 0 0 20px rgba(167, 139, 250, 0.35); - --glow-success: 0 0 20px rgba(52, 211, 153, 0.3); - --glow-warning: 0 0 20px rgba(251, 191, 36, 0.3); - --glow-danger: 0 0 20px rgba(248, 113, 113, 0.3); + --glow-info: 0 0 24px rgba(34, 211, 238, 0.4); + --glow-success: 0 0 24px rgba(52, 211, 153, 0.35); + --glow-warning: 0 0 24px rgba(251, 191, 36, 0.35); + --glow-danger: 0 0 24px rgba(248, 113, 113, 0.35); /* ========================================================================== 6. GRAPH COLORS ========================================================================== */ - --graph-node-default: rgba(42, 42, 69, 0.95); - --graph-node-epic: rgba(167, 139, 250, 0.18); - --graph-edge-default: rgba(150, 155, 180, 0.3); - --graph-edge-selected: #a78bfa; + --graph-node-default: rgba(55, 48, 163, 0.9); + --graph-node-epic: rgba(139, 92, 246, 0.25); + --graph-edge-default: rgba(99, 102, 241, 0.3); + --graph-edge-selected: #22d3ee; --graph-edge-cycle: #fbbf24; /* ========================================================================== 7. SEMANTIC ALPHAS ========================================================================== */ - --alpha-white-low: rgba(240, 240, 248, 0.05); - --alpha-white-medium: rgba(240, 240, 248, 0.11); - --alpha-white-high: rgba(240, 240, 248, 0.22); - --alpha-black-low: rgba(0, 0, 0, 0.25); + --alpha-white-low: rgba(240, 249, 255, 0.05); + --alpha-white-medium: rgba(240, 249, 255, 0.1); + --alpha-white-high: rgba(240, 249, 255, 0.2); + --alpha-black-low: rgba(0, 0, 0, 0.3); --alpha-black-medium: rgba(0, 0, 0, 0.5); --alpha-black-high: rgba(0, 0, 0, 0.8); @@ -79,34 +79,34 @@ --status-ready: rgba(52, 211, 153, 0.18); --status-in-progress: rgba(251, 191, 36, 0.18); --status-blocked: rgba(248, 113, 113, 0.18); - --status-closed: rgba(144, 144, 168, 0.12); - --status-deferred: rgba(144, 144, 168, 0.08); + --status-closed: rgba(125, 211, 252, 0.12); + --status-deferred: rgba(125, 211, 252, 0.08); /* ========================================================================== 9. SHADOWS ========================================================================== */ - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); - --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); - --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); + --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); /* ========================================================================== 10. AGENT ROLE COLORS ========================================================================== */ - --agent-role-ui: #93c5fd; - --agent-role-graph: #86efac; - --agent-role-orchestrator: #d8b4fe; - --agent-role-researcher: #fdba74; + --agent-role-ui: #60a5fa; + --agent-role-graph: #4ade80; + --agent-role-orchestrator: #c084fc; + --agent-role-researcher: #fb923c; /* ========================================================================== 11. SCROLLBARS ========================================================================== */ - --scrollbar-track: rgba(240, 240, 248, 0.03); - --scrollbar-thumb: rgba(150, 155, 180, 0.22); - --scrollbar-thumb-hover: rgba(150, 155, 180, 0.38); + --scrollbar-track: rgba(240, 249, 255, 0.03); + --scrollbar-thumb: rgba(99, 102, 241, 0.25); + --scrollbar-thumb-hover: rgba(99, 102, 241, 0.4); /* ========================================================================== 12. CODE/SYNTAX ========================================================================== */ - --code-background: #151525; - --code-text: #c5c5d8; + --code-background: #1e1b4b; + --code-text: #bfdbfe; }