chore(swatch+swatchgroup): support swatchgroup light border override

Author: cdransf

.changeset/proud-schools-reply.md

@@ -23,6 +23,7 @@ An `Add Swatch` variant has been added with the required color tokens and the sp
 `--spectrum-swatch-disabled-icon-border-opacity`
 `--spectrum-swatch-icon-color`
 `--spectrum-swatch-rectangle-width-multiplier`
+`--spectrum-swatchgroup-border-color`
 
 ##### New mods
 
@@ -32,5 +33,6 @@ An `Add Swatch` variant has been added with the required color tokens and the sp
 `--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/swatchgroup/dist/metadata.json

@@ -2,19 +2,22 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-SwatchGroup",
+    ".spectrum-SwatchGroup .spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before",
     ".spectrum-SwatchGroup--compact",
     ".spectrum-SwatchGroup--spacious"
   ],
   "modifiers": [
     "--mod-swatch-group-spacing-spacious",
+    "--mod-swatchgroup-border-color",
     "--mod-swatchgroup-spacing",
     "--mod-swatchgroup-spacing-compact"
   ],
   "component": [
     "--spectrum-swatch-group-spacing-spacious",
+    "--spectrum-swatchgroup-border-color",
     "--spectrum-swatchgroup-spacing"
   ],
   "global": ["--spectrum-spacing-50", "--spectrum-spacing-75"],
-  "passthroughs": [],
+  "passthroughs": ["--mod-swatch-border-color-light"],
   "high-contrast": []
 }

components/swatchgroup/index.css

@@ -13,14 +13,22 @@
 
 .spectrum-SwatchGroup {
 	--spectrum-swatchgroup-spacing: var(--spectrum-spacing-75);
+}
 
+.spectrum-SwatchGroup {
 	display: inline-flex;
 	flex-flow: row wrap;
 	align-items: flex-start;
 	justify-content: flex-start;
-
-	/* Regular (Default) */
 	gap: var(--mod-swatchgroup-spacing, var(--spectrum-swatchgroup-spacing));
+
+	.spectrum-Swatch--lightBorder {
+		.spectrum-Swatch-fill {
+			&::before {
+				--mod-swatch-border-color-light: var(--mod-swatchgroup-border-color: , var(--spectrum-swatchgroup-border-color));
+			}
+		}
+	}
 }
 
 /* Compact */

tokens/custom/dark-vars.css

@@ -58,7 +58,12 @@
 	--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 / var(--swatch-group-border-opacity));
+	--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: rgba(var(--spectrum-gray-900-rgb), 0.07);
 	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);

tokens/custom/light-vars.css

@@ -56,7 +56,12 @@
 	--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 / var(--swatch-group-border-opacity));
+	--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: rgba(var(--spectrum-gray-900-rgb), 0.06);
 	--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);