Bug 1444301 - Introduce lighter shading for photon-style icons in the toolbox; r=jryans
authorBrian Birtles <birtles@gmail.com>
Thu, 05 Apr 2018 10:13:22 +0900
changeset 412193 154ca4e5a0d2ef9e3d8b0f4d23c804496eff7b47
parent 412192 4abc98b602917c64f3fe7465fe580275cf42d581
child 412194 5d0acb7cf92189a846b4dfb9ff390b5991b188fc
push id33786
push usercbrindusan@mozilla.com
push dateSat, 07 Apr 2018 09:54:54 +0000
treeherdermozilla-central@2ae59181b9de [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjryans
bugs1444301
milestone61.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 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
@@ -160,16 +160,17 @@
 /* Toolbox controls */
 
 
 #toolbox-close::before {
   background-image: var(--close-button-image);
 }
 
 #toolbox-meatball-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-90-alpha-80);
   --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;
 
@@ -229,9 +231,10 @@
   --grey-20: #ededf0;
   --grey-30: #d7d7db;
   --grey-40: #b1b1b3;
   --grey-50: #737373;
   --grey-60: #4a4a4f;
   --grey-70: #38383d;
   --grey-80: #2a2a2e;
   --grey-90: #0c0c0d;
+  --grey-90-alpha-80: rgba(12, 12, 13, 0.8);
 }