From b25b17053919e74045ea087c04b31a6c64e774e0 Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Mon, 28 Apr 2025 12:15:18 +0200 Subject: [PATCH 1/7] Update ha cloud backup info translation (#25203) * Update ha cloud backup info translation * Update src/translations/en.json --- src/translations/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/translations/en.json b/src/translations/en.json index 5e8e0cf5ca..754e42f2a4 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2723,7 +2723,7 @@ "more_locations": "Explore more locations", "manage_network_storage": "Manage network storage", "ha_cloud_backup": "{home_assistant_cloud} backup", - "ha_cloud_description": "Stores an encrypted backup offsite. Ideal if your local backup can not be used to restore your system. Thats why it stores one backup with a maximum size of 5 GB. The oldest backups are automatically deleted." + "ha_cloud_description": "Stores an encrypted backup offsite. This is ideal in case your local backup becomes inaccessible. The cloud stores one backup with a maximum size of 5 GB, and older backups are automatically deleted." }, "encryption_key": { "title": "Encryption key", From 39a73774b0b67e036ef947c49a0ad4589e9faaa9 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 28 Apr 2025 14:53:45 +0300 Subject: [PATCH 2/7] Update rspack monorepo to v1.3.7 (#25206) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 4 +- yarn.lock | 102 +++++++++++++++++++++++++-------------------------- 2 files changed, 53 insertions(+), 53 deletions(-) diff --git a/package.json b/package.json index 3312793470..c550338e76 100644 --- a/package.json +++ b/package.json @@ -160,8 +160,8 @@ "@octokit/plugin-retry": "7.2.1", "@octokit/rest": "21.1.1", "@rsdoctor/rspack-plugin": "1.0.2", - "@rspack/cli": "1.3.6", - "@rspack/core": "1.3.6", + "@rspack/cli": "1.3.7", + "@rspack/core": "1.3.7", "@types/babel__plugin-transform-runtime": "7.9.5", "@types/chromecast-caf-receiver": "6.0.21", "@types/chromecast-caf-sender": "1.0.11", diff --git a/yarn.lock b/yarn.lock index 59e449ff9b..34b2cab9d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3872,82 +3872,82 @@ __metadata: languageName: node linkType: hard -"@rspack/binding-darwin-arm64@npm:1.3.6": - version: 1.3.6 - resolution: "@rspack/binding-darwin-arm64@npm:1.3.6" +"@rspack/binding-darwin-arm64@npm:1.3.7": + version: 1.3.7 + resolution: "@rspack/binding-darwin-arm64@npm:1.3.7" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@rspack/binding-darwin-x64@npm:1.3.6": - version: 1.3.6 - resolution: "@rspack/binding-darwin-x64@npm:1.3.6" +"@rspack/binding-darwin-x64@npm:1.3.7": + version: 1.3.7 + resolution: "@rspack/binding-darwin-x64@npm:1.3.7" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@rspack/binding-linux-arm64-gnu@npm:1.3.6": - version: 1.3.6 - resolution: "@rspack/binding-linux-arm64-gnu@npm:1.3.6" +"@rspack/binding-linux-arm64-gnu@npm:1.3.7": + version: 1.3.7 + resolution: "@rspack/binding-linux-arm64-gnu@npm:1.3.7" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@rspack/binding-linux-arm64-musl@npm:1.3.6": - version: 1.3.6 - resolution: "@rspack/binding-linux-arm64-musl@npm:1.3.6" +"@rspack/binding-linux-arm64-musl@npm:1.3.7": + version: 1.3.7 + resolution: "@rspack/binding-linux-arm64-musl@npm:1.3.7" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@rspack/binding-linux-x64-gnu@npm:1.3.6": - version: 1.3.6 - resolution: "@rspack/binding-linux-x64-gnu@npm:1.3.6" +"@rspack/binding-linux-x64-gnu@npm:1.3.7": + version: 1.3.7 + resolution: "@rspack/binding-linux-x64-gnu@npm:1.3.7" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@rspack/binding-linux-x64-musl@npm:1.3.6": - version: 1.3.6 - resolution: "@rspack/binding-linux-x64-musl@npm:1.3.6" +"@rspack/binding-linux-x64-musl@npm:1.3.7": + version: 1.3.7 + resolution: "@rspack/binding-linux-x64-musl@npm:1.3.7" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@rspack/binding-win32-arm64-msvc@npm:1.3.6": - version: 1.3.6 - resolution: "@rspack/binding-win32-arm64-msvc@npm:1.3.6" +"@rspack/binding-win32-arm64-msvc@npm:1.3.7": + version: 1.3.7 + resolution: "@rspack/binding-win32-arm64-msvc@npm:1.3.7" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@rspack/binding-win32-ia32-msvc@npm:1.3.6": - version: 1.3.6 - resolution: "@rspack/binding-win32-ia32-msvc@npm:1.3.6" +"@rspack/binding-win32-ia32-msvc@npm:1.3.7": + version: 1.3.7 + resolution: "@rspack/binding-win32-ia32-msvc@npm:1.3.7" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@rspack/binding-win32-x64-msvc@npm:1.3.6": - version: 1.3.6 - resolution: "@rspack/binding-win32-x64-msvc@npm:1.3.6" +"@rspack/binding-win32-x64-msvc@npm:1.3.7": + version: 1.3.7 + resolution: "@rspack/binding-win32-x64-msvc@npm:1.3.7" conditions: os=win32 & cpu=x64 languageName: node linkType: hard -"@rspack/binding@npm:1.3.6": - version: 1.3.6 - resolution: "@rspack/binding@npm:1.3.6" +"@rspack/binding@npm:1.3.7": + version: 1.3.7 + resolution: "@rspack/binding@npm:1.3.7" dependencies: - "@rspack/binding-darwin-arm64": "npm:1.3.6" - "@rspack/binding-darwin-x64": "npm:1.3.6" - "@rspack/binding-linux-arm64-gnu": "npm:1.3.6" - "@rspack/binding-linux-arm64-musl": "npm:1.3.6" - "@rspack/binding-linux-x64-gnu": "npm:1.3.6" - "@rspack/binding-linux-x64-musl": "npm:1.3.6" - "@rspack/binding-win32-arm64-msvc": "npm:1.3.6" - "@rspack/binding-win32-ia32-msvc": "npm:1.3.6" - "@rspack/binding-win32-x64-msvc": "npm:1.3.6" + "@rspack/binding-darwin-arm64": "npm:1.3.7" + "@rspack/binding-darwin-x64": "npm:1.3.7" + "@rspack/binding-linux-arm64-gnu": "npm:1.3.7" + "@rspack/binding-linux-arm64-musl": "npm:1.3.7" + "@rspack/binding-linux-x64-gnu": "npm:1.3.7" + "@rspack/binding-linux-x64-musl": "npm:1.3.7" + "@rspack/binding-win32-arm64-msvc": "npm:1.3.7" + "@rspack/binding-win32-ia32-msvc": "npm:1.3.7" + "@rspack/binding-win32-x64-msvc": "npm:1.3.7" dependenciesMeta: "@rspack/binding-darwin-arm64": optional: true @@ -3967,13 +3967,13 @@ __metadata: optional: true "@rspack/binding-win32-x64-msvc": optional: true - checksum: 10/fb0886277fed4c672d2dd3f7a501de53a0a7d2741a8d813f7e9782b93a89b79ec1d2d63cb5f78c0971e62e8d71f6109e0ee694a020ed11c1a2405643132694ee + checksum: 10/be10f347dda43b04eb2b66cd17a53de89e211b14906dc6506a756037551e5a40df95cf66a91a8e12da63b5b0d0e6835a27853d38f9d0d404be211c0b6c059be3 languageName: node linkType: hard -"@rspack/cli@npm:1.3.6": - version: 1.3.6 - resolution: "@rspack/cli@npm:1.3.6" +"@rspack/cli@npm:1.3.7": + version: 1.3.7 + resolution: "@rspack/cli@npm:1.3.7" dependencies: "@discoveryjs/json-ext": "npm:^0.5.7" "@rspack/dev-server": "npm:1.1.1" @@ -3987,16 +3987,16 @@ __metadata: "@rspack/core": ^1.0.0-alpha || ^1.x bin: rspack: bin/rspack.js - checksum: 10/d016e732e8bf350c15ae710aae1a0925a042a62fad02fd1726357237f231c58b0d96d186cf40454912d0c4067292748adf1acd5f8bc2cc62a0cfab427ac6c51b + checksum: 10/d7ad97c49eb71dd0f8f614aa85a63eaa8071307c9af18ce287f3f146310ef937bdc1887445ec227600d578a89cc32d716baaf5dfb47fab5943b3e64f0c6ec82e languageName: node linkType: hard -"@rspack/core@npm:1.3.6": - version: 1.3.6 - resolution: "@rspack/core@npm:1.3.6" +"@rspack/core@npm:1.3.7": + version: 1.3.7 + resolution: "@rspack/core@npm:1.3.7" dependencies: "@module-federation/runtime-tools": "npm:0.13.0" - "@rspack/binding": "npm:1.3.6" + "@rspack/binding": "npm:1.3.7" "@rspack/lite-tapable": "npm:1.0.1" caniuse-lite: "npm:^1.0.30001715" peerDependencies: @@ -4004,7 +4004,7 @@ __metadata: peerDependenciesMeta: "@swc/helpers": optional: true - checksum: 10/7964d3f90154dea89b4075836bf9e8361b528e74b74b6bd7c85be25fa485ad385927afd850b334403cda4589ba05d513b635b35bb4652c67b3111fdd82b0ca4e + checksum: 10/0a32f9dff39f84aa5300077cef513a783d23c6995effeeafc7783edba3a1ecd1633b7682d1688606ec40ffc45046445904542b96f2cfa8d3fc120eba77a9731f languageName: node linkType: hard @@ -9272,8 +9272,8 @@ __metadata: "@octokit/rest": "npm:21.1.1" "@replit/codemirror-indentation-markers": "npm:6.5.3" "@rsdoctor/rspack-plugin": "npm:1.0.2" - "@rspack/cli": "npm:1.3.6" - "@rspack/core": "npm:1.3.6" + "@rspack/cli": "npm:1.3.7" + "@rspack/core": "npm:1.3.7" "@shoelace-style/shoelace": "npm:2.20.1" "@swc/helpers": "npm:0.5.17" "@thomasloven/round-slider": "npm:0.6.0" From 9a52185e1392986058069ad425aacc7a48e8c39b Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 28 Apr 2025 14:54:24 +0300 Subject: [PATCH 3/7] Update vaadinWebComponents monorepo to v24.7.4 (#25204) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 4 +- yarn.lock | 170 +++++++++++++++++++++++++-------------------------- 2 files changed, 87 insertions(+), 87 deletions(-) diff --git a/package.json b/package.json index c550338e76..8cabc96fab 100644 --- a/package.json +++ b/package.json @@ -89,8 +89,8 @@ "@thomasloven/round-slider": "0.6.0", "@tsparticles/engine": "3.8.1", "@tsparticles/preset-links": "3.2.0", - "@vaadin/combo-box": "24.7.3", - "@vaadin/vaadin-themable-mixin": "24.7.3", + "@vaadin/combo-box": "24.7.4", + "@vaadin/vaadin-themable-mixin": "24.7.4", "@vibrant/color": "4.0.0", "@vue/web-component-wrapper": "1.3.0", "@webcomponents/scoped-custom-element-registry": "0.0.10", diff --git a/yarn.lock b/yarn.lock index 34b2cab9d6..3b3ff024a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4945,131 +4945,131 @@ __metadata: languageName: node linkType: hard -"@vaadin/a11y-base@npm:~24.7.3": - version: 24.7.3 - resolution: "@vaadin/a11y-base@npm:24.7.3" +"@vaadin/a11y-base@npm:~24.7.4": + version: 24.7.4 + resolution: "@vaadin/a11y-base@npm:24.7.4" dependencies: "@open-wc/dedupe-mixin": "npm:^1.3.0" "@polymer/polymer": "npm:^3.0.0" - "@vaadin/component-base": "npm:~24.7.3" + "@vaadin/component-base": "npm:~24.7.4" lit: "npm:^3.0.0" - checksum: 10/a3d2e68ea3ee48e1974c2e6691ae8d09dae0fb0f19e6180e398e3cecb5e89d8d5fb57187f30a835a3c2b98ae4dffdffab1de00ffa9228c4389de4499cbebb4a5 + checksum: 10/cee80ce69d408954fb4726ce1b10641fdc067b6a794f44272b29724a31b0cc91301906ee63e3c758aeb0adec08c1f41f408d43c78d893cfc81aa22e101760e4b languageName: node linkType: hard -"@vaadin/combo-box@npm:24.7.3": - version: 24.7.3 - resolution: "@vaadin/combo-box@npm:24.7.3" +"@vaadin/combo-box@npm:24.7.4": + version: 24.7.4 + resolution: "@vaadin/combo-box@npm:24.7.4" dependencies: "@open-wc/dedupe-mixin": "npm:^1.3.0" "@polymer/polymer": "npm:^3.0.0" - "@vaadin/a11y-base": "npm:~24.7.3" - "@vaadin/component-base": "npm:~24.7.3" - "@vaadin/field-base": "npm:~24.7.3" - "@vaadin/input-container": "npm:~24.7.3" - "@vaadin/item": "npm:~24.7.3" - "@vaadin/lit-renderer": "npm:~24.7.3" - "@vaadin/overlay": "npm:~24.7.3" - "@vaadin/vaadin-lumo-styles": "npm:~24.7.3" - "@vaadin/vaadin-material-styles": "npm:~24.7.3" - "@vaadin/vaadin-themable-mixin": "npm:~24.7.3" + "@vaadin/a11y-base": "npm:~24.7.4" + "@vaadin/component-base": "npm:~24.7.4" + "@vaadin/field-base": "npm:~24.7.4" + "@vaadin/input-container": "npm:~24.7.4" + "@vaadin/item": "npm:~24.7.4" + "@vaadin/lit-renderer": "npm:~24.7.4" + "@vaadin/overlay": "npm:~24.7.4" + "@vaadin/vaadin-lumo-styles": "npm:~24.7.4" + "@vaadin/vaadin-material-styles": "npm:~24.7.4" + "@vaadin/vaadin-themable-mixin": "npm:~24.7.4" lit: "npm:^3.0.0" - checksum: 10/fe559fac266a317b49b4a33031e9193c6e8d396592148e04ca36363bf138ed45323716d0bce0d0efe7b1a47feb008c16e0bf24a2fe4e61abd9f7d1fe6144b767 + checksum: 10/567a06b6be2d0e124a50265bf10688a399c208a7b3ae0e63e1479c9b42c1ff3e1573a50824297973053a5e346a796ece26f94b5a5c82495c6eac8661b03bd5b9 languageName: node linkType: hard -"@vaadin/component-base@npm:~24.7.3": - version: 24.7.3 - resolution: "@vaadin/component-base@npm:24.7.3" +"@vaadin/component-base@npm:~24.7.4": + version: 24.7.4 + resolution: "@vaadin/component-base@npm:24.7.4" dependencies: "@open-wc/dedupe-mixin": "npm:^1.3.0" "@polymer/polymer": "npm:^3.0.0" "@vaadin/vaadin-development-mode-detector": "npm:^2.0.0" "@vaadin/vaadin-usage-statistics": "npm:^2.1.0" lit: "npm:^3.0.0" - checksum: 10/11540081b0b966a970784edaace6ac16fcc3c651439f37ec19e79440850df381c94f8118b0e447650b8ca8ba56445c30a1f4aefb8d5d009936c1b6ca707fd46c + checksum: 10/39b653fa3066b8488aadf45b1a7e77a910f8b17da64e2d49134bf24951d4d90af915bef48ee9440acef23123e9bcf3065e5ace5846e299285632e0e66ed3ae2c languageName: node linkType: hard -"@vaadin/field-base@npm:~24.7.3": - version: 24.7.3 - resolution: "@vaadin/field-base@npm:24.7.3" +"@vaadin/field-base@npm:~24.7.4": + version: 24.7.4 + resolution: "@vaadin/field-base@npm:24.7.4" dependencies: "@open-wc/dedupe-mixin": "npm:^1.3.0" "@polymer/polymer": "npm:^3.0.0" - "@vaadin/a11y-base": "npm:~24.7.3" - "@vaadin/component-base": "npm:~24.7.3" + "@vaadin/a11y-base": "npm:~24.7.4" + "@vaadin/component-base": "npm:~24.7.4" lit: "npm:^3.0.0" - checksum: 10/97ef6c9eea49962b2c4526eba4dedc24de67ba2df57d469ff82e449488918165e42b5e98fa212dba82e0fe1e9623889b6a22e0db3442e045caec6cee371c12d4 + checksum: 10/304f46782bd17f03bf07b00d3b0551a4f30fa6c40cb1d948c719741d44b264b2f7e8bd7d9a56dfbc5ddbc3d8beb588b81311be228fa6086beb600212e42e5831 languageName: node linkType: hard -"@vaadin/icon@npm:~24.7.3": - version: 24.7.3 - resolution: "@vaadin/icon@npm:24.7.3" +"@vaadin/icon@npm:~24.7.4": + version: 24.7.4 + resolution: "@vaadin/icon@npm:24.7.4" dependencies: "@open-wc/dedupe-mixin": "npm:^1.3.0" "@polymer/polymer": "npm:^3.0.0" - "@vaadin/component-base": "npm:~24.7.3" - "@vaadin/vaadin-lumo-styles": "npm:~24.7.3" - "@vaadin/vaadin-themable-mixin": "npm:~24.7.3" + "@vaadin/component-base": "npm:~24.7.4" + "@vaadin/vaadin-lumo-styles": "npm:~24.7.4" + "@vaadin/vaadin-themable-mixin": "npm:~24.7.4" lit: "npm:^3.0.0" - checksum: 10/a3da83bc9effd9eabd7382e4d4fdea1bb412c8fe09bcfc2c17db37184d856c6058e36f5f1bfab25b1c726ed5328a8af338405fc6b5b11b9aff5c6824e282173b + checksum: 10/acfb412eef7a2f077348fdbe0567afef8ee82d962264ef7a7b1661cb3a5ae838c3cae3c9edec735ff99e9bfaeb17cd882c854dc1932663c1a252b0bbe1a61324 languageName: node linkType: hard -"@vaadin/input-container@npm:~24.7.3": - version: 24.7.3 - resolution: "@vaadin/input-container@npm:24.7.3" +"@vaadin/input-container@npm:~24.7.4": + version: 24.7.4 + resolution: "@vaadin/input-container@npm:24.7.4" dependencies: "@polymer/polymer": "npm:^3.0.0" - "@vaadin/component-base": "npm:~24.7.3" - "@vaadin/vaadin-lumo-styles": "npm:~24.7.3" - "@vaadin/vaadin-material-styles": "npm:~24.7.3" - "@vaadin/vaadin-themable-mixin": "npm:~24.7.3" + "@vaadin/component-base": "npm:~24.7.4" + "@vaadin/vaadin-lumo-styles": "npm:~24.7.4" + "@vaadin/vaadin-material-styles": "npm:~24.7.4" + "@vaadin/vaadin-themable-mixin": "npm:~24.7.4" lit: "npm:^3.0.0" - checksum: 10/61f2293927a22396480bd88f84565651146f485a5d9b73ab8a7607931220d5eccf9f87ce208feb6156e716462b4aeb3d03877f13d4229d62a3c60468686973e7 + checksum: 10/8ff1da4fe8d8fb9d7542e2a6c3744c104b825e3cc435d14f67c62e6c7993b5561d134c7b4026dd0c2106833a0cf12df2e9ba44e77e96c67a5a3ddb0ff66b4be1 languageName: node linkType: hard -"@vaadin/item@npm:~24.7.3": - version: 24.7.3 - resolution: "@vaadin/item@npm:24.7.3" +"@vaadin/item@npm:~24.7.4": + version: 24.7.4 + resolution: "@vaadin/item@npm:24.7.4" dependencies: "@open-wc/dedupe-mixin": "npm:^1.3.0" "@polymer/polymer": "npm:^3.0.0" - "@vaadin/a11y-base": "npm:~24.7.3" - "@vaadin/component-base": "npm:~24.7.3" - "@vaadin/vaadin-lumo-styles": "npm:~24.7.3" - "@vaadin/vaadin-material-styles": "npm:~24.7.3" - "@vaadin/vaadin-themable-mixin": "npm:~24.7.3" + "@vaadin/a11y-base": "npm:~24.7.4" + "@vaadin/component-base": "npm:~24.7.4" + "@vaadin/vaadin-lumo-styles": "npm:~24.7.4" + "@vaadin/vaadin-material-styles": "npm:~24.7.4" + "@vaadin/vaadin-themable-mixin": "npm:~24.7.4" lit: "npm:^3.0.0" - checksum: 10/bb6d7a9576d8204b20b44d6f672f650c227893869a88dc59fb27f5f5b40b21e172523990d6ff90bbdd2324cca4e62a1d711eb27a0971ea91377d94aa89cc72a6 + checksum: 10/e14184258f4614b382f7795c1bf3e25bd74c717542812ea1cf2a53849a1cef6ab318dd5482ecb1dc51bd8c4a06aaff6c68dc573ba1c9d30f89dedece70fc1d50 languageName: node linkType: hard -"@vaadin/lit-renderer@npm:~24.7.3": - version: 24.7.3 - resolution: "@vaadin/lit-renderer@npm:24.7.3" +"@vaadin/lit-renderer@npm:~24.7.4": + version: 24.7.4 + resolution: "@vaadin/lit-renderer@npm:24.7.4" dependencies: lit: "npm:^3.0.0" - checksum: 10/323fb6c79c6857019db94634e218bf9cc9c7e454ea28ae83c9be0ca70b34cc6cf57e0b931167e05c6387cc76fcd69a1e2b6fce04181020c919dcfdd072d4baae + checksum: 10/22ada093a3516de1f3701212b52a2b0cfd7d5230b3b73194b651015b9d9a6e9fd3418541baf8478f0b409de7596c17e3876744f1970e80e7af886b3eb2d3d89c languageName: node linkType: hard -"@vaadin/overlay@npm:~24.7.3": - version: 24.7.3 - resolution: "@vaadin/overlay@npm:24.7.3" +"@vaadin/overlay@npm:~24.7.4": + version: 24.7.4 + resolution: "@vaadin/overlay@npm:24.7.4" dependencies: "@open-wc/dedupe-mixin": "npm:^1.3.0" "@polymer/polymer": "npm:^3.0.0" - "@vaadin/a11y-base": "npm:~24.7.3" - "@vaadin/component-base": "npm:~24.7.3" - "@vaadin/vaadin-lumo-styles": "npm:~24.7.3" - "@vaadin/vaadin-material-styles": "npm:~24.7.3" - "@vaadin/vaadin-themable-mixin": "npm:~24.7.3" + "@vaadin/a11y-base": "npm:~24.7.4" + "@vaadin/component-base": "npm:~24.7.4" + "@vaadin/vaadin-lumo-styles": "npm:~24.7.4" + "@vaadin/vaadin-material-styles": "npm:~24.7.4" + "@vaadin/vaadin-themable-mixin": "npm:~24.7.4" lit: "npm:^3.0.0" - checksum: 10/1a14d94e77ffe68c6d62d5c576b4a6049c2c180b74c9b9114eee5c77f49aacded28ef5a1452938ee7f89151f7db292978156b523ac1c727edf3a464f2eda5b30 + checksum: 10/f3f185f472577ccd8ac58cfc549e53e45f413c3e39b1e967f19470f391a53e71682de239722357742f67b390579e69127a06d8feccc03da1c80bb1ad37f9341e languageName: node linkType: hard @@ -5080,36 +5080,36 @@ __metadata: languageName: node linkType: hard -"@vaadin/vaadin-lumo-styles@npm:~24.7.3": - version: 24.7.3 - resolution: "@vaadin/vaadin-lumo-styles@npm:24.7.3" +"@vaadin/vaadin-lumo-styles@npm:~24.7.4": + version: 24.7.4 + resolution: "@vaadin/vaadin-lumo-styles@npm:24.7.4" dependencies: "@polymer/polymer": "npm:^3.0.0" - "@vaadin/component-base": "npm:~24.7.3" - "@vaadin/icon": "npm:~24.7.3" - "@vaadin/vaadin-themable-mixin": "npm:~24.7.3" - checksum: 10/8a4d14ac3ffe6109c517462e16cb72aebdd7b277c88a96eda6f85925bb9a9d8584753a33e06d64486e2c0d427c339bebaa12cd3b4fe3f9cbb8c19cd716c6c96a + "@vaadin/component-base": "npm:~24.7.4" + "@vaadin/icon": "npm:~24.7.4" + "@vaadin/vaadin-themable-mixin": "npm:~24.7.4" + checksum: 10/c068dea090d953c191a1ccfcbad4cbde72d1bc16544f15ff36c6e3b5a8cd4ccdb1a9052c99d599e55dcb0490b0f619f2c3772e376b984f89f619452ebf1ddad8 languageName: node linkType: hard -"@vaadin/vaadin-material-styles@npm:~24.7.3": - version: 24.7.3 - resolution: "@vaadin/vaadin-material-styles@npm:24.7.3" +"@vaadin/vaadin-material-styles@npm:~24.7.4": + version: 24.7.4 + resolution: "@vaadin/vaadin-material-styles@npm:24.7.4" dependencies: "@polymer/polymer": "npm:^3.0.0" - "@vaadin/component-base": "npm:~24.7.3" - "@vaadin/vaadin-themable-mixin": "npm:~24.7.3" - checksum: 10/554652d87b41a0090b91c337a495d88e3bca4cdc1daeb2357a413fcb581a761fcba98db00344a5c0df851cb98993758ec03f22f008e38442def4d2378562cf84 + "@vaadin/component-base": "npm:~24.7.4" + "@vaadin/vaadin-themable-mixin": "npm:~24.7.4" + checksum: 10/fb5ce1a23edc491ca7baeb7c6c3e1dfbd6c0917073eb9f39fbd1c1a7dd59437df84dc9c21657f06c1df111e6d7c8ada179cb5f5851ae90c7533d1eadf956bd31 languageName: node linkType: hard -"@vaadin/vaadin-themable-mixin@npm:24.7.3, @vaadin/vaadin-themable-mixin@npm:~24.7.3": - version: 24.7.3 - resolution: "@vaadin/vaadin-themable-mixin@npm:24.7.3" +"@vaadin/vaadin-themable-mixin@npm:24.7.4, @vaadin/vaadin-themable-mixin@npm:~24.7.4": + version: 24.7.4 + resolution: "@vaadin/vaadin-themable-mixin@npm:24.7.4" dependencies: "@open-wc/dedupe-mixin": "npm:^1.3.0" lit: "npm:^3.0.0" - checksum: 10/e176e162fdb374ab4aa5f948f0a4b23f7fa22f617e2fa7b6c73b15df84b57e910d16f2c54add434be30a337313d9a5874945a97c3a86d4989b308a157a8fe4ce + checksum: 10/45776bd729530cd38ccd8573ea6b112c46eda2ad6615c9e1cab751609a3063600781cfecb01148c8d8ebfed6beeed10c944a05ca8d05ae4b459d170f15cf6044 languageName: node linkType: hard @@ -9297,8 +9297,8 @@ __metadata: "@types/tar": "npm:6.1.13" "@types/ua-parser-js": "npm:0.7.39" "@types/webspeechapi": "npm:0.0.29" - "@vaadin/combo-box": "npm:24.7.3" - "@vaadin/vaadin-themable-mixin": "npm:24.7.3" + "@vaadin/combo-box": "npm:24.7.4" + "@vaadin/vaadin-themable-mixin": "npm:24.7.4" "@vibrant/color": "npm:4.0.0" "@vitest/coverage-v8": "npm:3.1.2" "@vue/web-component-wrapper": "npm:1.3.0" From ca642d46cc6e3739f551fafc275173629a8fec5e Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Mon, 28 Apr 2025 15:04:47 +0200 Subject: [PATCH 4/7] Add typography styles (#25171) * Add typoghrapy styles * Split styles * Fix duplicated html * remove unused paper vars * Fix vars * Add vars autocompletion extension * Fix css syntax highlighting --- .devcontainer/devcontainer.json | 3 +- .vscode/extensions.json | 3 +- cast/src/launcher/entrypoint.ts | 2 +- cast/src/receiver/layout/hc-main.ts | 2 +- demo/src/entrypoint.ts | 2 +- hassio/src/entrypoint.ts | 2 +- src/common/dom/apply_themes_on_element.ts | 5 +- src/common/style/derived-css-vars.ts | 45 +++ src/entrypoints/app.ts | 2 +- src/entrypoints/authorize.ts | 2 +- src/entrypoints/onboarding.ts | 2 +- .../config/hardware/ha-config-hardware.ts | 6 +- src/panels/profile/ha-pick-theme-row.ts | 11 +- src/resources/append-ha-style.ts | 5 + src/resources/ha-style.ts | 165 -------- src/resources/particles.ts | 6 +- src/resources/roboto.ts | 2 +- src/resources/styles-data.ts | 255 ------------- src/resources/theme/color.globals.ts | 359 ++++++++++++++++++ src/resources/theme/main.globals.ts | 38 ++ src/resources/theme/theme.ts | 20 + src/resources/theme/typography.globals.ts | 40 ++ 22 files changed, 533 insertions(+), 444 deletions(-) create mode 100644 src/common/style/derived-css-vars.ts create mode 100644 src/resources/append-ha-style.ts delete mode 100644 src/resources/ha-style.ts delete mode 100644 src/resources/styles-data.ts create mode 100644 src/resources/theme/color.globals.ts create mode 100644 src/resources/theme/main.globals.ts create mode 100644 src/resources/theme/theme.ts create mode 100644 src/resources/theme/typography.globals.ts diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index cb654867b5..88ccccc5aa 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -21,7 +21,8 @@ "esbenp.prettier-vscode", "runem.lit-plugin", "github.vscode-pull-request-github", - "eamodio.gitlens" + "eamodio.gitlens", + "yeion7.styled-global-variables-autocomplete" ], "settings": { "files.eol": "\n", diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 720f06e0ba..76ef0ff7a8 100755 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -5,6 +5,7 @@ "runem.lit-plugin", "github.vscode-pull-request-github", "eamodio.gitlens", - "vitest.explorer" + "vitest.explorer", + "yeion7.styled-global-variables-autocomplete" ] } diff --git a/cast/src/launcher/entrypoint.ts b/cast/src/launcher/entrypoint.ts index f7d615d458..3ca1b1fe9e 100644 --- a/cast/src/launcher/entrypoint.ts +++ b/cast/src/launcher/entrypoint.ts @@ -1,3 +1,3 @@ import "./layout/hc-connect"; -import("../../../src/resources/ha-style"); +import("../../../src/resources/append-ha-style"); diff --git a/cast/src/receiver/layout/hc-main.ts b/cast/src/receiver/layout/hc-main.ts index 46267f715a..e733f49fb0 100644 --- a/cast/src/receiver/layout/hc-main.ts +++ b/cast/src/receiver/layout/hc-main.ts @@ -109,7 +109,7 @@ export class HcMain extends HassElement { protected firstUpdated(changedProps) { super.firstUpdated(changedProps); import("./hc-lovelace"); - import("../../../../src/resources/ha-style"); + import("../../../../src/resources/append-ha-style"); window.addEventListener("location-changed", () => { const panelPath = `/${this._urlPath || "lovelace"}/`; diff --git a/demo/src/entrypoint.ts b/demo/src/entrypoint.ts index e153eabb12..bb00790e8f 100644 --- a/demo/src/entrypoint.ts +++ b/demo/src/entrypoint.ts @@ -1,4 +1,4 @@ import "./util/is_frontpage"; import "./ha-demo"; -import("../../src/resources/ha-style"); +import("../../src/resources/append-ha-style"); diff --git a/hassio/src/entrypoint.ts b/hassio/src/entrypoint.ts index 9ba0a12b4d..7efede19d2 100644 --- a/hassio/src/entrypoint.ts +++ b/hassio/src/entrypoint.ts @@ -1,6 +1,6 @@ import "./hassio-main"; -import("../../src/resources/ha-style"); +import("../../src/resources/append-ha-style"); const styleEl = document.createElement("style"); styleEl.textContent = ` diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts index 841917af68..b986e053a8 100644 --- a/src/common/dom/apply_themes_on_element.ts +++ b/src/common/dom/apply_themes_on_element.ts @@ -1,5 +1,6 @@ import type { ThemeVars } from "../../data/ws-themes"; -import { darkStyles, derivedStyles } from "../../resources/styles-data"; +import { darkColorVariables } from "../../resources/theme/color.globals"; +import { derivedStyles } from "../../resources/theme/theme"; import type { HomeAssistant } from "../../types"; import { hex2rgb, @@ -50,7 +51,7 @@ export const applyThemesOnElement = ( if (themeToApply && darkMode) { cacheKey = `${cacheKey}__dark`; - themeRules = { ...darkStyles }; + themeRules = { ...darkColorVariables }; } if (themeToApply === "default") { diff --git a/src/common/style/derived-css-vars.ts b/src/common/style/derived-css-vars.ts new file mode 100644 index 0000000000..c4eca6e022 --- /dev/null +++ b/src/common/style/derived-css-vars.ts @@ -0,0 +1,45 @@ +import type { CSSResult } from "lit"; + +const _extractCssVars = ( + cssString: string, + condition: (string) => boolean = () => true +) => { + const variables: Record = {}; + + cssString.split(";").forEach((rawLine) => { + const line = rawLine.substring(rawLine.indexOf("--")).trim(); + if (line.startsWith("--") && condition(line)) { + const [name, value] = line.split(":").map((part) => part.trim()); + variables[name.substring(2, name.length)] = value; + } + }); + return variables; +}; + +export const extractVar = (css: CSSResult, varName: string) => { + const cssString = css.toString(); + const search = `--${varName}:`; + const startIndex = cssString.indexOf(search); + if (startIndex === -1) { + return ""; + } + + const endIndex = cssString.indexOf(";", startIndex + search.length); + return cssString.substring(startIndex + search.length, endIndex).trim(); +}; + +export const extractVars = (css: CSSResult) => { + const cssString = css.toString(); + + return _extractCssVars(cssString); +}; + +export const extractDerivedVars = (css: CSSResult) => { + const cssString = css.toString(); + + if (!cssString.includes("var(")) { + return {}; + } + + return _extractCssVars(cssString, (line) => line.includes("var(")); +}; diff --git a/src/entrypoints/app.ts b/src/entrypoints/app.ts index 3fce74db5b..a54eca9d98 100644 --- a/src/entrypoints/app.ts +++ b/src/entrypoints/app.ts @@ -1,4 +1,4 @@ import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min"; import "../layouts/home-assistant"; -import("../resources/ha-style"); +import("../resources/append-ha-style"); diff --git a/src/entrypoints/authorize.ts b/src/entrypoints/authorize.ts index a7ca07093a..8b2da1b74a 100644 --- a/src/entrypoints/authorize.ts +++ b/src/entrypoints/authorize.ts @@ -1,3 +1,3 @@ import "../auth/ha-authorize"; -import("../resources/ha-style"); +import("../resources/append-ha-style"); diff --git a/src/entrypoints/onboarding.ts b/src/entrypoints/onboarding.ts index 704477b49a..075b819875 100644 --- a/src/entrypoints/onboarding.ts +++ b/src/entrypoints/onboarding.ts @@ -1,6 +1,6 @@ import "../onboarding/ha-onboarding"; -import("../resources/ha-style"); +import("../resources/append-ha-style"); declare global { interface Window { diff --git a/src/panels/config/hardware/ha-config-hardware.ts b/src/panels/config/hardware/ha-config-hardware.ts index 6f420aeebe..252655c417 100644 --- a/src/panels/config/hardware/ha-config-hardware.ts +++ b/src/panels/config/hardware/ha-config-hardware.ts @@ -30,7 +30,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/styles-data"; +import { DefaultPrimaryColor } from "../../../resources/theme/color.globals"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; import { hardwareBrandsUrl } from "../../../util/brands-url"; @@ -42,9 +42,9 @@ const DATASAMPLES = 60; const DATA_SET_CONFIG: SeriesOption = { type: "line", - color: DEFAULT_PRIMARY_COLOR, + color: DefaultPrimaryColor, areaStyle: { - color: DEFAULT_PRIMARY_COLOR + "2B", + color: DefaultPrimaryColor + "2B", }, symbolSize: 0, lineStyle: { diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts index 56c30af63d..edd4cece83 100644 --- a/src/panels/profile/ha-pick-theme-row.ts +++ b/src/panels/profile/ha-pick-theme-row.ts @@ -12,9 +12,9 @@ import "../../components/ha-select"; import "../../components/ha-settings-row"; import "../../components/ha-textfield"; import { - DEFAULT_ACCENT_COLOR, - DEFAULT_PRIMARY_COLOR, -} from "../../resources/styles-data"; + DefaultAccentColor, + DefaultPrimaryColor, +} from "../../resources/theme/color.globals"; import type { HomeAssistant } from "../../types"; import { documentationUrl } from "../../util/documentation-url"; @@ -129,8 +129,7 @@ export class HaPickThemeRow extends LitElement { ${curTheme === HOME_ASSISTANT_THEME ? html`
`--${key}: ${value};`) - .join("") - )} - } -`.toString(); - -const styleElement = document.createElement("style"); -styleElement.textContent = [mainStyles, fontStyles].join(""); -document.head.append(styleElement); diff --git a/src/resources/particles.ts b/src/resources/particles.ts index 1734c99219..a2ae5912ab 100644 --- a/src/resources/particles.ts +++ b/src/resources/particles.ts @@ -1,6 +1,6 @@ import { tsParticles } from "@tsparticles/engine"; import { loadLinksPreset } from "@tsparticles/preset-links"; -import { DEFAULT_PRIMARY_COLOR } from "./styles-data"; +import { DefaultPrimaryColor } from "./theme/color.globals"; loadLinksPreset(tsParticles).then(() => { tsParticles.load({ @@ -25,11 +25,11 @@ loadLinksPreset(tsParticles).then(() => { }, particles: { color: { - value: DEFAULT_PRIMARY_COLOR, + value: DefaultPrimaryColor, }, links: { color: { - value: DEFAULT_PRIMARY_COLOR, + value: DefaultPrimaryColor, }, distance: 100, enable: true, diff --git a/src/resources/roboto.ts b/src/resources/roboto.ts index 908cebd035..f156b1fa88 100644 --- a/src/resources/roboto.ts +++ b/src/resources/roboto.ts @@ -121,4 +121,4 @@ export const fontStyles = css` font-weight: 900; font-style: italic; } -`.toString(); +`; diff --git a/src/resources/styles-data.ts b/src/resources/styles-data.ts deleted file mode 100644 index 05a3e012ec..0000000000 --- a/src/resources/styles-data.ts +++ /dev/null @@ -1,255 +0,0 @@ -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", - "secondary-background-color": "#282828", - "clear-background-color": "#111111", - "primary-text-color": "#e1e1e1", - "secondary-text-color": "#9b9b9b", - "disabled-text-color": "#6f6f6f", - "app-header-text-color": "#e1e1e1", - "app-header-background-color": "#101e24", - "switch-unchecked-button-color": "#999999", - "switch-unchecked-track-color": "#9b9b9b", - "divider-color": "rgba(225, 225, 225, .12)", - "outline-color": "rgba(225, 225, 225, .12)", - "outline-hover-color": "rgba(225, 225, 225, .24)", - "mdc-ripple-color": "#AAAAAA", - "mdc-linear-progress-buffer-color": "rgba(255, 255, 255, 0.1)", - - "input-idle-line-color": "rgba(255, 255, 255, 0.42)", - "input-hover-line-color": "rgba(255, 255, 255, 0.87)", - "input-disabled-line-color": "rgba(255, 255, 255, 0.06)", - "input-outlined-idle-border-color": "rgba(255, 255, 255, 0.38)", - "input-outlined-hover-border-color": "rgba(255, 255, 255, 0.87)", - "input-outlined-disabled-border-color": "rgba(255, 255, 255, 0.06)", - "input-fill-color": "rgba(255, 255, 255, 0.05)", - "input-disabled-fill-color": "rgba(255, 255, 255, 0.02)", - "input-ink-color": "rgba(255, 255, 255, 0.87)", - "input-label-ink-color": "rgba(255, 255, 255, 0.6)", - "input-disabled-ink-color": "rgba(255, 255, 255, 0.37)", - "input-dropdown-icon-color": "rgba(255, 255, 255, 0.54)", - - "codemirror-keyword": "#C792EA", - "codemirror-operator": "#89DDFF", - "codemirror-variable": "#f07178", - "codemirror-variable-2": "#EEFFFF", - "codemirror-variable-3": "#DECB6B", - "codemirror-builtin": "#FFCB6B", - "codemirror-atom": "#F78C6C", - "codemirror-number": "#FF5370", - "codemirror-def": "#82AAFF", - "codemirror-string": "#C3E88D", - "codemirror-string-2": "#f07178", - "codemirror-comment": "#545454", - "codemirror-tag": "#FF5370", - "codemirror-meta": "#FFCB6B", - "codemirror-attribute": "#C792EA", - "codemirror-property": "#C792EA", - "codemirror-qualifier": "#DECB6B", - "codemirror-type": "#DECB6B", - "energy-grid-return-color": "#a280db", - "map-filter": - "invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)", - "disabled-color": "#464646", -} as const; - -export const derivedStyles = { - /* typography */ - "ha-font-size-xs": "calc(10px * var(--ha-font-size-scale))", - "ha-font-size-s": "calc(12px * var(--ha-font-size-scale))", - "ha-font-size-m": "calc(14px * var(--ha-font-size-scale))", - "ha-font-size-l": "calc(16px * var(--ha-font-size-scale))", - "ha-font-size-xl": "calc(20px * var(--ha-font-size-scale))", - "ha-font-size-2xl": "calc(24px * var(--ha-font-size-scale))", - "ha-font-size-3xl": "calc(28px * var(--ha-font-size-scale))", - "ha-font-size-4xl": "calc(32px * var(--ha-font-size-scale))", - "ha-font-size-5xl": "calc(40px * var(--ha-font-size-scale))", - - "ha-font-family-heading": "var(--ha-font-family-body)", - "ha-font-weight-body": "var(--ha-font-weight-normal)", - "ha-font-weight-heading": "var(--ha-font-weight-bold)", - "ha-font-weight-action": "var(--ha-font-weight-semibold)", - - /* Vaadin typography */ - "material-h6-font-size": "var(--ha-font-size-m)", - "material-small-font-size": "var(--ha-font-size-xs)", - "material-caption-font-size": "var(--ha-font-size-2xs)", - "material-button-font-size": "var(--ha-font-size-xs)", - - /* 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)", - - /* state color */ - "state-active-color": "var(--amber-color)", - "state-inactive-color": "var(--grey-color)", - "state-unavailable-color": - "var(--state-icon-unavailable-color, var(--disabled-text-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-locking-color": "var(--orange-color)", - "state-lock-unlocked-color": "var(--red-color)", - "state-lock-unlocking-color": "var(--orange-color)", - "state-lock-open-color": "var(--red-color)", - "state-lock-opening-color": "var(--orange-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-valve-active-color": "var(--blue-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-unknown-color": "var(--dark-grey-color)", - - "state-icon-error-color": "var(--error-state-color, var(--error-color))", - "sidebar-text-color": "var(--primary-text-color)", - "sidebar-background-color": "var(--card-background-color)", - "sidebar-selected-text-color": "var(--primary-color)", - "sidebar-selected-icon-color": "var(--primary-color)", - "sidebar-icon-color": "rgba(var(--rgb-primary-text-color), 0.6)", - "switch-checked-color": "var(--primary-color)", - "switch-checked-button-color": - "var(--switch-checked-color, var(--primary-background-color))", - "switch-checked-track-color": "var(--switch-checked-color, #000000)", - "switch-unchecked-button-color": - "var(--switch-unchecked-color, var(--primary-background-color))", - "switch-unchecked-track-color": "var(--switch-unchecked-color, #000000)", - "slider-color": "var(--primary-color)", - "slider-secondary-color": "var(--light-primary-color)", - "slider-track-color": "var(--scrollbar-thumb-color)", - "label-badge-background-color": "var(--card-background-color)", - "label-badge-text-color": "rgba(var(--rgb-primary-text-color), 0.8)", - "table-header-background-color": "var(--input-fill-color)", - "table-row-background-color": "var(--primary-background-color)", - "table-row-alternative-background-color": "var(--secondary-background-color)", - "data-table-background-color": "var(--card-background-color)", - "markdown-code-background-color": "var(--primary-background-color)", - - // https://github.com/material-components/material-web/blob/master/docs/theming.md - "mdc-theme-primary": "var(--primary-color)", - "mdc-theme-secondary": "var(--accent-color)", - "mdc-theme-background": "var(--primary-background-color)", - "mdc-theme-surface": "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)", - "mdc-theme-text-disabled-on-light": "var(--disabled-text-color)", - "mdc-theme-text-primary-on-background": "var(--primary-text-color)", - "mdc-theme-text-secondary-on-background": "var(--secondary-text-color)", - "mdc-theme-text-hint-on-background": "var(--secondary-text-color)", - "mdc-theme-text-icon-on-background": "var(--secondary-text-color)", - "mdc-theme-error": "var(--error-color)", - "app-header-text-color": "var(--text-primary-color)", - "app-header-background-color": "var(--primary-color)", - "app-theme-color": "var(--app-header-background-color)", - "mdc-checkbox-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)", - "mdc-checkbox-disabled-color": "var(--disabled-text-color)", - "mdc-radio-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)", - "mdc-radio-disabled-color": "var(--disabled-text-color)", - "mdc-tab-text-label-color-default": "var(--primary-text-color)", - "mdc-button-disabled-ink-color": "var(--disabled-text-color)", - "mdc-button-outline-color": "var(--outline-color)", - "mdc-dialog-scroll-divider-color": "var(--divider-color)", - "mdc-dialog-heading-ink-color": "var(--primary-text-color)", - "mdc-dialog-content-ink-color": "var(--primary-text-color)", - - "mdc-text-field-idle-line-color": "var(--input-idle-line-color)", - "mdc-text-field-hover-line-color": "var(--input-hover-line-color)", - "mdc-text-field-disabled-line-color": "var(--input-disabled-line-color)", - "mdc-text-field-outlined-idle-border-color": - "var(--input-outlined-idle-border-color)", - "mdc-text-field-outlined-hover-border-color": - "var(--input-outlined-hover-border-color)", - "mdc-text-field-outlined-disabled-border-color": - "var(--input-outlined-disabled-border-color)", - "mdc-text-field-fill-color": "var(--input-fill-color)", - "mdc-text-field-disabled-fill-color": "var(--input-disabled-fill-color)", - "mdc-text-field-ink-color": "var(--input-ink-color)", - "mdc-text-field-label-ink-color": "var(--input-label-ink-color)", - "mdc-text-field-disabled-ink-color": "var(--input-disabled-ink-color)", - - "mdc-select-idle-line-color": "var(--input-idle-line-color)", - "mdc-select-hover-line-color": "var(--input-hover-line-color)", - "mdc-select-outlined-idle-border-color": - "var(--input-outlined-idle-border-color)", - "mdc-select-outlined-hover-border-color": - "var(--input-outlined-hover-border-color)", - "mdc-select-outlined-disabled-border-color": - "var(--input-outlined-disabled-border-color)", - "mdc-select-fill-color": "var(--input-fill-color)", - "mdc-select-disabled-fill-color": "var(--input-disabled-fill-color)", - "mdc-select-ink-color": "var(--input-ink-color)", - "mdc-select-label-ink-color": "var(--input-label-ink-color)", - "mdc-select-disabled-ink-color": "var(--input-disabled-ink-color)", - "mdc-select-dropdown-icon-color": "var(--input-dropdown-icon-color)", - "mdc-select-disabled-dropdown-icon-color": "var(--input-disabled-ink-color)", - "ha-assist-chip-filled-container-color": - "rgba(var(--rgb-primary-text-color),0.15)", - "ha-assist-chip-active-container-color": - "rgba(var(--rgb-primary-color),0.15)", - "chip-background-color": "rgba(var(--rgb-primary-text-color), 0.15)", - // Vaadin - "material-body-text-color": "var(--primary-text-color)", - "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; diff --git a/src/resources/theme/color.globals.ts b/src/resources/theme/color.globals.ts new file mode 100644 index 0000000000..8e588b723b --- /dev/null +++ b/src/resources/theme/color.globals.ts @@ -0,0 +1,359 @@ +import { css } from "lit"; +import { + extractDerivedVars, + extractVar, + extractVars, +} from "../../common/style/derived-css-vars"; + +export const colorStyles = css` + html { + /* 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: #03a9f4; + --dark-primary-color: #0288d1; + --light-primary-color: #b3e5fc; + --accent-color: #ff9800; + --divider-color: rgba(0, 0, 0, 0.12); + --outline-color: rgba(0, 0, 0, 0.12); + --outline-hover-color: rgba(0, 0, 0, 0.24); + + /* 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; + + --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 label-badge */ + --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; + + /* 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; + + /* history colors */ + --history-unavailable-color: transparent; + + /* 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); + + /* 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); + + /* state color */ + --state-active-color: var(--amber-color); + --state-inactive-color: var(--grey-color); + --state-unavailable-color: var( + --state-icon-unavailable-color, + var(--disabled-text-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-locking-color: var(--orange-color); + --state-lock-unlocked-color: var(--red-color); + --state-lock-unlocking-color: var(--orange-color); + --state-lock-open-color: var(--red-color); + --state-lock-opening-color: var(--orange-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-valve-active-color: var(--blue-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-unknown-color: var(--dark-grey-color); + + --state-icon-error-color: var(--error-state-color, var(--error-color)); + --sidebar-text-color: var(--primary-text-color); + --sidebar-background-color: var(--card-background-color); + --sidebar-selected-text-color: var(--primary-color); + --sidebar-selected-icon-color: var(--primary-color); + --sidebar-icon-color: rgba(var(--rgb-primary-text-color), 0.6); + --switch-checked-color: var(--primary-color); + --switch-checked-button-color: var( + --switch-checked-color, + var(--primary-background-color) + ); + --switch-checked-track-color: var(--switch-checked-color, #000000); + --switch-unchecked-button-color: var( + --switch-unchecked-color, + var(--primary-background-color) + ); + --switch-unchecked-track-color: var(--switch-unchecked-color, #000000); + --slider-color: var(--primary-color); + --slider-secondary-color: var(--light-primary-color); + --slider-track-color: var(--scrollbar-thumb-color); + --label-badge-background-color: var(--card-background-color); + --label-badge-text-color: rgba(var(--rgb-primary-text-color), 0.8); + --table-header-background-color: var(--input-fill-color); + --table-row-background-color: var(--primary-background-color); + --table-row-alternative-background-color: var(--secondary-background-color); + --data-table-background-color: var(--card-background-color); + --markdown-code-background-color: var(--primary-background-color); + + /* https://github.com/material-components/material-web/blob/master/docs/theming.md */ + --mdc-theme-primary: var(--primary-color); + --mdc-theme-secondary: var(--accent-color); + --mdc-theme-background: var(--primary-background-color); + --mdc-theme-surface: 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); + --mdc-theme-text-disabled-on-light: var(--disabled-text-color); + --mdc-theme-text-primary-on-background: var(--primary-text-color); + --mdc-theme-text-secondary-on-background: var(--secondary-text-color); + --mdc-theme-text-hint-on-background: var(--secondary-text-color); + --mdc-theme-text-icon-on-background: var(--secondary-text-color); + --mdc-theme-error: var(--error-color); + --app-header-text-color: var(--text-primary-color); + --app-header-background-color: var(--primary-color); + --app-theme-color: var(--app-header-background-color); + --mdc-checkbox-unchecked-color: rgba(var(--rgb-primary-text-color), 0.54); + --mdc-checkbox-disabled-color: var(--disabled-text-color); + --mdc-radio-unchecked-color: rgba(var(--rgb-primary-text-color), 0.54); + --mdc-radio-disabled-color: var(--disabled-text-color); + --mdc-tab-text-label-color-default: var(--primary-text-color); + --mdc-button-disabled-ink-color: var(--disabled-text-color); + --mdc-button-outline-color: var(--outline-color); + --mdc-dialog-scroll-divider-color: var(--divider-color); + --mdc-dialog-heading-ink-color: var(--primary-text-color); + --mdc-dialog-content-ink-color: var(--primary-text-color); + + --mdc-text-field-idle-line-color: var(--input-idle-line-color); + --mdc-text-field-hover-line-color: var(--input-hover-line-color); + --mdc-text-field-disabled-line-color: var(--input-disabled-line-color); + --mdc-text-field-outlined-idle-border-color: var( + --input-outlined-idle-border-color + ); + --mdc-text-field-outlined-hover-border-color: var( + --input-outlined-hover-border-color + ); + --mdc-text-field-outlined-disabled-border-color: var( + --input-outlined-disabled-border-color + ); + --mdc-text-field-fill-color: var(--input-fill-color); + --mdc-text-field-disabled-fill-color: var(--input-disabled-fill-color); + --mdc-text-field-ink-color: var(--input-ink-color); + --mdc-text-field-label-ink-color: var(--input-label-ink-color); + --mdc-text-field-disabled-ink-color: var(--input-disabled-ink-color); + + --mdc-select-idle-line-color: var(--input-idle-line-color); + --mdc-select-hover-line-color: var(--input-hover-line-color); + --mdc-select-outlined-idle-border-color: var( + --input-outlined-idle-border-color + ); + --mdc-select-outlined-hover-border-color: var( + --input-outlined-hover-border-color + ); + --mdc-select-outlined-disabled-border-color: var( + --input-outlined-disabled-border-color + ); + --mdc-select-fill-color: var(--input-fill-color); + --mdc-select-disabled-fill-color: var(--input-disabled-fill-color); + --mdc-select-ink-color: var(--input-ink-color); + --mdc-select-label-ink-color: var(--input-label-ink-color); + --mdc-select-disabled-ink-color: var(--input-disabled-ink-color); + --mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color); + --mdc-select-disabled-dropdown-icon-color: var(--input-disabled-ink-color); + --ha-assist-chip-filled-container-color: rgba( + var(--rgb-primary-text-color), + 0.15 + ); + --ha-assist-chip-active-container-color: rgba( + var(--rgb-primary-color), + 0.15 + ); + --chip-background-color: rgba(var(--rgb-primary-text-color), 0.15); + + /* Vaadin */ + --material-body-text-color: var(--primary-text-color); + --material-background-color: var(--card-background-color); + --material-secondary-background-color: var(--secondary-background-color); + --material-secondary-text-color: var(--secondary-text-color); + } +`; + +const darkColorStyles = css` + --primary-background-color: #111111; + --card-background-color: #1c1c1c; + --secondary-background-color: #282828; + --clear-background-color: #111111; + --primary-text-color: #e1e1e1; + --secondary-text-color: #9b9b9b; + --disabled-text-color: #6f6f6f; + --app-header-text-color: #e1e1e1; + --app-header-background-color: #101e24; + --switch-unchecked-button-color: #999999; + --switch-unchecked-track-color: #9b9b9b; + --divider-color: rgba(225, 225, 225, 0.12); + --outline-color: rgba(225, 225, 225, 0.12); + --outline-hover-color: rgba(225, 225, 225, 0.24); + --mdc-ripple-color: #aaaaaa; + --mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.1); + + --input-idle-line-color: rgba(255, 255, 255, 0.42); + --input-hover-line-color: rgba(255, 255, 255, 0.87); + --input-disabled-line-color: rgba(255, 255, 255, 0.06); + --input-outlined-idle-border-color: rgba(255, 255, 255, 0.38); + --input-outlined-hover-border-color: rgba(255, 255, 255, 0.87); + --input-outlined-disabled-border-color: rgba(255, 255, 255, 0.06); + --input-fill-color: rgba(255, 255, 255, 0.05); + --input-disabled-fill-color: rgba(255, 255, 255, 0.02); + --input-ink-color: rgba(255, 255, 255, 0.87); + --input-label-ink-color: rgba(255, 255, 255, 0.6); + --input-disabled-ink-color: rgba(255, 255, 255, 0.37); + --input-dropdown-icon-color: rgba(255, 255, 255, 0.54); + + --codemirror-keyword: #c792ea; + --codemirror-operator: #89ddff; + --codemirror-variable: #f07178; + --codemirror-variable-2: #eeffff; + --codemirror-variable-3: #decb6b; + --codemirror-builtin: #ffcb6b; + --codemirror-atom: #f78c6c; + --codemirror-number: #ff5370; + --codemirror-def: #82aaff; + --codemirror-string: #c3e88d; + --codemirror-string-2: #f07178; + --codemirror-comment: #545454; + --codemirror-tag: #ff5370; + --codemirror-meta: #ffcb6b; + --codemirror-attribute: #c792ea; + --codemirror-property: #c792ea; + --codemirror-qualifier: #decb6b; + --codemirror-type: #decb6b; + --energy-grid-return-color: #a280db; + --map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) + saturate(0.3); + --disabled-color: #464646; +`; +export const colorDerivedVariables = extractDerivedVars(colorStyles); +export const darkColorVariables = extractVars(darkColorStyles); + +export const DefaultPrimaryColor = extractVar(colorStyles, "primary-color"); +export const DefaultAccentColor = extractVar(colorStyles, "accent-color"); diff --git a/src/resources/theme/main.globals.ts b/src/resources/theme/main.globals.ts new file mode 100644 index 0000000000..60ae6e5731 --- /dev/null +++ b/src/resources/theme/main.globals.ts @@ -0,0 +1,38 @@ +import { css } from "lit"; +import { extractDerivedVars } from "../../common/style/derived-css-vars"; + +export const mainStyles = css` + html { + height: 100vh; + + /* for header */ + --header-height: 56px; + + /* 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; + + direction: ltr; + --direction: ltr; + --float-start: left; + --float-end: right; + --margin-title-ltr: 0 0 0 24px; + --margin-title-rtl: 0 24px 0 0; + + /* Vaadin typography */ + --material-h6-font-size: var(--ha-font-size-m); + --material-small-font-size: var(--ha-font-size-xs); + --material-caption-font-size: var(--ha-font-size-2xs); + --material-button-font-size: var(--ha-font-size-xs); + } +`; + +export const mainDerivedVariables = extractDerivedVars(mainStyles); diff --git a/src/resources/theme/theme.ts b/src/resources/theme/theme.ts new file mode 100644 index 0000000000..3447bd8a6c --- /dev/null +++ b/src/resources/theme/theme.ts @@ -0,0 +1,20 @@ +import { fontStyles } from "../roboto"; +import { colorDerivedVariables, colorStyles } from "./color.globals"; +import { mainDerivedVariables, mainStyles } from "./main.globals"; +import { + typographyDerivedVariables, + typographyStyles, +} from "./typography.globals"; + +export const themeStyles = [ + fontStyles.toString(), + mainStyles.toString(), + typographyStyles.toString(), + colorStyles.toString(), +].join(""); + +export const derivedStyles = { + ...mainDerivedVariables, + ...typographyDerivedVariables, + ...colorDerivedVariables, +}; diff --git a/src/resources/theme/typography.globals.ts b/src/resources/theme/typography.globals.ts new file mode 100644 index 0000000000..c7ae6fe678 --- /dev/null +++ b/src/resources/theme/typography.globals.ts @@ -0,0 +1,40 @@ +import { css } from "lit"; +import { extractDerivedVars } from "../../common/style/derived-css-vars"; + +export const typographyStyles = css` + html { + --ha-font-family-body: Roboto, Noto, sans-serif; + --ha-font-family-code: monospace; + --ha-font-family-longform: ui-sans-serif, system-ui, sans-serif; + + font-size: 14px; + --ha-font-size-scale: 1; + --ha-font-size-xs: calc(10px * var(--ha-font-size-scale)); + --ha-font-size-s: calc(12px * var(--ha-font-size-scale)); + --ha-font-size-m: calc(14px * var(--ha-font-size-scale)); + --ha-font-size-l: calc(16px * var(--ha-font-size-scale)); + --ha-font-size-xl: calc(20px * var(--ha-font-size-scale)); + --ha-font-size-2xl: calc(24px * var(--ha-font-size-scale)); + --ha-font-size-3xl: calc(28px * var(--ha-font-size-scale)); + --ha-font-size-4xl: calc(32px * var(--ha-font-size-scale)); + --ha-font-size-5xl: calc(40px * var(--ha-font-size-scale)); + + --ha-font-weight-light: 300; + --ha-font-weight-normal: 400; + --ha-font-weight-semibold: 500; + --ha-font-weight-bold: 600; + + --ha-font-family-heading: var(--ha-font-family-body); + --ha-font-weight-body: var(--ha-font-weight-normal); + --ha-font-weight-heading: var(--ha-font-weight-bold); + --ha-font-weight-action: var(--ha-font-weight-semibold); + + --ha-line-height-condensed: 1.2; + --ha-line-height-normal: 1.6; + --ha-line-height-expanded: 2; + + --ha-font-smoothing: antialiased; + } +`; + +export const typographyDerivedVariables = extractDerivedVars(typographyStyles); From 7c46d2d2f47e28551d9a40de136e3ae1061bcbff Mon Sep 17 00:00:00 2001 From: Yosi Levy <37745463+yosilevy@users.noreply.github.com> Date: Mon, 28 Apr 2025 16:30:26 +0300 Subject: [PATCH 5/7] History tooltip RTL fix (#24917) * History tooltip RTL fix * Fix background color --- src/components/chart/ha-chart-base.ts | 4 ++++ src/components/chart/state-history-chart-line.ts | 2 +- src/components/chart/state-history-chart-timeline.ts | 8 ++++++-- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts index 5748378ed4..0fae4ecc53 100644 --- a/src/components/chart/ha-chart-base.ts +++ b/src/components/chart/ha-chart-base.ts @@ -590,6 +590,10 @@ export class HaChartBase extends LitElement { lineStyle: { color: style.getPropertyValue("--info-color") }, crossStyle: { color: style.getPropertyValue("--info-color") }, }, + extraCssText: + "direction:" + + style.getPropertyValue("--direction") + + ";margin-inline-start:3px;margin-inline-end:8px;", }, timeline: {}, }; diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts index 2eb31f2cd1..2ad664e627 100644 --- a/src/components/chart/state-history-chart-line.ts +++ b/src/components/chart/state-history-chart-line.ts @@ -135,7 +135,7 @@ export class StateHistoryChartLine extends LitElement { seriesIndex: index, value: lastData, // HTML copied from echarts. May change based on options - marker: ``, + marker: ``, }); }); const unit = this.unit diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts index 89a59a7513..34e5e1deb6 100644 --- a/src/components/chart/state-history-chart-timeline.ts +++ b/src/components/chart/state-history-chart-timeline.ts @@ -127,7 +127,7 @@ export class StateHistoryChartTimeline extends LitElement { private _renderTooltip: TooltipFormatterCallback = (params: TooltipPositionCallbackParams) => { - const { value, name, marker, seriesName } = Array.isArray(params) + const { value, name, marker, seriesName, color } = Array.isArray(params) ? params[0] : params; const title = seriesName @@ -138,8 +138,12 @@ export class StateHistoryChartTimeline extends LitElement { "ui.components.history_charts.duration" )}: ${millisecondsToDuration(durationInMs)}`; + const markerLocalized = !computeRTL(this.hass) + ? marker + : ``; + const lines = [ - marker + name, + markerLocalized + name, formatDateTimeWithSeconds( new Date(value![1]), this.hass.locale, From 66dbafb5f59afe49b060a34215b9c81ea972df0a Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 28 Apr 2025 16:06:02 +0200 Subject: [PATCH 6/7] Render todo items with no state, change look of read only items (#24529) * Render todo items with no state, change look of read only items Co-authored-by: Erik Montnemery Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com> Co-authored-by: Wendelin --- demo/src/stubs/todo.ts | 54 +++-- gallery/src/pages/lovelace/todo-list-card.ts | 6 +- src/components/ha-check-list-item.ts | 41 +++- src/data/todo.ts | 4 +- .../lovelace/cards/hui-todo-list-card.ts | 213 +++++++++++++----- src/translations/en.json | 1 + 6 files changed, 229 insertions(+), 90 deletions(-) diff --git a/demo/src/stubs/todo.ts b/demo/src/stubs/todo.ts index 2d30294c18..b1a9755521 100644 --- a/demo/src/stubs/todo.ts +++ b/demo/src/stubs/todo.ts @@ -2,26 +2,36 @@ import type { TodoItem } from "../../../src/data/todo"; import { TodoItemStatus } from "../../../src/data/todo"; import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass"; -export const mockTodo = (hass: MockHomeAssistant) => { - hass.mockWS("todo/item/list", () => ({ - items: [ - { - uid: "12", - summary: "Milk", - status: TodoItemStatus.NeedsAction, - }, - { - uid: "13", - summary: "Eggs", - status: TodoItemStatus.NeedsAction, - }, - { - uid: "14", - summary: "Oranges", - status: TodoItemStatus.Completed, - }, - ] as TodoItem[], - })); - // eslint-disable-next-line @typescript-eslint/no-empty-function - hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {}); +const items = { + items: [ + { + uid: "12", + summary: "Milk", + status: TodoItemStatus.NeedsAction, + }, + { + uid: "13", + summary: "Eggs", + status: TodoItemStatus.NeedsAction, + }, + { + uid: "14", + summary: "Oranges", + status: TodoItemStatus.Completed, + }, + { + uid: "15", + summary: "Beer", + }, + ] as TodoItem[], +}; + +export const mockTodo = (hass: MockHomeAssistant) => { + hass.mockWS("todo/item/list", () => items); + hass.mockWS("todo/item/move", () => undefined); + hass.mockWS("todo/item/subscribe", (_msg, _hass, onChange) => { + onChange!(items); + // eslint-disable-next-line @typescript-eslint/no-empty-function + return () => {}; + }); }; diff --git a/gallery/src/pages/lovelace/todo-list-card.ts b/gallery/src/pages/lovelace/todo-list-card.ts index 2ed2d68ddd..ebababd4f5 100644 --- a/gallery/src/pages/lovelace/todo-list-card.ts +++ b/gallery/src/pages/lovelace/todo-list-card.ts @@ -1,11 +1,11 @@ import type { PropertyValues, TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, query } from "lit/decorators"; +import { mockIcons } from "../../../../demo/src/stubs/icons"; +import { mockTodo } from "../../../../demo/src/stubs/todo"; +import { getEntity } from "../../../../src/fake_data/entity"; import { provideHass } from "../../../../src/fake_data/provide_hass"; import "../../components/demo-cards"; -import { getEntity } from "../../../../src/fake_data/entity"; -import { mockTodo } from "../../../../demo/src/stubs/todo"; -import { mockIcons } from "../../../../demo/src/stubs/icons"; const ENTITIES = [ getEntity("todo", "shopping_list", "2", { diff --git a/src/components/ha-check-list-item.ts b/src/components/ha-check-list-item.ts index 0152f19fcc..289f43481d 100644 --- a/src/components/ha-check-list-item.ts +++ b/src/components/ha-check-list-item.ts @@ -1,17 +1,54 @@ -import { css } from "lit"; import { CheckListItemBase } from "@material/mwc-list/mwc-check-list-item-base"; import { styles as controlStyles } from "@material/mwc-list/mwc-control-list-item.css"; import { styles } from "@material/mwc-list/mwc-list-item.css"; -import { customElement } from "lit/decorators"; +import { css, html, nothing } from "lit"; +import { customElement, property } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../common/dom/fire_event"; +import "./ha-checkbox"; @customElement("ha-check-list-item") export class HaCheckListItem extends CheckListItemBase { + @property({ type: Boolean, attribute: "checkbox-disabled" }) + checkboxDisabled = false; + + @property({ type: Boolean }) + indeterminate = false; + async onChange(event) { super.onChange(event); fireEvent(this, event.type); } + override render() { + const checkboxClasses = { + "mdc-deprecated-list-item__graphic": this.left, + "mdc-deprecated-list-item__meta": !this.left, + }; + + const text = this.renderText(); + const graphic = + this.graphic && this.graphic !== "control" && !this.left + ? this.renderGraphic() + : nothing; + const meta = this.hasMeta && this.left ? this.renderMeta() : nothing; + const ripple = this.renderRipple(); + + return html` ${ripple} ${graphic} ${this.left ? "" : text} + + + + + ${this.left ? text : ""} ${meta}`; + } + static override styles = [ styles, controlStyles, diff --git a/src/data/todo.ts b/src/data/todo.ts index 0c02d76c1a..7f72f74506 100644 --- a/src/data/todo.ts +++ b/src/data/todo.ts @@ -25,7 +25,7 @@ export enum TodoSortMode { export interface TodoItem { uid: string; summary: string; - status: TodoItemStatus; + status: TodoItemStatus | null; description?: string | null; due?: string | null; } @@ -72,7 +72,7 @@ export const fetchItems = async ( export const subscribeItems = ( hass: HomeAssistant, entity_id: string, - callback: (item) => void + callback: (update: TodoItems) => void ) => hass.connection.subscribeMessage(callback, { type: "todo/item/subscribe", diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts index 8c37699dd3..f385243343 100644 --- a/src/panels/lovelace/cards/hui-todo-list-card.ts +++ b/src/panels/lovelace/cards/hui-todo-list-card.ts @@ -156,6 +156,19 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { return items; } + private _getUncheckedAndItemsWithoutStatus = memoizeOne( + (items?: TodoItem[], sort?: string | undefined): TodoItem[] => + items + ? this._sortItems( + items.filter( + (item) => + item.status === TodoItemStatus.NeedsAction || !item.status + ), + sort + ) + : [] + ); + private _getCheckedItems = memoizeOne( (items?: TodoItem[], sort?: string | undefined): TodoItem[] => items @@ -176,6 +189,16 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { : [] ); + private _getItemsWithoutStatus = memoizeOne( + (items?: TodoItem[], sort?: string | undefined): TodoItem[] => + items + ? this._sortItems( + items.filter((item) => !item.status), + sort + ) + : [] + ); + public willUpdate( changedProperties: PropertyValueMap | Map ): void { @@ -235,6 +258,18 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { this._config.display_order ); + const itemsWithoutStatus = this._getItemsWithoutStatus( + this._items, + this._config.display_order + ); + + const reorderableItems = this._reordering + ? this._getUncheckedAndItemsWithoutStatus( + this._items, + this._config.display_order + ) + : undefined; + return html` - ${uncheckedItems.length + ${!uncheckedItems.length && !itemsWithoutStatus.length + ? html`

