Bug 1676680 - Unify/simplify the dark theme selectors. r=aleca

--HG-- rename : mail/base/content/quickFilterBar.css => mail/themes/shared/mail/quickFilterBar.css
2020-11-07 23:40:45 +01:00 · 2020-11-07 23:40:45 +01:00 · e6c00853d2
--- a/calendar/base/content/dialogs/calendar-event-dialog.xhtml
+++ b/calendar/base/content/dialogs/calendar-event-dialog.xhtml
@ -577,7 +577,7 @@
    <!-- toolboxid is set here since we move the toolbar around in tabs -->
    <toolbar is="customizable-toolbar" id="event-toolbar"
             toolboxid="event-toolbox"
-             class="chromeclass-toolbar"
+             class="chromeclass-toolbar themeable-full"
             customizable="true"
             labelalign="end"
             defaultlabelalign="end"
--- a/calendar/base/content/dialogs/calendar-summary-dialog.xhtml
+++ b/calendar/base/content/dialogs/calendar-summary-dialog.xhtml
@ -62,7 +62,7 @@
           defaultlabelalign="end">
    <toolbar id="summary-toolbar"
             toolboxid="summary-toolbox"
-             class="chromeclass-toolbar"
+             class="chromeclass-toolbar themeable-full"
             customizable="false"
             labelalign="end"
             defaultlabelalign="end">
--- a/calendar/base/themes/common/calendar-task-view.css
+++ b/calendar/base/themes/common/calendar-task-view.css
@ -56,7 +56,7 @@
 #other-actions-box {
    display: flex;
    justify-content: end;
-    padding-bottom: 0.3em;
+    padding-block: 2px 0.3em;
 }

 #task-addition-box {
@ -143,6 +143,7 @@

 #view-task-edit-field {
    margin: 5px;
+    padding-block: 0;
 }

 .task-edit-field[readonly="true"] {
--- a/calendar/base/themes/linux/calendar-task-view.css
+++ b/calendar/base/themes/linux/calendar-task-view.css
@ -24,10 +24,6 @@
    padding-top: 1px;
 }

-#other-actions-box {
-    margin-inline-end: -1px;
-}
-
 #task-text-filter-field {
    margin: 5px;
 }
--- a/calendar/base/themes/osx/calendar-task-view.css
+++ b/calendar/base/themes/osx/calendar-task-view.css
@ -11,19 +11,13 @@
    overflow: hidden;
 }

-#other-actions-box {
-    margin-inline-end: 3px;
-}
-
 #task-addition-box {
-    background: linear-gradient(#eaeaea, #d1d1d1);
    border-bottom-color: #bebebe
 }

 /* Hide the search glass */
 .task-edit-field {
-    margin-top: 0;
-    margin-bottom: 0;
+    margin-block: 0;
    background-image: none;
    padding-inline-start: 4px !important;
 }
@ -44,5 +38,5 @@
 }

 #calendar-add-task-button > .toolbarbutton-text {
-    margin-inline-start: 0px;
+    margin-inline-start: 0;
 }
--- a/calendar/base/themes/windows/calendar-task-view.css
+++ b/calendar/base/themes/windows/calendar-task-view.css
@ -12,13 +12,8 @@
    overflow: hidden;
 }

-#other-actions-box {
-    margin-inline-end: -2px;
-}
-
 #task-text-filter-field {
-    margin-top: 5px;
-    margin-bottom: 5px;
+    margin-block: 5px;
 }

 #task-text-filter-field .textbox-search-icons {
@ -67,7 +62,6 @@
       (-moz-os-version: windows-win7) {
    #view-task-edit-field,
    #task-text-filter-field {
-        margin-top: 4px;
-        margin-bottom: 4px;
+        margin-block: 4px;
    }
 }
--- a/calendar/lightning/content/calendar-tab-panels.inc.xhtml
+++ b/calendar/lightning/content/calendar-tab-panels.inc.xhtml
@ -64,7 +64,7 @@
                       tooltiptext="&lightning.toolbar.appmenuButton1.tooltip;"/>
      </toolbarpalette>
      <toolbar is="customizable-toolbar" id="calendar-toolbar2"
