fix(swatch): adjust disabled icon color across themes (#3547)

Author: rise-erpelding

.changeset/fast-hats-worry.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/swatch": patch
+---
+
+Reverts all themes' disabled icon color back to original spectrum-white and border color to black with opacity token `swatch-disabled-icon-border-opacity`.

components/swatch/dist/metadata.json

@@ -79,6 +79,7 @@
     "--spectrum-swatch-border-thickness",
     "--spectrum-swatch-border-thickness-selected",
     "--spectrum-swatch-dash-icon-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 +102,7 @@
   ],
   "global": [
     "--spectrum-animation-duration-100",
+    "--spectrum-black-rgb",
     "--spectrum-border-width-100",
     "--spectrum-border-width-200",
     "--spectrum-corner-radius-75",
@@ -113,6 +115,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 +124,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);

components/swatch/stories/template.js

@@ -1,7 +1,7 @@
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js";
 import { Container, getRandomId } from "@spectrum-css/preview/decorators";
-import { html } from "lit";
+import { html, svg } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -86,12 +86,26 @@ export const Template = ({
 				${OpacityCheckerboard({
 						customClasses: [`${rootClass}-fill`],
 						content: [
-							...(isDisabled ? [Icon({
-								customClasses: [`${rootClass}-disabledIcon`],
-								setName: "workflow",
-								iconName: "Cancel",
-								useRef: false,
-							}, context)] : []),
+							// disabled icon requires custom markup	to render separate paths for border and fill
+							// the custom prop fills in the paths are a fallback, styling should be handled by css
+							...(isDisabled ? [svg`
+								<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="${rootClass}-disabledIcon"
+										viewBox="0 0 20 20"
+								>
+										<path
+												d="M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z"
+												stroke="none"
+												fill="var(--spectrum-swatch-disabled-icon-color)"
+										/>
+										<path
+												d="M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z"
+												stroke="none"
+												fill="var(--spectrum-swatch-disabled-icon-border-color)"
+										/>
+								</svg>
+						`] : []),
 							...(isMixedValue ? [Icon({
 								customClasses: [`${rootClass}-mixedValueIcon`],
 								setName: "ui",

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-gray-50);
 		--spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
 	}
 }