Bug 1444301 - Introduce lighter shading for photon-style icons in the toolbox; r?jryans
MozReview-Commit-ID: 65x4fbrIwQx
--- 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);
}