-               class="inline-toolbar chromeclass-toolbar"
+               class="inline-toolbar chromeclass-toolbar themeable-full"
               toolbarname="&lightning.toolbar.calendar.name;"
               accesskey="&lightning.toolbar.calendar.name.accesskey;"
               fullscreentoolbar="true" mode="full"
@ -78,7 +78,7 @@
  <calendar-modevbox id="task-toolbox-container"
                     mode="task">
    <toolbox id="task-toolbox"
-             class="mail-toolbox"
+             class="mail-toolbox themeable-full"
             mode="full"
             defaultmode="full"
             iconsize="small"
@ -124,7 +124,7 @@
                       tooltiptext="&lightning.toolbar.appmenuButton1.tooltip;"/>
      </toolbarpalette>
      <toolbar is="customizable-toolbar" id="task-toolbar2"
-               class="inline-toolbar chromeclass-toolbar"
+               class="inline-toolbar chromeclass-toolbar themeable-full"
               toolbarname="&lightning.toolbar.task.name;"
               accesskey="&lightning.toolbar.task.name.accesskey;"
               fullscreentoolbar="true" mode="full"
@ -183,7 +183,7 @@
                      class="treenode-checkbox"
                      flex="1"
                      label="&calendar.list.header.label;"/>
-            <toolbarbutton class="toolbarbutton-1 calendar-list-create"
+            <toolbarbutton class="toolbarbutton-1 calendar-list-create themeable-brighttext"
                           command="calendar_new_calendar_command"
                           tooltiptext="&calendar.context.newserver.label;"/>
          </hbox>
@ -433,7 +433,7 @@
        <hbox id="calendar-deactivated-notification-location-tasks">
          <!-- Calendar deactivated notificationbox for tasks will be added here lazily. -->
        </hbox>
-        <hbox id="task-addition-box" align="center">
+        <hbox id="task-addition-box" class="themeable-brighttext" align="center">
          <box align="center" flex="1">
            <toolbarbutton id="calendar-add-task-button"
                           label="&calendar.newtask.button.label;"
@ -472,8 +472,8 @@
                hidden="true">
            <hbox id="calendar-task-details">
              <hbox id="other-actions-box">
-                <vbox id="task-actions-toolbox">
-                  <hbox id="task-actions-toolbar" class="toolbar">
+                <vbox id="task-actions-toolbox" class="inline-toolbox">
+                  <hbox id="task-actions-toolbar" class="themeable-brighttext">
                    <toolbarbutton id="task-actions-category"
                                   type="menu"
                                   wantdropmarker="true"
--- a/calendar/lightning/content/lightning-item-panel.inc.xhtml
+++ b/calendar/lightning/content/lightning-item-panel.inc.xhtml
@ -125,7 +125,7 @@
                   toolbarname="&event.menu.view.toolbars.event.label;"
                   accesskey="&event.menu.view.toolbars.event.accesskey;"
                   toolboxid="event-toolbox"
-                   class="chromeclass-toolbar inline-toolbar"
+                   class="chromeclass-toolbar inline-toolbar themeable-full"
                   customizable="true"
                   labelalign="end"
                   defaultlabelalign="end"
--- a/mail/base/content/SearchDialog.xhtml
+++ b/mail/base/content/SearchDialog.xhtml
@ -84,7 +84,7 @@
 #endif
  </keyset>

-    <vbox id="searchTerms" flex="3" persist="height">
+    <vbox id="searchTerms" class="themeable-brighttext" flex="3" persist="height">
      <vbox>
        <hbox align="center">
          <label value="&searchHeading.label;" accesskey="&searchHeading.accesskey;"
--- a/mail/base/content/mainMailToolbox.inc.xhtml
+++ b/mail/base/content/mainMailToolbox.inc.xhtml
@ -421,7 +421,7 @@
  -->

  <toolbar is="customizable-toolbar" id="mail-bar3"
-           class="inline-toolbar chromeclass-toolbar"
+           class="inline-toolbar chromeclass-toolbar themeable-full"
           toolbarname="&showMessengerToolbarCmd.label;"
           accesskey="&showMessengerToolbarCmd.accesskey;"
           fullscreentoolbar="true" mode="full"
