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

Author: cdransf

components/swatch/dist/metadata.json

@@ -24,11 +24,17 @@
     ".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.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-nothing .spectrum-Swatch-fill",
@@ -45,7 +51,12 @@
     ".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",
@@ -97,16 +108,23 @@
     "--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-picked-color",

components/swatch/index.css

@@ -35,6 +35,13 @@
 	--spectrum-swatch-icon-color: var(--spectrum-neutral-content-color-default);
 	--spectrum-swatch-slash-icon-color: var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-negative-visual-color)));
 	--spectrum-swatch-focus-indicator-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color)));
+
+	--spectrum-mixed-button-background: var(--spectrum-gray-25);
+
+	--spectrum-add-button-background: var(--spectrum-gray-100);
+	--spectrum-add-button-background-hover: var(--spectrum-gray-200);
+	--spectrum-add-button-background-down: var(--spectrum-gray-200);
+	--spectrum-add-button-background-keyboard-focus: var(--spectrum-gray-200);
 }
 
 .spectrum-Swatch--sizeXS {
@@ -81,6 +88,41 @@
 		border-radius: var(--spectrum-swatch-border-radius);
 	}
 
+	&.is-mixedValue {
+		--spectrum-picked-color: var(--mod-mixed-button-background, var(--spectrum-mixed-button-background));
+	}
+
+	&.is-addSwatch {
+		--spectrum-picked-color: var(--mod-add-button-background, var(--spectrum-add-button-background));
+
+		.spectrum-Swatch-fill {
+			background: var(--spectrum-picked-color);
+		}
+
+		&:hover {
+			--spectrum-picked-color: var(--mod-add-button-background-hover, var(--spectrum-add-button-background-hover));
+		}
+
+		&:active {
+			--spectrum-picked-color: var(--mod-add-button-background-down, var(--spectrum-add-button-background-down));
+		}
+
+		&:hover,
+		&:active {
+			cursor: pointer;
+		}
+
+		&.is-keyboardFocused,
+		&:focus-visible {
+			--spectrum-picked-color: var(--mod-add-button-background-keyboard-focus, var(--spectrum-add-button-background-keyboard-focus));
+		}
+
+		.spectrum-Swatch-icon {
+			color: var(--spectrum-swatch-icon-color);
+			display: block;
+		}
+	}
+
 	&.is-selected {
 		background: var(--spectrum-swatch-inner-border-color-selected);
 
@@ -113,8 +155,7 @@
 		}
 	}
 
-	&.is-mixedValue,
-	&.is-addSwatch {
+	&.is-mixedValue {
 		.spectrum-Swatch-fill {
 			background: var(--spectrum-picked-color, transparent);
 		}

components/swatch/stories/template.js

@@ -20,6 +20,7 @@ export const Template = ({
 	isAddSwatch = false,
 	isSelected = false,
 	isDisabled = false,
+	isKeyboardFocused = false,
 	rounding = "regular",
 	customClasses = [],
 	swatchColor,
@@ -37,6 +38,11 @@ export const Template = ({
 			break;
 	}
 
+	let pickedColor = swatchColor;
+
+	if (isMixedValue) pickedColor = "var(--spectrum-gray-25)";
+	if (isAddSwatch) pickedColor = undefined;
+
 	return html`
 		<div
 			class=${classMap({
@@ -49,6 +55,7 @@ export const Template = ({
 				[`${rootClass}--${borderStyle}`]: typeof borderStyle !== "undefined" && borderStyle !== "default",
 				"is-selected": !isDisabled && isSelected,
 				"is-disabled": isDisabled,
+				"is-keyboardFocused": isKeyboardFocused,
 				"is-image": (isMixedValue || isAddSwatch) || typeof imageUrl !== "undefined",
 				"is-mixedValue": !isDisabled && isMixedValue,
 				"is-addSwatch": !isDisabled && isAddSwatch,
@@ -59,7 +66,7 @@ export const Template = ({
 			?disabled=${isDisabled}
 			id=${ifDefined(id)}
 			style=${ifDefined(styleMap({
-				"--spectrum-picked-color": (isMixedValue || isAddSwatch) ? "var(--spectrum-gray-25)" : swatchColor,
+				"--spectrum-picked-color": pickedColor,
 				...customStyles,
 			}))}
 			tabindex="0"