feat(swatch+swatchgroup): S2 migration

.changeset/proud-schools-reply.md

@@ -0,0 +1,43 @@
+---
+`@spectrum-css/swatchgroup`: major
+`@spectrum-css/swatch`: major
+---
+
+#### 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"
   ]
 }