From fdd66b5cecd7c15b772deb709bc51fe89b3910bf Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Fri, 3 Oct 2025 13:11:30 +0200 Subject: [PATCH] Use border radius design tokens in codebase (#27169) Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com> --- cast/src/launcher/layout/hc-cast.ts | 2 +- cast/src/launcher/layout/hc-layout.ts | 3 ++- gallery/src/ha-gallery.ts | 4 +-- .../src/pages/components/ha-control-button.ts | 10 +++---- .../components/ha-control-number-buttons.ts | 6 ++--- .../components/ha-control-select-menu.ts | 2 +- .../src/pages/components/ha-control-select.ts | 2 +- .../src/pages/components/ha-control-slider.ts | 4 +-- .../src/pages/components/ha-control-switch.ts | 4 +-- gallery/src/pages/components/ha-select-box.ts | 2 +- gallery/src/pages/components/ha-slider.ts | 2 +- gallery/src/pages/components/ha-spinner.ts | 2 +- gallery/src/pages/misc/entity-state.ts | 4 +-- hassio/src/components/hassio-card-content.ts | 2 +- .../hardware/dialog-hassio-hardware.ts | 2 +- .../registries/dialog-hassio-registries.ts | 2 +- .../dialog-hassio-repositories.ts | 2 +- .../src/components/landing-page-logs.ts | 2 +- landing-page/src/ha-landing-page.ts | 2 +- src/auth/ha-authorize.ts | 7 +++-- src/components/chart/ha-chart-base.ts | 12 ++++----- .../data-table/dialog-data-table-settings.ts | 4 ++- src/components/data-table/ha-data-table.ts | 2 +- src/components/date-range-picker.ts | 20 +++++++------- src/components/entity/state-badge.ts | 2 +- src/components/ha-alert.ts | 2 +- src/components/ha-assist-chat.ts | 18 ++++++------- src/components/ha-badge.ts | 2 +- src/components/ha-bar.ts | 2 +- src/components/ha-base-time-input.ts | 4 ++- src/components/ha-card.ts | 2 +- .../ha-code-editor-completion-items.ts | 2 +- src/components/ha-code-editor.ts | 12 ++++----- src/components/ha-color-picker.ts | 2 +- src/components/ha-control-button.ts | 2 +- src/components/ha-control-number-buttons.ts | 2 +- src/components/ha-control-select-menu.ts | 2 +- src/components/ha-control-slider.ts | 4 +-- src/components/ha-control-switch.ts | 2 +- src/components/ha-dialog.ts | 5 +++- src/components/ha-expansion-panel.ts | 4 +-- src/components/ha-file-upload.ts | 2 +- src/components/ha-filter-blueprints.ts | 6 ++--- src/components/ha-filter-categories.ts | 10 +++---- src/components/ha-filter-devices.ts | 4 +-- src/components/ha-filter-domains.ts | 4 +-- src/components/ha-filter-entities.ts | 6 ++--- src/components/ha-filter-floor-areas.ts | 6 ++--- src/components/ha-filter-integrations.ts | 6 ++--- src/components/ha-filter-labels.ts | 4 +-- src/components/ha-filter-states.ts | 4 +-- src/components/ha-form/ha-form-expandable.ts | 4 +-- src/components/ha-grid-size-picker.ts | 2 +- src/components/ha-hs-color-picker.ts | 2 +- src/components/ha-icon-button-group.ts | 2 +- src/components/ha-icon-button-toggle.ts | 2 +- src/components/ha-items-display-editor.ts | 2 +- src/components/ha-label-badge.ts | 2 +- src/components/ha-label.ts | 4 +-- src/components/ha-labeled-slider.ts | 2 +- src/components/ha-markdown.ts | 2 +- src/components/ha-menu-button.ts | 2 +- src/components/ha-navigation-list.ts | 4 +-- src/components/ha-picker-field.ts | 2 +- src/components/ha-qr-scanner.ts | 4 +-- src/components/ha-resizable-bottom-sheet.ts | 2 +- src/components/ha-segmented-bar.ts | 4 +-- src/components/ha-select-box.ts | 12 ++++----- .../ha-selector/ha-selector-media.ts | 4 +-- .../ha-selector/ha-selector-object.ts | 2 +- src/components/ha-service-control.ts | 6 ++--- src/components/ha-sidebar.ts | 10 +++---- src/components/ha-slider.ts | 5 +++- src/components/ha-sortable.ts | 4 +-- src/components/ha-target-picker.ts | 4 +-- src/components/ha-tooltip.ts | 5 +++- src/components/ha-yaml-editor.ts | 17 ++++++------ src/components/map/ha-map.ts | 12 ++++----- .../media-player/ha-media-player-browse.ts | 17 ++++++------ src/components/tile/ha-tile-badge.ts | 2 +- src/components/trace/ha-timeline.ts | 2 +- src/components/user/ha-person-badge.ts | 4 +-- src/components/user/ha-user-badge.ts | 4 +-- .../config-flow/step-flow-create-entry.ts | 2 +- src/dialogs/enter-code/dialog-enter-code.ts | 2 +- .../image-cropper-dialog.ts | 8 +++--- .../lights/dialog-light-color-favorite.ts | 2 +- .../lights/ha-favorite-color-button.ts | 4 +-- .../ha-more-info-light-favorite-colors.ts | 2 +- .../lights/light-color-temp-picker.ts | 4 +-- .../ha-more-info-siren-advanced-controls.ts | 26 +++++++++---------- .../controls/more-info-alarm_control_panel.ts | 6 ++--- .../more-info/controls/more-info-light.ts | 4 +-- .../more-info/controls/more-info-lock.ts | 6 ++--- .../controls/more-info-media_player.ts | 4 +-- .../more-info/controls/more-info-script.ts | 2 +- src/dialogs/more-info/ha-more-info-dialog.ts | 2 +- src/dialogs/restart/dialog-restart.ts | 4 +-- src/dialogs/shortcuts/dialog-shortcuts.ts | 2 +- .../cloud/cloud-step-intro.ts | 2 +- .../voice-assistant-setup-step-pipeline.ts | 6 +++-- src/layouts/hass-tabs-subpage-data-table.ts | 6 ++--- src/onboarding/ha-onboarding.ts | 2 +- src/onboarding/onboarding-loading.ts | 2 +- src/onboarding/onboarding-welcome-link.ts | 2 +- src/panels/calendar/ha-full-calendar.ts | 11 ++++---- src/panels/calendar/ha-panel-calendar.ts | 2 +- .../config/areas/ha-config-area-page.ts | 15 ++++++----- .../config/automation/ha-automation-editor.ts | 2 +- .../automation/ha-automation-sidebar.ts | 2 +- src/panels/config/automation/styles.ts | 2 +- .../config/ha-backup-config-agents.ts | 4 +-- .../components/ha-backup-summary-card.ts | 4 +-- .../overview/ha-backup-overview-onboarding.ts | 2 +- .../overview/ha-backup-overview-summary.ts | 2 +- .../dialogs/dialog-backup-onboarding.ts | 2 +- .../dialog-change-backup-encryption-key.ts | 2 +- .../dialog-set-backup-encryption-key.ts | 2 +- .../dialog-show-backup-encryption-key.ts | 2 +- .../config/backup/ha-config-backup-details.ts | 14 +++++----- .../backup/ha-config-backup-location.ts | 2 +- .../account/dialog-cloud-support-package.ts | 8 +++--- .../core/ha-config-system-navigation.ts | 2 +- src/panels/config/dashboard/dashboard-card.ts | 4 +-- .../config/dashboard/ha-config-dashboard.ts | 4 +-- .../matter/ha-device-info-matter.ts | 2 +- .../config/devices/ha-config-device-page.ts | 7 +++-- .../entity-registry-settings-editor.ts | 2 +- .../hardware/dialog-hardware-available.ts | 2 +- .../helpers/forms/ha-input_select-form.ts | 2 +- .../config/helpers/forms/ha-schedule-form.ts | 3 +-- src/panels/config/info/ha-config-info.ts | 4 +-- .../integrations/ha-config-entry-row.ts | 8 +++--- .../ha-config-integration-page.ts | 2 +- .../ha-config-integrations-dashboard.ts | 2 +- .../integrations/ha-config-sub-entry-row.ts | 2 +- ...dialog-matter-open-commissioning-window.ts | 8 +++--- .../matter-add-device-existing.ts | 4 +-- .../thread/thread-config-panel.ts | 4 +-- .../zha/zha-device-pairing-status-card.ts | 4 +-- .../add-node/dialog-zwave_js-add-node.ts | 2 +- .../zwave-js-add-node-searching-devices.ts | 2 +- src/panels/config/labels/ha-config-labels.ts | 4 +-- .../config/person/dialog-person-detail.ts | 6 ++--- .../repairs/integrations-startup-time.ts | 2 +- src/panels/config/script/ha-script-editor.ts | 2 +- .../config/script/ha-script-field-row.ts | 4 +-- .../storage/ha-config-section-storage.ts | 8 +++--- src/panels/config/tags/tag-image.ts | 4 +-- .../assist-pipeline-detail-config.ts | 4 +-- .../assist-pipeline-detail-conversation.ts | 6 ++--- .../assist-pipeline-detail-stt.ts | 4 +-- .../assist-pipeline-detail-tts.ts | 2 +- .../assist-pipeline-detail-wakeword.ts | 6 ++--- .../config/voice-assistants/cloud-discover.ts | 8 +++--- .../debug/assist-render-pipeline-run.ts | 2 +- .../voice-assistants/dialog-expose-entity.ts | 2 +- .../statistics/developer-tools-statistics.ts | 14 +++++----- .../template/developer-tools-template.ts | 11 +++++--- src/panels/logbook/ha-logbook-renderer.ts | 2 +- src/panels/lovelace/badges/hui-view-badges.ts | 2 +- .../cards/clock/hui-clock-card-analog.ts | 10 +++---- .../energy/hui-energy-distribution-card.ts | 16 ++++++------ .../energy/hui-energy-sources-table-card.ts | 2 +- .../lovelace/cards/hui-alarm-panel-card.ts | 2 +- src/panels/lovelace/cards/hui-area-card.ts | 6 ++--- .../lovelace/cards/hui-entities-card.ts | 20 +++++++++++--- src/panels/lovelace/cards/hui-error-card.ts | 2 +- src/panels/lovelace/cards/hui-glance-card.ts | 4 +-- .../lovelace/cards/hui-home-summary-card.ts | 2 +- .../lovelace/cards/hui-humidifier-card.ts | 2 +- src/panels/lovelace/cards/hui-light-card.ts | 4 +-- src/panels/lovelace/cards/hui-map-card.ts | 2 +- .../lovelace/cards/hui-plant-status-card.ts | 2 +- .../lovelace/cards/hui-thermostat-card.ts | 4 +-- src/panels/lovelace/cards/hui-tile-card.ts | 4 +-- .../components/hui-badge-edit-mode.ts | 14 +++++++--- .../lovelace/components/hui-card-edit-mode.ts | 14 +++++++--- .../lovelace/components/hui-card-options.ts | 4 +-- .../components/hui-section-edit-mode.ts | 10 +++++-- .../editor/badge-editor/hui-badge-picker.ts | 12 ++++++--- .../badge-editor/hui-dialog-edit-badge.ts | 2 +- .../card-editor/ha-grid-layout-slider.ts | 4 +-- .../editor/card-editor/hui-card-picker.ts | 6 ++--- .../card-editor/hui-dialog-edit-card.ts | 2 +- .../conditions/ha-card-condition-editor.ts | 14 +++++++--- .../config-elements/config-elements-style.ts | 4 +-- .../unused-entities/hui-unused-entities.ts | 2 +- .../view-editor/hui-view-background-editor.ts | 2 +- .../lovelace/elements/hui-icon-element.ts | 6 ++--- .../lovelace/elements/hui-image-element.ts | 4 +-- .../elements/hui-state-icon-element.ts | 10 +++---- .../elements/hui-state-label-element.ts | 8 +++--- .../entity-rows/hui-weather-entity-row.ts | 2 +- src/panels/lovelace/hui-root.ts | 2 +- .../lovelace/sections/hui-grid-section.ts | 15 ++++++++--- src/panels/lovelace/views/hui-panel-view.ts | 9 ++++--- .../lovelace/views/hui-sections-view.ts | 8 +++--- src/panels/lovelace/views/hui-view-header.ts | 10 +++---- src/panels/profile/ha-refresh-tokens-card.ts | 2 +- src/resources/styles.ts | 5 ++-- ...state-control-alarm_control_panel-modes.ts | 2 +- .../cover/ha-state-control-cover-buttons.ts | 2 +- .../cover/ha-state-control-cover-position.ts | 2 +- .../ha-state-control-cover-tilt-position.ts | 2 +- .../cover/ha-state-control-cover-toggle.ts | 4 +-- .../fan/ha-state-control-fan-speed.ts | 4 +-- src/state-control/ha-state-control-toggle.ts | 4 +-- .../ha-state-control-light-brightness.ts | 2 +- .../lock/ha-state-control-lock-toggle.ts | 6 ++--- .../valve/ha-state-control-valve-buttons.ts | 2 +- .../valve/ha-state-control-valve-position.ts | 2 +- .../valve/ha-state-control-valve-toggle.ts | 4 +-- 213 files changed, 544 insertions(+), 463 deletions(-) diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts index 35e214f0b1..9a15f58f44 100644 --- a/cast/src/launcher/layout/hc-cast.ts +++ b/cast/src/launcher/layout/hc-cast.ts @@ -242,7 +242,7 @@ class HcCast extends LitElement { } .question:before { - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); position: absolute; top: 0; right: 0; diff --git a/cast/src/launcher/layout/hc-layout.ts b/cast/src/launcher/layout/hc-layout.ts index c34a10f874..31c4704ec0 100644 --- a/cast/src/launcher/layout/hc-layout.ts +++ b/cast/src/launcher/layout/hc-layout.ts @@ -95,7 +95,8 @@ class HcLayout extends LitElement { } .hero { - border-radius: 4px 4px 0 0; + border-radius: var(--ha-border-radius-sm) var(--ha-border-radius-sm) + var(--ha-border-radius-square) var(--ha-border-radius-square); } .subtitle { font-size: var(--ha-font-size-m); diff --git a/gallery/src/ha-gallery.ts b/gallery/src/ha-gallery.ts index b4d227488d..8e6c6ed246 100644 --- a/gallery/src/ha-gallery.ts +++ b/gallery/src/ha-gallery.ts @@ -208,7 +208,7 @@ class HaGallery extends LitElement { } .sidebar a[active]::before { - border-radius: 12px; + border-radius: var(--ha-border-radius-lg); position: absolute; top: 0; right: 2px; @@ -241,7 +241,7 @@ class HaGallery extends LitElement { text-align: center; margin: 16px; padding: 16px; - border-radius: 12px; + border-radius: var(--ha-border-radius-lg); background-color: var(--primary-background-color); } diff --git a/gallery/src/pages/components/ha-control-button.ts b/gallery/src/pages/components/ha-control-button.ts index 5d2daf09fc..23708d2e2a 100644 --- a/gallery/src/pages/components/ha-control-button.ts +++ b/gallery/src/pages/components/ha-control-button.ts @@ -9,10 +9,10 @@ import { css, html, LitElement } from "lit"; import { customElement } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import { repeat } from "lit/directives/repeat"; -import "../../../../src/components/ha-control-button"; import "../../../../src/components/ha-card"; -import "../../../../src/components/ha-svg-icon"; +import "../../../../src/components/ha-control-button"; import "../../../../src/components/ha-control-button-group"; +import "../../../../src/components/ha-svg-icon"; interface Button { label: string; @@ -156,17 +156,17 @@ export class DemoHaBarButton extends LitElement { --control-button-icon-color: var(--primary-color); --control-button-background-color: var(--primary-color); --control-button-background-opacity: 0.2; - --control-button-border-radius: 18px; + --control-button-border-radius: var(--ha-border-radius-xl); height: 100px; width: 100px; } .custom-group { --control-button-group-thickness: 100px; - --control-button-group-border-radius: 36px; + --control-button-group-border-radius: var(--ha-border-radius-6xl); --control-button-group-spacing: 20px; } .custom-group ha-control-button { - --control-button-border-radius: 18px; + --control-button-border-radius: var(--ha-border-radius-xl); --mdc-icon-size: 32px; } .vertical-buttons { diff --git a/gallery/src/pages/components/ha-control-number-buttons.ts b/gallery/src/pages/components/ha-control-number-buttons.ts index 1b99117a50..e681f97f77 100644 --- a/gallery/src/pages/components/ha-control-number-buttons.ts +++ b/gallery/src/pages/components/ha-control-number-buttons.ts @@ -1,10 +1,10 @@ import type { TemplateResult } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; +import { ifDefined } from "lit/directives/if-defined"; +import { repeat } from "lit/directives/repeat"; import "../../../../src/components/ha-card"; import "../../../../src/components/ha-control-number-buttons"; -import { repeat } from "lit/directives/repeat"; -import { ifDefined } from "lit/directives/if-defined"; const buttons: { id: string; @@ -94,7 +94,7 @@ export class DemoHarControlNumberButtons extends LitElement { --control-number-buttons-background-color: #2196f3; --control-number-buttons-background-opacity: 0.1; --control-number-buttons-thickness: 100px; - --control-number-buttons-border-radius: 36px; + --control-number-buttons-border-radius: var(--ha-border-radius-6xl); } `; } diff --git a/gallery/src/pages/components/ha-control-select-menu.ts b/gallery/src/pages/components/ha-control-select-menu.ts index 6050c2639b..6ffe5d5d54 100644 --- a/gallery/src/pages/components/ha-control-select-menu.ts +++ b/gallery/src/pages/components/ha-control-select-menu.ts @@ -131,7 +131,7 @@ export class DemoHaControlSelectMenu extends LitElement { --control-button-icon-color: var(--primary-color); --control-button-background-color: var(--primary-color); --control-button-background-opacity: 0.2; - --control-button-border-radius: 18px; + --control-button-border-radius: var(--ha-border-radius-xl); height: 100px; width: 100px; } diff --git a/gallery/src/pages/components/ha-control-select.ts b/gallery/src/pages/components/ha-control-select.ts index 160c8dfc41..d0ebb56b35 100644 --- a/gallery/src/pages/components/ha-control-select.ts +++ b/gallery/src/pages/components/ha-control-select.ts @@ -187,7 +187,7 @@ export class DemoHaControlSelect extends LitElement { --mdc-icon-size: 24px; --control-select-color: var(--state-fan-active-color); --control-select-thickness: 130px; - --control-select-border-radius: 36px; + --control-select-border-radius: var(--ha-border-radius-6xl); } .vertical-selects { height: 300px; diff --git a/gallery/src/pages/components/ha-control-slider.ts b/gallery/src/pages/components/ha-control-slider.ts index ed2237a561..6647c00882 100644 --- a/gallery/src/pages/components/ha-control-slider.ts +++ b/gallery/src/pages/components/ha-control-slider.ts @@ -3,8 +3,8 @@ import { css, html, LitElement } from "lit"; import { customElement, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import { repeat } from "lit/directives/repeat"; -import "../../../../src/components/ha-control-slider"; import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-control-slider"; const sliders: { id: string; @@ -151,7 +151,7 @@ export class DemoHaBarSlider extends LitElement { --control-slider-background: #ffcf4c; --control-slider-background-opacity: 0.2; --control-slider-thickness: 130px; - --control-slider-border-radius: 36px; + --control-slider-border-radius: var(--ha-border-radius-6xl); } .vertical-sliders { height: 300px; diff --git a/gallery/src/pages/components/ha-control-switch.ts b/gallery/src/pages/components/ha-control-switch.ts index 83252764b9..46e47bbdb1 100644 --- a/gallery/src/pages/components/ha-control-switch.ts +++ b/gallery/src/pages/components/ha-control-switch.ts @@ -9,8 +9,8 @@ import { css, html, LitElement } from "lit"; import { customElement, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import { repeat } from "lit/directives/repeat"; -import "../../../../src/components/ha-control-switch"; import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-control-switch"; const switches: { id: string; @@ -118,7 +118,7 @@ export class DemoHaControlSwitch extends LitElement { --control-switch-on-color: var(--green-color); --control-switch-off-color: var(--red-color); --control-switch-thickness: 130px; - --control-switch-border-radius: 36px; + --control-switch-border-radius: var(--ha-border-radius-6xl); --control-switch-padding: 6px; --mdc-icon-size: 24px; } diff --git a/gallery/src/pages/components/ha-select-box.ts b/gallery/src/pages/components/ha-select-box.ts index 9cc5320424..112eb80c8e 100644 --- a/gallery/src/pages/components/ha-select-box.ts +++ b/gallery/src/pages/components/ha-select-box.ts @@ -131,7 +131,7 @@ export class DemoHaSelectBox extends LitElement { --mdc-icon-size: 24px; --control-select-color: var(--state-fan-active-color); --control-select-thickness: 130px; - --control-select-border-radius: 36px; + --control-select-border-radius: var(--ha-border-radius-6xl); } p.title { diff --git a/gallery/src/pages/components/ha-slider.ts b/gallery/src/pages/components/ha-slider.ts index 8325970ef1..492f5aa3d4 100644 --- a/gallery/src/pages/components/ha-slider.ts +++ b/gallery/src/pages/components/ha-slider.ts @@ -79,7 +79,7 @@ export class DemoHaSlider extends LitElement { background-color: var(--primary-background-color); padding: 0 50px; margin: 16px; - border-radius: 8px; + border-radius: var(--ha-border-radius-md); } ha-card { margin: 24px auto; diff --git a/gallery/src/pages/components/ha-spinner.ts b/gallery/src/pages/components/ha-spinner.ts index 2b4c47bb9f..721d88fdc8 100644 --- a/gallery/src/pages/components/ha-spinner.ts +++ b/gallery/src/pages/components/ha-spinner.ts @@ -61,7 +61,7 @@ export class DemoHaSpinner extends LitElement { background-color: var(--primary-background-color); padding: 0 50px; margin: 16px; - border-radius: 8px; + border-radius: var(--ha-border-radius-md); } ha-card { margin: 24px auto; diff --git a/gallery/src/pages/misc/entity-state.ts b/gallery/src/pages/misc/entity-state.ts index d23fb48083..8d1fa8a020 100644 --- a/gallery/src/pages/misc/entity-state.ts +++ b/gallery/src/pages/misc/entity-state.ts @@ -5,13 +5,13 @@ import type { import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; +import { mockIcons } from "../../../../demo/src/stubs/icons"; import { computeDomain } from "../../../../src/common/entity/compute_domain"; import { computeStateDisplay } from "../../../../src/common/entity/compute_state_display"; import "../../../../src/components/data-table/ha-data-table"; import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table"; import "../../../../src/components/entity/state-badge"; import { provideHass } from "../../../../src/fake_data/provide_hass"; -import { mockIcons } from "../../../../demo/src/stubs/icons"; import type { HomeAssistant } from "../../../../src/types"; const SENSOR_DEVICE_CLASSES = [ @@ -434,7 +434,7 @@ export class DemoEntityState extends LitElement { display: block; height: 20px; width: 20px; - border-radius: 10px; + border-radius: var(--ha-border-radius-md); background-color: rgb(--color); } `; diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts index 457df0437f..9343022093 100644 --- a/hassio/src/components/hassio-card-content.ts +++ b/hassio/src/components/hassio-card-content.ts @@ -121,7 +121,7 @@ class HassioCardContent extends LitElement { height: 12px; top: 8px; right: 8px; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } .topbar { position: absolute; diff --git a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts index dbf4aee778..440a6c44c1 100644 --- a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts +++ b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts @@ -164,7 +164,7 @@ class HassioHardwareDialog extends LitElement { pre, code { background-color: var(--markdown-code-background-color, none); - border-radius: 3px; + border-radius: var(--ha-border-radius-sm); } pre { padding: 16px; diff --git a/hassio/src/dialogs/registries/dialog-hassio-registries.ts b/hassio/src/dialogs/registries/dialog-hassio-registries.ts index bda973eee3..ec17ee60c0 100644 --- a/hassio/src/dialogs/registries/dialog-hassio-registries.ts +++ b/hassio/src/dialogs/registries/dialog-hassio-registries.ts @@ -228,7 +228,7 @@ class HassioRegistriesDialog extends LitElement { css` .registry { border: 1px solid var(--divider-color); - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); margin-top: 4px; } .action { diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index 93ad4121d6..a0ab5f35f6 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -193,7 +193,7 @@ class HassioRepositoriesDialog extends LitElement { } .option { border: 1px solid var(--divider-color); - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); margin-top: 4px; } ha-button { diff --git a/landing-page/src/components/landing-page-logs.ts b/landing-page/src/components/landing-page-logs.ts index a8c4016eed..44660d3b69 100644 --- a/landing-page/src/components/landing-page-logs.ts +++ b/landing-page/src/components/landing-page-logs.ts @@ -302,7 +302,7 @@ class LandingPageLogs extends LitElement { max-height: 300px; overflow: auto; border: 1px solid var(--divider-color); - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); padding: 4px; } diff --git a/landing-page/src/ha-landing-page.ts b/landing-page/src/ha-landing-page.ts index 4960c169c6..a8601b82b8 100644 --- a/landing-page/src/ha-landing-page.ts +++ b/landing-page/src/ha-landing-page.ts @@ -221,7 +221,7 @@ class HaLandingPage extends LandingPageBaseElement { ha-language-picker { display: block; width: 200px; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); overflow: hidden; --ha-select-height: 40px; --mdc-select-fill-color: none; diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts index dcd3ea4108..56a0143031 100644 --- a/src/auth/ha-authorize.ts +++ b/src/auth/ha-authorize.ts @@ -103,7 +103,10 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) { ); box-shadow: var(--ha-card-box-shadow, none); box-sizing: border-box; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); border-width: var(--ha-card-border-width, 1px); border-style: solid; border-color: var( @@ -132,7 +135,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) { } ha-language-picker { width: 200px; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); overflow: hidden; --ha-select-height: 40px; --mdc-select-fill-color: none; diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts index 74a0bd2414..f5d2f606a0 100644 --- a/src/components/chart/ha-chart-base.ts +++ b/src/components/chart/ha-chart-base.ts @@ -1,5 +1,5 @@ -import { consume } from "@lit/context"; import { ResizeController } from "@lit-labs/observers/resize-controller"; +import { consume } from "@lit/context"; import { mdiChevronDown, mdiChevronUp, mdiRestart } from "@mdi/js"; import { differenceInMinutes } from "date-fns"; import type { DataZoomComponentOption } from "echarts/components"; @@ -7,15 +7,16 @@ import type { EChartsType } from "echarts/core"; import type { ECElementEvent, LegendComponentOption, + LineSeriesOption, XAXisOption, YAXisOption, - LineSeriesOption, } from "echarts/types/dist/shared"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { styleMap } from "lit/directives/style-map"; +import { ensureArray } from "../../common/array/ensure-array"; import { getAllGraphColors } from "../../common/color/colors"; import { fireEvent } from "../../common/dom/fire_event"; import { listenMediaQuery } from "../../common/dom/media_query"; @@ -24,10 +25,9 @@ import type { Themes } from "../../data/ws-themes"; import type { ECOption } from "../../resources/echarts"; import type { HomeAssistant } from "../../types"; import { isMac } from "../../util/is_mac"; +import "../chips/ha-assist-chip"; import "../ha-icon-button"; import { formatTimeLabel } from "./axis-label"; -import { ensureArray } from "../../common/array/ensure-array"; -import "../chips/ha-assist-chip"; import { downSampleLineData } from "./down-sample"; export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000; @@ -983,7 +983,7 @@ export class HaChartBase extends LitElement { .chart-controls ha-icon-button, .chart-controls ::slotted(ha-icon-button) { background: var(--card-background-color); - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); --mdc-icon-button-size: 32px; color: var(--primary-color); border: 1px solid var(--divider-color); @@ -1036,7 +1036,7 @@ export class HaChartBase extends LitElement { .chart-legend .bullet { border-width: 1px; border-style: solid; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); display: block; height: 16px; width: 16px; diff --git a/src/components/data-table/dialog-data-table-settings.ts b/src/components/data-table/dialog-data-table-settings.ts index 142bc83d8c..55e472b52d 100644 --- a/src/components/data-table/dialog-data-table-settings.ts +++ b/src/components/data-table/dialog-data-table-settings.ts @@ -290,7 +290,9 @@ export class DialogDataTableSettings extends LitElement { ha-dialog { --vertical-align-dialog: flex-start; --dialog-surface-margin-top: 250px; - --ha-dialog-border-radius: 28px 28px 0 0; + --ha-dialog-border-radius: var(--ha-border-radius-4xl) + var(--ha-border-radius-4xl) var(--ha-border-radius-square) + var(--ha-border-radius-square); --mdc-dialog-min-height: calc(100% - 250px); --mdc-dialog-max-height: calc(100% - 250px); } diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 8d0672e528..500ab461a4 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -1053,7 +1053,7 @@ export class HaDataTable extends LitElement { .mdc-data-table { background-color: var(--data-table-background-color); - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); border-width: 1px; border-style: solid; border-color: var(--divider-color); diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts index 22734ca3b5..1c421fbce8 100644 --- a/src/components/date-range-picker.ts +++ b/src/components/date-range-picker.ts @@ -4,11 +4,11 @@ import Vue from "vue"; import DateRangePicker from "vue2-daterange-picker"; // @ts-ignore import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css"; -import { fireEvent } from "../common/dom/fire_event"; import { - localizeWeekdays, localizeMonths, + localizeWeekdays, } from "../common/datetime/localize_date"; +import { fireEvent } from "../common/dom/fire_event"; import { mainWindow } from "../common/dom/get_main_window"; // eslint-disable-next-line @typescript-eslint/naming-convention @@ -177,7 +177,7 @@ class DateRangePickerElement extends WrappedElement { top: auto; box-shadow: var(--ha-card-box-shadow, none); background-color: var(--card-background-color); - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); border-width: var(--ha-card-border-width, 1px); border-style: solid; border-color: var( @@ -203,7 +203,7 @@ class DateRangePickerElement extends WrappedElement { .daterangepicker .calendar-table th { background-color: transparent; color: var(--secondary-text-color); - border-radius: 0; + border-radius: var(--ha-border-radius-square); outline: none; min-width: 32px; height: 32px; @@ -225,13 +225,13 @@ class DateRangePickerElement extends WrappedElement { color: var(--text-primary-color); } .daterangepicker td.start-date.end-date { - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } .daterangepicker td.start-date { - border-radius: 50% 0 0 50%; + border-radius: var(--ha-border-radius-circle) var(--ha-border-radius-square) var(--ha-border-radius-square) var(--ha-border-radius-circle); } .daterangepicker td.end-date { - border-radius: 0 50% 50% 0; + border-radius: var(--ha-border-radius-square) var(--ha-border-radius-circle) var(--ha-border-radius-circle) var(--ha-border-radius-square); } .reportrange-text { background: none !important; @@ -265,7 +265,7 @@ class DateRangePickerElement extends WrappedElement { border: 1px solid var(--primary-color); background-color: transparent; color: var(--primary-color); - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); padding: 8px; cursor: pointer; } @@ -321,10 +321,10 @@ class DateRangePickerElement extends WrappedElement { -webkit-transform: rotate(-45deg); } .daterangepicker td.start-date { - border-radius: 0 50% 50% 0; + border-radius: var(--ha-border-radius-square) var(--ha-border-radius-circle) var(--ha-border-radius-circle) var(--ha-border-radius-square); } .daterangepicker td.end-date { - border-radius: 50% 0 0 50%; + border-radius: var(--ha-border-radius-circle) var(--ha-border-radius-square) var(--ha-border-radius-square) var(--ha-border-radius-circle); } `; } diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index dc365bd8fa..b820470cf4 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -236,7 +236,7 @@ export class StateBadge extends LitElement { border-radius: var(--state-badge-with-media-image-border-radius, 8%); } :host(.has-no-radius) { - border-radius: 0; + border-radius: var(--ha-border-radius-square); } :host(:focus) { outline: none; diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts index 72e5996440..e8f71b10d8 100644 --- a/src/components/ha-alert.ts +++ b/src/components/ha-alert.ts @@ -99,7 +99,7 @@ class HaAlert extends LitElement { opacity: 0.12; pointer-events: none; content: ""; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); } .icon.no-title { align-self: center; diff --git a/src/components/ha-assist-chat.ts b/src/components/ha-assist-chat.ts index 3f4c3f75a4..b12874e839 100644 --- a/src/components/ha-assist-chat.ts +++ b/src/components/ha-assist-chat.ts @@ -1,24 +1,24 @@ -import type { PropertyValues, TemplateResult } from "lit"; -import { css, LitElement, html, nothing } from "lit"; import { mdiAlertCircle, mdiMicrophone, mdiSend } from "@mdi/js"; +import type { PropertyValues, TemplateResult } from "lit"; +import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; -import type { HomeAssistant } from "../types"; +import { supportsFeature } from "../common/entity/supports-feature"; import { - type PipelineRunEvent, runAssistPipeline, type AssistPipeline, type ConversationChatLogAssistantDelta, type ConversationChatLogToolResultDelta, + type PipelineRunEvent, } from "../data/assist_pipeline"; -import { supportsFeature } from "../common/entity/supports-feature"; import { ConversationEntityFeature } from "../data/conversation"; +import { showAlertDialog } from "../dialogs/generic/show-dialog-box"; +import type { HomeAssistant } from "../types"; import { AudioRecorder } from "../util/audio-recorder"; +import { documentationUrl } from "../util/documentation-url"; import "./ha-alert"; import "./ha-textfield"; import type { HaTextField } from "./ha-textfield"; -import { documentationUrl } from "../util/documentation-url"; -import { showAlertDialog } from "../dialogs/generic/show-dialog-box"; interface AssistMessage { who: string; @@ -591,7 +591,7 @@ export class HaAssistChat extends LitElement { clear: both; margin: 8px 0; padding: 8px; - border-radius: 15px; + border-radius: var(--ha-border-radius-xl); } .message:last-child { margin-bottom: 0; @@ -659,7 +659,7 @@ export class HaAssistChat extends LitElement { .double-bounce2 { width: 48px; height: 48px; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); background-color: var(--primary-color); opacity: 0.2; position: absolute; diff --git a/src/components/ha-badge.ts b/src/components/ha-badge.ts index f671a1f113..7b3cf6bc59 100644 --- a/src/components/ha-badge.ts +++ b/src/components/ha-badge.ts @@ -122,7 +122,7 @@ export class HaBadge extends LitElement { ::slotted(img[slot="icon"]) { width: 30px; height: 30px; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); object-fit: cover; overflow: hidden; margin-left: -10px; diff --git a/src/components/ha-bar.ts b/src/components/ha-bar.ts index 95864e7be7..460d57a926 100644 --- a/src/components/ha-bar.ts +++ b/src/components/ha-bar.ts @@ -46,7 +46,7 @@ export class HaBar extends LitElement { fill: var(--ha-bar-primary-color, var(--primary-color)); } svg { - border-radius: var(--ha-bar-border-radius, 4px); + border-radius: var(--ha-bar-border-radius, var(--ha-border-radius-sm)); height: 12px; width: 100%; } diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts index 674d36ca49..7c12390d92 100644 --- a/src/components/ha-base-time-input.ts +++ b/src/components/ha-base-time-input.ts @@ -337,7 +337,9 @@ export class HaBaseTimeInput extends LitElement { .time-input-wrap { display: flex; flex: var(--time-input-flex, unset); - border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0; + border-radius: var(--mdc-shape-small, var(--ha-border-radius-sm)) + var(--mdc-shape-small, var(--ha-border-radius-sm)) + var(--ha-border-radius-square) var(--ha-border-radius-square); overflow: hidden; position: relative; direction: ltr; diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts index 9fd6ad8dee..926ffcf1b7 100644 --- a/src/components/ha-card.ts +++ b/src/components/ha-card.ts @@ -17,7 +17,7 @@ export class HaCard extends LitElement { backdrop-filter: var(--ha-card-backdrop-filter, none); box-shadow: var(--ha-card-box-shadow, none); box-sizing: border-box; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); border-width: var(--ha-card-border-width, 1px); border-style: solid; border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0)); diff --git a/src/components/ha-code-editor-completion-items.ts b/src/components/ha-code-editor-completion-items.ts index 3691bcc0c7..24ac48a381 100644 --- a/src/components/ha-code-editor-completion-items.ts +++ b/src/components/ha-code-editor-completion-items.ts @@ -45,7 +45,7 @@ export class HaCodeEditorCompletionItems extends LitElement { margin: 0 3px; padding: 3px; background-color: var(--markdown-code-background-color, none); - border-radius: var(--ha-border-radius-sm, 4px); + border-radius: var(--ha-border-radius-sm); line-height: var(--ha-line-height-condensed); } `; diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts index b04c912a79..bd890be1fe 100644 --- a/src/components/ha-code-editor.ts +++ b/src/components/ha-code-editor.ts @@ -5,20 +5,20 @@ import type { CompletionResult, CompletionSource, } from "@codemirror/autocomplete"; -import { undo, undoDepth, redo, redoDepth } from "@codemirror/commands"; +import { redo, redoDepth, undo, undoDepth } from "@codemirror/commands"; import type { Extension, TransactionSpec } from "@codemirror/state"; import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view"; import { placeholder } from "@codemirror/view"; import { - mdiArrowExpand, mdiArrowCollapse, + mdiArrowExpand, mdiContentCopy, - mdiUndo, mdiRedo, + mdiUndo, } from "@mdi/js"; import type { HassEntities } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; -import { css, ReactiveElement, html, render } from "lit"; +import { css, html, ReactiveElement, render } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../common/dom/fire_event"; @@ -778,7 +778,7 @@ export class HaCodeEditor extends ReactiveElement { right: 8px !important; bottom: 8px !important; z-index: 6; - border-radius: 12px !important; + border-radius: var(--ha-border-radius-lg) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; overflow: hidden !important; background-color: var( @@ -801,7 +801,7 @@ export class HaCodeEditor extends ReactiveElement { :host(.fullscreen) .cm-editor { height: 100% !important; max-height: 100% !important; - border-radius: 0 !important; + border-radius: var(--ha-border-radius-square) !important; } :host(:not(.hasToolbar)) .code-editor-toolbar { diff --git a/src/components/ha-color-picker.ts b/src/components/ha-color-picker.ts index b071ebe3c8..ee925bf9fb 100644 --- a/src/components/ha-color-picker.ts +++ b/src/components/ha-color-picker.ts @@ -155,7 +155,7 @@ export class HaColorPicker extends LitElement { display: block; background-color: var(--circle-color, var(--divider-color)); border: 1px solid var(--outline-color); - border-radius: 10px; + border-radius: var(--ha-border-radius-pill); width: 20px; height: 20px; box-sizing: border-box; diff --git a/src/components/ha-control-button.ts b/src/components/ha-control-button.ts index 61cedc44fd..8165d7b6ba 100644 --- a/src/components/ha-control-button.ts +++ b/src/components/ha-control-button.ts @@ -32,7 +32,7 @@ export class HaControlButton extends LitElement { --control-button-icon-color: var(--primary-text-color); --control-button-background-color: var(--disabled-color); --control-button-background-opacity: 0.2; - --control-button-border-radius: 10px; + --control-button-border-radius: var(--ha-border-radius-md); --control-button-padding: 8px; --mdc-icon-size: 20px; --ha-ripple-color: var(--secondary-text-color); diff --git a/src/components/ha-control-number-buttons.ts b/src/components/ha-control-number-buttons.ts index cd3ea212f3..cb497e3c66 100644 --- a/src/components/ha-control-number-buttons.ts +++ b/src/components/ha-control-number-buttons.ts @@ -187,7 +187,7 @@ export class HaControlNumberButton extends LitElement { --control-number-buttons-focus-color: var(--secondary-text-color); --control-number-buttons-background-color: var(--disabled-color); --control-number-buttons-background-opacity: 0.2; - --control-number-buttons-border-radius: 10px; + --control-number-buttons-border-radius: var(--ha-border-radius-md); --mdc-icon-size: 16px; height: var(--feature-height); width: 100%; diff --git a/src/components/ha-control-select-menu.ts b/src/components/ha-control-select-menu.ts index b5b255b792..d771f9a479 100644 --- a/src/components/ha-control-select-menu.ts +++ b/src/components/ha-control-select-menu.ts @@ -174,7 +174,7 @@ export class HaControlSelectMenu extends SelectBase { --control-select-menu-text-color: var(--primary-text-color); --control-select-menu-background-color: var(--disabled-color); --control-select-menu-background-opacity: 0.2; - --control-select-menu-border-radius: 14px; + --control-select-menu-border-radius: var(--ha-border-radius-lg); --control-select-menu-height: 48px; --control-select-menu-padding: 6px 10px; --mdc-icon-size: 20px; diff --git a/src/components/ha-control-slider.ts b/src/components/ha-control-slider.ts index bcf4b4a31e..3f0084a3bb 100644 --- a/src/components/ha-control-slider.ts +++ b/src/components/ha-control-slider.ts @@ -380,7 +380,7 @@ export class HaControlSlider extends LitElement { --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; --control-slider-thickness: 40px; - --control-slider-border-radius: 10px; + --control-slider-border-radius: var(--ha-border-radius-md); --control-slider-tooltip-font-size: var(--ha-font-size-m); height: var(--control-slider-thickness); width: 100%; @@ -403,7 +403,7 @@ export class HaControlSlider extends LitElement { background-color: var(--clear-background-color); color: var(--primary-text-color); font-size: var(--control-slider-tooltip-font-size); - border-radius: 0.8em; + border-radius: var(--ha-border-radius-lg); padding: 0.2em 0.4em; opacity: 0; white-space: nowrap; diff --git a/src/components/ha-control-switch.ts b/src/components/ha-control-switch.ts index ab4e4f572b..d220852fa4 100644 --- a/src/components/ha-control-switch.ts +++ b/src/components/ha-control-switch.ts @@ -157,7 +157,7 @@ export class HaControlSwitch extends LitElement { --control-switch-off-color: var(--disabled-color); --control-switch-background-opacity: 0.2; --control-switch-thickness: 40px; - --control-switch-border-radius: 12px; + --control-switch-border-radius: var(--ha-border-radius-lg); --control-switch-padding: 4px; --mdc-icon-size: 20px; height: var(--control-switch-thickness); diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index e20c2214b2..60cd39c7e5 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -123,7 +123,10 @@ export class HaDialog extends DialogBase { margin-top: var(--dialog-surface-margin-top); min-width: var(--mdc-dialog-min-width, 100vw); min-height: var(--mdc-dialog-min-height, auto); - border-radius: var(--ha-dialog-border-radius, 24px); + border-radius: var( + --ha-dialog-border-radius, + var(--ha-border-radius-3xl) + ); -webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none); backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none); background: var( diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts index 179ae51386..9f82c63477 100644 --- a/src/components/ha-expansion-panel.ts +++ b/src/components/ha-expansion-panel.ts @@ -144,7 +144,7 @@ export class HaExpansionPanel extends LitElement { .top { display: flex; align-items: center; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); } .top.expanded { @@ -161,7 +161,7 @@ export class HaExpansionPanel extends LitElement { border-width: 1px; border-style: solid; border-color: var(--outline-color); - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); } .summary-icon { diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts index 02ca8c6edf..85be3c0b9f 100644 --- a/src/components/ha-file-upload.ts +++ b/src/components/ha-file-upload.ts @@ -242,7 +242,7 @@ export class HaFileUpload extends LitElement { align-items: center; border: solid 1px var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42)); - border-radius: var(--mdc-shape-small, 4px); + border-radius: var(--mdc-shape-small, var(--ha-border-radius-sm)); height: 100%; } .row { diff --git a/src/components/ha-filter-blueprints.ts b/src/components/ha-filter-blueprints.ts index c32d79659a..f3f271de98 100644 --- a/src/components/ha-filter-blueprints.ts +++ b/src/components/ha-filter-blueprints.ts @@ -4,6 +4,7 @@ import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; +import { deepEqual } from "../common/util/deep-equal"; import type { Blueprints } from "../data/blueprint"; import { fetchBlueprints } from "../data/blueprint"; import type { RelatedResult } from "../data/search"; @@ -14,7 +15,6 @@ import "./ha-check-list-item"; import "./ha-expansion-panel"; import "./ha-icon-button"; import "./ha-list"; -import { deepEqual } from "../common/util/deep-equal"; @customElement("ha-filter-blueprints") export class HaFilterBlueprints extends LitElement { @@ -189,7 +189,7 @@ export class HaFilterBlueprints extends LitElement { height: 0; } ha-expansion-panel { - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); --expansion-panel-content-padding: 0; } .header { @@ -207,7 +207,7 @@ export class HaFilterBlueprints extends LitElement { margin-inline-end: 0; min-width: 16px; box-sizing: border-box; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); font-size: var(--ha-font-size-xs); font-weight: var(--ha-font-weight-normal); background-color: var(--primary-color); diff --git a/src/components/ha-filter-categories.ts b/src/components/ha-filter-categories.ts index ccccb0912d..2fa5380881 100644 --- a/src/components/ha-filter-categories.ts +++ b/src/components/ha-filter-categories.ts @@ -12,6 +12,7 @@ import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; +import { stopPropagation } from "../common/dom/stop_propagation"; import type { CategoryRegistryEntry } from "../data/category_registry"; import { createCategoryRegistryEntry, @@ -24,12 +25,11 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin"; import { showCategoryRegistryDetailDialog } from "../panels/config/category/show-dialog-category-registry-detail"; import { haStyleScrollbar } from "../resources/styles"; import type { HomeAssistant } from "../types"; +import "./ha-button-menu"; import "./ha-expansion-panel"; import "./ha-icon"; -import "./ha-button-menu"; -import "./ha-list-item"; import "./ha-list"; -import { stopPropagation } from "../common/dom/stop_propagation"; +import "./ha-list-item"; @customElement("ha-filter-categories") export class HaFilterCategories extends SubscribeMixin(LitElement) { @@ -284,7 +284,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) { height: 0; } ha-expansion-panel { - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); --expansion-panel-content-padding: 0; } .header { @@ -302,7 +302,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) { margin-inline-end: 0; min-width: 16px; box-sizing: border-box; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); font-size: var(--ha-font-size-xs); font-weight: var(--ha-font-weight-normal); background-color: var(--primary-color); diff --git a/src/components/ha-filter-devices.ts b/src/components/ha-filter-devices.ts index 17bf421295..d60d19450c 100644 --- a/src/components/ha-filter-devices.ts +++ b/src/components/ha-filter-devices.ts @@ -216,7 +216,7 @@ export class HaFilterDevices extends LitElement { } ha-expansion-panel { - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); --expansion-panel-content-padding: 0; } .header { @@ -234,7 +234,7 @@ export class HaFilterDevices extends LitElement { margin-inline-end: 0; min-width: 16px; box-sizing: border-box; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); font-size: var(--ha-font-size-xs); font-weight: var(--ha-font-weight-normal); background-color: var(--primary-color); diff --git a/src/components/ha-filter-domains.ts b/src/components/ha-filter-domains.ts index 4bb6756136..34eb6ce384 100644 --- a/src/components/ha-filter-domains.ts +++ b/src/components/ha-filter-domains.ts @@ -170,7 +170,7 @@ export class HaFilterDomains extends LitElement { height: 0; } ha-expansion-panel { - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); --expansion-panel-content-padding: 0; } .header { @@ -188,7 +188,7 @@ export class HaFilterDomains extends LitElement { margin-inline-end: initial; min-width: 16px; box-sizing: border-box; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); font-size: var(--ha-font-size-xs); font-weight: var(--ha-font-weight-normal); background-color: var(--primary-color); diff --git a/src/components/ha-filter-entities.ts b/src/components/ha-filter-entities.ts index 35da537f86..adf5eaaca5 100644 --- a/src/components/ha-filter-entities.ts +++ b/src/components/ha-filter-entities.ts @@ -7,6 +7,7 @@ import { fireEvent } from "../common/dom/fire_event"; import { computeStateDomain } from "../common/entity/compute_state_domain"; import { computeStateName } from "../common/entity/compute_state_name"; import { stringCompare } from "../common/string/compare"; +import { deepEqual } from "../common/util/deep-equal"; import type { RelatedResult } from "../data/search"; import { findRelated } from "../data/search"; import { haStyleScrollbar } from "../resources/styles"; @@ -17,7 +18,6 @@ import "./ha-expansion-panel"; import "./ha-list"; import "./ha-state-icon"; import "./search-input-outlined"; -import { deepEqual } from "../common/util/deep-equal"; @customElement("ha-filter-entities") export class HaFilterEntities extends LitElement { @@ -231,7 +231,7 @@ export class HaFilterEntities extends LitElement { height: 0; } ha-expansion-panel { - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); --expansion-panel-content-padding: 0; } .header { @@ -249,7 +249,7 @@ export class HaFilterEntities extends LitElement { margin-inline-end: 0; min-width: 16px; box-sizing: border-box; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); font-size: var(--ha-font-size-xs); font-weight: var(--ha-font-weight-normal); background-color: var(--primary-color); diff --git a/src/components/ha-filter-floor-areas.ts b/src/components/ha-filter-floor-areas.ts index 36ac1f9be9..0c78d98c08 100644 --- a/src/components/ha-filter-floor-areas.ts +++ b/src/components/ha-filter-floor-areas.ts @@ -7,6 +7,7 @@ import { repeat } from "lit/directives/repeat"; import memoizeOne from "memoize-one"; import { fireEvent } from "../common/dom/fire_event"; import { computeRTL } from "../common/util/compute_rtl"; +import { deepEqual } from "../common/util/deep-equal"; import { getFloorAreaLookup } from "../data/floor_registry"; import type { RelatedResult } from "../data/search"; import { findRelated } from "../data/search"; @@ -20,7 +21,6 @@ import "./ha-icon-button"; import "./ha-list"; import "./ha-svg-icon"; import "./ha-tree-indicator"; -import { deepEqual } from "../common/util/deep-equal"; @customElement("ha-filter-floor-areas") export class HaFilterFloorAreas extends LitElement { @@ -281,7 +281,7 @@ export class HaFilterFloorAreas extends LitElement { height: 0; } ha-expansion-panel { - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); --expansion-panel-content-padding: 0; } .header { @@ -299,7 +299,7 @@ export class HaFilterFloorAreas extends LitElement { margin-inline-end: 0; min-width: 16px; box-sizing: border-box; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); font-size: var(--ha-font-size-xs); font-weight: var(--ha-font-weight-normal); background-color: var(--primary-color); diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts index 21d5f11bec..13ddbf424d 100644 --- a/src/components/ha-filter-integrations.ts +++ b/src/components/ha-filter-integrations.ts @@ -8,7 +8,7 @@ import { fireEvent } from "../common/dom/fire_event"; import { stringCompare } from "../common/string/compare"; import type { LocalizeFunc } from "../common/translations/localize"; import type { IntegrationManifest } from "../data/integration"; -import { fetchIntegrationManifests, domainToName } from "../data/integration"; +import { domainToName, fetchIntegrationManifests } from "../data/integration"; import { haStyleScrollbar } from "../resources/styles"; import type { HomeAssistant } from "../types"; import "./ha-check-list-item"; @@ -188,7 +188,7 @@ export class HaFilterIntegrations extends LitElement { height: 0; } ha-expansion-panel { - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); --expansion-panel-content-padding: 0; } .header { @@ -206,7 +206,7 @@ export class HaFilterIntegrations extends LitElement { margin-inline-end: 0; min-width: 16px; box-sizing: border-box; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); font-size: var(--ha-font-size-xs); font-weight: var(--ha-font-weight-normal); background-color: var(--primary-color); diff --git a/src/components/ha-filter-labels.ts b/src/components/ha-filter-labels.ts index aa67b15a0c..f32762b0f7 100644 --- a/src/components/ha-filter-labels.ts +++ b/src/components/ha-filter-labels.ts @@ -214,7 +214,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) { height: 0; } ha-expansion-panel { - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); --expansion-panel-content-padding: 0; } .header { @@ -232,7 +232,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) { margin-inline-end: 0; min-width: 16px; box-sizing: border-box; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); font-size: var(--ha-font-size-xs); font-weight: var(--ha-font-weight-normal); background-color: var(--primary-color); diff --git a/src/components/ha-filter-states.ts b/src/components/ha-filter-states.ts index c62bfa5977..07181d9d2e 100644 --- a/src/components/ha-filter-states.ts +++ b/src/components/ha-filter-states.ts @@ -158,7 +158,7 @@ export class HaFilterStates extends LitElement { height: 0; } ha-expansion-panel { - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); --expansion-panel-content-padding: 0; } .header { @@ -176,7 +176,7 @@ export class HaFilterStates extends LitElement { margin-inline-end: 0; min-width: 16px; box-sizing: border-box; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); font-size: var(--ha-font-size-xs); font-weight: var(--ha-font-weight-normal); background-color: var(--primary-color); diff --git a/src/components/ha-form/ha-form-expandable.ts b/src/components/ha-form/ha-form-expandable.ts index 4a5a2c193a..7c6e379e50 100644 --- a/src/components/ha-form/ha-form-expandable.ts +++ b/src/components/ha-form/ha-form-expandable.ts @@ -120,8 +120,8 @@ export class HaFormExpandable extends LitElement implements HaFormElement { ha-expansion-panel { display: block; --expansion-panel-content-padding: 0; - border-radius: 6px; - --ha-card-border-radius: 6px; + border-radius: var(--ha-border-radius-md); + --ha-card-border-radius: var(--ha-border-radius-md); } ha-svg-icon, ha-icon { diff --git a/src/components/ha-grid-size-picker.ts b/src/components/ha-grid-size-picker.ts index 4fe5c7e5a4..e164e32d1b 100644 --- a/src/components/ha-grid-size-picker.ts +++ b/src/components/ha-grid-size-picker.ts @@ -264,7 +264,7 @@ export class HaGridSizeEditor extends LitElement { left: 0; background-color: var(--primary-color); opacity: 0.3; - border-radius: 8px; + border-radius: var(--ha-border-radius-md); height: calc(var(--rows, 1) * 30px); width: calc(var(--columns, 1) * 100% / var(--total-columns, 12)); pointer-events: none; diff --git a/src/components/ha-hs-color-picker.ts b/src/components/ha-hs-color-picker.ts index b8ccfd3f3d..e0f4c610f1 100644 --- a/src/components/ha-hs-color-picker.ts +++ b/src/components/ha-hs-color-picker.ts @@ -394,7 +394,7 @@ class HaHsColorPicker extends LitElement { width: 100%; height: 100%; object-fit: contain; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); cursor: pointer; } svg { diff --git a/src/components/ha-icon-button-group.ts b/src/components/ha-icon-button-group.ts index ddb8f08acc..9b110986f7 100644 --- a/src/components/ha-icon-button-group.ts +++ b/src/components/ha-icon-button-group.ts @@ -15,7 +15,7 @@ export class HaIconButtonGroup extends LitElement { flex-direction: row; align-items: center; height: 48px; - border-radius: 28px; + border-radius: var(--ha-border-radius-4xl); background-color: rgba(139, 145, 151, 0.1); box-sizing: border-box; width: auto; diff --git a/src/components/ha-icon-button-toggle.ts b/src/components/ha-icon-button-toggle.ts index eeee6e1042..dcb023462f 100644 --- a/src/components/ha-icon-button-toggle.ts +++ b/src/components/ha-icon-button-toggle.ts @@ -18,7 +18,7 @@ export class HaIconButtonToggle extends HaIconButton { opacity: 0; transition: opacity 180ms ease-in-out; background-color: var(--primary-text-color); - border-radius: 20px; + border-radius: var(--ha-border-radius-2xl); height: 40px; width: 40px; content: ""; diff --git a/src/components/ha-items-display-editor.ts b/src/components/ha-items-display-editor.ts index 39c263a47c..01953e5e9b 100644 --- a/src/components/ha-items-display-editor.ts +++ b/src/components/ha-items-display-editor.ts @@ -394,7 +394,7 @@ export class HaItemDisplayEditor extends LitElement { } ha-md-list-item.drag-selected { --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6); - border-radius: 8px; + border-radius: var(--ha-border-radius-md); outline: solid; outline-color: rgba(var(--rgb-accent-color), 0.6); outline-offset: -2px; diff --git a/src/components/ha-label-badge.ts b/src/components/ha-label-badge.ts index 89e2ec11f7..d828f98f72 100644 --- a/src/components/ha-label-badge.ts +++ b/src/components/ha-label-badge.ts @@ -89,7 +89,7 @@ class HaLabelBadge extends LitElement { display: inline-block; background-color: var(--ha-label-badge-color, var(--primary-color)); color: var(--ha-label-badge-label-color, white); - border-radius: 1em; + border-radius: var(--ha-border-radius-lg); padding: 9% 16% 8% 16%; /* mostly apitalized text, not much descenders => bit more top margin */ font-weight: var(--ha-font-weight-medium); overflow: hidden; diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts index 52676c4da1..75eb558d80 100644 --- a/src/components/ha-label.ts +++ b/src/components/ha-label.ts @@ -39,7 +39,7 @@ class HaLabel extends LitElement { vertical-align: middle; height: 32px; padding: 0 16px; - border-radius: 18px; + border-radius: var(--ha-border-radius-xl); color: var(--ha-label-text-color); --mdc-icon-size: 12px; text-wrap: nowrap; @@ -73,7 +73,7 @@ class HaLabel extends LitElement { :host([dense]) { height: 20px; padding: 0 12px; - border-radius: 10px; + border-radius: var(--ha-border-radius-md); } :host([dense]) ::slotted([slot="icon"]) { margin-right: 4px; diff --git a/src/components/ha-labeled-slider.ts b/src/components/ha-labeled-slider.ts index 75105ca54a..b687325bd4 100644 --- a/src/components/ha-labeled-slider.ts +++ b/src/components/ha-labeled-slider.ts @@ -91,7 +91,7 @@ class HaLabeledSlider extends LitElement { flex-grow: 1; align-items: center; background-image: var(--ha-slider-background); - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); height: 32px; } diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts index 9e684e01ca..efc068eb81 100644 --- a/src/components/ha-markdown.ts +++ b/src/components/ha-markdown.ts @@ -61,7 +61,7 @@ export class HaMarkdown extends LitElement { code, pre { background-color: var(--markdown-code-background-color, none); - border-radius: 3px; + border-radius: var(--ha-border-radius-sm); } svg { background-color: var(--markdown-svg-background-color, none); diff --git a/src/components/ha-menu-button.ts b/src/components/ha-menu-button.ts index 7e74b3cdf4..382d325e99 100644 --- a/src/components/ha-menu-button.ts +++ b/src/components/ha-menu-button.ts @@ -137,7 +137,7 @@ class HaMenuButton extends LitElement { right: 7px; inset-inline-end: 7px; inset-inline-start: initial; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); border: 2px solid var(--app-header-background-color); } `; diff --git a/src/components/ha-navigation-list.ts b/src/components/ha-navigation-list.ts index f309dd1a4e..f5b2cffd55 100644 --- a/src/components/ha-navigation-list.ts +++ b/src/components/ha-navigation-list.ts @@ -5,9 +5,9 @@ import { ifDefined } from "lit/directives/if-defined"; import type { PageNavigation } from "../layouts/hass-tabs-subpage"; import type { HomeAssistant } from "../types"; import "./ha-icon-next"; -import "./ha-svg-icon"; import "./ha-md-list"; import "./ha-md-list-item"; +import "./ha-svg-icon"; @customElement("ha-navigation-list") class HaNavigationList extends LitElement { @@ -74,7 +74,7 @@ class HaNavigationList extends LitElement { padding: 8px; } .icon-background { - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } .icon-background ha-svg-icon { color: #fff; diff --git a/src/components/ha-picker-field.ts b/src/components/ha-picker-field.ts index af6ca632f4..a78c10a9a3 100644 --- a/src/components/ha-picker-field.ts +++ b/src/components/ha-picker-field.ts @@ -96,7 +96,7 @@ export class HaPickerField extends LitElement { } ha-combo-box-item { background-color: var(--mdc-text-field-fill-color, whitesmoke); - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); border-end-end-radius: 0; border-end-start-radius: 0; --md-list-item-one-line-container-height: 56px; diff --git a/src/components/ha-qr-scanner.ts b/src/components/ha-qr-scanner.ts index 2bb385f97b..a31195f9fd 100644 --- a/src/components/ha-qr-scanner.ts +++ b/src/components/ha-qr-scanner.ts @@ -354,7 +354,7 @@ class HaQrScanner extends LitElement { } canvas { width: 100%; - border-radius: 16px; + border-radius: var(--ha-border-radius-xl); } #canvas-container { position: relative; @@ -367,7 +367,7 @@ class HaQrScanner extends LitElement { inset-inline-start: initial; background: #727272b2; color: white; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } .row { display: flex; diff --git a/src/components/ha-resizable-bottom-sheet.ts b/src/components/ha-resizable-bottom-sheet.ts index dac9ec2a5d..f9098c01fa 100644 --- a/src/components/ha-resizable-bottom-sheet.ts +++ b/src/components/ha-resizable-bottom-sheet.ts @@ -204,7 +204,7 @@ export class HaResizableBottomSheet extends LitElement { } .handle-wrapper .handle::after { content: ""; - border-radius: 8px; + border-radius: var(--ha-border-radius-md); height: 4px; background: var(--divider-color, #e0e0e0); width: 80px; diff --git a/src/components/ha-segmented-bar.ts b/src/components/ha-segmented-bar.ts index 08ad6b67f0..1bd0297c7a 100644 --- a/src/components/ha-segmented-bar.ts +++ b/src/components/ha-segmented-bar.ts @@ -106,7 +106,7 @@ class HaSegmentedBar extends LitElement { .bar { display: flex; overflow: hidden; - border-radius: var(--ha-bar-border-radius, 4px); + border-radius: var(--ha-bar-border-radius, var(--ha-border-radius-sm)); width: 100%; height: 12px; margin: 2px 0; @@ -139,7 +139,7 @@ class HaSegmentedBar extends LitElement { .legend li .bullet { width: 12px; height: 12px; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } .spacer { flex: 1; diff --git a/src/components/ha-select-box.ts b/src/components/ha-select-box.ts index 7b84c1d6ee..8f300c3148 100644 --- a/src/components/ha-select-box.ts +++ b/src/components/ha-select-box.ts @@ -1,13 +1,13 @@ -import { customElement, property } from "lit/decorators"; import { css, html, LitElement, nothing } from "lit"; -import "./ha-radio"; +import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { styleMap } from "lit/directives/style-map"; -import type { HaRadio } from "./ha-radio"; import { fireEvent } from "../common/dom/fire_event"; -import type { HomeAssistant } from "../types"; -import { computeRTL } from "../common/util/compute_rtl"; import { stopPropagation } from "../common/dom/stop_propagation"; +import { computeRTL } from "../common/util/compute_rtl"; +import type { HomeAssistant } from "../types"; +import "./ha-radio"; +import type { HaRadio } from "./ha-radio"; interface SelectBoxOptionImage { src: string; @@ -122,7 +122,7 @@ export class HaSelectBox extends LitElement { position: relative; display: block; border: 1px solid var(--divider-color); - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); display: flex; flex-direction: column; align-items: center; diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts index dcb7ec7bf0..1bd07cf985 100644 --- a/src/components/ha-selector/ha-selector-media.ts +++ b/src/components/ha-selector/ha-selector-media.ts @@ -329,11 +329,11 @@ export class HaMediaSelector extends LitElement { flex-shrink: 0; position: relative; box-sizing: border-box; - border-radius: 8px; + border-radius: var(--ha-border-radius-md); overflow: hidden; } ha-card .image { - border-radius: 8px; + border-radius: var(--ha-border-radius-md); } .folder { --mdc-icon-size: 24px; diff --git a/src/components/ha-selector/ha-selector-object.ts b/src/components/ha-selector/ha-selector-object.ts index ce70327d72..89e6f3d3a2 100644 --- a/src/components/ha-selector/ha-selector-object.ts +++ b/src/components/ha-selector/ha-selector-object.ts @@ -301,7 +301,7 @@ export class HaObjectSelector extends LitElement { } ha-md-list-item { border: 1px solid var(--divider-color); - border-radius: 8px; + border-radius: var(--ha-border-radius-md); --ha-md-list-item-gap: 0; --md-list-item-top-space: 0; --md-list-item-bottom-space: 0; diff --git a/src/components/ha-service-control.ts b/src/components/ha-service-control.ts index bc7f986070..556389da74 100644 --- a/src/components/ha-service-control.ts +++ b/src/components/ha-service-control.ts @@ -13,6 +13,7 @@ import { fireEvent } from "../common/dom/fire_event"; import { computeDomain } from "../common/entity/compute_domain"; import { computeObjectId } from "../common/entity/compute_object_id"; import { supportsFeature } from "../common/entity/supports-feature"; +import { hasTemplate } from "../common/string/has-template"; import { fetchIntegrationManifest, type IntegrationManifest, @@ -34,11 +35,10 @@ import "./ha-checkbox"; import "./ha-icon-button"; import "./ha-selector/ha-selector"; import "./ha-service-picker"; +import "./ha-service-section-icon"; import "./ha-settings-row"; import "./ha-yaml-editor"; import type { HaYamlEditor } from "./ha-yaml-editor"; -import "./ha-service-section-icon"; -import { hasTemplate } from "../common/string/has-template"; const attributeFilter = (values: any[], attribute: any) => { if (typeof attribute === "object") { @@ -999,7 +999,7 @@ export class HaServiceControl extends LitElement { direction: ltr; } ha-expansion-panel { - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); --expansion-panel-summary-padding: 0 16px; --expansion-panel-content-padding: 0; } diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index ebc3a8e541..897abdd83b 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -784,7 +784,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { flex-shrink: 0; box-sizing: border-box; margin: 4px; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); --md-list-item-one-line-container-height: 40px; --md-list-item-top-space: 0; --md-list-item-bottom-space: 0; @@ -807,7 +807,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { --md-ripple-hover-color: var(--sidebar-selected-icon-color); } ha-md-list-item.selected::before { - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); position: absolute; top: 0; right: 0; @@ -857,7 +857,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { justify-content: center; align-items: center; min-width: 8px; - border-radius: 10px; + border-radius: var(--ha-border-radius-md); font-weight: var(--ha-font-weight-normal); line-height: normal; background-color: var(--accent-color); @@ -869,7 +869,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { position: absolute; top: 4px; left: 26px; - border-radius: 10px; + border-radius: var(--ha-border-radius-md); font-size: 0.65em; line-height: var(--ha-line-height-expanded); padding: 0 4px; @@ -902,7 +902,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { display: none; position: absolute; opacity: 0.9; - border-radius: 2px; + border-radius: var(--ha-border-radius-sm); white-space: nowrap; color: var(--sidebar-background-color); background-color: var(--sidebar-text-color); diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts index 205c3f803f..4d2c107077 100644 --- a/src/components/ha-slider.ts +++ b/src/components/ha-slider.ts @@ -44,7 +44,10 @@ export class HaSlider extends Slider { var(--ha-line-height-condensed) ); --wa-tooltip-padding: 8px; - --wa-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px); + --wa-tooltip-border-radius: var( + --ha-tooltip-border-radius, + var(--ha-border-radius-sm) + ); --wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px); --wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000); min-width: 100px; diff --git a/src/components/ha-sortable.ts b/src/components/ha-sortable.ts index c7219e7cbe..582846d1da 100644 --- a/src/components/ha-sortable.ts +++ b/src/components/ha-sortable.ts @@ -112,12 +112,12 @@ export class HaSortable extends LitElement { .sortable-ghost { box-shadow: 0 0 0 2px var(--primary-color); background: rgba(var(--rgb-primary-color), 0.25); - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); opacity: 0.4; } .sortable-drag { - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); opacity: 1; background: var(--card-background-color); box-shadow: 0px 4px 8px 3px #00000026; diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts index 598204794d..7a6b860c9c 100644 --- a/src/components/ha-target-picker.ts +++ b/src/components/ha-target-picker.ts @@ -783,7 +783,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { outline: none; } .mdc-chip ha-icon-button ha-svg-icon { - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); background: var(--secondary-text-color); } .mdc-chip__icon.mdc-chip__icon--trailing { @@ -800,7 +800,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { align-items: center; justify-content: center; --mdc-icon-size: 20px; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); padding: 6px; margin-left: -13px !important; margin-inline-start: -13px !important; diff --git a/src/components/ha-tooltip.ts b/src/components/ha-tooltip.ts index 16c2b501ae..c2eb5a61d8 100644 --- a/src/components/ha-tooltip.ts +++ b/src/components/ha-tooltip.ts @@ -35,7 +35,10 @@ export class HaTooltip extends Tooltip { var(--ha-line-height-condensed) ); --wa-tooltip-padding: 8px; - --wa-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px); + --wa-tooltip-border-radius: var( + --ha-tooltip-border-radius, + var(--ha-border-radius-sm) + ); --wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px); --wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000); } diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts index 99eaaf9f9e..4d922ad7e5 100644 --- a/src/components/ha-yaml-editor.ts +++ b/src/components/ha-yaml-editor.ts @@ -4,14 +4,14 @@ import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; -import type { HomeAssistant } from "../types"; -import { haStyle } from "../resources/styles"; -import "./ha-code-editor"; -import { showToast } from "../util/toast"; import { copyToClipboard } from "../common/util/copy-clipboard"; -import type { HaCodeEditor } from "./ha-code-editor"; -import "./ha-button"; +import { haStyle } from "../resources/styles"; +import type { HomeAssistant } from "../types"; +import { showToast } from "../util/toast"; import "./ha-alert"; +import "./ha-button"; +import "./ha-code-editor"; +import type { HaCodeEditor } from "./ha-code-editor"; const isEmpty = (obj: Record): boolean => { if (typeof obj !== "object" || obj === null) { @@ -203,8 +203,9 @@ export class HaYamlEditor extends LitElement { .card-actions { border-radius: var( --actions-border-radius, - 0px 0px var(--ha-card-border-radius, 12px) - var(--ha-card-border-radius, 12px) + var(--ha-border-radius-square) var(--ha-border-radius-square) + var(--ha-card-border-radius, var(--ha-border-radius-lg)) + var(--ha-card-border-radius, var(--ha-border-radius-lg)) ); border: 1px solid var(--divider-color); padding: 5px 16px; diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts index d334ad9297..546a29515f 100644 --- a/src/components/map/ha-map.ts +++ b/src/components/map/ha-map.ts @@ -7,27 +7,27 @@ import type { Layer, Map, Marker, - Polyline, MarkerClusterGroup, + Polyline, } from "leaflet"; import type { PropertyValues } from "lit"; import { css, ReactiveElement } from "lit"; import { customElement, property, state } from "lit/decorators"; -import { fireEvent } from "../../common/dom/fire_event"; import { formatDateTime } from "../../common/datetime/format_date_time"; import { formatTimeWeekday, formatTimeWithSeconds, } from "../../common/datetime/format_time"; +import { fireEvent } from "../../common/dom/fire_event"; import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map"; import { setupLeafletMap } from "../../common/dom/setup-leaflet-map"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { computeStateName } from "../../common/entity/compute_state_name"; +import { DecoratedMarker } from "../../common/map/decorated_marker"; import type { HomeAssistant, ThemeMode } from "../../types"; import { isTouch } from "../../util/is_touch"; import "../ha-icon-button"; import "./ha-entity-marker"; -import { DecoratedMarker } from "../../common/map/decorated_marker"; declare global { // for fire event @@ -710,7 +710,7 @@ export class HaMap extends ReactiveElement { cursor: move !important; } .leaflet-edit-resize { - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); cursor: nesw-resize !important; } .named-icon { @@ -734,7 +734,7 @@ export class HaMap extends ReactiveElement { font-size: var(--ha-font-size-s); background: rgba(80, 80, 80, 0.9) !important; color: white !important; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); box-shadow: none !important; text-align: center; } @@ -745,7 +745,7 @@ export class HaMap extends ReactiveElement { border: 3px solid rgba(var(--rgb-primary-color), 0.2); width: 32px; height: 32px; - border-radius: 20px; + border-radius: var(--ha-border-radius-2xl); text-align: center; color: var(--text-primary-color); font-size: var(--ha-font-size-m); diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index af835296db..25e4571087 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -1,7 +1,7 @@ import type { LitVirtualizer } from "@lit-labs/virtualizer"; import { grid } from "@lit-labs/virtualizer/layouts/grid"; -import { mdiArrowUpRight, mdiPlay, mdiPlus, mdiKeyboard } from "@mdi/js"; +import { mdiArrowUpRight, mdiKeyboard, mdiPlay, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { @@ -56,10 +56,10 @@ import "../ha-list-item"; import "../ha-spinner"; import "../ha-svg-icon"; import "../ha-tooltip"; -import "./ha-browse-media-tts"; import "./ha-browse-media-manual"; -import type { TtsMediaPickedEvent } from "./ha-browse-media-tts"; import type { ManualMediaPickedEvent } from "./ha-browse-media-manual"; +import "./ha-browse-media-tts"; +import type { TtsMediaPickedEvent } from "./ha-browse-media-tts"; declare global { interface HASSDomEvents { @@ -1174,7 +1174,8 @@ export class HaMediaPlayerBrowse extends LitElement { } ha-card .image { - border-radius: 3px 3px 0 0; + border-radius: var(--ha-border-radius-sm) var(--ha-border-radius-sm) + var(--ha-border-radius-square) var(--ha-border-radius-square); } .image { @@ -1216,7 +1217,7 @@ export class HaMediaPlayerBrowse extends LitElement { .child .play { position: absolute; transition: color 0.5s; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); top: calc(50% - 40px); right: calc(50% - 35px); opacity: 0; @@ -1273,7 +1274,7 @@ export class HaMediaPlayerBrowse extends LitElement { background-size: contain; background-repeat: no-repeat; background-position: center; - border-radius: 2px; + border-radius: var(--ha-border-radius-sm); display: flex; align-content: center; align-items: center; @@ -1284,7 +1285,7 @@ export class HaMediaPlayerBrowse extends LitElement { opacity: 0; transition: all 0.5s; background-color: rgba(var(--rgb-card-background-color), 0.5); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); --mdc-icon-button-size: 40px; } @@ -1344,7 +1345,7 @@ export class HaMediaPlayerBrowse extends LitElement { margin-bottom: 8px; position: relative; background-position: center; - border-radius: 0; + border-radius: var(--ha-border-radius-square); transition: width 0.4s, height 0.4s, diff --git a/src/components/tile/ha-tile-badge.ts b/src/components/tile/ha-tile-badge.ts index 7ec189f2b5..3aa0fc4fc2 100644 --- a/src/components/tile/ha-tile-badge.ts +++ b/src/components/tile/ha-tile-badge.ts @@ -26,7 +26,7 @@ export class HaTileBadge extends LitElement { line-height: 0; width: 16px; height: 16px; - border-radius: 8px; + border-radius: var(--ha-border-radius-md); background-color: var(--tile-badge-background-color); transition: background-color 280ms ease-in-out; } diff --git a/src/components/trace/ha-timeline.ts b/src/components/trace/ha-timeline.ts index 4ee033573c..757b5d3e07 100644 --- a/src/components/trace/ha-timeline.ts +++ b/src/components/trace/ha-timeline.ts @@ -90,7 +90,7 @@ export class HaTimeline extends LitElement { --timeline-ball-color, var(--timeline-color, var(--secondary-text-color)) ); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } :host([raised]) ha-svg-icon { transform: scale(1.3); diff --git a/src/components/user/ha-person-badge.ts b/src/components/user/ha-person-badge.ts index 42a26b1c0d..056f4af904 100644 --- a/src/components/user/ha-person-badge.ts +++ b/src/components/user/ha-person-badge.ts @@ -45,7 +45,7 @@ class PersonBadge extends LitElement { width: 100%; height: 100%; background-size: cover; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } .initials { display: inline-flex; @@ -54,7 +54,7 @@ class PersonBadge extends LitElement { box-sizing: border-box; width: 100%; height: 100%; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); background-color: var(--light-primary-color); text-decoration: none; color: var(--text-light-primary-color, var(--primary-text-color)); diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts index 59114b7e75..89c33729e5 100644 --- a/src/components/user/ha-user-badge.ts +++ b/src/components/user/ha-user-badge.ts @@ -92,7 +92,7 @@ class UserBadge extends LitElement { width: 100%; height: 100%; background-size: cover; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } .initials { display: inline-flex; @@ -101,7 +101,7 @@ class UserBadge extends LitElement { box-sizing: border-box; width: 100%; height: 100%; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); background-color: var(--light-primary-color); text-decoration: none; color: var(--text-light-primary-color, var(--primary-text-color)); diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts index 6d99bd1420..84dedf4e16 100644 --- a/src/dialogs/config-flow/step-flow-create-entry.ts +++ b/src/dialogs/config-flow/step-flow-create-entry.ts @@ -318,7 +318,7 @@ class StepFlowCreateEntry extends LitElement { .device { border: 1px solid var(--divider-color); padding: 6px; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); margin: 4px; display: inline-block; } diff --git a/src/dialogs/enter-code/dialog-enter-code.ts b/src/dialogs/enter-code/dialog-enter-code.ts index 2dd810f2ed..9066d6ca6a 100644 --- a/src/dialogs/enter-code/dialog-enter-code.ts +++ b/src/dialogs/enter-code/dialog-enter-code.ts @@ -229,7 +229,7 @@ export class DialogEnterCode ha-control-button { width: 56px; height: 56px; - --control-button-border-radius: 28px; + --control-button-border-radius: var(--ha-border-radius-4xl); --mdc-icon-size: 24px; font-size: var(--ha-font-size-2xl); } diff --git a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts index 93911e20a6..3e3ad06c88 100644 --- a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts +++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts @@ -2,11 +2,11 @@ import Cropper from "cropperjs"; // @ts-ignore import cropperCss from "cropperjs/dist/cropper.css"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; -import { css, html, nothing, LitElement, unsafeCSS } from "lit"; -import { customElement, property, state, query } from "lit/decorators"; +import { css, html, LitElement, nothing, unsafeCSS } from "lit"; +import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; -import "../../components/ha-dialog"; import "../../components/ha-button"; +import "../../components/ha-dialog"; import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import type { HaImageCropperDialogParams } from "./show-image-cropper-dialog"; @@ -150,7 +150,7 @@ export class HaImagecropperDialog extends LitElement { } .container.round .cropper-view-box, .container.round .cropper-face { - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } .cropper-line, .cropper-point, diff --git a/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts b/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts index 7ff90662a3..77bfcbee8f 100644 --- a/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts +++ b/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts @@ -281,7 +281,7 @@ class DialogLightColorFavorite extends LitElement { width: 30px; height: 30px; flex: none; - border-radius: 15px; + border-radius: var(--ha-border-radius-xl); } .wheel.color { background-image: url("/static/images/color_wheel.png"); diff --git a/src/dialogs/more-info/components/lights/ha-favorite-color-button.ts b/src/dialogs/more-info/components/lights/ha-favorite-color-button.ts index d8bf1be0f1..a9d2ab691e 100644 --- a/src/dialogs/more-info/components/lights/ha-favorite-color-button.ts +++ b/src/dialogs/more-info/components/lights/ha-favorite-color-button.ts @@ -10,8 +10,8 @@ import { temperature2rgb, } from "../../../../common/color/convert-light-color"; import { luminosity } from "../../../../common/color/rgb"; -import type { HaOutlinedIconButton } from "../../../../components/ha-outlined-icon-button"; import "../../../../components/ha-outlined-icon-button"; +import type { HaOutlinedIconButton } from "../../../../components/ha-outlined-icon-button"; import "../../../../components/ha-svg-icon"; import type { LightColor, LightEntity } from "../../../../data/light"; @@ -106,7 +106,7 @@ class MoreInfoViewLightColorPicker extends LitElement { --md-ripple-focus-color: 0; --md-ripple-hover-opacity: 0; --md-ripple-pressed-opacity: 0; - border-radius: 9999px; + border-radius: var(--ha-border-radius-pill); } :host([disabled]) { pointer-events: none; diff --git a/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts b/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts index 6c070539d4..1c844c01b0 100644 --- a/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts +++ b/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts @@ -316,7 +316,7 @@ export class HaMoreInfoLightFavoriteColors extends LitElement { outline: none; background-color: var(--secondary-background-color); padding: 0; - border-radius: 10px; + border-radius: var(--ha-border-radius-md); border: none; cursor: pointer; display: block; diff --git a/src/dialogs/more-info/components/lights/light-color-temp-picker.ts b/src/dialogs/more-info/components/lights/light-color-temp-picker.ts index eb3afdb6a5..f35536d722 100644 --- a/src/dialogs/more-info/components/lights/light-color-temp-picker.ts +++ b/src/dialogs/more-info/components/lights/light-color-temp-picker.ts @@ -14,10 +14,10 @@ import { stateColorCss } from "../../../../common/entity/state_color"; import { throttle } from "../../../../common/util/throttle"; import "../../../../components/ha-control-slider"; import { UNAVAILABLE } from "../../../../data/entity"; +import { DOMAIN_ATTRIBUTES_UNITS } from "../../../../data/entity_attributes"; import type { LightColor, LightEntity } from "../../../../data/light"; import { LightColorMode } from "../../../../data/light"; import type { HomeAssistant } from "../../../../types"; -import { DOMAIN_ATTRIBUTES_UNITS } from "../../../../data/entity_attributes"; declare global { interface HASSDomEvents { @@ -179,7 +179,7 @@ class LightColorTempPicker extends LitElement { max-height: 320px; min-height: 200px; --control-slider-thickness: 130px; - --control-slider-border-radius: 36px; + --control-slider-border-radius: var(--ha-border-radius-6xl); --control-slider-color: var(--primary-color); --control-slider-background: -webkit-linear-gradient( top, diff --git a/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts b/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts index 86df2e643a..244fc4208b 100644 --- a/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts +++ b/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts @@ -1,26 +1,26 @@ +import { mdiClose, mdiPlay, mdiStop } from "@mdi/js"; +import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; -import type { HassEntity } from "home-assistant-js-websocket"; -import { mdiClose, mdiPlay, mdiStop } from "@mdi/js"; -import type { HomeAssistant } from "../../../../types"; +import { fireEvent } from "../../../../common/dom/fire_event"; import { stopPropagation } from "../../../../common/dom/stop_propagation"; +import { supportsFeature } from "../../../../common/entity/supports-feature"; +import "../../../../components/ha-button"; +import "../../../../components/ha-control-button"; +import "../../../../components/ha-dialog-header"; +import "../../../../components/ha-icon-button"; +import "../../../../components/ha-list-item"; +import type { HaMdDialog } from "../../../../components/ha-md-dialog"; import { getMobileCloseToBottomAnimation, getMobileOpenFromBottomAnimation, } from "../../../../components/ha-md-dialog"; -import "../../../../components/ha-dialog-header"; -import "../../../../components/ha-icon-button"; -import "../../../../components/ha-button"; -import "../../../../components/ha-textfield"; -import "../../../../components/ha-control-button"; import "../../../../components/ha-select"; -import "../../../../components/ha-list-item"; -import type { HaMdDialog } from "../../../../components/ha-md-dialog"; -import { fireEvent } from "../../../../common/dom/fire_event"; -import { supportsFeature } from "../../../../common/entity/supports-feature"; +import "../../../../components/ha-textfield"; import { SirenEntityFeature } from "../../../../data/siren"; import { haStyle } from "../../../../resources/styles"; +import type { HomeAssistant } from "../../../../types"; @customElement("ha-more-info-siren-advanced-controls") class MoreInfoSirenAdvancedControls extends LitElement { @@ -212,7 +212,7 @@ class MoreInfoSirenAdvancedControls extends LitElement { margin-top: 16px; } ha-control-button { - --control-button-border-radius: 16px; + --control-button-border-radius: var(--ha-border-radius-xl); --mdc-icon-size: 24px; width: 64px; height: 64px; diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts b/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts index 6720a5aede..5200458ee8 100644 --- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts +++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts @@ -99,7 +99,7 @@ class MoreInfoAlarmControlPanel extends LitElement { --mdc-icon-size: 80px; animation: pulse 1s infinite; color: var(--icon-color); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); width: 144px; height: 144px; display: flex; @@ -113,7 +113,7 @@ class MoreInfoAlarmControlPanel extends LitElement { left: 0; height: 100%; width: 100%; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); background-color: var(--icon-color); transition: background-color 180ms ease-in-out; opacity: 0.2; @@ -123,7 +123,7 @@ class MoreInfoAlarmControlPanel extends LitElement { min-width: 130px; max-width: 200px; margin: 0 auto; - --control-button-border-radius: 24px; + --control-button-border-radius: var(--ha-border-radius-3xl); } `, ]; diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts index d8890e1cd9..91d6bbe737 100644 --- a/src/dialogs/more-info/controls/more-info-light.ts +++ b/src/dialogs/more-info/controls/more-info-light.ts @@ -344,7 +344,7 @@ class MoreInfoLight extends LitElement { flex-direction: row; align-items: center; height: 48px; - border-radius: 24px; + border-radius: var(--ha-border-radius-3xl); background-color: rgba(139, 145, 151, 0.1); box-sizing: border-box; width: auto; @@ -353,7 +353,7 @@ class MoreInfoLight extends LitElement { width: 30px; height: 30px; flex: none; - border-radius: 15px; + border-radius: var(--ha-border-radius-xl); } .wheel.color { background-image: url("/static/images/color_wheel.png"); diff --git a/src/dialogs/more-info/controls/more-info-lock.ts b/src/dialogs/more-info/controls/more-info-lock.ts index a3462b0e92..df5848a2b3 100644 --- a/src/dialogs/more-info/controls/more-info-lock.ts +++ b/src/dialogs/more-info/controls/more-info-lock.ts @@ -167,7 +167,7 @@ class MoreInfoLock extends LitElement { ha-control-button { font-size: var(--ha-font-size-m); height: 60px; - --control-button-border-radius: 24px; + --control-button-border-radius: var(--ha-border-radius-3xl); } .open-button { width: 130px; @@ -219,7 +219,7 @@ class MoreInfoLock extends LitElement { --mdc-icon-size: 80px; animation: pulse 1s infinite; color: var(--state-color); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); width: 144px; height: 144px; display: flex; @@ -233,7 +233,7 @@ class MoreInfoLock extends LitElement { left: 0; height: 100%; width: 100%; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); background-color: var(--state-color); transition: background-color 180ms ease-in-out; opacity: 0.2; diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index 2856bca4a8..1cff2bfd3d 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -463,7 +463,7 @@ class MoreInfoMediaPlayer extends LitElement { max-width: 100%; max-height: 100%; object-fit: cover; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); position: relative; display: flex; @@ -553,7 +553,7 @@ class MoreInfoMediaPlayer extends LitElement { align-items: center; height: 16px; min-width: 8px; - border-radius: 10px; + border-radius: var(--ha-border-radius-md); font-weight: var(--ha-font-weight-normal); font-size: var(--ha-font-size-xs); background-color: var(--primary-color); diff --git a/src/dialogs/more-info/controls/more-info-script.ts b/src/dialogs/more-info/controls/more-info-script.ts index 25be497f97..705401ec3d 100644 --- a/src/dialogs/more-info/controls/more-info-script.ts +++ b/src/dialogs/more-info/controls/more-info-script.ts @@ -236,7 +236,7 @@ class MoreInfoScript extends LitElement { .fields { padding: 16px; border: 1px solid var(--divider-color); - border-radius: 8px; + border-radius: var(--ha-border-radius-md); margin-bottom: 16px; } .fields .title { diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index c04866a766..dc2a6a58d9 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -749,7 +749,7 @@ export class MoreInfoDialog extends LitElement { border: none; outline: none; display: inline; - border-radius: 6px; + border-radius: var(--ha-border-radius-md); transition: background-color 180ms ease-in-out; min-width: 0; max-width: 100%; diff --git a/src/dialogs/restart/dialog-restart.ts b/src/dialogs/restart/dialog-restart.ts index bbce32de5b..06830489f7 100644 --- a/src/dialogs/restart/dialog-restart.ts +++ b/src/dialogs/restart/dialog-restart.ts @@ -430,11 +430,11 @@ class DialogRestart extends LitElement { --expansion-panel-content-padding: 0; --expansion-panel-summary-padding: 0 var(--mdc-list-side-padding, 20px); - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); } .icon-background { - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); color: #fff; display: flex; width: 40px; diff --git a/src/dialogs/shortcuts/dialog-shortcuts.ts b/src/dialogs/shortcuts/dialog-shortcuts.ts index 2459cc9e02..061d117605 100644 --- a/src/dialogs/shortcuts/dialog-shortcuts.ts +++ b/src/dialogs/shortcuts/dialog-shortcuts.ts @@ -276,7 +276,7 @@ class DialogShortcuts extends LitElement { span { padding: 8px; border: 1px solid var(--outline-color); - border-radius: 8px; + border-radius: var(--ha-border-radius-md); } .items p { diff --git a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts index f9811ba488..564d330ed9 100644 --- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts +++ b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts @@ -146,7 +146,7 @@ export class CloudStepIntro extends LitElement { margin: 0 4px; } .round-icon { - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); color: #6e41ab; background-color: #e8dcf7; display: flex; diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts index 410f4abe4a..36aea27cab 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts @@ -436,10 +436,12 @@ export class HaVoiceAssistantSetupStepPipeline extends LitElement { transition: background-color 0.3s; } .segment:first-child { - border-radius: 4px 0 0 4px; + border-radius: var(--ha-border-radius-sm) var(--ha-border-radius-square) + var(--ha-border-radius-square) var(--ha-border-radius-sm); } .segment:last-child { - border-radius: 0 4px 4px 0; + border-radius: var(--ha-border-radius-square) var(--ha-border-radius-sm) + var(--ha-border-radius-sm) var(--ha-border-radius-square); } .perf-bar.high .segment { background-color: var(--success-color); diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index 6930ae7dcf..d9b116ea27 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -782,7 +782,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) { .active-filters::before { background-color: var(--primary-color); opacity: 0.12; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); position: absolute; top: 0; right: 0; @@ -809,7 +809,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) { inset-inline-start: initial; min-width: 16px; box-sizing: border-box; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); font-size: var(--ha-font-size-xs); font-weight: var(--ha-font-weight-normal); background-color: var(--primary-color); @@ -887,7 +887,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) { --mdc-dialog-min-height: 100%; --mdc-dialog-max-height: 100%; --vertical-align-dialog: flex-end; - --ha-dialog-border-radius: 0; + --ha-dialog-border-radius: var(--ha-border-radius-square); --dialog-content-padding: 0; } diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts index 8f8fbfc896..c3fed7f574 100644 --- a/src/onboarding/ha-onboarding.ts +++ b/src/onboarding/ha-onboarding.ts @@ -516,7 +516,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { ha-language-picker { display: block; width: 200px; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); overflow: hidden; --ha-select-height: 40px; --mdc-select-fill-color: none; diff --git a/src/onboarding/onboarding-loading.ts b/src/onboarding/onboarding-loading.ts index 6f8c4157e8..38a3d93b0f 100644 --- a/src/onboarding/onboarding-loading.ts +++ b/src/onboarding/onboarding-loading.ts @@ -12,7 +12,7 @@ class OnboardingLoading extends LitElement { /* MIT License (MIT). Copyright (c) 2014 Luke Haas */ .loader, .loader:after { - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); width: 40px; height: 40px; } diff --git a/src/onboarding/onboarding-welcome-link.ts b/src/onboarding/onboarding-welcome-link.ts index 08f0485abb..045c824381 100644 --- a/src/onboarding/onboarding-welcome-link.ts +++ b/src/onboarding/onboarding-welcome-link.ts @@ -49,7 +49,7 @@ class OnboardingWelcomeLink extends LitElement { ha-svg-icon { color: var(--text-primary-color); background: var(--welcome-link-color, var(--primary-color)); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); padding: 8px; margin-bottom: 16px; } diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index c9a1173997..c17ab37fe3 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -21,11 +21,11 @@ import { useAmPm } from "../../common/datetime/use_am_pm"; import { fireEvent } from "../../common/dom/fire_event"; import { supportsFeature } from "../../common/entity/supports-feature"; import type { LocalizeFunc } from "../../common/translations/localize"; +import "../../components/ha-button"; import "../../components/ha-button-toggle-group"; import "../../components/ha-fab"; import "../../components/ha-icon-button-next"; import "../../components/ha-icon-button-prev"; -import "../../components/ha-button"; import type { Calendar as CalendarData, CalendarEvent, @@ -39,9 +39,9 @@ import type { HomeAssistant, ToggleButton, } from "../../types"; +import "../lovelace/components/hui-warning"; import { showCalendarEventDetailDialog } from "./show-dialog-calendar-event-detail"; import { showCalendarEventEditDialog } from "./show-dialog-calendar-event-editor"; -import "../lovelace/components/hui-warning"; declare global { interface HTMLElementTagNameMap { @@ -586,7 +586,7 @@ export class HAFullCalendar extends LitElement { height: 26px; color: var(--text-primary-color) !important; background-color: var(--primary-color); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); display: inline-block; text-align: center; white-space: nowrap; @@ -599,7 +599,7 @@ export class HAFullCalendar extends LitElement { } .fc-event { - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); line-height: var(--ha-line-height-normal); cursor: pointer; } @@ -688,8 +688,7 @@ export class HAFullCalendar extends LitElement { } .fc-scroller::-webkit-scrollbar-thumb { - -webkit-border-radius: 4px; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); background: var(--scrollbar-thumb-color); } diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts index ef83460394..0ab80ec3aa 100644 --- a/src/panels/calendar/ha-panel-calendar.ts +++ b/src/panels/calendar/ha-panel-calendar.ts @@ -299,7 +299,7 @@ class PanelCalendar extends LitElement { } ha-full-calendar { --calendar-header-padding: 12px; - --calendar-border-radius: 0; + --calendar-border-radius: var(--ha-border-radius-square); --calendar-border-width: 1px 0; height: calc( 100vh - var(--header-height, 0px) - var( diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts index 649b3f0777..b05f899f83 100644 --- a/src/panels/config/areas/ha-config-area-page.ts +++ b/src/panels/config/areas/ha-config-area-page.ts @@ -7,20 +7,21 @@ import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; -import { goBack } from "../../../common/navigate"; import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name"; import { computeDomain } from "../../../common/entity/compute_domain"; import { computeStateName } from "../../../common/entity/compute_state_name"; +import { goBack } from "../../../common/navigate"; import { caseInsensitiveStringCompare } from "../../../common/string/compare"; +import { slugify } from "../../../common/string/slugify"; import { groupBy } from "../../../common/util/group-by"; import { afterNextRender } from "../../../common/util/render-status"; +import "../../../components/ha-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; -import "../../../components/ha-button"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; -import "../../../components/ha-list-item"; import "../../../components/ha-list"; +import "../../../components/ha-list-item"; import "../../../components/ha-tooltip"; import type { AreaRegistryEntry } from "../../../data/area_registry"; import { @@ -51,7 +52,6 @@ import { loadAreaRegistryDetailDialog, showAreaRegistryDetailDialog, } from "./show-dialog-area-registry-detail"; -import { slugify } from "../../../common/string/slugify"; declare interface NameAndEntity { name: string; @@ -664,7 +664,10 @@ class HaConfigAreaPage extends LitElement { color: var(--secondary-text-color); } img { - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); width: 100%; } @@ -730,7 +733,7 @@ class HaConfigAreaPage extends LitElement { height: 100%; background-color: var(--card-background-color); opacity: 0.5; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } ha-logbook { height: 400px; diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index d928c1cd51..fc43b8fa66 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -1286,7 +1286,7 @@ export class HaAutomationEditor extends UndoRedoMixin< ha-yaml-editor { flex-grow: 1; - --actions-border-radius: 0; + --actions-border-radius: var(--ha-border-radius-square); --code-mirror-height: 100%; min-height: 0; display: flex; diff --git a/src/panels/config/automation/ha-automation-sidebar.ts b/src/panels/config/automation/ha-automation-sidebar.ts index 432309a26e..178ca82e51 100644 --- a/src/panels/config/automation/ha-automation-sidebar.ts +++ b/src/panels/config/automation/ha-automation-sidebar.ts @@ -320,7 +320,7 @@ export default class HaAutomationSidebar extends LitElement { display: flex; align-items: center; justify-content: center; - padding: var(--ha-card-border-radius) 0; + padding: var(--ha-card-border-radius) var(--ha-border-radius-square); } .handle.resizing { cursor: grabbing; diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index 68abcc0393..0158869d14 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -71,7 +71,7 @@ export const indentStyle = css` padding-inline-end: 0px; border-inline-start: 2px solid var(--ha-color-border-neutral-quiet); border-bottom: 2px solid var(--ha-color-border-neutral-quiet); - border-radius: 0; + border-radius: var(--ha-border-radius-square); border-end-start-radius: var(--ha-border-radius-lg); } .card-content.indent.selected, diff --git a/src/panels/config/backup/components/config/ha-backup-config-agents.ts b/src/panels/config/backup/components/config/ha-backup-config-agents.ts index 05e2fa7edf..a2ed30af78 100644 --- a/src/panels/config/backup/components/config/ha-backup-config-agents.ts +++ b/src/panels/config/backup/components/config/ha-backup-config-agents.ts @@ -1,7 +1,7 @@ import { mdiCog, mdiDelete, mdiHarddisk, mdiNas } from "@mdi/js"; import { css, html, LitElement, nothing, type TemplateResult } from "lit"; -import { join } from "lit/directives/join"; import { customElement, property, state } from "lit/decorators"; +import { join } from "lit/directives/join"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { computeDomain } from "../../../../../common/entity/compute_domain"; @@ -327,7 +327,7 @@ class HaBackupConfigAgents extends LitElement { width: 8px; height: 8px; background-color: var(--disabled-color); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } .dot.warning { background-color: var(--warning-color); diff --git a/src/panels/config/backup/components/ha-backup-summary-card.ts b/src/panels/config/backup/components/ha-backup-summary-card.ts index 482ef9e5b9..a9d4e063de 100644 --- a/src/panels/config/backup/components/ha-backup-summary-card.ts +++ b/src/panels/config/backup/components/ha-backup-summary-card.ts @@ -9,8 +9,8 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../../components/ha-button"; import "../../../../components/ha-card"; -import "../../../../components/ha-spinner"; import "../../../../components/ha-icon"; +import "../../../../components/ha-spinner"; type SummaryStatus = "success" | "error" | "info" | "warning" | "loading"; @@ -84,7 +84,7 @@ class HaBackupSummaryCard extends LitElement { } .icon { position: relative; - border-radius: 20px; + border-radius: var(--ha-border-radius-2xl); width: 40px; height: 40px; display: flex; diff --git a/src/panels/config/backup/components/overview/ha-backup-overview-onboarding.ts b/src/panels/config/backup/components/overview/ha-backup-overview-onboarding.ts index 632b61cbf9..dc23496a14 100644 --- a/src/panels/config/backup/components/overview/ha-backup-overview-onboarding.ts +++ b/src/panels/config/backup/components/overview/ha-backup-overview-onboarding.ts @@ -65,7 +65,7 @@ class HaBackupOverviewBackups extends LitElement { } .icon { position: relative; - border-radius: 20px; + border-radius: var(--ha-border-radius-2xl); width: 40px; height: 40px; display: flex; diff --git a/src/panels/config/backup/components/overview/ha-backup-overview-summary.ts b/src/panels/config/backup/components/overview/ha-backup-overview-summary.ts index 985545f82a..5e4c6a5456 100644 --- a/src/panels/config/backup/components/overview/ha-backup-overview-summary.ts +++ b/src/panels/config/backup/components/overview/ha-backup-overview-summary.ts @@ -364,7 +364,7 @@ class HaBackupOverviewBackups extends LitElement { animation-name: loading; animation-timing-function: linear; animation-duration: 1.2s; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); height: 16px; margin: 2px 0; background: linear-gradient( diff --git a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts index db710193ca..3ff46faebc 100644 --- a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts +++ b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts @@ -574,7 +574,7 @@ class DialogBackupOnboarding extends LitElement implements HassDialog { .encryption-key { border: 1px solid var(--divider-color); background-color: var(--primary-background-color); - border-radius: 8px; + border-radius: var(--ha-border-radius-md); padding: 16px; display: flex; flex-direction: row; diff --git a/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts index bc1e5143c2..8fd8e2c3fe 100644 --- a/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts +++ b/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts @@ -300,7 +300,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog { .encryption-key { border: 1px solid var(--divider-color); background-color: var(--primary-background-color); - border-radius: 8px; + border-radius: var(--ha-border-radius-md); padding: 16px; display: flex; flex-direction: row; diff --git a/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts index 084471af4a..31cca50752 100644 --- a/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts +++ b/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts @@ -226,7 +226,7 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog { .encryption-key { border: 1px solid var(--divider-color); background-color: var(--primary-background-color); - border-radius: 8px; + border-radius: var(--ha-border-radius-md); padding: 16px; display: flex; flex-direction: row; diff --git a/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts index df253c31bb..f9052e8442 100644 --- a/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts +++ b/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts @@ -148,7 +148,7 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog { .encryption-key { border: 1px solid var(--divider-color); background-color: var(--primary-background-color); - border-radius: 8px; + border-radius: var(--ha-border-radius-md); padding: 16px; display: flex; flex-direction: row; diff --git a/src/panels/config/backup/ha-config-backup-details.ts b/src/panels/config/backup/ha-config-backup-details.ts index 65167d8236..9f616a7923 100644 --- a/src/panels/config/backup/ha-config-backup-details.ts +++ b/src/panels/config/backup/ha-config-backup-details.ts @@ -8,6 +8,8 @@ import { } from "@mdi/js"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; +import { isComponentLoaded } from "../../../common/config/is_component_loaded"; +import { fireEvent } from "../../../common/dom/fire_event"; import { computeDomain } from "../../../common/entity/compute_domain"; import { navigate } from "../../../common/navigate"; import "../../../components/ha-alert"; @@ -15,19 +17,17 @@ import "../../../components/ha-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; import "../../../components/ha-fade-in"; -import "../../../components/ha-spinner"; import "../../../components/ha-icon-button"; import "../../../components/ha-list-item"; import "../../../components/ha-md-list"; import "../../../components/ha-md-list-item"; +import "../../../components/ha-spinner"; import type { BackupAgent, BackupConfig, BackupContentAgent, BackupContentExtended, } from "../../../data/backup"; -import "./components/ha-backup-details-summary"; -import "./components/ha-backup-details-restore"; import { compareAgents, computeBackupAgentName, @@ -36,14 +36,14 @@ import { isLocalAgent, isNetworkMountAgent, } from "../../../data/backup"; +import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; import "../../../layouts/hass-subpage"; import type { HomeAssistant } from "../../../types"; import { brandsUrl } from "../../../util/brands-url"; +import "./components/ha-backup-details-restore"; +import "./components/ha-backup-details-summary"; import { showRestoreBackupDialog } from "./dialogs/show-dialog-restore-backup"; -import { fireEvent } from "../../../common/dom/fire_event"; -import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; import { downloadBackup } from "./helper/download_backup"; -import { isComponentLoaded } from "../../../common/config/is_component_loaded"; interface Agent extends BackupContentAgent { id: string; @@ -408,7 +408,7 @@ class HaConfigBackupDetails extends LitElement { width: 8px; height: 8px; background-color: var(--disabled-color); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); flex: none; } .dot.success { diff --git a/src/panels/config/backup/ha-config-backup-location.ts b/src/panels/config/backup/ha-config-backup-location.ts index 556d032cf3..bbee35968c 100644 --- a/src/panels/config/backup/ha-config-backup-location.ts +++ b/src/panels/config/backup/ha-config-backup-location.ts @@ -385,7 +385,7 @@ class HaConfigBackupDetails extends LitElement { width: 8px; height: 8px; background-color: var(--disabled-color); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); flex: none; } .dot.success { diff --git a/src/panels/config/cloud/account/dialog-cloud-support-package.ts b/src/panels/config/cloud/account/dialog-cloud-support-package.ts index eb43588f46..2183a4fec7 100644 --- a/src/panels/config/cloud/account/dialog-cloud-support-package.ts +++ b/src/panels/config/cloud/account/dialog-cloud-support-package.ts @@ -4,12 +4,12 @@ import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-alert"; import "../../../../components/ha-button"; -import "../../../../components/ha-spinner"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-markdown-element"; import "../../../../components/ha-md-dialog"; import type { HaMdDialog } from "../../../../components/ha-md-dialog"; import "../../../../components/ha-select"; +import "../../../../components/ha-spinner"; import "../../../../components/ha-textarea"; import { fetchSupportPackage } from "../../../../data/cloud"; import type { HomeAssistant } from "../../../../types"; @@ -161,7 +161,7 @@ export class DialogSupportPackage extends LitElement { } table > tbody > tr > td { - border-radius: 0; + border-radius: var(--ha-border-radius-square); } table > tbody > tr { @@ -183,14 +183,14 @@ export class DialogSupportPackage extends LitElement { display: table-cell; text-align: left; vertical-align: middle; - border-radius: 2px; + border-radius: var(--ha-border-radius-sm); } details { background-color: var(--secondary-background-color); padding: 16px 24px; margin: 8px 0; border: 1px solid var(--divider-color); - border-radius: 16px; + border-radius: var(--ha-border-radius-xl); } summary { font-weight: var(--ha-font-weight-bold); diff --git a/src/panels/config/core/ha-config-system-navigation.ts b/src/panels/config/core/ha-config-system-navigation.ts index 5e673e7e7e..a42719d52d 100644 --- a/src/panels/config/core/ha-config-system-navigation.ts +++ b/src/panels/config/core/ha-config-system-navigation.ts @@ -257,7 +257,7 @@ class HaConfigSystemNavigation extends LitElement { @media all and (max-width: 600px) { ha-card { border-width: 1px 0; - border-radius: 0; + border-radius: var(--ha-border-radius-square); box-shadow: unset; } ha-config-section { diff --git a/src/panels/config/dashboard/dashboard-card.ts b/src/panels/config/dashboard/dashboard-card.ts index 9ce1c30ff1..6080ed5737 100644 --- a/src/panels/config/dashboard/dashboard-card.ts +++ b/src/panels/config/dashboard/dashboard-card.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-ripple"; @@ -48,7 +48,7 @@ export class DashboardCard extends LitElement { display: flex; flex-direction: row; justify-content: space-between; - border-radius: 12px; + border-radius: var(--ha-border-radius-lg); background: var(--primary-background-color, #fafafa); cursor: pointer; position: relative; diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index 4576063340..870b2f2e21 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -38,6 +38,7 @@ import { showQuickBar, } from "../../../dialogs/quick-bar/show-dialog-quick-bar"; import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart"; +import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog"; import type { PageNavigation } from "../../../layouts/hass-tabs-subpage"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { haStyle } from "../../../resources/styles"; @@ -49,7 +50,6 @@ import { configSections } from "../ha-panel-config"; import "../repairs/ha-config-repairs"; import "./ha-config-navigation"; import "./ha-config-updates"; -import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog"; const randomTip = (openFn: any, hass: HomeAssistant, narrow: boolean) => { const weighted: string[] = []; @@ -417,7 +417,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) { @media all and (max-width: 600px) { ha-card { border-width: 1px 0; - border-radius: 0; + border-radius: var(--ha-border-radius-square); box-shadow: unset; } ha-config-section { diff --git a/src/panels/config/devices/device-detail/integration-elements/matter/ha-device-info-matter.ts b/src/panels/config/devices/device-detail/integration-elements/matter/ha-device-info-matter.ts index a536b6620b..61eebe4611 100644 --- a/src/panels/config/devices/device-detail/integration-elements/matter/ha-device-info-matter.ts +++ b/src/panels/config/devices/device-detail/integration-elements/matter/ha-device-info-matter.ts @@ -150,7 +150,7 @@ export class HaDeviceInfoMatter extends SubscribeMixin(LitElement) { margin: 8px -16px 0; --expansion-panel-summary-padding: 0 16px; --expansion-panel-content-padding: 0 16px; - --ha-card-border-radius: 0px; + --ha-card-border-radius: var(--ha-border-radius-square); } `, ]; diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index 16b79b9296..6a37e5eed2 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -24,6 +24,7 @@ import { computeEntityEntryName } from "../../../common/entity/compute_entity_na import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { stringCompare } from "../../../common/string/compare"; +import { slugify } from "../../../common/string/slugify"; import { groupBy } from "../../../common/util/group-by"; import "../../../components/entity/ha-battery-icon"; import "../../../components/ha-alert"; @@ -89,7 +90,6 @@ import { loadDeviceRegistryDetailDialog, showDeviceRegistryDetailDialog, } from "./device-registry-detail/show-dialog-device-registry-detail"; -import { slugify } from "../../../common/string/slugify"; export interface EntityRegistryStateEntry extends EntityRegistryEntry { stateName?: string | null; @@ -1618,7 +1618,10 @@ export class HaConfigDevicePage extends LitElement { } ha-card:has(ha-logbook) { - padding-bottom: var(--ha-card-border-radius, 12px); + padding-bottom: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); } ha-logbook { diff --git a/src/panels/config/entities/entity-registry-settings-editor.ts b/src/panels/config/entities/entity-registry-settings-editor.ts index 516e9af2a8..ab63310ef0 100644 --- a/src/panels/config/entities/entity-registry-settings-editor.ts +++ b/src/panels/config/entities/entity-registry-settings-editor.ts @@ -1556,7 +1556,7 @@ export class EntityRegistrySettingsEditor extends LitElement { border-bottom-color: var(--divider-color); } .menu-item { - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); margin-top: 3px; margin-bottom: 3px; overflow: hidden; diff --git a/src/panels/config/hardware/dialog-hardware-available.ts b/src/panels/config/hardware/dialog-hardware-available.ts index aad0e73ae2..15cec4b227 100644 --- a/src/panels/config/hardware/dialog-hardware-available.ts +++ b/src/panels/config/hardware/dialog-hardware-available.ts @@ -191,7 +191,7 @@ class DialogHardwareAvailable extends LitElement implements HassDialog { pre, code { background-color: var(--markdown-code-background-color, none); - border-radius: 3px; + border-radius: var(--ha-border-radius-sm); } pre { padding: 16px; diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts index aed00830d5..75e28b8f03 100644 --- a/src/panels/config/helpers/forms/ha-input_select-form.ts +++ b/src/panels/config/helpers/forms/ha-input_select-form.ts @@ -227,7 +227,7 @@ class HaInputSelectForm extends LitElement { } .option { border: 1px solid var(--divider-color); - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); margin-top: 4px; --mdc-icon-button-size: 24px; --mdc-ripple-color: transparent; diff --git a/src/panels/config/helpers/forms/ha-schedule-form.ts b/src/panels/config/helpers/forms/ha-schedule-form.ts index e322cb3d2b..6bccf9c716 100644 --- a/src/panels/config/helpers/forms/ha-schedule-form.ts +++ b/src/panels/config/helpers/forms/ha-schedule-form.ts @@ -459,8 +459,7 @@ class HaScheduleForm extends LitElement { height: 0.4rem; } .fc-scroller::-webkit-scrollbar-thumb { - -webkit-border-radius: 4px; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); background: var(--scrollbar-thumb-color); } .fc-scroller { diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts index eb3c5da4c0..a97e6310c1 100644 --- a/src/panels/config/info/ha-config-info.ts +++ b/src/panels/config/info/ha-config-info.ts @@ -23,13 +23,13 @@ import type { HassioHassOSInfo } from "../../../data/hassio/host"; import { fetchHassioHassOsInfo } from "../../../data/hassio/host"; import type { HassioInfo } from "../../../data/hassio/supervisor"; import { fetchHassioInfo } from "../../../data/hassio/supervisor"; +import { subscribeSystemHealthInfo } from "../../../data/system_health"; import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog"; import "../../../layouts/hass-subpage"; import { mdiHomeAssistant } from "../../../resources/home-assistant-logo-svg"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant, Route } from "../../../types"; import { documentationUrl } from "../../../util/documentation-url"; -import { subscribeSystemHealthInfo } from "../../../data/system_health"; const JS_TYPE = __BUILD__; const JS_VERSION = __VERSION__; @@ -393,7 +393,7 @@ class HaConfigInfo extends LitElement { } .icon-background { - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } .custom-ui { diff --git a/src/panels/config/integrations/ha-config-entry-row.ts b/src/panels/config/integrations/ha-config-entry-row.ts index 89dafad842..cffa113c3e 100644 --- a/src/panels/config/integrations/ha-config-entry-row.ts +++ b/src/panels/config/integrations/ha-config-entry-row.ts @@ -22,9 +22,9 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; -import { caseInsensitiveStringCompare } from "../../../common/string/compare"; -import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name"; import { isDevVersion } from "../../../common/config/version"; +import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name"; +import { caseInsensitiveStringCompare } from "../../../common/string/compare"; import { deleteApplicationCredential, fetchApplicationCredentialsConfigEntry, @@ -775,7 +775,7 @@ class HaConfigEntryRow extends LitElement { } ha-md-list { border: 1px solid var(--divider-color); - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); padding: 0; } :host([narrow]) { @@ -794,7 +794,7 @@ class HaConfigEntryRow extends LitElement { } .toggle-devices-row { overflow: hidden; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); } .toggle-devices-row.expanded { border-bottom-left-radius: 0; diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts index 805abec4f3..d302cb1a5e 100644 --- a/src/panels/config/integrations/ha-config-integration-page.ts +++ b/src/panels/config/integrations/ha-config-integration-page.ts @@ -1051,7 +1051,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { } ha-md-list { border: 1px solid var(--divider-color); - border-radius: 8px; + border-radius: var(--ha-border-radius-md); padding: 0; } .discovered { diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts index b15fdd416a..5c23131ceb 100644 --- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts +++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts @@ -1052,7 +1052,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( .badge { min-width: 20px; min-height: 20px; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); font-weight: var(--ha-font-weight-normal); background-color: var(--primary-color); display: flex; diff --git a/src/panels/config/integrations/ha-config-sub-entry-row.ts b/src/panels/config/integrations/ha-config-sub-entry-row.ts index 582b24e954..c00ff0ac00 100644 --- a/src/panels/config/integrations/ha-config-sub-entry-row.ts +++ b/src/panels/config/integrations/ha-config-sub-entry-row.ts @@ -275,7 +275,7 @@ class HaConfigSubEntryRow extends LitElement { } ha-md-list { border: 1px solid var(--divider-color); - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); padding: 0; margin: 16px; margin-top: 0; diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts index 53d1932c0b..e72cf36ca3 100644 --- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts +++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts @@ -3,10 +3,11 @@ import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/ha-spinner"; -import { createCloseHeading } from "../../../../../components/ha-dialog"; +import { copyToClipboard } from "../../../../../common/util/copy-clipboard"; import "../../../../../components/ha-button"; +import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-qr-code"; +import "../../../../../components/ha-spinner"; import { domainToName } from "../../../../../data/integration"; import type { MatterCommissioningParameters } from "../../../../../data/matter"; import { openMatterCommissioningWindow } from "../../../../../data/matter"; @@ -14,7 +15,6 @@ import { haStyleDialog } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; import { brandsUrl } from "../../../../../util/brands-url"; import type { MatterOpenCommissioningWindowDialogParams } from "./show-dialog-matter-open-commissioning-window"; -import { copyToClipboard } from "../../../../../common/util/copy-clipboard"; @customElement("dialog-matter-open-commissioning-window") class DialogMatterOpenCommissioningWindow extends LitElement { @@ -246,7 +246,7 @@ class DialogMatterOpenCommissioningWindow extends LitElement { flex-direction: column; align-items: center; border: 2px solid; - border-radius: 16px; + border-radius: var(--ha-border-radius-xl); padding: 16px; } diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-existing.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-existing.ts index 685ecc91e1..1871604dd5 100644 --- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-existing.ts +++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-existing.ts @@ -3,8 +3,8 @@ import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../../../common/dom/fire_event"; import "../../../../../../components/ha-icon-next"; -import "../../../../../../components/ha-md-list-item"; import "../../../../../../components/ha-md-list"; +import "../../../../../../components/ha-md-list-item"; import type { HomeAssistant } from "../../../../../../types"; import type { MatterAddDeviceStep } from "../dialog-matter-add-device"; import { sharedStyles } from "./matter-add-device-shared-styles"; @@ -100,7 +100,7 @@ class MatterAddDeviceExisting extends LitElement { .logo { width: 48px; height: 48px; - border-radius: 12px; + border-radius: var(--ha-border-radius-lg); border: 1px solid var(--divider-color); padding: 10px; box-sizing: border-box; diff --git a/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts b/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts index ef7f6fecfe..934cb86618 100644 --- a/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts +++ b/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts @@ -708,7 +708,7 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) { overflow: visible; } ha-list-item img { - border-radius: 0; + border-radius: var(--ha-border-radius-square); } ha-svg-icon[slot="meta"] { width: 24px; @@ -729,7 +729,7 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) { background-color: var(--light-primary-color); color: var(--secondary-text-color); padding: 16px; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); margin-bottom: 8px; } ha-card { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts index 37214af066..cd414218fc 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts @@ -105,10 +105,10 @@ class ZHADevicePairingStatusCard extends LitElement { margin-bottom: 20px; /* Padding is subtracted for nested elements with border radiuses */ border-top-left-radius: calc( - var(--ha-card-border-radius, 12px) - 2px + var(--ha-card-border-radius, var(--ha-border-radius-lg)) - 2px ); border-top-right-radius: calc( - var(--ha-card-border-radius, 12px) - 2px + var(--ha-card-border-radius, var(--ha-border-radius-lg)) - 2px ); } .discovered.initialized .header { diff --git a/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts index 4e0fad4951..970eb7777e 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts @@ -1116,7 +1116,7 @@ class DialogZWaveJSAddNode extends SubscribeMixin(LitElement) { --mdc-dialog-min-height: 100%; --mdc-dialog-max-height: 100%; --vertical-align-dialog: flex-end; - --ha-dialog-border-radius: 0; + --ha-dialog-border-radius: var(--ha-border-radius-square); } } ha-fade-in { diff --git a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts index 52fd92e5ca..432615230e 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts @@ -133,7 +133,7 @@ export class ZWaveJsAddNodeSearchingDevices extends WakeLockMixin(LitElement) { height: 128px; } .searching-spinner .circle { - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); background-color: var(--light-primary-color); position: absolute; width: calc(100% - 32px); diff --git a/src/panels/config/labels/ha-config-labels.ts b/src/panels/config/labels/ha-config-labels.ts index dbc54a0a8e..3d1bd195aa 100644 --- a/src/panels/config/labels/ha-config-labels.ts +++ b/src/panels/config/labels/ha-config-labels.ts @@ -9,8 +9,8 @@ import { import type { PropertyValues } from "lit"; import { LitElement, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; -import memoizeOne from "memoize-one"; import { styleMap } from "lit/directives/style-map"; +import memoizeOne from "memoize-one"; import { computeCssColor } from "../../../common/color/compute-color"; import { formatShortDateTime } from "../../../common/datetime/format_date_time"; import { storage } from "../../../common/decorators/storage"; @@ -107,7 +107,7 @@ export class HaConfigLabels extends LitElement { ? html`
= { no_state: 0, @@ -807,7 +807,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) { --mdc-dialog-min-height: 100%; --mdc-dialog-max-height: 100%; --vertical-align-dialog: flex-end; - --ha-dialog-border-radius: 0; + --ha-dialog-border-radius: var(--ha-border-radius-square); --dialog-content-padding: 0; } diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index c0a6528b49..053804d454 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -5,10 +5,10 @@ import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-alert"; -import "../../../components/ha-spinner"; import "../../../components/ha-button"; -import "../../../components/ha-code-editor"; import "../../../components/ha-card"; +import "../../../components/ha-code-editor"; +import "../../../components/ha-spinner"; import type { RenderTemplateResult } from "../../../data/ws-templates"; import { subscribeRenderTemplate } from "../../../data/ws-templates"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; @@ -343,13 +343,16 @@ ${type === "object" overflow: auto; max-height: calc( var(--code-mirror-max-height) + - 47px - var(--ha-card-border-radius, 12px) + 47px - var(--ha-card-border-radius, var(--ha-border-radius-lg)) ); } .content.horizontal .render-pane { overflow: hidden; - padding-bottom: var(--ha-card-border-radius, 12px); + padding-bottom: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); } .all_listeners { diff --git a/src/panels/logbook/ha-logbook-renderer.ts b/src/panels/logbook/ha-logbook-renderer.ts index 43a4a6af10..ad5d89afbf 100644 --- a/src/panels/logbook/ha-logbook-renderer.ts +++ b/src/panels/logbook/ha-logbook-renderer.ts @@ -598,7 +598,7 @@ class HaLogbookRenderer extends LitElement { background-color: var(--disabled-color); height: 8px; width: 8px; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); flex-shrink: 0; margin-right: 12px; margin-inline-start: initial; diff --git a/src/panels/lovelace/badges/hui-view-badges.ts b/src/panels/lovelace/badges/hui-view-badges.ts index f443b99adc..3b987ce69a 100644 --- a/src/panels/lovelace/badges/hui-view-badges.ts +++ b/src/panels/lovelace/badges/hui-view-badges.ts @@ -249,7 +249,7 @@ export class HuiViewBadges extends LitElement { padding: 6px 20px 6px 20px; box-sizing: border-box; width: auto; - border-radius: 18px; + border-radius: var(--ha-border-radius-2xl); background-color: transparent; border-width: 2px; border-style: dashed; diff --git a/src/panels/lovelace/cards/clock/hui-clock-card-analog.ts b/src/panels/lovelace/cards/clock/hui-clock-card-analog.ts index dceec4d7ae..8b63c3af08 100644 --- a/src/panels/lovelace/cards/clock/hui-clock-card-analog.ts +++ b/src/panels/lovelace/cards/clock/hui-clock-card-analog.ts @@ -1,10 +1,10 @@ -import { css, html, LitElement, nothing } from "lit"; import type { PropertyValues } from "lit"; +import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; -import type { ClockCardConfig } from "../types"; -import type { HomeAssistant } from "../../../../types"; import { resolveTimeZone } from "../../../../common/datetime/resolve-time-zone"; +import type { HomeAssistant } from "../../../../types"; +import type { ClockCardConfig } from "../types"; function romanize12HourClock(num: number) { const numerals = [ @@ -272,7 +272,7 @@ export class HuiClockCardAnalog extends LitElement { .dial-border { border: 2px solid var(--divider-color); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } .tick { @@ -346,7 +346,7 @@ export class HuiClockCardAnalog extends LitElement { left: 50%; width: 8px; height: 8px; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); background: var(--primary-text-color); transform: translate(-50%, -50%); z-index: 3; diff --git a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts index 6797a13635..ca1cb0b1cb 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts @@ -13,26 +13,26 @@ import { } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; -import { css, html, LitElement, svg, nothing } from "lit"; +import { css, html, LitElement, nothing, svg } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; -import "../../../../components/ha-card"; import "../../../../components/ha-button"; +import "../../../../components/ha-card"; import "../../../../components/ha-svg-icon"; import type { EnergyData } from "../../../../data/energy"; import { - energySourcesByType, - getEnergyDataCollection, - formatConsumptionShort, - getSummedData, computeConsumptionData, + energySourcesByType, + formatConsumptionShort, + getEnergyDataCollection, + getSummedData, } from "../../../../data/energy"; import { calculateStatisticsSumGrowth } from "../../../../data/recorder"; import { SubscribeMixin } from "../../../../mixins/subscribe-mixin"; import type { HomeAssistant } from "../../../../types"; +import { hasConfigChanged } from "../../common/has-changed"; import type { LovelaceCard } from "../../types"; import type { EnergyDistributionCardConfig } from "../types"; -import { hasConfigChanged } from "../../common/has-changed"; const CIRCLE_CIRCUMFERENCE = 238.76104; @@ -877,7 +877,7 @@ class HuiEnergyDistrubutionCard .circle { width: 80px; height: 80px; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); box-sizing: border-box; border: 2px solid; display: flex; diff --git a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts index 444aeea85b..4ac7140e9c 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts @@ -686,7 +686,7 @@ export class HuiEnergySourcesTableCard .bullet { border-width: 1px; border-style: solid; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); height: 16px; width: 32px; } diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index d3a40a46e4..0909584d00 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -433,7 +433,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { ha-control-button { width: 56px; height: 56px; - --control-button-border-radius: 28px; + --control-button-border-radius: var(--ha-border-radius-4xl); --mdc-icon-size: 24px; font-size: var(--ha-font-size-2xl); } diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts index ab6fceb757..2c5cdc7ff4 100644 --- a/src/panels/lovelace/cards/hui-area-card.ts +++ b/src/panels/lovelace/cards/hui-area-card.ts @@ -664,14 +664,14 @@ export class HuiAreaCard extends LitElement implements LovelaceCard { left: 0; bottom: 0; right: 0; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); margin: calc(-1 * var(--ha-card-border-width, 1px)); overflow: hidden; } .header { flex: 1; overflow: hidden; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); border-end-end-radius: 0; border-end-start-radius: 0; pointer-events: none; @@ -789,7 +789,7 @@ export class HuiAreaCard extends LitElement implements LovelaceCard { } .alert { background-color: var(--orange-color); - border-radius: 12px; + border-radius: var(--ha-border-radius-lg); width: 24px; height: 24px; padding: 2px; diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 79d4e86d93..baae0cddb1 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -278,15 +278,27 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { } .header { - border-top-left-radius: var(--ha-card-border-radius, 12px); - border-top-right-radius: var(--ha-card-border-radius, 12px); + border-top-left-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); + border-top-right-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); margin-bottom: 16px; overflow: hidden; } .footer { - border-bottom-left-radius: var(--ha-card-border-radius, 12px); - border-bottom-right-radius: var(--ha-card-border-radius, 12px); + border-bottom-left-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); + border-bottom-right-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); margin-top: -16px; overflow: hidden; } diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts index 7bc717f32d..438fea8a84 100644 --- a/src/panels/lovelace/cards/hui-error-card.ts +++ b/src/panels/lovelace/cards/hui-error-card.ts @@ -83,7 +83,7 @@ export class HuiErrorCard extends LitElement implements LovelaceCard { opacity: 0.12; pointer-events: none; content: ""; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); } .header { display: flex; diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index c206513615..197c3c3e4b 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -186,7 +186,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { .entity:focus { outline: none; background: var(--divider-color); - border-radius: 14px; + border-radius: var(--ha-border-radius-lg); padding: 4px; margin-top: -4px; margin-bottom: 8px; @@ -217,7 +217,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { opacity: 0.12; pointer-events: none; content: ""; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); background-color: var(--warning-color); } state-badge { diff --git a/src/panels/lovelace/cards/hui-home-summary-card.ts b/src/panels/lovelace/cards/hui-home-summary-card.ts index f8a7aab2e0..239610ffdf 100644 --- a/src/panels/lovelace/cards/hui-home-summary-card.ts +++ b/src/panels/lovelace/cards/hui-home-summary-card.ts @@ -312,7 +312,7 @@ export class HuiHomeSummaryCard extends LitElement implements LovelaceCard { left: 0; bottom: 0; right: 0; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); margin: calc(-1 * var(--ha-card-border-width, 1px)); overflow: hidden; } diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts index 761369d350..4babf6ccf5 100644 --- a/src/panels/lovelace/cards/hui-humidifier-card.ts +++ b/src/panels/lovelace/cards/hui-humidifier-card.ts @@ -256,7 +256,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard { right: 0; inset-inline-end: 0px; inset-inline-start: initial; - border-radius: 100%; + border-radius: var(--ha-border-radius-pill); color: var(--secondary-text-color); direction: var(--direction); } diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index 263d92faaf..018b671198 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -265,7 +265,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard { right: 0; inset-inline-start: initial; inset-inline-end: 0; - border-radius: 100%; + border-radius: var(--ha-border-radius-pill); color: var(--secondary-text-color); z-index: 1; direction: var(--direction); @@ -306,7 +306,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard { position: absolute; max-width: calc(100% - 40px); box-sizing: border-box; - border-radius: 100%; + border-radius: var(--ha-border-radius-pill); top: 50%; left: 50%; transform: translate(-50%, -50%); diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index 74160b8be6..b6eaf4cfde 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -541,7 +541,7 @@ class HuiMapCard extends LitElement implements LovelaceCard { width: 100%; height: 100%; background: inherit; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); overflow: hidden; } diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts index 5c52a6c839..897c03b4fc 100644 --- a/src/panels/lovelace/cards/hui-plant-status-card.ts +++ b/src/panels/lovelace/cards/hui-plant-status-card.ts @@ -223,7 +223,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard { .attributes:focus { outline: none; background: var(--divider-color); - border-radius: 100%; + border-radius: var(--ha-border-radius-pill); } .attributes div { diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index 403d75d163..9fad7a09de 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -6,6 +6,7 @@ import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { fireEvent } from "../../../common/dom/fire_event"; +import { computeDomain } from "../../../common/entity/compute_domain"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { stateColorCss } from "../../../common/entity/state_color"; import "../../../components/ha-card"; @@ -23,7 +24,6 @@ import type { LovelaceGridOptions, } from "../types"; import type { ThermostatCardConfig } from "./types"; -import { computeDomain } from "../../../common/entity/compute_domain"; @customElement("hui-thermostat-card") export class HuiThermostatCard extends LitElement implements LovelaceCard { @@ -265,7 +265,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { right: 0; inset-inline-end: 0px; inset-inline-start: initial; - border-radius: 100%; + border-radius: var(--ha-border-radius-pill); color: var(--secondary-text-color); direction: var(--direction); } diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts index 2083fb0a28..91a588ce41 100644 --- a/src/panels/lovelace/cards/hui-tile-card.ts +++ b/src/panels/lovelace/cards/hui-tile-card.ts @@ -386,7 +386,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard { left: 0; bottom: 0; right: 0; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); margin: calc(-1 * var(--ha-card-border-width, 1px)); overflow: hidden; } @@ -462,7 +462,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard { /* Make sure we display the whole image */ ha-tile-icon.image[data-domain="update"] { - --tile-icon-border-radius: 0; + --tile-icon-border-radius: var(--ha-border-radius-square); } /* Make sure we display the almost the whole image but it often use text */ ha-tile-icon.image[data-domain="media_player"] { diff --git a/src/panels/lovelace/components/hui-badge-edit-mode.ts b/src/panels/lovelace/components/hui-badge-edit-mode.ts index 521c47fff9..0bc367daab 100644 --- a/src/panels/lovelace/components/hui-badge-edit-mode.ts +++ b/src/panels/lovelace/components/hui-badge-edit-mode.ts @@ -271,7 +271,10 @@ export class HuiBadgeEditMode extends LitElement { display: flex; align-items: center; justify-content: center; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); z-index: 0; } .edit-overlay { @@ -279,14 +282,17 @@ export class HuiBadgeEditMode extends LitElement { inset: 0; opacity: 0.8; background-color: var(--primary-background-color); - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); z-index: 0; } .edit ha-svg-icon { display: flex; position: relative; color: var(--primary-text-color); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); padding: 4px; background: var(--secondary-background-color); --mdc-icon-size: 16px; @@ -300,7 +306,7 @@ export class HuiBadgeEditMode extends LitElement { } .more ha-icon-button { cursor: pointer; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); background: var(--secondary-background-color); --mdc-icon-button-size: 24px; --mdc-icon-size: 16px; diff --git a/src/panels/lovelace/components/hui-card-edit-mode.ts b/src/panels/lovelace/components/hui-card-edit-mode.ts index d42fc1590d..6d857d8489 100644 --- a/src/panels/lovelace/components/hui-card-edit-mode.ts +++ b/src/panels/lovelace/components/hui-card-edit-mode.ts @@ -303,7 +303,10 @@ export class HuiCardEditMode extends LitElement { display: flex; align-items: center; justify-content: center; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); z-index: 0; } .control-overlay { @@ -312,14 +315,17 @@ export class HuiCardEditMode extends LitElement { opacity: 0.8; background-color: var(--primary-background-color); border: 1px solid var(--divider-color); - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); z-index: 0; } .control ha-svg-icon { display: flex; position: relative; color: var(--primary-text-color); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); padding: 8px; background: var(--secondary-background-color); --mdc-icon-size: 20px; @@ -333,7 +339,7 @@ export class HuiCardEditMode extends LitElement { } .more ha-icon-button { cursor: pointer; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); background: var(--secondary-background-color); --mdc-icon-button-size: 32px; --mdc-icon-size: 20px; diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index 9db8553b59..64c2acf537 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -14,9 +14,9 @@ import { LitElement, css, html, nothing } from "lit"; import { customElement, property, queryAssignedElements } from "lit/decorators"; import { storage } from "../../../common/decorators/storage"; import { fireEvent } from "../../../common/dom/fire_event"; +import "../../../components/ha-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; -import "../../../components/ha-button"; import "../../../components/ha-icon-button"; import "../../../components/ha-list-item"; import type { LovelaceCardConfig } from "../../../data/lovelace/config/card"; @@ -229,7 +229,7 @@ export class HuiCardOptions extends LitElement { width: 24px; line-height: var(--ha-line-height-normal); box-sizing: border-box; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); font-weight: var(--ha-font-weight-medium); text-align: center; font-size: var(--ha-font-size-m); diff --git a/src/panels/lovelace/components/hui-section-edit-mode.ts b/src/panels/lovelace/components/hui-section-edit-mode.ts index 5bb01231c8..7c8777ac03 100644 --- a/src/panels/lovelace/components/hui-section-edit-mode.ts +++ b/src/panels/lovelace/components/hui-section-edit-mode.ts @@ -119,7 +119,10 @@ export class HuiSectionEditMode extends LitElement { align-items: center; justify-content: center; transition: opacity 0.2s ease-in-out; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background: var(--secondary-background-color); @@ -135,7 +138,10 @@ export class HuiSectionEditMode extends LitElement { .section-wrapper { padding: 8px; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); border-start-end-radius: 0; border: 2px dashed var(--divider-color); min-height: var(--row-height); diff --git a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts index 7efb3f8032..9c594844a0 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts @@ -495,7 +495,10 @@ export class HuiBadgePicker extends LitElement { max-width: 500px; display: flex; flex-direction: column; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); background: var(--primary-background-color, #fafafa); cursor: pointer; position: relative; @@ -545,7 +548,10 @@ export class HuiBadgePicker extends LitElement { height: 100%; z-index: 1; box-sizing: border-box; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); } .manual { @@ -559,7 +565,7 @@ export class HuiBadgePicker extends LitElement { right: 8px; inset-inline-start: 8px; inset-inline-end: 8px; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); --mdc-icon-size: 16px; line-height: 16px; box-sizing: border-box; diff --git a/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts b/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts index 5ceee2696b..8f5e22fdec 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts @@ -473,7 +473,7 @@ export class HuiDialogEditBadge height: max-content; background: var(--primary-background-color); padding: 10px; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); display: flex; flex-direction: column; justify-content: center; diff --git a/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts b/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts index e0e8e9605f..f13331b577 100644 --- a/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts +++ b/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts @@ -376,7 +376,7 @@ export class HaGridLayoutSlider extends LitElement { margin: auto; height: 16px; width: 100%; - border-radius: 8px; + border-radius: var(--ha-border-radius-md); overflow: hidden; } :host([vertical]) .track { @@ -472,7 +472,7 @@ export class HaGridLayoutSlider extends LitElement { background-color: var(--clear-background-color); color: var(--primary-text-color); font-size: var(--control-slider-tooltip-font-size); - border-radius: 0.8em; + border-radius: var(--ha-border-radius-lg); padding: 0.2em 0.4em; opacity: 0; white-space: nowrap; diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index a59bc30d9d..5dcfc152a9 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -501,7 +501,7 @@ export class HuiCardPicker extends LitElement { max-width: 500px; display: flex; flex-direction: column; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); background: var(--primary-background-color, #fafafa); cursor: pointer; position: relative; @@ -550,7 +550,7 @@ export class HuiCardPicker extends LitElement { height: 100%; z-index: 1; box-sizing: border-box; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); } .manual { @@ -564,7 +564,7 @@ export class HuiCardPicker extends LitElement { right: 8px inset-inline-start: 8px; inset-inline-end: 8px; - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); --mdc-icon-size: 16px; line-height: 16px; box-sizing: border-box; diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index 4aa4aafcd4..eb29fecb48 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -471,7 +471,7 @@ export class HuiDialogEditCard height: max-content; background: var(--primary-background-color); padding: 4px; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); position: sticky; top: 0; } diff --git a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts index 9d8b000ea4..8097ee5cb4 100644 --- a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts +++ b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts @@ -13,6 +13,7 @@ import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; +import { storage } from "../../../../common/decorators/storage"; import { dynamicElement } from "../../../../common/dom/dynamic-element-directive"; import { fireEvent } from "../../../../common/dom/fire_event"; import { preventDefault } from "../../../../common/dom/prevent_default"; @@ -39,7 +40,6 @@ import { validateConditionalConfig, } from "../../common/validate-condition"; import type { LovelaceConditionEditorConstructor } from "./types"; -import { storage } from "../../../../common/decorators/storage"; @customElement("ha-card-condition-editor") export class HaCardConditionEditor extends LitElement { @@ -384,10 +384,16 @@ export class HaCardConditionEditor extends LitElement { transition: max-height 0.3s; text-align: center; border-top-right-radius: calc( - var(--ha-card-border-radius, 12px) - var(--ha-card-border-width, 1px) + var(--ha-card-border-radius, var(--ha-border-radius-lg)) - var( + --ha-card-border-width, + 1px + ) ); border-top-left-radius: calc( - var(--ha-card-border-radius, 12px) - var(--ha-card-border-width, 1px) + var(--ha-card-border-radius, var(--ha-border-radius-lg)) - var( + --ha-card-border-width, + 1px + ) ); } .testing.active { @@ -401,7 +407,7 @@ export class HaCardConditionEditor extends LitElement { } .container { position: relative; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); border: 1px solid var(--divider-color); } `, diff --git a/src/panels/lovelace/editor/config-elements/config-elements-style.ts b/src/panels/lovelace/editor/config-elements/config-elements-style.ts index 8810a230f1..2a3b7182c2 100644 --- a/src/panels/lovelace/editor/config-elements/config-elements-style.ts +++ b/src/panels/lovelace/editor/config-elements/config-elements-style.ts @@ -37,8 +37,8 @@ export const configElementStyle = css` ha-expansion-panel { display: block; --expansion-panel-content-padding: 0; - border-radius: 6px; - --ha-card-border-radius: 6px; + border-radius: var(--ha-border-radius-md); + --ha-card-border-radius: var(--ha-border-radius-md); } ha-expansion-panel .content { padding: 12px; diff --git a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts index 6f3c9dfa0b..74af3ef545 100644 --- a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts +++ b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts @@ -156,7 +156,7 @@ export class HuiUnusedEntities extends LitElement { } ha-card { --ha-card-box-shadow: none; - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); } hui-entity-picker-table { flex-grow: 1; diff --git a/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts index 2df108fa3f..f28d5f2000 100644 --- a/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts +++ b/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts @@ -193,7 +193,7 @@ export class HuiViewBackgroundEditor extends LitElement { static styles = css` :host { display: block; - --file-upload-image-border-radius: 4px; + --file-upload-image-border-radius: var(--ha-border-radius-sm); } `; } diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts index 7d31a9f441..ebb4a802d0 100644 --- a/src/panels/lovelace/elements/hui-icon-element.ts +++ b/src/panels/lovelace/elements/hui-icon-element.ts @@ -2,14 +2,14 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import "../../../components/ha-icon"; +import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler"; import type { HomeAssistant } from "../../../types"; import { computeTooltip } from "../common/compute-tooltip"; import { actionHandler } from "../common/directives/action-handler-directive"; import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; -import type { IconElementConfig, LovelaceElement } from "./types"; import type { LovelacePictureElementEditor } from "../types"; -import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler"; +import type { IconElementConfig, LovelaceElement } from "./types"; @customElement("hui-icon-element") export class HuiIconElement extends LitElement implements LovelaceElement { @@ -70,7 +70,7 @@ export class HuiIconElement extends LitElement implements LovelaceElement { ha-icon:focus { outline: none; background: var(--divider-color); - border-radius: 100%; + border-radius: var(--ha-border-radius-pill); } `; } diff --git a/src/panels/lovelace/elements/hui-image-element.ts b/src/panels/lovelace/elements/hui-image-element.ts index 3e8686a6d4..58d44f7ad5 100644 --- a/src/panels/lovelace/elements/hui-image-element.ts +++ b/src/panels/lovelace/elements/hui-image-element.ts @@ -10,8 +10,8 @@ import { actionHandler } from "../common/directives/action-handler-directive"; import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; import "../components/hui-image"; -import type { ImageElementConfig, LovelaceElement } from "./types"; import type { LovelacePictureElementEditor } from "../types"; +import type { ImageElementConfig, LovelaceElement } from "./types"; @customElement("hui-image-element") export class HuiImageElement extends LitElement implements LovelaceElement { @@ -97,7 +97,7 @@ export class HuiImageElement extends LitElement implements LovelaceElement { } div:focus hui-image { background: var(--divider-color); - border-radius: 100%; + border-radius: var(--ha-border-radius-pill); } `; diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts index 1d6948642f..9cbe4d7a9c 100644 --- a/src/panels/lovelace/elements/hui-state-icon-element.ts +++ b/src/panels/lovelace/elements/hui-state-icon-element.ts @@ -3,20 +3,20 @@ import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; -import { findEntities } from "../common/find-entities"; import "../../../components/entity/state-badge"; +import { isUnavailableState } from "../../../data/entity"; +import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler"; import type { HomeAssistant } from "../../../types"; import { computeTooltip } from "../common/compute-tooltip"; import { actionHandler } from "../common/directives/action-handler-directive"; +import { findEntities } from "../common/find-entities"; import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; -import { isUnavailableState } from "../../../data/entity"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import "../components/hui-warning-element"; -import type { LovelaceElement, StateIconElementConfig } from "./types"; import type { LovelacePictureElementEditor } from "../types"; -import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler"; +import type { LovelaceElement, StateIconElementConfig } from "./types"; @customElement("hui-state-icon-element") export class HuiStateIconElement extends LitElement implements LovelaceElement { @@ -110,7 +110,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement { state-badge:focus { outline: none; background: var(--divider-color); - border-radius: 100%; + border-radius: var(--ha-border-radius-pill); } `; diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts index 08a1f16b4d..29ae92dc78 100644 --- a/src/panels/lovelace/elements/hui-state-label-element.ts +++ b/src/panels/lovelace/elements/hui-state-label-element.ts @@ -3,19 +3,19 @@ import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; -import { findEntities } from "../common/find-entities"; +import { isUnavailableState } from "../../../data/entity"; import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler"; import type { HomeAssistant } from "../../../types"; import { computeTooltip } from "../common/compute-tooltip"; import { actionHandler } from "../common/directives/action-handler-directive"; +import { findEntities } from "../common/find-entities"; import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; -import { isUnavailableState } from "../../../data/entity"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import "../components/hui-warning-element"; -import type { LovelaceElement, StateLabelElementConfig } from "./types"; import type { LovelacePictureElementEditor } from "../types"; +import type { LovelaceElement, StateLabelElementConfig } from "./types"; @customElement("hui-state-label-element") class HuiStateLabelElement extends LitElement implements LovelaceElement { @@ -130,7 +130,7 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement { div:focus { outline: none; background: var(--divider-color); - border-radius: 100%; + border-radius: var(--ha-border-radius-pill); } `; } diff --git a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts index e8cdacd5d2..1a45d861d0 100644 --- a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts @@ -248,7 +248,7 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow { .icon-image:focus { outline: none; background-color: var(--divider-color); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); } .weather-icon { diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index c2210a0150..6e7bfacb88 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -1385,7 +1385,7 @@ class HUIRoot extends LitElement { } #add-view ha-svg-icon { background-color: var(--accent-color); - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); } a { color: var(--text-primary-color, white); diff --git a/src/panels/lovelace/sections/hui-grid-section.ts b/src/panels/lovelace/sections/hui-grid-section.ts index 5b7ca3b6f8..8918a0db24 100644 --- a/src/panels/lovelace/sections/hui-grid-section.ts +++ b/src/panels/lovelace/sections/hui-grid-section.ts @@ -234,7 +234,10 @@ export class GridSection extends LitElement implements LovelaceSectionElement { } .card { - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); position: relative; grid-row: span var(--row-size, 1); grid-column: span min(var(--column-size, 1), var(--grid-column-count)); @@ -271,7 +274,10 @@ export class GridSection extends LitElement implements LovelaceSectionElement { grid-column: span 3; background: none; cursor: pointer; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); border: 2px dashed var(--primary-color); height: var(--row-height); order: 1; @@ -283,7 +289,10 @@ export class GridSection extends LitElement implements LovelaceSectionElement { border-style: solid; } .sortable-ghost { - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); } `, ]; diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts index 0145fed1b5..ef31e52993 100644 --- a/src/panels/lovelace/views/hui-panel-view.ts +++ b/src/panels/lovelace/views/hui-panel-view.ts @@ -5,13 +5,13 @@ import { property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeRTL } from "../../../common/util/compute_rtl"; +import "../../../components/ha-alert"; import type { LovelaceViewElement } from "../../../data/lovelace"; import type { LovelaceViewConfig } from "../../../data/lovelace/config/view"; import type { HomeAssistant } from "../../../types"; import type { HuiCard } from "../cards/hui-card"; import type { HuiCardOptions } from "../components/hui-card-options"; import type { Lovelace } from "../types"; -import "../../../components/ha-alert"; let editCodeLoaded = false; @@ -122,13 +122,16 @@ export class PanelView extends LitElement implements LovelaceViewElement { :host { display: block; height: 100%; - --restore-card-border-radius: var(--ha-card-border-radius, 12px); + --restore-card-border-radius: var( + --ha-card-border-radius, + var(--ha-border-radius-lg) + ); --restore-card-border-width: var(--ha-card-border-width, 1px); --restore-card-box-shadow: var(--ha-card-box-shadow, none); } * { - --ha-card-border-radius: 0; + --ha-card-border-radius: var(--ha-border-radius-square); --ha-card-border-width: 0; --ha-card-box-shadow: none; } diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts index 3c9fd53bf3..dee8c424bf 100644 --- a/src/panels/lovelace/views/hui-sections-view.ts +++ b/src/panels/lovelace/views/hui-sections-view.ts @@ -380,7 +380,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement { } .section { - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); grid-column: span var(--column-span); grid-row: span var(--row-span); } @@ -436,7 +436,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement { outline: none; background: none; cursor: pointer; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); border: 2px dashed var(--primary-color); height: calc(var(--row-height) + 2 * (var(--row-gap) + 2px)); padding: 8px; @@ -461,7 +461,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement { outline: none; background: none; cursor: pointer; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); border: 2px dashed var(--primary-color); order: 1; height: calc(var(--row-height) + 2 * (var(--row-gap) + 2px)); @@ -478,7 +478,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement { } .sortable-ghost { - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); } hui-view-header { diff --git a/src/panels/lovelace/views/hui-view-header.ts b/src/panels/lovelace/views/hui-view-header.ts index a0e45d67e9..9559716c0b 100644 --- a/src/panels/lovelace/views/hui-view-header.ts +++ b/src/panels/lovelace/views/hui-view-header.ts @@ -3,6 +3,7 @@ import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; +import { DragScrollController } from "../../../common/controllers/drag-scroll-controller"; import "../../../components/ha-ripple"; import "../../../components/ha-sortable"; import "../../../components/ha-svg-icon"; @@ -16,11 +17,10 @@ import type { HuiBadge } from "../badges/hui-badge"; import "../badges/hui-view-badges"; import type { HuiCard } from "../cards/hui-card"; import "../components/hui-badge-edit-mode"; +import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog"; import { replaceView } from "../editor/config-util"; import { showEditViewHeaderDialog } from "../editor/view-header/show-edit-view-header-dialog"; import type { Lovelace } from "../types"; -import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog"; -import { DragScrollController } from "../../../common/controllers/drag-scroll-controller"; export const DEFAULT_VIEW_HEADER_LAYOUT = "center"; export const DEFAULT_VIEW_HEADER_BADGES_POSITION = "bottom"; @@ -314,7 +314,7 @@ export class HuiViewHeader extends LitElement { align-items: center; justify-content: center; transition: opacity 0.2s ease-in-out; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background: var(--secondary-background-color); @@ -449,7 +449,7 @@ export class HuiViewHeader extends LitElement { .container.edit-mode { padding: 8px; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); border: 2px dashed var(--divider-color); border-start-end-radius: 0; } @@ -469,7 +469,7 @@ export class HuiViewHeader extends LitElement { padding: 6px 20px 6px 20px; box-sizing: border-box; width: auto; - border-radius: var(--ha-card-border-radius, 12px); + border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg)); background-color: transparent; border-width: 2px; border-style: dashed; diff --git a/src/panels/profile/ha-refresh-tokens-card.ts b/src/panels/profile/ha-refresh-tokens-card.ts index a8c3e8d2d1..7ee2b77be0 100644 --- a/src/panels/profile/ha-refresh-tokens-card.ts +++ b/src/panels/profile/ha-refresh-tokens-card.ts @@ -338,7 +338,7 @@ class HaRefreshTokens extends LitElement { width: 8px; height: 8px; background-color: var(--success-color); - border-radius: 50%; + border-radius: var(--ha-border-radius-circle); margin-right: 6px; } ha-settings-row > ha-svg-icon { diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 31b4fa899e..7882b98100 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -162,7 +162,7 @@ export const haStyleDialog = css` --mdc-dialog-max-height: 100vh; --mdc-dialog-max-height: 100svh; --vertical-align-dialog: flex-end; - --ha-dialog-border-radius: 0; + --ha-dialog-border-radius: var(--ha-border-radius-square); } } .error { @@ -177,8 +177,7 @@ export const haStyleScrollbar = css` } .ha-scrollbar::-webkit-scrollbar-thumb { - -webkit-border-radius: 4px; - border-radius: 4px; + border-radius: var(--ha-border-radius-sm); background: var(--scrollbar-thumb-color); } diff --git a/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts b/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts index 85051be65b..5c19d3dceb 100644 --- a/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts +++ b/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts @@ -104,7 +104,7 @@ export class HaStateControlAlarmControlPanelModes extends LitElement { max-height: max(320px, var(--modes-count, 1) * 80px); min-height: max(200px, var(--modes-count, 1) * 80px); --control-select-thickness: 130px; - --control-select-border-radius: 36px; + --control-select-border-radius: var(--ha-border-radius-6xl); --control-select-color: var(--primary-color); --control-select-background: var(--disabled-color); --control-select-background-opacity: 0.2; diff --git a/src/state-control/cover/ha-state-control-cover-buttons.ts b/src/state-control/cover/ha-state-control-cover-buttons.ts index da0f1efffc..3b6be9d858 100644 --- a/src/state-control/cover/ha-state-control-cover-buttons.ts +++ b/src/state-control/cover/ha-state-control-cover-buttons.ts @@ -280,7 +280,7 @@ export class HaStateControlCoverButtons extends LitElement { grid-area: stop; } ha-control-button { - --control-button-border-radius: 36px; + --control-button-border-radius: var(--ha-border-radius-6xl); --mdc-icon-size: 24px; } `; diff --git a/src/state-control/cover/ha-state-control-cover-position.ts b/src/state-control/cover/ha-state-control-cover-position.ts index dcf69d829a..7631b34747 100644 --- a/src/state-control/cover/ha-state-control-cover-position.ts +++ b/src/state-control/cover/ha-state-control-cover-position.ts @@ -76,7 +76,7 @@ export class HaStateControlCoverPosition extends LitElement { max-height: 320px; min-height: 200px; --control-slider-thickness: 130px; - --control-slider-border-radius: 36px; + --control-slider-border-radius: var(--ha-border-radius-6xl); --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; diff --git a/src/state-control/cover/ha-state-control-cover-tilt-position.ts b/src/state-control/cover/ha-state-control-cover-tilt-position.ts index 1df89c3191..8b180aefd6 100644 --- a/src/state-control/cover/ha-state-control-cover-tilt-position.ts +++ b/src/state-control/cover/ha-state-control-cover-tilt-position.ts @@ -107,7 +107,7 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement { max-height: 320px; min-height: 200px; --control-slider-thickness: 130px; - --control-slider-border-radius: 36px; + --control-slider-border-radius: var(--ha-border-radius-6xl); --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; diff --git a/src/state-control/cover/ha-state-control-cover-toggle.ts b/src/state-control/cover/ha-state-control-cover-toggle.ts index a65f1cb542..24b68c85d3 100644 --- a/src/state-control/cover/ha-state-control-cover-toggle.ts +++ b/src/state-control/cover/ha-state-control-cover-toggle.ts @@ -143,7 +143,7 @@ export class HaStateControlCoverToggle extends LitElement { max-height: 320px; min-height: 200px; --control-switch-thickness: 130px; - --control-switch-border-radius: 36px; + --control-switch-border-radius: var(--ha-border-radius-6xl); --control-switch-padding: 6px; --mdc-icon-size: 24px; } @@ -160,7 +160,7 @@ export class HaStateControlCoverToggle extends LitElement { ha-control-button { flex: 1; width: 100%; - --control-button-border-radius: 36px; + --control-button-border-radius: var(--ha-border-radius-6xl); --mdc-icon-size: 24px; } ha-control-button.active { diff --git a/src/state-control/fan/ha-state-control-fan-speed.ts b/src/state-control/fan/ha-state-control-fan-speed.ts index c5659b08d0..ae5e9b044f 100644 --- a/src/state-control/fan/ha-state-control-fan-speed.ts +++ b/src/state-control/fan/ha-state-control-fan-speed.ts @@ -141,7 +141,7 @@ export class HaStateControlFanSpeed extends LitElement { max-height: 320px; min-height: 200px; --control-slider-thickness: 130px; - --control-slider-border-radius: 36px; + --control-slider-border-radius: var(--ha-border-radius-6xl); --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; @@ -152,7 +152,7 @@ export class HaStateControlFanSpeed extends LitElement { max-height: 320px; min-height: 200px; --control-select-thickness: 130px; - --control-select-border-radius: 36px; + --control-select-border-radius: var(--ha-border-radius-6xl); --control-select-color: var(--primary-color); --control-select-background: var(--disabled-color); --control-select-background-opacity: 0.2; diff --git a/src/state-control/ha-state-control-toggle.ts b/src/state-control/ha-state-control-toggle.ts index b7395fbdc2..1ddaef948b 100644 --- a/src/state-control/ha-state-control-toggle.ts +++ b/src/state-control/ha-state-control-toggle.ts @@ -134,7 +134,7 @@ export class HaStateControlToggle extends LitElement { max-height: 320px; min-height: 200px; --control-switch-thickness: 130px; - --control-switch-border-radius: 36px; + --control-switch-border-radius: var(--ha-border-radius-6xl); --control-switch-padding: 6px; --mdc-icon-size: 24px; } @@ -151,7 +151,7 @@ export class HaStateControlToggle extends LitElement { ha-control-button { flex: 1; width: 100%; - --control-button-border-radius: 36px; + --control-button-border-radius: var(--ha-border-radius-6xl); --mdc-icon-size: 24px; } ha-control-button.active { diff --git a/src/state-control/light/ha-state-control-light-brightness.ts b/src/state-control/light/ha-state-control-light-brightness.ts index e6a1128f40..6ea8741b30 100644 --- a/src/state-control/light/ha-state-control-light-brightness.ts +++ b/src/state-control/light/ha-state-control-light-brightness.ts @@ -90,7 +90,7 @@ export class HaStateControlLightBrightness extends LitElement { max-height: 320px; min-height: 200px; --control-slider-thickness: 130px; - --control-slider-border-radius: 36px; + --control-slider-border-radius: var(--ha-border-radius-6xl); --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; diff --git a/src/state-control/lock/ha-state-control-lock-toggle.ts b/src/state-control/lock/ha-state-control-lock-toggle.ts index 68e278de14..bb4f4c949a 100644 --- a/src/state-control/lock/ha-state-control-lock-toggle.ts +++ b/src/state-control/lock/ha-state-control-lock-toggle.ts @@ -3,6 +3,7 @@ import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { styleMap } from "lit/directives/style-map"; +import { fireEvent } from "../../common/dom/fire_event"; import { stateColorCss } from "../../common/entity/state_color"; import "../../components/ha-control-button"; import "../../components/ha-control-switch"; @@ -12,7 +13,6 @@ import { forwardHaptic } from "../../data/haptics"; import type { LockEntity } from "../../data/lock"; import { callProtectedLockService } from "../../data/lock"; import type { HomeAssistant } from "../../types"; -import { fireEvent } from "../../common/dom/fire_event"; declare global { interface HASSDomEvents { @@ -162,7 +162,7 @@ export class HaStateControlLockToggle extends LitElement { max-height: 320px; min-height: 200px; --control-switch-thickness: 130px; - --control-switch-border-radius: 36px; + --control-switch-border-radius: var(--ha-border-radius-6xl); --control-switch-padding: 6px; --mdc-icon-size: 24px; } @@ -182,7 +182,7 @@ export class HaStateControlLockToggle extends LitElement { ha-control-button { flex: 1; width: 100%; - --control-button-border-radius: 36px; + --control-button-border-radius: var(--ha-border-radius-6xl); --mdc-icon-size: 24px; } ha-control-button.active { diff --git a/src/state-control/valve/ha-state-control-valve-buttons.ts b/src/state-control/valve/ha-state-control-valve-buttons.ts index 897cc64ba3..f1c43bf078 100644 --- a/src/state-control/valve/ha-state-control-valve-buttons.ts +++ b/src/state-control/valve/ha-state-control-valve-buttons.ts @@ -124,7 +124,7 @@ export class HaStateControlValveButtons extends LitElement { --control-button-group-thickness: 100px; } ha-control-button { - --control-button-border-radius: 36px; + --control-button-border-radius: var(--ha-border-radius-6xl); --mdc-icon-size: 24px; } `; diff --git a/src/state-control/valve/ha-state-control-valve-position.ts b/src/state-control/valve/ha-state-control-valve-position.ts index 346d064c22..1bbcac32b7 100644 --- a/src/state-control/valve/ha-state-control-valve-position.ts +++ b/src/state-control/valve/ha-state-control-valve-position.ts @@ -72,7 +72,7 @@ export class HaStateControlValvePosition extends LitElement { max-height: 320px; min-height: 200px; --control-slider-thickness: 130px; - --control-slider-border-radius: 36px; + --control-slider-border-radius: var(--ha-border-radius-6xl); --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; diff --git a/src/state-control/valve/ha-state-control-valve-toggle.ts b/src/state-control/valve/ha-state-control-valve-toggle.ts index 4253e58d49..bdc2d750af 100644 --- a/src/state-control/valve/ha-state-control-valve-toggle.ts +++ b/src/state-control/valve/ha-state-control-valve-toggle.ts @@ -143,7 +143,7 @@ export class HaStateControlValveToggle extends LitElement { max-height: 320px; min-height: 200px; --control-switch-thickness: 130px; - --control-switch-border-radius: 36px; + --control-switch-border-radius: var(--ha-border-radius-6xl); --control-switch-padding: 6px; --mdc-icon-size: 24px; } @@ -160,7 +160,7 @@ export class HaStateControlValveToggle extends LitElement { ha-control-button { flex: 1; width: 100%; - --control-button-border-radius: 36px; + --control-button-border-radius: var(--ha-border-radius-6xl); --mdc-icon-size: 24px; } ha-control-button.active {