Fix theming with derived styles (#4758)

* Fix theming with derived styles

* Move

hassio/src/hassio-main.ts

@@ -84,7 +84,12 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
-    applyThemesOnElement(this, this.hass.themes, this.hass.selectedTheme, true);
+    applyThemesOnElement(
+      this.parentElement,
+      this.hass.themes,
+      this.hass.selectedTheme,
+      true
+    );
     this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
     // Paulus - March 17, 2019
     // We went to a single hass-toggle-menu event in HA 0.90. However, the

hassio/src/hassio-pages-with-tabs.ts

@@ -126,10 +126,6 @@ class HassioPagesWithTabs extends LitElement {
           --paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
           text-transform: uppercase;
         }
-        app-header,
-        app-toolbar {
-          background-color: var(--primary-color);
-        }
       `,
     ];
   }

hassio/src/resources/hassio-style.ts

@@ -1,8 +1,5 @@
 import { css } from "lit-element";
 
-const documentContainer = document.createElement("template");
-documentContainer.setAttribute("style", "display: none;");
-
 export const hassioStyle = css`
   .content {
     margin: 8px;
@@ -48,17 +45,7 @@ export const hassioStyle = css`
     color: var(--primary-color);
   }
   .error {
-    color: var(--google-red-500);
+    color: var(--error-color);
     margin-top: 16px;
   }
 `;
-
-documentContainer.innerHTML = `<dom-module id="hassio-style">
-  <template>
-    <style>
-      ${hassioStyle.toString()}
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild(documentContainer.content);

hassio/src/system/hassio-system.ts

@@ -33,7 +33,7 @@ class HassioSystem extends LitElement {
     return html`
       <div class="content">
         <h1>Information</h1>
-        <div class="side-by-side">
+        <div class="card-group">
           <hassio-supervisor-info
             .hass=${this.hass}
             .supervisorInfo=${this.supervisorInfo}
@@ -66,11 +66,6 @@ class HassioSystem extends LitElement {
           padding-left: 8px;
           margin-bottom: 8px;
         }
-        .side-by-side {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-          grid-gap: 8px;
-        }
         hassio-supervisor-log {
           width: 100%;
         }

src/common/dom/apply_themes_on_element.ts

@@ -1,3 +1,5 @@
+import { derivedStyles } from "../../resources/styles";
+
 const hexToRgb = (hex: string): string | null => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
   const checkHex = hex.replace(shorthandRegex, (_m, r, g, b) => {
@@ -36,7 +38,7 @@ export const applyThemesOnElement = (
   }
   const styles = { ...element._themes };
   if (themeName !== "default") {
-    const theme = themes.themes[themeName];
+    const theme = { ...derivedStyles, ...themes.themes[themeName] };
     Object.keys(theme).forEach((key) => {
       const prefixedKey = `--${key}`;
       element._themes[prefixedKey] = "";

src/resources/ha-style.ts

@@ -1,6 +1,6 @@
 import "@polymer/paper-styles/paper-styles";
 import "@polymer/polymer/lib/elements/custom-style";
-import { haStyle, haStyleDialog } from "./styles";
+import { haStyle, haStyleDialog, derivedStyles } from "./styles";
 
 const documentContainer = document.createElement("template");
 documentContainer.setAttribute("style", "display: none;");
@@ -33,14 +33,11 @@ documentContainer.innerHTML = `<custom-style>
 
       --scrollbar-thumb-color: rgb(194, 194, 194);
 
-
       --error-color: #db4437;
-      --error-state-color: var(--error-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;
@@ -48,22 +45,7 @@ documentContainer.innerHTML = `<custom-style>
       --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-color);
-      --sidebar-selected-icon-color: var(--primary-color);
-
-      /* controls */
-      --switch-checked-color: var(--primary-color);
-      /* --switch-unchecked-color: var(--accent-color); */
-      --switch-checked-button-color: var(--switch-checked-color, var(--paper-grey-50));
-      --switch-checked-track-color: var(--switch-checked-color, #000000);
-      --switch-unchecked-button-color: var(--switch-unchecked-color, var(--paper-grey-50));
-      --switch-unchecked-track-color: var(--switch-unchecked-color, #000000);
-      --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;
@@ -72,7 +54,6 @@ documentContainer.innerHTML = `<custom-style>
       --label-badge-blue: #039be5;
       --label-badge-green: #0DA035;
       --label-badge-yellow: #f4b400;
-      --label-badge-grey: var(--paper-grey-500);
 
       /*
         Paper-styles color.html dependency is stripped on build.
@@ -89,7 +70,6 @@ documentContainer.innerHTML = `<custom-style>
       --google-blue-500: #4285f4;
       --google-green-500: #0f9d58;
       --google-yellow-500: #f4b400;
-      --paper-spinner-color: var(--primary-color);
 
       /* for paper-slider */
       --paper-green-400: #66bb6a;
@@ -108,26 +88,9 @@ documentContainer.innerHTML = `<custom-style>
       --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 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);
       --ha-paper-slider-pin-font-size: 15px;
 
-      /* set data table style */
-      --data-table-background-color: var(--card-background-color);
-
       /* rgb */
       --rgb-primary-color: 3, 169, 244;
       --rgb-accent-color: 255, 152, 0;
@@ -135,21 +98,9 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-secondary-text-color: 114, 114, 114;
       --rgb-text-primary-color: 255, 255, 255;
 
-      /* mwc */
+      ${Object.entries(derivedStyles)
-      --mdc-theme-primary: var(--primary-color);
+        .map(([key, value]) => `--${key}: ${value};`)
-      --mdc-theme-secondary: var(--accent-color);
+        .join("")}
-      --mdc-theme-background: var(--primary-background-color);
-      --mdc-theme-surface: var(--paper-card-background-color, var(--card-background-color));
-
-      /* mwc text styles */
-      --mdc-theme-on-primary: var(--text-primary-color);
-      --mdc-theme-on-secondary: var(--text-primary-color);
-      --mdc-theme-on-surface: var(--primary-text-color);
-
-      /* app header background color */
-      --app-header-text-color: var(--text-primary-color);
-      --app-header-background-color: var(--primary-color);
-
     }
   </style>
 

src/resources/styles.ts

@@ -1,5 +1,49 @@
 import { css } from "lit-element";
 
+export const derivedStyles = {
+  "paper-spinner-color": "var(--primary-color)",
+  "error-state-color": "var(--error-color)",
+  "state-icon-unavailable-color": "var(--disabled-text-color)",
+  "sidebar-text-color": "var(--primary-text-color)",
+  "sidebar-background-color": "var(--paper-listbox-background-color);",
+  "sidebar-selected-text-color": "var(--primary-color)",
+  "sidebar-selected-icon-color": "var(--primary-color)",
+  "switch-checked-color": "var(--primary-color)",
+  "switch-checked-button-color":
+    "var(--switch-checked-color, var(--paper-grey-50))",
+  "switch-checked-track-color": "var(--switch-checked-color, #000000)",
+  "switch-unchecked-button-color":
+    "var(--switch-unchecked-color, var(--paper-grey-50))",
+  "switch-unchecked-track-color": "var(--switch-unchecked-color, #000000)",
+  "slider-color": "var(--primary-color)",
+  "slider-secondary-color": "var(--light-primary-color)",
+  "slider-bar-color": "var(--disabled-text-color)",
+  "label-badge-grey": "var(--paper-grey-500)",
+  "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)",
+  "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)",
+  "data-table-background-color": "var(--card-background-color)",
+  "mdc-theme-primary": "var(--primary-color)",
+  "mdc-theme-secondary": "var(--accent-color)",
+  "mdc-theme-background": "var(--primary-background-color)",
+  "mdc-theme-surface":
+    "var(--paper-card-background-color, var(--card-background-color))",
+  "mdc-theme-on-primary": "var(--text-primary-color)",
+  "mdc-theme-on-secondary": "var(--text-primary-color)",
+  "mdc-theme-on-surface": "var(--primary-text-color)",
+  "app-header-text-color": "var(--text-primary-color)",
+  "app-header-background-color": "var(--primary-color)",
+};
+
 export const haStyle = css`
   :host {
     @apply --paper-font-body1;