(3/5) Feature: Update component styles with token(), new guidelines

[5t3ph]

Description

This is PR number 3 of 5

Updates remaining 2nd-gen component styles per new guidance and features

Motivation and context

• Uses token() feature provided in (1/5) Feature: Token Processing and token() #5940
• Adheres to new guidelines (provided in (5/5) Feature: update prefix to swc, complete docs #5944)
  • component CSS
  • custom properties / use of token()

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 thoughtfully written changeset if changes suggested include patch, minor, or major features
• Validated on all supported browsers

Manual review test cases

• visuals match S2 Token Specs
  • note: this update did not change any previously applied tokens, so you do not need to do a 1:1 comparison, just use the specs for a visual comparison
• component responds to changing theme and scale contexts (via toolbar menus)
• critical component parts are visible in forced-colors mode

[changeset-bot]

⚠️ No Changeset found

Latest commit: cbe7ab9

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

[cdransf]

✨

[rise-erpelding]

I know this isn't necessarily a new way to write selectors in SWC, but seeing these side by side it feels really clean to read CSS selectors with the attributes vs. nesting & BEM class selectors. 👏

However, we're still using BEM selectors in a lot of places (like .spectrum-Badge--subtle and nested in that, &.spectrum-Badge--gray) and I'm not quite comprehending the logic of when one can be used vs. the other.

Is the thought that we can eventually remove the classMap()s in the template, or do those stick around? And would we definitely keep the .spectrum-Badge class? (I see that the code snippets in the RFC still have them.)

Note: I did peek at the 5th PR (#5944) and I see that the selectors do change a bit more, so maybe my questions here are a bit premature and I should wait until I'm reviewing that PR to try to make sense of patterns for writing CSS.