Bug 1504405 - Port bug 1503306 to TB: Properly set accentcolor and textcolor properties for Light and Dark themes. r+a=jorgk
authorRichard Marti <richard.marti@gmail.com>
Fri, 02 Nov 2018 07:31:29 +0100
changeset 33502 f621deadf93b3a10edf84520d6c4b2a429ca1c5e
parent 33501 3a4f876f12af08e5670df715359ab1dd3ff49da9
child 33503 5450ff655f69ae201d4fca1cbda2f8b2d3f34435
push id387
push userclokep@gmail.com
push dateMon, 10 Dec 2018 21:30:47 +0000
bugs1504405, 1503306
Bug 1504405 - Port bug 1503306 to TB: Properly set accentcolor and textcolor properties for Light and Dark themes. r+a=jorgk
mail/components/mailGlue.js
mail/themes/linux/mail/compacttheme.css
mail/themes/osx/mail/compacttheme.css
mail/themes/shared/mail/compacttheme.css
mail/themes/windows/mail/compacttheme.css
--- a/mail/components/mailGlue.js
+++ b/mail/components/mailGlue.js
@@ -165,35 +165,35 @@ MailGlue.prototype = {
 
     let vendorShortName = gBrandBundle.GetStringFromName("vendorShortName");
 
     LightweightThemeManager.addBuiltInTheme({
       id: "thunderbird-compact-light@mozilla.org",
       name: gMailBundle.GetStringFromName("lightTheme.name"),
       description: gMailBundle.GetStringFromName("lightTheme.description"),
       iconURL: "resource:///chrome/messenger/content/messenger/light.icon.svg",
-      textcolor: "black",
-      accentcolor: "white",
+      textcolor: "#18191a",
+      accentcolor: "#E3E4E6",
       popup: "#fff",
       popup_text: "#0c0c0d",
       popup_border: "#ccc",
       tab_line: "#0a84ff",
       toolbarColor: "#f5f6f7",
       toolbar_bottom_separator: "#ccc",
       toolbar_field: "#fff",
       toolbar_field_border: "#ccc",
       author: vendorShortName,
     });
     LightweightThemeManager.addBuiltInTheme({
       id: "thunderbird-compact-dark@mozilla.org",
       name: gMailBundle.GetStringFromName("darkTheme.name"),
       description: gMailBundle.GetStringFromName("darkTheme.description"),
       iconURL: "resource:///chrome/messenger/content/messenger/dark.icon.svg",
-      textcolor: "white",
-      accentcolor: "black",
+      textcolor: "rgb(249, 249, 250)",
+      accentcolor: "hsl(240, 5%, 5%)",
       popup: "#4a4a4f",
       popup_text: "rgb(249, 249, 250)",
       popup_border: "#27272b",
       tab_line: "#0a84ff",
       toolbarColor: "hsl(240, 1%, 20%)",
       toolbar_bottom_separator: "hsla(240, 5%, 5%, .2",
       toolbar_field: "rgb(71, 71, 73)",
       toolbar_field_border: "rgba(249, 249, 250, 0.2)",
--- a/mail/themes/linux/mail/compacttheme.css
+++ b/mail/themes/linux/mail/compacttheme.css
@@ -4,20 +4,16 @@
 
 @import url("chrome://messenger/skin/shared/compacttheme.css");
 
 #tabs-toolbar,
 #mail-toolbar-menubar2 {
   -moz-appearance: none !important;
 }
 
-#mail-menubar {
-  color: var(--chrome-color);
-}
-
 #mail-menubar > menu:not([open]) {
   color: inherit;
 }
 
 /* Quick-Filter-Bar */
 #quick-filter-bar {
   border-bottom-color: var(--toolbox-border-bottom-color);
 }
--- a/mail/themes/osx/mail/compacttheme.css
+++ b/mail/themes/osx/mail/compacttheme.css
@@ -1,17 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/skin/shared/compacttheme.css");
 
 /* Get rid of 1px bright strip at the top of window */
 #messengerWindow[tabsintitlebar] #titlebar-content {
-  background: var(--chrome-background-color);
+  background: var(--lwt-accent-color);
 }
 
 #tabs-toolbar:-moz-lwtheme-brighttext {
   -moz-appearance: -moz-mac-vibrant-titlebar-dark;
   -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark;
   background-color: #232323;
   color: hsl(240, 9%, 98%);
   text-shadow: none;
@@ -38,17 +38,17 @@
 
 #FormatToolbar {
   background-image: none;
   background-color: transparent !important;
 }
 
 #compose-toolbar-sizer {
   background-image: none;
