feat(swatch+swatchgroup): S2 migration

[cdransf]

Description

CSS-1026 + CSS-1029

This migrates the swatch and swatchgroup components to S2. Custom properties have been remapped and added per the design specification.

An Add Swatch variant has been added with the required color tokens and the specified add UI icon.

Removed custom properties

--spectrum-swatch-border-color
--spectrum-swatch-dash-icon-color

New custom properties

--spectrum-swatch-border-color-rgb
--spectrum-swatch-border-opacity
--spectrum-corner-radius-full
--spectrum-corner-radius-none
--spectrum-swatch-disabled-icon-border-opacity
--spectrum-swatch-icon-color
--spectrum-swatch-rectangle-width-multiplier

New mods

--mod-add-button-background
--mod-add-button-background-down
--mod-add-button-background-hover
--mod-add-button-background-keyboard-focus
--mod-corner-radius-full
--mod-mixed-button-background
--mod-swatch-border-color-rgb
--mod-swatch-border-opacity

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• The pages render correctly, are accessible, and are responsive.

2. If components have been modified, VRTs have been run on this branch:

• VRTs have been run and looked at.
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• I have tested these changes in Windows High Contrast mode.
• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: 343a87b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@spectrum-css/swatchgroup	Major
@spectrum-css/swatch	Major

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

🚀 Deployed on https://pr-3677--spectrum-css.netlify.app

[github-actions]

File metrics

Summary

Total size: 1.38 MB^*
Total change (Δ): 🟢 ⬇ 0.91 KB (-0.06%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Minified	Gzipped	Δ
swatch	12.88 KB	12.12 KB	2.12 KB	🔴 ⬆ 2.60 KB
swatchgroup	1.14 KB	1.10 KB	0.56 KB	🟢 ⬇ 0.08 KB

File change details

swatch

Filename	Head	Minified	Gzipped	Compared to base
index.css	12.88 KB	12.12 KB	2.12 KB	🔴 ⬆ 2.60 KB
metadata.json	6.71 KB	-	-	🔴 ⬆ 1.33 KB

swatchgroup

Filename	Head	Minified	Gzipped	Compared to base
index.css	1.14 KB	1.10 KB	0.56 KB	🟢 ⬇ 0.08 KB
metadata.json	0.51 KB	-	-	🔴 ⬆ < 0.01 KB

tokens

Filename	Head	Minified	Gzipped	Compared to base
css/dark-vars.css	46.40 KB	-	-	🟢 ⬇ 0.24 KB
css/global-vars.css	76.23 KB	-	-	-
css/index.css	249.92 KB	-	-	🟢 ⬇ 0.44 KB
css/large-vars.css	41.25 KB	-	-	-
css/light-vars.css	46.40 KB	-	-	🟢 ⬇ 0.23 KB
css/medium-vars.css	41.37 KB	-	-	-
json/tokens.json	388.37 KB	-	-	-

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[rise-erpelding]

Hi! This looks like a pretty minor migration but I have a few comments that I added below that I'll summarize:

• Would love to see some updated testing options to show variants/states that we aren't seeing, this really helps us prevent regressions (or will once we have these changes in our main branch). Key-focus state was one that I mentioned to add, but it's also helpful to run through these manually too (like for instance, a hover test case usually shouldn't have a hover state, key-focus states shouldn't have an additional key focus state when you tab to the component).
• I think by default we should be seeing some rounding on the swatch, although it's really still unclear to me after looking through specs whether or not the no-rounding option should still exist in S2. Some clarification from design on that might be good here, but doesn't need to be a blocker, but in the mean time since all the default swatches in the specs have rounding, ours should too.
• Swatch group spacing for spacious maybe needs adjusting.

I have a couple of other questions after looking through the spec and the PR too:

• Down state is kind of mentioned in the spec, but no tokens are referenced. Does this mean that swatch gets a down state treatment (with the perspective-based transform)? Not a blocker for this PR but we should find out.
• Is that swatch border color (default) correct? I'm seeing it compute to rgba(19, 19, 19, 0.42) but the spec says gray-1000 which should be 0, 0, 0. If we adjust that though is there a difference between that default border and the light border?

I didn't check WHCM on this pass, but will plan to in the future!

[castastrophe]

Looking good! My biggest feedback note is about the sizing for Swatch Group. Danke!

[marissahuysentruyt]

@cdransf Could we add tags: ["migrated"] to swatch group & swatch? I noticed some of our migrated components have that, and some don't, but I think that'd be a nice thing to do!