/* v3-compat.css — the bridge off the retired v3 token names. TEMPORARY BY DESIGN. ============================================================================= HAND-AUTHORED. Not part of the design-system package; tools/vendor-cortex-ds.mjs refuses to overwrite it. Ticket CC-zvect2, epic CC-9fx210. Package pin: abb2fcb. WHY THIS EXISTS The app referenced 52 token names that v4 retired. Without this file, dropping the v3 stylesheet would leave all 52 undefined — and an undefined custom property does not error, it just renders wrong: no colour, no size, no spacing, on every surface that had not been migrated yet. This file makes the whole app render correctly the moment the v3 line is dropped, so screens can migrate one branch at a time instead of all at once. HOW IT WORKS, AND WHY ONE :root BLOCK IS ENOUGH FOR BOTH THEMES Each alias is declared as `--cx-old: var(--cx-new)`. A custom property's value is substituted at computed-value time on the element where it is declared — here, :root. The package's dark values are declared on `:root[data-theme="dark"]`, which is the SAME element, so when the app flips data-theme on the cascade re-resolves --cx-new on :root and every alias follows it automatically. There is deliberately no dark block below: adding one would freeze the aliases to whichever value was current when this file was written, which is the bug this construction avoids. HOW IT DIES B11 extends app/test/restyle-token-lint.mjs with a SHRINKING allowlist of files still permitted to reference these names. Each migration branch deletes its own files from that allowlist. When the allowlist is empty, this file is deleted. Do not add a name here to make a new screen work — new work uses v4 names. WHAT IS NOT HERE Nothing that v4 still defines. All 52 names below are genuinely retired; aliasing a name the package also defines would clobber the package's own value. ============================================================================= */ :root { /* ── Surfaces ──────────────────────────────────────────────────────────────── v3 had five surface steps; v4 has three. The three clean 1:1 rows first. */ --cx-bg: var(--cx-ground); --cx-surface-1: var(--cx-panel); --cx-surface-sunken: var(--cx-panel-sunken); /* v3 aliases-of-aliases — same targets, no judgment involved. */ --cx-surface-app: var(--cx-ground); --cx-surface-card: var(--cx-panel); --cx-surface-hover: var(--cx-panel-sunken); /* JUDGMENT — the settled three-step to two-step collapse. v4 has no token for the middle greys: --cx-surface-2 became a counter-surface RULE and --cx-surface-3 became wash-plus-ink-bar. Mapped to the nearest surviving step so nothing goes undefined. A spot that visibly loses a step gets a LOCAL fix in its own migration branch — never a change here, because a change here moves every other site with it. */ --cx-surface-2: var(--cx-panel-sunken); --cx-surface-3: var(--cx-line-2); /* JUDGMENT — v4 selection doctrine: a selected row is wash plus an ink bar plus weight, never a grey step. This keeps selection VISIBLE on unmigrated screens; the ink bar and weight arrive with each screen's own migration. */ --cx-surface-active: var(--cx-accent-wash); /* ── Borders ───────────────────────────────────────────────────────────────── */ --cx-border: var(--cx-line); --cx-border-soft: var(--cx-line-2); --cx-border-strong: var(--cx-line-strong); /* ── Text ─────────────────────────────────────────────────────────────────── v3 carried two naming schemes for the same three steps (text/text-2/text-muted and text-primary/text-secondary). Both collapse onto the v4 ink ramp. Note --cx-text-faint and --cx-text-muted both land on ink-3: v4 has three ink steps, not four, so the faint/muted distinction is not preserved. Anywhere that difference was load-bearing needs a local fix in its migration branch. */ --cx-text: var(--cx-ink); --cx-text-2: var(--cx-ink-2); --cx-text-muted: var(--cx-ink-3); --cx-text-faint: var(--cx-ink-3); --cx-text-primary: var(--cx-ink); --cx-text-secondary: var(--cx-ink-2); --cx-text-on-accent: var(--cx-ink-on-accent); /* ── Action ───────────────────────────────────────────────────────────────── v3 named the action colour four different ways. All four are the accent, which themes/candid.css sets to the Candid wine ramp. */ --cx-action-primary: var(--cx-accent); --cx-action-primary-hover: var(--cx-accent-hover); --cx-attention: var(--cx-accent); --cx-select-edge: var(--cx-accent); --cx-select-wash: var(--cx-accent-wash); /* ── Type sizes ───────────────────────────────────────────────────────────── THESE CHANGE SIZE ON PURPOSE. v4 re-cut the scale; the names map by ROLE, not by value, so text set in them resizes. Measured deltas, v3 -> v4: display 32px -> 60px the Home wordmark. The single biggest visual change in the whole compat layer — v4 makes it the one moment of scale in earnest. Screenshot-checked at 1440 and 390. h1 28px -> 25px h2 22px -> 18px h3 18px -> 14.5px body 14px -> 13.5px sm 12px -> 12px (unchanged) xs 11px -> 10.5px If a screen breaks at the new sizes it is fixed in that screen's branch. */ --cx-text-display: var(--cx-display); --cx-text-h1: var(--cx-h1); --cx-text-h2: var(--cx-h2); --cx-text-h3: var(--cx-h3); --cx-text-body: var(--cx-body); --cx-text-sm: var(--cx-sm); --cx-text-xs: var(--cx-xs); /* v4 has NO mono/figure SIZE — --cx-font-figure is a family, and the figure face is for display figures only, never rows or labels. So this one keeps v3's literal 13px rather than being aliased to a size that does not exist. Each call site decides at migration time whether it wanted --cx-sm or the figure face; until then nothing moves. */ --cx-text-mono: 13px; /* ── Font family ──────────────────────────────────────────────────────────── CHANGES THE TYPEFACE APP-WIDE: v3's Inter stack becomes v4's Figtree, which v4/fonts.css self-hosts. Intended — it is the point of loading the package's faces. */ --cx-font-sans: var(--cx-font); /* ── Weights ──────────────────────────────────────────────────────────────── Same four values (400/500/600/700). Note the v4 name is `semi`, not `semibold`. */ --cx-weight-regular: var(--cx-w-regular); --cx-weight-medium: var(--cx-w-medium); --cx-weight-semibold: var(--cx-w-semi); --cx-weight-bold: var(--cx-w-bold); /* ── Leading ──────────────────────────────────────────────────────────────── Suffixes match one for one. display 1.15 -> 1.02 and normal 1.5 -> 1.55 are the only value moves; snug and tight are identical. */ --cx-leading-display: var(--cx-lh-display); --cx-leading-normal: var(--cx-lh-normal); --cx-leading-snug: var(--cx-lh-snug); --cx-leading-tight: var(--cx-lh-tight); /* ── Tracking ─────────────────────────────────────────────────────────────── Suffixes match one for one. v4 tightens display (-0.02 -> -0.035em) and heading (-0.01 -> -0.015em), and opens the uppercase eyebrow (0.06 -> 0.09em). */ --cx-tracking-display: var(--cx-tr-display); --cx-tracking-heading: var(--cx-tr-heading); --cx-tracking-normal: var(--cx-tr-normal); --cx-tracking-wide: var(--cx-tr-wide); /* ── Motion ───────────────────────────────────────────────────────────────── fast and slow are identical; the base duration moves 160ms -> 140ms. These also pick up the package's reduced-motion block, which zeroes all three — behaviour the v3 tokens did not have, and an improvement we inherit for free. */ --cx-duration-fast: var(--cx-dur-fast); --cx-duration: var(--cx-dur); --cx-duration-slow: var(--cx-dur-slow); /* ── Shadows ──────────────────────────────────────────────────────────────── JUDGMENT, all four rows. v4 is the panel world: hairlines and radius carry the structure and almost nothing casts a shadow. The package's own ruling (2026-08-28) makes the chart card the one shadowed component, so these map to the nearest surviving role and get quieter, which is the intent. */ --cx-shadow-resting: var(--cx-shadow-card); --cx-shadow-raised: var(--cx-shadow-hover); --cx-shadow-panel: var(--cx-shadow-popover); /* --cx-shadow-accent was a copper glow under the v3 action button. v4 has no accent shadow and does not want one, so "no shadow" IS the answer here, not a near-miss. Routed through the package's own --cx-shadow-none rather than a literal `none`, for the same reason every other row above aliases instead of hardcoding: the package owns what its values mean, and a literal here would stop following it. */ --cx-shadow-accent: var(--cx-shadow-none); }