Bug 1811983 - In high contrast mode, reduce the opacity of disabled toolbar buttons in order to increase contrast with the enabled state. r=ayeddi,Itiel

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

browser/themes/shared/customizableui/customizeMode.css

@@ -84,7 +84,7 @@
 
     .customizationmode-checkbox[disabled]:-moz-lwtheme {
       color: inherit;
-      opacity: 0.4;
+      opacity: var(--toolbarbutton-disabled-opacity);
     }
 
     #customization-reset-button,
@@ -143,7 +143,7 @@
     }
 
     .customizationmode-button[disabled="true"] {
-      opacity: .5;
+      opacity: var(--toolbarbutton-disabled-opacity);
     }
   }
 }
@@ -395,12 +395,15 @@ toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox {
   margin-bottom: -1px;
 }
 
-/* In customize mode, the overflow button should look both 'disabled' and 'open'.
- * So we make the button fully opaque but fill the icon semi-transparent. */
-#nav-bar[customizing] > .overflow-button > .toolbarbutton-icon {
+/* Special-case the overflow and the hamburger button so they show up disabled
+   in customize mode. */
+:is(#nav-bar-overflow-button, #PanelUI-menu-button)[disabled] {
+  fill-opacity: var(--toolbarbutton-disabled-opacity);
+}
+
+/* The overflow button should look both disabled and open. */
+#nav-bar[customizing] > #nav-bar-overflow-button > .toolbarbutton-icon {
   background-color: var(--toolbarbutton-active-background);
-  opacity: 1;
-  fill-opacity: 0.4;
 }
 
 #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {

browser/themes/shared/toolbarbuttons.css

@@ -41,11 +41,8 @@
 
 /* ::::: primary toolbar buttons ::::: */
 
-:root:not([customizing]) .toolbarbutton-1[disabled=true],
-/* specialcase the overflow and the hamburger button so they show up disabled in customize mode. */
-#nav-bar-overflow-button[disabled=true],
-#PanelUI-menu-button[disabled=true] {
-  opacity: 0.4;
+:root:not([customizing]) .toolbarbutton-1[disabled=true] {
+  opacity: var(--toolbarbutton-disabled-opacity);
 }
 
 .toolbarbutton-1 > .toolbarbutton-icon {

toolkit/themes/shared/arrowscrollbox.css

@@ -13,7 +13,7 @@
 /* Scroll arrows */
 
 toolbarbutton {
-  color: inherit !important; /* override any color changes for toolbar buttons in e.g. disabled or hover states */
+  color: inherit;
   list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
@@ -22,7 +22,7 @@ toolbarbutton {
 }
 
 toolbarbutton[disabled="true"] {
-  fill-opacity: 0.4;
+  fill-opacity: var(--toolbarbutton-disabled-opacity);
 }
 
 :host([orient="horizontal"]) > toolbarbutton {

toolkit/themes/shared/findbar.css

@@ -140,7 +140,7 @@ html|input.findbar-textbox[flash="true"] {
 
 .findbar-find-previous[disabled="true"] > .toolbarbutton-icon,
 .findbar-find-next[disabled="true"] > .toolbarbutton-icon {
-  opacity: .4;
+  opacity: var(--toolbarbutton-disabled-opacity);
 }
 
 /* Checkboxes & Labels */

toolkit/themes/shared/global-shared.css

@@ -34,7 +34,9 @@
   --panel-disabled-color: GrayText;
 
   --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
+
   --toolbarbutton-icon-fill: currentColor;
+  --toolbarbutton-disabled-opacity: 0.4;
 
   --toolbar-field-background-color: Field;
   --toolbar-field-color: FieldText;
@@ -51,6 +53,12 @@
   --toolbar-field-border-color: transparent;
 }
 
+@media (prefers-contrast) {
+  :root:not(:-moz-lwtheme) {
+    --toolbarbutton-disabled-opacity: 0.3;
+  }
+}
+
 :is(menupopup, panel)[type=arrow] {
   --panel-background: var(--arrowpanel-background);
   --panel-color: var(--arrowpanel-color);