github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Fix theming with derived styles (#4758) 

* Fix theming with derived styles

* Move
This commit is contained in:
Bram Kragten 2020-02-05 00:40:35 +01:00 committed by GitHub
parent e0376c803f
commit 7758ddba56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 59 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
hassio/src/hassio-main.ts
View File

@ -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

4
hassio/src/hassio-pages-with-tabs.ts
View File

@ -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);
}
`,
];
}

15
hassio/src/resources/hassio-style.ts
View File

@ -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);

7
hassio/src/system/hassio-system.ts
View File

@ -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%;
}

4
src/common/dom/apply_themes_on_element.ts
View File

@ -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] = "";

57
src/resources/ha-style.ts
View File

@ -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 */
--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("")}
}
</style>

44
src/resources/styles.ts
View File

@ -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;