chore(swatch+swatchgroup): drop custom light/dark tokens

Author: cdransf

1

@@ -76,7 +76,6 @@
     "--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",
@@ -99,10 +98,10 @@
     "--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-group-border-color",
     "--spectrum-swatch-icon-border-color",
     "--spectrum-swatch-icon-color",
     "--spectrum-swatch-inner-border-color-selected",

components/swatch/dist/metadata.json

@@ -14,7 +14,6 @@
 /* @note: default sizing for swatch is small */
 .spectrum-Swatch {
 	/* Placeholder tokens */
-	--spectrum-swatch-focus-indicator-border-radius: var(--mod-swatch-focus-indicator-border-radius, 8px);
 	--spectrum-swatch-icon-border-color: var(--mod-swatch-icon-border-color, rgb(0 0 0 / var(--spectrum-swatch-disabled-icon-border-opacity)));
 
 	/* Size */
@@ -37,6 +36,7 @@
 	--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-border-color-light: rgb(var(--spectrum-swatch-group-border-color) / 42%);
 
 	/* Focus ring */
 	--spectrum-swatch-focus-indicator-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color)));

components/swatch/index.css

@@ -80,11 +80,8 @@ export const Template = ({
 			@click=${function() {
 				updateArgs({ isSelected: !isSelected });
 			}}
-			@focusin=${function() {
-				updateArgs({ isKeyboardFocused: true });
-			}}
 			@focusout=${function() {
-				updateArgs({ isKeyboardFocused: false });
+				updateArgs({ isSelected: false });
 			}}
 			@keypress=${function(e) {
 				if (e.key !== "Enter" && e.key !== " ") return;

components/swatch/stories/template.js

@@ -57,12 +57,6 @@
 
 	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
 
-	--spectrum-swatch-border-color: rgb(255 255 255 / 51%);
-	--spectrum-swatch-border-color-light: rgb(255 255 255 / 42%);
-
-	/**
-	 * `--spectrum-swatch-group-border-color` / `--spectrum-swatch-group-border-opacity`
-	 */
 	--spectrum-swatchgroup-border-color: rgb(255 255 255 / 20%);
 
 	--spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.07);

tokens/custom/dark-vars.css

@@ -55,12 +55,6 @@
 
 	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
 
-	--spectrum-swatch-border-color: rgb(0 0 0 / 51%);
-	--spectrum-swatch-border-color-light: rgb(0 0 0 / 42%);
-
-	/**
-	 * `--spectrum-swatch-group-border-color` / `--spectrum-swatch-group-border-opacity`
-	 */
 	--spectrum-swatchgroup-border-color: rgb(255 255 255 / 20%);
 
 	--spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.06);