/** * JerryTrades Theme Foundation v4 * ================================ * Single source of truth for all theme-aware color variables. * Load this file BEFORE all other CSS files in index.html. * * USAGE: * - Dark mode (default): No attribute needed, or data-theme="dark" on * - Light mode: data-theme="light" on * - Toggle in JS: document.documentElement.setAttribute('data-theme', 'light'|'dark') * * MIGRATION STRATEGY: * Component files already use patterns like var(--text-primary, #fallback). * Once this file loads first, those fallbacks become inert — the variable is always defined. * Hardcoded hex values can be migrated file-by-file to use these vars. * * NAMING CONVENTION: * --jt-* = App-level semantic tokens (surfaces, text, accents) * Component files can create scoped aliases: * --rm-bg-primary: var(--jt-bg-primary); (Roster Management) * --cb-t0: #4f4a8a; (Clipboard team colors — not themed) */ /* ================================================================ DARK THEME (Default) Based on Tailwind Slate palette — the app's primary dark surface system. ================================================================ */ :root, [data-theme="dark"] { /* ── Surfaces ──────────────────────────────────────────────── Ordered from deepest background to most elevated. Use --jt-bg-primary for page/app bg, --jt-bg-elevated for popovers. ────────────────────────────────────────────────────────────── */ --jt-bg-deep: #0f172a; /* slate-900 — deepest bg, modals overlay */ --jt-bg-primary: #1e293b; /* slate-800 — main app/header bg */ --jt-bg-secondary: #1f2937; /* gray-800 — card/panel bg */ --jt-bg-tertiary: #334155; /* slate-700 — input fields, hover states */ --jt-bg-elevated: #475569; /* slate-600 — raised elements, active states */ --jt-bg-hover: rgba(255, 255, 255, 0.05); /* universal subtle hover */ /* ── Borders ─────────────────────────────────────────────── */ --jt-border-primary: #334155; /* slate-700 — main dividers */ --jt-border-secondary: #475569; /* slate-600 — subtle separators */ --jt-border-muted: rgba(255, 255, 255, 0.06); /* faintest divider */ --jt-border-focus: #3b82f6; /* blue-500 — focus rings */ /* ── Text ────────────────────────────────────────────────── */ --jt-text-primary: #e2e8f0; /* slate-200 — body text, headings */ --jt-text-secondary: #94a3b8; /* slate-400 — labels, descriptions */ --jt-text-muted: #64748b; /* slate-500 — timestamps, hints */ --jt-text-disabled: #475569; /* slate-600 — disabled controls */ --jt-text-inverse: #111827; /* gray-900 — text on light surfaces */ /* ── Semantic Accent Colors ──────────────────────────────── */ --jt-accent-blue: #3b82f6; /* blue-500 — primary action, links */ --jt-accent-blue-hover: #60a5fa; /* blue-400 — hover/active */ --jt-accent-green: #10b981; /* emerald-500— success, positive delta */ --jt-accent-green-hover: #34d399; /* emerald-400 */ --jt-accent-red: #ef4444; /* red-500 — error, negative delta */ --jt-accent-red-hover: #f87171; /* red-400 */ --jt-accent-amber: #f59e0b; /* amber-500 — warning, caution */ --jt-accent-amber-hover: #fbbf24; /* amber-400 */ --jt-accent-purple: #7c3aed; /* violet-600 — Elite tier, premium */ --jt-accent-purple-hover: #a78bfa; /* violet-400 */ --jt-accent-indigo: #6366f1; /* indigo-500 — secondary accent */ /* ── Brand Gradients ─────────────────────────────────────── */ --jt-gradient-primary: linear-gradient(135deg, #059669 0%, #0d9488 50%, #0891b2 100%); --jt-gradient-elite: linear-gradient(135deg, #7c3aed, #a855f7); --jt-gradient-pro: linear-gradient(135deg, #0ea5e9, #3b82f6); --jt-gradient-success: linear-gradient(135deg, #10b981, #059669); --jt-gradient-warning: linear-gradient(135deg, #f59e0b, #d97706); --jt-gradient-danger: linear-gradient(135deg, #ef4444, #dc2626); --jt-gradient-indigo: linear-gradient(135deg, #6366f1, #8b5cf6); /* ── Modal / Overlay ─────────────────────────────────────── */ --jt-overlay-bg: rgba(0, 0, 0, 0.65); --jt-overlay-blur: blur(2px); --jt-modal-bg: #1e293b; --jt-modal-border: #334155; --jt-modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); /* ── Scrollbar ───────────────────────────────────────────── */ --jt-scrollbar-track: transparent; --jt-scrollbar-thumb: rgba(255, 255, 255, 0.15); --jt-scrollbar-hover: rgba(255, 255, 255, 0.25); --jt-scrollbar-width: 6px; /* ── Status Colors (unchanged across themes) ─────────────── */ --jt-status-live: #22c55e; --jt-status-complete: #6b7280; --jt-status-warning: #f59e0b; --jt-status-error: #ef4444; /* ── Injury Badge Colors (unchanged across themes) ───────── */ --jt-injury-q-bg: #fbbf24; --jt-injury-q-text: #000; --jt-injury-d-bg: #f97316; --jt-injury-d-text: #fff; --jt-injury-o-bg: #ef4444; --jt-injury-o-text: #fff; --jt-injury-i-bg: #dc2626; --jt-injury-i-text: #fff; --jt-injury-p-bg: #6b7280; --jt-injury-p-text: #fff; --jt-injury-s-bg: #4b5563; --jt-injury-s-text: #fff; /* ── Position Colors — Draft (dark bg) ───────────────────── */ --jt-pos-qb: rgba(139, 0, 0, 0.85); --jt-pos-rb: rgba(34, 139, 34, 0.85); --jt-pos-wr: rgba(0, 102, 204, 0.85); --jt-pos-te: rgba(255, 140, 0, 0.85); --jt-pos-k: rgba(128, 0, 128, 0.85); --jt-pos-def: rgba(75, 0, 130, 0.85); --jt-pos-dl: rgba(240, 101, 149, 0.85); --jt-pos-lb: rgba(255, 146, 43, 0.85); --jt-pos-db: rgba(32, 201, 151, 0.85); /* ── Position Colors — Roster (light/pastel bg) ──────────── */ --jt-pos-qb-light: #fabdbd; --jt-pos-rb-light: #d1fadd; --jt-pos-wr-light: #cfe0f6; --jt-pos-te-light: #fcfcca; --jt-pos-k-light: #faf5ff; --jt-pos-def-light: #e5e7eb; --jt-pos-dl-light: #f3f4f6; --jt-pos-lb-light: #e5e7eb; --jt-pos-db-light: #d1d5db; /* ── Position Badge Accent Colors (borders/outlines) ─────── */ --jt-pos-qb-accent: #dc2626; --jt-pos-rb-accent: #16a34a; --jt-pos-wr-accent: #2563eb; --jt-pos-te-accent: #ea580c; --jt-pos-k-accent: #9333ea; --jt-pos-def-accent: #6b7280; /* ── Trading Mode (purple-tinted dark surfaces) ──────────── */ --jt-trade-bg-deep: #1a1a2e; --jt-trade-bg-primary: #252542; --jt-trade-bg-secondary: #2d2d4a; --jt-trade-bg-elevated: #3d3d5c; --jt-trade-border: #3d3d5c; --jt-trade-border-muted: #2d2d4a; /* ══════════════════════════════════════════════════════════ BACKWARD-COMPATIBILITY ALIASES These map the OLD variable names (already used in component CSS with fallbacks) to the new --jt-* tokens. Once a component file is migrated to --jt-* names directly, the alias can be removed. ══════════════════════════════════════════════════════════ */ /* --- Surface aliases (used by roster_management, trading mode, etc.) --- */ --bg-primary: var(--jt-bg-primary); --bg-secondary: var(--jt-bg-secondary); --bg-tertiary: var(--jt-bg-tertiary); --bg-elevated: var(--jt-bg-elevated); --bg-hover: var(--jt-bg-hover); --secondary-bg: var(--jt-bg-secondary); --surface-color: var(--jt-trade-bg-deep); --surface-2: var(--jt-trade-bg-primary); --surface-3: var(--jt-trade-bg-secondary); --surface-raised: var(--jt-trade-bg-elevated); --card-bg: var(--jt-bg-secondary); --card-accent: var(--jt-accent-blue); --input-bg: var(--jt-bg-tertiary); /* --- Text aliases --- */ --text-primary: var(--jt-text-primary); --text-secondary: var(--jt-text-secondary); --text-muted: var(--jt-text-muted); --text3: var(--jt-text-disabled); /* --- Border aliases --- */ --border: var(--jt-border-primary); --border-color: var(--jt-border-primary); --border-hover: var(--jt-border-secondary); /* --- Accent aliases --- */ --accent: var(--jt-accent-blue); --accent-color: var(--jt-accent-blue); --accent-primary: var(--jt-accent-blue); --accent-gold: var(--jt-accent-amber); --primary-color: var(--jt-accent-green); /* --- Status aliases --- */ --success-color: var(--jt-accent-green); --warning-color: var(--jt-accent-amber); --error-color: var(--jt-accent-red); /* --- styles_v4.css :root migrations --- */ /* Brand colors (same in both themes — identity, not surface) */ --primary-gradient: var(--jt-gradient-primary); --primary-start: #059669; --primary-end: #0891b2; --primary-mid: #0d9488; /* Header surface (flips in light mode) */ --header-bg: var(--jt-bg-primary); --header-bg-hover: var(--jt-bg-tertiary); --header-border: var(--jt-border-primary); /* Panel surface */ --panel-bg: #f8f9fa; --panel-border: #e5e7eb; /* Table headers (flips in light mode) */ --table-header-bg: #4a5568; --table-header-dark: #2d3748; /* Position colors — Draft (dark bg, same both themes) */ --pos-qb-dark: var(--jt-pos-qb); --pos-rb-dark: var(--jt-pos-rb); --pos-wr-dark: var(--jt-pos-wr); --pos-te-dark: var(--jt-pos-te); --pos-k-dark: var(--jt-pos-k); --pos-def-dark: var(--jt-pos-def); --pos-dl-dark: var(--jt-pos-dl); --pos-lb-dark: var(--jt-pos-lb); --pos-db-dark: var(--jt-pos-db); /* Position colors — Roster (light pastel, same both themes) */ --pos-qb-light: var(--jt-pos-qb-light); --pos-rb-light: var(--jt-pos-rb-light); --pos-wr-light: var(--jt-pos-wr-light); --pos-te-light: var(--jt-pos-te-light); --pos-k-light: var(--jt-pos-k-light); --pos-def-light: var(--jt-pos-def-light); --pos-dl-light: var(--jt-pos-dl-light); --pos-lb-light: var(--jt-pos-lb-light); --pos-db-light: var(--jt-pos-db-light); /* Position border accents (same both themes) */ --pos-qb-border: var(--jt-pos-qb-accent); --pos-rb-border: var(--jt-pos-rb-accent); --pos-wr-border: var(--jt-pos-wr-accent); --pos-te-border: var(--jt-pos-te-accent); --pos-k-border: var(--jt-pos-k-accent); --pos-def-border: var(--jt-pos-def-accent); /* Status (same both themes) */ --status-live: var(--jt-status-live); --status-complete: var(--jt-status-complete); --status-warning: var(--jt-status-warning); --status-error: var(--jt-status-error); /* Transitions (not theme-dependent, but centralizing) */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; /* --- Light surface aliases (used in roster view) --- */ --bg-light-primary: #ffffff; --bg-light-secondary: #f9fafb; --bg-light-tertiary: #f3f4f6; --bg-light-elevated: #e5e7eb; --text-light-primary: #111827; --text-light-secondary: #4b5563; --text-light-muted: #6b7280; --border-light-color: #e5e7eb; /* ── On-dark surface tokens ───────────────────────────────── For elements that always sit on a dark background (purple subheader, gradient modal headers, etc.) regardless of the active theme. Easily overridable via user config for custom accent colors. */ --jt-on-dark-text: rgba(255, 255, 255, 0.88); --jt-on-dark-text-dim: rgba(255, 255, 255, 0.6); --jt-on-dark-text-bright: #fff; --jt-on-dark-bg: rgba(255, 255, 255, 0.08); --jt-on-dark-bg-hover: rgba(255, 255, 255, 0.18); --jt-on-dark-border: rgba(255, 255, 255, 0.25); --jt-on-dark-border-hover: rgba(255, 255, 255, 0.5); } /* ================================================================ LIGHT THEME Applied when is set. Flips surfaces/text; accents stay vibrant. ================================================================ */ [data-theme="light"] { /* ── Header/Panel surfaces for light mode ────────────────── */ --panel-bg: #ffffff; --panel-border: #d1d5db; --table-header-bg: #e5e7eb; --table-header-dark: #d1d5db; /* ── Surfaces ────────────────────────────────────────────── */ --jt-bg-deep: #f1f5f9; /* slate-100 */ --jt-bg-primary: #ffffff; --jt-bg-secondary: #f9fafb; /* gray-50 */ --jt-bg-tertiary: #f3f4f6; /* gray-100 */ --jt-bg-elevated: #e5e7eb; /* gray-200 */ --jt-bg-hover: rgba(0, 0, 0, 0.04); /* ── Borders ─────────────────────────────────────────────── */ --jt-border-primary: #e5e7eb; /* gray-200 */ --jt-border-secondary: #d1d5db; /* gray-300 */ --jt-border-muted: rgba(0, 0, 0, 0.06); --jt-border-focus: #3b82f6; /* ── Text ────────────────────────────────────────────────── */ --jt-text-primary: #111827; /* gray-900 */ --jt-text-secondary: #4b5563; /* gray-600 */ --jt-text-muted: #6b7280; /* gray-500 */ --jt-text-disabled: #9ca3af; /* gray-400 */ --jt-text-inverse: #f9fafb; /* gray-50 */ /* ── Accents (slightly deeper for light bg contrast) ──────── */ --jt-accent-blue: #2563eb; /* blue-600 */ --jt-accent-blue-hover: #3b82f6; --jt-accent-green: #059669; /* emerald-600 */ --jt-accent-green-hover: #10b981; --jt-accent-red: #dc2626; /* red-600 */ --jt-accent-red-hover: #ef4444; --jt-accent-amber: #d97706; /* amber-600 */ --jt-accent-amber-hover: #f59e0b; --jt-accent-purple: #6d28d9; /* violet-700 */ --jt-accent-purple-hover: #7c3aed; --jt-accent-indigo: #4f46e5; /* indigo-600 */ /* ── Gradients (stay vibrant) ─────────────────────────────── */ /* Gradients stay the same — they look fine on light bg too */ /* ── Modal / Overlay ─────────────────────────────────────── */ --jt-overlay-bg: rgba(0, 0, 0, 0.35); --jt-modal-bg: #ffffff; --jt-modal-border: #e5e7eb; --jt-modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.18); /* ── Scrollbar ───────────────────────────────────────────── */ --jt-scrollbar-thumb: rgba(0, 0, 0, 0.15); --jt-scrollbar-hover: rgba(0, 0, 0, 0.25); /* ── Trading Mode (light version — subtle warm gray) ─────── */ --jt-trade-bg-deep: #f8f7ff; --jt-trade-bg-primary: #f3f2fb; --jt-trade-bg-secondary: #ebebf7; --jt-trade-bg-elevated: #dddcf0; --jt-trade-border: #d1d0e4; --jt-trade-border-muted: #e5e4f2; /* ── Backward-compat surface aliases update automatically ── */ /* (They point to --jt-* vars which are now light values) */ /* ── Light-surface aliases swap in light mode ────────────── */ --bg-light-primary: #ffffff; --bg-light-secondary: #f9fafb; --bg-light-tertiary: #f3f4f6; --bg-light-elevated: #e5e7eb; --text-light-primary: #111827; --text-light-secondary: #4b5563; --text-light-muted: #6b7280; --border-light-color: #e5e7eb; } /* ================================================================ SHARED UTILITY CLASSES (theme-aware) These replace repeated patterns across component CSS files. ================================================================ */ /* ── Scrollbar (use on any scrollable container) ─────────────── */ .jt-scroll { scrollbar-width: thin; scrollbar-color: var(--jt-scrollbar-thumb) var(--jt-scrollbar-track); } .jt-scroll::-webkit-scrollbar { width: var(--jt-scrollbar-width); height: var(--jt-scrollbar-width); } .jt-scroll::-webkit-scrollbar-track { background: var(--jt-scrollbar-track); } .jt-scroll::-webkit-scrollbar-thumb { background: var(--jt-scrollbar-thumb); border-radius: 3px; } .jt-scroll::-webkit-scrollbar-thumb:hover { background: var(--jt-scrollbar-hover); } /* ── Injury Badges (shared across LDM, WPL, draft board, trade panels) ── */ .jt-injury { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 3px; font-size: 0.65rem; font-weight: 700; cursor: help; } .jt-injury.injury-q { background: var(--jt-injury-q-bg); color: var(--jt-injury-q-text); } .jt-injury.injury-d { background: var(--jt-injury-d-bg); color: var(--jt-injury-d-text); } .jt-injury.injury-o { background: var(--jt-injury-o-bg); color: var(--jt-injury-o-text); } .jt-injury.injury-i { background: var(--jt-injury-i-bg); color: var(--jt-injury-i-text); } .jt-injury.injury-p { background: var(--jt-injury-p-bg); color: var(--jt-injury-p-text); } .jt-injury.injury-s { background: var(--jt-injury-s-bg); color: var(--jt-injury-s-text); } /* ── Modal Overlay Base ──────────────────────────────────────── */ .jt-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--jt-overlay-bg); backdrop-filter: var(--jt-overlay-blur); -webkit-backdrop-filter: var(--jt-overlay-blur); z-index: 9999; display: flex; align-items: center; justify-content: center; } /* ── Tier Gradients as Background Classes ────────────────────── */ .jt-bg-elite { background: var(--jt-gradient-elite); } .jt-bg-pro { background: var(--jt-gradient-pro); } .jt-bg-success { background: var(--jt-gradient-success); } .jt-bg-warning { background: var(--jt-gradient-warning); } .jt-bg-danger { background: var(--jt-gradient-danger); }