Bug 1387762 - Define default --toolbarbutton-hover-background and --toolbarbutton-active-background values that work on both light and dark backgrounds. r=daleharvey
authorDão Gottwald <dao@mozilla.com>
Fri, 08 Sep 2017 12:50:37 +0200
changeset 429282 40df319376b8b788ce75435c17117a0134a447f8
parent 429281 98e8ee4d55ddf9ffecc2e40b4ef7fe3a8220ab3a
child 429283 ae513db6d626f1032a62e1af81e2277390783810
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdaleharvey
bugs1387762
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1387762 - Define default --toolbarbutton-hover-background and --toolbarbutton-active-background values that work on both light and dark backgrounds. r=daleharvey MozReview-Commit-ID: EJNKtkMp8Ad
browser/themes/shared/toolbarbuttons.inc.css
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -1,21 +1,24 @@
 /* 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/. */
 
 :root {
-  --toolbarbutton-hover-background: hsla(240,5%,5%,.1);
-  --toolbarbutton-active-background: hsla(240,5%,5%,.15);
-
   --toolbarbutton-hover-transition-duration: 150ms;
   --toolbarbutton-active-transition-duration: 10ms;
 
   --toolbarbutton-inner-padding: 6px;
 
+  /* These hover and active colors should work on both light and dark
+     backgrounds. We'll later set colors that cater for light and dark
+     backgrounds specifically when we can detect them. */
+  --toolbarbutton-hover-background: hsla(0,0%,70%,.4);
+  --toolbarbutton-active-background: hsla(0,0%,70%,.6);
+
   --backbutton-background: hsla(0,100%,100%,.8);
   --backbutton-hover-background: var(--backbutton-background);
   --backbutton-active-background: var(--toolbarbutton-active-background);
   --backbutton-border-color: hsla(240,5%,5%,.3);
 
   /* This default value of --toolbarbutton-height is defined to prevent
      CSS errors for an invalid variable. The value should not get used,
      as a more specific value should be set when the value will be used. */
@@ -25,16 +28,25 @@
 :root[uidensity=compact] {
   --toolbarbutton-inner-padding: 5px;
 }
 
 :root[uidensity=touch] {
   --toolbarbutton-inner-padding: 9px;
 }
 
+/* We use :-moz-lwtheme-* for toolbarbuttons that aren't inside a toolbar, and
+   [brighttext] to cater for OS themes where :-moz-lwtheme-* doesn't apply. */
+:root:-moz-lwtheme-darktext,
+toolbar:not([brighttext]) {
+  --toolbarbutton-hover-background: hsla(240,5%,5%,.1);
+  --toolbarbutton-active-background: hsla(240,5%,5%,.15);
+}
+
+:root:-moz-lwtheme-brighttext,
 toolbar[brighttext] {
   --toolbarbutton-hover-background: hsla(0,0%,100%,.2);
   --toolbarbutton-active-background: hsla(0,0%,100%,.3);
 
   --backbutton-background: var(--toolbarbutton-hover-background);
   --backbutton-hover-background: var(--toolbarbutton-active-background);
   --backbutton-active-background: hsla(0,0%,100%,.4);
 }