--- a/mail/base/content/mainNavigationToolbox.inc.xhtml
+++ b/mail/base/content/mainNavigationToolbox.inc.xhtml
@ -18,7 +18,7 @@
 <toolbox id="navigation-toolbox" class="toolbox-top" labelalign="end" defaultlabelalign="end">
  <!-- Menu -->
  <toolbar is="customizable-toolbar" id="mail-toolbar-menubar2"
-           class="chromeclass-menubar"
+           class="chromeclass-menubar themeable-full"
           type="menubar"
           customizable="true"
           toolboxid="mail-toolbox"
--- a/mail/base/content/messenger.xhtml
+++ b/mail/base/content/messenger.xhtml
@ -562,6 +562,7 @@
      </box>

      <toolbar is="customizable-toolbar" id="tabbar-toolbar" toolboxid="mail-toolbox"
+               class="themeable-full"
               context="toolbar-context-menu"
               customizable="true"
               mode="icons" defaultmode="icons" lockmode="true"
@ -816,7 +817,7 @@
    </tabmail>
    <vbox id="contentTab" collapsed="true">
      <vbox flex="1" class="contentTabInstance">
-        <vbox id="dummycontenttoolbox" class="contentTabToolbox">
+        <vbox id="dummycontenttoolbox" class="contentTabToolbox themeable-full">
          <hbox id="dummycontenttoolbar" class="contentTabToolbar">
            <toolbarbutton class="back-btn nav-button"
                           tooltiptext="&browseBackButton.tooltip;"
@ -841,7 +842,7 @@

    <vbox id="chromeTab" collapsed="true">
      <vbox flex="1" class="chromeTabInstance">
-        <vbox id="dummychrometoolbox" class="contentTabToolbox">
+        <vbox id="dummychrometoolbox" class="contentTabToolbox themeable-full">
          <hbox id="dummychrometoolbar" class="contentTabToolbar"></hbox>
        </vbox>
        <browser id="dummychromebrowser" flex="1"
@ -853,7 +854,7 @@

    <vbox id="glodaTab" collapsed="true">
      <vbox flex="1" class="chromeTabInstance">
-        <vbox class="contentTabToolbox">
+        <vbox class="contentTabToolbox themeable-full">
          <hbox class="glodaTabToolbar inline-toolbar chromeclass-toolbar" flex="1">
            <spacer flex="1" />
            <spacer flex="1" />
--- a/mail/base/content/msgHdrView.inc.xhtml
+++ b/mail/base/content/msgHdrView.inc.xhtml
@ -18,7 +18,7 @@
                              <hbox id="expandedHeadersTopBox">

                                <vbox id="header-view-toolbox" class="inline-toolbox">
-                                  <hbox id="header-view-toolbar" class="toolbar">
+                                  <hbox id="header-view-toolbar" class="themeable-brighttext">
                                    <!-- XXXdmose need to move these commands to a controller, either
                                         on the header view, the message pane, or the default
                                         controller -->
@ -441,7 +441,7 @@
                                  <hbox id="cryptoBox" class="crypto-container" align="center"
                                        collapsed="true">
                                    <html:button id="encryptionTechBtn"
-                                                 class="toolbarbutton-1 crypto-button"
+                                                 class="toolbarbutton-1 crypto-button themeable-brighttext"
                                                 onclick="showMessageReadSecurityInfo();"
                                                 onkeypress="if (event.key == 'Enter') { showMessageReadSecurityInfo(); }">
                                      <html:span class="crypto-label"></html:span>
--- a/mail/base/content/quickFilterBar.inc.xhtml
+++ b/mail/base/content/quickFilterBar.inc.xhtml
@ -2,7 +2,7 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.

-    <vbox id="quick-filter-bar">
+    <vbox id="quick-filter-bar" class="themeable-brighttext">
      <hbox id="quick-filter-bar-main-bar" align="center"
            onoverflow="QuickFilterBarMuxer.onOverflow();"
            >
--- a/mail/base/jar.mn
+++ b/mail/base/jar.mn
@ -98,7 +98,6 @@ messenger.jar:
    content/messenger/glodaFacetVis.js              (content/glodaFacetVis.js)
    content/messenger/glodaFacet.js                 (content/glodaFacet.js)
    content/messenger/quickFilterBar.js             (content/quickFilterBar.js)
