Easier theming and also apply theme to date picker (#1041)

* datepicker overlay backgrond

* style vaadin more

* cleanup diff

* make styling easier

* more vars

* sidebar text

* sidebar selected background backward compatible

* indent commented theming var

* fix sidebar text color incompatibility

src/components/entity/state-badge.html

@@ -32,7 +32,7 @@
 
     /* Color the icon if unavailable */
     ha-state-icon[data-state=unavailable] {
-      color: var(--disabled-text-color);
+      color: var(--state-icon-unavailable);
     }
     </style>
 

src/components/ha-sidebar.html

@@ -16,7 +16,7 @@
     <style include="iron-flex iron-flex-alignment iron-positioning">
       :host {
         --sidebar-text: {
-          color: var(--primary-text-color);
+          color: var(--sidebar-text-color);
           font-weight: 500;
           font-size: 14px;
         };
@@ -27,7 +27,7 @@
         -webkit-user-select: none;
         -moz-user-select: none;
         border-right: 1px solid var(--divider-color);
-        background: var(--paper-listbox-background-color, var(--primary-background-color));
+        background-color: var(--sidebar-background-color, var(--primary-background-color));
       }
 
       app-toolbar {
@@ -47,20 +47,17 @@
         };
 
         --paper-item-icon: {
-          color: #000;
+          color: var(--sidebar-icon-color);
-          opacity: var(--dark-secondary-opacity);
-        };
-
-        --paper-item-selected: {
-          color: var(--primary-color);
-          background-color: var(--paper-grey-200);
-          opacity: 1;
         };
       }
+
       paper-icon-item.iron-selected {
+        --paper-icon-item: {
+          background-color: var(--sidebar-selected-background-color, var(--paper-grey-200));
+        };
+
         --paper-item-icon: {
-          color: var(--primary-color);
+          color: var(--sidebar-selected-icon-color);
-          opacity: 1;
         };
       }
 
@@ -68,7 +65,7 @@
         @apply --sidebar-text;
       }
       paper-icon-item.iron-selected .item-text {
-        opacity: 1;
+          color: var(--sidebar-selected-text-color);
       }
 
       paper-icon-item.logout {
@@ -77,9 +74,8 @@
 
       .divider {
         height: 1px;
-        background-color: #000;
+        background-color: var(--divider-color);
         margin: 4px 0;
-        opacity: var(--dark-divider-opacity)
       }
 
       .setting {
@@ -92,8 +88,8 @@
       }
 
       .dev-tools {
+        color: var(--sidebar-icon-color);
         padding: 0 8px;
-        opacity: var(--dark-secondary-opacity);
       }
     </style>
 

src/resources/ha-date-picker-style.html

@@ -53,6 +53,7 @@
       [part~="value"] {
         font-size: var(--paper-font-subhead_-_font-size);
         font-family: inherit;
+        color: inherit;
         border: none;
         background: transparent;
       }
@@ -75,6 +76,7 @@
         cursor: pointer;
         min-height: var(--paper-item-min-height, 48px);
         padding: 0px 16px;
+        color: inherit;
       }
 
       [part~="button"]:focus {
@@ -86,8 +88,31 @@
 <dom-module id="ha-date-picker-overlay-styles" theme-for="vaadin-date-picker-overlay">
   <template>
     <style include="vaadin-date-picker-overlay-default-theme">
+      :host {
+        background-color: var(--paper-card-background-color, var(--primary-background-color));
+      }
+
       [part~="toolbar"] {
         padding: 0.3em;
+        background-color: var(--secondary-background-color);
+      }
+
+      [part="years"] {
+        background-color: var(--paper-grey-200);
+      }
+
+    </style>
+  </template>
+</dom-module>
+<dom-module id="ha-date-picker-month-styles" theme-for="vaadin-month-calendar">
+  <template>
+    <style include="vaadin-month-calendar-default-theme">
+      :host([focused]) [part="date"][focused],
+      [part="date"][selected] {
+        background-color: var(--paper-grey-200);
+      }
+      [part="date"][today] {
+        color: var(--primary-color);
       }
     </style>
   </template>

src/resources/ha-style.html

@@ -14,41 +14,43 @@
     font-size: 14px;
     height: 100vh;
 
-    /* for paper-toggle-button */
+    /* text */
-    --paper-grey-50: #fafafa;
-    --paper-grey-200: #eeeeee;
-
-    --paper-item-icon-color: #44739e;
-    --paper-item-icon-active-color: #FDD835;
-
-    --dark-primary-color: #0288D1;
-    --primary-color: #03A9F4;
-    --light-primary-color: #B3E5FC;
-    --text-primary-color: #ffffff;
-    --accent-color: #FF9800;
-    --primary-background-color: var(--paper-grey-50);
-    --secondary-background-color: #E5E5E5;
     --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);
 
-    --table-row-background-color: transparent;
+    /* states and badges */
-    --table-row-alternative-background-color: #eee;
+    --state-icon-color: #44739e;
+    --state-icon-active-color: #FDD835;
+    --state-icon-unavailable-color: var(--disabled-text-color);
 
-    --paper-toggle-button-checked-ink-color: var(--primary-color);
+    /* background and sidebar */
-    --paper-toggle-button-checked-button-color: var(--primary-color);
+    --card-background-color: #ffffff;
-    --paper-toggle-button-checked-bar-color: var(--primary-color);
+    --primary-background-color: #fafafa;
+    --secondary-background-color: #e5e5e5; /* behind the cards on state */
 
-    --paper-slider-knob-color: var(--primary-color);
+    /* sidebar menu */
-    --paper-slider-knob-start-color: var(--primary-color);
+    --sidebar-text-color: var(--primary-text-color);
-    --paper-slider-pin-color: var(--primary-color);
+    --sidebar-background-color: var(--paper-listbox-background-color); /* backward compatible with existing themes */
-    --paper-slider-active-color: var(--primary-color);
+    --sidebar-icon-color: rgba(0, 0, 0, 0.5);
-    --paper-slider-secondary-color: var(--light-primary-color);
+    --sidebar-selected-text-color: var(--primary-text-color);
-    --paper-slider-container-color: var(--divider-color);
+/*  --sidebar-selected-background-color: rgba(30,30,30,0.1); */
+    --sidebar-selected-icon-color: var(--primary-color);
 
-    --paper-card-background-color: #FFF;
+    /* controls */
-    --paper-listbox-background-color: #FFF;
+    --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;
@@ -82,6 +84,32 @@
     --light-disabled-opacity: 0.3; /* or hint text or icon */
     --light-secondary-opacity: 0.7;
     --light-primary-opacity: 1.0;
+
+    /* 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>