/* ═══════════════════════════════════════════════════════════════ WO THEME ENGINE — Single source of truth for all theme tokens Three themes: bloomberg (default dark) | night | light Usage: On boot: read localStorage('wo-theme') and apply before render ═══════════════════════════════════════════════════════════════ */ /* ─── THEME 1: bloomberg (default dark — Bloomberg Terminal density) ─── */ :root, :root[data-theme="bloomberg"] { /* Backgrounds */ --wo-bg: #0a0a0f; --wo-panel: #12121a; --wo-card: #1a1a24; --wo-border: #2a2a38; /* Text */ --wo-text-primary: #e8e8ec; --wo-text-secondary: #8892a4; --wo-text-muted: #4a5568; /* Accent */ --wo-accent: #e07a00; --wo-accent-hover: #f08a10; --wo-accent-muted: rgba(224, 122, 0, 0.15); --wo-accent-rgb: 224,122,0; /* Semantic */ --wo-positive: #10b981; --wo-negative: #ef4444; --wo-warning: #f59e0b; --wo-info: #3b82f6; /* Shadows */ --wo-shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --wo-shadow-md: 0 4px 12px rgba(0,0,0,0.5); --wo-shadow-lg: 0 12px 32px rgba(0,0,0,0.6); /* Radius */ --wo-radius-sm: 6px; --wo-radius-md: 10px; --wo-radius-lg: 16px; /* Spacing */ --wo-spacing-xs: 4px; --wo-spacing-sm: 8px; --wo-spacing-md: 16px; --wo-spacing-lg: 24px; --wo-spacing-xl: 40px; } /* ─── THEME 2: night (Apple-style dark — comfortable for extended use) ─── */ :root[data-theme="night"] { /* Backgrounds */ --wo-bg: #000000; --wo-panel: #1c1c1e; --wo-card: #2c2c2e; --wo-border: #38383a; /* Text */ --wo-text-primary: #ffffff; --wo-text-secondary: rgba(235, 235, 245, 0.60); --wo-text-muted: rgba(235, 235, 245, 0.30); /* Accent */ --wo-accent: #0a84ff; --wo-accent-hover: #409cff; --wo-accent-muted: rgba(10, 132, 255, 0.15); --wo-accent-rgb: 10,132,255; /* Semantic */ --wo-positive: #30d158; --wo-negative: #ff453a; --wo-warning: #ff9f0a; --wo-info: #64d2ff; /* Shadows */ --wo-shadow-sm: 0 1px 3px rgba(0,0,0,0.6); --wo-shadow-md: 0 4px 12px rgba(0,0,0,0.7); --wo-shadow-lg: 0 12px 32px rgba(0,0,0,0.8); /* Radius — same as bloomberg */ --wo-radius-sm: 6px; --wo-radius-md: 10px; --wo-radius-lg: 16px; /* Spacing — same as bloomberg */ --wo-spacing-xs: 4px; --wo-spacing-sm: 8px; --wo-spacing-md: 16px; --wo-spacing-lg: 24px; --wo-spacing-xl: 40px; } /* ─── THEME 3: light (Apple-style light — client-facing presentations) ─── */ :root[data-theme="light"] { /* Backgrounds */ --wo-bg: #f2f2f7; --wo-panel: #ffffff; --wo-card: #ffffff; --wo-border: #c6c6c8; /* Text */ --wo-text-primary: #000000; --wo-text-secondary: rgba(60, 60, 67, 0.60); --wo-text-muted: rgba(60, 60, 67, 0.30); /* Accent */ --wo-accent: #007aff; --wo-accent-hover: #0066d6; --wo-accent-muted: rgba(0, 122, 255, 0.10); --wo-accent-rgb: 0,122,255; /* Semantic */ --wo-positive: #34c759; --wo-negative: #ff3b30; --wo-warning: #ff9500; --wo-info: #007aff; /* Shadows */ --wo-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px var(--wo-border); --wo-shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 0 0 1px var(--wo-border); --wo-shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 0 0 1px var(--wo-border); /* Radius — same */ --wo-radius-sm: 6px; --wo-radius-md: 10px; --wo-radius-lg: 16px; /* Spacing — same */ --wo-spacing-xs: 4px; --wo-spacing-sm: 8px; --wo-spacing-md: 16px; --wo-spacing-lg: 24px; --wo-spacing-xl: 40px; } /* ─── Theme boot: prevent flash of wrong theme ─── */ /* Applied immediately inline in via script (see pro.html) */ /* ═══════════════════════════════════════════════════════════════ BRIDGE: Map existing token names to wo-theme-engine values Existing CSS uses --bg, --panel, --card, --text, --accent, etc. This bridge ensures those legacy tokens respect the active theme. ═══════════════════════════════════════════════════════════════ */ /* bloomberg = default (matches existing :root values, no override needed) */ :root, :root[data-theme="bloomberg"] { --bg: var(--wo-bg); --panel: var(--wo-panel); --panel2: var(--wo-card); --card: var(--wo-card); --line: var(--wo-border); --border: var(--wo-border); --muted: var(--wo-text-secondary); --text: var(--wo-text-primary); /* Keep accent as amber on bloomberg */ --accent: var(--wo-accent); --good: var(--wo-positive); --bad: var(--wo-negative); --warn: var(--wo-warning); } /* night theme overrides */ :root[data-theme="night"] { --bg: var(--wo-bg); --bg-start: #000000; --panel: var(--wo-panel); --panel2: var(--wo-card); --card: var(--wo-card); --line: var(--wo-border); --border: var(--wo-border); --muted: var(--wo-text-secondary); --text: var(--wo-text-primary); --accent: var(--wo-accent); --good: var(--wo-positive); --bad: var(--wo-negative); --warn: var(--wo-warning); --bg-rgb: 0,0,0; --line-rgb: 56,56,58; --overlay-rgb: 255,255,255; --accent-rgb: 10,132,255; --good-rgb: 48,209,88; --bad-rgb: 255,69,58; --warn-rgb: 255,159,10; } /* night theme body */ :root[data-theme="night"] body { background-color: var(--wo-bg); background-image: none; color: var(--wo-text-primary); } /* light theme overrides */ :root[data-theme="light"] { --bg: var(--wo-bg); --bg-start: #f2f2f7; --panel: var(--wo-panel); --panel2: #f2f2f7; --card: var(--wo-card); --line: var(--wo-border); --border: var(--wo-border); --muted: var(--wo-text-secondary); --text: var(--wo-text-primary); --accent: var(--wo-accent); --good: var(--wo-positive); --bad: var(--wo-negative); --warn: var(--wo-warning); --bg-rgb: 242,242,247; --line-rgb: 198,198,200; --overlay-rgb: 0,0,0; --accent-rgb: 0,122,255; --good-rgb: 52,199,89; --bad-rgb: 255,59,48; --warn-rgb: 255,149,0; } /* light theme body + key structural elements */ :root[data-theme="light"] body { background-color: var(--wo-bg); background-image: none; color: var(--wo-text-primary); } :root[data-theme="light"] .wo-sidebar, :root[data-theme="light"] #sidebar, :root[data-theme="light"] .sidebar { background: var(--wo-panel); border-right: 1px solid var(--wo-border); } :root[data-theme="light"] .wo-nav-item, :root[data-theme="light"] .nav-item { color: var(--wo-text-secondary); } :root[data-theme="light"] .wo-nav-item:hover, :root[data-theme="light"] .nav-item:hover, :root[data-theme="light"] .wo-nav-item.active, :root[data-theme="light"] .nav-item.active { background: var(--wo-accent-muted); color: var(--wo-accent); } :root[data-theme="light"] .wo-kpi, :root[data-theme="light"] .wo-card, :root[data-theme="light"] .card, :root[data-theme="light"] table, :root[data-theme="light"] .panel { background: var(--wo-card); border: 1px solid var(--wo-border); box-shadow: var(--wo-shadow-sm); } :root[data-theme="light"] thead th { background: #f2f2f7; color: var(--wo-text-secondary); } :root[data-theme="light"] tr:hover td { background: rgba(0,122,255,0.04); } :root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background: #ffffff; border-color: var(--wo-border); color: var(--wo-text-primary); } :root[data-theme="light"] .btn { background: #ffffff; border-color: var(--wo-border); color: var(--wo-text-primary); } :root[data-theme="light"] .btn.primary, :root[data-theme="light"] .btn-primary { background: var(--wo-accent); border-color: var(--wo-accent); color: #ffffff; } /* Suppress rl-theme, navy-theme, midnight-theme legacy classes — data-theme is now the single source of truth */ :root.rl-theme, :root.navy-theme, :root.midnight-theme { /* These class-based themes are deprecated. Remove via JS. */ /* Tokens are now controlled exclusively by data-theme attribute. */ }