+ ${this.hass.localize( + "ui.panel.lovelace.cards.todo-list.no_unchecked_items" + )} +

` + : this._reordering + ? html`
+

+ ${this.hass!.localize( + "ui.panel.lovelace.cards.todo-list.reorder_items" + )} +

+ ${this._renderMenu(this._config, unavailable)} +
+ ${this._renderItems(reorderableItems ?? [], unavailable)}` + : nothing} + ${!this._reordering && uncheckedItems.length ? html`

@@ -282,47 +334,35 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { "ui.panel.lovelace.cards.todo-list.unchecked_items" )}

- ${(!this._config.display_order || - this._config.display_order === TodoSortMode.NONE) && - this._todoListSupportsFeature( - TodoListEntityFeature.MOVE_TODO_ITEM - ) - ? html` - - - ${this.hass!.localize( - this._reordering - ? "ui.panel.lovelace.cards.todo-list.exit_reorder_items" - : "ui.panel.lovelace.cards.todo-list.reorder_items" - )} - - - - ` - : nothing} + ${this._renderMenu(this._config, unavailable)}
${this._renderItems(uncheckedItems, unavailable)} ` - : html`

- ${this.hass.localize( - "ui.panel.lovelace.cards.todo-list.no_unchecked_items" - )} -

`} + : nothing} + ${!this._reordering && itemsWithoutStatus.length + ? html` +
+ ${uncheckedItems.length + ? html`
` + : nothing} +
+

