feat(swatch+swatchgroup): S2 migration

.changeset/proud-schools-reply.md

@@ -0,0 +1,42 @@
+---
+`@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.
+
+The border should not be set when the swatch is selected as the border conflicts with the display of the selected state.
+
+##### 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`
+`--spectrum-swatchgroup-border-color`
+
+##### 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,6 +4,7 @@
     ".spectrum-Swatch",
     ".spectrum-Swatch .spectrum-Swatch-disabledIcon",
     ".spectrum-Swatch .spectrum-Swatch-fill",
+    ".spectrum-Swatch--border .spectrum-Swatch-fill:before",
     ".spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before",
     ".spectrum-Swatch--noBorder .spectrum-Swatch-fill:before",
     ".spectrum-Swatch--rectangle",
@@ -29,62 +30,81 @@
     ".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-color",
     "--mod-swatch-border-color-light",
+    "--mod-swatch-border-color-rgb",
     "--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"
+    "--mod-swatch-slash-thickness",
+    "--mod-swatchgroup-border-color"
   ],
   "component": [
-    "--spectrum-swatch-border-color",
     "--spectrum-swatch-border-color-light",
+    "--spectrum-swatch-border-color-rgb",
     "--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",
@@ -95,21 +115,32 @@
     "--spectrum-swatch-slash-thickness-extra-small",
     "--spectrum-swatch-slash-thickness-large",
     "--spectrum-swatch-slash-thickness-medium",
-    "--spectrum-swatch-slash-thickness-small"
+    "--spectrum-swatch-slash-thickness-small",
+    "--spectrum-swatchgroup-border-color"
   ],
   "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-75",
+    "--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-1000-rgb",
+    "--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",
@@ -123,6 +154,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"
   ]
 }