feat(theme): add 5 distinct themes to choose from
- aurora: Warm charcoal with cyan accents (fixed/improved) - midnight: Cool blue-purple with violet accents - forest: Earthy green-brown with lime accents - dusk: Warm purple-brown with orange/pink accents - contrast: Pure black with neon accents (high contrast) All themes use the same 12-category token system for consistency. Switch themes by changing data-theme attribute on html element.
This commit is contained in:
zenchantlive
parent
6564272987
commit
fa3489b394
6 changed files with 520 additions and 68 deletions
|
|
@ -3,111 +3,111 @@
|
|||
*
|
||||
* 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
|
||||
*/
|
||||
|
||||
[data-theme="aurora"] {
|
||||
/* ==========================================================================
|
||||
1. SURFACE LAYERS - Warm Charcoal Scale
|
||||
Lightest to darkest: quaternary → tertiary → secondary → primary → elevated → backdrop
|
||||
1. SURFACE LAYERS - Warm Charcoal Scale (DISTINCT)
|
||||
========================================================================== */
|
||||
--surface-backdrop: #181716;
|
||||
--surface-elevated: #131211;
|
||||
--surface-primary: #1f1e1d;
|
||||
--surface-secondary: #242322;
|
||||
--surface-tertiary: #282725;
|
||||
--surface-quaternary: #302e2c;
|
||||
--surface-overlay: #0d0c0b;
|
||||
--surface-input: #1a1917;
|
||||
--surface-hover: rgba(240, 238, 234, 0.05);
|
||||
--surface-active: rgba(53, 201, 255, 0.1);
|
||||
--surface-tooltip: #1f1e1d;
|
||||
--surface-backdrop: #161514; /* Darkest - page background */
|
||||
--surface-elevated: #0f0e0d; /* Header - darker for contrast */
|
||||
--surface-primary: #1e1d1b; /* Sidebar */
|
||||
--surface-secondary: #252422; /* Main content - lighter than sidebar */
|
||||
--surface-tertiary: #2d2b29; /* Panels */
|
||||
--surface-quaternary: #353331; /* Cards - lightest surface */
|
||||
--surface-overlay: #0a0909; /* Modals */
|
||||
--surface-input: #1a1917; /* Form fields */
|
||||
--surface-hover: rgba(240, 238, 234, 0.06);
|
||||
--surface-active: rgba(53, 201, 255, 0.12);
|
||||
--surface-tooltip: #1e1d1b;
|
||||
|
||||
/* ==========================================================================
|
||||
2. BORDERS - Warm Grey
|
||||
2. BORDERS - Warm Grey (more visible)
|
||||
========================================================================== */
|
||||
--border-subtle: rgba(180, 175, 165, 0.12);
|
||||
--border-default: rgba(180, 175, 165, 0.22);
|
||||
--border-strong: rgba(180, 175, 165, 0.38);
|
||||
--border-accent: rgba(53, 201, 255, 0.5);
|
||||
--border-subtle: rgba(180, 175, 165, 0.15);
|
||||
--border-default: rgba(180, 175, 165, 0.28);
|
||||
--border-strong: rgba(180, 175, 165, 0.45);
|
||||
--border-accent: rgba(53, 201, 255, 0.55);
|
||||
|
||||
/* ==========================================================================
|
||||
3. TEXT - Warm White Scale
|
||||
========================================================================== */
|
||||
--text-primary: #f0eeea;
|
||||
--text-secondary: #c9c5bc;
|
||||
--text-primary: #f5f3ef;
|
||||
--text-secondary: #d4d0c7;
|
||||
--text-tertiary: #a8a49a;
|
||||
--text-disabled: #6b6862;
|
||||
--text-inverse: #131211;
|
||||
--text-inverse: #0f0e0d;
|
||||
|
||||
/* ==========================================================================
|
||||
4. ACCENTS - Aurora Colors (Cyan/Teal/Green/Amber/Red)
|
||||
4. ACCENTS - Aurora Colors
|
||||
========================================================================== */
|
||||
--accent-info: #35c9ff;
|
||||
--accent-success: #35d98f;
|
||||
--accent-warning: #ffb24a;
|
||||
--accent-danger: #ff4c72;
|
||||
--accent-info: #4dd4ff;
|
||||
--accent-success: #4ade80;
|
||||
--accent-warning: #fbbf24;
|
||||
--accent-danger: #fb7185;
|
||||
|
||||
/* ==========================================================================
|
||||
5. ACCENT GLOWS - Soft Aurora Glow Effects
|
||||
5. ACCENT GLOWS
|
||||
========================================================================== */
|
||||
--glow-info: 0 0 20px rgba(53, 201, 255, 0.25);
|
||||
--glow-success: 0 0 20px rgba(53, 217, 143, 0.25);
|
||||
--glow-warning: 0 0 20px rgba(255, 178, 74, 0.25);
|
||||
--glow-danger: 0 0 20px rgba(255, 76, 114, 0.25);
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
6. GRAPH COLORS
|
||||
========================================================================== */
|
||||
--graph-node-default: rgba(48, 46, 44, 0.9);
|
||||
--graph-node-epic: rgba(53, 201, 255, 0.12);
|
||||
--graph-edge-default: rgba(180, 175, 165, 0.25);
|
||||
--graph-edge-selected: #35c9ff;
|
||||
--graph-edge-cycle: #ffb24a;
|
||||
--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-edge-cycle: #fbbf24;
|
||||
|
||||
/* ==========================================================================
|
||||
7. SEMANTIC ALPHAS - For overlays/hover states
|
||||
7. SEMANTIC ALPHAS
|
||||
========================================================================== */
|
||||
--alpha-white-low: rgba(240, 238, 234, 0.05);
|
||||
--alpha-white-medium: rgba(240, 238, 234, 0.1);
|
||||
--alpha-white-high: rgba(240, 238, 234, 0.2);
|
||||
--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.4);
|
||||
--alpha-black-high: rgba(0, 0, 0, 0.7);
|
||||
--alpha-black-medium: rgba(0, 0, 0, 0.45);
|
||||
--alpha-black-high: rgba(0, 0, 0, 0.75);
|
||||
|
||||
/* ==========================================================================
|
||||
8. STATUS COLORS - RGBA tints for status backgrounds
|
||||
8. STATUS COLORS
|
||||
========================================================================== */
|
||||
--status-ready: rgba(53, 217, 143, 0.15);
|
||||
--status-in-progress: rgba(255, 178, 74, 0.15);
|
||||
--status-blocked: rgba(255, 76, 114, 0.15);
|
||||
--status-closed: rgba(168, 164, 154, 0.1);
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
9. SHADOWS
|
||||
========================================================================== */
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
10. AGENT ROLE COLORS
|
||||
========================================================================== */
|
||||
--agent-role-ui: #6B9BD2;
|
||||
--agent-role-graph: #7CB97A;
|
||||
--agent-role-orchestrator: #B08ED6;
|
||||
--agent-role-researcher: #D4A574;
|
||||
--agent-role-ui: #7bb3f0;
|
||||
--agent-role-graph: #8fd18f;
|
||||
--agent-role-orchestrator: #c4a5e6;
|
||||
--agent-role-researcher: #e6b88a;
|
||||
|
||||
/* ==========================================================================
|
||||
11. SCROLLBARS
|
||||
========================================================================== */
|
||||
--scrollbar-track: rgba(240, 238, 234, 0.02);
|
||||
--scrollbar-thumb: rgba(180, 175, 165, 0.2);
|
||||
--scrollbar-thumb-hover: rgba(180, 175, 165, 0.35);
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
12. CODE/SYNTAX
|
||||
========================================================================== */
|
||||
--code-background: #1a1917;
|
||||
--code-text: #c9c5bc;
|
||||
--code-text: #d4d0c7;
|
||||
}
|
||||
|
|
|
|||
112
src/styles/themes/contrast.css
Normal file
112
src/styles/themes/contrast.css
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* High Contrast Theme - Maximum Visibility
|
||||
*
|
||||
* Pure black background with bright white text and vivid accent colors.
|
||||
* Designed for maximum readability and accessibility.
|
||||
*/
|
||||
|
||||
[data-theme="contrast"] {
|
||||
/* ==========================================================================
|
||||
1. SURFACE LAYERS - Pure Black & Dark Greys
|
||||
========================================================================== */
|
||||
--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-tooltip: #1a1a1a;
|
||||
|
||||
/* ==========================================================================
|
||||
2. BORDERS - White (High Contrast)
|
||||
========================================================================== */
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
3. TEXT - Pure White
|
||||
========================================================================== */
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #e0e0e0;
|
||||
--text-tertiary: #a0a0a0;
|
||||
--text-disabled: #606060;
|
||||
--text-inverse: #000000;
|
||||
|
||||
/* ==========================================================================
|
||||
4. ACCENTS - Bright & Vivid
|
||||
========================================================================== */
|
||||
--accent-info: #00ffff;
|
||||
--accent-success: #00ff66;
|
||||
--accent-warning: #ffcc00;
|
||||
--accent-danger: #ff3366;
|
||||
|
||||
/* ==========================================================================
|
||||
5. ACCENT GLOWS
|
||||
========================================================================== */
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
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-edge-selected: #00ffff;
|
||||
--graph-edge-cycle: #ffcc00;
|
||||
|
||||
/* ==========================================================================
|
||||
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-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);
|
||||
|
||||
/* ==========================================================================
|
||||
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);
|
||||
|
||||
/* ==========================================================================
|
||||
9. SHADOWS
|
||||
========================================================================== */
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
|
||||
|
||||
/* ==========================================================================
|
||||
10. AGENT ROLE COLORS
|
||||
========================================================================== */
|
||||
--agent-role-ui: #7dd3fc;
|
||||
--agent-role-graph: #86efac;
|
||||
--agent-role-orchestrator: #d8b4fe;
|
||||
--agent-role-researcher: #fdba74;
|
||||
|
||||
/* ==========================================================================
|
||||
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);
|
||||
|
||||
/* ==========================================================================
|
||||
12. CODE/SYNTAX
|
||||
========================================================================== */
|
||||
--code-background: #111111;
|
||||
--code-text: #e0e0e0;
|
||||
}
|
||||
112
src/styles/themes/dusk.css
Normal file
112
src/styles/themes/dusk.css
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* Dusk Theme - Sunset Orange & Pink
|
||||
*
|
||||
* Warm oranges, coral pinks, and soft purples.
|
||||
* Inspired by sunset skies and twilight hues.
|
||||
*/
|
||||
|
||||
[data-theme="dusk"] {
|
||||
/* ==========================================================================
|
||||
1. SURFACE LAYERS - Warm Purple-Brown
|
||||
========================================================================== */
|
||||
--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-active: rgba(251, 146, 60, 0.12);
|
||||
--surface-tooltip: #241e21;
|
||||
|
||||
/* ==========================================================================
|
||||
2. BORDERS - Warm Dusty Rose
|
||||
========================================================================== */
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
3. TEXT - Warm Off-White
|
||||
========================================================================== */
|
||||
--text-primary: #faf0f2;
|
||||
--text-secondary: #e2d0d5;
|
||||
--text-tertiary: #b8a0a8;
|
||||
--text-disabled: #786068;
|
||||
--text-inverse: #110d0f;
|
||||
|
||||
/* ==========================================================================
|
||||
4. ACCENTS - Sunset Oranges & Pinks
|
||||
========================================================================== */
|
||||
--accent-info: #fb923c;
|
||||
--accent-success: #4ade80;
|
||||
--accent-warning: #facc15;
|
||||
--accent-danger: #f87171;
|
||||
|
||||
/* ==========================================================================
|
||||
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);
|
||||
|
||||
/* ==========================================================================
|
||||
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-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-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);
|
||||
|
||||
/* ==========================================================================
|
||||
8. STATUS COLORS
|
||||
========================================================================== */
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
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);
|
||||
|
||||
/* ==========================================================================
|
||||
10. AGENT ROLE COLORS
|
||||
========================================================================== */
|
||||
--agent-role-ui: #fdba74;
|
||||
--agent-role-graph: #86efac;
|
||||
--agent-role-orchestrator: #f9a8d4;
|
||||
--agent-role-researcher: #c4b5fd;
|
||||
|
||||
/* ==========================================================================
|
||||
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);
|
||||
|
||||
/* ==========================================================================
|
||||
12. CODE/SYNTAX
|
||||
========================================================================== */
|
||||
--code-background: #201a1d;
|
||||
--code-text: #e2d0d5;
|
||||
}
|
||||
112
src/styles/themes/forest.css
Normal file
112
src/styles/themes/forest.css
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* Forest Theme - Mossy Green-Brown
|
||||
*
|
||||
* Organic, earthy greens with amber gold accents.
|
||||
* Inspired by forest floors and mossy rocks.
|
||||
*/
|
||||
|
||||
[data-theme="forest"] {
|
||||
/* ==========================================================================
|
||||
1. SURFACE LAYERS - Earthy Moss-Green
|
||||
========================================================================== */
|
||||
--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;
|
||||
|
||||
/* ==========================================================================
|
||||
2. BORDERS - Mossy Grey-Green
|
||||
========================================================================== */
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
3. TEXT - Warm Moss
|
||||
========================================================================== */
|
||||
--text-primary: #f2f5ed;
|
||||
--text-secondary: #c8d4b5;
|
||||
--text-tertiary: #96a582;
|
||||
--text-disabled: #5e6b50;
|
||||
--text-inverse: #0a0d08;
|
||||
|
||||
/* ==========================================================================
|
||||
4. ACCENTS - Forest Greens & Amber Gold
|
||||
========================================================================== */
|
||||
--accent-info: #a3e635;
|
||||
--accent-success: #4ade80;
|
||||
--accent-warning: #fbbf24;
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
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-edge-selected: #a3e635;
|
||||
--graph-edge-cycle: #fbbf24;
|
||||
|
||||
/* ==========================================================================
|
||||
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-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);
|
||||
|
||||
/* ==========================================================================
|
||||
8. STATUS COLORS
|
||||
========================================================================== */
|
||||
--status-ready: rgba(74, 222, 128, 0.18);
|
||||
--status-in-progress: rgba(251, 191, 36, 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);
|
||||
|
||||
/* ==========================================================================
|
||||
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);
|
||||
|
||||
/* ==========================================================================
|
||||
10. AGENT ROLE COLORS
|
||||
========================================================================== */
|
||||
--agent-role-ui: #93c5fd;
|
||||
--agent-role-graph: #86efac;
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
12. CODE/SYNTAX
|
||||
========================================================================== */
|
||||
--code-background: #181c13;
|
||||
--code-text: #c8d4b5;
|
||||
}
|
||||
|
|
@ -4,21 +4,25 @@
|
|||
* Import this file in your main CSS to enable the theme system.
|
||||
* The data-theme attribute on <html> controls which theme is active.
|
||||
*
|
||||
* Example:
|
||||
* <html data-theme="aurora">
|
||||
* <html data-theme="midnight"> (future)
|
||||
* Available themes:
|
||||
* aurora - Warm charcoal with cyan accents (default)
|
||||
* midnight - Cool blue-purple with violet accents
|
||||
* forest - Earthy green-brown with lime accents
|
||||
* dusk - Warm purple-brown with orange accents
|
||||
* contrast - Pure black with neon accents (high contrast)
|
||||
*
|
||||
* To switch themes:
|
||||
* document.documentElement.setAttribute('data-theme', 'midnight');
|
||||
*/
|
||||
|
||||
@import './tokens.css';
|
||||
@import './aurora.css';
|
||||
@import './midnight.css';
|
||||
@import './forest.css';
|
||||
@import './dusk.css';
|
||||
@import './contrast.css';
|
||||
|
||||
/* Default theme fallback */
|
||||
html:not([data-theme]) {
|
||||
/* Inherits aurora as default since it's imported above */
|
||||
/* Aurora is the default theme */
|
||||
}
|
||||
|
||||
/*
|
||||
* Future themes would be added here:
|
||||
* @import './midnight.css';
|
||||
* @import './forest.css';
|
||||
*/
|
||||
|
|
|
|||
112
src/styles/themes/midnight.css
Normal file
112
src/styles/themes/midnight.css
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* Midnight Theme - Deep Blue-Purple
|
||||
*
|
||||
* Cool, mysterious deep blue with purple and violet accents.
|
||||
* For those who prefer cool tones over warm charcoal.
|
||||
*/
|
||||
|
||||
[data-theme="midnight"] {
|
||||
/* ==========================================================================
|
||||
1. SURFACE LAYERS - Deep Blue-Purple
|
||||
========================================================================== */
|
||||
--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;
|
||||
|
||||
/* ==========================================================================
|
||||
2. BORDERS - Cool Grey-Blue
|
||||
========================================================================== */
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
3. TEXT - Cool White
|
||||
========================================================================== */
|
||||
--text-primary: #f0f0f8;
|
||||
--text-secondary: #c5c5d8;
|
||||
--text-tertiary: #9090a8;
|
||||
--text-disabled: #5a5a70;
|
||||
--text-inverse: #050510;
|
||||
|
||||
/* ==========================================================================
|
||||
4. ACCENTS - Violet/Purple/Cyan
|
||||
========================================================================== */
|
||||
--accent-info: #a78bfa;
|
||||
--accent-success: #34d399;
|
||||
--accent-warning: #fbbf24;
|
||||
--accent-danger: #f87171;
|
||||
|
||||
/* ==========================================================================
|
||||
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);
|
||||
|
||||
/* ==========================================================================
|
||||
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-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-black-medium: rgba(0, 0, 0, 0.5);
|
||||
--alpha-black-high: rgba(0, 0, 0, 0.8);
|
||||
|
||||
/* ==========================================================================
|
||||
8. STATUS COLORS
|
||||
========================================================================== */
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
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);
|
||||
|
||||
/* ==========================================================================
|
||||
10. AGENT ROLE COLORS
|
||||
========================================================================== */
|
||||
--agent-role-ui: #93c5fd;
|
||||
--agent-role-graph: #86efac;
|
||||
--agent-role-orchestrator: #d8b4fe;
|
||||
--agent-role-researcher: #fdba74;
|
||||
|
||||
/* ==========================================================================
|
||||
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);
|
||||
|
||||
/* ==========================================================================
|
||||
12. CODE/SYNTAX
|
||||
========================================================================== */
|
||||
--code-background: #151525;
|
||||
--code-text: #c5c5d8;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue