Bug 1708690 - Use :where in button.css to allow easier color overrides. r=Itiel

Differential Revision: https://phabricator.services.mozilla.com/D113965

browser/themes/shared/controlcenter/panel.inc.css

@@ -236,7 +236,7 @@
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: .6;
-  color: inherit !important; /* !important overrides :hover and :active:hover colors from button.css on Mac and Linux */
+  color: inherit;
 }
 
 .identity-popup-expander:-moz-locale-dir(ltr) {
@@ -957,8 +957,7 @@ description#identity-popup-content-verifier,
   min-width: 0;
   padding: 2px;
   background-color: var(--button-bgcolor);
-  /* !important overrides :hover and :active colors from button.css */
-  color: inherit !important;
+  color: var(--button-color);
   opacity: 0.6;
   border-radius: 4px;
 }

browser/themes/shared/ctrlTab.inc.css

@@ -23,8 +23,7 @@
 .ctrlTab-preview,
 #ctrlTab-showAll {
   appearance: none;
-  /* !important overrides the :hover color from button.css on Linux */
-  color: inherit !important;
+  color: inherit;
   /* remove the :-moz-focusring outline from button.css on Windows */
   outline: none !important;
   margin: 0;

browser/themes/shared/customizableui/customizeMode.inc.css

@@ -74,8 +74,7 @@
 
 .customizationmode-checkbox:not(:-moz-lwtheme, [disabled]),
 .customizationmode-button {
-  /* !important overrides :hover:active color from button.css on Mac */
-  color: rgb(71, 71, 71) !important;
+  color: rgb(71, 71, 71);
 }
 
 .customizationmode-checkbox[disabled]:-moz-lwtheme {

browser/themes/shared/customizableui/panelUI.inc.css

@@ -2852,16 +2852,14 @@ panelview:not([mainview]) #PanelUI-whatsNew-title {
 
 .PanelUI-profiler-button-primary {
   background-color: #0060DF;
-  /* The !important designation here is to overcome the specificity of the button.css
-     styles that are being applied on linux for hovers. */
-  color: #fff !important;
+  color: #fff;
 }
 
 .PanelUI-profiler-button-primary:hover {
   background-color: #003eaa;
 }
 
-.PanelUI-profiler-button-primary:active {
+.PanelUI-profiler-button-primary:active:hover {
   background-color: #002275;
 }
 

browser/themes/shared/downloads/downloads.inc.css

@@ -328,7 +328,7 @@ button.downloadButton {
   border: none;
   background: transparent;
   padding: 0;
-  color: inherit !important /* !important overrides button.css on Mac and Linux */;
+  color: inherit;
 }
 
 .downloadButton > .button-box > .button-icon {

browser/themes/shared/places/editBookmarkPanel.inc.css

@@ -222,7 +222,7 @@ html|img#editBookmarkPanelFavicon[src] {
   margin-inline-start: 4px;
   min-width: 32px;
   min-height: 32px;
-  color: var(--button-color, ButtonText);
+  color: var(--button-color);
   background-color: var(--button-bgcolor);
 }
 

browser/themes/shared/searchbar.inc.css

@@ -111,7 +111,7 @@
 
 .searchbar-engine-one-off-item[selected] {
   background-color: var(--autocomplete-popup-highlight-background);
-  color: var(--autocomplete-popup-highlight-color) !important; /* Override button.css on Linux */
+  color: var(--autocomplete-popup-highlight-color);
 }
 
 .searchbar-engine-one-off-item > .button-box {

toolkit/themes/linux/global/button.css

@@ -30,19 +30,19 @@ button {
 
 /* .......... hover state .......... */
 
-button:hover:not(:active,[disabled="true"],[open="true"],[checked="true"],[default="true"]) {
+button:where(:hover:not([checked="true"], [default="true"])) {
   color: -moz-buttonhovertext;
 }
 
 /* .......... active state .......... */
 
-button:is(:hover:active, [open="true"]):not([default="true"], [disabled="true"]) {
+button:where(:hover:active, [open="true"]):where(:not([default="true"])) {
   color: -moz-gtk-buttonactivetext;
 }
 
 /* .......... disabled state .......... */
 
-button[disabled="true"] {
+button:where([disabled="true"]) {
   color: GrayText;
 }
 

toolkit/themes/osx/global/button.css

@@ -13,19 +13,19 @@ button {
   text-shadow: none;
 }
 
-button:not([disabled="true"]):hover:active {
+button:where(:hover:active) {
   color: -moz-mac-buttonactivetext;
 }
 
 /* When the window isn't focused, the default button background isn't drawn,
  * so don't change the text color then: */
-button[default="true"]:not([disabled="true"], :-moz-window-inactive) {
+button:where([default="true"]:not(:-moz-window-inactive)) {
   color: -moz-mac-defaultbuttontext;
 }
 
 /* Likewise, when active (mousedown) but not hovering, the default button
  * background isn't drawn, override the previous selector for that case: */
-button[default="true"]:not(:hover):active {
+button:where([default="true"]:active:not(:hover)) {
   color: ButtonText;
 }
 
@@ -41,7 +41,7 @@ button[type="default"] {
 
 /* .......... disabled state .......... */
 
-button[disabled="true"] {
+button:where([disabled="true"]) {
   color: GrayText;
 }
 

toolkit/themes/shared/global.inc.css

@@ -169,8 +169,7 @@ xul|label[disabled="true"] {
 .panel-footer > xul|button {
   appearance: none;
   border-top: 1px solid var(--panel-separator-color);
-  /* !important overrides :hover and :active colors from button.css: */
-  color: inherit !important;
+  color: inherit;
   min-width: 0;
   margin: 0;
   padding: .9em 2px;

toolkit/themes/shared/in-content/common.inc.css

@@ -383,8 +383,7 @@ html|input[type="color"],
 xul|menulist {
   appearance: none;
   min-height: 32px;
-  /* !important overrides button.css for disabled and default XUL buttons: */
-  color: inherit !important;
+  color: inherit;
   border: 1px solid transparent; /* shows up in high-contrast mode */
   border-radius: var(--in-content-button-border-radius);
   background-color: var(--in-content-button-background);

toolkit/themes/shared/notification.css

@@ -147,8 +147,7 @@ notification[type="critical"] > hbox > .messageImage {
   border: 1px solid transparent;
   border-radius: 4px;
   background-color: var(--notification-button-background);
-  /* Override button.css hover & active styles */
-  color: var(--notification-button-text) !important;
+  color: var(--notification-button-text);
   padding: 0 6px;
   margin: 4px 8px;
   height: 24px;

toolkit/themes/shared/popupnotification.inc.css

@@ -174,7 +174,7 @@ popupnotification {
 }
 
 .panel-footer > button {
-  color: var(--button-color);
+  color: var(--button-color, inherit);
 }
 
 .panel-footer:not(.panel-footer-menulike) > button {
@@ -195,16 +195,11 @@ popupnotification {
 }
 
 .panel-footer > button:not([disabled]):hover:active {
-  /**
-   * We override the colour here because on macOS, buttons default to
-   * having :hover:active buttons have color -moz-mac-buttonactivetext
-   */
-  color: var(--button-color);
   background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
 }
 
 .panel-footer > button:not([disabled])[default] {
-  color: var(--buttons-primary-button-color, -moz-accent-color-foreground) !important;
+  color: var(--buttons-primary-button-color, -moz-accent-color-foreground);
   background-color: var(--buttons-primary-button-bgcolor, -moz-accent-color);
 }
 

toolkit/themes/windows/global/button.css

@@ -52,12 +52,12 @@ button:-moz-focusring {
 
 /* .......... disabled state .......... */
 
-button[disabled="true"] {
+button:where([disabled="true"]) {
   color: GrayText;
 }
 
 @media (-moz-windows-classic) {
-  button[disabled="true"] {
+  button:where([disabled="true"]) {
     color: ThreeDShadow;
     text-shadow: 1px 1px ThreeDHighlight;
   }