Before:

After:

What

Adds [data-brand='codeai-next']-scoped styles to the DSCO Toggle component, per-component brand-override pattern from #73901 (Tags) / #74003 (Chips):

The ON side is the mode-inverted selected triple from the Figma component spec (background/state/selected/primary track, background/state/selected/primary-inverse thumb, text/state/selected/primary icon): brand track + seafoam thumb/icon in Light, seafoam track + navy thumb/icon in Dark. The OFF neutrals are the same-name tokens read off the Figma variants — one ramp step darker than legacy, which the name-for-name bridge cannot express.

Everything else resolves correctly through the token bridge (#73701): the focus ring (legacy teal → --border-brand-primary, the CADS indigo), the disabled track fills (--background-neutral-disabled → --background-disabled-neutral), the label text, and the OFF/disabled thumb (white fixed).

Legacy brands render byte-identically — every new declaration sits under the [data-brand='codeai-next'] scope.

The missing thumb token

The Figma thumb token background/state/selected/primary-inverse is not in the colors_codeAi.css sandbox export yet. The thumb references it with a fallback:

background: var(--background-selected-primary-inverse, var(--text-selected-primary));

--text-selected-primary carries the identical value pair by design (the export documents that selected text always pairs with the selected background), so the rendering is correct today, and the reference self-heals when a sandbox re-export adds the token — same forward-compat pattern as var(--shape-sm, …) in #73901.

Cascade notes

Each override mirrors its legacy counterpart's selector plus the [data-brand] attribute — no !important. Verified against the compiled output:

• The ON-default override ties with the legacy hover rule, so hover (and pressed) are re-declared; block order mirrors the legacy cascade.
• The thumb override is scoped :checked:not(:disabled), so the disabled thumb stays white (per Figma).
• The legacy disabled fills outrank every fill override here, so disabled tracks stay on the bridge-mapped grays; only the disabled icon color is re-declared (it would otherwise inherit the ON recolor — which in Dark would put a navy icon on a dark gray track).
• Pressed borders blend into the fill: --border-selected-hover matches --background-selected-hover by design on the ON side; the OFF side has no matching border token, so its pressed border stays at the transparent base.

Deliberately not in this PR

• Sizing (the 2.625 × 1.375rem geometry / padding from the CADS spec) — same separate-pass plan as Tags/Chips.
• Icon-in-thumb: the CADS spec draws the check/× inside the thumb; legacy DSCO draws it on the track half. That is a structural (DOM/pseudo-element) redesign, not a color swap — flagged for the sizing/structure pass. The color pairing (seafoam-on-navy) is correct either way.

QA

• Storybook: Toggle story → Brand toolbar → "CodeAI · CADS"; walk ON/OFF × hover/focus/pressed/disabled, flip Light/Dark (ON side inverts to seafoam track + navy thumb by design). Back to code.org brand to confirm legacy is untouched.
• Dark-mode OFF is worth an eyeball: the neutral ramp inverts (septenary → gray-30), so the OFF track goes light with a white thumb — that's what the semantic tokens give; if design wants different Dark OFF neutrals it's a token-choice follow-up.
• Dashboard: any page with toggles + ?brand=codeai-next (needs DCDO brand-router-enabled); ?brand-reset=1 to clear.

Testing

• stylelint + prettier clean (pre-commit hook); dart-sass compile verified the emitted selectors and their specificity against the base rules.
• No JS/TSX changes; jest Toggle tests don't assert styles.

🤖 Generated with Claude Code