/* ============================================================ jellyroll-modes.css — light/dark values for the JellyRoll semantic token layer. ============================================================ WHY THIS FILE EXISTS SEPARATELY FROM jellyroll-tokens.css --------------------------------------------------------- `jellyroll-tokens.css` and `jellyroll-fonts.css` are regenerated verbatim from https://sl-design-team.github.io/jellyroll/ — see JELLYROLL-INTEGRATION.md, "Updating JellyRoll tokens". Anything authored in those two files is destroyed by the next `curl`. So they stay pristine, and everything we own lives in the three files we added: jellyroll-modes.css this file — what a colour means in each mode jellyroll-chrome.css sidebars, ToC, header, search jellyroll-content.css the document column The 10x10 colour ramps upstream are hue definitions and are mode-invariant. Only the *semantic* layer ("what is body text", "what is the canvas") is remapped here, so a JellyRoll version bump does not collide with our work. WHY THESE ARE DECLARED ON `body` AND NOT `:root` ------------------------------------------------ This is load-bearing, not stylistic. CSS resolves a var() against the value in scope *on the element carrying the declaration*, and children then inherit the already-substituted result. If the semantic tokens sat on `:root` (= html) while the dark flip landed on `body`, the flip would never reach them — html would substitute the light value and body would inherit that resolved colour. Keeping the mode variables and the semantics that consume them on the same element is what lets one small dark block repaint everything downstream. furo does exactly this, for exactly this reason. Consequence worth knowing: because these override upstream's `:root` declarations only for body's subtree, `html` itself keeps upstream's values. That is handled deliberately in jellyroll-chrome.css ("Canvas propagation"). */ /* ─── Mode variables — LIGHT (the default) ──────────────────── */ body { /* Content surfaces */ --jr-canvas: var(--sl-white); --jr-canvas-raised: var(--sl-white); --jr-canvas-sunken: var(--sl-grey-100); --jr-canvas-overlay: var(--sl-white); /* Ink */ --jr-ink: var(--sl-indigo-900); /* 16.86:1 on white */ --jr-ink-heading: var(--sl-indigo-900); /* 16.86:1 */ --jr-ink-subtle: var(--sl-grey-800); /* 5.94:1 — see note below */ --jr-ink-disabled: var(--sl-grey-600); /* Links. Hover is teal-700 rather than JellyRoll's default teal-600: teal-600 on white is 4.71:1, which clears AA by 0.21 and fails it outright against any tinted admonition background. teal-700 is 6.69:1 and is the same hue family, so the interaction still reads as JellyRoll teal. */ --jr-link: var(--sl-blue-600); /* 8.66:1 */ --jr-link-visited: var(--sl-blue-800); /* 13.88:1 */ --jr-link-hover: var(--sl-teal-700); /* 6.69:1 */ /* Borders */ --jr-border-subtle: var(--sl-grey-300); --jr-border-default: var(--sl-grey-400); --jr-border-strong: var(--sl-indigo-900); /* Inline code */ --jr-code-bg: var(--sl-grey-100); --jr-code-border: var(--sl-grey-300); /* Admonition tints */ --jr-tint-information: var(--sl-indigo-100); --jr-tint-warning: var(--sl-orange-100); --jr-tint-alert: var(--sl-red-100); --jr-tint-success: var(--sl-green-100); --jr-tint-discovery: var(--sl-purple-100); /* Text selection */ --jr-selection-bg: var(--sl-blue-200); --jr-selection-text: var(--sl-indigo-900); } /* ─── Mode variables — DARK ───────────────────────────────────── Two selectors, mirroring furo's own switching contract exactly: body[data-theme="dark"] explicit choice @media (prefers-color-scheme: dark) body:not([data-theme="light"]) following the OS Matching furo selector-for-selector matters. Both are specificity (0,1,1), the same as furo's, and this file loads after the theme stylesheet, so ours wins on source order in every combination of OS preference and explicit choice. Diverging here is how a theme ends up half-switched — which is the bug this whole asset set replaces. Only the ~20 mode variables flip. The ~50 semantic mappings below are declared once and follow automatically. */ body[data-theme="dark"] { --jr-canvas: var(--sl-indigo-1000); /* #0A0E1A */ --jr-canvas-raised: var(--sl-indigo-900); /* #131C35 */ --jr-canvas-sunken: var(--sl-blue-1000); /* #020D24 — deeper than canvas */ --jr-canvas-overlay: var(--sl-indigo-800); --jr-ink: var(--sl-grey-300); /* 13.97:1 on canvas */ --jr-ink-heading: var(--sl-grey-200); /* 16.43:1 */ --jr-ink-subtle: var(--sl-grey-500); /* 9.74:1 */ --jr-ink-disabled: var(--sl-grey-700); /* Visited moves to the purple ramp rather than a darker blue: on a dark canvas the blue-300/blue-500 pair is nearly indistinguishable, so "visited" would stop carrying information. purple-300 is 9.41:1 and stays inside the published ramps. */ --jr-link: var(--sl-blue-300); /* 9.12:1 */ --jr-link-visited: var(--sl-purple-300); /* 9.41:1 */ --jr-link-hover: var(--sl-teal-300); /* 11.04:1 */ --jr-border-subtle: var(--sl-indigo-800); --jr-border-default: var(--sl-indigo-700); --jr-border-strong: var(--sl-grey-600); --jr-code-bg: var(--sl-indigo-900); --jr-code-border: var(--sl-indigo-700); /* 900-step tints. The light 100-steps would glare on a dark canvas; these hold body ink at 5.98:1 (yellow, the worst) to 12.24:1. */ --jr-tint-information: var(--sl-indigo-900); --jr-tint-warning: var(--sl-orange-900); --jr-tint-alert: var(--sl-red-900); --jr-tint-success: var(--sl-green-900); --jr-tint-discovery: var(--sl-purple-900); --jr-selection-bg: var(--sl-blue-800); --jr-selection-text: var(--sl-grey-200); } @media (prefers-color-scheme: dark) { body:not([data-theme="light"]) { --jr-canvas: var(--sl-indigo-1000); --jr-canvas-raised: var(--sl-indigo-900); --jr-canvas-sunken: var(--sl-blue-1000); --jr-canvas-overlay: var(--sl-indigo-800); --jr-ink: var(--sl-grey-300); --jr-ink-heading: var(--sl-grey-200); --jr-ink-subtle: var(--sl-grey-500); --jr-ink-disabled: var(--sl-grey-700); --jr-link: var(--sl-blue-300); --jr-link-visited: var(--sl-purple-300); --jr-link-hover: var(--sl-teal-300); --jr-border-subtle: var(--sl-indigo-800); --jr-border-default: var(--sl-indigo-700); --jr-border-strong: var(--sl-grey-600); --jr-code-bg: var(--sl-indigo-900); --jr-code-border: var(--sl-indigo-700); --jr-tint-information: var(--sl-indigo-900); --jr-tint-warning: var(--sl-orange-900); --jr-tint-alert: var(--sl-red-900); --jr-tint-success: var(--sl-green-900); --jr-tint-discovery: var(--sl-purple-900); --jr-selection-bg: var(--sl-blue-800); --jr-selection-text: var(--sl-grey-200); } } /* ─── JellyRoll semantic layer, re-pointed at the mode variables ─── These names are upstream's; only their *source* changes. Anything already written against a `--color-*` token keeps working and becomes mode-aware for free. */ body { /* Surfaces */ --color-surface-primary: var(--jr-canvas); --color-surface-raised: var(--jr-canvas-raised); --color-surface-sunken: var(--jr-canvas-sunken); --color-surface-overlay: var(--jr-canvas-overlay); /* surface-navbar is intentionally NOT remapped. Upstream defines it as blue-1000 "global nav — deepest navy, always", and "always" is the point: it is the one surface that does not follow the mode. See jellyroll-chrome.css. */ /* Text. --color-text-subtle was the accessibility defect in the previous stylesheet: upstream points it at grey-700 (#7D8695), which is 3.67:1 on white and fails WCAG AA 1.4.3 for normal-size text. It is used for figure captions and the page footer, i.e. real prose. grey-800 (#5E6470) is 5.94:1 and is the next step on the same neutral ramp, so the visual intent — "quieter than body" — survives. */ --color-text-body: var(--jr-ink); --color-text-heading: var(--jr-ink-heading); --color-text-subtle: var(--jr-ink-subtle); --color-text-disabled: var(--jr-ink-disabled); --color-text-link: var(--jr-link); --color-text-link-hover: var(--jr-link-hover); --color-text-link-visited: var(--jr-link-visited); /* Borders */ --color-border-subtle: var(--jr-border-subtle); --color-border-default: var(--jr-border-default); --color-border-strong: var(--jr-border-strong); /* Admonition / status backgrounds */ --color-background-subtle: var(--jr-canvas-sunken); --color-background-information: var(--jr-tint-information); --color-background-warning: var(--jr-tint-warning); --color-background-alert: var(--jr-tint-alert); --color-background-success: var(--jr-tint-success); --color-background-discovery: var(--jr-tint-discovery); /* Selection */ --color-selection-bg: var(--jr-selection-bg); --color-selection-text: var(--jr-selection-text); }