/* * NightBuilds shared theme tokens - consumed by every Backoffice/API admin surface via * _content/NightBuilds.Branding/tokens/theme.css. Consolidates what used to be two * separate, conflicting per-repo files (themes.css + global.css) into one canonical set. * * Layers, in cascade order: * 1. raw color/font primitives (inlined below - source of truth is palette.css in this * same folder; kept as a separate file for palette-extraction tooling/docs, but its * values are duplicated here rather than @import-ed, since @import is unreliable * across browsers/loading contexts for RCL-served static assets - a real, reproduced * failure: the @import rule (and the following rule) silently vanished from the * parsed stylesheet in testing, with no failed network request and no console error. * If you edit a --nb-* value, update palette.css too so they don't drift. * 2. light/dark/high-contrast base - sets every token consumers reference * 3. brand-swatch axis (data-brand-theme) - independent of light/dark, overrides --primary-* * 4. per-service hook (data-service) - extension point, empty today (see CLAUDE.md) * * Consuming apps should NOT redefine the --primary- / --bg- / --text- / --border- / * --shadow- token families locally - only add genuinely page/component-specific rules in * their own CSS. * * NEVER write a star glob immediately followed by a slash anywhere in a comment in this * file - those two characters are the comment terminator. The line above used to spell the * token families as globs ("--primary-" star slash "--bg-" star slash ...), which ended this * comment several lines early and left the rest of its own text to be parsed as a selector, * one that then swallowed the whole next rule. That is the real reason the "first rule of * this file always disappears" behaviour existed; see the note below. */ /* The ":where(.nb-theme-css-parse-sentinel)" sacrificial rule that used to sit here is GONE (2026-08-21), and so is the behaviour it existed to absorb. Its comment recorded that "whatever rule is physically first in this file is dropped from the parsed CSSOM", root cause unidentified, reproduced in both headless and real Chrome. The observation was accurate; the diagnosis was not. Nothing was being dropped by the browser. The header comment above used to contain a token glob ending in a star, followed immediately by a slash ("--primary-" star, then slash, then "--bg-"). Those two characters ARE the comment terminator, so the comment ended there and the remainder of its own text was parsed as a SELECTOR - and a selector consumes input until its block, swallowing whichever rule came next. It reproduced everywhere because it is correct CSS parsing, not a quirk. The sentinel worked only by donating its own empty block for that garbage selector to eat. With the comment fixed, the first real rule below parses normally. If a rule here ever seems to "disappear" again, look for a "*" immediately before a "/" in a comment above it before suspecting the browser. */ :root, [data-theme="light"] { /* Tells the browser which native palette to render its own widget chrome in - select arrows, / picker icons and spinners, the autofill highlight, scrollbars - none of which app CSS can otherwise reach. Without this, the browser guesses from the OS preference regardless of which theme is actually active, so on a device with a dark OS preference every native control rendered dark chrome (near-invisible icons/text) even while the light theme's own white background was showing - and the reverse happened for dark theme's native