From c139ec22f949906e6036989169f2e488935043ab Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Fri, 24 Oct 2025 11:43:49 +0200 Subject: [PATCH] Use space vars (#27623) Co-authored-by: Aidan Timson --- src/components/ha-sidebar.ts | 82 +++++++++++++------- src/panels/config/labels/ha-config-labels.ts | 4 +- 2 files changed, 54 insertions(+), 32 deletions(-) diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 5ca3eafd38..593ec85856 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -29,6 +29,7 @@ import memoizeOne from "memoize-one"; import { fireEvent } from "../common/dom/fire_event"; import { toggleAttribute } from "../common/dom/toggle_attribute"; import { stringCompare } from "../common/string/compare"; +import { computeRTL } from "../common/util/compute_rtl"; import { throttle } from "../common/util/throttle"; import { subscribeFrontendUserData } from "../data/frontend"; import type { ActionHandlerDetail } from "../data/lovelace/action_handler"; @@ -536,11 +537,17 @@ class HaSidebar extends SubscribeMixin(LitElement) { } private _renderUserItem(selectedPanel: string) { + const isRTL = computeRTL(this.hass); + return html` @@ -666,7 +673,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { tooltip.style.display = "block"; tooltip.style.position = "fixed"; tooltip.style.top = `${top}px`; - tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, 0px))`; + tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, var(--ha-space-0)))`; } private _hideTooltip() { @@ -705,13 +712,17 @@ class HaSidebar extends SubscribeMixin(LitElement) { background-color: var(--sidebar-background-color); width: 100%; box-sizing: border-box; - padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px)); + padding-bottom: calc( + 14px + var(--safe-area-inset-bottom, var(--ha-space-0)) + ); } .menu { - height: calc(var(--header-height) + var(--safe-area-inset-top, 0px)); + height: calc( + var(--header-height) + var(--safe-area-inset-top, var(--ha-space-0)) + ); box-sizing: border-box; display: flex; - padding: 0 4px; + padding: 0 var(--ha-space-1); border-bottom: 1px solid transparent; white-space: nowrap; font-weight: var(--ha-font-weight-normal); @@ -726,13 +737,17 @@ class HaSidebar extends SubscribeMixin(LitElement) { ); font-size: var(--ha-font-size-xl); align-items: center; - padding-left: calc(4px + var(--safe-area-inset-left, 0px)); - padding-inline-start: calc(4px + var(--safe-area-inset-left, 0px)); + padding-left: calc( + var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0)) + ); + padding-inline-start: calc( + var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0)) + ); padding-inline-end: initial; - padding-top: var(--safe-area-inset-top, 0px); + padding-top: var(--safe-area-inset-top, var(--ha-space-0)); } :host([expanded]) .menu { - width: calc(256px + var(--safe-area-inset-left, 0px)); + width: calc(256px + var(--safe-area-inset-left, var(--ha-space-0))); } :host([narrow][expanded]) .menu { width: 100%; @@ -748,8 +763,8 @@ class HaSidebar extends SubscribeMixin(LitElement) { display: none; } :host([narrow]) .title { - margin: 0; - padding: 0 16px; + margin: var(--ha-space-0); + padding: var(--ha-space-0) var(--ha-space-4); } :host([expanded]) .title { display: initial; @@ -761,13 +776,16 @@ class HaSidebar extends SubscribeMixin(LitElement) { ha-fade-in, ha-md-list { height: calc( - 100% - var(--header-height) - var(--safe-area-inset-top, 0px) - + 100% - var(--header-height) - var( + --safe-area-inset-top, + var(--ha-space-0) + ) - 132px ); } ha-fade-in { - padding: 4px 0; + padding: var(--ha-space-1) var(--ha-space-0); box-sizing: border-box; display: flex; justify-content: center; @@ -777,29 +795,29 @@ class HaSidebar extends SubscribeMixin(LitElement) { ha-md-list { overflow-x: hidden; background: none; - margin-left: var(--safe-area-inset-left, 0px); + margin-left: var(--safe-area-inset-left, var(--ha-space-0)); } ha-md-list-item { flex-shrink: 0; box-sizing: border-box; - margin: 4px; + margin: var(--ha-space-1); border-radius: var(--ha-border-radius-sm); - --md-list-item-one-line-container-height: 40px; + --md-list-item-one-line-container-height: var(--ha-space-10); --md-list-item-top-space: 0; --md-list-item-bottom-space: 0; - width: 48px; + width: var(--ha-space-12); position: relative; --md-list-item-label-text-color: var(--sidebar-text-color); - --md-list-item-leading-space: 12px; - --md-list-item-trailing-space: 12px; - --md-list-item-leading-icon-size: 24px; + --md-list-item-leading-space: var(--ha-space-3); + --md-list-item-trailing-space: var(--ha-space-3); + --md-list-item-leading-icon-size: var(--ha-space-6); } :host([expanded]) ha-md-list-item { width: 248px; } :host([narrow][expanded]) ha-md-list-item { - width: calc(240px - var(--safe-area-inset-left, 0px)); + width: calc(240px - var(--safe-area-inset-left, var(--ha-space-0))); } ha-md-list-item.selected { @@ -823,7 +841,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { ha-icon[slot="start"], ha-svg-icon[slot="start"] { - width: 24px; + width: var(--ha-space-6); flex-shrink: 0; color: var(--sidebar-icon-color); } @@ -856,7 +874,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { display: flex; justify-content: center; align-items: center; - min-width: 8px; + min-width: var(--ha-space-2); border-radius: var(--ha-border-radius-xl); font-weight: var(--ha-font-weight-normal); line-height: normal; @@ -867,22 +885,26 @@ class HaSidebar extends SubscribeMixin(LitElement) { ha-svg-icon + .badge { position: absolute; - top: 4px; + top: var(--ha-space-1); left: 26px; border-radius: var(--ha-border-radius-md); font-size: 0.65em; line-height: var(--ha-line-height-expanded); - padding: 0 4px; + padding: var(--ha-space-0) var(--ha-space-1); } ha-md-list-item.user { - --md-list-item-leading-icon-size: 40px; - --md-list-item-leading-space: 4px; + --md-list-item-leading-icon-size: var(--ha-space-10); + --md-list-item-leading-space: var(--ha-space-1); + } + + ha-md-list-item.user.rtl { + --md-list-item-leading-space: var(--ha-space-3); } ha-user-badge { flex-shrink: 0; - margin-right: -8px; + margin-right: calc(var(--ha-space-2) * -1); } .spacer { @@ -894,7 +916,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { color: var(--sidebar-text-color); font-size: var(--ha-font-size-m); font-weight: var(--ha-font-weight-medium); - padding: 16px; + padding: var(--ha-space-4); white-space: nowrap; } @@ -906,7 +928,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { white-space: nowrap; color: var(--sidebar-background-color); background-color: var(--sidebar-text-color); - padding: 4px; + padding: var(--ha-space-1); font-weight: var(--ha-font-weight-medium); } diff --git a/src/panels/config/labels/ha-config-labels.ts b/src/panels/config/labels/ha-config-labels.ts index 40c7bdb0b7..aef7f72d1d 100644 --- a/src/panels/config/labels/ha-config-labels.ts +++ b/src/panels/config/labels/ha-config-labels.ts @@ -115,8 +115,8 @@ export class HaConfigLabels extends LitElement { borderRadius: "var(--ha-border-radius-md)", border: "1px solid var(--outline-color)", boxSizing: "border-box", - width: "20px", - height: "20px", + width: "var(--ha-space-5)", + height: "var(--ha-space-5)", })} >` : nothing,