chore(swatch+swatchgroup): add focus ring

Author: cdransf

components/swatch/dist/metadata.json

@@ -34,6 +34,7 @@
     ".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-icon",
@@ -46,6 +47,7 @@
     ".spectrum-Swatch.is-selected:before",
     ".spectrum-Swatch:after",
     ".spectrum-Swatch:before",
+    ".spectrum-Swatch:focus-visible",
     ".spectrum-Swatch:focus-visible:after",
     ".spectrum-Swatch[disabled]",
     ".spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon"
@@ -126,6 +128,7 @@
     "--spectrum-gray-25",
     "--spectrum-gray-900-rgb",
     "--spectrum-mixed-button-background",
+    "--spectrum-mod-focus-indicator-color",
     "--spectrum-negative-visual-color",
     "--spectrum-neutral-content-color-default",
     "--spectrum-picked-color",

components/swatch/index.css

@@ -35,13 +35,16 @@
 	--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);
+
+	/* Focus ring */
+	--spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color);
+	--spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+	--spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
 }
 
 .spectrum-Swatch--sizeXS {
@@ -123,6 +126,12 @@
 		}
 	}
 
+	&.is-keyboardFocused,
+	&:focus-visible {
+		outline: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-swatch-focus-indicator-thickness)) solid var(--spectrum-mod-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color));
+		outline-offset: var(--mod-swatch-focus-indicator-gap, var(--spectrum-swatch-focus-indicator-gap));
+	}
+
 	&.is-selected {
 		background: var(--spectrum-swatch-inner-border-color-selected);
 

components/swatch/stories/swatch.stories.js

@@ -47,10 +47,7 @@ export default {
 			...isHovered,
 			if: { arg: "isAddSwatch", truthy: true },
 		},
-		isKeyboardFocused: {
-			...isKeyboardFocused,
-			if: { arg: "isAddSwatch", truthy: true },
-		},
+		isKeyboardFocused,
 		borderStyle: {
 			name: "Border style",
 			type: { name: "string" },