fix(clear button): align background color and hover state for disabled variant

Author: cdransf

components/clearbutton/index.css

@@ -60,17 +60,29 @@
 	&:disabled,
 	&.is-disabled {
 		--mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
-		--mod-clear-button-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
-		--mod-clear-button-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
+		--mod-clear-button-icon-color-hover: var(--spectrum-disabled-content-color);
+		--mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color);
 		--mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
 	}
+
+	&.spectrum-ClearButton--staticWhite {
+		--spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
+	}
+
+	&.spectrum-ClearButton--staticBlack {
+		--spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-black-content-color);
+	}
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors */
 .spectrum-ClearButton {
 	block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
 	inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
 	border-radius: 100%;
-	cursor: pointer;
+
+	&:not(:disabled) {
+		cursor: pointer;
+	}
 
 	background-color: var(--mod-clear-button-background-color, transparent);
 	margin: 0;
@@ -85,24 +97,24 @@
 		margin-inline: auto;
 	}
 
-	&:hover {
+	&:not(:disabled):hover {
 		color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover)));
 
 		.spectrum-ClearButton-fill {
 			background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover));
 		}
 	}
 
-	&:active {
+	&:not(:disabled):active {
 		color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down));
 
 		.spectrum-ClearButton-fill {
 			background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down));
 		}
 	}
 
-	&:focus-visible,
-	&:focus-within {
+	&:not(:disabled):focus-visible,
+	&:not(:disabled):focus-within {
 		color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus));
 
 		.spectrum-ClearButton-fill {
@@ -111,6 +123,12 @@
 	}
 }
 
+.spectrum-ClearButton:disabled {
+  .spectrum-ClearButton-icon {
+		color: var( --highcontrast-clear-button-icon-color-disabled, var(--mod-clear-button-icon-color-disabled, var(--spectrum-clear-button-icon-color-disabled)));
+	}
+}
+
 .spectrum-ClearButton-fill {
 	background-color: var(--mod-clear-button-background-color, var(--spectrum-clear-button-background-color));
 

components/clearbutton/metadata/metadata.json

@@ -1,8 +1,8 @@
 {
   "sourceFile": "index.css",
   "selectors": [
-    ".js-focus-within .spectrum-ClearButton[focus-within]",
-    ".js-focus-within .spectrum-ClearButton[focus-within] .spectrum-ClearButton-fill",
+    ".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within]",
+    ".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within] .spectrum-ClearButton-fill",
     ".spectrum-ClearButton",
     ".spectrum-ClearButton > .spectrum-Icon",
     ".spectrum-ClearButton--overBackground:focus-visible",
@@ -13,18 +13,21 @@
     ".spectrum-ClearButton.spectrum-ClearButton--sizeL",
     ".spectrum-ClearButton.spectrum-ClearButton--sizeS",
     ".spectrum-ClearButton.spectrum-ClearButton--sizeXL",
-    ".spectrum-ClearButton:active",
-    ".spectrum-ClearButton:active .spectrum-ClearButton-fill",
+    ".spectrum-ClearButton.spectrum-ClearButton--staticBlack",
+    ".spectrum-ClearButton.spectrum-ClearButton--staticWhite",
     ".spectrum-ClearButton:disabled",
-    ".spectrum-ClearButton:focus-visible",
-    ".spectrum-ClearButton:focus-visible .spectrum-ClearButton-fill",
-    ".spectrum-ClearButton:focus-within",
-    ".spectrum-ClearButton:focus-within .spectrum-ClearButton-fill",
-    ".spectrum-ClearButton:hover",
-    ".spectrum-ClearButton:hover .spectrum-ClearButton-fill",
+    ".spectrum-ClearButton:disabled .spectrum-ClearButton-icon",
     ".spectrum-ClearButton:not(:disabled)",
-    ".spectrum-ClearButton[focus-within].js-focus-within",
-    ".spectrum-ClearButton[focus-within].js-focus-within .spectrum-ClearButton-fill"
+    ".spectrum-ClearButton:not(:disabled):active",
+    ".spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill",
+    ".spectrum-ClearButton:not(:disabled):focus-visible",
+    ".spectrum-ClearButton:not(:disabled):focus-visible .spectrum-ClearButton-fill",
+    ".spectrum-ClearButton:not(:disabled):focus-within",
+    ".spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill",
+    ".spectrum-ClearButton:not(:disabled):hover",
+    ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill",
+    ".spectrum-ClearButton:not(:disabled)[focus-within].js-focus-within",
+    ".spectrum-ClearButton:not(:disabled)[focus-within].js-focus-within .spectrum-ClearButton-fill"
   ],
   "modifiers": [
     "--mod-clear-button-background-color",
@@ -54,11 +57,10 @@
     "--spectrum-clear-button-background-color-quiet",
     "--spectrum-clear-button-height",
     "--spectrum-clear-button-icon-color",
+    "--spectrum-clear-button-icon-color-disabled",
     "--spectrum-clear-button-icon-color-down",
-    "--spectrum-clear-button-icon-color-down-disabled",
     "--spectrum-clear-button-icon-color-down-over-background",
     "--spectrum-clear-button-icon-color-hover",
-    "--spectrum-clear-button-icon-color-hover-disabled",
     "--spectrum-clear-button-icon-color-hover-over-background",
     "--spectrum-clear-button-icon-color-key-focus",
     "--spectrum-clear-button-icon-color-key-focus-over-background",
@@ -72,6 +74,8 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
     "--spectrum-disabled-content-color",
+    "--spectrum-disabled-static-black-content-color",
+    "--spectrum-disabled-static-white-content-color",
     "--spectrum-gray-200",
     "--spectrum-gray-300",
     "--spectrum-gray-400",
@@ -91,5 +95,8 @@
     "--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus"
   ],
   "passthroughs": [],
-  "high-contrast": ["--highcontrast-clear-button-icon-color-hover"]
+  "high-contrast": [
+    "--highcontrast-clear-button-icon-color-disabled",
+    "--highcontrast-clear-button-icon-color-hover"
+  ]
 }