From b7e5a09f64bd45fd7d12c0925bf86679080be728 Mon Sep 17 00:00:00 2001 From: Steve Repsher Date: Sun, 15 Oct 2023 01:14:49 +0000 Subject: [PATCH 1/3] Minify ha-style/Roboto and load asynchronously --- cast/src/launcher/entrypoint.ts | 4 +- cast/src/receiver/second-load.ts | 4 +- demo/src/entrypoint.ts | 4 +- gallery/src/entrypoint.js | 4 +- hassio/src/entrypoint.ts | 6 +- src/entrypoints/app.ts | 4 +- src/entrypoints/authorize.ts | 4 +- src/entrypoints/onboarding.ts | 4 +- src/resources/ha-style.ts | 850 ++++++++++++++++--------------- src/resources/roboto.js | 132 ----- src/resources/roboto.ts | 124 +++++ src/resources/styles-data.ts | 4 +- 12 files changed, 572 insertions(+), 572 deletions(-) delete mode 100644 src/resources/roboto.js create mode 100644 src/resources/roboto.ts diff --git a/cast/src/launcher/entrypoint.ts b/cast/src/launcher/entrypoint.ts index 2e184b830f25..423e3165e771 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/second-load.ts b/cast/src/receiver/second-load.ts index 97de839a76ff..3a54d5f9755a 100644 --- a/cast/src/receiver/second-load.ts +++ b/cast/src/receiver/second-load.ts @@ -1,3 +1,3 @@ -import "../../../src/resources/ha-style"; -import "../../../src/resources/roboto"; import "./layout/hc-lovelace"; + +import("../../../src/resources/ha-style"); diff --git a/demo/src/entrypoint.ts b/demo/src/entrypoint.ts index 456bba9de4da..ca58e546e357 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 8433202b6b0f..e814761ba087 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 d844ef976e7d..fab7f7a776a6 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 458fc850c2a6..283207a51e33 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 0bbfdf65eb2f..c2fa3dae456d 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 78696169ca5a..014b4571c15f 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/resources/ha-style.ts b/src/resources/ha-style.ts index 8d14d63d417c..eab98d00d55b 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -1,428 +1,436 @@ -import "@polymer/polymer/lib/elements/custom-style"; +import { css, unsafeCSS } from "lit"; +import { fontStyles } from "./roboto"; import { derivedStyles } from "./styles-data"; -export const DEFAULT_PRIMARY_COLOR = "#03a9f4"; -export const DEFAULT_ACCENT_COLOR = "#ff9800"; +export const DEFAULT_PRIMARY_COLOR = "#03a9f4" as const; +export const DEFAULT_ACCENT_COLOR = "#ff9800" as const; + +const mainStyles = css` + /* + Home Assistant default styles. + + 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; + + /* text */ + --primary-text-color: #212121; + --secondary-text-color: #727272; + --text-primary-color: #ffffff; + --text-light-primary-color: #212121; + --disabled-text-color: #bdbdbd; + + /* main interface colors */ + --primary-color: ${unsafeCSS(DEFAULT_PRIMARY_COLOR)}; + --dark-primary-color: #0288d1; + --light-primary-color: #b3e5fc; + --accent-color: ${unsafeCSS(DEFAULT_ACCENT_COLOR)}; + --divider-color: rgba(0, 0, 0, 0.12); + --outline-color: rgba(0, 0, 0, 0.12); + + --scrollbar-thumb-color: rgb(194, 194, 194); + + --error-color: #db4437; + --warning-color: #ffa600; + --success-color: #43a047; + --info-color: #039be5; + + /* backgrounds */ + --card-background-color: #ffffff; + --primary-background-color: #fafafa; + --secondary-background-color: #e5e5e5; /* behind the cards on state */ + --clear-background-color: #ffffff; + + /* for header */ + --header-height: 56px; + + /* for label-badge */ + --label-badge-red: var(--error-color); + --label-badge-blue: var(--info-color); + --label-badge-green: var(--success-color); + --label-badge-yellow: var(--warning-color); + --label-badge-grey: #9e9e9e; + + /* states icon */ + --state-icon-color: #44739e; + /* an error state is anything that would be considered an error */ + /* --state-icon-error-color: #db4437; derived from error-color */ + + /* energy */ + --energy-grid-consumption-color: #488fc2; + --energy-grid-return-color: #8353d1; + --energy-solar-color: #ff9800; + --energy-non-fossil-color: #0f9d58; + --energy-battery-out-color: #4db6ac; + --energy-battery-in-color: #f06292; + --energy-gas-color: #8e021b; + --energy-water-color: #00bcd4; + + /* opacity for dark text on a light background */ + --dark-divider-opacity: 0.12; + --dark-disabled-opacity: 0.38; /* or hint text or icon */ + --dark-secondary-opacity: 0.54; + --dark-primary-opacity: 0.87; + + /* opacity for light text on a dark background */ + --light-divider-opacity: 0.12; + --light-disabled-opacity: 0.3; /* or hint text or icon */ + --light-secondary-opacity: 0.7; + --light-primary-opacity: 1; + + /* rgb */ + --rgb-primary-color: 3, 169, 244; + --rgb-accent-color: 255, 152, 0; + --rgb-primary-text-color: 33, 33, 33; + --rgb-secondary-text-color: 114, 114, 114; + --rgb-text-primary-color: 255, 255, 255; + --rgb-card-background-color: 255, 255, 255; + + /* color */ + --disabled-color: #bdbdbd; + --red-color: #f44336; + --pink-color: #e91e63; + --purple-color: #926bc7; + --deep-purple-color: #6e41ab; + --indigo-color: #3f51b5; + --blue-color: #2196f3; + --light-blue-color: #03a9f4; + --cyan-color: #00bcd4; + --teal-color: #009688; + --green-color: #4caf50; + --light-green-color: #8bc34a; + --lime-color: #cddc39; + --yellow-color: #ffeb3b; + --amber-color: #ffc107; + --orange-color: #ff9800; + --deep-orange-color: #ff6f22; + --brown-color: #795548; + --light-grey-color: #bdbdbd; + --grey-color: #9e9e9e; + --dark-grey-color: #606060; + --blue-grey-color: #607d8b; + --black-color: #000000; + --white-color: #ffffff; + + /* state color */ + --state-active-color: var(--amber-color); + --state-inactive-color: var(--grey-color); + --state-unavailable-color: var(--disabled-color); + + /* state domain colors */ + --state-alarm_control_panel-armed_away-color: var(--green-color); + --state-alarm_control_panel-armed_custom_bypass-color: var(--green-color); + --state-alarm_control_panel-armed_home-color: var(--green-color); + --state-alarm_control_panel-armed_night-color: var(--green-color); + --state-alarm_control_panel-armed_vacation-color: var(--green-color); + --state-alarm_control_panel-arming-color: var(--orange-color); + --state-alarm_control_panel-disarming-color: var(--orange-color); + --state-alarm_control_panel-pending-color: var(--orange-color); + --state-alarm_control_panel-triggered-color: var(--red-color); + --state-alert-off-color: var(--orange-color); + --state-alert-on-color: var(--red-color); + --state-binary_sensor-active-color: var(--amber-color); + --state-binary_sensor-battery-on-color: var(--red-color); + --state-binary_sensor-carbon_monoxide-on-color: var(--red-color); + --state-binary_sensor-gas-on-color: var(--red-color); + --state-binary_sensor-heat-on-color: var(--red-color); + --state-binary_sensor-lock-on-color: var(--red-color); + --state-binary_sensor-moisture-on-color: var(--red-color); + --state-binary_sensor-problem-on-color: var(--red-color); + --state-binary_sensor-safety-on-color: var(--red-color); + --state-binary_sensor-smoke-on-color: var(--red-color); + --state-binary_sensor-sound-on-color: var(--red-color); + --state-binary_sensor-tamper-on-color: var(--red-color); + --state-climate-auto-color: var(--green-color); + --state-climate-cool-color: var(--blue-color); + --state-climate-dry-color: var(--orange-color); + --state-climate-fan_only-color: var(--cyan-color); + --state-climate-heat-color: var(--deep-orange-color); + --state-climate-heat-cool-color: var(--amber-color); + --state-cover-active-color: var(--purple-color); + --state-device_tracker-active-color: var(--blue-color); + --state-device_tracker-home-color: var(--green-color); + --state-fan-active-color: var(--cyan-color); + --state-humidifier-on-color: var(--blue-color); + --state-lawn_mower-error-color: var(--red-color); + --state-lawn_mower-mowing-color: var(--teal-color); + --state-light-active-color: var(--amber-color); + --state-lock-jammed-color: var(--red-color); + --state-lock-locked-color: var(--green-color); + --state-lock-pending-color: var(--orange-color); + --state-lock-unlocked-color: var(--red-color); + --state-media_player-active-color: var(--light-blue-color); + --state-person-active-color: var(--blue-color); + --state-person-home-color: var(--green-color); + --state-plant-active-color: var(--red-color); + --state-siren-active-color: var(--red-color); + --state-sun-above_horizon-color: var(--amber-color); + --state-sun-below_horizon-color: var(--indigo-color); + --state-switch-active-color: var(--amber-color); + --state-update-active-color: var(--orange-color); + --state-vacuum-active-color: var(--teal-color); + --state-sensor-battery-high-color: var(--green-color); + --state-sensor-battery-low-color: var(--red-color); + --state-sensor-battery-medium-color: var(--orange-color); + --state-water_heater-eco-color: var(--green-color); + --state-water_heater-electric-color: var(--orange-color); + --state-water_heater-gas-color: var(--orange-color); + --state-water_heater-heat_pump-color: var(--orange-color); + --state-water_heater-high_demand-color: var(--deep-orange-color); + --state-water_heater-performance-color: var(--deep-orange-color); + + /* history colors */ + --history-unavailable-color: transparent; + --history-unknown-color: var(--dark-grey-color); + + /* input components */ + --input-idle-line-color: rgba(0, 0, 0, 0.42); + --input-hover-line-color: rgba(0, 0, 0, 0.87); + --input-disabled-line-color: rgba(0, 0, 0, 0.06); + --input-outlined-idle-border-color: rgba(0, 0, 0, 0.38); + --input-outlined-hover-border-color: rgba(0, 0, 0, 0.87); + --input-outlined-disabled-border-color: rgba(0, 0, 0, 0.06); + --input-fill-color: rgb(245, 245, 245); + --input-disabled-fill-color: rgb(250, 250, 250); + --input-ink-color: rgba(0, 0, 0, 0.87); + --input-label-ink-color: rgba(0, 0, 0, 0.6); + --input-disabled-ink-color: rgba(0, 0, 0, 0.37); + --input-dropdown-icon-color: rgba(0, 0, 0, 0.54); + + /* Vaadin typography */ + --material-h6-font-size: 1.25rem; + --material-small-font-size: 0.875rem; + --material-caption-font-size: 0.75rem; + --material-button-font-size: 0.875rem; + + /* Paper shadow */ + --shadow-transition: { + transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); + }; + + --shadow-none: { + box-shadow: none; + }; + + /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */ + + --shadow-elevation-2dp: { + box-shadow: + 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12), + 0 3px 1px -2px rgba(0, 0, 0, 0.2); + }; + + --shadow-elevation-3dp: { + box-shadow: + 0 3px 4px 0 rgba(0, 0, 0, 0.14), + 0 1px 8px 0 rgba(0, 0, 0, 0.12), + 0 3px 3px -2px rgba(0, 0, 0, 0.4); + }; + + --shadow-elevation-4dp: { + box-shadow: + 0 4px 5px 0 rgba(0, 0, 0, 0.14), + 0 1px 10px 0 rgba(0, 0, 0, 0.12), + 0 2px 4px -1px rgba(0, 0, 0, 0.4); + }; + + --shadow-elevation-6dp: { + box-shadow: + 0 6px 10px 0 rgba(0, 0, 0, 0.14), + 0 1px 18px 0 rgba(0, 0, 0, 0.12), + 0 3px 5px -1px rgba(0, 0, 0, 0.4); + }; + + --shadow-elevation-8dp: { + box-shadow: + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12), + 0 5px 5px -3px rgba(0, 0, 0, 0.4); + }; + + --shadow-elevation-12dp: { + box-shadow: + 0 12px 16px 1px rgba(0, 0, 0, 0.14), + 0 4px 22px 3px rgba(0, 0, 0, 0.12), + 0 6px 7px -4px rgba(0, 0, 0, 0.4); + }; + + --shadow-elevation-16dp: { + box-shadow: + 0 16px 24px 2px rgba(0, 0, 0, 0.14), + 0 6px 30px 5px rgba(0, 0, 0, 0.12), + 0 8px 10px -5px rgba(0, 0, 0, 0.4); + }; + + --shadow-elevation-24dp: { + box-shadow: + 0 24px 38px 3px rgba(0, 0, 0, 0.14), + 0 9px 46px 8px rgba(0, 0, 0, 0.12), + 0 11px 15px -7px rgba(0, 0, 0, 0.4); + }; + + /* Paper typography Styles */ + --paper-font-common-base: { + font-family: "Roboto", "Noto", sans-serif; + -webkit-font-smoothing: antialiased; + }; + + --paper-font-common-code: { + font-family: "Roboto Mono", "Consolas", "Menlo", monospace; + -webkit-font-smoothing: antialiased; + }; + + --paper-font-common-expensive-kerning: { + text-rendering: optimizeLegibility; + }; + + --paper-font-common-nowrap: { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + }; + + /* Material Font Styles */ + + --paper-font-display4: { + @apply --paper-font-common-base; + @apply --paper-font-common-nowrap; + + font-size: 112px; + font-weight: 300; + letter-spacing: -0.044em; + line-height: 120px; + }; + + --paper-font-display3: { + @apply --paper-font-common-base; + @apply --paper-font-common-nowrap; + + font-size: 56px; + font-weight: 400; + letter-spacing: -0.026em; + line-height: 60px; + }; + + --paper-font-display2: { + @apply --paper-font-common-base; + + font-size: 45px; + font-weight: 400; + letter-spacing: -0.018em; + line-height: 48px; + }; + + --paper-font-display1: { + @apply --paper-font-common-base; + + font-size: 34px; + font-weight: 400; + letter-spacing: -0.01em; + line-height: 40px; + }; + + --paper-font-headline: { + @apply --paper-font-common-base; + + font-size: 24px; + font-weight: 400; + letter-spacing: -0.012em; + line-height: 32px; + }; + + --paper-font-title: { + @apply --paper-font-common-base; + @apply --paper-font-common-nowrap; + + font-size: 20px; + font-weight: 500; + line-height: 28px; + }; + + --paper-font-subhead: { + @apply --paper-font-common-base; + + font-size: 16px; + font-weight: 400; + line-height: 24px; + }; + + --paper-font-body2: { + @apply --paper-font-common-base; -const documentContainer = document.createElement("template"); -documentContainer.setAttribute("style", "display: none;"); + font-size: 14px; + font-weight: 500; + line-height: 24px; + }; -documentContainer.innerHTML = ` - -`; + font-weight: 400; + line-height: 20px; + }; + + --paper-font-caption: { + @apply --paper-font-common-base; + @apply --paper-font-common-nowrap; + + font-size: 12px; + font-weight: 400; + letter-spacing: 0.011em; + line-height: 20px; + }; + + --paper-font-menu: { + @apply --paper-font-common-base; + @apply --paper-font-common-nowrap; + + font-size: 13px; + font-weight: 500; + line-height: 24px; + }; + + --paper-font-button: { + @apply --paper-font-common-base; + @apply --paper-font-common-nowrap; + + font-size: 14px; + font-weight: 500; + letter-spacing: 0.018em; + line-height: 24px; + text-transform: uppercase; + }; + + --paper-font-code2: { + @apply --paper-font-common-code; + + font-size: 14px; + font-weight: 700; + line-height: 20px; + }; -document.head.appendChild(documentContainer.content); + --paper-font-code1: { + @apply --paper-font-common-code; + + font-size: 14px; + font-weight: 500; + line-height: 20px; + }; + + ${unsafeCSS( + Object.entries(derivedStyles) + .map(([key, value]) => `--${key}: ${value};`) + .join("") + )} + } +`.toString(); + +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 397e4812c336..000000000000 --- 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 000000000000..908cebd03539 --- /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 6d60dcab7d2a..61dffeba5783 100644 --- a/src/resources/styles-data.ts +++ b/src/resources/styles-data.ts @@ -50,7 +50,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))", @@ -153,4 +153,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; From 389948d44246c323f32deaed7ca98c62cbac9a3e Mon Sep 17 00:00:00 2001 From: Steve Repsher Date: Sun, 15 Oct 2023 02:46:47 +0000 Subject: [PATCH 2/3] Move default primary/accent colors out of ha-style --- src/onboarding/particles.ts | 2 +- src/panels/config/hardware/ha-config-hardware.ts | 2 +- src/panels/profile/ha-pick-theme-row.ts | 2 +- src/resources/ha-style.ts | 9 +++++---- src/resources/styles-data.ts | 3 +++ 5 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/onboarding/particles.ts b/src/onboarding/particles.ts index 71e347c7a0e4..fcc7206c85a8 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 7ed1574fd743..63c57a0391c5 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 725955fe9891..6d8fe0a225f1 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 eab98d00d55b..354be150ea64 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -1,9 +1,10 @@ import { css, unsafeCSS } from "lit"; import { fontStyles } from "./roboto"; -import { derivedStyles } from "./styles-data"; - -export const DEFAULT_PRIMARY_COLOR = "#03a9f4" as const; -export const DEFAULT_ACCENT_COLOR = "#ff9800" as const; +import { + DEFAULT_ACCENT_COLOR, + DEFAULT_PRIMARY_COLOR, + derivedStyles, +} from "./styles-data"; const mainStyles = css` /* diff --git a/src/resources/styles-data.ts b/src/resources/styles-data.ts index 61dffeba5783..c78c0be992e4 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", From 62028fb42ced8925ea16ca66bb6a6a7c91ce02b4 Mon Sep 17 00:00:00 2001 From: Steve Repsher Date: Mon, 16 Oct 2023 16:09:41 +0000 Subject: [PATCH 3/3] Remove cast second-load module --- cast/src/receiver/layout/hc-main.ts | 4 +++- cast/src/receiver/second-load.ts | 3 --- 2 files changed, 3 insertions(+), 4 deletions(-) delete mode 100644 cast/src/receiver/second-load.ts diff --git a/cast/src/receiver/layout/hc-main.ts b/cast/src/receiver/layout/hc-main.ts index cf03bbb502b6..bb84bbb39cf1 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 3a54d5f9755a..000000000000 --- a/cast/src/receiver/second-load.ts +++ /dev/null @@ -1,3 +0,0 @@ -import "./layout/hc-lovelace"; - -import("../../../src/resources/ha-style");