From 267c0d51e17a1eeaeba5f218f1947f3ed1b1ec27 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 13 Feb 2017 23:32:33 -0800
Subject: [PATCH] Tweak colors

---
 panels/config/ha-panel-config.html             |  4 ----
 panels/dev-event/ha-panel-dev-event.html       |  2 +-
 panels/dev-info/ha-panel-dev-info.html         |  1 -
 panels/dev-service/ha-panel-dev-service.html   |  1 -
 panels/dev-state/ha-panel-dev-state.html       |  1 -
 panels/dev-template/ha-panel-dev-template.html |  1 -
 src/components/ha-sidebar.html                 | 10 ++++++----
 src/resources/ha-style.html                    | 18 +++++++++++++-----
 8 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/panels/config/ha-panel-config.html b/panels/config/ha-panel-config.html
index cb5d15e1a2..8126bab2af 100644
--- a/panels/config/ha-panel-config.html
+++ b/panels/config/ha-panel-config.html
@@ -11,10 +11,6 @@
 <dom-module id="ha-panel-config">
   <template>
     <style include="iron-flex ha-style">
-      app-header-layout {
-        background-color: #fafafa;
-      }
-
       .content {
         padding-bottom: 32px;
       }
diff --git a/panels/dev-event/ha-panel-dev-event.html b/panels/dev-event/ha-panel-dev-event.html
index 465a92ecd2..b01c0670f4 100644
--- a/panels/dev-event/ha-panel-dev-event.html
+++ b/panels/dev-event/ha-panel-dev-event.html
@@ -20,11 +20,11 @@
     <style is="custom-style" include="ha-style iron-flex iron-positioning"></style>
     <style>
       :host {
-        background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
       }
+
       .content {
         @apply(--paper-font-body1);
         padding: 16px;
diff --git a/panels/dev-info/ha-panel-dev-info.html b/panels/dev-info/ha-panel-dev-info.html
index e100915c9f..3d58b0f9fb 100644
--- a/panels/dev-info/ha-panel-dev-info.html
+++ b/panels/dev-info/ha-panel-dev-info.html
@@ -13,7 +13,6 @@
   <template>
     <style include="iron-positioning ha-style">
       :host {
-        background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
diff --git a/panels/dev-service/ha-panel-dev-service.html b/panels/dev-service/ha-panel-dev-service.html
index 4148fab505..9c13a94c4e 100644
--- a/panels/dev-service/ha-panel-dev-service.html
+++ b/panels/dev-service/ha-panel-dev-service.html
@@ -17,7 +17,6 @@
   <template>
     <style include='ha-style'>
       :host {
-        background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
diff --git a/panels/dev-state/ha-panel-dev-state.html b/panels/dev-state/ha-panel-dev-state.html
index 43b90334ee..397bf65110 100644
--- a/panels/dev-state/ha-panel-dev-state.html
+++ b/panels/dev-state/ha-panel-dev-state.html
@@ -16,7 +16,6 @@
   <template>
     <style include="ha-style">
       :host {
-        background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
diff --git a/panels/dev-template/ha-panel-dev-template.html b/panels/dev-template/ha-panel-dev-template.html
index 3a1fef81a4..bbb93f07c3 100644
--- a/panels/dev-template/ha-panel-dev-template.html
+++ b/panels/dev-template/ha-panel-dev-template.html
@@ -15,7 +15,6 @@
     <style is="custom-style" include="ha-style iron-flex iron-positioning"></style>
     <style>
       :host {
-        background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
diff --git a/src/components/ha-sidebar.html b/src/components/ha-sidebar.html
index f25a3cecd9..2c1fc376af 100644
--- a/src/components/ha-sidebar.html
+++ b/src/components/ha-sidebar.html
@@ -15,7 +15,7 @@
     <style include="iron-flex iron-flex-alignment iron-positioning">
       :host {
         --sidebar-text: {
-          opacity: var(--dark-primary-opacity);
+          color: var(--primary-text-color);
           font-weight: 500;
           font-size: 14px;
         };
@@ -24,12 +24,14 @@
         -ms-user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
+        border-right: 1px solid var(--divider-color);
       }
 
       app-toolbar {
         font-weight: 400;
-        opacity: var(--dark-primary-opacity);
-        border-bottom: 1px solid #e0e0e0;
+        color: var(--primary-text-color);
+        border-bottom: 1px solid var(--divider-color);
+        background-color: var(--primary-background-color);
       }
 
       paper-menu {
@@ -48,7 +50,7 @@
 
         --paper-item-selected: {
           color: var(--default-primary-color);
-          background-color: #e8e8e8;
+          background-color: var(--paper-grey-200);
           opacity: 1;
         };
       }
diff --git a/src/resources/ha-style.html b/src/resources/ha-style.html
index 74c7a580ee..920bcaf2c4 100644
--- a/src/resources/ha-style.html
+++ b/src/resources/ha-style.html
@@ -4,17 +4,21 @@
   html {
     font-size: 14px;
 
+    /* for paper-toggle-button */
+    --paper-grey-50: #fafafa;
+    --paper-grey-200: #eeeeee;
+
     --dark-primary-color: #0288D1;
     --default-primary-color: #03A9F4;
     --primary-color: #03A9F4;
     --light-primary-color: #B3E5FC;
     --text-primary-color: #ffffff;
     --accent-color: #FF9800;
-    --primary-background-color: #ffffff;
+    --primary-background-color: var(--paper-grey-50);
     --primary-text-color: #212121;
     --secondary-text-color: #727272;
     --disabled-text-color: #bdbdbd;
-    --divider-color: #B6B6B6;
+    --divider-color: rgba(0, 0, 0, .12);
 
     --paper-toggle-button-checked-ink-color: #039be5;
     --paper-toggle-button-checked-button-color: #039be5;
@@ -27,6 +31,9 @@
     --paper-slider-secondary-color: var(--light-primary-color);
     --paper-slider-container-color: var(--divider-color);
 
+    --paper-card-background-color: #FFF;
+    --paper-menu-background-color: #FFF;
+
     /* Taken from paper-styles/color.html */
     /* for paper-spinner */
     --google-red-500: #db4437;
@@ -34,9 +41,6 @@
     --google-green-500: #0f9d58;
     --google-yellow-500: #f4b400;
 
-    /* for paper-toggle-button */
-    --paper-grey-50: #fafafa;
-
     /* for paper-slider */
     --paper-green-400: #66bb6a;
     --paper-blue-400: #42a5f5;
@@ -63,6 +67,10 @@
         @apply(--paper-font-body1);
       }
 
+      app-header-layout {
+        background-color: var(--primary-background-color);
+      }
+
       app-header, app-toolbar {
         background-color: var(--primary-color);
         font-weight: 400;