-  background-color: var(--chrome-background-color);
+  background-color: var(--lwt-accent-color);
 }
 
 .tabmail-tab[selected="true"] {
   -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
 }
 
 #FormatToolbar:not(:-moz-window-inactive):-moz-lwtheme-brighttext >
 toolbarbutton.formatting-button[checked="true"]:after {
--- a/mail/themes/shared/mail/compacttheme.css
+++ b/mail/themes/shared/mail/compacttheme.css
@@ -2,63 +2,49 @@
  * 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/. */
 
 /* compacttheme.css is loaded in messenger.xul after messenger.css when it
    is preffed on.  The bulk of the styling is here in the shared file, but
    there are overrides for each platform in their compacttheme.css files. */
 
 :root:-moz-lwtheme {
-  --toolbar-color: var(--chrome-color);
+  --toolbar-color: var(--lwt-text-color);
   --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
-  --toolbar-non-lwt-textcolor: var(--chrome-color);
+  --toolbar-non-lwt-textcolor: var(--lwt-text-color);
   --toolbar-non-lwt-bgimage: none;
   --lwt-toolbar-field-border-color: hsla(240,5%,5%,.25);
 
   --toolbarbutton-icon-fill-opacity: .7;
 }
 
 :root:-moz-lwtheme-brighttext {
-  /* Chrome */
-  --chrome-background-color: hsl(240, 5%, 5%);
-  --chrome-color: rgb(249, 249, 250);
-
   /* Toolbar buttons */
   --lwt-toolbarbutton-hover-background: rgba(179, 179, 179, 0.4);
   --lwt-toolbarbutton-active-background: rgba(179, 179, 179, 0.6);
 
   /* !important to override LightweightThemeManager.addBuiltInTheme in
      mailGlue.js */
   --autocomplete-popup-background: #2A2A2E !important;
   --autocomplete-popup-highlight-background: #0060DF;
 
   /* composer header fields bottom border */
   --composer-header-border-color: rgb(127, 127, 128);
 }
 
 :root:-moz-lwtheme-darktext {
-  --chrome-background-color: #e3e4e6;
-  --chrome-color: #18191a;
-
   /* composer header fields bottom border */
   --composer-header-border-color: #aaa;
 }
 
-/* Change the base colors for the mail chrome */
-
 #headers-box,
-#navigation-toolbox {
-  background-color: var(--chrome-background-color);
-  color: var(--chrome-color);
-}
-
 #msgHeaderView {
   background-color: var(--toolbar-bgcolor) !important;
   background-image: none !important;
-  color: var(--chrome-color);
+  color: var(--lwt-text-color);
 }
 
 /* Let the message headers use the theme colors */
 .headerValue {
   color: inherit;
 }
 
 /* Style the editContactPanel textfields */
@@ -67,18 +53,18 @@
   color: var(--lwt-toolbar-field-color);
 }
 .editContactTextbox:not([readonly="true"]):not([focused="true"]) {
   border-color: var(--lwt-toolbar-field-border-color);
 }
 
 /* Quick-Filter-Bar */
 #quick-filter-bar:-moz-lwtheme {
-  background-color: var(--chrome-background-color);
-  color: var(--chrome-color);
+  background-color: var(--lwt-accent-color);
+  color: var(--lwt-text-color);
 }
 #quick-filter-bar:-moz-lwtheme-brighttext {
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background);
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background);
 
   --toolbarbutton-checkedhover-backgroundcolor: var(--lwt-toolbarbutton-hover-background);
 
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background);
@@ -121,17 +107,17 @@
   color: inherit;
 }
 
 #msgIdentity,
 #msgSubject,
 textbox.textbox-addressingWidget,
 .dummy-row-cell:not(:first-child) {
   border-bottom-color: var(--composer-header-border-color) !important;
-  color: var(--chrome-color);
+  color: var(--lwt-text-color);
 }
 
 #msgIdentity:hover,
 #msgIdentity:focus,
 #msgSubject:hover,
 #msgSubject[focused="true"],
 textbox.textbox-addressingWidget:hover,
 textbox.textbox-addressingWidget[focused="true"] {
--- a/mail/themes/windows/mail/compacttheme.css
+++ b/mail/themes/windows/mail/compacttheme.css
@@ -30,17 +30,17 @@
   @media (-moz-windows-default-theme) {
     /* Always show light toolbar elements on aero surface. */
     #tabs-toolbar {
       color: hsl(240,9%,98%);
     }
 
     /* Keep showing the correct color inside the tabs. */
     .tabmail-tab {
-      color: var(--chrome-color) !important;
+      color: var(--lwt-text-color) !important;
     }
 
     /* Because we're forcing the tabs toolbar to be [brighttext] to
      * get white toolbar button icons, we need to manually set the
      * correct color for the tab hover state for the light theme. */
     .tabmail-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme-darktext {
       background-color: rgba(0,0,0,.1) !important;
     }
@@ -77,17 +77,17 @@
   .tabmail-tab::before,
   .tabmail-tab::after {
     border-image: none !important;
   }
 
   /* Show border on tabs with background colors and
    * show the tabs toolbar background color inside tabs. */
   .tabmail-tab {
-    background-color: var(--chrome-background-color) !important;
+    background-color: var(--lwt-accent-color) !important;
     border-top: 1px solid var(--tabs-border-color);
     background-clip: padding-box;
   }
 
   /* The top border on top of the tab background is replaced
    * by the slightly transparent outside tabs-border-color. */
   .tab-background {
     border-top-style: none !important;