+ ${this.hass!.localize( + "ui.panel.lovelace.cards.todo-list.no_status_items" + )} +

+ ${!uncheckedItems.length + ? this._renderMenu(this._config, unavailable) + : nothing} +
+
+ ${this._renderItems(itemsWithoutStatus, unavailable)} + ` + : nothing} ${!this._config.hide_completed && checkedItems.length ? html` -
-
+
+

${this.hass!.localize( @@ -359,13 +399,43 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {

${this._renderItems(checkedItems, unavailable)} ` - : ""} + : nothing} `; } + private _renderMenu(config: TodoListCardConfig, unavailable: boolean) { + return (!config.display_order || + config.display_order === TodoSortMode.NONE) && + this._todoListSupportsFeature(TodoListEntityFeature.MOVE_TODO_ITEM) + ? html` + + + ${this.hass!.localize( + this._reordering + ? "ui.panel.lovelace.cards.todo-list.exit_reorder_items" + : "ui.panel.lovelace.cards.todo-list.reorder_items" + )} + + + + ` + : nothing; + } + private _getDueDate(item: TodoItem): Date | undefined { return item.due ? item.due.includes("T") @@ -397,16 +467,19 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { left .hasMeta=${showReorder || showDelete} class="editRow ${classMap({ - draggable: item.status === TodoItemStatus.NeedsAction, + draggable: item.status !== TodoItemStatus.Completed, completed: item.status === TodoItemStatus.Completed, multiline: Boolean(item.description || item.due), })}" .selected=${item.status === TodoItemStatus.Completed} - .disabled=${unavailable || - !this._todoListSupportsFeature( + .disabled=${unavailable} + .checkboxDisabled=${!this._todoListSupportsFeature( + TodoListEntityFeature.UPDATE_TODO_ITEM + )} + .indeterminate=${!item.status} + .noninteractive=${!this._todoListSupportsFeature( TodoListEntityFeature.UPDATE_TODO_ITEM )} - item-id=${item.uid} .itemId=${item.uid} @change=${this._completeItem} @click=${this._openItem} @@ -631,35 +704,53 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { this._moveItem(oldIndex, newIndex); } - private async _moveItem(oldIndex: number, newIndex: number) { - // correct index for header - oldIndex -= 1; - newIndex -= 1; - const uncheckedItems = this._getUncheckedItems(this._items); - const item = uncheckedItems[oldIndex]; - let prevItem: TodoItem | undefined; - if (newIndex > 0) { - if (newIndex < oldIndex) { - prevItem = uncheckedItems[newIndex - 1]; - } else { - prevItem = uncheckedItems[newIndex]; + private _findFirstItem( + items: HTMLCollection, + start: number, + direction: "up" | "down" + ) { + let item: Element | undefined; + let index = direction === "up" ? start - 1 : start; + while (item?.localName !== "ha-check-list-item") { + item = items[index]; + index = direction === "up" ? index - 1 : index + 1; + if (!item) { + break; } } + return item; + } + + private async _moveItem(oldIndex: number, newIndex: number) { + await this.updateComplete; + + const list = this.renderRoot.querySelector("ha-list")!; + + const items = list.children; + + const itemId = (items[oldIndex] as any).itemId as string; + + const prevItemId = ( + this._findFirstItem( + items, + newIndex, + newIndex < oldIndex ? "up" : "down" + ) as any + )?.itemId; // Optimistic change - const itemIndex = this._items!.findIndex((itm) => itm.uid === item.uid); - this._items!.splice(itemIndex, 1); - if (newIndex === 0) { + const itemIndex = this._items!.findIndex((itm) => itm.uid === itemId); + const item = this._items!.splice(itemIndex, 1)[0]; + + if (!prevItemId) { this._items!.unshift(item); } else { - const prevIndex = this._items!.findIndex( - (itm) => itm.uid === prevItem!.uid - ); + const prevIndex = this._items!.findIndex((itm) => itm.uid === prevItemId); this._items!.splice(prevIndex + 1, 0, item); } this._items = [...this._items!]; - await moveItem(this.hass!, this._entityId!, item.uid, prevItem?.uid); + await moveItem(this.hass!, this._entityId!, itemId, prevItemId); } static styles = css` diff --git a/src/translations/en.json b/src/translations/en.json index 754e42f2a4..8f950019b8 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -6529,6 +6529,7 @@ "unchecked_items": "Active", "no_unchecked_items": "You have no to-do items!", "checked_items": "Completed", + "no_status_items": "No status", "clear_items": "Remove completed items", "add_item": "Add item", "today": "Today", From 92521d456504f7d1b8d9262b5d5f4307e8551c00 Mon Sep 17 00:00:00 2001 From: emufan Date: Mon, 28 Apr 2025 16:20:05 +0200 Subject: [PATCH 7/7] Themeable badge icon size and badge font size (#25185) Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com> --- src/components/ha-badge.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ha-badge.ts b/src/components/ha-badge.ts index ad6fe7cd79..b4644921d5 100644 --- a/src/components/ha-badge.ts +++ b/src/components/ha-badge.ts @@ -103,7 +103,7 @@ export class HaBadge extends LitElement { color: var(--secondary-text-color); } .content { - font-size: 12px; + font-size: var(--ha-font-size-badge, var(--ha-font-size-s)); font-style: normal; font-weight: 500; line-height: 16px; @@ -111,7 +111,7 @@ export class HaBadge extends LitElement { color: var(--primary-text-color); } ::slotted([slot="icon"]) { - --mdc-icon-size: 18px; + --mdc-icon-size: var(--ha-icon-size-badge, 18px); color: var(--badge-color); line-height: 0; margin-left: -4px;