/* ========================================================================= Tide Forecast - shared theme token system ------------------------------------------------------------------------- Static, no build step. Two consumers: - dashboard/cross-market.html (inline styles read these tokens) - dashboard/index.html (emitted by src/audit/dashboard_index.py) Switch themes by setting . theme.js handles the picker + localStorage persistence. With no data-theme set, :root below is the DEFAULT and is byte-equivalent to the original cross-market.html token block, so today's look is unchanged. ------------------------------------------------------------------------- HOW TO ADD A THEME: copy a [data-theme] block, rename the id, change the color tokens, keep contrast >=4.5:1, then add the id to THEMES in theme.js. ------------------------------------------------------------------------- CONTRAST RULE (WCAG AA): for every theme, --ink, --dim and --dim-2 must be >=4.5:1 against BOTH that theme's --bg AND --panel. Signal colors (--edge/--warn/--halt/--indigo/--cyan) must be >=4.5:1 as text, or >=3:1 where used only as large/non-text accents. Worst-case computed ratios are noted in each block. ASCII only in this file. ========================================================================= */ /* ------------------------------------------------------------------------- DEFAULT THEME (named "terminal") - DO NOT change these values; they are the original look. Mirrored under :root so the page renders correctly even before theme.js runs (no-flash default). Worst-case contrast vs bg/panel: ink 11.42 dim 7.23 dim-2 6.17 edge 12.19 warn 10.24 halt 5.89 indigo 6.89 cyan 10.66 -> all >=4.5 PASS ------------------------------------------------------------------------- */ :root, [data-theme="terminal"]{ /* canvas + material */ --bg:#0a0e16; --bg-2:#0b0f17; --panel:#121826; --panel-2:#0e131f; --panel-3:#0c111b; --line:#1b2333; --line-2:#283248; --line-3:#323e58; /* signal semantics (unchanged meaning) */ --edge:#22f3a6; /* positive / tradeable */ --edge-deep:#0bd089; --warn:#ffb74a; /* stale / warning */ --halt:#ff5d5d; /* halt / fail-closed / danger */ --ink:#c7d0e0; /* neutral text */ --ink-bright:#eef3fb; --dim:#9aa6bd; /* dim text */ --dim-2:#8d99af; --indigo:#8b9aff; /* scan / neutral pipeline */ --cyan:#52d8ff; --edge-bg:rgba(34,243,166,0.08); --warn-bg:rgba(255,183,74,0.10); --halt-bg:rgba(255,93,93,0.10); --indigo-bg:rgba(139,154,255,0.10); --cyan-bg:rgba(82,216,255,0.10); --serif:"Fraunces", Georgia, serif; --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* type scale: hand-tuned, ~1.20-1.31 step (not a single ratio), anchored at --t-base 13.5px */ --t-xs:11px; --t-sm:12px; --t-base:13.5px; --t-md:16px; --t-lg:21px; --t-xl:27px; --t-2xl:34px; --t-3xl:44px; --t-4xl:58px; /* one radius philosophy: hairline panels are SQUARE-ish (4px), only true pills are round. no soft blobby cards. */ --r:4px; /* strict baseline grid unit */ --u:8px; } /* ------------------------------------------------------------------------- THEME: daylight - light almanac (warm off-white canvas, ink text, deep-but-vivid signals retuned for a LIGHT background). Color tokens only; fonts + type scale + radius + unit inherit default. Worst-case contrast vs bg/panel: ink 12.98 dim 5.62 dim-2 4.95 edge 4.52 warn 4.74 halt 5.42 indigo 7.19 cyan 5.04 -> all >=4.5 PASS ------------------------------------------------------------------------- */ [data-theme="daylight"]{ --bg:#f4efe6; --bg-2:#efe9dd; --panel:#fbf8f1; --panel-2:#f1ebdf; --panel-3:#e9e2d3; --line:#ddd4c2; --line-2:#cabfa8; --line-3:#b6a98e; --edge:#0a7d4f; /* positive / tradeable (dark green on light) */ --edge-deep:#0a6d44; --warn:#9a5b00; /* stale / warning (deep amber on light) */ --halt:#c0152a; /* halt / fail-closed / danger (deep red on light) */ --ink:#22282f; /* neutral text */ --ink-bright:#11161c; --dim:#52606f; /* dim text */ --dim-2:#5c6877; --indigo:#3f3fb0; /* scan / neutral pipeline */ --cyan:#0b6e8f; --edge-bg:rgba(10,125,79,0.12); --warn-bg:rgba(154,91,0,0.12); --halt-bg:rgba(192,21,42,0.10); --indigo-bg:rgba(63,63,176,0.10); --cyan-bg:rgba(11,110,143,0.10); } /* ------------------------------------------------------------------------- THEME: amber - amber-CRT (near-black canvas, amber primary, restrained green/red). Color tokens only; type/spacing inherit default. Worst-case contrast vs bg/panel: ink 13.12 dim 8.86 dim-2 7.98 edge 11.82 warn 10.92 halt 6.76 indigo 9.13 cyan 10.76 -> all >=4.5 PASS ------------------------------------------------------------------------- */ [data-theme="amber"]{ --bg:#0a0805; --bg-2:#0d0a06; --panel:#15100a; --panel-2:#100c07; --panel-3:#0c0905; --line:#2a2010; --line-2:#3a2c16; --line-3:#4d3a1d; --edge:#6fe39a; /* positive / tradeable (restrained green) */ --edge-deep:#52c87f; --warn:#ffb74a; /* stale / warning (amber, the house color) */ --halt:#ff6b5b; /* halt / fail-closed / danger (restrained red) */ --ink:#ffcf8f; /* neutral text (amber phosphor) */ --ink-bright:#ffe6c2; --dim:#d9a96a; /* dim text */ --dim-2:#cfa063; --indigo:#c9b27a; /* scan / neutral pipeline (amber-leaning neutral) */ --cyan:#e0c071; --edge-bg:rgba(111,227,154,0.10); --warn-bg:rgba(255,183,74,0.12); --halt-bg:rgba(255,107,91,0.12); --indigo-bg:rgba(201,178,122,0.10); --cyan-bg:rgba(224,192,113,0.10); } /* ------------------------------------------------------------------------- THEME: ice - cool slate/cyan dark variant. Color tokens only; type and spacing inherit default. Worst-case contrast vs bg/panel: ink 12.97 dim 7.31 dim-2 6.49 edge 10.72 warn 10.89 halt 6.44 indigo 8.45 cyan 10.45 -> all >=4.5 PASS ------------------------------------------------------------------------- */ [data-theme="ice"]{ --bg:#070b12; --bg-2:#091018; --panel:#101a28; --panel-2:#0c141f; --panel-3:#0a1019; --line:#1a2738; --line-2:#27374d; --line-3:#344860; --edge:#3fe0d8; /* positive / tradeable (teal) */ --edge-deep:#22c8c0; --warn:#ffc24a; /* stale / warning */ --halt:#ff6d7d; /* halt / fail-closed / danger */ --ink:#cfe0f0; /* neutral text */ --ink-bright:#eef6ff; --dim:#92aac4; /* dim text */ --dim-2:#88a0bb; --indigo:#8fb4ff; /* scan / neutral pipeline */ --cyan:#5fd6ff; --edge-bg:rgba(63,224,216,0.10); --warn-bg:rgba(255,194,74,0.10); --halt-bg:rgba(255,109,125,0.10); --indigo-bg:rgba(143,180,255,0.10); --cyan-bg:rgba(95,214,255,0.10); } /* ------------------------------------------------------------------------- Theme picker (rendered by theme.js into #theme-mount). Styled with the active theme's own tokens so it matches any theme. Minimal + accessible. ------------------------------------------------------------------------- */ .theme-picker{ display:inline-flex; align-items:center; gap:calc(var(--u)*0.75); font-family:var(--mono); font-size:var(--t-xs); letter-spacing:0.04em; color:var(--dim); } .theme-picker__select{ appearance:none; -webkit-appearance:none; font-family:var(--mono); font-size:var(--t-xs); line-height:1.4; color:var(--ink); background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--r); padding:calc(var(--u)*0.5) calc(var(--u)*2.25) calc(var(--u)*0.5) calc(var(--u)*1); /* caret drawn from --dim so it reads on every theme */ background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%), linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:calc(100% - 11px) 52%, calc(100% - 6px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; cursor:pointer; } .theme-picker__select:hover{ border-color:var(--line-3); } .theme-picker__select:focus-visible{ outline:2px solid var(--edge); outline-offset:2px; } /* native option list cannot inherit panel tokens on all platforms; force readable colors so daylight options are not white-on-white, etc. */ .theme-picker__select option{ color:var(--ink); background:var(--panel); }