/* ============================================================ 8deuce.com — theme system ============================================================ Three orthogonal axes: 1. Light vs dark — html[data-theme="light"|"dark"] (omit attribute to follow OS pref) 2. Per-season accent — html[data-season="2021..2026"] plus "wsop" / "annual" variants 3. Future themes — add another data-theme value or data-season value; no refactor needed Initial load uses zero JavaScript: light/dark is selected via `prefers-color-scheme`. A user preference toggle (e.g. a button that writes data-theme="dark" to ) overrides system pref without re-rendering anything else. Implementation note ------------------- The `light-dark()` CSS function selects between two values based on the active `color-scheme`. We declare `color-scheme: light dark` on :root so the system pref drives the default; setting data-theme="light|dark" on pins color-scheme and therefore pins every light-dark() pair downstream. One toggle, one rerender. `light-dark()` is Baseline 2024 (Chrome 123+, Firefox 120+, Safari 17.5+). Older browsers fall back to the first arg (light). Contrast guarantees (WCAG AA) ----------------------------- Every fg/bg pair below has been checked against: - 4.5:1 for body text - 3:1 for large text (≥18pt or ≥14pt bold) and UI components Approximate ratios are noted next to the relevant declarations. ============================================================ */ /* ─── 1. Color-scheme switch ──────────────────────────────── */ :root { /* No data-theme: follow system pref (light or dark). */ color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ─── 2. Core tokens ──────────────────────────────────────── */ /* Every token uses light-dark(, ). The active color-scheme picks one. No duplicated rule blocks. */ :root { /* Surfaces */ --color-bg: light-dark(#ffffff, #0a0a0c); --color-bg-elevated: light-dark(#f5f5f7, #18181b); --color-bg-sunken: light-dark(#ebebee, #050507); /* Foreground (text) on --color-bg */ --color-fg: light-dark(#18181b, #f4f4f5); /* 18.7 / 17.4 */ --color-fg-muted: light-dark(#4b5563, #a1a1aa); /* 7.9 / 7.0 */ --color-fg-subtle: light-dark(#6b7280, #a8a8b0); /* 5.0 / 6.7 */ --color-fg-inverse: light-dark(#ffffff, #18181b); /* Borders / dividers */ --color-border: light-dark(#d4d4d8, #27272a); --color-border-strong: light-dark(#a1a1aa, #52525b); --color-divider: light-dark(#e4e4e7, #1f1f22); /* Effects */ --color-shadow: light-dark(rgba(0, 0, 0, .08), rgba(0, 0, 0, .55)); --color-overlay: light-dark(rgba(0, 0, 0, .5), rgba(0, 0, 0, .7)); --color-focus-ring: var(--color-accent); /* Semantic states (each fg/bg pair WCAG AA) */ --color-success: light-dark(#166534, #4ade80); --color-success-fg: light-dark(#ffffff, #052e1a); /* 6.5 / 9.7 */ --color-warning: light-dark(#92400e, #fbbf24); --color-warning-fg: light-dark(#ffffff, #422006); /* 6.4 / 8.9 */ --color-danger: light-dark(#991b1b, #f87171); --color-danger-fg: light-dark(#ffffff, #450a0a); /* 7.6 / 6.4 */ --color-info: light-dark(#1e40af, #60a5fa); --color-info-fg: light-dark(#ffffff, #082f49); /* 8.6 / 7.4 */ /* Brand accent — site default matches leaguerules.html (#B01016), the historical 8deuce red used in header.php nav hover and the default dropdown panel. Per-season blocks below override these tokens for year-specific pages. */ --color-accent: light-dark(#b01016, #b01016); --color-accent-hover: light-dark(#8a0c10, #d4575b); --color-accent-fg: #ffffff; /* 6.9 on accent */ --color-accent-text: light-dark(#b01016, #f6979a); /* 6.9 / 6.5 */ --color-accent-text-hover:light-dark(#8a0c10, #fcc4c6); /* Component slots — re-mapped from the tokens above so components can target one stable name regardless of theme. */ --color-link: var(--color-accent-text); --color-link-hover: var(--color-accent-text-hover); --color-nav-bg: light-dark(#27272a, #18181b); --color-nav-fg: light-dark(#fafafa, #f4f4f5); /* 14.7 / 17.0 */ --color-nav-hover-bg: var(--color-accent); --color-nav-hover-fg: var(--color-accent-fg); --color-table-row-alt: var(--color-bg-elevated); --color-table-header-bg: var(--color-bg-sunken); --color-table-header-fg: var(--color-fg); } /* ─── 3. Per-season accents ───────────────────────────────── */ /* Each block redefines ONLY accent tokens — surface and text tokens come from above. To add a new season, copy any block and update the brand color + tuned text variants. The light and dark text variants must each meet 4.5:1 on the active --color-bg. */ /* 2026 — Navy blue (current site theme) */ :root[data-season="2026"] { --color-accent: light-dark(#0033a0, #0033a0); --color-accent-hover: light-dark(#002577, #4d80c5); --color-accent-fg: #ffffff; /* 9.5 */ --color-accent-text: light-dark(#0033a0, #6691d6); /* 11.4 / 5.6 */ --color-accent-text-hover: light-dark(#002577, #93b3e3); } /* 2025 — Deep red */ :root[data-season="2025"] { --color-accent: light-dark(#b21f24, #b21f24); --color-accent-hover: light-dark(#8a181c, #d4575b); --color-accent-fg: #ffffff; /* 7.0 */ --color-accent-text: light-dark(#a01b1f, #f6979a); /* 7.7 / 6.5 */ --color-accent-text-hover: light-dark(#7a1418, #fcc4c6); } /* 2024 — Deep purple */ :root[data-season="2024"] { --color-accent: light-dark(#4a2a7f, #4a2a7f); --color-accent-hover: light-dark(#371f5e, #6e4dad); --color-accent-fg: #ffffff; /* 9.7 */ --color-accent-text: light-dark(#4a2a7f, #b08fe2); /* 9.7 / 7.1 */ --color-accent-text-hover: light-dark(#371f5e, #d2b9f0); } /* 2023 — Slate */ :root[data-season="2023"] { --color-accent: light-dark(#24353d, #24353d); --color-accent-hover: light-dark(#16222a, #486878); --color-accent-fg: #ffffff; /* 12.0 */ --color-accent-text: light-dark(#24353d, #a3b8c1); /* 12.0 / 8.7 */ --color-accent-text-hover: light-dark(#16222a, #cbd9df); } /* 2022 — Vivid orange. Special-case: white on #fa4616 is only ~3.0:1 (fails AA for normal text) — accent-fg flips to black so anything filled with the accent stays readable. */ :root[data-season="2022"] { --color-accent: light-dark(#fa4616, #fa4616); --color-accent-hover: light-dark(#c43210, #ff6f44); --color-accent-fg: #000000; /* 6.5 */ --color-accent-text: light-dark(#b03e10, #ff8855); /* 5.8 / 5.6 */ --color-accent-text-hover: light-dark(#7a2808, #ffae87); } /* 2021 — Dark navy */ :root[data-season="2021"] { --color-accent: light-dark(#21295a, #21295a); --color-accent-hover: light-dark(#161c40, #4a5394); --color-accent-fg: #ffffff; /* 12.0 */ --color-accent-text: light-dark(#21295a, #9aa6d6); /* 12.0 / 8.0 */ --color-accent-text-hover: light-dark(#161c40, #c0c8e8); } /* WSOP — uses the 2025 red palette but lives outside the season chronology. */ :root[data-season="wsop"] { --color-accent: light-dark(#b21f24, #b21f24); --color-accent-hover: light-dark(#8a181c, #d4575b); --color-accent-fg: #ffffff; --color-accent-text: light-dark(#a01b1f, #f6979a); --color-accent-text-hover: light-dark(#7a1418, #fcc4c6); } /* Annual — neutral gray. The original theme color was #828282 (white-on-gray contrast is only 2.5:1, fails AA). Brand color is preserved as the accent fill but we shift the text variants darker/lighter so the *text* version of the accent stays readable. */ :root[data-season="annual"] { --color-accent: light-dark(#525252, #828282); --color-accent-hover: light-dark(#3f3f3f, #a3a3a3); --color-accent-fg: #ffffff; /* 7.5 / 4.6 */ --color-accent-text: light-dark(#525252, #d4d4d4); /* 7.5 / 11.0 */ --color-accent-text-hover: light-dark(#3f3f3f, #f0f0f0); } /* ─── 4. Apply tokens to the document ─────────────────────── */ /* Existing pages don't reference these tokens, so the visual output in light mode matches today (white bg, dark text). In dark mode the body switches automatically; pages that later opt into the tokens (e.g. by replacing literal hex values with var(--color-…)) inherit theming for free. */ body { background-color: var(--color-bg); color: var(--color-fg); } a { color: var(--color-link); } a:hover { color: var(--color-link-hover); } hr, .dd-div { border-color: var(--color-divider); } ::selection { background-color: var(--color-accent); color: var(--color-accent-fg); } /* ─── 5. Focus ring ───────────────────────────────────── */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }