fix(swatch): revert all themes to match original spec

Author: rise-erpelding

.changeset/fast-hats-worry.md

@@ -1,5 +1,5 @@
 ---
-"@spectrum-css/swatch": patch
+"@spectrum-css/swatch": minor
 ---
 
-Revert S1/Express disabled icon color back to original spectrum-white.
+Reverts all themes' disabled icon color back to original spectrum-white and border color to black with 51% opacity. Styling for path:first-child and path:last-child have been removed because the icon only has one single path, stroke and fill are used to style the icon color and outline instead.

components/swatch/dist/metadata.json

@@ -26,8 +26,6 @@
     ".spectrum-Swatch--sizeS",
     ".spectrum-Swatch--sizeXS",
     ".spectrum-Swatch-disabledIcon",
-    ".spectrum-Swatch-disabledIcon path:first-child",
-    ".spectrum-Swatch-disabledIcon path:last-child",
     ".spectrum-Swatch-fill",
     ".spectrum-Swatch-fill:before",
     ".spectrum-Swatch-image",
@@ -79,6 +77,8 @@
     "--spectrum-swatch-border-thickness",
     "--spectrum-swatch-border-thickness-selected",
     "--spectrum-swatch-dash-icon-color",
+    "--spectrum-swatch-disabled-icon-border-color",
+    "--spectrum-swatch-disabled-icon-border-opacity",
     "--spectrum-swatch-disabled-icon-color",
     "--spectrum-swatch-disabled-icon-size",
     "--spectrum-swatch-focus-indicator-border-radius",
@@ -101,6 +101,7 @@
   ],
   "global": [
     "--spectrum-animation-duration-100",
+    "--spectrum-black-rgb",
     "--spectrum-border-width-100",
     "--spectrum-border-width-200",
     "--spectrum-corner-radius-75",
@@ -113,6 +114,7 @@
     "--spectrum-gray-900",
     "--spectrum-picked-color",
     "--spectrum-red-900",
+    "--spectrum-white",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-50",
@@ -121,7 +123,6 @@
   "system-theme": [
     "--system-swatch-border-color",
     "--system-swatch-border-radius",
-    "--system-swatch-disabled-icon-color",
     "--system-swatch-inner-border-color-selected"
   ],
   "passthroughs": [],

components/swatch/index.css

@@ -61,7 +61,8 @@
 
 .spectrum-Swatch {
 	--spectrum-swatch-focus-indicator-border-radius: 8px;
-	--spectrum-swatch-icon-border-color: rgb(0 0 0 / 51%);
+	--spectrum-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-disabled-icon-border-opacity));
+	--spectrum-swatch-disabled-icon-color: var(--spectrum-white);
 	--spectrum-swatch-border-thickness: var(--spectrum-border-width-100);
 	--spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200);
 	--spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
@@ -265,18 +266,11 @@
 	display: none;
 	pointer-events: none;
 
-	color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
-	stroke: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
-
 	/* Icon fill color */
-	path:first-child {
-		fill: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
-	}
+	color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
 
 	/* Icon outline color - does not need a highcontrast token because the icon fill color provides contrast. */
-	path:last-child {
-		fill: var(--mod-swatch-icon-border-color, var(--spectrum-swatch-icon-border-color));
-	}
+	stroke: var(--mod-swatch-icon-border-color, var(--spectrum-swatch-icon-border-color));
 }
 
 .spectrum-Swatch--rectangle {

components/swatch/themes/spectrum-two.css

@@ -16,7 +16,6 @@
 	.spectrum-Swatch {
 		--spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity));
 		--spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25);
-		--spectrum-swatch-disabled-icon-color: var(--spectrum-gray-25);
 		--spectrum-swatch-border-radius: var(--spectrum-corner-radius-75);
 	}
 }

components/swatch/themes/spectrum.css

@@ -19,7 +19,6 @@
 	.spectrum-Swatch {
 		--spectrum-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-opacity));
 		--spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50);
-		--spectrum-swatch-disabled-icon-color: var(--spectrum-white);
 		--spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
 	}
 }