feat(switch): token mapping updates for s2-foundations

[marissahuysentruyt]

Description

• Switch theme overrides: The switch component now consumes --system-switch-* variables from the three system-theme-bridge files (Spectrum, Express, tokens-v2). switch-overrides.css maps these to --spectrum-switch-* on :host so track/handle colors, border colors, and background colors are theme-specific.
• Themed track border width: Introduced --spectrum-switch-border-width-themed (wired to --system-switch-border-width-themed) so the track border can differ by theme:
  • Spectrum & Express: --system-switch-border-width-themed: 0px (no track border; consistent borderless style).
  • Spectrum 2 (tokens-v2): --system-switch-border-width-themed: var(--spectrum-border-width-200) (visible track border for S2).
• spectrum-switch.css: Track border, handle size calc, and translate logic now use --mod-switch-border-width-themed / --spectrum-switch-border-width-themed instead of the previous border-width token where theme-specific behavior is required. Handle border remains on the global token for the handle’s own border.
• Bridge updates: All three bridges (tokens/spectrum, tokens/express, tokens-v2) define the same set of --system-switch-* tokens (handle border colors, track/handle backgrounds, disabled/emphasized states, border-width-themed). Spectrum and Express use 0px track border and theme-appropriate grays; tokens-v2 uses --spectrum-border-width-200 and lighter handle borders (e.g. gray-25).
• Bug fix: Corrected high-contrast token name in switch.css from --highcontrast-switch-handle-border-color-selelcted-down to --highcontrast-switch-handle-border-color-selected-down so forced-colors styling applies correctly for the selected-down state.

Motivation and context

• Align switch styling with Spectrum 2 design (track border, handle colors) while keeping Spectrum and Express borderless and visually consistent.
• Centralize theme-specific switch values in the system-theme-bridge layer so the component stays theme-agnostic and each theme (Spectrum, Express, Spectrum 2) can be updated independently.
• Fix the high-contrast typo so Windows High Contrast and forced-colors users see the correct handle border in the selected-down state.

Related issue(s)

• fixes SWC-1070

Screenshots (if appropriate)

N/A — styling only. Recommend comparing Switch in Storybook under Spectrum, Express, and Spectrum Two themes (default and emphasized, default and disabled).

---

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

---

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Switch in Spectrum theme

  1. Load 1st-gen Storybook with Spectrum theme.
  2. Open the Switch story; check default, emphasized, disabled, and checked states.
  3. Expect track with no border; handle and track colors match production Spectrum switch.

• Switch in Express theme

  1. Load 1st-gen Storybook with Express theme.
  2. Open the Switch story; check default, emphasized, disabled, and checked states.
  3. Expect track with no border; handle and track colors match production Express theme switch.

• Switch in Spectrum Two theme

  1. Load 1st-gen Storybook with Spectrum Two theme.
  2. Open the Switch story; check default, emphasized, disabled, and checked states.
  3. Expect track with visible border; handle and track colors match S2 design.

• High-contrast (forced-colors)

  1. Enable forced-colors (e.g. Windows High Contrast) or use devtools to simulate.
  2. Focus and activate a switch (selected-down state).
  3. Expect handle border to reflect the high-contrast selected-down token (typo fix).

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

Accessibility testing checklist

Required: Complete each applicable item and document your testing steps (replace the placeholders with your component-specific instructions).

• Keyboard (required — document steps below) — What to test for: Focus order is logical; Tab reaches the component and all interactive descendants; Enter/Space activate where appropriate; arrow keys work for tabs, menus, sliders, etc.; no focus traps; Escape dismisses when applicable; focus indicator is visible.

  1. Go to Switch story in 1st-gen Storybook.
  2. Tab to switch, activate with Space, toggle checked state.
  3. Expect focus ring visible and switch toggles correctly.

• Screen reader (required — document steps below) — What to test for: Role and name are announced correctly; state changes (e.g. expanded, selected) are announced; labels and relationships are clear; no unnecessary or duplicate announcements.

  1. Go to Switch story in 1st-gen Storybook.
  2. Focus switch and activate; listen for “switch” role and “checked”/“not checked” state.
  3. Expect role and state announced; label (slot or aria-label) announced.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8baaa4c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

📚 Branch Preview Links

• Documentation Site (first-gen)
• Storybook (first-gen)
• Storybook (second-gen)

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-6065

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.