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
--- 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);
}