-    content/messenger/quickFilterBar.css            (content/quickFilterBar.css)
    content/messenger/browserRequest.js             (content/browserRequest.js)
    content/messenger/browserRequest.xhtml          (content/browserRequest.xhtml)
 *   content/messenger/safeMode.xhtml                (content/safeMode.xhtml)
--- a/mail/components/addrbook/content/abContactsPanel.xhtml
+++ b/mail/components/addrbook/content/abContactsPanel.xhtml
@ -102,14 +102,14 @@

  <vbox id="results_box" flex="1">
    <separator class="thin"/>
-    <hbox id="AbPickerHeader" class="toolbar">
+    <hbox id="AbPickerHeader" class="themeable-full">
      <label value="&addressbookPicker.label;" accesskey="&addressbookPicker.accesskey;" control="addressbookList"/>
      <spacer flex="1"/>
      <button id="abContextMenuButton"
              tooltiptext="&abContextMenuButton.tooltip;"
              oncommand="abContextMenuButtonOnCommand(event);"/>
    </hbox>
-    <hbox id="panel-bar" class="toolbar" align="center">
+    <hbox id="panel-bar" class="themeable-full" align="center">
      <menulist is="menulist-addrbooks" id="addressbookList"
                alladdressbooks="true"
                oncommand="AddressBookMenuListChange(this.value);"
--- a/mail/components/addrbook/content/abSearchDialog.xhtml
+++ b/mail/components/addrbook/content/abSearchDialog.xhtml
@ -58,7 +58,7 @@
    <command id="cmd_deleteCard" oncommand="onDelete();"/>
  </commandset>

-    <vbox id="searchTerms" flex="3" persist="height">
+    <vbox id="searchTerms" class="themeable-brighttext" flex="3" persist="height">
      <vbox>
        <hbox align="center">
          <label value="&abSearchHeading.label;" accesskey="&abSearchHeading.accesskey;" control="abPopup"/>
--- a/mail/components/addrbook/content/addressbook.xhtml
+++ b/mail/components/addrbook/content/addressbook.xhtml
@ -299,7 +299,7 @@
  </vbox>
 #endif
  <toolbar is="customizable-toolbar" id="addrbook-toolbar-menubar2"
-           class="chromeclass-menubar"
+           class="chromeclass-menubar themeable-full"
           type="menubar"
           customizable="true"
 #ifdef XP_MACOSX
@ -699,7 +699,8 @@
      </toolbaritem>
  </toolbarpalette>
  <!-- toolbar -->
-  <toolbar is="customizable-toolbar" id="ab-bar2" class="chromeclass-toolbar"
+  <toolbar is="customizable-toolbar" id="ab-bar2"
+           class="chromeclass-toolbar themeable-full"
           toolbarname="&showAbToolbarCmd.label;"
           accesskey="&showAbToolbarCmd.accesskey;"
           fullscreentoolbar="true" mode="full"
--- a/mail/components/compose/content/messengercompose.xhtml
+++ b/mail/components/compose/content/messengercompose.xhtml
@ -846,7 +846,7 @@
  <!-- Menu -->
  <!-- if you change the id of the menubar, be sure to update mailCore.js::CustomizeMailToolbar and MailToolboxCustomizeDone -->
  <toolbar is="customizable-toolbar" id="compose-toolbar-menubar2"
-           class="chromeclass-menubar"
+           class="chromeclass-menubar themeable-full"
           type="menubar"
           customizable="true"
 #ifdef XP_MACOSX
@ -2103,7 +2103,9 @@
                   type="checkbox" autoCheck="false"
                   command="cmd_toggleReturnReceipt"/>
  </toolbarpalette>
-  <toolbar is="customizable-toolbar" id="composeToolbar2" class="chromeclass-toolbar"
+  <toolbar is="customizable-toolbar"
+           id="composeToolbar2"
+           class="chromeclass-toolbar themeable-full"
           toolbarname="&showCompositionToolbarCmd.label;"
           accesskey="&showCompositionToolbarCmd.accesskey;"
           fullscreentoolbar="true" mode="full"
