refactor(swatch): use core tokens

[yosevu]

Description

Expected Changes

• Swatch group density swatch gap differences e.g.

Current

Core tokens

Unexpected Changes

There are unexpected changes in SWC due to HTML and CSS changes to the Swatch component in CSS including:

• is-image class for transparent backgrounds on Image, Gradient, and Mixed Value swatches
• selected swatch states do not work on all variants in SWC (I have not investigated this yet)
• Swatch border relies on hardcoded tokens.

Here is one example:

I hard coded this token since I couldn't find one to use: https://github.com/adobe/spectrum-css/pull/1501/files#diff-cc50ec1bfa218207591ac782352b4f5894b71d81450b2c74fa9004ca1dfca665R22

Related issue(s)

Motivation and context

How has this been tested?

• Test case 1
  1. Go here
  2. Do this
• Test case 2
  1. Go here
  2. Do this

Screenshots (if appropriate)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

[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:

• High Contrast Mode | Medium | LTR
• Classic | Lightest | Medium | LTR
• Classic | Lightest | Medium | RTL
• Classic | Lightest | Large | LTR
• Classic | Lightest | Large | RTL
• Classic | Light | Medium | LTR
• Classic | Light | Medium | RTL
• Classic | Light | Large | LTR
• Classic | Light | Large | RTL
• Classic | Dark | Medium | LTR
• Classic | Dark | Medium | RTL
• Classic | Dark | Large | LTR
• Classic | Dark | Large | RTL
• Classic | Darkest | Medium | LTR
• Classic | Darkest | Medium | RTL
• Classic | Darkest | Large | LTR
• Classic | Darkest | Large | RTL
• Express | Lightest | Medium | LTR
• Express | Lightest | Medium | RTL
• Express | Lightest | Large | LTR
• Express | Lightest | Large | RTL
• Express | Light | Medium | LTR
• Express | Light | Medium | RTL
• Express | Light | Large | LTR
• Express | Light | Large | RTL
• Express | Dark | Medium | LTR
• Express | Dark | Medium | RTL
• Express | Dark | Large | LTR
• Express | Dark | Large | RTL
• Express | Darkest | Medium | LTR
• Express | Darkest | Medium | RTL
• Express | Darkest | Large | LTR
• Express | Darkest | Large | RTL

[yosevu]

Can I include swatchgroup 2.0.0-beta.0 adobe/spectrum-css#1505 in this PR @pfulton @Westbrook? I don't see a separate package for it.

[Westbrook]

Yep, that'll be great. We merge them back together in our projects, so this is the right place!

[github-actions]

Tachometer results

Chrome

swatch permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	280 kB	31.77ms - 31.93ms	-	faster ✔ 0% - 2% 0.14ms - 0.50ms
branch	282 kB	32.00ms - 32.33ms	slower ❌ 0% - 2% 0.14ms - 0.50ms	-

Firefox

swatch permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	280 kB	111.78ms - 122.70ms	-	unsure 🔍 -3% - +10% -3.59ms - +11.35ms
branch	282 kB	108.26ms - 118.46ms	unsure 🔍 -10% - +3% -11.35ms - +3.59ms	-