diff --git a/cast/src/launcher/entrypoint.ts b/cast/src/launcher/entrypoint.ts index 2e184b830f..423e3165e7 100644 --- a/cast/src/launcher/entrypoint.ts +++ b/cast/src/launcher/entrypoint.ts @@ -1,4 +1,4 @@ import "../../../src/resources/safari-14-attachshadow-patch"; -import "../../../src/resources/ha-style"; -import "../../../src/resources/roboto"; import "./layout/hc-connect"; + +import("../../../src/resources/ha-style"); diff --git a/cast/src/receiver/layout/hc-main.ts b/cast/src/receiver/layout/hc-main.ts index cf03bbb502..bb84bbb39c 100644 --- a/cast/src/receiver/layout/hc-main.ts +++ b/cast/src/receiver/layout/hc-main.ts @@ -100,7 +100,9 @@ export class HcMain extends HassElement { protected firstUpdated(changedProps) { super.firstUpdated(changedProps); - import("../second-load"); + import("./hc-lovelace"); + import("../../../../src/resources/ha-style"); + window.addEventListener("location-changed", () => { const panelPath = `/${this._urlPath || "lovelace"}/`; if (location.pathname.startsWith(panelPath)) { diff --git a/cast/src/receiver/second-load.ts b/cast/src/receiver/second-load.ts deleted file mode 100644 index 97de839a76..0000000000 --- a/cast/src/receiver/second-load.ts +++ /dev/null @@ -1,3 +0,0 @@ -import "../../../src/resources/ha-style"; -import "../../../src/resources/roboto"; -import "./layout/hc-lovelace"; diff --git a/demo/src/entrypoint.ts b/demo/src/entrypoint.ts index 456bba9de4..ca58e546e3 100644 --- a/demo/src/entrypoint.ts +++ b/demo/src/entrypoint.ts @@ -1,4 +1,4 @@ -import "../../src/resources/ha-style"; -import "../../src/resources/roboto"; import "../../src/resources/safari-14-attachshadow-patch"; import "./ha-demo"; + +import("../../src/resources/ha-style"); diff --git a/gallery/src/entrypoint.js b/gallery/src/entrypoint.js index 8433202b6b..e814761ba0 100644 --- a/gallery/src/entrypoint.js +++ b/gallery/src/entrypoint.js @@ -1,5 +1,5 @@ -import "../../src/resources/ha-style"; -import "../../src/resources/roboto"; import "./ha-gallery"; +import("../../src/resources/ha-style"); + document.body.appendChild(document.createElement("ha-gallery")); diff --git a/hassio/src/entrypoint.ts b/hassio/src/entrypoint.ts index d844ef976e..fab7f7a776 100644 --- a/hassio/src/entrypoint.ts +++ b/hassio/src/entrypoint.ts @@ -1,15 +1,15 @@ // Compat needs to be first import import "../../src/resources/compatibility"; import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings"; -import "../../src/resources/roboto"; -import "../../src/resources/ha-style"; import "../../src/resources/safari-14-attachshadow-patch"; import "./hassio-main"; +import("../../src/resources/ha-style"); + setCancelSyntheticClickEvents(false); const styleEl = document.createElement("style"); -styleEl.innerHTML = ` +styleEl.textContent = ` body { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; diff --git a/src/entrypoints/app.ts b/src/entrypoints/app.ts index 458fc850c2..283207a51e 100644 --- a/src/entrypoints/app.ts +++ b/src/entrypoints/app.ts @@ -4,8 +4,8 @@ import { } from "@polymer/polymer/lib/utils/settings"; import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min"; import "../layouts/home-assistant"; -import "../resources/ha-style"; -import "../resources/roboto"; + +import("../resources/ha-style"); setPassiveTouchGestures(true); setCancelSyntheticClickEvents(false); diff --git a/src/entrypoints/authorize.ts b/src/entrypoints/authorize.ts index 0bbfdf65eb..c2fa3dae45 100644 --- a/src/entrypoints/authorize.ts +++ b/src/entrypoints/authorize.ts @@ -2,9 +2,9 @@ import "../resources/compatibility"; import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings"; import "../auth/ha-authorize"; -import "../resources/ha-style"; -import "../resources/roboto"; import "../resources/safari-14-attachshadow-patch"; import "../resources/array.flat.polyfill"; +import("../resources/ha-style"); + setCancelSyntheticClickEvents(false); diff --git a/src/entrypoints/onboarding.ts b/src/entrypoints/onboarding.ts index 78696169ca..014b4571c1 100644 --- a/src/entrypoints/onboarding.ts +++ b/src/entrypoints/onboarding.ts @@ -2,11 +2,11 @@ import "../resources/compatibility"; import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings"; import "../onboarding/ha-onboarding"; -import "../resources/ha-style"; -import "../resources/roboto"; import "../resources/safari-14-attachshadow-patch"; import "../resources/array.flat.polyfill"; +import("../resources/ha-style"); + setCancelSyntheticClickEvents(false); declare global { diff --git a/src/onboarding/particles.ts b/src/onboarding/particles.ts index 71e347c7a0..fcc7206c85 100644 --- a/src/onboarding/particles.ts +++ b/src/onboarding/particles.ts @@ -1,6 +1,6 @@ import { tsParticles } from "tsparticles-engine"; import { loadLinksPreset } from "tsparticles-preset-links"; -import { DEFAULT_PRIMARY_COLOR } from "../resources/ha-style"; +import { DEFAULT_PRIMARY_COLOR } from "../resources/styles-data"; loadLinksPreset(tsParticles).then(() => { tsParticles.load("particles", { diff --git a/src/panels/config/hardware/ha-config-hardware.ts b/src/panels/config/hardware/ha-config-hardware.ts index 7ed1574fd7..63c57a0391 100644 --- a/src/panels/config/hardware/ha-config-hardware.ts +++ b/src/panels/config/hardware/ha-config-hardware.ts @@ -35,7 +35,7 @@ import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog- import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart"; import "../../../layouts/hass-subpage"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; -import { DEFAULT_PRIMARY_COLOR } from "../../../resources/ha-style"; +import { DEFAULT_PRIMARY_COLOR } from "../../../resources/styles-data"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; import { hardwareBrandsUrl } from "../../../util/brands-url"; diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts index 725955fe98..6d8fe0a225 100644 --- a/src/panels/profile/ha-pick-theme-row.ts +++ b/src/panels/profile/ha-pick-theme-row.ts @@ -19,7 +19,7 @@ import "../../components/ha-textfield"; import { DEFAULT_ACCENT_COLOR, DEFAULT_PRIMARY_COLOR, -} from "../../resources/ha-style"; +} from "../../resources/styles-data"; import { HomeAssistant } from "../../types"; import { documentationUrl } from "../../util/documentation-url"; diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts index b28bda53f7..fa4841c755 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -1,433 +1,442 @@ -import "@polymer/polymer/lib/elements/custom-style"; -import { derivedStyles } from "./styles-data"; +import { css, unsafeCSS } from "lit"; +import { fontStyles } from "./roboto"; +import { + DEFAULT_ACCENT_COLOR, + DEFAULT_PRIMARY_COLOR, + derivedStyles, +} from "./styles-data"; -export const DEFAULT_PRIMARY_COLOR = "#03a9f4"; -export const DEFAULT_ACCENT_COLOR = "#ff9800"; +const mainStyles = css` + /* + Home Assistant default styles. -const documentContainer = document.createElement("template"); -documentContainer.setAttribute("style", "display: none;"); + 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; -documentContainer.innerHTML = ` - -`; + .join("") + )} + } +`.toString(); -document.head.appendChild(documentContainer.content); +const styleElement = document.createElement("style"); +styleElement.textContent = [mainStyles, fontStyles].join(""); +document.head.append(styleElement); diff --git a/src/resources/roboto.js b/src/resources/roboto.js deleted file mode 100644 index 397e4812c3..0000000000 --- a/src/resources/roboto.js +++ /dev/null @@ -1,132 +0,0 @@ -export {}; // for Babel to treat as a module - -const documentContainer = document.createElement("template"); -documentContainer.setAttribute("style", "display: none;"); - -documentContainer.innerHTML = ``; - -document.head.appendChild(documentContainer.content); - -/** -@license -Copyright (c) 2015 The Polymer Project Authors. All rights reserved. -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt -Code distributed by Google as part of the polymer project is also -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -*/ -/* - FIXME(polymer-modulizer): the above comments were extracted - from HTML and may be out of place here. Review them and - then delete this comment! -*/ diff --git a/src/resources/roboto.ts b/src/resources/roboto.ts new file mode 100644 index 0000000000..908cebd035 --- /dev/null +++ b/src/resources/roboto.ts @@ -0,0 +1,124 @@ +import { css, unsafeCSS } from "lit"; + +export const fontStyles = css` + @font-face { + font-family: "Roboto"; + src: + local("Roboto Thin"), + local("Roboto-Thin"), + url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Thin.woff2) + format("woff2"); + font-weight: 100; + font-style: normal; + } + @font-face { + font-family: "Roboto"; + src: + local("Roboto Thin Italic"), + local("Roboto-ThinItalic"), + url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-ThinItalic.woff2) + format("woff2"); + font-weight: 100; + font-style: italic; + } + @font-face { + font-family: "Roboto"; + src: + local("Roboto Light"), + local("Roboto-Light"), + url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Light.woff2) + format("woff2"); + font-weight: 300; + font-style: normal; + } + @font-face { + font-family: "Roboto"; + src: + local("Roboto Light Italic"), + local("Roboto-LightItalic"), + url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-LightItalic.woff2) + format("woff2"); + font-weight: 300; + font-style: italic; + } + @font-face { + font-family: "Roboto"; + src: + local("Roboto Regular"), + local("Roboto-Regular"), + url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Regular.woff2) + format("woff2"); + font-weight: 400; + font-style: normal; + } + @font-face { + font-family: "Roboto"; + src: + local("Roboto Italic"), + local("Roboto-Italic"), + url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-RegularItalic.woff2) + format("woff2"); + font-weight: 400; + font-style: italic; + } + @font-face { + font-family: "Roboto"; + src: + local("Roboto Medium"), + local("Roboto-Medium"), + url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Medium.woff2) + format("woff2"); + font-weight: 500; + font-style: normal; + } + @font-face { + font-family: "Roboto"; + src: + local("Roboto Medium Italic"), + local("Roboto-MediumItalic"), + url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-MediumItalic.woff2) + format("woff2"); + font-weight: 500; + font-style: italic; + } + @font-face { + font-family: "Roboto"; + src: + local("Roboto Bold"), + local("Roboto-Bold"), + url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Bold.woff2) + format("woff2"); + font-weight: 700; + font-style: normal; + } + @font-face { + font-family: "Roboto"; + src: + local("Roboto Bold Italic"), + local("Roboto-BoldItalic"), + url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-BoldItalic.woff2) + format("woff2"); + font-weight: 700; + font-style: italic; + } + @font-face { + font-family: "Roboto"; + src: + local("Roboto Black"), + local("Roboto-Black"), + url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Black.woff2) + format("woff2"); + font-weight: 900; + font-style: normal; + } + @font-face { + font-family: "Roboto"; + src: + local("Roboto Black Italic"), + local("Roboto-BlackItalic"), + url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-BlackItalic.woff2) + format("woff2"); + font-weight: 900; + font-style: italic; + } +`.toString(); diff --git a/src/resources/styles-data.ts b/src/resources/styles-data.ts index f172d9e69f..87114d6885 100644 --- a/src/resources/styles-data.ts +++ b/src/resources/styles-data.ts @@ -1,3 +1,6 @@ +export const DEFAULT_PRIMARY_COLOR = "#03a9f4" as const; +export const DEFAULT_ACCENT_COLOR = "#ff9800" as const; + export const darkStyles = { "primary-background-color": "#111111", "card-background-color": "#1c1c1c", @@ -50,7 +53,7 @@ export const darkStyles = { "map-filter": "invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)", "disabled-color": "#464646", -}; +} as const; export const derivedStyles = { "state-icon-error-color": "var(--error-state-color, var(--error-color))", @@ -146,4 +149,4 @@ export const derivedStyles = { "material-background-color": "var(--card-background-color)", "material-secondary-background-color": "var(--secondary-background-color)", "material-secondary-text-color": "var(--secondary-text-color)", -}; +} as const;