@ -2132,8 +2134,9 @@
    <splitter id="sidebar-splitter" hidden="true"/>

    <vbox id="headers-parent" flex="1">
-    <toolbox id="headers-box" class="toolbox-top" mode="icons">
+    <toolbox id="headers-box" class="toolbox-top themeable-full" mode="icons">
    <toolbar is="customizable-toolbar" id="MsgHeadersToolbar"
+             class="themeable-full"
             persist="collapsed"
             flex="1"
             customizable="true" nowindowdrag="true"
@ -2508,7 +2511,7 @@

    <toolbox id="FormatToolbox" mode="icons">
      <toolbar is="customizable-toolbar" id="FormatToolbar"
-               class="chromeclass-toolbar"
+               class="chromeclass-toolbar themeable-brighttext"
               persist="collapsed"
               customizable="true" nowindowdrag="true">
 #include editFormatButtons.inc.xhtml
--- a/mail/components/im/content/chat-conversation-info.js
+++ b/mail/components/im/content/chat-conversation-info.js
@ -81,7 +81,7 @@
                          hidden="hidden"/>
            </stack>
          </hbox>
-          <hbox class="otr-container"
+          <hbox class="otr-container themeable-brighttext"
                align="middle"
                hidden="true">
            <label class="otr-label"
--- a/mail/components/im/content/chat-messenger.inc.xhtml
+++ b/mail/components/im/content/chat-messenger.inc.xhtml
@ -7,7 +7,7 @@
                   mode="full" defaultmode="full"
                   labelalign="end" defaultlabelalign="end">
            <toolbar is="customizable-toolbar" id="chat-toolbar"
-                     class="inline-toolbar chromeclass-toolbar"
+                     class="inline-toolbar chromeclass-toolbar themeable-full"
                     fullscreentoolbar="true"
                     customizable="true"
                     context="chat-toolbar-context-menu"
