/* src/shared/theme.css */ /* * Single source of truth for NeosChat design tokens. * Linked once in index.html ; because CSS custom properties are inherited, these * tokens cascade into every component's shadow root without needing a per-shadow . * * ACCENT CONVENTION (important): there are TWO accent tokens that must stay in sync — * --accent-color : a full hex color, for `color: var(--accent-color)` (the common case). * --accent-rgb : the same color as a bare "r, g, b" triplet, for `rgba(var(--accent-rgb), a)`. * Never write `rgba(var(--accent-color), a)` — that mixes the two and silently drops the rule. * * THEME vs ACCENT: `data-theme` (light/dark/cyberpunk) controls the whole surface; `data-accent` * (an optional preset) only overrides the accent color. They are orthogonal and set separately * by src/core/theme.js. `data-accent` rules come AFTER the theme rules so a chosen preset wins. */ :root { --bg-app: #f5f7fa; --bg-panel: #ffffff; --text-main: #333333; --text-muted: #555555; --border-color: #ddd; --shadow: rgba(0,0,0,0.1); --input-bg: #ffffff; --accent-color: #007BFF; --accent-rgb: 0, 123, 255; --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: light; } /* * Non-color design scales — theme-independent (identical in light/dark/cyberpunk), so they live in a * standalone :root rather than being repeated per theme. These formalise the spacing / radius / type / * z-index literals that are currently hardcoded throughout styles.css. NEW/edited CSS should reference * these; migrating the existing literals is incremental (see docs/design-system.md). */ :root { /* Spacing (4px base step) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --radius-circle: 50%; /* Type scale */ --fs-2xs: 0.65rem; --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-md: 0.95rem; --fs-base: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.5rem; /* Minimum interactive hit area (WCAG 2.5.5) */ --tap-min: 44px; /* Z-index scale */ --z-base: 1; --z-sticky: 100; --z-overlay: 1000; --z-modal: 2000; --z-toast: 3000; } [data-theme="dark"] { --bg-app: #121212; --bg-panel: #1e1e1e; --text-main: #e0e0e0; --text-muted: #aaaaaa; --border-color: #333; --shadow: rgba(0,0,0,0.5); --input-bg: #2d2d2d; --accent-color: #1c7ed6; --accent-rgb: 28, 126, 214; --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: dark; } [data-theme="cyberpunk"] { --bg-app: #050505; --bg-panel: #0d0d0d; --text-main: #00f3ff; --text-muted: #00ff9f; --border-color: #333; --shadow: 0 0 20px rgba(0, 243, 255, 0.15); --input-bg: #000000; --accent-color: #d600d6; --accent-rgb: 214, 0, 214; --font-main: 'JetBrains Mono', monospace; color-scheme: dark; } /* Accent presets — override only the accent, on top of any theme. Set via Theme.setAccent(). */ [data-accent="aurora"] { --accent-color: #14b8a6; --accent-rgb: 20, 184, 166; } [data-accent="cyberpunk"] { --accent-color: #d946ef; --accent-rgb: 217, 70, 239; } [data-accent="toxic"] { --accent-color: #22c55e; --accent-rgb: 34, 197, 94; } [data-accent="crimson"] { --accent-color: #ef4444; --accent-rgb: 239, 68, 68; } /* Theme-specific chrome tweaks (light-DOM only; moved verbatim from index.html). */ [data-theme="cyberpunk"] button { text-transform: uppercase; letter-spacing: 1px; } [data-theme="cyberpunk"] .card { border: 1px solid var(--border-color); box-shadow: 0 0 15px rgba(0, 243, 255, 0.1); }