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 778574 a39690183ccffebc97f150416343aa3c27133ba6
parent 778573 d03b20042e8b70ed3ae17b9bf217504c010b67c3
child 778575 a8fad7b622613905ee2b64c1a6ad01cc22ff0323
push id105521
push userbbirtles@mozilla.com
push dateFri, 06 Apr 2018 14:07:54 +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
@@ -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);
 }