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

Author: cdransf

components/swatch/dist/metadata.json

@@ -22,21 +22,13 @@
     ".spectrum-Swatch-disabledIcon path:last-child",
     ".spectrum-Swatch-fill",
     ".spectrum-Swatch-fill:before",
-    ".spectrum-Swatch-icon",
     ".spectrum-Swatch-image",
-    ".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-mixedValueIcon",
     ".spectrum-Swatch.is-disabled",
     ".spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon",
     ".spectrum-Swatch.is-image .spectrum-Swatch-fill:before",
-    ".spectrum-Swatch.is-mixedValue",
     ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill",
-    ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-icon",
+    ".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",
@@ -51,17 +43,10 @@
     ".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-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",
@@ -78,22 +63,20 @@
     "--mod-swatch-slash-thickness"
   ],
   "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-disabled-icon-border-opacity",
+    "--spectrum-swatch-dash-icon-color",
     "--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-size",
     "--spectrum-swatch-size-extra-small",
@@ -108,26 +91,18 @@
     "--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-75",
     "--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-900-rgb",
-    "--spectrum-mixed-button-background",
-    "--spectrum-negative-visual-color",
-    "--spectrum-neutral-content-color-default",
+    "--spectrum-gray-800",
+    "--spectrum-gray-900",
     "--spectrum-picked-color",
+    "--spectrum-red-900",
     "--spectrum-white",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",

components/swatch/stories/swatch.test.js

@@ -36,6 +36,16 @@ export const Swatches = (args, context) => {
 				...args,
 				isAddSwatch: true,
 			}, context),
+			Template({
+				...args,
+				isAddSwatch: true,
+				isHover: true,
+			}, context),
+			Template({
+				...args,
+				isAddSwatch: true,
+				isKeyboardFocus: true,
+			}, context),
 			Template({
 				...args,
 				swatchColor: undefined,