Bug 1444301 - Introduce lighter shading for photon-style icons in the toolbox; r?jryans draft
authorBrian Birtles <birtles@gmail.com>
Thu, 05 Apr 2018 10:13:22 +0900
changeset 777594 12f15d8d2a1c34e1d76aee91ea223b96ea8e66c2
parent 777593 0da3cca42ba95214d77472f87077d839aca88c4a
child 777595 4690cf3ad8d9709e2f1425e14edf21547347b715
push id105256
push userbmo:bbirtles@mozilla.com
push dateThu, 05 Apr 2018 01:56:46 +0000
reviewersjryans
bugs1444301
milestone61.0a1
Bug 1444301 - Introduce lighter shading for photon-style icons in the toolbox; r?jryans MozReview-Commit-ID: 65x4fbrIwQx
devtools/client/themes/toolbox.css
devtools/client/themes/variables.css
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -195,16 +195,17 @@
   margin: 0 1px;
 }
 
 #toolbox-close::before {
   background-image: var(--close-button-image);
 }
 
 #toolbox-menu-button::before {
+  fill: var(--theme-toolbar-photon-icon-color);
   background-image: var(--more-button-image);
 }
 
 /* Command buttons */
 
 .command-button,
 #toolbox-controls > button {
   /* !important is needed to override .devtools-button rules in common.css */
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -20,16 +20,17 @@
   --theme-body-background: white;
   --theme-sidebar-background: white;
   --theme-contrast-background: #e6b064;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-10);
   --theme-toolbar-background: var(--grey-10);
   --theme-toolbar-color: var(--grey-90);
+  --theme-toolbar-photon-icon-color: var(--grey-50);
   --theme-toolbar-selected-color: var(--blue-60);
   --theme-toolbar-checked-color: var(--blue-60);
   --theme-toolbar-highlighted-color: var(--green-60);
   --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
   --theme-toolbar-background-alt: #f5f5f5;
   --theme-toolbar-hover: var(--grey-20);
   --theme-toolbar-hover-active: var(--grey-20);
 
@@ -105,16 +106,17 @@
   --theme-body-background: var(--grey-80);
   --theme-sidebar-background: #1B1B1D;
   --theme-contrast-background: #ffb35b;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-90);
   --theme-toolbar-background: #1B1B1D;
   --theme-toolbar-color: var(--grey-40);
+  --theme-toolbar-photon-icon-color: var(--grey-40);
   --theme-toolbar-selected-color: white;
   --theme-toolbar-checked-color: #75BFFF;
   --theme-toolbar-highlighted-color: var(--green-50);
   --theme-toolbar-background-hover: #20232B;
   --theme-toolbar-background-alt: #1B1B1D;
   --theme-toolbar-hover: #252526;
   --theme-toolbar-hover-active: #252526;