/** * @ischemaview/apps-ui — Theme System * * CSS custom properties for 9 named themes + utility classes. * Set via data-theme attribute on . Persists to localStorage. * * Usage: * @import '@ischemaview/apps-ui/theme'; * — or — * * * Available themes: * light, github-dark, midnight, nord, dracula, ocean, solarized, rose, forest * * Variables per theme: * --bg-primary, --bg-secondary, --bg-tertiary * --border, --text-primary, --text-secondary, --text-muted * --accent, --accent-glow * --green, --green-glow, --yellow, --yellow-glow * --red, --red-glow, --purple, --purple-glow * --radius, --shadow, --header-bg, --chart-text, --tooltip-bg */ /* ── Default (light fallback) ── */ :root { --bg-primary: #F9FAFB; --bg-secondary: #FFFFFF; --bg-tertiary: #F3F4F6; --border: #E5E7EB; --text-primary: #111827; --text-secondary: #6B7280; --text-muted: #9CA3AF; --accent: #0066CC; --accent-glow: rgba(0,102,204,0.1); --green: #10B981; --green-glow: rgba(16,185,129,0.1); --yellow: #F59E0B; --yellow-glow: rgba(245,158,11,0.1); --red: #EF4444; --red-glow: rgba(239,68,68,0.1); --purple: #8B5CF6; --purple-glow: rgba(139,92,246,0.1); --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,0.1); --header-bg: var(--bg-secondary); --chart-text: #6B7280; --tooltip-bg: #FFFFFF; } /* ── Light (GitHub-style) ── */ [data-theme="light"] { --bg-primary: #f6f8fa; --bg-secondary: #ffffff; --bg-tertiary: #eef1f5; --border: #d1d9e0; --text-primary: #1f2328; --text-secondary: #59636e; --text-muted: #818b98; --accent: #0969da; --accent-glow: rgba(9,105,218,0.1); --green: #1a7f37; --green-glow: rgba(26,127,55,0.1); --yellow: #9a6700; --yellow-glow: rgba(154,103,0,0.1); --red: #d1242f; --red-glow: rgba(209,36,47,0.1); --purple: #8250df; --purple-glow: rgba(130,80,223,0.1); --shadow: 0 1px 4px rgba(0,0,0,.1); } /* ── GitHub Dark ── */ [data-theme="github-dark"] { --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #21262d; --border: #30363d; --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #6e7681; --accent: #58a6ff; --accent-glow: rgba(88,166,255,0.15); --green: #3fb950; --green-glow: rgba(63,185,80,0.15); --yellow: #d29922; --yellow-glow: rgba(210,153,34,0.15); --red: #f85149; --red-glow: rgba(248,81,73,0.15); --purple: #bc8cff; --purple-glow: rgba(188,140,255,0.15); --shadow: 0 2px 8px rgba(0,0,0,.3); --chart-text: #8b949e; --tooltip-bg: #21262d; } /* ── Midnight Blue ── */ [data-theme="midnight"] { --bg-primary: #1a1f2e; --bg-secondary: #222838; --bg-tertiary: #2a3142; --border: #364156; --text-primary: #e8ecf4; --text-secondary: #9ba4b5; --text-muted: #6e7a8e; --accent: #6ea8fe; --accent-glow: rgba(110,168,254,0.15); --green: #4cc764; --green-glow: rgba(76,199,100,0.15); --yellow: #e0a832; --yellow-glow: rgba(224,168,50,0.15); --red: #f76c6c; --red-glow: rgba(247,108,108,0.15); --purple: #c9a0ff; --purple-glow: rgba(201,160,255,0.15); --shadow: 0 2px 8px rgba(0,0,0,.25); --tooltip-bg: #2a3142; } /* ── Nord ── */ [data-theme="nord"] { --bg-primary: #2e3440; --bg-secondary: #3b4252; --bg-tertiary: #434c5e; --border: #4c566a; --text-primary: #eceff4; --text-secondary: #d8dee9; --text-muted: #81a1c1; --accent: #88c0d0; --accent-glow: rgba(136,192,208,0.15); --green: #a3be8c; --green-glow: rgba(163,190,140,0.15); --yellow: #ebcb8b; --yellow-glow: rgba(235,203,139,0.15); --red: #bf616a; --red-glow: rgba(191,97,106,0.15); --purple: #b48ead; --purple-glow: rgba(180,142,173,0.15); --radius: 12px; --shadow: 0 2px 8px rgba(0,0,0,.25); --tooltip-bg: #434c5e; } /* ── Dracula ── */ [data-theme="dracula"] { --bg-primary: #282a36; --bg-secondary: #2d2f3d; --bg-tertiary: #343746; --border: #44475a; --text-primary: #f8f8f2; --text-secondary: #c0bfcc; --text-muted: #6272a4; --accent: #8be9fd; --accent-glow: rgba(139,233,253,0.12); --green: #50fa7b; --green-glow: rgba(80,250,123,0.12); --yellow: #f1fa8c; --yellow-glow: rgba(241,250,140,0.12); --red: #ff5555; --red-glow: rgba(255,85,85,0.12); --purple: #bd93f9; --purple-glow: rgba(189,147,249,0.12); --shadow: 0 2px 8px rgba(0,0,0,.35); --tooltip-bg: #343746; } /* ── Ocean ── */ [data-theme="ocean"] { --bg-primary: #0f1923; --bg-secondary: #152232; --bg-tertiary: #1c2d40; --border: #2a4058; --text-primary: #dce8f5; --text-secondary: #8ba5c2; --text-muted: #5e7d9e; --accent: #4db8ff; --accent-glow: rgba(77,184,255,0.15); --green: #48d9a4; --green-glow: rgba(72,217,164,0.15); --yellow: #ffc857; --yellow-glow: rgba(255,200,87,0.15); --red: #ff6b6b; --red-glow: rgba(255,107,107,0.15); --purple: #a78bfa; --purple-glow: rgba(167,139,250,0.15); --shadow: 0 2px 8px rgba(0,0,0,.3); --tooltip-bg: #1c2d40; } /* ── Solarized ── */ [data-theme="solarized"] { --bg-primary: #fdf6e3; --bg-secondary: #fefbf2; --bg-tertiary: #eee8d5; --border: #d6cdb3; --text-primary: #073642; --text-secondary: #586e75; --text-muted: #93a1a1; --accent: #268bd2; --accent-glow: rgba(38,139,210,0.1); --green: #859900; --green-glow: rgba(133,153,0,0.1); --yellow: #b58900; --yellow-glow: rgba(181,137,0,0.1); --red: #dc322f; --red-glow: rgba(220,50,47,0.1); --purple: #6c71c4; --purple-glow: rgba(108,113,196,0.1); --shadow: 0 1px 4px rgba(0,0,0,.08); --tooltip-bg: #fefbf2; } /* ── Rosé ── */ [data-theme="rose"] { --bg-primary: #faf4f8; --bg-secondary: #ffffff; --bg-tertiary: #f5edf2; --border: #e4d5de; --text-primary: #2d1f29; --text-secondary: #6b5365; --text-muted: #99849a; --accent: #d63384; --accent-glow: rgba(214,51,132,0.08); --green: #1a7f37; --green-glow: rgba(26,127,55,0.1); --yellow: #9a6700; --yellow-glow: rgba(154,103,0,0.1); --red: #cf222e; --red-glow: rgba(207,34,46,0.1); --purple: #8250df; --purple-glow: rgba(130,80,223,0.1); --shadow: 0 1px 4px rgba(0,0,0,.08); --tooltip-bg: #ffffff; } /* ── Forest ── */ [data-theme="forest"] { --bg-primary: #1a2118; --bg-secondary: #222b1f; --bg-tertiary: #2b3628; --border: #3d4a38; --text-primary: #e0eadb; --text-secondary: #a3b59a; --text-muted: #6e8566; --accent: #7cc474; --accent-glow: rgba(124,196,116,0.15); --green: #8fd685; --green-glow: rgba(143,214,133,0.15); --yellow: #dbc67b; --yellow-glow: rgba(219,198,123,0.15); --red: #e87272; --red-glow: rgba(232,114,114,0.15); --purple: #b49ddb; --purple-glow: rgba(180,157,219,0.15); --shadow: 0 2px 8px rgba(0,0,0,.3); --tooltip-bg: #2b3628; } /* ══════════════════════════════════════════════════════════ Utility Classes ══════════════════════════════════════════════════════════ */ body { background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.2s, color 0.2s; } .card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .badge-success { background: var(--green-glow); color: var(--green); } .badge-warning { background: var(--yellow-glow); color: var(--yellow); } .badge-danger { background: var(--red-glow); color: var(--red); } .badge-info { background: var(--accent-glow); color: var(--accent); } .btn-accent { background-color: var(--accent); color: #fff; border-radius: var(--radius); transition: opacity 0.15s; } .btn-accent:hover { opacity: 0.9; } .btn-accent:disabled { opacity: 0.5; } .btn-secondary { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.2s; } .btn-secondary:hover { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }