/* ds/palettes.css -- design system v2: the five palettes and the mana accents. Every value here is a LITERAL. ds/palettes-contrast.test.ts parses this file and checks 795 contrast pairs across every palette and accent, and it fails on any checked token it cannot evaluate, so never put a var(), calc() or color-mix() in a checked token here. Formulas that DERIVE from these values live in ds/tokens.css and are pinned by the same test. Spec: intent/site-looks-flat-and-unclickable/spec.md, sections 2.1 to 2.3. How a palette is chosen: the pre-paint script in shell/shell.html (and then shell/palette.js) stamps . Match my device is resolved to daylight or nightfall before it is stamped, so CSS only ever sees a concrete palette. A nested element may carry BOTH attributes to preview another palette; the derived tokens are re-declared there (ds/tokens.css). A lone data-mana is not a palette scope on purpose: the profile's accent buttons carry data-mana for their click handler. Specificity: palette and mana rules are (0,2,0) on the root and (0,1,0) or (0,2,0) on a nested scope. Solarized mana rules come LAST so they win ties. */ /* ── Palette: Nightfall (deep blue-slate, dark; also the no-attribute fallback) ── */ :root, :root[data-palette="nightfall"], [data-palette="nightfall"] { color-scheme: dark; --is-dark: 1; --well: #070b14; --bg: #0c1120; --panel: #121a2b; --raised: #1a2338; --raised-top: #212b44; --float: #27324e; --bg-hover: #212b44; --line: rgba(150, 172, 214, 0.11); --line-2: rgba(150, 172, 214, 0.28); --line-control: #717c92; --hi: rgba(255, 255, 255, 0.07); --edge: #04070d; --shade: rgba(0, 0, 0, 0.6); --shade-in: rgba(0, 0, 0, 0.7); --stage-top: #1b2640; --stage-bottom: #05080f; --scrim: rgba(3, 6, 12, 0.62); --knob-ring: 0 0 0 0 transparent; --text: #e8ecf5; --text-2: #afbace; --text-3: #8f9bb1; --success: #52c58c; --warning: #e7b24f; --danger: #ff8787; --info: #7db3ff; --acc-ink-l: 0.8; --acc-ink-cs: 1; } /* ── Palette: Graphite (neutral dark; where OLED users land) ── */ :root[data-palette="graphite"], [data-palette="graphite"] { color-scheme: dark; --is-dark: 1; --well: #09090a; --bg: #101113; --panel: #17181b; --raised: #1f2125; --raised-top: #282b30; --float: #30343a; --bg-hover: #282b30; --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.24); --line-control: #797d84; --hi: rgba(255, 255, 255, 0.06); --edge: #030304; --shade: rgba(0, 0, 0, 0.65); --shade-in: rgba(0, 0, 0, 0.75); --stage-top: #2a2d33; --stage-bottom: #050506; --scrim: rgba(0, 0, 0, 0.62); --knob-ring: 0 0 0 0 transparent; --text: #eeeff1; --text-2: #b8bbc2; --text-3: #999da5; --success: #5cc08d; --warning: #e0ae55; --danger: #fd8c8c; --info: #87b0ed; --acc-ink-l: 0.8; --acc-ink-cs: 1; } /* ── Palette: Daylight (cool porcelain, light) ── */ :root[data-palette="daylight"], [data-palette="daylight"] { color-scheme: light; --is-dark: 0; --well: #d3dae5; --bg: #e6eaf1; --panel: #f2f4f8; --raised: #ffffff; --raised-top: #ffffff; --float: #ffffff; --bg-hover: #e9edf4; --line: rgba(18, 30, 52, 0.11); --line-2: rgba(18, 30, 52, 0.2); --line-control: #717b8d; --hi: rgba(255, 255, 255, 0.95); --edge: #b4becd; --shade: rgba(20, 32, 58, 0.22); --shade-in: rgba(20, 32, 58, 0.18); --stage-top: #f7f9fc; --stage-bottom: #c9d1de; --scrim: rgba(3, 6, 12, 0.5); --knob-ring: 0 0 0 1px var(--line-control); --text: #101725; --text-2: #435066; --text-3: #525e74; --success: #006f41; --warning: #875500; --danger: #b52626; --info: #1c5cc0; --acc-ink-l: 0.46; --acc-ink-cs: 1; } /* ── Palette: Solarized Dark (Ethan Schoonover's base03 family, lifted for AA) ── */ :root[data-palette="solarized-dark"], [data-palette="solarized-dark"] { color-scheme: dark; --is-dark: 1; --well: #00212a; --bg: #002b36; --panel: #04303b; --raised: #0a3b48; --raised-top: #104552; --float: #124957; --bg-hover: #104552; --line: rgba(147, 161, 161, 0.14); --line-2: rgba(147, 161, 161, 0.3); --line-control: #7a9297; --hi: rgba(253, 246, 227, 0.08); --edge: #00151b; --shade: rgba(0, 12, 16, 0.62); --shade-in: rgba(0, 10, 14, 0.72); --stage-top: #0b4453; --stage-bottom: #00141a; --scrim: rgba(0, 12, 16, 0.62); --knob-ring: 0 0 0 0 transparent; --text: #eee8d5; --text-2: #b1bdbd; --text-3: #a8b6b7; --success: #b9cd47; --warning: #ecba3e; --danger: #ffaca3; --info: #83ceff; --acc-ink-l: 0.83; --acc-ink-cs: 0.7; } /* ── Palette: Solarized Light (base3 family) ── */ :root[data-palette="solarized-light"], [data-palette="solarized-light"] { color-scheme: light; --is-dark: 0; --well: #e4ddc7; --bg: #eee8d5; --panel: #f6f0de; --raised: #fdf6e3; --raised-top: #fffbf0; --float: #fffcf3; --bg-hover: #efe7cf; --line: rgba(88, 110, 117, 0.16); --line-2: rgba(88, 110, 117, 0.3); --line-control: #728081; --hi: rgba(255, 255, 255, 0.85); --edge: #cfc5a8; --shade: rgba(0, 43, 54, 0.2); --shade-in: rgba(0, 43, 54, 0.14); --stage-top: #fffbf0; --stage-bottom: #dcd3b8; --scrim: rgba(0, 43, 54, 0.45); --knob-ring: 0 0 0 1px var(--line-control); --text: #002b36; --text-2: #3f555c; --text-3: #465b62; --success: #566400; --warning: #7b5700; --danger: #b0231b; --info: #165f9d; --acc-ink-l: 0.45; --acc-ink-cs: 1; } /* ── Mana accents, standard hues. Hue, chroma, fill lightness on light and dark palettes, and the text color on a fill for each. G is the default. ── */ :root, :root[data-mana="G"], [data-palette][data-mana="G"] { --acc-h: 165; --acc-c: 0.12; --acc-l-light: 0.6; --acc-l-dark: 0.8; --on-acc-light: #06140f; --on-acc-dark: #06140f; } :root[data-mana="W"], [data-palette][data-mana="W"] { --acc-h: 80; --acc-c: 0.09; --acc-l-light: 0.62; --acc-l-dark: 0.84; --on-acc-light: #1e1808; --on-acc-dark: #1e1808; } :root[data-mana="U"], [data-palette][data-mana="U"] { --acc-h: 240; --acc-c: 0.13; --acc-l-light: 0.52; --acc-l-dark: 0.76; --on-acc-light: #ffffff; --on-acc-dark: #0b1020; } :root[data-mana="B"], [data-palette][data-mana="B"] { --acc-h: 305; --acc-c: 0.12; --acc-l-light: 0.5; --acc-l-dark: 0.76; --on-acc-light: #ffffff; --on-acc-dark: #0b1020; } :root[data-mana="R"], [data-palette][data-mana="R"] { --acc-h: 28; --acc-c: 0.17; --acc-l-light: 0.54; --acc-l-dark: 0.76; --on-acc-light: #ffffff; --on-acc-dark: #0b1020; } :root[data-mana="C"], [data-palette][data-mana="C"] { --acc-h: 250; --acc-c: 0.025; --acc-l-light: 0.52; --acc-l-dark: 0.8; --on-acc-light: #ffffff; --on-acc-dark: #0b1020; } /* ── Mana accents, Solarized hues (yellow, blue, violet, red, green, base01 grey). After the standard rules so they win at equal specificity. ── */ [data-palette^="solarized"][data-mana="W"] { --acc-h: 85.7; --acc-c: 0.134; --acc-l-light: 0.5; --acc-l-dark: 0.72; --on-acc-light: #fdf6e3; --on-acc-dark: #002b36; } [data-palette^="solarized"][data-mana="U"] { --acc-h: 244.9; --acc-c: 0.139; --acc-l-light: 0.5; --acc-l-dark: 0.72; --on-acc-light: #fdf6e3; --on-acc-dark: #002b36; } [data-palette^="solarized"][data-mana="B"] { --acc-h: 279.1; --acc-c: 0.126; --acc-l-light: 0.48; --acc-l-dark: 0.72; --on-acc-light: #fdf6e3; --on-acc-dark: #002b36; } [data-palette^="solarized"][data-mana="R"] { --acc-h: 27.1; --acc-c: 0.206; --acc-l-light: 0.52; --acc-l-dark: 0.72; --on-acc-light: #fdf6e3; --on-acc-dark: #002b36; } [data-palette^="solarized"][data-mana="G"], [data-palette^="solarized"]:not([data-mana]) { --acc-h: 118.6; --acc-c: 0.151; --acc-l-light: 0.5; --acc-l-dark: 0.72; --on-acc-light: #fdf6e3; --on-acc-dark: #002b36; } [data-palette^="solarized"][data-mana="C"] { --acc-h: 219.1; --acc-c: 0.028; --acc-l-light: 0.48; --acc-l-dark: 0.72; --on-acc-light: #fdf6e3; --on-acc-dark: #002b36; }