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

Merge branch 'dev' of github.com:home-assistant/frontend into auto-jsdoc-markdown

Browse Source
This commit is contained in:
Wendelin 2025-05-12 09:00:26 +02:00
commit c46368b141
No known key found for this signature in database
325 changed files with 3586 additions and 2012 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch
View File

@ -1,18 +0,0 @@
diff --git a/dist/hls.light.mjs b/dist/hls.light.mjs
index eed9d788fafdb159975e1a2eb08ac88ba9c9ac33..ace881935e6665946f1c8110ebd2f739cde4427e 100644
--- a/dist/hls.light.mjs
+++ b/dist/hls.light.mjs
@@ -20523,9 +20523,9 @@ class Hls {
}
Hls.defaultConfig = void 0;
-var KeySystemFormats = empty.KeySystemFormats;
-var KeySystems = empty.KeySystems;
-var SubtitleStreamController = empty.SubtitleStreamController;
-var TimelineController = empty.TimelineController;
+var KeySystemFormats = empty;
+var KeySystems = empty;
+var SubtitleStreamController = empty;
+var TimelineController = empty;
export { AbrController, AttrList, Cues as AudioStreamController, Cues as AudioTrackController, BasePlaylistController, BaseSegment, BaseStreamController, BufferController, Cues as CMCDController, CapLevelController, ChunkMetadata, ContentSteeringController, DateRange, Cues as EMEController, ErrorActionFlags, ErrorController, ErrorDetails, ErrorTypes, Events, FPSController, Fragment, Hls, HlsSkip, HlsUrlParameters, KeySystemFormats, KeySystems, Level, LevelDetails, LevelKey, LoadStats, MetadataSchema, NetworkErrorAction, Part, PlaylistLevelType, SubtitleStreamController, Cues as SubtitleTrackController, TimelineController, Hls as default, getMediaSource, isMSESupported, isSupported };
//# sourceMappingURL=hls.light.mjs.map

0
.yarn/patches/sortablejs-npm-1.15.3-3235a8f83b.patch → .yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch
View File

2
cast/src/launcher/layout/hc-connect.ts
View File

