Bug 1396037 - Part 1: Use the new photon styles for the body, sidebar and toolbar background colors. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Mon, 04 Sep 2017 08:28:22 -0400
changeset 428341 e77976cfbab03a68bb27009549db4381a065c848
parent 428340 ba819294022028176720e7880120af69c7a46222
child 428342 67055f747a43e78808ea36fb118d7cb4fd68dbc9
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1396037
milestone57.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 1396037 - Part 1: Use the new photon styles for the body, sidebar and toolbar background colors. r=pbro
devtools/client/themes/variables.css
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -16,22 +16,25 @@
  * so the formatting should be consistent (i.e. no '}' inside a rule).
  */
 
 :root.theme-light {
   --theme-body-background: white;
   --theme-sidebar-background: white;
   --theme-contrast-background: #e6b064;
 
-  --theme-tab-toolbar-background: #fcfcfc;
-  --theme-toolbar-background: #fcfcfc;
+  /* Toolbar */
+  --theme-tab-toolbar-background: var(--grey-10);
+  --theme-toolbar-background: var(--grey-10);
   --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
   --theme-toolbar-background-alt: #f5f5f5;
   --theme-toolbar-hover: rgba(170, 170, 170, .2);
   --theme-toolbar-hover-active: rgba(170, 170, 170, .4);
+
+  /* Selection */
   --theme-selection-background: var(--blue-55);
   --theme-selection-background-hover: #F0F9FE;
   --theme-selection-color: #f5f7fa;
 
   /* Border color that splits the toolbars/panels/headers.
    * This needs to be sync with commandline.css and commandline-browser.css. */
   --theme-splitter-color: #e0e0e1;
 
@@ -84,26 +87,29 @@
   /* Command line */
   --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
   --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
 
   --theme-codemirror-gutter-background: #f4f4f4;
 }
 
 :root.theme-dark {
-  --theme-body-background: #393f4c;
-  --theme-sidebar-background: #393f4c;
+  --theme-body-background: var(--grey-80);
+  --theme-sidebar-background: var(--grey-80);
   --theme-contrast-background: #ffb35b;
 
-  --theme-tab-toolbar-background: #272b35;
-  --theme-toolbar-background: #272b35;
+  /* Toolbar */
+  --theme-tab-toolbar-background: var(--grey-90);
+  --theme-toolbar-background: var(--grey-90);
   --theme-toolbar-background-hover: #20232B;
   --theme-toolbar-background-alt: #2F343E;
   --theme-toolbar-hover: rgba(110, 120, 130, 0.1);
   --theme-toolbar-hover-active: rgba(110, 120, 130, 0.2);
+
+  /* Selection */
   --theme-selection-background: #204E8A;
   --theme-selection-background-hover: #353B48;
   --theme-selection-color: #f5f7fa;
 
   /* Border color that splits the toolbars/panels/headers.
    * This needs to be sync with commandline.css and commandline-browser.css. */
   --theme-splitter-color: #3c3c3d;