--- a/mail/themes/linux/mail/compose/messengercompose.css
+++ b/mail/themes/linux/mail/compose/messengercompose.css
@ -237,42 +237,14 @@ menulist:-moz-locale-dir(rtl)::part(label-box) {
 }

 toolbarbutton.formatting-button {
-  appearance: none;
-  border: 1px solid transparent;
-  border-radius: var(--toolbarbutton-border-radius);
  margin: 1px;
-  color: inherit;
-  -moz-context-properties: fill;
-  fill: currentColor;
-  transition-property: background-color, border-color, box-shadow;
-  transition-duration: 150ms;
-}
-
-toolbarbutton.formatting-button:not([disabled="true"]):hover {
-  background: var(--toolbarbutton-hover-background);
-  border-color: var(--toolbarbutton-hover-bordercolor);
-  box-shadow: var(--toolbarbutton-hover-boxshadow);
-}
-
-toolbarbutton.formatting-button:not([disabled="true"]):is([open="true"],[checked="true"],:hover:active) {
-  background: var(--toolbarbutton-active-background);
-  border-color: var(--toolbarbutton-active-bordercolor);
-  box-shadow: var(--toolbarbutton-active-boxshadow);
 }

 .formatting-button > .toolbarbutton-menu-dropmarker {
  appearance: none !important;
-  list-style-image: url("chrome://messenger/skin/messengercompose/format-dropmarker.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
  margin-inline-start: 3px;
 }

-toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon,
-.formatting-button[disabled="true"] > .toolbarbutton-menu-dropmarker {
-  opacity: 0.4;
-}
-
 /* ..... smiley menu ..... */

 #smileButtonMenu .menu-iconic-left {
@ -283,12 +255,6 @@ toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon,

 /* ..... fg/bg color picker ..... */

-.ColorPickerLabel {
-  border: 1px inset ThreeDFace;
-  margin: 0;
-  padding: 2px;
-}
-
 .color-button {
  border: 1px inset ThreeDFace;
  padding: 0;
--- a/mail/themes/linux/mail/quickFilterBar.css
+++ b/mail/themes/linux/mail/quickFilterBar.css
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-@import url("chrome://messenger/content/quickFilterBar.css");
+@import url("chrome://messenger/skin/shared/quickFilterBar.css");

 /* :::: Filter Bar :::: */

--- a/mail/themes/osx/mail/compose/messengercompose.css
+++ b/mail/themes/osx/mail/compose/messengercompose.css
@ -295,37 +295,8 @@ toolbar[nowindowdrag="true"] {
 }

 toolbarbutton.formatting-button {
-  appearance: none;
-  border: 1px solid transparent;
-  border-radius: var(--toolbarbutton-border-radius);
  margin-inline: 1px;
  padding-inline: 4px;
-  -moz-context-properties: fill;
-  fill: currentColor;
-  transition-property: background-color, border-color, box-shadow;
-  transition-duration: 150ms;
-}
-
-toolbarbutton.formatting-button:not([disabled="true"]):hover {
-  background: var(--toolbarbutton-hover-background);
-  border-color: var(--toolbarbutton-hover-bordercolor);
-}
-
-toolbarbutton.formatting-button:not([disabled="true"]):is([open="true"],[checked="true"],:hover:active) {
-  background: var(--toolbarbutton-active-background);
-  border-color: var(--toolbarbutton-active-bordercolor);
-  box-shadow: var(--toolbarbutton-active-boxshadow);
-}
-
-.formatting-button > .toolbarbutton-menu-dropmarker {
-  list-style-image: url("chrome://messenger/skin/messengercompose/format-dropmarker.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
-
-toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon,
-.formatting-button[disabled="true"] > .toolbarbutton-menu-dropmarker {
-  opacity: 0.4;
 }

 #FontFaceSelect {
@ -339,12 +310,6 @@ toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon,

 /* ..... fg/bg color picker ..... */

-.ColorPickerLabel {
-  border: 1px inset ThreeDFace;
-  margin: 0;
-  padding: 2px;
-}
-
 .color-button {
  border: 1px solid #a0a0a0;
  padding: 0;
--- a/mail/themes/osx/mail/quickFilterBar.css
+++ b/mail/themes/osx/mail/quickFilterBar.css
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-@import url("chrome://messenger/content/quickFilterBar.css");
+@import url("chrome://messenger/skin/shared/quickFilterBar.css");

 /* :::: Filter Bar :::: */

--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@ -234,6 +234,7 @@
  skin/classic/messenger/shared/messageIcons.css              (../shared/mail/messageIcons.css)
  skin/classic/messenger/shared/messenger.css                 (../shared/mail/messenger.css)
  skin/classic/messenger/shared/messengercompose.css          (../shared/mail/messengercompose.css)
+  skin/classic/messenger/shared/quickFilterBar.css            (../shared/mail/quickFilterBar.css)
  skin/classic/messenger/shared/searchBox.css                 (../shared/mail/searchBox.css)
  skin/classic/messenger/shared/searchDialog.css              (../shared/mail/searchDialog.css)
  skin/classic/messenger/shared/tabmail.css                   (../shared/mail/tabmail.css)
--- a/mail/themes/shared/mail/mailWindow1.css
+++ b/mail/themes/shared/mail/mailWindow1.css
@ -100,17 +100,6 @@ treechildren::-moz-tree-cell-text(dummy) {
  color: var(--lwt-text-color);
 }

-:root[lwt-tree-brighttext] #quick-filter-bar {
-  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background);
-  --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background);
-
-  --toolbarbutton-checked-background: var(--lwt-toolbarbutton-hover-background);
-
-  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background);
-  --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background);
-  --toolbarbutton-active-boxshadow: none;
-}
-
 :root[lwt-tree] #qfb-qs-textbox {
  background-color: var(--lwt-toolbar-field-background-color, hsla(0, 0%, 100%, .8));
  color: var(--lwt-toolbar-field-color, black);
--- a/mail/themes/shared/mail/messenger.css
+++ b/mail/themes/shared/mail/messenger.css
@ -93,12 +93,8 @@ toolbar[brighttext] {
 }

 #FindToolbar:-moz-lwtheme,
-.contentTabToolbox:-moz-lwtheme,
-#task-addition-box:-moz-lwtheme,
-#ab-toolbox > toolbar:-moz-lwtheme,
-.mail-toolbox > toolbar:-moz-lwtheme,
-#compose-toolbox > toolbar:-moz-lwtheme,
-#navigation-toolbox > toolbar:-moz-lwtheme {
+.themeable-full:-moz-lwtheme,
+.themeable-brighttext:-moz-lwtheme {
  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background,
                                        rgba(0, 0, 0, .1));
  --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background,
