Bug 1396103 - Updates the font color for the body, tabs and accordion/headers to match the photon styles. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 08 Sep 2017 11:02:01 -0400
changeset 661571 814746fc67081ba90d2b2b8b32cf3e0590b650b0
parent 661570 2b23fd4108d10f8e829902819962ab017c877acb
child 661572 65372115ac3b5dd3783c70d1a9a528add950fb72
push id78830
push userasasaki@mozilla.com
push dateFri, 08 Sep 2017 19:44:43 +0000
reviewerspbro
bugs1396103
milestone57.0a1
Bug 1396103 - Updates the font color for the body, tabs and accordion/headers to match the photon styles. r=pbro
devtools/client/inspector/layout/components/Accordion.css
devtools/client/shared/components/tabs/tabs.css
devtools/client/themes/animationinspector.css
devtools/client/themes/rules.css
devtools/client/themes/toolbox.css
devtools/client/themes/variables.css
--- a/devtools/client/inspector/layout/components/Accordion.css
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -21,16 +21,17 @@
 .accordion {
   background-color: var(--theme-sidebar-background);
   width: 100%;
 }
 
 .accordion ._header {
   background-color: var(--accordion-header-background);
   border-bottom: 1px solid var(--theme-splitter-color);
+  color: var(--theme-toolbar-color);
   cursor: pointer;
   font-size: 12px;
   padding: 4px;
   transition: all 0.25s ease;
   width: 100%;
   align-items: center;
   display: flex;
 
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -76,17 +76,17 @@
   border-bottom: 1px solid var(--theme-splitter-color);
   background: var(--theme-tab-toolbar-background);
 }
 
 .theme-dark .tabs .tabs-menu-item,
 .theme-light .tabs .tabs-menu-item {
   margin: 0;
   padding: 0;
-  color: var(--theme-content-color1);
+  color: var(--theme-toolbar-color);
 }
 
 .theme-dark .tabs .tabs-menu-item:last-child,
 .theme-light:not(.theme-firebug) .tabs .tabs-menu-item:last-child {
   border-inline-end-width: 1px;
 }
 
 .theme-dark .tabs .tabs-menu-item a,
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -104,17 +104,16 @@ html {
 
 body {
   margin: 0;
   padding: 0;
   display : flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-  color: var(--theme-content-color3);
 }
 
 /* The top toolbar, containing the toggle-all button. And the timeline toolbar,
    containing playback control buttons, shown only when there are animations
    displayed in the timeline */
 
 #global-toolbar,
 #timeline-toolbar {
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -219,16 +219,17 @@
 
 .ruleview-rule-source:not([unselectable]):hover {
   text-decoration: underline;
 }
 
 .ruleview-header {
   background: var(--rule-header-background-color);
   border-bottom: 1px solid var(--theme-splitter-color);
+  color: var(--theme-toolbar-color);
   font-size: 12px;
   padding: 4px;
   width: 100%;
   align-items: center;
   display: flex;
 
   -moz-user-select: none;
 }
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -135,22 +135,18 @@
   min-width: 24px;
 }
 
 /* Save space on the tab-strip in Firebug theme */
 .theme-firebug .devtools-tab {
   -moz-box-flex: initial;
 }
 
-.theme-dark .devtools-tab {
-  color: var(--theme-body-color-alt);
-}
-
-.theme-light .devtools-tab {
-  color: var(--theme-body-color);
+.devtools-tab {
+  color: var(--theme-toolbar-color);
 }
 
 .theme-dark .devtools-tab:hover {
   color: #ced3d9;
 }
 
 .devtools-tab:hover {
   background-color: var(--theme-toolbar-hover);
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -19,16 +19,17 @@
 :root.theme-light {
   --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-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;
@@ -36,17 +37,17 @@
 
   /* Border color that splits the toolbars/panels/headers.
    * This needs to be sync with commandline.css and commandline-browser.css. */
   --theme-splitter-color: #e0e0e1;
 
   --theme-comment: #696969;
   --theme-comment-alt: #ccd1d5;
 
-  --theme-body-color: #393f4c;
+  --theme-body-color: var(--grey-60);
   --theme-body-color-alt: #585959;
   --theme-body-color-inactive: #999797;
   --theme-content-color1: #292e33;
   --theme-content-color2: #8fa1b2;
   --theme-content-color3: #667380;
 
   --theme-highlight-green: #2cbb0f;
   --theme-highlight-blue: #0088cc;
@@ -94,16 +95,17 @@
 :root.theme-dark {
   --theme-body-background: var(--grey-80);
   --theme-sidebar-background: var(--grey-90);
   --theme-contrast-background: #ffb35b;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-90);
   --theme-toolbar-background: var(--grey-90);
+  --theme-toolbar-color: var(--grey-40);
   --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;
@@ -111,21 +113,21 @@
 
   /* Border color that splits the toolbars/panels/headers.
    * This needs to be sync with commandline.css and commandline-browser.css. */
   --theme-splitter-color: #3c3c3d;
 
   --theme-comment: #757873;
   --theme-comment-alt: #5a6375;
 
-  --theme-body-color: #8fa1b2;
+  --theme-body-color: var(--grey-40);
   --theme-body-color-alt: #b6babf;
-  --theme-body-color-inactive: #8fa1b2;
+  --theme-body-color-inactive: var(--grey-40);
   --theme-content-color1: #a9bacb;
-  --theme-content-color2: #8fa1b2;
+  --theme-content-color2: var(--grey-40);
   --theme-content-color3: #5f7387;
 
   --theme-highlight-green: #00ff7f;
   --theme-highlight-blue: #46afe3;
   --theme-highlight-bluegrey: #5e88b0;
   --theme-highlight-purple: #bcb8db;
   --theme-highlight-lightorange: #d99b28;
   --theme-highlight-orange: #d96629;