Chips: codeai-next (CADS) brand styles#74003
Conversation
Brand-scoped override block for the states the token bridge cannot express: the checked chip moves to the dedicated mode-inverted selected-state token pair (instead of the bridge's brand-ramp mapping of the legacy teal tokens), the pressed fill moves to brand-light, and the disabled+checked label uses the disabled-inverse token. Legacy brands render byte-identically; every declaration sits under [data-brand='codeai-next']. Follows the reference pattern from the Tags PR (#73901). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
🖼️ Storybook Visual Comparison Report✅ No Storybook eyes differences detected! |
There was a problem hiding this comment.
Pull request overview
Adds CodeAI (CADS) brand-specific styling overrides for the DSCO Chips component under [data-brand='codeai-next'], following the established per-component brand override pattern so legacy brands remain byte-identical while CADS checked/pressed/disabled-checked states use CADS semantic tokens.
Changes:
- Introduces a
[data-brand='codeai-next']-scoped override block inchip.module.scss. - Updates CADS-specific visual treatments for pressed (unchecked), selected, selected-hover/pressed, and selected-disabled chip states using CADS semantic tokens.
- Documents cascade/specificity intent in SCSS comments to mirror legacy selector structure without
!important.
Review hardening: the 2px inset outline already paints over the 1px border in the pressed state, so no mismatch was visible, but making the border take the same token removes the reliance on that subtlety (and any anti-aliased sliver on the pill's curved corners). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Re the Eyes report: the diffs are all in the markdown package's e2e visual tests (basic/sanitization/callout/inline-styles), which this PR doesn't touch — the same |
Before:
After:
Vertical alignment is a known issue, will be dealt with separately.
What
Adds
[data-brand='codeai-next']-scoped styles to the DSCO Chips component, per-component brand-override pattern from #73901 (Tags):code/codeai)codeai-next(this PR)--background-brand-teal-primary--background-brand-primary(purple-50)--background-selected-primary--borders-brand-teal-primary--border-brand-primary--border-selected-primary--text-neutral-white-fixed(always white)--text-selected-primary--background-brand-teal-strong--background-brand-strong--background-selected-hover(+ matching border/outline)--background-neutral-tertiary--background-brand-light--text-disabled-neutral-inverse(white in Light, black in Dark)The selected state is the mode-inverted, cross-family pair from
colors_codeAi.css(brand fill + seafoam text in Light; seafoam fill + navy text in Dark) — matches the Figma component spec, which inspects tobackground/state/selected/primary+text/state/selected/primary.Everything else resolves correctly through the token bridge (#73701) with no per-component work: default white fill + solid/secondary borders (primary vs secondary chip variants), neutral-tertiary hover, the focus ring and pressed inset outline (legacy teal →
--border-brand-primary, the CADS indigo), and the unchecked disabled treatment.Legacy brands render byte-identically — every new declaration sits under the
[data-brand='codeai-next']scope.Cascade notes
Each override mirrors its legacy counterpart's selector, so it outranks it by exactly the
[data-brand]attribute — no!important. Two subtleties, both commented in the SCSS:outline-coloronly, so the legacyoutline: noneon disabled chips still wins on style.Deliberately not in this PR
--spacing-p-*padding ramp from the CADS spec) — same separate-pass plan as Tags.--shape-round), and the legacy100pxradius already renders that — nothing to override.QA
?brand=codeai-next(needs DCDObrand-router-enabled);?brand-reset=1to clear.Testing
🤖 Generated with Claude Code