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

* chore(clear button): resolve conflict

* chore(clear button): adds changeset

* chore(clear button): remove declaration + unnecessary stylelint

* chore(clear button): add .spectrum-ClearButton.is-disabled selector

* chore(clear button): add .spectrum-ClearButton--staticWhite selectors

* chore(clear button): update changelog

Author: cdransf

.changeset/silly-donkeys-remember.md

@@ -0,0 +1,11 @@
+---
+"@spectrum-css/clearbutton": minor
+---
+
+Improves the visibility of the clear button disabled variant on static color backgrounds by more closely aligning styles with close button.
+
+- Adds `.spectrum-ClearButton--staticWhite` to the mod declarations associated with `.spectrum-ClearButton--overBackground` in advance of the latter being deprecated. The same class has been added to the `:focus` declaration for `spectrum-ClearButton--overBackground`.
+- Adds `--spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);` custom property for `.spectrum-ClearButton--staticWhite`.
+- Enables `cursor: pointer` for `.spectrum-ClearButton` when it is not disabled.
+- Disables hover, active, focus and focus-within states for `:disabled` `.spectrum-ClearButton` elements.
+- Adds color styles for `:disabled` and `.is-disabled` `.spectrum-ClearButton` `:disabled` icons.

components/clearbutton/index.css

@@ -46,6 +46,8 @@
 		--mod-clear-button-background-color-key-focus: transparent;
 	}
 
+	/* @deprecated .spectrum-ClearButton--overBackground */
+	&.spectrum-ClearButton--staticWhite,
 	&.spectrum-ClearButton--overBackground {
 		--mod-clear-button-icon-color: var(--spectrum-white);
 		--mod-clear-button-icon-color-hover: var(--spectrum-white);
@@ -65,13 +67,20 @@
 		--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 {
 	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;
@@ -86,24 +95,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 {
@@ -112,6 +121,13 @@
 	}
 }
 
+.spectrum-ClearButton:disabled,
+.spectrum-ClearButton.is-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));
 
@@ -124,6 +140,8 @@
 	justify-content: center;
 }
 
+/* @deprecated .spectrum-ClearButton--overBackground */
+.spectrum-ClearButton--staticWhite,
 .spectrum-ClearButton--overBackground {
 	&:focus-visible {
 		outline: none;

components/clearbutton/metadata/metadata.json

@@ -1,30 +1,34 @@
 {
   "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",
+    ".spectrum-ClearButton--staticWhite:focus-visible",
     ".spectrum-ClearButton-fill",
     ".spectrum-ClearButton.is-disabled",
+    ".spectrum-ClearButton.is-disabled .spectrum-ClearButton-icon",
     ".spectrum-ClearButton.spectrum-ClearButton--overBackground",
     ".spectrum-ClearButton.spectrum-ClearButton--quiet",
     ".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--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",
@@ -48,6 +52,7 @@
     "--spectrum-clear-button-background-color-key-focus",
     "--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-hover",
     "--spectrum-clear-button-icon-color-key-focus",
@@ -60,6 +65,7 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
     "--spectrum-disabled-content-color",
+    "--spectrum-disabled-static-white-content-color",
     "--spectrum-gray-200",
     "--spectrum-gray-300",
     "--spectrum-gray-400",
@@ -79,5 +85,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"
+  ]
 }