@ -302,7 +302,7 @@ export class HcConnect extends LitElement {
}
.error {
color: red;
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.error a {

8
cast/src/launcher/layout/hc-layout.ts
View File

@ -86,7 +86,7 @@ class HcLayout extends LitElement {
.card-header {
color: var(--ha-card-header-color, var(--primary-text-color));
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
letter-spacing: -0.012em;
line-height: 32px;
padding: 24px 16px 16px;
@ -98,7 +98,7 @@ class HcLayout extends LitElement {
border-radius: 4px 4px 0 0;
}
.subtitle {
font-size: 14px;
font-size: var(--ha-font-size-m);
color: var(--secondary-text-color);
line-height: initial;
}
@ -113,7 +113,7 @@ class HcLayout extends LitElement {
}
:host ::slotted(.section-header) {
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
padding: 4px 16px;
text-transform: uppercase;
}
@ -135,7 +135,7 @@ class HcLayout extends LitElement {
.footer {
text-align: center;
font-size: 12px;
font-size: var(--ha-font-size-s);
padding: 8px 0 24px;
color: var(--secondary-text-color);
}

2
cast/src/receiver/layout/hc-launch-screen.ts
View File

@ -29,7 +29,7 @@ class HcLaunchScreen extends LitElement {
display: block;
height: 100vh;
background-color: #f2f4f9;
font-size: 24px;
font-size: var(--ha-font-size-2xl);
}
.container {
display: flex;

2
gallery/src/components/page-description.ts
View File

@ -42,7 +42,7 @@ class PageDescription extends HaMarkdown {
padding-bottom: 8px;
}
.subtitle {
font-size: 18px;
font-size: var(--ha-font-size-l);
line-height: 24px;
}
.root {

2
gallery/src/ha-demo-options.ts
View File

@ -34,7 +34,7 @@ class HaDemoOptions extends LitElement {
height: 64px;
padding: 0 16px;
pointer-events: none;
font-size: 20px;
font-size: var(--ha-font-size-xl);
}
`,
];

4
gallery/src/ha-gallery.ts
View File

@ -250,8 +250,8 @@ class HaGallery extends LitElement {
}
.page-footer .header {
font-size: 16px;
font-weight: 500;
font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-medium);
line-height: 28px;
text-align: center;
}

2
gallery/src/pages/components/ha-control-button.ts
View File

@ -150,7 +150,7 @@ export class DemoHaBarButton extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
}
.custom {
--control-button-icon-color: var(--primary-color);

2
gallery/src/pages/components/ha-control-number-buttons.ts
View File

@ -86,7 +86,7 @@ export class DemoHarControlNumberButtons extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
}
.custom {
color: #2196f3;

2
gallery/src/pages/components/ha-control-select-menu.ts
View File

@ -125,7 +125,7 @@ export class DemoHaControlSelectMenu extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
}
.custom {
--control-button-icon-color: var(--primary-color);

2
gallery/src/pages/components/ha-control-select.ts
View File

@ -181,7 +181,7 @@ export class DemoHaControlSelect extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
}
.custom {
--mdc-icon-size: 24px;

2
gallery/src/pages/components/ha-control-slider.ts
View File

@ -144,7 +144,7 @@ export class DemoHaBarSlider extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
}
.custom {
--control-slider-color: #ffcf4c;

2
gallery/src/pages/components/ha-control-switch.ts
View File

@ -112,7 +112,7 @@ export class DemoHaControlSwitch extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
}
.custom {
--control-switch-on-color: var(--green-color);

4
gallery/src/pages/components/ha-hs-color-picker.ts
View File

@ -105,8 +105,8 @@ export class DemoHaHsColorPicker extends LitElement {
width: 400px;
}
.value {
font-size: 22px;
font-weight: bold;
font-size: var(--ha-font-size-xl);
font-weight: var(--ha-font-weight-bold);
margin: 0 0 12px 0;
}
`;

2
gallery/src/pages/components/ha-select-box.ts
View File

@ -123,7 +123,7 @@ export class DemoHaSelectBox extends LitElement {
margin: 0;
}
label {
font-weight: 600;
font-weight: var(--ha-font-weight-bold);
margin-bottom: 8px;
display: block;
}

74
gallery/src/pages/components/ha-spinner.ts
View File

@ -1,6 +1,7 @@
import type { TemplateResult } from "lit";
import { html, css, LitElement } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
import "../../../../src/components/ha-bar";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-spinner";
@ -11,29 +12,66 @@ export class DemoHaSpinner extends LitElement {
@property({ attribute: false }) hass!: HomeAssistant;
protected render(): TemplateResult {
return html`<ha-card header="Basic spinner">
<div class="card-content">
<ha-spinner></ha-spinner></div
></ha-card>
<ha-card header="Different spinner sizes">
<div class="card-content">
<ha-spinner size="tiny"></ha-spinner>
<ha-spinner size="small"></ha-spinner>
<ha-spinner size="medium"></ha-spinner>
<ha-spinner size="large"></ha-spinner></div
></ha-card>
<ha-card header="Spinner with an aria-label">
<div class="card-content">
<ha-spinner aria-label="Doing something..."></ha-spinner>
<ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner></div
></ha-card>`;
return html`
${["light", "dark"].map(
(mode) => html`
<div class=${mode}>
<ha-card header="ha-badge ${mode} demo">
<div class="card-content">
<ha-spinner></ha-spinner>
<ha-spinner size="tiny"></ha-spinner>
<ha-spinner size="small"></ha-spinner>
<ha-spinner size="medium"></ha-spinner>
<ha-spinner size="large"></ha-spinner>
<ha-spinner aria-label="Doing something..."></ha-spinner>
<ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner>
</div>
</ha-card>
</div>
`
)}
`;
}
firstUpdated(changedProps) {
super.firstUpdated(changedProps);
applyThemesOnElement(
this.shadowRoot!.querySelector(".dark"),
{
default_theme: "default",
default_dark_theme: "default",
themes: {},
darkMode: true,
theme: "default",
},
undefined,
undefined,
true
);
}
static styles = css`
:host {
display: flex;
justify-content: center;
}
.dark,
.light {
display: block;
background-color: var(--primary-background-color);
padding: 0 50px;
margin: 16px;
border-radius: 8px;
}
ha-card {
max-width: 600px;
margin: 24px auto;
}
.card-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
`;
}

2
gallery/src/pages/date-time/date-time-numeric.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/date-time-seconds.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/date-time-short-year.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/date-time-short.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeShort extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/date-time.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeDateTime extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/date.ts
View File

@ -92,7 +92,7 @@ export class DemoDateTimeDate extends LitElement {
static styles = css`
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/time-seconds.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeTimeSeconds extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/time-weekday.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeTimeWeekday extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

2
gallery/src/pages/date-time/time.ts
View File

@ -106,7 +106,7 @@ export class DemoDateTimeTime extends LitElement {
margin: 12px auto;
}
.header {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.center {
text-align: center;

4
hassio/src/addon-view/config/hassio-addon-config.ts
View File

@ -428,13 +428,13 @@ class HassioAddonConfig extends LitElement {
.header h2 {
color: var(--ha-card-header-color, var(--primary-text-color));
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
letter-spacing: -0.012em;
line-height: 48px;
padding: 12px 16px 16px;
display: block;
margin-block: 0px;
font-weight: normal;
font-weight: var(--ha-font-weight-normal);
}
.card-actions.right {
justify-content: flex-end;

4
hassio/src/addon-view/info/hassio-addon-info.ts
View File

@ -1280,12 +1280,12 @@ class HassioAddonInfo extends LitElement {
padding-left: 8px;
padding-inline-start: 8px;
padding-inline-end: initial;
font-size: 24px;
font-size: var(--ha-font-size-2xl);
color: var(--ha-card-header-color, var(--primary-text-color));
}
.addon-version {
float: var(--float-end);
font-size: 15px;
font-size: var(--ha-font-size-l);
vertical-align: middle;
}
.errors {

4
hassio/src/backups/hassio-backups.ts
View File

@ -391,7 +391,7 @@ export class HassioBackups extends LitElement {
top: -4px;
}
.selected-txt {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
padding-left: 16px;
padding-inline-start: 16px;
padding-inline-end: initial;
@ -401,7 +401,7 @@ export class HassioBackups extends LitElement {
margin-top: 20px;
}
.header-toolbar .selected-txt {
font-size: 16px;
font-size: var(--ha-font-size-l);
}
.header-toolbar .header-btns {
margin-right: -12px;

2
hassio/src/dashboard/hassio-update.ts
View File

@ -131,7 +131,7 @@ export class HassioUpdate extends LitElement {
}
.update-heading {
font-size: var(--ha-font-size-l);
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
margin-bottom: 0.5em;
color: var(--primary-text-color);
}

2
hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
View File

@ -173,7 +173,7 @@ class HassioHardwareDialog extends LitElement {
font-family: var(--ha-font-family-code);
}
code {
font-size: 85%;
font-size: var(--ha-font-size-s);
padding: 0.2em 0.4em;
}
search-input {

13
hassio/src/entrypoint.ts
View File

@ -1,3 +1,8 @@
import {
haFontFamilyBody,
haFontSmoothing,
haMozOsxFontSmoothing,
} from "../../src/resources/theme/typography.globals";
import "./hassio-main";
import("../../src/resources/append-ha-style");
@ -5,10 +10,10 @@ import("../../src/resources/append-ha-style");
const styleEl = document.createElement("style");
styleEl.textContent = `
body {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-weight: 400;
font-family: ${haFontFamilyBody};
-moz-osx-font-smoothing: ${haMozOsxFontSmoothing};
-webkit-font-smoothing: ${haFontSmoothing};
font-weight: var(--ha-font-weight-normal);
margin: 0;
padding: 0;
height: 100vh;

4
hassio/src/ingress-view/hassio-ingress-view.ts
View File

@ -340,12 +340,12 @@ class HassioIngressView extends LitElement {
.header {
display: flex;
align-items: center;
font-size: 16px;
font-size: var(--ha-font-size-l);
height: 40px;
padding: 0 16px;
pointer-events: none;
background-color: var(--app-header-background-color);
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
box-sizing: border-box;

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

@ -14,6 +14,7 @@ export const hassioStyle = css`
margin-bottom: 8px;
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-font-smoothing);
-moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
font-size: var(--ha-font-size-2xl);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);

2
lint-staged.config.js
View File

@ -4,7 +4,7 @@ export default {
"prettier --cache --write",
"lit-analyzer --quiet",
],
"*.{json,css,md,markdown,html,y?aml}": "prettier --cache --write",
"*.{json,css,md,markdown,html,ya?ml}": "prettier --cache --write",
"translations/*/*.json": (files) =>
'printf "%s\n" "Translation files should not be added or modified here. Instead, make the necessary modifications in src/translations/en.json. Other languages are managed externally. Please see https://developers.home-assistant.io/docs/translations/ for details." ' +
files.join(" ") +

36
package.json
View File

@ -35,7 +35,7 @@
"@codemirror/legacy-modes": "6.5.1",
"@codemirror/search": "6.5.10",
"@codemirror/state": "6.5.2",
"@codemirror/view": "6.36.6",
"@codemirror/view": "6.36.7",
"@egjs/hammerjs": "2.0.17",
"@formatjs/intl-datetimeformat": "6.18.0",
"@formatjs/intl-displaynames": "6.8.11",
@ -97,7 +97,7 @@
"@webcomponents/scoped-custom-element-registry": "0.0.10",
"@webcomponents/webcomponentsjs": "2.8.0",
"app-datepicker": "5.1.1",
"barcode-detector": "3.0.1",
"barcode-detector": "3.0.4",
"color-name": "2.0.0",
"comlink": "4.4.2",
"core-js": "3.42.0",
@ -112,9 +112,9 @@
"fuse.js": "7.1.0",
"google-timezones-json": "1.2.0",
"gulp-zopfli-green": "6.0.2",
"hls.js": "patch:hls.js@npm%3A1.5.7#~/.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch",
"hls.js": "1.6.2",
"home-assistant-js-websocket": "9.5.0",
"idb-keyval": "6.2.1",
"idb-keyval": "6.2.2",
"intl-messageformat": "10.7.16",
"js-yaml": "4.1.0",
"leaflet": "1.9.4",
@ -132,7 +132,7 @@
"qrcode": "1.5.4",
"roboto-fontface": "0.10.0",
"rrule": "2.8.1",
"sortablejs": "patch:sortablejs@npm%3A1.15.3#~/.yarn/patches/sortablejs-npm-1.15.3-3235a8f83b.patch",
"sortablejs": "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch",
"stacktrace-js": "2.0.2",
"superstruct": "2.0.2",
"tinykeys": "3.0.0",
@ -154,17 +154,17 @@
"@babel/core": "7.27.1",
"@babel/helper-define-polyfill-provider": "0.6.4",
"@babel/plugin-transform-runtime": "7.27.1",
"@babel/preset-env": "7.27.1",
"@babel/preset-env": "7.27.2",
"@bundle-stats/plugin-webpack-filter": "4.20.0",
"@custom-elements-manifest/analyzer": "0.10.4",
"@custom-elements-manifest/to-markdown": "0.1.0",
"@lokalise/node-api": "14.5.0",
"@lokalise/node-api": "14.6.0",
"@octokit/auth-oauth-device": "7.1.5",
"@octokit/plugin-retry": "7.2.1",
"@octokit/rest": "21.1.1",
"@rsdoctor/rspack-plugin": "1.0.2",
"@rspack/cli": "1.3.8",
"@rspack/core": "1.3.8",
"@rsdoctor/rspack-plugin": "1.1.1",
"@rspack/cli": "1.3.9",
"@rspack/core": "1.3.9",
"@types/babel__plugin-transform-runtime": "7.9.5",
"@types/chromecast-caf-receiver": "6.0.21",
"@types/chromecast-caf-sender": "1.0.11",
@ -173,7 +173,7 @@
"@types/html-minifier-terser": "7.0.2",
"@types/js-yaml": "4.0.9",
"@types/leaflet": "1.9.17",
"@types/leaflet-draw": "1.0.11",
"@types/leaflet-draw": "1.0.12",
"@types/leaflet.markercluster": "1.5.5",
"@types/lodash.merge": "4.6.9",
"@types/luxon": "3.6.2",
@ -183,14 +183,14 @@
"@types/tar": "6.1.13",
"@types/ua-parser-js": "0.7.39",
"@types/webspeechapi": "0.0.29",
"@vitest/coverage-v8": "3.1.2",
"@vitest/coverage-v8": "3.1.3",
"babel-loader": "10.0.0",
"babel-plugin-template-html-minifier": "4.1.0",
"browserslist-useragent-regexp": "4.1.3",
"del": "8.0.0",
"eslint": "9.25.1",
"eslint": "9.26.0",
"eslint-config-airbnb-base": "15.0.0",
"eslint-config-prettier": "10.1.2",
"eslint-config-prettier": "10.1.5",
"eslint-import-resolver-webpack": "0.13.10",
"eslint-plugin-import": "2.31.0",
"eslint-plugin-lit": "2.1.1",
@ -208,7 +208,7 @@
"husky": "9.1.7",
"jsdom": "26.1.0",
"jszip": "3.10.1",
"lint-staged": "15.5.1",
"lint-staged": "15.5.2",
"lit-analyzer": "2.0.3",
"lodash.merge": "4.6.2",
"lodash.template": "4.5.0",
@ -222,9 +222,9 @@
"terser-webpack-plugin": "5.3.14",
"ts-lit-plugin": "2.0.2",
"typescript": "5.8.3",
"typescript-eslint": "8.31.1",
"typescript-eslint": "8.32.0",
"vite-tsconfig-paths": "5.1.4",
"vitest": "3.1.2",
"vitest": "3.1.3",
"webpack-stats-plugin": "1.1.3",
"webpackbar": "7.0.0",
"workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
@ -236,7 +236,7 @@
"clean-css": "5.3.3",
"@lit/reactive-element": "2.1.0",
"@fullcalendar/daygrid": "6.1.17",
"globals": "16.0.0",
"globals": "16.1.0",
"tslib": "2.8.1",
"@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
},

10
public/static/images/z-wave-add-node/long-range.svg
View File

@ -1,13 +1,13 @@
<svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M76.9105 39.4999C77.739 39.4999 78.4105 38.8283 78.4105 37.9999C78.4105 37.1715 77.739 36.4999 76.9105 36.4999V39.4999ZM37.5 39.4999L76.9105 39.4999V36.4999L37.5 36.4999L37.5 39.4999Z" fill="#00AFFF" fill-opacity="0.3"/>
<path d="M76.9105 39.4999C77.739 39.4999 78.4105 38.8284 78.4105 37.9999C78.4105 37.1715 77.739 36.4999 76.9105 36.4999V39.4999ZM37.5 37.9999L37.5 39.4999L76.9105 39.4999V37.9999V36.4999L37.5 36.4999L37.5 37.9999Z" fill="#00AFFF" fill-opacity="0.3"/>
<path d="M30.8239 22.3365L38.8239 38.8365L30.3239 50.3365" stroke="black" stroke-opacity="0.12" stroke-width="3" stroke-linecap="round"/>
<mask id="mask0_1110_23734" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
<mask id="mask0_2_779" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
<path d="M45.75 42.075C45.75 42.4462 45.4462 42.75 45.075 42.75H32.925C32.5538 42.75 32.25 42.4462 32.25 42.075V36.675C32.25 36.3037 32.4649 35.7851 32.7276 35.5224L38.5224 29.7275C38.7851 29.4649 39.2143 29.4649 39.477 29.7275L45.2724 35.523C45.5351 35.7857 45.75 36.3043 45.75 36.6755V42.075Z" fill="black"/>
</mask>
<g mask="url(#mask0_1110_23734)">
<rect x="30" y="27" width="18" height="18" fill="#212121"/>
<g mask="url(#mask0_2_779)">
<rect x="30" y="27" width="18" height="18" fill="#00AFFF"/>
</g>
<path d="M82 37.9999C82 36.343 83.3431 34.9999 85 34.9999C86.6569 34.9999 88 36.343 88 37.9999C88 39.6567 86.6569 40.9999 85 40.9999C83.3431 40.9999 82 39.6567 82 37.9999Z" stroke="#00AFFF" stroke-width="2"/>
<path d="M85 34.9999C86.6569 34.9999 88 36.343 88 37.9999C88 39.6567 86.6569 40.9999 85 40.9999C83.3431 40.9999 82 39.6567 82 37.9999C82 36.343 83.3431 34.9999 85 34.9999Z" stroke="#00AFFF" stroke-width="2"/>
<rect x="23" y="11" width="8" height="8" rx="4" fill="black" fill-opacity="0.32"/>
<rect x="22" y="52" width="8" height="8" rx="4" fill="black" fill-opacity="0.32"/>
<path d="M21.5715 19.5C17.4983 23.801 15 29.6087 15 36C15 41.9085 17.1351 47.3183 20.6759 51.5" stroke="black" stroke-opacity="0.12" stroke-width="3" stroke-linecap="round"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

30
public/static/images/z-wave-add-node/mesh.svg
View File

@ -1,19 +1,19 @@
<svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M63.1358 38.5084C63.9608 38.4334 64.5688 37.7037 64.4938 36.8787C64.4188 36.0537 63.6892 35.4457 62.8642 35.5207L63.1358 38.5084ZM46.6358 40.0084L63.1358 38.5084L62.8642 35.5207L46.3642 37.0207L46.6358 40.0084Z" fill="#00AFFF" fill-opacity="0.3"/>
<path d="M38.5 22L45.9722 37.4115C46.2967 38.0807 46.223 38.8747 45.781 39.4728L38 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<circle cx="47" cy="36" r="34" fill="white"/>
<circle cx="47" cy="36" r="33.5" stroke="black" stroke-opacity="0.12"/>
<path d="M41.8777 12.5216C43.4905 12.1798 45.1631 12 46.8777 12C58.2401 12 67.7582 19.8959 70.2445 30.5M40 59C42.1788 59.6506 44.4874 60 46.8777 60C56.9498 60 65.5728 53.7955 69.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M38.5 22L45.9722 37.4115C46.2967 38.0807 46.223 38.8747 45.781 39.4728L38 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<mask id="mask0_1110_23775" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="38" y="27" width="18" height="18">
<path d="M53.75 42.075C53.75 42.4462 53.4462 42.75 53.075 42.75H40.925C40.5538 42.75 40.25 42.4462 40.25 42.075V36.675C40.25 36.3037 40.4649 35.7851 40.7276 35.5224L46.5224 29.7275C46.7851 29.4649 47.2143 29.4649 47.477 29.7275L53.2724 35.523C53.5351 35.7857 53.75 36.3043 53.75 36.6755V42.075Z" fill="black"/>
<path d="M55.1358 38.5084C55.9608 38.4334 56.5688 37.7038 56.4938 36.8788C56.4188 36.0538 55.6892 35.4457 54.8642 35.5207L55.1358 38.5084ZM38.5 38.5146L38.6358 40.0084L55.1358 38.5084L55 37.0146L54.8642 35.5207L38.3642 37.0207L38.5 38.5146Z" fill="#00AFFF" fill-opacity="0.3"/>
<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<circle cx="39" cy="36" r="34" fill="white"/>
<circle cx="39" cy="36" r="33.5" stroke="black" stroke-opacity="0.12"/>
<path d="M33.8777 12.5216C35.4905 12.1798 37.1631 12 38.8777 12C50.2401 12 59.7582 19.8959 62.2445 30.5M32 59C34.1788 59.6506 36.4874 60 38.8777 60C48.9498 60 57.5728 53.7955 61.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<mask id="mask0_2_810" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
<path d="M45.75 42.075C45.75 42.4462 45.4463 42.75 45.075 42.75H32.925C32.5538 42.75 32.25 42.4462 32.25 42.075V36.675C32.25 36.3037 32.4649 35.7851 32.7276 35.5224L38.5224 29.7275C38.7851 29.4649 39.2143 29.4649 39.477 29.7275L45.2724 35.523C45.5351 35.7857 45.75 36.3043 45.75 36.6755V42.075Z" fill="black"/>
</mask>
<g mask="url(#mask0_1110_23775)">
<rect x="38" y="27" width="18" height="18" fill="#212121"/>
<g mask="url(#mask0_2_810)">
<rect x="30" y="27" width="18" height="18" fill="#00AFFF"/>
</g>
<path d="M63.5 39.4999C64.3284 39.4999 65 38.8283 65 37.9999C65 37.1715 64.3284 36.4999 63.5 36.4999L63.5 39.4999ZM49.5 39.4999L63.5 39.4999L63.5 36.4999L49.5 36.4999L49.5 39.4999Z" fill="#00AFFF" fill-opacity="0.3"/>
<rect x="31" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
<rect x="30" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
<path d="M29.5715 19.5C25.4983 23.801 23 29.6087 23 36C23 41.9085 25.1351 47.3183 28.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M68 37.9999C68 36.343 69.3431 34.9999 71 34.9999C72.6569 34.9999 74 36.343 74 37.9999C74 39.6567 72.6569 40.9999 71 40.9999C69.3431 40.9999 68 39.6567 68 37.9999Z" stroke="#00AFFF" stroke-width="2"/>
<path d="M55.5 39.4999C56.3284 39.4999 57 38.8283 57 37.9999C57 37.1715 56.3284 36.4999 55.5 36.4999L55.5 39.4999ZM41.5 37.9999L41.5 39.4999L55.5 39.4999L55.5 37.9999L55.5 36.4999L41.5 36.4999L41.5 37.9999Z" fill="#00AFFF" fill-opacity="0.3"/>
<rect x="23" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
<rect x="22" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
<path d="M21.5715 19.5C17.4983 23.801 15 29.6087 15 36C15 41.9085 17.1351 47.3183 20.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M63 34.9999C64.6569 34.9999 66 36.343 66 37.9999C66 39.6567 64.6569 40.9999 63 40.9999C61.3431 40.9999 60 39.6567 60 37.9999C60 36.343 61.3431 34.9999 63 34.9999Z" stroke="#00AFFF" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

29
public/static/images/z-wave-add-node/mesh_dark.svg
View File

@ -1,19 +1,18 @@
<svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M63.1358 38.5084C63.9608 38.4334 64.5688 37.7037 64.4938 36.8787C64.4188 36.0537 63.6892 35.4457 62.8642 35.5207L63.1358 38.5084ZM46.6358 40.0084L63.1358 38.5084L62.8642 35.5207L46.3642 37.0207L46.6358 40.0084Z" fill="#00AFFF" fill-opacity="0.3"/>
<path d="M38.5 22L45.9722 37.4115C46.2967 38.0807 46.223 38.8747 45.781 39.4728L38 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<circle cx="47" cy="36" r="34" fill="#1C1C1C"/>
<circle cx="47" cy="36" r="33.5" stroke="white" stroke-opacity="0.24"/>
<path d="M41.8777 12.5216C43.4905 12.1798 45.1631 12 46.8777 12C58.2401 12 67.7582 19.8959 70.2445 30.5M40 59C42.1788 59.6506 44.4874 60 46.8777 60C56.9498 60 65.5728 53.7955 69.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M38.5 22L45.9722 37.4115C46.2967 38.0807 46.223 38.8747 45.781 39.4728L38 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<mask id="mask0_1180_4965" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="38" y="27" width="18" height="18">
<path d="M53.75 42.075C53.75 42.4462 53.4462 42.75 53.075 42.75H40.925C40.5538 42.75 40.25 42.4462 40.25 42.075V36.675C40.25 36.3037 40.4649 35.7851 40.7276 35.5224L46.5224 29.7275C46.7851 29.4649 47.2143 29.4649 47.477 29.7275L53.2724 35.523C53.5351 35.7857 53.75 36.3043 53.75 36.6755V42.075Z" fill="black"/>
<path d="M55.1358 38.5084C55.9608 38.4334 56.5688 37.7038 56.4938 36.8788C56.4188 36.0538 55.6892 35.4457 54.8642 35.5207L55.1358 38.5084ZM38.5 38.5146L38.6358 40.0084L55.1358 38.5084L55 37.0146L54.8642 35.5207L38.3642 37.0207L38.5 38.5146Z" fill="#00AFFF" fill-opacity="0.3"/>
<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<circle cx="39" cy="36" r="33.5" stroke="white" stroke-opacity="0.24"/>
<path d="M33.8777 12.5216C35.4905 12.1798 37.1631 12 38.8777 12C50.2401 12 59.7582 19.8959 62.2445 30.5M32 59C34.1788 59.6506 36.4874 60 38.8777 60C48.9498 60 57.5728 53.7955 61.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<mask id="mask0_2_810" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
<path d="M45.75 42.075C45.75 42.4462 45.4463 42.75 45.075 42.75H32.925C32.5538 42.75 32.25 42.4462 32.25 42.075V36.675C32.25 36.3037 32.4649 35.7851 32.7276 35.5224L38.5224 29.7275C38.7851 29.4649 39.2143 29.4649 39.477 29.7275L45.2724 35.523C45.5351 35.7857 45.75 36.3043 45.75 36.6755V42.075Z" fill="black"/>
</mask>
<g mask="url(#mask0_1180_4965)">
<rect x="38" y="27" width="18" height="18" fill="#00AFFF"/>
<g mask="url(#mask0_2_810)">
<rect x="30" y="27" width="18" height="18" fill="#00AFFF"/>
</g>
<path d="M63.5 39.4999C64.3284 39.4999 65 38.8283 65 37.9999C65 37.1715 64.3284 36.4999 63.5 36.4999L63.5 39.4999ZM49.5 39.4999L63.5 39.4999L63.5 36.4999L49.5 36.4999L49.5 39.4999Z" fill="#00AFFF" fill-opacity="0.3"/>
<rect x="31" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
<rect x="30" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
<path d="M29.5715 19.5C25.4983 23.801 23 29.6087 23 36C23 41.9085 25.1351 47.3183 28.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M68 37.9999C68 36.343 69.3431 34.9999 71 34.9999C72.6569 34.9999 74 36.343 74 37.9999C74 39.6567 72.6569 40.9999 71 40.9999C69.3431 40.9999 68 39.6567 68 37.9999Z" stroke="#00AFFF" stroke-width="2"/>
<path d="M55.5 39.4999C56.3284 39.4999 57 38.8283 57 37.9999C57 37.1715 56.3284 36.4999 55.5 36.4999L55.5 39.4999ZM41.5 37.9999L41.5 39.4999L55.5 39.4999L55.5 37.9999L55.5 36.4999L41.5 36.4999L41.5 37.9999Z" fill="#00AFFF" fill-opacity="0.3"/>
<rect x="23" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
<rect x="22" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
<path d="M21.5715 19.5C17.4983 23.801 15 29.6087 15 36C15 41.9085 17.1351 47.3183 20.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M63 34.9999C64.6569 34.9999 66 36.343 66 37.9999C66 39.6567 64.6569 40.9999 63 40.9999C61.3431 40.9999 60 39.6567 60 37.9999C60 36.343 61.3431 34.9999 63 34.9999Z" stroke="#00AFFF" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

6
src/auth/ha-authorize.ts
View File

@ -93,7 +93,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
background-color: var(--primary-background-color, #fafafa);
}
p {
font-size: 14px;
font-size: var(--ha-font-size-m);
line-height: 20px;
}
.card-content {
@ -151,8 +151,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
margin-inline-start: initial;
}
h1 {
font-size: 28px;
font-weight: 400;
font-size: var(--ha-font-size-3xl);
font-weight: var(--ha-font-weight-normal);
margin-top: 16px;
margin-bottom: 16px;
}

4
src/auth/ha-pick-auth-provider.ts
View File

@ -57,8 +57,8 @@ export class HaPickAuthProvider extends LitElement {
position: relative;
z-index: 1;
text-align: center;
font-size: 14px;
font-weight: 400;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-normal);
line-height: 20px;
}
h3:before {

44
src/common/controllers/drag-scroll-controller.ts
View File

@ -9,6 +9,7 @@ import type { LitElement } from "lit";
*/
export interface DragScrollControllerConfig {
selector: string;
enabled?: boolean;
}
export class DragScrollController implements ReactiveController {
@ -28,19 +29,47 @@ export class DragScrollController implements ReactiveController {
private _scrollContainer?: HTMLElement | null;
private _enabled = true;
public get enabled(): boolean {
return this._enabled;
}
public set enabled(value: boolean) {
if (value === this._enabled) {
return;
}
this._enabled = value;
if (this._enabled) {
this._attach();
} else {
this._detach();
}
this._host.requestUpdate();
}
constructor(
host: ReactiveControllerHost & LitElement,
{ selector }: DragScrollControllerConfig
{ selector, enabled }: DragScrollControllerConfig
) {
this._selector = selector;
this._host = host;
this.enabled = enabled ?? true;
host.addController(this);
}
hostUpdated() {
if (this._scrollContainer) {
if (!this.enabled || this._scrollContainer) {
return;
}
this._attach();
}
hostDisconnected() {
this._detach();
}
private _attach() {
this._scrollContainer = this._host.renderRoot?.querySelector(
this._selector
);
@ -49,9 +78,18 @@ export class DragScrollController implements ReactiveController {
}
}
hostDisconnected() {
private _detach() {
window.removeEventListener("mousemove", this._mouseMove);
window.removeEventListener("mouseup", this._mouseUp);
if (this._scrollContainer) {
this._scrollContainer.removeEventListener("mousedown", this._mouseDown);
this._scrollContainer = undefined;
}
this.scrolled = false;
this.scrolling = false;
this.mouseIsDown = false;
this.scrollStartX = 0;
this.scrollLeft = 0;
}
private _mouseDown = (event: MouseEvent) => {

2
src/common/style/derived-css-vars.ts
View File

@ -2,7 +2,7 @@ import type { CSSResult } from "lit";
const _extractCssVars = (
cssString: string,
condition: (string) => boolean = () => true
condition: (string: string) => boolean = () => true
) => {
const variables: Record<string, string> = {};

30
src/components/chart/ha-chart-base.ts
View File

@ -600,12 +600,32 @@ export class HaChartBase extends LitElement {
}
private _getSeries() {
if (!Array.isArray(this.data)) {
return this.data;
}
return this.data.filter(
const series = ensureArray(this.data).filter(
(d) => !this._hiddenDatasets.has(String(d.name ?? d.id))
);
const yAxis = (this.options?.yAxis?.[0] ?? this.options?.yAxis) as
| YAXisOption
| undefined;
if (yAxis?.type === "log") {
// set <=0 values to null so they render as gaps on a log graph
return series.map((d) =>
d.type === "line"
? {
...d,
data: d.data?.map((v) =>
Array.isArray(v)
? [
v[0],
typeof v[1] !== "number" || v[1] > 0 ? v[1] : null,
...v.slice(2),
]
: v
),
}
: d
);
}
return series;
}
private _getDefaultHeight() {
@ -719,7 +739,7 @@ export class HaChartBase extends LitElement {
max-height: 60%;
overflow-y: auto;
padding: 12px 0 0;
font-size: 12px;
font-size: var(--ha-font-size-s);
color: var(--primary-text-color);
}
.chart-legend ul {

54
src/components/chart/ha-sankey-chart.ts
View File

@ -105,10 +105,41 @@ export class HaSankeyChart extends LitElement {
private _createData = memoizeOne((data: SankeyChartData, width = 0) => {
const filteredNodes = data.nodes.filter((n) => n.value > 0);
const indexes = [...new Set(filteredNodes.map((n) => n.index))];
const indexes = [...new Set(filteredNodes.map((n) => n.index))].sort();
const depthMap = new Map<number, number>();
indexes.sort().forEach((index, i) => {
const sections: Node[][] = [];
indexes.forEach((index, i) => {
depthMap.set(index, i);
const nodesWithIndex = filteredNodes.filter((n) => n.index === index);
if (nodesWithIndex.length > 0) {
sections.push(
sections.length > 0
? nodesWithIndex.sort((a, b) => {
// sort by the order of their parents in the previous section with orphans at the end
const aParentIndex = this._findParentIndex(
a.id,
data.links,
sections
);
const bParentIndex = this._findParentIndex(
b.id,
data.links,
sections
);
if (aParentIndex === bParentIndex) {
return 0;
}
if (aParentIndex === -1) {
return 1;
}
if (bParentIndex === -1) {
return -1;
}
return aParentIndex - bParentIndex;
})
: nodesWithIndex
);
}
});
const links = this._processLinks(filteredNodes, data.links);
const sectionWidth = width / indexes.length;
@ -117,7 +148,7 @@ export class HaSankeyChart extends LitElement {
return {
id: "sankey",
type: "sankey",
nodes: filteredNodes.map((node) => ({
nodes: sections.flat().map((node) => ({
id: node.id,
value: node.value,
itemStyle: {
@ -227,6 +258,23 @@ export class HaSankeyChart extends LitElement {
return links;
}
private _findParentIndex(id: string, links: Link[], sections: Node[][]) {
const parent = links.find((l) => l.target === id)?.source;
if (!parent) {
return -1;
}
let offset = 0;
for (let i = sections.length - 1; i >= 0; i--) {
const section = sections[i];
const index = section.findIndex((n) => n.id === parent);
if (index !== -1) {
return offset + index;
}
offset += section.length;
}
return -1;
}
static styles = css`
:host {
display: block;

2
src/components/chips/ha-assist-chip.ts
View File

@ -60,7 +60,7 @@ export class HaAssistChip extends AssistChip {
opacity: var(--ha-assist-chip-active-container-opacity);
}
.label {
font-family: Roboto, sans-serif;
font-family: var(--ha-font-family-body);
}
`,
];

28
src/components/data-table/ha-data-table.ts
View File

@ -603,7 +603,7 @@ export class HaDataTable extends LitElement {
.map(
([key2, column2], i) =>
html`${i !== 0
? " ⸱ "
? " · "
: nothing}${column2.template
? column2.template(row)
: row[key2]}`
@ -928,12 +928,12 @@ export class HaDataTable extends LitElement {
height: 100%;
}
.mdc-data-table__content {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: var(--ha-font-family-body);
-moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
letter-spacing: 0.0178571429em;
text-decoration: inherit;
text-transform: inherit;
@ -1048,12 +1048,12 @@ export class HaDataTable extends LitElement {
}
.mdc-data-table__cell {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: var(--ha-font-family-body);
-moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
letter-spacing: 0.0178571429em;
text-decoration: inherit;
text-transform: inherit;
@ -1170,12 +1170,12 @@ export class HaDataTable extends LitElement {
}
.mdc-data-table__header-cell {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: var(--ha-font-family-body);
-moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-size: 0.875rem;
line-height: 1.375rem;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
letter-spacing: 0.0071428571em;
text-decoration: inherit;
text-transform: inherit;
@ -1199,7 +1199,7 @@ export class HaDataTable extends LitElement {
padding-inline-start: 12px;
padding-inline-end: initial;
width: 100%;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
display: flex;
align-items: center;
cursor: pointer;

203
src/components/entity/ha-entity-combo-box.ts
View File

@ -5,7 +5,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event";
import { computeAreaName } from "../../common/entity/compute_area_name";
@ -30,28 +29,17 @@ import "../ha-icon-button";
import "../ha-svg-icon";
import "./state-badge";
const FAKE_ENTITY: HassEntity = {
entity_id: "",
state: "",
last_changed: "",
last_updated: "",
context: { id: "", user_id: null, parent_id: null },
attributes: {},
};
interface EntityComboBoxItem extends HassEntity {
interface EntityComboBoxItem {
// Force empty label to always display empty value by default in the search field
id: string;
label: "";
primary: string;
secondary?: string;
translated_domain?: string;
show_entity_id?: boolean;
entity_name?: string;
area_name?: string;
device_name?: string;
friendly_name?: string;
domain_name?: string;
search_labels?: string[];
sorting_label?: string;
icon_path?: string;
stateObj?: HassEntity;
}
export type HaEntityComboBoxEntityFilterFunc = (entity: HassEntity) => boolean;
@ -59,22 +47,6 @@ export type HaEntityComboBoxEntityFilterFunc = (entity: HassEntity) => boolean;
const CREATE_ID = "___create-new-entity___";
const NO_ENTITIES_ID = "___no-entities___";
const DOMAIN_STYLE = styleMap({
fontSize: "var(--ha-font-size-s)",
fontWeight: "var(--ha-font-weight-normal)",
lineHeight: "var(--ha-line-height-normal)",
alignSelf: "flex-end",
maxWidth: "30%",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
});
const ENTITY_ID_STYLE = styleMap({
fontFamily: "var(--ha-font-family-code)",
fontSize: "var(--ha-font-size-xs)",
});
@customElement("ha-entity-combo-box")
export class HaEntityComboBox extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -177,33 +149,43 @@ export class HaEntityComboBox extends LitElement {
private _rowRenderer: ComboBoxLitRenderer<EntityComboBoxItem> = (
item,
{ index }
) => html`
<ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
${item.icon_path
? html`<ha-svg-icon slot="start" .path=${item.icon_path}></ha-svg-icon>`
: html`
<state-badge
slot="start"
.stateObj=${item}
.hass=${this.hass}
></state-badge>
`}
<span slot="headline">${item.primary}</span>
${item.secondary
? html`<span slot="supporting-text">${item.secondary}</span>`
: nothing}
${item.entity_id && item.show_entity_id
? html`<span slot="supporting-text" style=${ENTITY_ID_STYLE}
>${item.entity_id}</span
>`
: nothing}
${item.translated_domain && !item.show_entity_id
? html`<div slot="trailing-supporting-text" style=${DOMAIN_STYLE}>
${item.translated_domain}
</div>`
: nothing}
</ha-combo-box-item>
`;
) => {
const showEntityId = this.hass.userData?.showEntityIdPicker;
return html`
<ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
${item.icon_path
? html`
<ha-svg-icon slot="start" .path=${item.icon_path}></ha-svg-icon>
`
: html`
<state-badge
slot="start"
.stateObj=${item.stateObj}
.hass=${this.hass}
></state-badge>
`}
<span slot="headline">${item.primary}</span>
${item.secondary
? html`<span slot="supporting-text">${item.secondary}</span>`
: nothing}
${item.stateObj && showEntityId
? html`
<span slot="supporting-text" class="code">
${item.stateObj.entity_id}
</span>
`
: nothing}
${item.domain_name && !showEntityId
? html`
<div slot="trailing-supporting-text" class="domain">
${item.domain_name}
</div>
`
: nothing}
</ha-combo-box-item>
`;
};
private _getItems = memoizeOne(
(
@ -218,7 +200,7 @@ export class HaEntityComboBox extends LitElement {
excludeEntities: this["excludeEntities"],
createDomains: this["createDomains"]
): EntityComboBoxItem[] => {
let states: EntityComboBoxItem[] = [];
let items: EntityComboBoxItem[] = [];
let entityIds = Object.keys(hass.states);
@ -236,9 +218,8 @@ export class HaEntityComboBox extends LitElement {
);
return {
...FAKE_ENTITY,
id: CREATE_ID + domain,
label: "",
entity_id: CREATE_ID + domain,
primary: primary,
secondary: this.hass.localize(
"ui.components.entity.entity-picker.new_entity"
@ -251,9 +232,8 @@ export class HaEntityComboBox extends LitElement {
if (!entityIds.length) {
return [
{
...FAKE_ENTITY,
id: NO_ENTITIES_ID,
label: "",
entity_id: NO_ENTITIES_ID,
primary: this.hass!.localize(
"ui.components.entity.entity-picker.no_entities"
),
@ -289,7 +269,7 @@ export class HaEntityComboBox extends LitElement {
const isRTL = computeRTL(this.hass);
states = entityIds
items = entityIds
.map<EntityComboBoxItem>((entityId) => {
const stateObj = hass!.states[entityId];
@ -300,30 +280,32 @@ export class HaEntityComboBox extends LitElement {
const deviceName = device ? computeDeviceName(device) : undefined;
const areaName = area ? computeAreaName(area) : undefined;
const domainName = domainToName(
this.hass.localize,
computeDomain(entityId)
);
const primary = entityName || deviceName || entityId;
const secondary = [areaName, entityName ? deviceName : undefined]
.filter(Boolean)
.join(isRTL ? " ◂ " : " ▸ ");
const translatedDomain = domainToName(
this.hass.localize,
computeDomain(entityId)
);
return {
...hass!.states[entityId],
id: entityId,
label: "",
primary: primary,
secondary:
secondary ||
this.hass.localize("ui.components.device-picker.no_area"),
translated_domain: translatedDomain,
sorting_label: [deviceName, entityName].filter(Boolean).join("-"),
entity_name: entityName || deviceName,
area_name: areaName,
device_name: deviceName,
friendly_name: friendlyName,
show_entity_id: hass.userData?.showEntityIdPicker,
secondary: secondary,
domain_name: domainName,
sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
search_labels: [
entityName,
deviceName,
areaName,
domainName,
friendlyName,
entityId,
].filter(Boolean) as string[],
stateObj: stateObj,
};
})
.sort((entityA, entityB) =>
@ -335,41 +317,43 @@ export class HaEntityComboBox extends LitElement {
);
if (includeDeviceClasses) {
states = states.filter(
(stateObj) =>
items = items.filter(
(item) =>
// We always want to include the entity of the current value
stateObj.entity_id === this.value ||
(stateObj.attributes.device_class &&
includeDeviceClasses.includes(stateObj.attributes.device_class))
item.id === this.value ||
(item.stateObj?.attributes.device_class &&
includeDeviceClasses.includes(
item.stateObj.attributes.device_class
))
);
}
if (includeUnitOfMeasurement) {
states = states.filter(
(stateObj) =>
items = items.filter(
(item) =>
// We always want to include the entity of the current value
stateObj.entity_id === this.value ||
(stateObj.attributes.unit_of_measurement &&
item.id === this.value ||
(item.stateObj?.attributes.unit_of_measurement &&
includeUnitOfMeasurement.includes(
stateObj.attributes.unit_of_measurement
item.stateObj.attributes.unit_of_measurement
))
);
}
if (entityFilter) {
states = states.filter(
(stateObj) =>
items = items.filter(
(item) =>
// We always want to include the entity of the current value
stateObj.entity_id === this.value || entityFilter!(stateObj)
item.id === this.value ||
(item.stateObj && entityFilter!(item.stateObj))
);
}
if (!states.length) {
if (!items.length) {
return [
{
...FAKE_ENTITY,
id: NO_ENTITIES_ID,
label: "",
entity_id: NO_ENTITIES_ID,
primary: this.hass!.localize(
"ui.components.entity.entity-picker.no_match"
),
@ -380,10 +364,10 @@ export class HaEntityComboBox extends LitElement {
}
if (createItems?.length) {
states.push(...createItems);
items.push(...createItems);
}
return states;
return items;
}
);
@ -426,7 +410,9 @@ export class HaEntityComboBox extends LitElement {
protected render(): TemplateResult {
return html`
<ha-combo-box
item-value-path="entity_id"
item-id-path="id"
item-value-path="id"
item-label-path="label"
.hass=${this.hass}
.value=${this._value}
.label=${this.label === undefined
@ -478,17 +464,7 @@ export class HaEntityComboBox extends LitElement {
}
private _fuseIndex = memoizeOne((states: EntityComboBoxItem[]) =>
Fuse.createIndex(
[
"entity_name",
"device_name",
"area_name",
"translated_domain",
"friendly_name", // for backwards compatibility
"entity_id", // for technical search
],
states
)
Fuse.createIndex(["search_labels"], states)
);
private _filterChanged(ev: CustomEvent): void {
@ -505,9 +481,8 @@ export class HaEntityComboBox extends LitElement {
if (results.length === 0) {
target.filteredItems = [
{
...FAKE_ENTITY,
id: NO_ENTITIES_ID,
label: "",
entity_id: NO_ENTITIES_ID,
primary: this.hass!.localize(
"ui.components.entity.entity-picker.no_match"
),

5
src/components/entity/ha-entity-picker.ts
View File

@ -162,10 +162,7 @@ export class HaEntityPicker extends LitElement {
slot="start"
></state-badge>
<span slot="headline">${primary}</span>
<span slot="supporting-text">
${secondary ||
this.hass.localize("ui.components.device-picker.no_area")}
</span>
<span slot="supporting-text">${secondary}</span>
${showClearIcon
? html`<ha-icon-button
class="clear"

2
src/components/entity/ha-state-label-badge.ts
View File

@ -267,7 +267,7 @@ export class HaStateLabelBadge extends LitElement {
cursor: pointer;
}
.big {
font-size: 70%;
font-size: var(--ha-font-size-xs);
}
ha-label-badge {
--ha-label-badge-color: var(--label-badge-red);

137
src/components/entity/ha-statistic-combo-box.ts
View File

@ -1,11 +1,10 @@
import { mdiChartLine, mdiShape } from "@mdi/js";
import { mdiChartLine, mdiHelpCircle, mdiShape } from "@mdi/js";
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import Fuse from "fuse.js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { ensureArray } from "../../common/array/ensure-array";
import { fireEvent } from "../../common/dom/fire_event";
@ -26,31 +25,27 @@ import type { HaComboBox } from "../ha-combo-box";
import "../ha-combo-box-item";
import "../ha-svg-icon";
import "./state-badge";
import { documentationUrl } from "../../util/documentation-url";
type StatisticItemType = "entity" | "external" | "no_state";
interface StatisticItem {
// Force empty label to always display empty value by default in the search field
id: string;
statistic_id?: string;
label: "";
primary: string;
secondary?: string;
show_entity_id?: boolean;
entity_name?: string;
area_name?: string;
device_name?: string;
friendly_name?: string;
search_labels?: string[];
sorting_label?: string;
state?: HassEntity;
icon_path?: string;
type?: StatisticItemType;
iconPath?: string;
stateObj?: HassEntity;
}
const TYPE_ORDER = ["entity", "external", "no_state"] as StatisticItemType[];
const MISSING_ID = "___missing-entity___";
const ENTITY_ID_STYLE = styleMap({
fontFamily: "var(--ha-font-family-code)",
fontSize: "11px",
});
const TYPE_ORDER = ["entity", "external", "no_state"] as StatisticItemType[];
@customElement("ha-statistic-combo-box")
export class HaStatisticComboBox extends LitElement {
@ -131,37 +126,39 @@ export class HaStatisticComboBox extends LitElement {
private _rowRenderer: ComboBoxLitRenderer<StatisticItem> = (
item,
{ index }
) => html`
<ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
${!item.state
? html`
<ha-svg-icon
style="margin: 0 4px"
slot="start"
.path=${item.iconPath}
></ha-svg-icon>
`
: html`
<state-badge
slot="start"
.stateObj=${item.state}
.hass=${this.hass}
></state-badge>
`}
<span slot="headline">${item.primary} </span>
${item.secondary
? html`<span slot="supporting-text">${item.secondary}</span>`
: nothing}
${item.id && item.show_entity_id
? html`
<span slot="supporting-text" style=${ENTITY_ID_STYLE}>
${item.id}
</span>
`
: nothing}
</ha-combo-box-item>
`;
) => {
const showEntityId = this.hass.userData?.showEntityIdPicker;
return html`
<ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
${item.icon_path
? html`
<ha-svg-icon
style="margin: 0 4px"
slot="start"
.path=${item.icon_path}
></ha-svg-icon>
`
: item.stateObj
? html`
<state-badge
slot="start"
.stateObj=${item.stateObj}
.hass=${this.hass}
></state-badge>
`
: nothing}
<span slot="headline">${item.primary} </span>
${item.secondary
? html`<span slot="supporting-text">${item.secondary}</span>`
: nothing}
${item.id && showEntityId
? html`<span slot="supporting-text" class="code">
${item.statistic_id}
</span>`
: nothing}
</ha-combo-box-item>
`;
};
private _getItems = memoizeOne(
(
@ -249,19 +246,22 @@ export class HaStatisticComboBox extends LitElement {
label: "",
type,
sorting_label: label,
iconPath: mdiShape,
search_labels: [label, id],
icon_path: mdiShape,
});
} else if (type === "external") {
const domain = id.split(":")[0];
const domainName = domainToName(this.hass.localize, domain);
output.push({
id,
statistic_id: id,
primary: label,
secondary: domainName,
label: "",
type,
sorting_label: label,
iconPath: mdiChartLine,
search_labels: [label, domainName, id],
icon_path: mdiChartLine,
});
}
}
@ -283,17 +283,20 @@ export class HaStatisticComboBox extends LitElement {
output.push({
id,
statistic_id: id,
label: "",
primary,
secondary,
label: "",
state: stateObj,
stateObj: stateObj,
type: "entity",
sorting_label: [deviceName, entityName].join("_"),
entity_name: entityName || deviceName,
area_name: areaName,
device_name: deviceName,
friendly_name: friendlyName,
show_entity_id: hass.userData?.showEntityIdPicker,
search_labels: [
entityName,
deviceName,
areaName,
friendlyName,
id,
].filter(Boolean) as string[],
});
});
@ -323,11 +326,12 @@ export class HaStatisticComboBox extends LitElement {
}
output.push({
id: "__missing",
id: MISSING_ID,
primary: this.hass.localize(
"ui.components.statistic-picker.missing_entity"
),
label: "",
icon_path: mdiHelpCircle,
});
return output;
@ -392,6 +396,9 @@ export class HaStatisticComboBox extends LitElement {
return html`
<ha-combo-box
item-id-path="id"
item-value-path="id"
item-label-path="label"
.hass=${this.hass}
.label=${this.label === undefined && this.hass
? this.hass.localize("ui.components.statistic-picker.statistic")
@ -401,9 +408,6 @@ export class HaStatisticComboBox extends LitElement {
.disabled=${this.disabled}
.allowCustomValue=${this.allowCustomEntity}
.filteredItems=${this._items}
item-value-path="id"
item-id-path="id"
item-label-path="label"
@opened-changed=${this._openedChanged}
@value-changed=${this._statisticChanged}
@filter-changed=${this._filterChanged}
@ -422,8 +426,12 @@ export class HaStatisticComboBox extends LitElement {
private _statisticChanged(ev: ValueChangedEvent<string>) {
ev.stopPropagation();
let newValue = ev.detail.value;
if (newValue === "__missing") {
if (newValue === MISSING_ID) {
newValue = "";
window.open(
documentationUrl(this.hass, this.helpMissingEntityUrl),
"_blank"
);
}
if (newValue !== this._value) {
@ -436,16 +444,7 @@ export class HaStatisticComboBox extends LitElement {
}
private _fuseIndex = memoizeOne((states: StatisticItem[]) =>
Fuse.createIndex(
[
"entity_name",
"device_name",
"area_name",
"friendly_name", // for backwards compatibility
"id", // for technical search
],
states
)
Fuse.createIndex(["search_labels"], states)
);
private _filterChanged(ev: CustomEvent): void {

2
src/components/ha-alert.ts
View File

@ -159,7 +159,7 @@ class HaAlert extends LitElement {
}
.title {
margin-top: 2px;
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.action mwc-button,
.action ha-icon-button {

2
src/components/ha-ansi-to-html.ts
View File

@ -56,7 +56,7 @@ export class HaAnsiToHtml extends LitElement {
overflow-wrap: break-word;
}
.bold {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.italic {
font-style: italic;

4
src/components/ha-assist-chat.ts
View File

@ -595,7 +595,7 @@ export class HaAssistChat extends LitElement {
}
.message {
white-space: pre-line;
font-size: 18px;
font-size: var(--ha-font-size-l);
clear: both;
margin: 8px 0;
padding: 8px;
@ -604,7 +604,7 @@ export class HaAssistChat extends LitElement {
@media all and (max-width: 450px), all and (max-height: 500px) {
.message {
font-size: 16px;
font-size: var(--ha-font-size-l);
}
}

6
src/components/ha-badge.ts
View File

@ -95,9 +95,9 @@ export class HaBadge extends LitElement {
text-align: center;
}
.label {
font-size: 10px;
font-size: var(--ha-font-size-xs);
font-style: normal;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
line-height: 10px;
letter-spacing: 0.1px;
color: var(--secondary-text-color);
@ -105,7 +105,7 @@ export class HaBadge extends LitElement {
.content {
font-size: var(--ha-badge-font-size, var(--ha-font-size-s));
font-style: normal;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
line-height: 16px;
letter-spacing: 0.1px;
color: var(--primary-text-color);

13
src/components/ha-base-time-input.ts
View File

@ -381,15 +381,18 @@ export class HaBaseTimeInput extends LitElement {
border-bottom-width: 1px;
}
label {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-webkit-font-smoothing: var(--ha-font-smoothing);
font-family: var(
--mdc-typography-body2-font-family,
var(--mdc-typography-font-family, Roboto, sans-serif)
var(--mdc-typography-font-family, var(--ha-font-family-body))
);
font-size: var(--mdc-typography-body2-font-size, 0.875rem);
font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
line-height: var(--mdc-typography-body2-line-height, 1.25rem);
font-weight: var(--mdc-typography-body2-font-weight, 400);
font-weight: var(
--mdc-typography-body2-font-weight,
var(--ha-font-weight-normal)
);
letter-spacing: var(
--mdc-typography-body2-letter-spacing,
0.0178571429em

4
src/components/ha-card.ts
View File

@ -41,14 +41,14 @@ export class HaCard extends LitElement {
:host ::slotted(.card-header) {
color: var(--ha-card-header-color, var(--primary-text-color));
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
letter-spacing: -0.012em;
line-height: 48px;
padding: 12px 16px 16px;
display: block;
margin-block-start: 0px;
margin-block-end: 0px;
font-weight: normal;
font-weight: var(--ha-font-weight-normal);
}
:host ::slotted(.card-content:not(:first-child)),

2
src/components/ha-climate-state.ts
View File

@ -154,7 +154,7 @@ class HaClimateState extends LitElement {
}
.state-label {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.unit {

18
src/components/ha-combo-box-item.ts
View File

@ -22,12 +22,12 @@ export class HaComboBoxItem extends HaMdListItem {
}
[slot="headline"] {
line-height: 22px;
font-size: 14px;
font-size: var(--ha-font-size-m);
white-space: nowrap;
}
[slot="supporting-text"] {
line-height: 18px;
font-size: 12px;
font-size: var(--ha-font-size-s);
white-space: nowrap;
}
::slotted(state-badge),
@ -35,6 +35,20 @@ export class HaComboBoxItem extends HaMdListItem {
width: 32px;
height: 32px;
}
::slotted(.code) {
font-family: var(--ha-font-family-code);
font-size: var(--ha-font-size-xs);
}
::slotted(.domain) {
font-size: var(--ha-font-size-s);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-normal);
align-self: flex-end;
max-width: 30%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
`,
];
}

4
src/components/ha-control-button.ts
View File

@ -58,8 +58,8 @@ export class HaControlButton extends LitElement {
padding: var(--control-button-padding);
box-sizing: border-box;
line-height: inherit;
font-family: Roboto;
font-weight: 500;
font-family: var(--ha-font-family-body);
font-weight: var(--ha-font-weight-medium);
outline: none;
overflow: hidden;
background: none;

2
src/components/ha-control-number-buttons.ts
View File

@ -194,7 +194,7 @@ export class HaControlNumberButton extends LitElement {
color: var(--primary-text-color);
-webkit-tap-highlight-color: transparent;
font-style: normal;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
transition: color 180ms ease-in-out;
}
:host([disabled]) {

4
src/components/ha-control-select-menu.ts
View File

@ -179,7 +179,7 @@ export class HaControlSelectMenu extends SelectBase {
--control-select-menu-padding: 6px 10px;
--mdc-icon-size: 20px;
--ha-ripple-color: var(--secondary-text-color);
font-size: 14px;
font-size: var(--ha-font-size-m);
line-height: 1.4;
width: auto;
color: var(--primary-text-color);
@ -208,7 +208,7 @@ export class HaControlSelectMenu extends SelectBase {
width: 100%;
user-select: none;
font-style: normal;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
letter-spacing: 0.25px;
}
.content {

2
src/components/ha-control-select.ts
View File

@ -207,7 +207,7 @@ export class HaControlSelect extends LitElement {
outline: none;
transition: box-shadow 180ms ease-in-out;
font-style: normal;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
color: var(--primary-text-color);
user-select: none;
-webkit-tap-highlight-color: transparent;

2
src/components/ha-control-slider.ts
View File

@ -368,7 +368,7 @@ export class HaControlSlider extends LitElement {
--control-slider-background-opacity: 0.2;
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
--control-slider-tooltip-font-size: 14px;
--control-slider-tooltip-font-size: var(--ha-font-size-m);
height: var(--control-slider-thickness);
width: 100%;
border-radius: var(--control-slider-border-radius);

6
src/components/ha-dialog-header.ts
View File

@ -53,12 +53,12 @@ export class HaDialogHeader extends LitElement {
white-space: nowrap;
}
.header-title {
font-size: 22px;
font-size: var(--ha-font-size-xl);
line-height: 28px;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
}
.header-subtitle {
font-size: 14px;
font-size: var(--ha-font-size-m);
line-height: 20px;
color: var(--secondary-text-color);
}

7
src/components/ha-dialog.ts
View File

@ -85,12 +85,12 @@ export class HaDialog extends DialogBase {
var(--dialog-backdrop-filter, none)
);
--mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
--mdc-typography-headline6-font-weight: 400;
--mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
--mdc-typography-headline6-font-size: 1.574rem;
}
.mdc-dialog__actions {
justify-content: var(--justify-action-buttons, flex-end);
padding-bottom: max(env(safe-area-inset-bottom), 24px);
padding: 12px 24px max(env(safe-area-inset-bottom), 12px) 24px;
}
.mdc-dialog__actions span:nth-child(1) {
flex: var(--secondary-action-button-flex, unset);
@ -107,9 +107,6 @@ export class HaDialog extends DialogBase {
.mdc-dialog__title:has(span) {
padding: 12px 12px 0;
}
.mdc-dialog__actions {
padding: 12px 24px 12px 24px;
}
.mdc-dialog__title::before {
content: unset;
}

4
src/components/ha-expansion-panel.ts
View File

@ -188,7 +188,7 @@ export class HaExpansionPanel extends LitElement {
align-items: center;
cursor: pointer;
overflow: hidden;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
outline: none;
}
#summary.noCollapse {
@ -218,7 +218,7 @@ export class HaExpansionPanel extends LitElement {
.secondary {
display: block;
color: var(--secondary-text-color);
font-size: 12px;
font-size: var(--ha-font-size-s);
}
`;
}

6
src/components/ha-file-upload.ts
View File

@ -294,7 +294,7 @@ export class HaFileUpload extends LitElement {
}
.supports {
color: var(--secondary-text-color);
font-size: 12px;
font-size: var(--ha-font-size-s);
}
:host([disabled]) .secondary {
color: var(--disabled-text-color);
@ -324,7 +324,7 @@ export class HaFileUpload extends LitElement {
box-sizing: border-box;
}
.header {
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
.progress {
color: var(--secondary-text-color);
@ -333,7 +333,7 @@ export class HaFileUpload extends LitElement {
background: none;
border: none;
padding: 0;
font-size: 14px;
font-size: var(--ha-font-size-m);
color: var(--primary-color);
text-decoration: underline;
cursor: pointer;

4
src/components/ha-filter-blueprints.ts
View File

@ -208,8 +208,8 @@ export class HaFilterBlueprints extends LitElement {
min-width: 16px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
font-size: 11px;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal);
background-color: var(--primary-color);
line-height: 16px;
text-align: center;

4
src/components/ha-filter-categories.ts
View File

@ -303,8 +303,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
min-width: 16px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
font-size: 11px;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal);
background-color: var(--primary-color);
line-height: 16px;
text-align: center;

4
src/components/ha-filter-devices.ts
View File

@ -232,8 +232,8 @@ export class HaFilterDevices extends LitElement {
min-width: 16px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
font-size: 11px;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal);
background-color: var(--primary-color);
line-height: 16px;
text-align: center;

4
src/components/ha-filter-domains.ts
View File

@ -189,8 +189,8 @@ export class HaFilterDomains extends LitElement {
min-width: 16px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
font-size: 11px;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal);
background-color: var(--primary-color);
line-height: 16px;
text-align: center;

4
src/components/ha-filter-entities.ts
View File

@ -246,8 +246,8 @@ export class HaFilterEntities extends LitElement {
min-width: 16px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
font-size: 11px;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal);
background-color: var(--primary-color);
line-height: 16px;
text-align: center;

4
src/components/ha-filter-floor-areas.ts
View File

@ -303,8 +303,8 @@ export class HaFilterFloorAreas extends LitElement {
min-width: 16px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
font-size: 11px;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal);
background-color: var(--primary-color);
line-height: 16px;
text-align: center;

4
src/components/ha-filter-integrations.ts
View File

@ -195,8 +195,8 @@ export class HaFilterIntegrations extends LitElement {
min-width: 16px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
font-size: 11px;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal);
background-color: var(--primary-color);
line-height: 16px;
text-align: center;

4
src/components/ha-filter-labels.ts
View File

@ -233,8 +233,8 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
min-width: 16px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
font-size: 11px;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal);
background-color: var(--primary-color);
line-height: 16px;
text-align: center;

4
src/components/ha-filter-states.ts
View File

@ -177,8 +177,8 @@ export class HaFilterStates extends LitElement {
min-width: 16px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
font-size: 11px;
font-size: var(--ha-font-size-xs);
font-weight: var(--ha-font-weight-normal);
background-color: var(--primary-color);
line-height: 16px;
text-align: center;

5
src/components/ha-form/ha-form-boolean.ts
View File

@ -71,7 +71,10 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
box-sizing: border-box;
color: var(--secondary-text-color);
font-size: 0.875rem;
font-weight: var(--mdc-typography-body2-font-weight, 400);
font-weight: var(
--mdc-typography-body2-font-weight,
var(--ha-font-weight-normal)
);
}
`;
}

2
src/components/ha-form/ha-form-constant.ts
View File

@ -20,7 +20,7 @@ export class HaFormConstant extends LitElement implements HaFormElement {
display: block;
}
.label {
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
`;
}

2
src/components/ha-header-bar.ts
View File

@ -46,7 +46,7 @@ export class HaHeaderBar extends LitElement {
flex: none;
}
.mdc-top-app-bar__title {
font-size: 20px;
font-size: var(--ha-font-size-xl);
padding-inline-start: 24px;
padding-inline-end: initial;
}

2
src/components/ha-heading-badge.ts
View File

@ -34,7 +34,7 @@ export class HaBadge extends LitElement {
align-items: center;
gap: 3px;
color: var(--ha-heading-badge-text-color, var(--secondary-text-color));
font-size: var(--ha-heading-badge-font-size, 14px);
font-size: var(--ha-heading-badge-font-size, var(--ha-font-size-m));
font-weight: var(--ha-heading-badge-font-weight, 400);
line-height: var(--ha-heading-badge-line-height, 20px);
letter-spacing: 0.1px;

2
src/components/ha-humidifier-state.ts
View File

@ -103,7 +103,7 @@ class HaHumidifierState extends LitElement {
}
.state-label {
font-weight: bold;
font-weight: var(--ha-font-weight-bold);
}
.unit {

7
src/components/ha-label-badge.ts
View File

@ -91,7 +91,7 @@ class HaLabelBadge extends LitElement {
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8% 16%; /* mostly apitalized text, not much descenders => bit more top margin */
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
overflow: hidden;
text-transform: uppercase;
text-overflow: ellipsis;
@ -102,7 +102,10 @@ class HaLabelBadge extends LitElement {
margin-top: 1em;
font-size: var(--ha-label-badge-title-font-size, 0.9em);
width: var(--ha-label-badge-title-width, 5em);
font-weight: var(--ha-label-badge-title-font-weight, 400);
font-weight: var(
--ha-label-badge-title-font-weight,
var(--ha-font-weight-normal)
);
overflow: hidden;
text-overflow: ellipsis;
line-height: normal;

4
src/components/ha-label.ts
View File

@ -32,8 +32,8 @@ class HaLabel extends LitElement {
display: inline-flex;
flex-direction: row;
align-items: center;
font-size: 12px;
font-weight: 500;
font-size: var(--ha-font-size-s);
font-weight: var(--ha-font-weight-medium);
line-height: 16px;
letter-spacing: 0.1px;
vertical-align: middle;

6
src/components/ha-markdown.ts
View File

@ -64,7 +64,7 @@ export class HaMarkdown extends LitElement {
color: var(--markdown-svg-color, none);
}
code {
font-size: 85%;
font-size: var(--ha-font-size-s);
padding: 0.2em 0.4em;
}
pre code {
@ -85,8 +85,8 @@ export class HaMarkdown extends LitElement {
line-height: initial;
}
h2 {
font-size: 1.5em;
font-weight: bold;
font-size: var(--ha-font-size-xl);
font-weight: var(--ha-font-weight-bold);
}
hr {
border-color: var(--divider-color);

7
src/components/ha-outlined-icon-button.ts
View File

@ -6,6 +6,13 @@ import { customElement } from "lit/decorators";
@customElement("ha-outlined-icon-button")
export class HaOutlinedIconButton extends IconButton {
protected override getRenderClasses() {
return {
...super.getRenderClasses(),
outlined: true,
};
}
static override styles = [
css`
.icon-button {

2
src/components/ha-outlined-text-field.ts
View File

@ -37,7 +37,7 @@ export class HaOutlinedTextField extends OutlinedTextField {
--mdc-icon-size: var(--md-input-chip-icon-size, 18px);
}
.input {
font-family: Roboto, sans-serif;
font-family: var(--ha-font-family-body);
}
`,
];

6
src/components/ha-select-box.ts
View File

@ -154,8 +154,8 @@ export class HaSelectBox extends LitElement {
}
.option .content .text .label {
color: var(--primary-text-color);
font-size: 14px;
font-weight: 400;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-normal);
line-height: 20px;
overflow: hidden;
white-space: nowrap;
@ -164,7 +164,7 @@ export class HaSelectBox extends LitElement {
.option .content .text .description {
color: var(--secondary-text-color);
font-size: 13px;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
line-height: 16px;
}
img {

2
src/components/ha-selector/ha-selector-action.ts
View File

@ -45,7 +45,7 @@ export class HaActionSelector extends LitElement {
label {
display: block;
margin-bottom: 4px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
`;
}

5
src/components/ha-selector/ha-selector-boolean.ts
View File

@ -62,7 +62,10 @@ export class HaBooleanSelector extends LitElement {
box-sizing: border-box;
color: var(--secondary-text-color);
font-size: 0.875rem;
font-weight: var(--mdc-typography-body2-font-weight, 400);
font-weight: var(
--mdc-typography-body2-font-weight,
var(--ha-font-weight-normal)
);
}
`;
}

2
src/components/ha-selector/ha-selector-condition.ts
View File

@ -36,7 +36,7 @@ export class HaConditionSelector extends LitElement {
label {
display: block;
margin-bottom: 4px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
`;
}

19
src/components/ha-selector/ha-selector-location.ts
View File

@ -11,6 +11,7 @@ import type { SchemaUnion } from "../ha-form/types";
import type { MarkerLocation } from "../map/ha-locations-editor";
import "../map/ha-locations-editor";
import "../ha-form/ha-form";
import type { LocalizeFunc } from "../../common/translations/localize";
@customElement("ha-selector-location")
export class HaLocationSelector extends LitElement {
@ -27,7 +28,7 @@ export class HaLocationSelector extends LitElement {
@property({ type: Boolean, reflect: true }) public disabled = false;
private _schema = memoizeOne(
(radius?: boolean, radius_readonly?: boolean) =>
(localize: LocalizeFunc, radius?: boolean, radius_readonly?: boolean) =>
[
{
name: "",
@ -36,12 +37,12 @@ export class HaLocationSelector extends LitElement {
{
name: "latitude",
required: true,
selector: { number: { step: "any" } },
selector: { number: { step: "any", unit_of_measurement: "°" } },
},
{
name: "longitude",
required: true,
selector: { number: { step: "any" } },
selector: { number: { step: "any", unit_of_measurement: "°" } },
},
],
},
@ -52,7 +53,16 @@ export class HaLocationSelector extends LitElement {
required: true,
default: 1000,
disabled: !!radius_readonly,
selector: { number: { min: 0, step: 1, mode: "box" } as const },
selector: {
number: {
min: 0,
step: 1,
mode: "box",
unit_of_measurement: localize(
"ui.components.selectors.location.radius_meters"
),
} as const,
},
} as const,
]
: []),
@ -84,6 +94,7 @@ export class HaLocationSelector extends LitElement {
<ha-form
.hass=${this.hass}
.schema=${this._schema(
this.hass.localize,
this.selector.location?.radius,
this.selector.location?.radius_readonly
)}

2
src/components/ha-selector/ha-selector-media.ts
View File

@ -247,7 +247,7 @@ export class HaMediaSelector extends LitElement {
--mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
}
.title {
font-size: 16px;
font-size: var(--ha-font-size-l);
padding-top: 16px;
overflow: hidden;
text-overflow: ellipsis;

2
src/components/ha-selector/ha-selector-selector.ts
View File

@ -290,7 +290,7 @@ export class HaSelectorSelector extends LitElement {
padding: 0px 16px 16px 16px;
}
.title {
font-size: 16px;
font-size: var(--ha-font-size-l);
padding-top: 16px;
overflow: hidden;
text-overflow: ellipsis;

2
src/components/ha-selector/ha-selector-trigger.ts
View File

@ -45,7 +45,7 @@ export class HaTriggerSelector extends LitElement {
label {
display: block;
margin-bottom: 4px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
`;
}

7
src/components/ha-service-control.ts
View File

@ -83,7 +83,7 @@ export class HaServiceControl extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean, reflect: true }) public narrow = false;
@property({ type: Boolean }) public narrow = false;
@property({ attribute: "show-advanced", type: Boolean }) public showAdvanced =
false;
@ -895,6 +895,9 @@ export class HaServiceControl extends LitElement {
ha-settings-row {
padding: var(--service-control-padding, 0 16px);
}
ha-settings-row[narrow] {
padding-bottom: 8px;
}
ha-settings-row {
--settings-row-content-width: 100%;
--settings-row-prefix-display: contents;
@ -916,7 +919,7 @@ export class HaServiceControl extends LitElement {
margin: var(--service-control-padding, 0 16px);
padding: 16px 0;
}
:host([hidePicker]) p {
:host([hide-picker]) p {
padding-top: 0;
}
.checkbox-spacer {

12
src/components/ha-settings-row.ts
View File

@ -66,11 +66,15 @@ export class HaSettingsRow extends LitElement {
padding-top: 4px;
font-family: var(
--mdc-typography-body2-font-family,
var(--mdc-typography-font-family, Roboto, sans-serif)
var(--mdc-typography-font-family, var(--ha-font-family-body))
);
font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
-webkit-font-smoothing: var(--ha-font-smoothing);
-moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
font-weight: var(
--mdc-typography-body2-font-weight,
var(--ha-font-weight-normal)
);
-webkit-font-smoothing: antialiased;
font-size: var(--mdc-typography-body2-font-size, 0.875rem);
font-weight: var(--mdc-typography-body2-font-weight, 400);
line-height: normal;
color: var(--secondary-text-color);
}

117
src/components/ha-sidebar.ts
View File

@ -24,9 +24,10 @@ import {
customElement,
eventOptions,
property,
state,
query,
state,
} from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one";
import { storage } from "../common/decorators/storage";
import { fireEvent } from "../common/dom/fire_event";
@ -45,14 +46,13 @@ import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant, PanelInfo, Route } from "../types";
import "./ha-icon";
import "./ha-icon-button";
import "./ha-md-list";
import "./ha-md-list-item";
import type { HaMdListItem } from "./ha-md-list-item";
import "./ha-menu-button";
import "./ha-sortable";
import "./ha-svg-icon";
import "./user/ha-user-badge";
import "./ha-md-list";
import "./ha-md-list-item";
import type { HaMdListItem } from "./ha-md-list-item";
import { showPromptDialog } from "../dialogs/generic/show-dialog-box";
const SHOW_AFTER_SPACER = ["config", "developer-tools"];
@ -408,6 +408,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
// prettier-ignore
return html`
<ha-sortable .disabled=${!this.editMode} draggable-selector=".draggable" @item-moved=${this._panelMoved}>
<ha-md-list
class="ha-scrollbar"
@focusin=${this._listboxFocusIn}
@ -421,16 +422,17 @@ class HaSidebar extends SubscribeMixin(LitElement) {
${this._renderSpacer()}
${this._renderPanels(afterSpacer, selectedPanel)}
${this._renderExternalConfiguration()}
</ha-md-list>
</ha-md-list>
</ha-sortable>
`;
}
private _renderPanels(
panels: PanelInfo[],
selectedPanel: string,
orderable = false
sortable = false
) {
return panels.map((panel, idx) =>
return panels.map((panel) =>
this._renderPanel(
panel.url_path,
panel.url_path === this.hass.defaultPanel
@ -443,18 +445,25 @@ class HaSidebar extends SubscribeMixin(LitElement) {
? PANEL_ICONS[panel.url_path]
: undefined,
selectedPanel,
orderable ? idx : null
sortable
)
);
}
private _renderPanelsEdit(beforeSpacer: PanelInfo[], selectedPanel: string) {
return html`
${this._renderPanels(beforeSpacer, selectedPanel, true)}
${this._renderSpacer()}${this._renderHiddenPanels()}
`;
}
private _renderPanel(
urlPath: string,
title: string | null,
icon: string | null | undefined,
iconPath: string | null | undefined,
selectedPanel: string,
index: number | null
sortable = false
) {
return urlPath === "config"
? this._renderConfiguration(title, selectedPanel)
@ -462,7 +471,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
<ha-md-list-item
.href=${this.editMode ? undefined : `/${urlPath}`}
type="link"
class=${selectedPanel === urlPath ? "selected" : ""}
class=${classMap({
selected: selectedPanel === urlPath,
draggable: this.editMode && sortable,
})}
@mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave}
>
@ -470,20 +482,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
? html`<ha-svg-icon slot="start" .path=${iconPath}></ha-svg-icon>`
: html`<ha-icon slot="start" .icon=${icon}></ha-icon>`}
<span class="item-text" slot="headline">${title}</span>
${index != null
? html`<ha-icon-button
@click=${this._changePosition}
.label=${this.hass!.localize("ui.sidebar.change_position")}
class="hide-panel"
slot="end"
.index=${index}
.title=${title}
>
<div class="position-badge">${index + 1}</div>
</ha-icon-button>`
: nothing}
${this.editMode
? html` <ha-icon-button
? html`<ha-icon-button
.label=${this.hass.localize("ui.sidebar.hide_panel")}
.path=${mdiClose}
class="hide-panel"
@ -499,10 +499,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
private _panelMoved(ev: CustomEvent) {
ev.stopPropagation();
const { oldIndex, newIndex } = ev.detail;
this._panelMove(oldIndex, newIndex);
}
private _panelMove(oldIndex: number, newIndex: number) {
const [beforeSpacer] = computePanels(
this.hass.panels,
this.hass.defaultPanel,
@ -518,15 +515,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
this._panelOrder = panelOrder;
}
private _renderPanelsEdit(beforeSpacer: PanelInfo[], selectedPanel: string) {
return html`
<ha-sortable .disabled=${!this.editMode} @item-moved=${this._panelMoved}
><div>${this._renderPanels(beforeSpacer, selectedPanel, true)}</div>
</ha-sortable>
${this._renderSpacer()}${this._renderHiddenPanels()}
`;
}
private _renderHiddenPanels() {
return html`${this._hiddenPanels.length
? html`${this._hiddenPanels.map((url) => {
@ -712,28 +700,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
fireEvent(this, "hass-edit-sidebar", { editMode: false });
}
private async _changePosition(ev): Promise<void> {
ev.preventDefault();
const oldIndex = (ev.currentTarget as any).index as number;
const name = ((ev.currentTarget as any).title as string) || "";
const positionString = await showPromptDialog(this, {
title: this.hass!.localize("ui.sidebar.change_position"),
text: this.hass!.localize("ui.sidebar.change_position_dialog_text", {
name,
}),
inputType: "number",
inputMin: "1",
placeholder: String(oldIndex + 1),
});
if (!positionString) return;
const position = parseInt(positionString);
if (isNaN(position)) return;
const newIndex = Math.max(0, position - 1);
this._panelMove(oldIndex, newIndex);
}
private async _hidePanel(ev: Event) {
ev.preventDefault();
const panel = (ev.currentTarget as any).panel;
@ -873,7 +839,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
padding: 0 4px;
border-bottom: 1px solid transparent;
white-space: nowrap;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
color: var(
--sidebar-menu-button-text-color,
var(--primary-text-color)
@ -883,7 +849,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
--sidebar-menu-button-background-color,
inherit
);
font-size: 20px;
font-size: var(--ha-font-size-xl);
align-items: center;
padding-left: calc(4px + env(safe-area-inset-left));
padding-inline-start: calc(4px + env(safe-area-inset-left));
@ -896,8 +862,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
color: var(--sidebar-icon-color);
}
.title {
margin-left: 19px;
margin-inline-start: 19px;
margin-left: 3px;
margin-inline-start: 3px;
margin-inline-end: initial;
width: 100%;
display: none;
@ -983,10 +949,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
ha-md-list-item .item-text {
font-family: var(--ha-font-family-body);
display: none;
max-width: 100%;
font-weight: 500;
font-size: 14px;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium);
}
:host([expanded]) ha-md-list-item .item-text {
display: block;
@ -1008,26 +974,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
align-items: center;
min-width: 8px;
border-radius: 10px;
font-weight: 400;
font-weight: var(--ha-font-weight-normal);
line-height: normal;
background-color: var(--accent-color);
padding: 2px 6px;
color: var(--text-accent-color, var(--text-primary-color));
}
.position-badge {
display: block;
width: 24px;
line-height: 24px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 500;
text-align: center;
font-size: 14px;
background-color: var(--app-header-edit-background-color, #455a64);
color: var(--app-header-edit-text-color, white);
}
ha-svg-icon + .badge {
position: absolute;
top: 4px;
@ -1055,8 +1008,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
.subheader {
color: var(--sidebar-text-color);
font-weight: 500;
font-size: 14px;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium);
padding: 16px;
white-space: nowrap;
}
@ -1070,7 +1023,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
color: var(--sidebar-background-color);
background-color: var(--sidebar-text-color);
padding: 4px;
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
.menu ha-icon-button {

2
src/components/ha-tip.ts
View File

@ -38,7 +38,7 @@ class HaTip extends LitElement {
}
.prefix {
font-weight: 500;
font-weight: var(--ha-font-weight-medium);
}
`;
}

4
src/components/ha-top-app-bar-fixed.ts
View File

@ -16,7 +16,7 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
padding-top: var(--header-height);
}
.mdc-top-app-bar {
--mdc-typography-headline6-font-weight: 400;
--mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
background-color: var(
--app-header-background-color,
@ -24,7 +24,7 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
);
}
.mdc-top-app-bar__title {
font-size: 20px;
font-size: var(--ha-font-size-xl);
padding-inline-start: 24px;
padding-inline-end: initial;
}

Some files were not shown because too many files have changed in this diff Show More