feat(status-light)!: migrate status-light to s2 styles and second-gen architecture

[marissahuysentruyt]

Description

This PR migrates the status-light component to the second-generation architecture, creating a shared base class that both first-gen and second-gen implementations extend. This enables the component to work in both Spectrum 1 and Spectrum 2 contexts while sharing common logic.

Key changes

• Created shared base class (@swc/core/components/status-light/StatusLight.base.ts) that contains common logic for both generations
• Created shared types file (StatusLight.types.ts) defining variants for S1 and S2:
  • S1 variants: semantic (neutral, info, positive, negative, notice, accent) + color (fuchsia, indigo, magenta, purple, seafoam, yellow, chartreuse, celery, cyan)
  • S2 variants: semantic (neutral, info, positive, negative, notice) + color (all S1 colors plus pink, turquoise, brown, cinnamon, silver)
• Refactored first-gen (first-gen/packages/status-light/src/StatusLight.ts) to extend the shared base class
  • Maintains S1-specific disabled property (deprecated in S2)
  • Uses S1-specific variant types
  • Added deprecation warnings for exported constants
• Implemented second-gen (second-gen/packages/swc/components/status-light/StatusLight.ts) extending the shared base class
  • Uses S2-specific variant types
  • Removed disabled property (not supported in Spectrum 2)
  • Added S2 Spectrum CSS styles
• Enhanced stories with comprehensive examples for all variants and sizes
• Fixed variant selectors for accent and cyan variants
• Added size support with sizeMap decorator for consistent sizing across scales

Motivation and context

This migration is part of the broader effort to support Spectrum 2 design system while maintaining backward compatibility with Spectrum 1. By creating a shared base class, we reduce code duplication and ensure consistent behavior across both generations while allowing each to have generation-specific features and styling.

Related issue(s)

• SWC-1260

Screenshots (if appropriate)

New stories for S2/second-gen:

---

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

• Pull down the repo to run locally.

First-gen status-light functionality

1. Navigate to the first-gen status-light Storybook
2. Verify all S1 variants render correctly:
   • semantic: neutral, info, positive, negative, notice
   • color: fuchsia, indigo, magenta, purple, seafoam, yellow, chartreuse, celery
3. Verify the missing S2 variants have been added
   • semantic: accent
   • color: cyan
     NOTE: these missing variants were an identified gap during the component analysis
4. Verify disabled state still works correctly and properly adds or removes aria-disabled
5. There should be no VRT diffs for the status light examples that were originally supported in Storybook. The only VRT diffs would include the missing accent and cyan variants.

Second-gen status-light functionality

1. Navigate to the second-gen status-light Storybook
2. Verify all S2 variants render correctly:
   • semantic: neutral, info, positive, negative, notice (accent was deprecated)
   • color: fuchsia, indigo, magenta, purple, seafoam, yellow, chartreuse, celery, cyan, pink, turquoise, brown, cinnamon, silver (5 new non-semantic colors)
3. Expect visual appearance matches Spectrum 2 design specifications

Shared base class validation

1. Verify both implementations properly extend the shared base class
2. Expect no TypeScript errors and proper type narrowing for each generation
3. Verify variant validation warnings appear in dev mode for invalid variants
   • First-gen: Try adding an extra S2-only story to the S1 storybook. For example, add: <sp-status-light size="s" variant="brown">brown</sp-status-light>
   • Confirm that a browser warning appears in the console:

Second-gen: Try adding an extra S1-only story to the S2 storybook. For example, add:

export const Disabled: Story = {
    render: () => html`
      <swc-status-light variant="accent" disabled>disabled</swc-status-light>`
};

Confirm that a browser warning appears in the console:

Replace the variant value with something valid for S2, then reconfirm the new disabled console warning appears in the browser:

Device review

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

[changeset-bot]

⚠️ No Changeset found

Latest commit: a22afc0

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

• Documentation Site
• Storybook

🔍 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-5800

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.

[github-actions]

Tachometer results

Currently, no packages are changed by this PR...