viktor/beadboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(theme): add 5 distinct themes to choose from

Browse source 
- 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 2026-02-26 16:09:12 -08:00
parent 6564272987
commit fa3489b394
6 changed files with 520 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

116
src/styles/themes/aurora.css
View file

@ -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;
}