@ -115,20 +111,9 @@ toolbar[brighttext] {
                                                    rgba(0, 0, 0, .15));
 }

-.toolbar[brighttext],
-.contentTabToolbox[brighttext],
-#task-addition-box[brighttext],
-#header-view-toolbar[brighttext],
-#ab-toolbox > toolbar[brighttext],
-.mail-toolbox > toolbar[brighttext],
-#event-toolbox > toolbar[brighttext],
-#compose-toolbox > toolbar[brighttext],
-#headers-box > toolbar[brighttext],
-#FormatToolbox > toolbar[brighttext],
-:root[lwt-tree-brighttext] .otr-container,
-:root[lwt-tree-brighttext] .crypto-button,
-:root[lwt-tree-brighttext] .calendar-list-create,
-:root[lwt-tree-brighttext] #searchTerms {
+.themeable-full[brighttext],
+:root:-moz-lwtheme-brighttext .themeable-full,
+:root[lwt-tree-brighttext] .themeable-brighttext {
  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background,
                                        rgba(255, 255, 255, .25));
  --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background,
--- a/mail/themes/shared/mail/messengercompose.css
+++ b/mail/themes/shared/mail/messengercompose.css
@ -402,10 +402,56 @@ menulist::part(description) {
  display: none;
 }

+toolbarbutton.formatting-button {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: var(--toolbarbutton-border-radius);
+  color: inherit;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  transition-property: background-color, border-color, box-shadow;
+  transition-duration: 150ms;
+}
+
+toolbarbutton.formatting-button:not([disabled="true"]):hover {
+  background: var(--toolbarbutton-hover-background);
+  border-color: var(--toolbarbutton-hover-bordercolor);
+  box-shadow: var(--toolbarbutton-hover-boxshadow);
+}
+
+toolbarbutton.formatting-button:not([disabled="true"]):is([open="true"],[checked="true"],:hover:active) {
+  background: var(--toolbarbutton-checked-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+}
+
+toolbarbutton.formatting-button:not([disabled="true"]):is([open="true"],:hover:active) {
+  background: var(--toolbarbutton-active-background) !important;
+}
+
+.formatting-button > .toolbarbutton-menu-dropmarker {
+  list-style-image: url("chrome://messenger/skin/messengercompose/format-dropmarker.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon,
+.formatting-button[disabled="true"] > .toolbarbutton-menu-dropmarker {
+  opacity: 0.4;
+}
+
 #FontFaceSelect {
  max-width: 35ch;
 }

+/* ..... fg/bg color picker ..... */
+
+.ColorPickerLabel {
+  border: 1px inset ThreeDFace;
+  margin: 0;
+  padding: 2px;
+}
+
 #TextColorButton {
  margin-block: 2px 9px;
  margin-inline: 2px 9px;
--- a/mail/themes/shared/mail/quickFilterBar.css
+++ b/mail/themes/shared/mail/quickFilterBar.css
--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@ -436,7 +436,7 @@
 }

 .nav-button:not([disabled="true"]):hover {
-  background-color: #bebebe;
+  background-color: var(--toolbarbutton-hover-background);
  cursor: pointer;
 }

--- a/mail/themes/windows/mail/compose/messengercompose.css
+++ b/mail/themes/windows/mail/compose/messengercompose.css
@ -184,52 +184,11 @@
 }

 toolbarbutton.formatting-button {
-  appearance: none;
-  border: 1px solid transparent;
  margin: 1px;
-  -moz-context-properties: fill;
-  fill: currentColor;
-  transition-property: background-color, border-color, box-shadow;
-  transition-duration: 150ms;
-}
-
-@media (-moz-os-version: windows-win7) {
-  toolbarbutton.formatting-button {
-    border-radius: 2px;
-  }
-}
-
-toolbarbutton.formatting-button:not([disabled="true"]):hover {
-  background: var(--toolbarbutton-hover-background);
-  border-color: var(--toolbarbutton-hover-bordercolor);
-  box-shadow: var(--toolbarbutton-hover-boxshadow);
-}
-
-toolbarbutton.formatting-button:not([disabled="true"]):is([open="true"],[checked="true"],:hover:active) {
-  background: var(--toolbarbutton-active-background);
-  border-color: var(--toolbarbutton-active-bordercolor);
-  box-shadow: var(--toolbarbutton-active-boxshadow);
-}
-
-.formatting-button > .toolbarbutton-menu-dropmarker {
-  list-style-image: url("chrome://messenger/skin/messengercompose/format-dropmarker.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
-
-toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon,
-.formatting-button[disabled="true"] > .toolbarbutton-menu-dropmarker {
-  opacity: 0.4;
 }

 /* ..... fg/bg color picker ..... */

-.ColorPickerLabel {
-  border: 1px inset ThreeDFace;
-  margin: 0;
-  padding: 2px;
-}
-
 .color-button {
  border: 1px inset ThreeDFace;
  padding: 0;
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@ -94,21 +94,11 @@
    --tabline-color: Highlight;
  }

-  :root:not(:-moz-lwtheme) .toolbar,
-  :root:not(:-moz-lwtheme) .contentTabToolbox,
-  :root:not(:-moz-lwtheme) #task-addition-box,
-  :root:not(:-moz-lwtheme) #header-view-toolbar,
-  :root:not(:-moz-lwtheme) #ab-toolbox > toolbar,
-  :root:not(:-moz-lwtheme) .mail-toolbox > toolbar,
-  :root:not(:-moz-lwtheme) #event-toolbox > toolbar,
-  :root:not(:-moz-lwtheme) #compose-toolbox > toolbar,
+  :root:not(:-moz-lwtheme) .themeable-full,
+  :root:not(:-moz-lwtheme) .themeable-brighttext,
  :root:not(:-moz-lwtheme) #navigation-toolbox > toolbar,
  :root:not(:-moz-lwtheme) #todaypane-new-event-button,
-  :root:not(:-moz-lwtheme) .otr-container,
-  :root:not(:-moz-lwtheme) .crypto-button,
-  :root:not(:-moz-lwtheme) .calendar-list-create,
-  :root:not(:-moz-lwtheme) #CardViewBox,
-  :root:not(:-moz-lwtheme) #searchTerms {
+  :root:not(:-moz-lwtheme) #CardViewBox {
    --toolbarbutton-hover-background: Highlight;
    --toolbarbutton-hover-bordercolor: HighlightText !important;
    --toolbarbutton-header-bordercolor: HighlightText;
--- a/mail/themes/windows/mail/quickFilterBar.css
+++ b/mail/themes/windows/mail/quickFilterBar.css
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-@import url("chrome://messenger/content/quickFilterBar.css");
+@import url("chrome://messenger/skin/shared/quickFilterBar.css");

 #quick-filter-bar-expando {
  border-bottom: 1px solid ThreeDShadow;
@ -16,22 +16,19 @@

@media (-moz-os-version: windows-win7) {
  #qfb-qs-textbox {
-    margin-top: 4px;
-    margin-bottom: 4px;
+    margin-block: 4px;
  }
 }

@media (-moz-os-version: windows-win8),
       (-moz-os-version: windows-win10) {
  #qfb-qs-textbox {
-    margin-top: 5px;
-    margin-bottom: 5px;
+    margin-block: 5px;
  }
 }

 #tabbar-toolbar #qfb-show-filter-bar {
-  padding-left: 4px !important;
-  padding-right: 4px !important;
+  padding-inline: 4px !important;
 }

 /* :::: Filter Bar :::: */
--- a/mailnews/search/content/searchTerm.inc.xhtml
+++ b/mailnews/search/content/searchTerm.inc.xhtml
@ -14,7 +14,7 @@

          <hbox id="searchTermBox" flex="1"
                style="min-height:100px; max-height:100vh;">
-            <hbox id="searchterms"/>
+            <hbox id="searchterms" class="themeable-brighttext"/>
            <richlistbox flex="1" id="searchTermList">
              <treecols hidden="true">
                <treecol flex="&searchTermListAttributesFlexValue;"/>