/* Making the shell follow the site's theme. * * shell.js declares its palette on :root and uses it throughout, so theming the * tool is a matter of mapping its variables onto ours - fifteen of them. * * Order. SHELL_CSS is injected into when createShell() runs, which is * after every in the document, so a plain `:root { }` here would lose * the tie on document order. `:root:root` is specificity (0,2,0) against their * (0,1,0) and wins regardless of when either arrives - no JS, no injection * timing to get wrong. * * shell.js is now fully tokenised - roc-ops/ndv#19 routed its last eight colours * through variables - so for the shell this file is nothing but a mapping, and * no selector of theirs is re-specified here. * * devsel.js answers to variables too, and shell.js declares its set as well, so * the picker themes inside a shell and falls back to its own defaults when a * page uses createDevicePicker without one - which the DCIM export viewer does. * Both halves of roc-ops/ndv#19 are in, and this file re-specifies no selector * of theirs at all. */ :root:root { --bg: var(--pt-ground); --panel: var(--pt-surface); --line: var(--pt-line); --ink: var(--pt-ink); --dim: var(--pt-ink-muted); --accent: var(--pt-brass); --warn: var(--pt-warn); /* The eight roc-ops/ndv#19 added. Controls, the stage floor and the child indent, which used to need element-level overrides from here. */ --control: var(--pt-surface-2); --control-line: var(--pt-line); --control-hover: var(--pt-line-soft); --on-bg: var(--pt-brass-wash); --on-ink: var(--pt-brass); --stage: var(--pt-ground); --kid-line: var(--pt-line-soft); /* devsel.js's set, which shell.js declares too so the picker themes inside a shell and falls back to its own defaults standalone. --field is a step deeper than --control upstream (#1c1f23 against #23272c) - a picker field against a header control - so the relationship is kept rather than flattening both onto one surface. */ --field: var(--pt-surface); --field-line: var(--pt-line); --hint: var(--pt-ink-faint); --control-hover-line: var(--pt-brass-dim); /* --sel-ink is deliberately NOT mapped. It is a token now, but it paints the selected row's text over --hl, the highlight colour the user picks, so its #fff default is the right answer at any theme. Same reasoning keeps `#hl .sw` hard-coded in the shell. */ } /* NOT overridden, on purpose: `#hl .sw` and `.node.sel { color:#fff }` both sit over --hl, the highlight color the user picks. White over an arbitrary background is doing a real job there; a themed value would be worse. */