feat(swatch+swatchgroup): S2 migration (#3677)

* feat(swatch+swatchgroup): S2 migration

* chore(swatch+swatchgroup): update tokens and mods

* chore(swatch+swatchgroup): support interactive states for add swatch + story updates

* chore(swatch+swatchgroup): add hovered hover + keyboard focus controls for add swatch

* chore(swatch+swatchgroup): add hovered hover + keyboard focus controls for add swatch

* chore(swatch+swatchgroup): add focus ring

* chore(swatch+swatchgroup): spacing token updates and refactoring

* chore(swatch+swatchgroup): update custom vars to use opacity token

* fix(swatch+swatchgroup): duplicate custom properties

* chore(swatch+swatchgroup): update changelog

* chore(swatch+swatchgroup): update corner rounding

* fix(swatch+swatchgroup): style fix

* fix(swatch+swatchgroup): no rounding is default; replace test case w/partial rounding

* chore(swatch+swatchgroup): support swatchgroup border

* chore(swatch+swatchgroup): swap none to partial rounding as the default; add missing isAddSwatch arg for swatchgroup story

* chore(swatch+swatchgroup): add mediumLarge density variant; remove compact

* chore(swatch+swatchgroup): story, control and test cleanup

* chore(swatch+swatchgroup): add hover + active states to add variation testing grid

* fix(swatch+swatchgroup): update border color

* fix(swatch+swatchgroup): changelog + mod removal

* Update components/swatchgroup/index.css

Co-authored-by: [ Cassondra ] <[email protected]>

* fix(swatch+swatchgroup): split medium + large sizing back out

* fix(swatch+swatchgroup): deduplicate controls inherited from swatch

* fix(swatch+swatchgroup): restore no rounding test

* fix(swatch+swatchgroup): improvements to WHC styles

* fix(swatch+swatchgroup): remove redundant focus state

* fix(swatch+swatchgroup): remove disabled + selected controls for swatchgroup story

* chore(swatch+swatchgroup): drop custom light/dark tokens

* chore(swatch+swatchgroup): update border color with note to update w/tokens when available

* chore(swatch+swatchgroup): restore outline transition

* chore(swatch+swatchgroup): clean up sizing, stories, tests and styles

* fix(swatch,swatchgroup): use relative rgb values for border colors

- updates some documentation
- removes the light border variants
- removes the border control
- updates some of the test cases
- updates metadata

* fix(swatch+swatchgroup): disable stylelint for --spectrum-swatch-border-opacity in swatchgroup

* fix(swatch+swatchgroup): remove lingering border style arg

* chore(swatch+swatchgroup): refactor sizing, stories and tests to properly implement group density

* chore(swatch+swatchgroup): update background control description

* fix(swatch+swatchgroup): correct is-nothing slash direction + rectangle degree and sizing

* fix(swatch+swatchgroup): add empty to test data; remove empty, add, mixed value states from empty test group

* chore(swatch+swatchgroup): add migrated status + tag

* Update components/swatch/stories/swatch.stories.js

Co-authored-by: rise-erpelding <[email protected]>

* fix(swatch+swatchgroup): remove unused custom props; replace override w/mod; drop test cases

* chore(swatch+swatchgroup): revert sizing naming conventions; restore rounding control to swatchgroup story; restore rounding usage notes

* chore(swatch+swatchgroup): rename partial to regular

* chore(swatch+swatchgroup): add changelog usage notes

* fix(swatch+swatchgroup): remove unnecessary borderStyle references, set default size to m, additional cleanup

* fix(swatch+swatchgroup): restore spacious density swatchgroup test; add tokens to changeset

* chore(tokens): move hardcoded full rounding to tooling

---------

Co-authored-by: [ Cassondra ] <[email protected]>
Co-authored-by: Marissa Huysentruyt <[email protected]>
Co-authored-by: rise-erpelding <[email protected]>

Author: 4 people

.changeset/proud-schools-reply.md

@@ -0,0 +1,44 @@
+---
+`@spectrum-css/swatchgroup`: major
+`@spectrum-css/swatch`: major
+`@spectrum-css/tokens`: minor
+---
+
+#### S2 migration for Swatch group
+
+This migrates the `swatch` and `swatchgroup` components to the latest Spectrum 2 designs. 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.
+
+The `Add Swatch` and `Mixed Value` variants may not be combined with background colors or images. To implement the `Add Swatch` you need to apply the `is-addSwatch` class to the `spectrum-Swatch` element. `Add swatch` keyboard focus may be applied by adding the `is-keyboardFocused` class to this combination of classes.
+
+The `spectrum-Swatch-icon` is used to set the expected color to icons contained within the swatch.
+
+The light and no border variants have been removed. Individual swatches have a border set to `--spectrum-gray-1000` at `42%` opacity, while the border opacity is set to `20%` in swatch groups.
+
+##### Removed custom properties
+
+`--spectrum-swatch-border-color`
+`--spectrum-swatch-dash-icon-color` (replaced by `--spectrum-swatch-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-swatchgroup-border-color`
+`--mod-swatch-border-color-rgb`
+`--mod-swatch-border-opacity`

components/swatch/dist/metadata.json

@@ -4,8 +4,6 @@
     ".spectrum-Swatch",
     ".spectrum-Swatch .spectrum-Swatch-disabledIcon",
     ".spectrum-Swatch .spectrum-Swatch-fill",
-    ".spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before",
-    ".spectrum-Swatch--noBorder .spectrum-Swatch-fill:before",
     ".spectrum-Swatch--rectangle",
     ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill",
     ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before",
@@ -22,69 +20,86 @@
     ".spectrum-Swatch--roundingNone:after",
     ".spectrum-Swatch--roundingNone:before",
     ".spectrum-Swatch--sizeL",
-    ".spectrum-Swatch--sizeM",
+    ".spectrum-Swatch--sizeS",
     ".spectrum-Swatch--sizeXS",
     ".spectrum-Swatch-disabledIcon",
     ".spectrum-Swatch-disabledIcon path:first-child",
     ".spectrum-Swatch-disabledIcon path:last-child",
     ".spectrum-Swatch-fill",
     ".spectrum-Swatch-fill:before",
+    ".spectrum-Swatch-icon",
     ".spectrum-Swatch-image",
-    ".spectrum-Swatch-mixedValueIcon",
+    ".spectrum-Swatch.is-addSwatch",
+    ".spectrum-Swatch.is-addSwatch .spectrum-Swatch-fill",
+    ".spectrum-Swatch.is-addSwatch .spectrum-Swatch-icon",
+    ".spectrum-Swatch.is-addSwatch.is-keyboardFocused",
+    ".spectrum-Swatch.is-addSwatch:active",
+    ".spectrum-Swatch.is-addSwatch:focus-visible",
+    ".spectrum-Swatch.is-addSwatch:hover",
     ".spectrum-Swatch.is-disabled",
     ".spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon",
     ".spectrum-Swatch.is-image .spectrum-Swatch-fill:before",
+    ".spectrum-Swatch.is-keyboardFocused",
+    ".spectrum-Swatch.is-mixedValue",
     ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill",
-    ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-mixedValueIcon",
-    ".spectrum-Swatch.is-nothing .spectrum-Swatch-fill",
-    ".spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after",
-    ".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle .spectrum-Swatch-fill:after",
+    ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-icon",
+    ".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after",
+    ".spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill",
+    ".spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after",
     ".spectrum-Swatch.is-selected",
     ".spectrum-Swatch.is-selected .spectrum-Swatch-fill",
     ".spectrum-Swatch.is-selected .spectrum-Swatch-fill:before",
     ".spectrum-Swatch.is-selected:before",
-    ".spectrum-Swatch:after",
     ".spectrum-Swatch:before",
-    ".spectrum-Swatch:focus-visible:after",
+    ".spectrum-Swatch:focus-visible",
     ".spectrum-Swatch[disabled]",
     ".spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon"
   ],
   "modifiers": [
+    "--mod-add-button-background",
+    "--mod-add-button-background-down",
+    "--mod-add-button-background-hover",
+    "--mod-add-button-background-keyboard-focus",
     "--mod-animation-duration-100",
+    "--mod-corner-radius-full",
+    "--mod-mixed-button-background",
+    "--mod-swatch-border",
     "--mod-swatch-border-color",
-    "--mod-swatch-border-color-light",
     "--mod-swatch-border-color-selected",
+    "--mod-swatch-border-opacity",
     "--mod-swatch-border-radius",
     "--mod-swatch-border-thickness",
     "--mod-swatch-border-thickness-selected",
     "--mod-swatch-disabled-icon-color",
     "--mod-swatch-disabled-icon-size",
-    "--mod-swatch-focus-indicator-border-radius",
     "--mod-swatch-focus-indicator-color",
     "--mod-swatch-focus-indicator-gap",
     "--mod-swatch-focus-indicator-thickness",
     "--mod-swatch-icon-border-color",
+    "--mod-swatch-icon-color",
     "--mod-swatch-inner-border-color-selected",
     "--mod-swatch-size",
     "--mod-swatch-slash-icon-color",
     "--mod-swatch-slash-thickness"
   ],
   "component": [
+    "--spectrum-swatch-border",
     "--spectrum-swatch-border-color",
-    "--spectrum-swatch-border-color-light",
     "--spectrum-swatch-border-color-selected",
+    "--spectrum-swatch-border-opacity",
     "--spectrum-swatch-border-radius",
     "--spectrum-swatch-border-thickness",
     "--spectrum-swatch-border-thickness-selected",
-    "--spectrum-swatch-dash-icon-color",
+    "--spectrum-swatch-disabled-icon-border-opacity",
     "--spectrum-swatch-disabled-icon-color",
     "--spectrum-swatch-disabled-icon-size",
-    "--spectrum-swatch-focus-indicator-border-radius",
     "--spectrum-swatch-focus-indicator-color",
     "--spectrum-swatch-focus-indicator-gap",
     "--spectrum-swatch-focus-indicator-thickness",
     "--spectrum-swatch-icon-border-color",
+    "--spectrum-swatch-icon-color",
     "--spectrum-swatch-inner-border-color-selected",
+    "--spectrum-swatch-rectangle-width-multiplier",
     "--spectrum-swatch-size",
     "--spectrum-swatch-size-extra-small",
     "--spectrum-swatch-size-large",
@@ -98,20 +113,28 @@
     "--spectrum-swatch-slash-thickness-small"
   ],
   "global": [
+    "--spectrum-add-button-background",
+    "--spectrum-add-button-background-down",
+    "--spectrum-add-button-background-hover",
+    "--spectrum-add-button-background-keyboard-focus",
     "--spectrum-animation-duration-100",
     "--spectrum-border-width-100",
     "--spectrum-border-width-200",
     "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-full",
+    "--spectrum-corner-radius-none",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
+    "--spectrum-gray-100",
+    "--spectrum-gray-1000",
+    "--spectrum-gray-200",
     "--spectrum-gray-25",
-    "--spectrum-gray-800",
-    "--spectrum-gray-900",
+    "--spectrum-mixed-button-background",
+    "--spectrum-negative-visual-color",
+    "--spectrum-neutral-content-color-default",
     "--spectrum-picked-color",
-    "--spectrum-red-900",
     "--spectrum-white",
-    "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-50",
     "--spectrum-workflow-icon-size-75"
@@ -123,6 +146,7 @@
     "--highcontrast-swatch-border-color-selected",
     "--highcontrast-swatch-disabled-icon-color",
     "--highcontrast-swatch-fill-foreground-color",
-    "--highcontrast-swatch-focus-indicator-color"
+    "--highcontrast-swatch-focus-indicator-color",
+    "--highcontrast-swatch-icon-color"
   ]
 }