From 7758ddba56d2cd9315c16e669d25a8593f188661 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 5 Feb 2020 00:40:35 +0100 Subject: [PATCH] Fix theming with derived styles (#4758) * Fix theming with derived styles * Move --- hassio/src/hassio-main.ts | 7 ++- hassio/src/hassio-pages-with-tabs.ts | 4 -- hassio/src/resources/hassio-style.ts | 15 +----- hassio/src/system/hassio-system.ts | 7 +-- src/common/dom/apply_themes_on_element.ts | 4 +- src/resources/ha-style.ts | 57 ++--------------------- src/resources/styles.ts | 44 +++++++++++++++++ 7 files changed, 59 insertions(+), 79 deletions(-) diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts index d8f9cca73f..1b6ac36288 100644 --- a/hassio/src/hassio-main.ts +++ b/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 diff --git a/hassio/src/hassio-pages-with-tabs.ts b/hassio/src/hassio-pages-with-tabs.ts index a34eb11666..ab2291fb54 100644 --- a/hassio/src/hassio-pages-with-tabs.ts +++ b/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); - } `, ]; } diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts index 91a8782b6b..7c51b469fa 100644 --- a/hassio/src/resources/hassio-style.ts +++ b/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 = ` - -`; - -document.head.appendChild(documentContainer.content); diff --git a/hassio/src/system/hassio-system.ts b/hassio/src/system/hassio-system.ts index fb9c4c192f..e1ea7eb668 100644 --- a/hassio/src/system/hassio-system.ts +++ b/hassio/src/system/hassio-system.ts @@ -33,7 +33,7 @@ class HassioSystem extends LitElement { return html`

Information

-
+
{ 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] = ""; diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts index ae85ea1e6f..943bc9a70c 100644 --- a/src/resources/ha-style.ts +++ b/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 = ` --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 = ` --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 = ` --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 = ` --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 = ` --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 = ` --rgb-secondary-text-color: 114, 114, 114; --rgb-text-primary-color: 255, 255, 255; - /* mwc */ - --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)); - - /* 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); - + ${Object.entries(derivedStyles) + .map(([key, value]) => `--${key}: ${value};`) + .join("")} } diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 278c881f9a..34c2e7980d 100644 --- a/src/resources/styles.ts +++ b/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;