/* ========================================================================== COMMAND CENTER v2 - SHELL ROLES (layer 3) -------------------------------------------------------------------------- Load order for v2, and it is load-bearing: 1. ../brand/brand.css brand primitives, layer 1 SHARED with v1 2. ../brand/tokens.css semantic tokens, layer 2 SHARED with v1 3. THIS FILE the roles v2 needs that layer 2 does not carry 4. v2.css component styles Layers 1 and 2 are the SAME FILES v1 serves. They are not copied. The v2 dev server maps /brand/* onto public/brand/, so colour and type have exactly one home on disk and a rebrand moves both trees at once. Every declaration below resolves through var() to a layer-1 primitive or a layer-2 semantic token. No hex value is introduced here, and none may be. PARKED FOR IRIS. These 21 roles plus --topbar-h are candidates for tokens.css. They carried a --mock- prefix in the approved mock and are renamed --v2- here; the values and the contrast measurements carry over verbatim. If Iris adopts them into layer 2, this file drops to nothing and v2.css keeps working through the same names. ========================================================================== */ :root { /* The top bar and the sticky header offset are the SAME number. Hardcoding 58px against a bar that renders 71px slid 13px of the header under it, and sliced 41.7% of the line-one label band at compact. */ --topbar-h: 71px; /* --- CTA fill, darkened for v2 only. Ruling 8n6. --------------------- tokens.css sets --surface-cta to --rbi-green-500 and records the number it costs: white ink on that fill is 3.10:1 against a 4.5:1 requirement, an SC 1.4.3 failure accepted there in exchange for matching the brand owner's live confirm controls. That file also names the way out in advance - "the escape hatch is ONE line: point --surface-cta at --rbi-green-700" - and this is that line, taken here so v1 keeps the specified green. tokens.css is SHARED on disk; editing it would darken v1's CTA too, which 8n6 does not ask for. MEASURED, not carried over. Foreground is --on-surface-cta, which is --rbi-white on both fills: resting -700 white 5.42:1 PASS 4.5:1 at 13px/600 (was 3.10:1, FAIL) hover -800 white 6.71:1 PASS The two fills stand 1.238:1 apart. The house's own neutral hover step, --color-surface to --color-surface-2 on every other .btn, is 1.125:1 light and 1.181:1 dark, so this pair separates further than any hover already shipping here. THE HOVER RUNG NEEDED A CASCADE FIX BEFORE IT COULD PAINT, and it predates this ruling: it erased the green with --rbi-green-500 too. v2.css .savebar .btn:hover carries three classes and outranked both .savebar .btn--primary and .btn--primary:hover, which carry two each, so hovering Save replaced the fill with --v2-onbrand-hover, a 14% white wash over the save-bar pill measuring #414A70 light and #495683 dark. Closed by .savebar .btn--primary:hover, which ties at three classes and wins on source order. Both numbers above are now read off a live hovered element. THE ONE NUMBER THAT GOES THE WRONG WAY, recorded rather than hidden. v2's only .btn--primary is the save bar's Save, and it sits on the --surface-brand pill rather than on --color-surface. As a graphical object against that pill the fill falls from 4.27:1 to 2.44:1 on light and from 3.39:1 to 1.94:1 on dark, which is under SC 1.4.11's 3:1. The button is still identified by its white label at 5.42:1, and its sibling Discard already carries no fill at all, so the boundary is not the mechanism that names either control here. RESTATED IN THE DARK BLOCK, and that is deliberate. The CTA family is theme-invariant in layer 2, so an override written once at :root would in fact hold. It is written twice because a reader who changes one canvas must see the other, and because a later dark-only CTA token in tokens.css would otherwise silently outrank this file's single line. */ --surface-cta: var(--rbi-green-700); --surface-cta-hover: var(--rbi-green-800); /* --- v2 shell roles. Every value is a var(), never a literal. -------- The rail is a dark canvas in BOTH themes, so its ink, its selected fill and its focus ring are measured against the RAIL and never against --color-surface. That is what makes them roles instead of reuses. */ --v2-rail-bg: var(--rbi-navy-800); --v2-rail-bg-2: var(--rbi-navy-900); --v2-rail-ink: color-mix(in srgb, var(--rbi-white) 78%, transparent); --v2-rail-ink-mute: color-mix(in srgb, var(--rbi-white) 52%, transparent); /* -400 rather than -500. The selected pill is a state indicator, so SC 1.4.11 asks 3:1 against the fill behind it. -500 measured 1.90:1 on this rail and -400 measures 4.50:1. The ink flips to the deepest navy with it. */ --v2-rail-active: var(--rbi-blue-400); --v2-rail-active-ink: var(--rbi-navy-900); /* --focus-ring is tuned to the light PAGE canvas and measures 2.14:1 here. GL-003 s2.1b and s2.1c set the precedent for a canvas-specific ring with --focus-ring-on-brand and --focus-ring-on-cta. This is the rail one. */ --v2-rail-focus-ring: var(--rbi-blue-300); --v2-rail-hover: color-mix(in srgb, var(--rbi-white) 8%, transparent); --v2-rail-rule: color-mix(in srgb, var(--rbi-white) 12%, transparent); --v2-zebra: color-mix(in srgb, var(--rbi-navy-700) 2.5%, transparent); --v2-cell-hover: color-mix(in srgb, var(--rbi-blue-500) 6%, transparent); --v2-dirty: var(--rbi-blue-500); --v2-topbar: var(--color-surface); --v2-readonly-bg: color-mix(in srgb, var(--rbi-warm-500) 7%, transparent); /* Rungs the bridge was missing, which is why eleven component rules were still reading --rbi-white and --rbi-blue-500 directly. Full-strength rail ink, the two badge fills, the avatar pair, and the two on-brand mixes the save bar needs. AN EARLIER VERSION OF THIS NOTE CLAIMED NO VALUE MOVED. Two did, both in the DARK block, and a pixel comparison found them: --v2-rail-ink-strong went from --rbi-white to --color-text-strong, and --v2-rail-badge from white at 14% to --color-text at 14%. That is 588 pixels across the wordmark, the user name and the inactive nav badge. The change is deliberate and it is an improvement, because those two now read the dark ink ladder rather than pure white, but it is a change and the note said otherwise. Measured after it: wordmark 9.69:1, badge ink 5.58:1. The light block is unchanged from what was inline. */ --v2-rail-ink-strong: var(--rbi-white); --v2-rail-badge: color-mix(in srgb, var(--rbi-white) 14%, transparent); /* LIGHTENS the pill, where the dark block darkens it, and the asymmetry is the point rather than an oversight. A badge has to step AWAY from the fill under it in whichever direction raises the ink contrast. The light pill is --rbi-blue-400 and the ink is --rbi-navy-900, so darkening it drove the pair to 3.75:1 and failed SC 1.4.3 at 11px bold. Lightening 18% measures 6.65:1. The dark pill is --rbi-blue-300, lighter to begin with, so the darkening mix is correct there and reads 6.08:1 unchanged. */ --v2-rail-badge-active: color-mix(in srgb, var(--rbi-white) 18%, transparent); --v2-avatar-bg: var(--rbi-blue-500); --v2-avatar-ink: var(--rbi-white); --v2-onbrand-border: color-mix(in srgb, var(--on-surface-brand) 30%, transparent); --v2-onbrand-hover: color-mix(in srgb, var(--on-surface-brand) 14%, transparent); } [data-theme="dark"] { /* Ruling 8n6, restated. Same two rungs and the same measured pair as the :root block above; see it for the numbers and for why they are written twice rather than once. */ --surface-cta: var(--rbi-green-700); --surface-cta-hover: var(--rbi-green-800); /* The dark rail LIFTS off the canvas rather than sinking into it. #0B1C2E against --color-bg #0A1826 measured 1.04:1 and read as one continuous field. The canvas already sits near the floor of the ladder, so the only direction with room in it is up. -600 measures 1.70:1, which is the same move --surface-brand makes between themes for the same reason. */ --v2-rail-bg: var(--rbi-navy-600); --v2-rail-bg-2: var(--rbi-navy-700); --v2-rail-ink: color-mix(in srgb, var(--color-text) 90%, transparent); --v2-rail-ink-mute: color-mix(in srgb, var(--color-text) 72%, transparent); --v2-rail-active: var(--rbi-blue-300); --v2-rail-active-ink: var(--rbi-navy-900); --v2-rail-focus-ring: var(--rbi-blue-300); --v2-rail-hover: color-mix(in srgb, var(--rbi-white) 6%, transparent); --v2-rail-rule: color-mix(in srgb, var(--rbi-white) 9%, transparent); --v2-zebra: color-mix(in srgb, var(--rbi-white) 3%, transparent); --v2-cell-hover: color-mix(in srgb, var(--rbi-blue-300) 9%, transparent); --v2-dirty: var(--rbi-blue-300); --v2-topbar: var(--color-surface); --v2-readonly-bg: color-mix(in srgb, var(--rbi-white) 3.5%, transparent); --v2-rail-ink-strong: var(--color-text-strong); --v2-rail-badge: color-mix(in srgb, var(--color-text) 14%, transparent); --v2-rail-badge-active: color-mix(in srgb, var(--v2-rail-active-ink) 18%, transparent); /* The avatar keeps the light values on purpose: it is a filled brand circle rather than a themed surface, and white on -500 measures 7.70:1 on both canvases. Naming it changes no pixel; it removes the layer skip. */ --v2-avatar-bg: var(--rbi-blue-500); --v2-avatar-ink: var(--rbi-white); --v2-onbrand-border: color-mix(in srgb, var(--on-surface-brand) 30%, transparent); --v2-onbrand-hover: color-mix(in srgb, var(--on-surface-brand) 14%, transparent); }