fix(*): scope actionbuttion quiet background mod to cases where it's not is-selected

Author: cdransf

components/actionbutton/index.css

@@ -16,21 +16,22 @@
 	--spectrum-actionbutton-background-color-hover: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-gray-100)));
 	--spectrum-actionbutton-background-color-down: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-gray-200)));
 	--spectrum-actionbutton-background-color-focus: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-gray-100)));
+	--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100);
+
+	--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
+	--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
+	--spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
+	--spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
 
 	--spectrum-actionbutton-border-color-default: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-gray-400)));
 	--spectrum-actionbutton-border-color-hover: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-gray-500)));
 	--spectrum-actionbutton-border-color-down: var(--highcontrast-actionbutton-border-color-down, var(--mod-actionbutton-border-color-down, var(--spectrum-gray-600)));
 	--spectrum-actionbutton-border-color-focus: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-gray-500)));
 	--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
 
-	--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100);
+	--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50);
 	--spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
 
-	--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
-	--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
-	--spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
-	--spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
-
 	--spectrum-actionbutton-animation-duration: var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100));
 	--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-medium));
 	--spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100));
@@ -61,7 +62,9 @@
 	}
 
 	&.spectrum-ActionButton--quiet {
-		--mod-actionbutton-background-color-default: transparent;
+		&:not(.is-selected) {
+			--mod-actionbutton-background-color-default: transparent;
+		}
 		--mod-actionbutton-background-color-hover: var(--spectrum-gray-100);
 		--mod-actionbutton-background-color-down: var(--spectrum-gray-200);
 		--mod-actionbutton-background-color-focus: var(--spectrum-gray-100);
@@ -74,10 +77,10 @@
 		--mod-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
 
 		--spectrum-actionbutton-background-color-disabled: transparent;
+		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200);
 
 		&,
 		&.spectrum-ActionButton--quiet {
-			--mod-actionbutton-background-color-default: transparent;
 			--mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-400);
 			--mod-actionbutton-background-color-down: var(--spectrum-transparent-black-500);
 			--mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-400);
@@ -95,7 +98,6 @@
 
 		&,
 		&.spectrum-ActionButton--quiet {
-			--mod-actionbutton-background-color-default: transparent;
 			--mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-400);
 			--mod-actionbutton-background-color-down: var(--spectrum-transparent-white-500);
 			--mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-400);
@@ -109,16 +111,10 @@
 		--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-actionbutton-background-color-selected-focus));
 		--mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled);
 
-		--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-25));
-		--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-25));
-		--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-25));
-		--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-25));
-
-		--mod-actionbutton-border-color-default: transparent;
-		--mod-actionbutton-border-color-hover: transparent;
-		--mod-actionbutton-border-color-down: transparent;
-		--mod-actionbutton-border-color-focus: transparent;
-		--mod-actionbutton-border-color-disabled: transparent;
+		--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-actionbutton-content-color-selected));
+		--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-actionbutton-content-color-selected));
+		--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-actionbutton-content-color-selected));
+		--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-actionbutton-content-color-selected));
 
 		&.spectrum-ActionButton--emphasized {
 			--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default));

components/actionbutton/metadata/metadata.json

@@ -19,6 +19,7 @@
     ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
     ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet:not(.is-selected)",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
@@ -114,6 +115,7 @@
     "--spectrum-actionbutton-content-color-down",
     "--spectrum-actionbutton-content-color-focus",
     "--spectrum-actionbutton-content-color-hover",
+    "--spectrum-actionbutton-content-color-selected",
     "--spectrum-actionbutton-edge-to-hold-icon",
     "--spectrum-actionbutton-edge-to-text",
     "--spectrum-actionbutton-edge-to-visual",
@@ -172,7 +174,6 @@
     "--spectrum-font-size-75",
     "--spectrum-gray-100",
     "--spectrum-gray-200",
-    "--spectrum-gray-25",
     "--spectrum-gray-400",
     "--spectrum-gray-50",
     "--spectrum-gray-500",
@@ -194,6 +195,7 @@
     "--spectrum-text-to-visual-50",
     "--spectrum-text-to-visual-75",
     "--spectrum-transparent-black-100",
+    "--spectrum-transparent-black-200",
     "--spectrum-transparent-black-400",
     "--spectrum-transparent-black-500",
     "--spectrum-transparent-black-600",