jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 06:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Minify ha-style/Roboto and load asynchronously (#18226)

Browse Source
This commit is contained in:
Steve Repsher 2023-10-16 14:37:50 -04:00 committed by GitHub
parent a08185a1a5
commit 3b2f6d71f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 571 additions and 568 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cast/src/launcher/entrypoint.ts
View File

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

4
cast/src/receiver/layout/hc-main.ts
View File

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

3
cast/src/receiver/second-load.ts
View File

@ -1,3 +0,0 @@
import "../../../src/resources/ha-style";
import "../../../src/resources/roboto";
import "./layout/hc-lovelace";

4
demo/src/entrypoint.ts
View File

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

4
gallery/src/entrypoint.js
View File

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

6
hassio/src/entrypoint.ts
View File

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

4
src/entrypoints/app.ts
View File

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

4
src/entrypoints/authorize.ts
View File

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

4
src/entrypoints/onboarding.ts
View File

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

2
src/onboarding/particles.ts
View File

@ -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", {

2
src/panels/config/hardware/ha-config-hardware.ts
View File

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

2
src/panels/profile/ha-pick-theme-row.ts
View File

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

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

@ -1,14 +1,12 @@
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 documentContainer = document.createElement("template");
documentContainer.setAttribute("style", "display: none;");
documentContainer.innerHTML = `<custom-style>
<style>
const mainStyles = css`
/*
Home Assistant default styles.
@ -28,12 +26,12 @@ documentContainer.innerHTML = `<custom-style>
--disabled-text-color: #bdbdbd;
/* main interface colors */
--primary-color: ${DEFAULT_PRIMARY_COLOR};
--primary-color: ${unsafeCSS(DEFAULT_PRIMARY_COLOR)};
--dark-primary-color: #0288d1;
--light-primary-color: #b3e5fC;
--accent-color: ${DEFAULT_ACCENT_COLOR};
--divider-color: rgba(0, 0, 0, .12);
--outline-color: rgba(0, 0, 0, .12);
--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);
@ -70,7 +68,7 @@ documentContainer.innerHTML = `<custom-style>
--energy-non-fossil-color: #0f9d58;
--energy-battery-out-color: #4db6ac;
--energy-battery-in-color: #f06292;
--energy-gas-color: #8E021B;
--energy-gas-color: #8e021b;
--energy-water-color: #00bcd4;
/* opacity for dark text on a light background */
@ -83,7 +81,7 @@ documentContainer.innerHTML = `<custom-style>
--light-divider-opacity: 0.12;
--light-disabled-opacity: 0.3; /* or hint text or icon */
--light-secondary-opacity: 0.7;
--light-primary-opacity: 1.0;
--light-primary-opacity: 1;
/* rgb */
--rgb-primary-color: 3, 169, 244;
@ -222,61 +220,69 @@ documentContainer.innerHTML = `<custom-style>
/* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
--shadow-elevation-2dp: {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
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),
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),
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),
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),
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),
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),
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),
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;
font-family: "Roboto", "Noto", sans-serif;
-webkit-font-smoothing: antialiased;
};
--paper-font-common-code: {
font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
font-family: "Roboto Mono", "Consolas", "Menlo", monospace;
-webkit-font-smoothing: antialiased;
};
@ -298,7 +304,7 @@ documentContainer.innerHTML = `<custom-style>
font-size: 112px;
font-weight: 300;
letter-spacing: -.044em;
letter-spacing: -0.044em;
line-height: 120px;
};
@ -308,7 +314,7 @@ documentContainer.innerHTML = `<custom-style>
font-size: 56px;
font-weight: 400;
letter-spacing: -.026em;
letter-spacing: -0.026em;
line-height: 60px;
};
@ -317,7 +323,7 @@ documentContainer.innerHTML = `<custom-style>
font-size: 45px;
font-weight: 400;
letter-spacing: -.018em;
letter-spacing: -0.018em;
line-height: 48px;
};
@ -326,7 +332,7 @@ documentContainer.innerHTML = `<custom-style>
font-size: 34px;
font-weight: 400;
letter-spacing: -.01em;
letter-spacing: -0.01em;
line-height: 40px;
};
@ -335,7 +341,7 @@ documentContainer.innerHTML = `<custom-style>
font-size: 24px;
font-weight: 400;
letter-spacing: -.012em;
letter-spacing: -0.012em;
line-height: 32px;
};
@ -423,11 +429,14 @@ documentContainer.innerHTML = `<custom-style>
--float-start: left;
--float-end: right;
${Object.entries(derivedStyles)
${unsafeCSS(
Object.entries(derivedStyles)
.map(([key, value]) => `--${key}: ${value};`)
.join("")}
.join("")
)}
}
</style>
</custom-style>`;
`.toString();
document.head.appendChild(documentContainer.content);
const styleElement = document.createElement("style");
styleElement.textContent = [mainStyles, fontStyles].join("");
document.head.append(styleElement);

132
src/resources/roboto.js
View File

@ -1,132 +0,0 @@
export {}; // for Babel to treat as a module
const documentContainer = document.createElement("template");
documentContainer.setAttribute("style", "display: none;");
documentContainer.innerHTML = `<style>
@font-face {
font-family: "Roboto";
src:
local("Roboto Thin"),
local("Roboto-Thin"),
url(${__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(${__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(${__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(${__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(${__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(${__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(${__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(${__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(${__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(${__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(${__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(${__STATIC_PATH__}fonts/roboto/Roboto-BlackItalic.woff2) format("woff2");
font-weight: 900;
font-style: italic;
}
</style>`;
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!
*/

124
src/resources/roboto.ts Normal file
View File

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

7
src/resources/styles-data.ts
View File

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