Bug 1747423 - Remove the @buttonState* preprocessor vars from zoom controls in panelUI.inc.css. r=dao

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

browser/themes/addons/dark/manifest.json

@@ -52,7 +52,6 @@
       "input_color": "rgb(251,251,254)",
       "input_border": "#8f8f9d",
       "input_border_error": "rgb(255, 132, 138)",
-      "zoom_controls": "rgb(74,74,85)",
       "autocomplete_popup_separator": "rgb(82,82,94)",
       "appmenu_update_icon_color": "#54FFBD",
       "appmenu_info_icon_color": "#80EBFF",

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

@@ -1021,7 +1021,8 @@ panelview .toolbarbutton-1,
   padding: 4px;
 }
 
-#appMenu-zoom-controls2 > .subviewbutton:is(@buttonStateHover@, @buttonStateActive@) {
+/* hover and active color changes are applied to child elements not the button itself */
+#appMenu-zoom-controls2 > .subviewbutton:not([disabled]):is(:hover, :hover:active) {
   color: unset;
   background-color: unset;
 }
@@ -1040,7 +1041,7 @@ panelview .toolbarbutton-1,
   -moz-context-properties: fill, stroke;
   fill: var(--button-color);
   /* the stroke color is used to fill the circle in the icon */
-  stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace));
+  stroke: var(--button-bgcolor);
   border-radius: 50%;
   padding: 0;
 }
@@ -1052,24 +1053,24 @@ panelview .toolbarbutton-1,
 
 #appMenu-fullscreen-button2 > .toolbarbutton-icon {
   padding: 1px;
-  background-color: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace));
+  background-color: var(--button-bgcolor);
 }
 
-#appMenu-zoomReset-button2@buttonStateHover@ > .toolbarbutton-text,
-#appMenu-fullscreen-button2@buttonStateHover@ > .toolbarbutton-icon {
+#appMenu-zoomReset-button2:not([disabled]):hover > .toolbarbutton-text,
+#appMenu-fullscreen-button2:not([disabled]):hover > .toolbarbutton-icon {
   background-color: var(--panel-item-hover-bgcolor);
 }
-#appMenu-zoomReduce-button2@buttonStateHover@ > .toolbarbutton-icon,
-#appMenu-zoomEnlarge-button2@buttonStateHover@ > .toolbarbutton-icon {
+#appMenu-zoomReduce-button2:not([disabled]):hover > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2:not([disabled]):hover > .toolbarbutton-icon {
   stroke: var(--panel-item-hover-bgcolor);
 }
 
-#appMenu-zoomReset-button2@buttonStateActive@ > .toolbarbutton-text,
-#appMenu-fullscreen-button2@buttonStateActive@ > .toolbarbutton-icon {
+#appMenu-zoomReset-button2:not([disabled]):active:hover > .toolbarbutton-text,
+#appMenu-fullscreen-button2:not([disabled]):active:hover > .toolbarbutton-icon {
   background-color: var(--panel-item-active-bgcolor);
 }
-#appMenu-zoomReduce-button2@buttonStateActive@ > .toolbarbutton-icon,
-#appMenu-zoomEnlarge-button2@buttonStateActive@ > .toolbarbutton-icon {
+#appMenu-zoomReduce-button2:not([disabled]):active:hover > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2:not([disabled]):active:hover > .toolbarbutton-icon {
   stroke: var(--panel-item-active-bgcolor);
 }
 

toolkit/mozapps/extensions/default-theme/manifest.json

@@ -54,7 +54,6 @@
       "input_color": "rgb(251,251,254)",
       "input_border": "#8f8f9d",
       "input_border_error": "rgb(255, 132, 138)",
-      "zoom_controls": "rgb(74,74,85)",
       "autocomplete_popup_separator": "rgb(82,82,94)",
       "appmenu_update_icon_color": "#54FFBD",
       "appmenu_info_icon_color": "#80EBFF",
@@ -84,7 +83,6 @@
       "input_color": "--input-color",
       "input_border": "--input-border-color",
       "input_border_error": "--input-error-border-color",
-      "zoom_controls": "--zoom-controls-bgcolor",
       "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
       "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
       "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",