Setting used paper-colors in ha-style (#1091)

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

* better indentation

src/resources/ha-style.html

@@ -2,14 +2,14 @@
 <link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
 
 <custom-style>
-<style is="custom-style">/* remove is= on Polymer 2 */
+  <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;
@@ -42,12 +42,12 @@
       --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-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); */
+      /* --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);
@@ -61,7 +61,16 @@
       --label-badge-yellow: #f4b400;
       --label-badge-grey: var(--paper-grey-500);
 
-    /* Taken from paper-styles/color.html */
+      /*
+        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.
+      */
+
+      --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 */
+
       /* for paper-spinner */
       --google-red-500: #db4437;
       --google-blue-500: #4285f4;
@@ -88,10 +97,8 @@
       /* 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);
 
@@ -108,10 +115,8 @@
       --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>
 
   <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: {