From 1335a746053b5609c1d8f6cb9bc145fc33510cc7 Mon Sep 17 00:00:00 2001
From: NovapaX <maarten@maartenenliesbeth.nl>
Date: Sun, 15 Apr 2018 16:16:11 +0200
Subject: [PATCH] Setting used paper-colors in ha-style (#1091)

* setting default paper-colors
clean up some whitespace/indentation

* better indentation
---
 src/resources/ha-style.html | 197 ++++++++++++++++++------------------
 1 file changed, 101 insertions(+), 96 deletions(-)

diff --git a/src/resources/ha-style.html b/src/resources/ha-style.html
index 1bbf12ea3c..fc7fa24e95 100644
--- a/src/resources/ha-style.html
+++ b/src/resources/ha-style.html
@@ -2,116 +2,121 @@
 <link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
 
 <custom-style>
-<style is="custom-style">/* remove is= on Polymer 2 */
-/*
-  Home Assistant default styles.
+  <style is="custom-style">/* remove is= on Polymer 2 */
+    /*
+      Home Assistant default styles.
 
-  In Polymer 2.0, default styles should to be set on the html selector.
-  (Setting all default styles only on body breaks shadyCSS polyfill.)
-  See: https://github.com/home-assistant/home-assistant-polymer/pull/901
-*/
-  html {
-    font-size: 14px;
-    height: 100vh;
+      In Polymer 2.0, default styles should to be set on the html selector.
+      (Setting all default styles only on body breaks shadyCSS polyfill.)
+      See: https://github.com/home-assistant/home-assistant-polymer/pull/901
+    */
+    html {
+      font-size: 14px;
+      height: 100vh;
 
-    /* text */
-    --primary-text-color: #212121;
-    --secondary-text-color: #727272;
-    --text-primary-color: #ffffff;
-    --disabled-text-color: #bdbdbd;
+      /* text */
+      --primary-text-color: #212121;
+      --secondary-text-color: #727272;
+      --text-primary-color: #ffffff;
+      --disabled-text-color: #bdbdbd;
 
-    /* main interface colors */
-    --primary-color: #03a9f4;
-    --dark-primary-color: #0288d1;
-    --light-primary-color: #b3e5fC;
-    --accent-color: #ff9800;
-    --divider-color: rgba(0, 0, 0, .12);
+      /* main interface colors */
+      --primary-color: #03a9f4;
+      --dark-primary-color: #0288d1;
+      --light-primary-color: #b3e5fC;
+      --accent-color: #ff9800;
+      --divider-color: rgba(0, 0, 0, .12);
 
-    /* states and badges */
-    --state-icon-color: #44739e;
-    --state-icon-active-color: #FDD835;
-    --state-icon-unavailable-color: var(--disabled-text-color);
+      /* states and badges */
+      --state-icon-color: #44739e;
+      --state-icon-active-color: #FDD835;
+      --state-icon-unavailable-color: var(--disabled-text-color);
 
-    /* background and sidebar */
-    --card-background-color: #ffffff;
-    --primary-background-color: #fafafa;
-    --secondary-background-color: #e5e5e5; /* behind the cards on state */
+      /* background and sidebar */
+      --card-background-color: #ffffff;
+      --primary-background-color: #fafafa;
+      --secondary-background-color: #e5e5e5; /* behind the cards on state */
 
-    /* sidebar menu */
-    --sidebar-text-color: var(--primary-text-color);
-    --sidebar-background-color: var(--paper-listbox-background-color); /* backward compatible with existing themes */
-    --sidebar-icon-color: rgba(0, 0, 0, 0.5);
-    --sidebar-selected-text-color: var(--primary-text-color);
-/*  --sidebar-selected-background-color: rgba(30,30,30,0.1); */
-    --sidebar-selected-icon-color: var(--primary-color);
+      /* sidebar menu */
+      --sidebar-text-color: var(--primary-text-color);
+      --sidebar-background-color: var(--paper-listbox-background-color); /* backward compatible with existing themes */
+      --sidebar-icon-color: rgba(0, 0, 0, 0.5);
+      --sidebar-selected-text-color: var(--primary-text-color);
+      /* --sidebar-selected-background-color: rgba(30,30,30,0.1); */
+      --sidebar-selected-icon-color: var(--primary-color);
 
-    /* controls */
-    --toggle-button-color: var(--primary-color);
-/*  --toggle-button-unchecked-color: var(--accent-color); */
-    --slider-color: var(--primary-color);
-    --slider-secondary-color: var(--light-primary-color);
-    --slider-bar-color: var(--disabled-text-color);
+      /* controls */
+      --toggle-button-color: var(--primary-color);
+      /* --toggle-button-unchecked-color: var(--accent-color); */
+      --slider-color: var(--primary-color);
+      --slider-secondary-color: var(--light-primary-color);
+      --slider-bar-color: var(--disabled-text-color);
 
-    /* for label-badge */
-    --label-badge-background-color: white;
-    --label-badge-text-color: rgb(76, 76, 76);
-    --label-badge-red: #DF4C1E;
-    --label-badge-blue: #039be5;
-    --label-badge-green: #0DA035;
-    --label-badge-yellow: #f4b400;
-    --label-badge-grey: var(--paper-grey-500);
+      /* for label-badge */
+      --label-badge-background-color: white;
+      --label-badge-text-color: rgb(76, 76, 76);
+      --label-badge-red: #DF4C1E;
+      --label-badge-blue: #039be5;
+      --label-badge-green: #0DA035;
+      --label-badge-yellow: #f4b400;
+      --label-badge-grey: var(--paper-grey-500);
 
-    /* Taken from paper-styles/color.html */
-    /* for paper-spinner */
-    --google-red-500: #db4437;
-    --google-blue-500: #4285f4;
-    --google-green-500: #0f9d58;
-    --google-yellow-500: #f4b400;
+      /*
+        Paper-styles color.html depency is stripped on build.
+        When a default paper-style color is used, it needs to be copied
+        from paper-styles/color.html to here.
+      */
 
-    /* for paper-slider */
-    --paper-green-400: #66bb6a;
-    --paper-blue-400: #42a5f5;
-    --paper-orange-400: #ffa726;
+      --paper-grey-50: #fafafa; /* default for: --paper-toggle-button-unchecked-button-color */
+      --paper-grey-200: #eeeeee;  /* for ha-date-picker-style */
+      --paper-grey-500: #9e9e9e;  /* --label-badge-grey */
 
-    /* opacity for dark text on a light background */
-    --dark-divider-opacity: 0.12;
-    --dark-disabled-opacity: 0.38; /* or hint text or icon */
-    --dark-secondary-opacity: 0.54;
-    --dark-primary-opacity: 0.87;
+      /* for paper-spinner */
+      --google-red-500: #db4437;
+      --google-blue-500: #4285f4;
+      --google-green-500: #0f9d58;
+      --google-yellow-500: #f4b400;
 
-    /* opacity for light text on a dark background */
-    --light-divider-opacity: 0.12;
-    --light-disabled-opacity: 0.3; /* or hint text or icon */
-    --light-secondary-opacity: 0.7;
-    --light-primary-opacity: 1.0;
+      /* for paper-slider */
+      --paper-green-400: #66bb6a;
+      --paper-blue-400: #42a5f5;
+      --paper-orange-400: #ffa726;
 
-    /* derived colors, to keep existing themes mostly working */
-    --paper-card-background-color: var(--card-background-color);
-    --paper-listbox-background-color: var(--card-background-color);
+      /* opacity for dark text on a light background */
+      --dark-divider-opacity: 0.12;
+      --dark-disabled-opacity: 0.38; /* or hint text or icon */
+      --dark-secondary-opacity: 0.54;
+      --dark-primary-opacity: 0.87;
 
-    --paper-item-icon-color: var(--state-icon-color);
-    --paper-item-icon-active-color: var(--state-icon-active-color);
+      /* opacity for light text on a dark background */
+      --light-divider-opacity: 0.12;
+      --light-disabled-opacity: 0.3; /* or hint text or icon */
+      --light-secondary-opacity: 0.7;
+      --light-primary-opacity: 1.0;
 
-    --table-row-background-color: var(--primary-background-color);
-    --table-row-alternative-background-color: var(--secondary-background-color);
+      /* derived colors, to keep existing themes mostly working */
+      --paper-card-background-color: var(--card-background-color);
+      --paper-listbox-background-color: var(--card-background-color);
+      --paper-item-icon-color: var(--state-icon-color);
+      --paper-item-icon-active-color: var(--state-icon-active-color);
+      --table-row-background-color: var(--primary-background-color);
+      --table-row-alternative-background-color: var(--secondary-background-color);
 
-    /* set our toggle style */
-    --paper-toggle-button-checked-ink-color: var(--toggle-button-color);
-    --paper-toggle-button-checked-button-color: var(--toggle-button-color);
-    --paper-toggle-button-checked-bar-color: var(--toggle-button-color);
-    --paper-toggle-button-unchecked-button-color: var(--toggle-button-unchecked-color, var(--paper-grey-50));
-    --paper-toggle-button-unchecked-bar-color: var(--toggle-button-unchecked-color, #000000);
-    /* set our slider style */
-    --paper-slider-knob-color: var(--slider-color);
-    --paper-slider-knob-start-color: var(--slider-color);
-    --paper-slider-pin-color: var(--slider-color);
-    --paper-slider-active-color: var(--slider-color);
-    --paper-slider-secondary-color: var(--slider-secondary-color);
-    --paper-slider-container-color: var(--slider-bar-color);
-
-
-  }
-</style>
+      /* set our toggle style */
+      --paper-toggle-button-checked-ink-color: var(--toggle-button-color);
+      --paper-toggle-button-checked-button-color: var(--toggle-button-color);
+      --paper-toggle-button-checked-bar-color: var(--toggle-button-color);
+      --paper-toggle-button-unchecked-button-color: var(--toggle-button-unchecked-color, var(--paper-grey-50));
+      --paper-toggle-button-unchecked-bar-color: var(--toggle-button-unchecked-color, #000000);
+      /* set our slider style */
+      --paper-slider-knob-color: var(--slider-color);
+      --paper-slider-knob-start-color: var(--slider-color);
+      --paper-slider-pin-color: var(--slider-color);
+      --paper-slider-active-color: var(--slider-color);
+      --paper-slider-secondary-color: var(--slider-secondary-color);
+      --paper-slider-container-color: var(--slider-bar-color);
+    }
+  </style>
 
   <style shady-unscoped>
     /*
@@ -123,11 +128,11 @@
     paper-dialog-scrollable:not(.can-scroll) > .scrollable {
       -webkit-overflow-scrolling: auto !important;
     }
+
     paper-dialog-scrollable.can-scroll > .scrollable {
       -webkit-overflow-scrolling: touch !important;
     }
   </style>
-
 </custom-style>
 
 <dom-module id='ha-style'>
@@ -188,7 +193,6 @@
   </template>
 </dom-module>
 
-
 <dom-module id='ha-style-dialog'>
   <template>
     <style>
@@ -221,6 +225,7 @@
           -webkit-overflow-scrolling: auto;
         }
       }
+
       /* force smooth scrolling for iOS 10 */
       paper-dialog-scrollable.can-scroll {
         --paper-dialog-scrollable: {