From 404d6c75b5378a855dd7cd1e3feeef9cd3e25b1a Mon Sep 17 00:00:00 2001 From: Wendelin Date: Mon, 28 Apr 2025 14:58:22 +0200 Subject: [PATCH] Update font-size --- cast/src/launcher/layout/hc-layout.ts | 6 +++--- cast/src/receiver/layout/hc-launch-screen.ts | 2 +- gallery/src/components/page-description.ts | 4 ++-- gallery/src/ha-demo-options.ts | 2 +- gallery/src/ha-gallery.ts | 2 +- .../src/pages/components/ha-hs-color-picker.ts | 2 +- hassio/src/addon-view/info/hassio-addon-info.ts | 4 ++-- hassio/src/backups/hassio-backups.ts | 2 +- hassio/src/ingress-view/hassio-ingress-view.ts | 2 +- src/auth/ha-authorize.ts | 4 ++-- src/auth/ha-pick-auth-provider.ts | 2 +- src/components/chart/ha-chart-base.ts | 2 +- src/components/ha-assist-chat.ts | 4 ++-- src/components/ha-badge.ts | 4 ++-- src/components/ha-combo-box-item.ts | 4 ++-- src/components/ha-control-select-menu.ts | 2 +- src/components/ha-control-slider.ts | 2 +- src/components/ha-dialog-header.ts | 4 ++-- src/components/ha-expansion-panel.ts | 2 +- src/components/ha-file-upload.ts | 4 ++-- src/components/ha-filter-blueprints.ts | 2 +- src/components/ha-filter-categories.ts | 2 +- src/components/ha-filter-devices.ts | 2 +- src/components/ha-filter-domains.ts | 2 +- src/components/ha-filter-entities.ts | 2 +- src/components/ha-filter-floor-areas.ts | 2 +- src/components/ha-filter-integrations.ts | 2 +- src/components/ha-filter-labels.ts | 2 +- src/components/ha-filter-states.ts | 2 +- src/components/ha-header-bar.ts | 2 +- src/components/ha-heading-badge.ts | 2 +- src/components/ha-label.ts | 2 +- src/components/ha-select-box.ts | 4 ++-- src/components/ha-selector/ha-selector-media.ts | 2 +- .../ha-selector/ha-selector-selector.ts | 2 +- src/components/ha-sidebar.ts | 6 +++--- src/components/ha-top-app-bar-fixed.ts | 2 +- src/components/ha-two-pane-top-app-bar-fixed.ts | 2 +- src/components/map/ha-map.ts | 2 +- .../media-player/ha-media-player-browse.ts | 10 +++++----- src/components/tile/ha-tile-info.ts | 4 ++-- src/components/trace/hat-graph-node.ts | 2 +- src/dialogs/enter-code/dialog-enter-code.ts | 2 +- .../components/ha-more-info-state-header.ts | 4 ++-- .../components/lights/light-color-temp-picker.ts | 2 +- .../more-info/controls/more-info-climate.ts | 4 ++-- .../more-info/controls/more-info-humidifier.ts | 4 ++-- src/dialogs/more-info/controls/more-info-lock.ts | 2 +- .../more-info/controls/more-info-water_heater.ts | 4 ++-- .../more-info/controls/more-info-weather.ts | 8 ++++---- src/dialogs/more-info/ha-more-info-dialog.ts | 4 ++-- src/dialogs/restart/dialog-restart.ts | 2 +- .../cloud/cloud-step-intro.ts | 6 +++--- src/layouts/hass-error-screen.ts | 2 +- src/layouts/hass-loading-screen.ts | 2 +- src/layouts/hass-subpage.ts | 2 +- src/layouts/hass-tabs-subpage-data-table.ts | 6 +++--- src/layouts/hass-tabs-subpage.ts | 6 +++--- src/onboarding/onboarding-core-config.ts | 2 +- .../onboarding-restore-backup-cloud-login.ts | 2 +- .../onboarding-restore-backup-restore.ts | 2 +- .../onboarding-restore-backup-status.ts | 4 ++-- src/onboarding/styles.ts | 2 +- .../calendar/dialog-calendar-event-editor.ts | 2 +- src/panels/calendar/ha-full-calendar.ts | 8 ++++---- .../ha-config-application-credentials.ts | 2 +- .../config/areas/ha-config-areas-dashboard.ts | 2 +- .../condition/ha-automation-condition-row.ts | 2 +- .../config/automation/ha-automation-trace.ts | 2 +- .../trigger/ha-automation-trigger-row.ts | 2 +- .../backup/components/ha-backup-agents-picker.ts | 2 +- .../components/ha-backup-formfield-label.ts | 2 +- .../backup/components/ha-backup-summary-card.ts | 4 ++-- .../backup/dialogs/dialog-backup-onboarding.ts | 2 +- .../dialog-change-backup-encryption-key.ts | 2 +- .../dialogs/dialog-download-decrypted-backup.ts | 2 +- .../dialogs/dialog-set-backup-encryption-key.ts | 2 +- .../dialogs/dialog-show-backup-encryption-key.ts | 2 +- .../config/backup/ha-config-backup-backups.ts | 2 +- .../config/backup/ha-config-backup-settings.ts | 2 +- .../config/core/ha-config-system-navigation.ts | 4 ++-- .../config/dashboard/ha-config-dashboard.ts | 2 +- .../config/dashboard/ha-config-navigation.ts | 2 +- src/panels/config/dashboard/ha-config-updates.ts | 4 ++-- .../device-detail/ha-device-entities-card.ts | 2 +- src/panels/config/entities/ha-config-entities.ts | 2 +- src/panels/config/ha-config-section.ts | 2 +- src/panels/config/hardware/ha-config-hardware.ts | 8 ++++---- .../config/helpers/forms/ha-schedule-form.ts | 2 +- src/panels/config/info/ha-config-info.ts | 6 +++--- .../ha-config-integrations-dashboard.ts | 2 +- .../integrations/ha-domain-integrations.ts | 2 +- .../integrations/ha-integration-action-card.ts | 4 ++-- .../config/integrations/ha-integration-header.ts | 6 +++--- .../add-node/zwave-js-add-node-failed.ts | 2 +- .../zwave-js-add-node-searching-devices.ts | 2 +- .../repairs/dialog-repairs-issue-subtitle.ts | 2 +- src/panels/config/repairs/ha-config-repairs.ts | 2 +- .../config/repairs/integrations-startup-time.ts | 2 +- src/panels/config/script/ha-script-editor.ts | 2 +- src/panels/config/script/manual-script-editor.ts | 2 +- .../assist-pipeline-detail-config.ts | 2 +- .../assist-pipeline-detail-conversation.ts | 2 +- .../assist-pipeline-detail-stt.ts | 2 +- .../assist-pipeline-detail-tts.ts | 2 +- .../assist-pipeline-detail-wakeword.ts | 2 +- .../config/voice-assistants/cloud-discover.ts | 12 ++++++------ .../debug/assist-render-pipeline-run.ts | 2 +- .../voice-assistants/entity-voice-settings.ts | 2 +- .../ha-config-voice-assistants-expose.ts | 2 +- .../developer-tools/ha-panel-developer-tools.ts | 2 +- .../statistics/developer-tools-statistics.ts | 2 +- src/panels/energy/ha-panel-energy.ts | 2 +- src/panels/logbook/ha-logbook-renderer.ts | 2 +- src/panels/lovelace/badges/hui-view-badges.ts | 2 +- .../hui-lock-open-door-card-feature.ts | 4 ++-- .../hui-energy-carbon-consumed-gauge-card.ts | 2 +- .../cards/energy/hui-energy-distribution-card.ts | 4 ++-- .../hui-energy-grid-neutrality-gauge-card.ts | 2 +- .../hui-energy-self-sufficiency-gauge-card.ts | 2 +- .../hui-energy-solar-consumed-gauge-card.ts | 2 +- src/panels/lovelace/cards/hui-area-card.ts | 4 ++-- src/panels/lovelace/cards/hui-clock-card.ts | 12 ++++++------ src/panels/lovelace/cards/hui-entity-card.ts | 6 +++--- src/panels/lovelace/cards/hui-gauge-card.ts | 2 +- src/panels/lovelace/cards/hui-heading-card.ts | 5 ++++- src/panels/lovelace/cards/hui-humidifier-card.ts | 2 +- .../lovelace/cards/hui-picture-entity-card.ts | 2 +- .../lovelace/cards/hui-picture-glance-card.ts | 4 ++-- .../lovelace/cards/hui-plant-status-card.ts | 2 +- src/panels/lovelace/cards/hui-statistic-card.ts | 6 +++--- src/panels/lovelace/cards/hui-thermostat-card.ts | 2 +- src/panels/lovelace/cards/hui-todo-list-card.ts | 2 +- .../lovelace/cards/hui-weather-forecast-card.ts | 14 +++++++------- .../lovelace/components/hui-card-options.ts | 2 +- .../components/hui-energy-period-selector.ts | 2 +- .../editor/badge-editor/hui-badge-picker.ts | 4 ++-- .../editor/card-editor/hui-card-picker.ts | 4 ++-- .../conditions/ha-card-condition-editor.ts | 2 +- .../config-elements/hui-card-features-editor.ts | 4 ++-- .../config-elements/hui-entities-card-editor.ts | 7 ------- .../config-elements/hui-heading-badges-editor.ts | 4 ++-- .../hui-dialog-create-headerfooter.ts | 2 +- .../hui-header-footer-editor.ts | 2 +- .../editor/hui-entities-card-row-editor.ts | 4 ++-- .../hui-picture-elements-card-row-editor.ts | 4 ++-- .../lovelace/editor/hui-sub-element-editor.ts | 2 +- src/panels/lovelace/hui-editor.ts | 4 ++-- src/panels/lovelace/hui-root.ts | 4 ++-- .../hui-areas-dashboard-strategy-editor.ts | 2 +- src/panels/lovelace/views/hui-sections-view.ts | 6 +++--- src/panels/lovelace/views/hui-view-header.ts | 2 +- src/panels/todo/dialog-todo-item-editor.ts | 2 +- .../cover/ha-state-control-cover-position.ts | 2 +- .../ha-state-control-cover-tilt-position.ts | 2 +- .../fan/ha-state-control-fan-speed.ts | 2 +- .../light/ha-state-control-light-brightness.ts | 2 +- .../state-control-circular-slider-style.ts | 16 ++++++++-------- .../valve/ha-state-control-valve-position.ts | 2 +- 159 files changed, 249 insertions(+), 253 deletions(-) diff --git a/cast/src/launcher/layout/hc-layout.ts b/cast/src/launcher/layout/hc-layout.ts index 87cb2cced1..aeec71b45c 100644 --- a/cast/src/launcher/layout/hc-layout.ts +++ b/cast/src/launcher/layout/hc-layout.ts @@ -86,7 +86,7 @@ class HcLayout extends LitElement { .card-header { color: var(--ha-card-header-color, var(--primary-text-color)); font-family: var(--ha-card-header-font-family, inherit); - font-size: var(--ha-card-header-font-size, 24px); + font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl); letter-spacing: -0.012em; line-height: 32px; padding: 24px 16px 16px; @@ -98,7 +98,7 @@ class HcLayout extends LitElement { border-radius: 4px 4px 0 0; } .subtitle { - font-size: 14px; + font-size: var(--ha-font-size-m); color: var(--secondary-text-color); line-height: initial; } @@ -135,7 +135,7 @@ class HcLayout extends LitElement { .footer { text-align: center; - font-size: 12px; + font-size: var(--ha-font-size-s); padding: 8px 0 24px; color: var(--secondary-text-color); } diff --git a/cast/src/receiver/layout/hc-launch-screen.ts b/cast/src/receiver/layout/hc-launch-screen.ts index cab6840ba4..64b50839ee 100644 --- a/cast/src/receiver/layout/hc-launch-screen.ts +++ b/cast/src/receiver/layout/hc-launch-screen.ts @@ -29,7 +29,7 @@ class HcLaunchScreen extends LitElement { display: block; height: 100vh; background-color: #f2f4f9; - font-size: 24px; + font-size: var(--ha-font-size-2xl); } .container { display: flex; diff --git a/gallery/src/components/page-description.ts b/gallery/src/components/page-description.ts index 9c98d9b37e..c61438a662 100644 --- a/gallery/src/components/page-description.ts +++ b/gallery/src/components/page-description.ts @@ -37,12 +37,12 @@ class PageDescription extends HaMarkdown { border-bottom: 1px solid var(--secondary-background-color); } .title { - font-size: 42px; + font-size: var(--ha-font-size-5xl); line-height: 56px; padding-bottom: 8px; } .subtitle { - font-size: 18px; + font-size: var(--ha-font-size-l); line-height: 24px; } .root { diff --git a/gallery/src/ha-demo-options.ts b/gallery/src/ha-demo-options.ts index f3565e7891..4ec1927f7b 100644 --- a/gallery/src/ha-demo-options.ts +++ b/gallery/src/ha-demo-options.ts @@ -34,7 +34,7 @@ class HaDemoOptions extends LitElement { height: 64px; padding: 0 16px; pointer-events: none; - font-size: 20px; + font-size: var(--ha-font-size-xl); } `, ]; diff --git a/gallery/src/ha-gallery.ts b/gallery/src/ha-gallery.ts index d1043815a2..3c61428831 100644 --- a/gallery/src/ha-gallery.ts +++ b/gallery/src/ha-gallery.ts @@ -250,7 +250,7 @@ class HaGallery extends LitElement { } .page-footer .header { - font-size: 16px; + font-size: var(--ha-font-size-l); font-weight: 500; line-height: 28px; text-align: center; diff --git a/gallery/src/pages/components/ha-hs-color-picker.ts b/gallery/src/pages/components/ha-hs-color-picker.ts index c97ec7c8df..4cacf24342 100644 --- a/gallery/src/pages/components/ha-hs-color-picker.ts +++ b/gallery/src/pages/components/ha-hs-color-picker.ts @@ -105,7 +105,7 @@ export class DemoHaHsColorPicker extends LitElement { width: 400px; } .value { - font-size: 22px; + font-size: var(--ha-font-size-2xl); font-weight: bold; margin: 0 0 12px 0; } diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts index 07a92c7b8e..2f2b2395ca 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -1280,12 +1280,12 @@ class HassioAddonInfo extends LitElement { padding-left: 8px; padding-inline-start: 8px; padding-inline-end: initial; - font-size: 24px; + font-size: var(--ha-font-size-2xl); color: var(--ha-card-header-color, var(--primary-text-color)); } .addon-version { float: var(--float-end); - font-size: 15px; + font-size: var(--ha-font-size-m); vertical-align: middle; } .errors { diff --git a/hassio/src/backups/hassio-backups.ts b/hassio/src/backups/hassio-backups.ts index 05cfe65ea4..06c506c053 100644 --- a/hassio/src/backups/hassio-backups.ts +++ b/hassio/src/backups/hassio-backups.ts @@ -401,7 +401,7 @@ export class HassioBackups extends LitElement { margin-top: 20px; } .header-toolbar .selected-txt { - font-size: 16px; + font-size: var(--ha-font-size-l); } .header-toolbar .header-btns { margin-right: -12px; diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts index 1120936fa6..b6e9d3d1a9 100644 --- a/hassio/src/ingress-view/hassio-ingress-view.ts +++ b/hassio/src/ingress-view/hassio-ingress-view.ts @@ -340,7 +340,7 @@ class HassioIngressView extends LitElement { .header { display: flex; align-items: center; - font-size: 16px; + font-size: var(--ha-font-size-l); height: 40px; padding: 0 16px; pointer-events: none; diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts index a8b254a552..154420e880 100644 --- a/src/auth/ha-authorize.ts +++ b/src/auth/ha-authorize.ts @@ -93,7 +93,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) { background-color: var(--primary-background-color, #fafafa); } p { - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 20px; } .card-content { @@ -151,7 +151,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) { margin-inline-start: initial; } h1 { - font-size: 28px; + font-size: var(--ha-font-size-3xl); font-weight: 400; margin-top: 16px; margin-bottom: 16px; diff --git a/src/auth/ha-pick-auth-provider.ts b/src/auth/ha-pick-auth-provider.ts index 9f6f11cd7b..609e53324c 100644 --- a/src/auth/ha-pick-auth-provider.ts +++ b/src/auth/ha-pick-auth-provider.ts @@ -57,7 +57,7 @@ export class HaPickAuthProvider extends LitElement { position: relative; z-index: 1; text-align: center; - font-size: 14px; + font-size: var(--ha-font-size-m); font-weight: 400; line-height: 20px; } diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts index 5748378ed4..2caf6ccbd7 100644 --- a/src/components/chart/ha-chart-base.ts +++ b/src/components/chart/ha-chart-base.ts @@ -715,7 +715,7 @@ export class HaChartBase extends LitElement { max-height: 60%; overflow-y: auto; padding: 12px 0 0; - font-size: 12px; + font-size: var(--ha-font-size-s); color: var(--primary-text-color); } .chart-legend ul { diff --git a/src/components/ha-assist-chat.ts b/src/components/ha-assist-chat.ts index 36d5ece3a4..be1629326c 100644 --- a/src/components/ha-assist-chat.ts +++ b/src/components/ha-assist-chat.ts @@ -595,7 +595,7 @@ export class HaAssistChat extends LitElement { } .message { white-space: pre-line; - font-size: 18px; + font-size: var(--ha-font-size-l); clear: both; margin: 8px 0; padding: 8px; @@ -604,7 +604,7 @@ export class HaAssistChat extends LitElement { @media all and (max-width: 450px), all and (max-height: 500px) { .message { - font-size: 16px; + font-size: var(--ha-font-size-l); } } diff --git a/src/components/ha-badge.ts b/src/components/ha-badge.ts index ad6fe7cd79..fd8599b06f 100644 --- a/src/components/ha-badge.ts +++ b/src/components/ha-badge.ts @@ -95,7 +95,7 @@ export class HaBadge extends LitElement { text-align: center; } .label { - font-size: 10px; + font-size: var(--ha-font-size-xs); font-style: normal; font-weight: 500; line-height: 10px; @@ -103,7 +103,7 @@ export class HaBadge extends LitElement { color: var(--secondary-text-color); } .content { - font-size: 12px; + font-size: var(--ha-font-size-s); font-style: normal; font-weight: 500; line-height: 16px; diff --git a/src/components/ha-combo-box-item.ts b/src/components/ha-combo-box-item.ts index ce8cc4b8eb..215414c201 100644 --- a/src/components/ha-combo-box-item.ts +++ b/src/components/ha-combo-box-item.ts @@ -19,12 +19,12 @@ export class HaComboBoxItem extends HaMdListItem { } [slot="headline"] { line-height: 22px; - font-size: 14px; + font-size: var(--ha-font-size-m); white-space: nowrap; } [slot="supporting-text"] { line-height: 18px; - font-size: 12px; + font-size: var(--ha-font-size-s); white-space: nowrap; } ::slotted(state-badge), diff --git a/src/components/ha-control-select-menu.ts b/src/components/ha-control-select-menu.ts index 6108cf5b26..5c5a521929 100644 --- a/src/components/ha-control-select-menu.ts +++ b/src/components/ha-control-select-menu.ts @@ -179,7 +179,7 @@ export class HaControlSelectMenu extends SelectBase { --control-select-menu-padding: 6px 10px; --mdc-icon-size: 20px; --ha-ripple-color: var(--secondary-text-color); - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 1.4; width: auto; color: var(--primary-text-color); diff --git a/src/components/ha-control-slider.ts b/src/components/ha-control-slider.ts index 6b1d41addf..054eaeac9a 100644 --- a/src/components/ha-control-slider.ts +++ b/src/components/ha-control-slider.ts @@ -368,7 +368,7 @@ export class HaControlSlider extends LitElement { --control-slider-background-opacity: 0.2; --control-slider-thickness: 40px; --control-slider-border-radius: 10px; - --control-slider-tooltip-font-size: 14px; + --control-slider-tooltip-font-size: var(--ha-font-size-m); height: var(--control-slider-thickness); width: 100%; border-radius: var(--control-slider-border-radius); diff --git a/src/components/ha-dialog-header.ts b/src/components/ha-dialog-header.ts index 995211c15b..a2a5b2a419 100644 --- a/src/components/ha-dialog-header.ts +++ b/src/components/ha-dialog-header.ts @@ -53,12 +53,12 @@ export class HaDialogHeader extends LitElement { white-space: nowrap; } .header-title { - font-size: 22px; + font-size: var(--ha-font-size-xl); line-height: 28px; font-weight: 400; } .header-subtitle { - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 20px; color: var(--secondary-text-color); } diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts index 6604123d48..877c02ac4d 100644 --- a/src/components/ha-expansion-panel.ts +++ b/src/components/ha-expansion-panel.ts @@ -218,7 +218,7 @@ export class HaExpansionPanel extends LitElement { .secondary { display: block; color: var(--secondary-text-color); - font-size: 12px; + font-size: var(--ha-font-size-s); } `; } diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts index d665910525..f68488e519 100644 --- a/src/components/ha-file-upload.ts +++ b/src/components/ha-file-upload.ts @@ -294,7 +294,7 @@ export class HaFileUpload extends LitElement { } .supports { color: var(--secondary-text-color); - font-size: 12px; + font-size: var(--ha-font-size-s); } :host([disabled]) .secondary { color: var(--disabled-text-color); @@ -333,7 +333,7 @@ export class HaFileUpload extends LitElement { background: none; border: none; padding: 0; - font-size: 14px; + font-size: var(--ha-font-size-m); color: var(--primary-color); text-decoration: underline; cursor: pointer; diff --git a/src/components/ha-filter-blueprints.ts b/src/components/ha-filter-blueprints.ts index 0b5c176352..d4ca63b00b 100644 --- a/src/components/ha-filter-blueprints.ts +++ b/src/components/ha-filter-blueprints.ts @@ -209,7 +209,7 @@ export class HaFilterBlueprints extends LitElement { box-sizing: border-box; border-radius: 50%; font-weight: 400; - font-size: 11px; + font-size: var(--ha-font-size-xs); background-color: var(--primary-color); line-height: 16px; text-align: center; diff --git a/src/components/ha-filter-categories.ts b/src/components/ha-filter-categories.ts index dd153c7b02..b473df76ad 100644 --- a/src/components/ha-filter-categories.ts +++ b/src/components/ha-filter-categories.ts @@ -304,7 +304,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) { box-sizing: border-box; border-radius: 50%; font-weight: 400; - font-size: 11px; + font-size: var(--ha-font-size-xs); background-color: var(--primary-color); line-height: 16px; text-align: center; diff --git a/src/components/ha-filter-devices.ts b/src/components/ha-filter-devices.ts index 9e929fe8c4..663516dc39 100644 --- a/src/components/ha-filter-devices.ts +++ b/src/components/ha-filter-devices.ts @@ -233,7 +233,7 @@ export class HaFilterDevices extends LitElement { box-sizing: border-box; border-radius: 50%; font-weight: 400; - font-size: 11px; + font-size: var(--ha-font-size-xs); background-color: var(--primary-color); line-height: 16px; text-align: center; diff --git a/src/components/ha-filter-domains.ts b/src/components/ha-filter-domains.ts index dbada6c247..f4d2b61de9 100644 --- a/src/components/ha-filter-domains.ts +++ b/src/components/ha-filter-domains.ts @@ -190,7 +190,7 @@ export class HaFilterDomains extends LitElement { box-sizing: border-box; border-radius: 50%; font-weight: 400; - font-size: 11px; + font-size: var(--ha-font-size-xs); background-color: var(--primary-color); line-height: 16px; text-align: center; diff --git a/src/components/ha-filter-entities.ts b/src/components/ha-filter-entities.ts index 39d6d51288..3187a7c501 100644 --- a/src/components/ha-filter-entities.ts +++ b/src/components/ha-filter-entities.ts @@ -247,7 +247,7 @@ export class HaFilterEntities extends LitElement { box-sizing: border-box; border-radius: 50%; font-weight: 400; - font-size: 11px; + font-size: var(--ha-font-size-xs); background-color: var(--primary-color); line-height: 16px; text-align: center; diff --git a/src/components/ha-filter-floor-areas.ts b/src/components/ha-filter-floor-areas.ts index 3cf160dec7..c581abcf72 100644 --- a/src/components/ha-filter-floor-areas.ts +++ b/src/components/ha-filter-floor-areas.ts @@ -304,7 +304,7 @@ export class HaFilterFloorAreas extends LitElement { box-sizing: border-box; border-radius: 50%; font-weight: 400; - font-size: 11px; + font-size: var(--ha-font-size-xs); background-color: var(--primary-color); line-height: 16px; text-align: center; diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts index bf8507ff1f..9ebaf5e13b 100644 --- a/src/components/ha-filter-integrations.ts +++ b/src/components/ha-filter-integrations.ts @@ -196,7 +196,7 @@ export class HaFilterIntegrations extends LitElement { box-sizing: border-box; border-radius: 50%; font-weight: 400; - font-size: 11px; + font-size: var(--ha-font-size-xs); background-color: var(--primary-color); line-height: 16px; text-align: center; diff --git a/src/components/ha-filter-labels.ts b/src/components/ha-filter-labels.ts index 0e006c85de..fbdd99c065 100644 --- a/src/components/ha-filter-labels.ts +++ b/src/components/ha-filter-labels.ts @@ -234,7 +234,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) { box-sizing: border-box; border-radius: 50%; font-weight: 400; - font-size: 11px; + font-size: var(--ha-font-size-xs); background-color: var(--primary-color); line-height: 16px; text-align: center; diff --git a/src/components/ha-filter-states.ts b/src/components/ha-filter-states.ts index cd3ef47856..5471b255cc 100644 --- a/src/components/ha-filter-states.ts +++ b/src/components/ha-filter-states.ts @@ -178,7 +178,7 @@ export class HaFilterStates extends LitElement { box-sizing: border-box; border-radius: 50%; font-weight: 400; - font-size: 11px; + font-size: var(--ha-font-size-xs); background-color: var(--primary-color); line-height: 16px; text-align: center; diff --git a/src/components/ha-header-bar.ts b/src/components/ha-header-bar.ts index 966da7ab80..d50d764af2 100644 --- a/src/components/ha-header-bar.ts +++ b/src/components/ha-header-bar.ts @@ -46,7 +46,7 @@ export class HaHeaderBar extends LitElement { flex: none; } .mdc-top-app-bar__title { - font-size: 20px; + font-size: var(--ha-font-size-xl); padding-inline-start: 24px; padding-inline-end: initial; } diff --git a/src/components/ha-heading-badge.ts b/src/components/ha-heading-badge.ts index 8ad3a9ae00..27def2d750 100644 --- a/src/components/ha-heading-badge.ts +++ b/src/components/ha-heading-badge.ts @@ -34,7 +34,7 @@ export class HaBadge extends LitElement { align-items: center; gap: 3px; color: var(--ha-heading-badge-text-color, var(--secondary-text-color)); - font-size: var(--ha-heading-badge-font-size, 14px); + font-size: var(--ha-heading-badge-font-size, var(--ha-font-size-m)); font-weight: var(--ha-heading-badge-font-weight, 400); line-height: var(--ha-heading-badge-line-height, 20px); letter-spacing: 0.1px; diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts index 1b15d914ed..a9a74c43df 100644 --- a/src/components/ha-label.ts +++ b/src/components/ha-label.ts @@ -32,7 +32,7 @@ class HaLabel extends LitElement { display: inline-flex; flex-direction: row; align-items: center; - font-size: 12px; + font-size: var(--ha-font-size-s); font-weight: 500; line-height: 16px; letter-spacing: 0.1px; diff --git a/src/components/ha-select-box.ts b/src/components/ha-select-box.ts index a53506df74..b424c5f97d 100644 --- a/src/components/ha-select-box.ts +++ b/src/components/ha-select-box.ts @@ -154,7 +154,7 @@ export class HaSelectBox extends LitElement { } .option .content .text .label { color: var(--primary-text-color); - font-size: 14px; + font-size: var(--ha-font-size-m); font-weight: 400; line-height: 20px; overflow: hidden; @@ -163,7 +163,7 @@ export class HaSelectBox extends LitElement { } .option .content .text .description { color: var(--secondary-text-color); - font-size: 13px; + font-size: var(--ha-font-size-s); font-weight: 400; line-height: 16px; } diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts index 6ea72b09f5..11a55d001d 100644 --- a/src/components/ha-selector/ha-selector-media.ts +++ b/src/components/ha-selector/ha-selector-media.ts @@ -247,7 +247,7 @@ export class HaMediaSelector extends LitElement { --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4); } .title { - font-size: 16px; + font-size: var(--ha-font-size-l); padding-top: 16px; overflow: hidden; text-overflow: ellipsis; diff --git a/src/components/ha-selector/ha-selector-selector.ts b/src/components/ha-selector/ha-selector-selector.ts index 75f7f888f2..af38d908d6 100644 --- a/src/components/ha-selector/ha-selector-selector.ts +++ b/src/components/ha-selector/ha-selector-selector.ts @@ -290,7 +290,7 @@ export class HaSelectorSelector extends LitElement { padding: 0px 16px 16px 16px; } .title { - font-size: 16px; + font-size: var(--ha-font-size-l); padding-top: 16px; overflow: hidden; text-overflow: ellipsis; diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 9b9695a765..eb4559707c 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -837,7 +837,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { --sidebar-menu-button-background-color, inherit ); - font-size: 20px; + font-size: var(--ha-font-size-xl); align-items: center; padding-left: calc(4px + env(safe-area-inset-left)); padding-inline-start: calc(4px + env(safe-area-inset-left)); @@ -940,7 +940,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { display: none; max-width: calc(100% - 56px); font-weight: 500; - font-size: 14px; + font-size: var(--ha-font-size-m); } :host([expanded]) ha-md-list-item .item-text { display: block; @@ -997,7 +997,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { .subheader { color: var(--sidebar-text-color); font-weight: 500; - font-size: 14px; + font-size: var(--ha-font-size-m); padding: 16px; white-space: nowrap; } diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts index 4a2b41c485..f080be581d 100644 --- a/src/components/ha-top-app-bar-fixed.ts +++ b/src/components/ha-top-app-bar-fixed.ts @@ -24,7 +24,7 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase { ); } .mdc-top-app-bar__title { - font-size: 20px; + font-size: var(--ha-font-size-xl); padding-inline-start: 24px; padding-inline-end: initial; } diff --git a/src/components/ha-two-pane-top-app-bar-fixed.ts b/src/components/ha-two-pane-top-app-bar-fixed.ts index 9b348d0442..61cabf6efc 100644 --- a/src/components/ha-two-pane-top-app-bar-fixed.ts +++ b/src/components/ha-two-pane-top-app-bar-fixed.ts @@ -321,7 +321,7 @@ export class TopAppBarBaseBase extends BaseElement { overflow: auto; } .mdc-top-app-bar__title { - font-size: 20px; + font-size: var(--ha-font-size-xl); padding-inline-start: 24px; padding-inline-end: initial; } diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts index 153a3a8c60..a97bf138e0 100644 --- a/src/components/map/ha-map.ts +++ b/src/components/map/ha-map.ts @@ -688,7 +688,7 @@ export class HaMap extends ReactiveElement { border-radius: 20px; text-align: center; color: var(--text-primary-color); - font-size: 14px; + font-size: var(--ha-font-size-m); } .marker-cluster span { diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index d183d49b0d..b2f9d3acd2 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -959,7 +959,7 @@ export class HaMediaPlayerBrowse extends LitElement { padding-top: 16px; } .breadcrumb .title { - font-size: 32px; + font-size: var(--ha-font-size-4xl); line-height: 1.2; font-weight: bold; margin: 0; @@ -970,7 +970,7 @@ export class HaMediaPlayerBrowse extends LitElement { padding-right: 8px; } .breadcrumb .previous-title { - font-size: 14px; + font-size: var(--ha-font-size-m); padding-bottom: 8px; color: var(--secondary-text-color); overflow: hidden; @@ -979,7 +979,7 @@ export class HaMediaPlayerBrowse extends LitElement { --mdc-icon-size: 14px; } .breadcrumb .subtitle { - font-size: 16px; + font-size: var(--ha-font-size-l); overflow: hidden; text-overflow: ellipsis; margin-bottom: 0; @@ -1138,7 +1138,7 @@ export class HaMediaPlayerBrowse extends LitElement { } .child .title { - font-size: 16px; + font-size: var(--ha-font-size-l); padding-top: 16px; padding-left: 2px; overflow: hidden; @@ -1203,7 +1203,7 @@ export class HaMediaPlayerBrowse extends LitElement { } :host([narrow]) .breadcrumb .title { - font-size: 24px; + font-size: var(--ha-font-size-2xl); } :host([narrow]) .header { padding: 0; diff --git a/src/components/tile/ha-tile-info.ts b/src/components/tile/ha-tile-info.ts index b18adc3e20..04aea75a61 100644 --- a/src/components/tile/ha-tile-info.ts +++ b/src/components/tile/ha-tile-info.ts @@ -35,14 +35,14 @@ export class HaTileInfo extends LitElement { } .primary { font-weight: 500; - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 20px; letter-spacing: 0.1px; color: var(--primary-text-color); } .secondary { font-weight: 400; - font-size: 12px; + font-size: var(--ha-font-size-s); line-height: 16px; letter-spacing: 0.4px; color: var(--primary-text-color); diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts index 330338b7cc..bc9f1c4b26 100644 --- a/src/components/trace/hat-graph-node.ts +++ b/src/components/trace/hat-graph-node.ts @@ -164,7 +164,7 @@ export class HatGraphNode extends LitElement { stroke-width: 0; } .number text { - font-size: 10px; + font-size: var(--ha-font-size-xs); fill: var(--text-primary-color); } path.icon { diff --git a/src/dialogs/enter-code/dialog-enter-code.ts b/src/dialogs/enter-code/dialog-enter-code.ts index 933567705e..baf4ef350b 100644 --- a/src/dialogs/enter-code/dialog-enter-code.ts +++ b/src/dialogs/enter-code/dialog-enter-code.ts @@ -228,7 +228,7 @@ export class DialogEnterCode height: 56px; --control-button-border-radius: 28px; --mdc-icon-size: 24px; - font-size: 24px; + font-size: var(--ha-font-size-2xl); } .submit { --control-button-background-color: var(--green-color); diff --git a/src/dialogs/more-info/components/ha-more-info-state-header.ts b/src/dialogs/more-info/components/ha-more-info-state-header.ts index e166517bab..dcc96d4342 100644 --- a/src/dialogs/more-info/components/ha-more-info-state-header.ts +++ b/src/dialogs/more-info/components/ha-more-info-state-header.ts @@ -75,13 +75,13 @@ export class HaMoreInfoStateHeader extends LitElement { .state { font-style: normal; font-weight: 400; - font-size: 36px; + font-size: var(--ha-font-size-5xl); line-height: 44px; } .last-changed { font-style: normal; font-weight: 500; - font-size: 16px; + font-size: var(--ha-font-size-l); line-height: 24px; letter-spacing: 0.1px; padding: 4px 0; 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 2f3480646d..13c75f639c 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 @@ -185,7 +185,7 @@ class LightColorTempPicker extends LitElement { top, var(--gradient) ); - --control-slider-tooltip-font-size: 20px; + --control-slider-tooltip-font-size: var(--ha-font-size-xl); --control-slider-background-opacity: 1; } `, diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts index f265a1d916..4914e3c4eb 100644 --- a/src/dialogs/more-info/controls/more-info-climate.ts +++ b/src/dialogs/more-info/controls/more-info-climate.ts @@ -530,14 +530,14 @@ class MoreInfoClimate extends LitElement { .current .label { opacity: 0.8; - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 16px; letter-spacing: 0.4px; margin-bottom: 4px; } .current .value { - font-size: 22px; + font-size: var(--ha-font-size-2xl); font-weight: 500; line-height: 28px; direction: ltr; diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts index 77f5556413..e274ef2857 100644 --- a/src/dialogs/more-info/controls/more-info-humidifier.ts +++ b/src/dialogs/more-info/controls/more-info-humidifier.ts @@ -233,13 +233,13 @@ class MoreInfoHumidifier extends LitElement { } .current .label { opacity: 0.8; - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 16px; letter-spacing: 0.4px; margin-bottom: 4px; } .current .value { - font-size: 22px; + font-size: var(--ha-font-size-2xl); font-weight: 500; line-height: 28px; direction: ltr; diff --git a/src/dialogs/more-info/controls/more-info-lock.ts b/src/dialogs/more-info/controls/more-info-lock.ts index 287199cc06..90e83696ac 100644 --- a/src/dialogs/more-info/controls/more-info-lock.ts +++ b/src/dialogs/more-info/controls/more-info-lock.ts @@ -165,7 +165,7 @@ class MoreInfoLock extends LitElement { moreInfoControlStyle, css` ha-control-button { - font-size: 14px; + font-size: var(--ha-font-size-m); height: 60px; --control-button-border-radius: 24px; } diff --git a/src/dialogs/more-info/controls/more-info-water_heater.ts b/src/dialogs/more-info/controls/more-info-water_heater.ts index 28f831e093..91f271f820 100644 --- a/src/dialogs/more-info/controls/more-info-water_heater.ts +++ b/src/dialogs/more-info/controls/more-info-water_heater.ts @@ -234,14 +234,14 @@ class MoreInfoWaterHeater extends LitElement { .current .label { opacity: 0.8; - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 16px; letter-spacing: 0.4px; margin-bottom: 4px; } .current .value { - font-size: 22px; + font-size: var(--ha-font-size-2xl); font-weight: 500; line-height: 28px; direction: ltr; diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index 06063284cc..ef700b6638 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/src/dialogs/more-info/controls/more-info-weather.ts @@ -512,18 +512,18 @@ class MoreInfoWeather extends LitElement { .temp-attribute .temp span { position: absolute; - font-size: 24px; + font-size: var(--ha-font-size-2xl); top: 1px; } .state, .temp-attribute .temp { - font-size: 28px; + font-size: var(--ha-font-size-3xl); line-height: 1.2; } .attribute { - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 1; } @@ -570,7 +570,7 @@ class MoreInfoWeather extends LitElement { } .forecast .temp { - font-size: 16px; + font-size: var(--ha-font-size-l); } .forecast-image-icon { diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index c8a1c34437..18527a21f8 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -679,13 +679,13 @@ export class MoreInfoDialog extends LitElement { .title .main { color: var(--primary-text-color); - font-size: 20px; + font-size: var(--ha-font-size-xl); line-height: 24px; } .title .breadcrumb { color: var(--secondary-text-color); - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 16px; --mdc-icon-size: 16px; padding: 4px; diff --git a/src/dialogs/restart/dialog-restart.ts b/src/dialogs/restart/dialog-restart.ts index ee8c9164fa..ac400ba8b2 100644 --- a/src/dialogs/restart/dialog-restart.ts +++ b/src/dialogs/restart/dialog-restart.ts @@ -468,7 +468,7 @@ class DialogRestart extends LitElement { } .section { font-weight: 500; - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 20px; margin: 8px 0 4px 0; padding-left: var(--mdc-list-side-padding, 20px); 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 c2edcf4949..83c30aa50f 100644 --- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts +++ b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts @@ -153,7 +153,7 @@ export class CloudStepIntro extends LitElement { display: flex; align-items: center; justify-content: center; - font-size: 24px; + font-size: var(--ha-font-size-2xl); } .access .round-icon { color: #00aef8; @@ -161,14 +161,14 @@ export class CloudStepIntro extends LitElement { } .feature h2 { font-weight: 500; - font-size: 16px; + font-size: var(--ha-font-size-l); line-height: 24px; margin-top: 0; margin-bottom: 8px; } .feature p { font-weight: 400; - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 20px; margin: 0; } diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts index 461bd3fc3c..defea23eb5 100644 --- a/src/layouts/hass-error-screen.ts +++ b/src/layouts/hass-error-screen.ts @@ -64,7 +64,7 @@ class HassErrorScreen extends LitElement { .toolbar { display: flex; align-items: center; - font-size: 20px; + font-size: var(--ha-font-size-xl); height: var(--header-height); padding: 8px 12px; pointer-events: none; diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts index 3aa2f5d672..b534356099 100644 --- a/src/layouts/hass-loading-screen.ts +++ b/src/layouts/hass-loading-screen.ts @@ -64,7 +64,7 @@ class HassLoadingScreen extends LitElement { .toolbar { display: flex; align-items: center; - font-size: 20px; + font-size: var(--ha-font-size-xl); height: var(--header-height); padding: 8px 12px; pointer-events: none; diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts index 2c411b0478..acab097678 100644 --- a/src/layouts/hass-subpage.ts +++ b/src/layouts/hass-subpage.ts @@ -97,7 +97,7 @@ class HassSubpage extends LitElement { .toolbar { display: flex; align-items: center; - font-size: 20px; + font-size: var(--ha-font-size-xl); height: var(--header-height); padding: 8px 12px; background-color: var(--app-header-background-color); diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index 81297196d1..820983f2cd 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -760,7 +760,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) { margin-left: 4px; margin-inline-start: 4px; margin-inline-end: initial; - font-size: 14px; + font-size: var(--ha-font-size-m); width: max-content; cursor: initial; direction: var(--direction); @@ -823,7 +823,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) { box-sizing: border-box; border-radius: 50%; font-weight: 400; - font-size: 11px; + font-size: var(--ha-font-size-xs); background-color: var(--primary-color); line-height: 16px; text-align: center; @@ -857,7 +857,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) { justify-content: space-between; padding: 8px 12px; box-sizing: border-box; - font-size: 14px; + font-size: var(--ha-font-size-m); --ha-assist-chip-container-color: var(--card-background-color); } diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index ca930a01b5..e47a516082 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -230,7 +230,7 @@ class HassTabsSubpage extends LitElement { } .toolbar { - font-size: 20px; + font-size: var(--ha-font-size-xl); height: var(--header-height); background-color: var(--sidebar-background-color); font-weight: 400; @@ -259,7 +259,7 @@ class HassTabsSubpage extends LitElement { #tabbar { display: flex; - font-size: 14px; + font-size: var(--ha-font-size-m); overflow: hidden; } @@ -278,7 +278,7 @@ class HassTabsSubpage extends LitElement { border-top: 1px solid var(--divider-color); justify-content: space-around; z-index: 2; - font-size: 12px; + font-size: var(--ha-font-size-s); width: 100%; padding-bottom: env(safe-area-inset-bottom); } diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts index 99ad56d5e3..34013bee63 100644 --- a/src/onboarding/onboarding-core-config.ts +++ b/src/onboarding/onboarding-core-config.ts @@ -199,7 +199,7 @@ class OnboardingCoreConfig extends LitElement { } p { - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 20px; } diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts b/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts index c361672ccb..6355d4c084 100644 --- a/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts +++ b/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts @@ -120,7 +120,7 @@ class OnboardingRestoreBackupCloudLogin extends LitElement { text-align: left; } h2 { - font-size: 24px; + font-size: var(--ha-font-size-2xl); display: flex; align-items: center; gap: 16px; diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts index 96e1337e96..1860d7cb47 100644 --- a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts +++ b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts @@ -338,7 +338,7 @@ class OnboardingRestoreBackupRestore extends LitElement { line-height: normal; } h2 { - font-size: 22px; + font-size: var(--ha-font-size-2xl); margin-top: 24px; margin-bottom: 8px; font-style: normal; diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-status.ts b/src/onboarding/restore-backup/onboarding-restore-backup-status.ts index 2a7f8c8e0c..5b82ef1a4f 100644 --- a/src/onboarding/restore-backup/onboarding-restore-backup-status.ts +++ b/src/onboarding/restore-backup/onboarding-restore-backup-status.ts @@ -86,11 +86,11 @@ class OnboardingRestoreBackupStatus extends LitElement { p { text-align: center; padding: 0 16px; - font-size: 16px; + font-size: var(--ha-font-size-l); } .failed { padding: 16px 0; - font-size: 16px; + font-size: var(--ha-font-size-l); } mwc-linear-progress { width: 100%; diff --git a/src/onboarding/styles.ts b/src/onboarding/styles.ts index b007eef334..b98981e060 100644 --- a/src/onboarding/styles.ts +++ b/src/onboarding/styles.ts @@ -6,7 +6,7 @@ export const onBoardingStyles = css` } h1 { font-weight: 400; - font-size: 28px; + font-size: var(--ha-font-size-3xl); line-height: 36px; margin-bottom: 8px; } diff --git a/src/panels/calendar/dialog-calendar-event-editor.ts b/src/panels/calendar/dialog-calendar-event-editor.ts index eeb6560a83..02fdabefb4 100644 --- a/src/panels/calendar/dialog-calendar-event-editor.ts +++ b/src/panels/calendar/dialog-calendar-event-editor.ts @@ -623,7 +623,7 @@ class DialogCalendarEventEditor extends LitElement { justify-content: space-between; } .label { - font-size: 12px; + font-size: var(--ha-font-size-s); font-weight: 500; color: var(--input-label-ink-color); } diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index b2cd0e3c0d..13cff951a9 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -563,7 +563,7 @@ export class HAFullCalendar extends LitElement { th.fc-col-header-cell.fc-day { background-color: var(--table-header-background-color); color: var(--primary-text-color); - font-size: 11px; + font-size: var(--ha-font-size-xs); font-weight: bold; text-transform: uppercase; } @@ -587,7 +587,7 @@ export class HAFullCalendar extends LitElement { a.fc-daygrid-day-number { float: none !important; - font-size: 12px; + font-size: var(--ha-font-size-s); cursor: pointer; } @@ -657,13 +657,13 @@ export class HAFullCalendar extends LitElement { } .fc-list-day-text { - font-size: 16px; + font-size: var(--ha-font-size-l); font-weight: 400; } .fc-list-day-side-text { font-weight: 400; - font-size: 16px; + font-size: var(--ha-font-size-l); color: var(--primary-color); } diff --git a/src/panels/config/application_credentials/ha-config-application-credentials.ts b/src/panels/config/application_credentials/ha-config-application-credentials.ts index cb2fa6c5db..8312d1ce55 100644 --- a/src/panels/config/application_credentials/ha-config-application-credentials.ts +++ b/src/panels/config/application_credentials/ha-config-application-credentials.ts @@ -338,7 +338,7 @@ export class HaConfigApplicationCredentials extends LitElement { margin-top: 20px; } .header-toolbar .selected-txt { - font-size: 16px; + font-size: var(--ha-font-size-l); } .header-toolbar .header-btns { margin-right: -12px; diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts index 283f0972ab..be0a029f56 100644 --- a/src/panels/config/areas/ha-config-areas-dashboard.ts +++ b/src/panels/config/areas/ha-config-areas-dashboard.ts @@ -455,7 +455,7 @@ export class HaConfigAreasDashboard extends LitElement { padding-inline-start: 8px; } .header h2 { - font-size: 14px; + font-size: var(--ha-font-size-m); font-weight: 500; margin-top: 28px; } diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index d1484d7499..cd44b1d742 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -555,7 +555,7 @@ export default class HaAutomationConditionRow extends LitElement { left: 0px; text-transform: uppercase; font-weight: bold; - font-size: 14px; + font-size: var(--ha-font-size-m); background-color: var(--divider-color, #e0e0e0); color: var(--text-primary-color); max-height: 0px; diff --git a/src/panels/config/automation/ha-automation-trace.ts b/src/panels/config/automation/ha-automation-trace.ts index 1ced1f10df..c66506b929 100644 --- a/src/panels/config/automation/ha-automation-trace.ts +++ b/src/panels/config/automation/ha-automation-trace.ts @@ -528,7 +528,7 @@ export class HaAutomationTrace extends LitElement { display: flex; align-items: center; justify-content: center; - font-size: 20px; + font-size: var(--ha-font-size-xl); height: var(--header-height); padding: 4px; background-color: var(--primary-background-color); diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 7dbd244a49..e1fc84290c 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -701,7 +701,7 @@ export default class HaAutomationTriggerRow extends LitElement { left: 0px; text-transform: uppercase; font-weight: bold; - font-size: 14px; + font-size: var(--ha-font-size-m); background-color: var(--primary-color); color: var(--text-primary-color); max-height: 0px; diff --git a/src/panels/config/backup/components/ha-backup-agents-picker.ts b/src/panels/config/backup/components/ha-backup-agents-picker.ts index 529a5089dc..35b8a9ba4c 100644 --- a/src/panels/config/backup/components/ha-backup-agents-picker.ts +++ b/src/panels/config/backup/components/ha-backup-agents-picker.ts @@ -120,7 +120,7 @@ class HaBackupAgentsPicker extends LitElement { flex-direction: row; align-items: center; gap: 16px; - font-size: 16px; + font-size: var(--ha-font-size-l); font-weight: 400; line-height: 24px; letter-spacing: 0.5px; diff --git a/src/panels/config/backup/components/ha-backup-formfield-label.ts b/src/panels/config/backup/components/ha-backup-formfield-label.ts index d77c659851..bcf4a95acf 100644 --- a/src/panels/config/backup/components/ha-backup-formfield-label.ts +++ b/src/panels/config/backup/components/ha-backup-formfield-label.ts @@ -42,7 +42,7 @@ class SupervisorFormfieldLabel extends LitElement { margin-right: 4px; margin-inline-end: 4px; margin-inline-start: initial; - font-size: 14px; + font-size: var(--ha-font-size-m); font-weight: 400; line-height: 24px; letter-spacing: 0.5px; 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 16dd2bf4bb..b468cfc61c 100644 --- a/src/panels/config/backup/components/ha-backup-summary-card.ts +++ b/src/panels/config/backup/components/ha-backup-summary-card.ts @@ -125,7 +125,7 @@ class HaBackupSummaryCard extends LitElement { min-width: 0; } .heading { - font-size: 22px; + font-size: var(--ha-font-size-2xl); font-style: normal; font-weight: 400; line-height: 28px; @@ -136,7 +136,7 @@ class HaBackupSummaryCard extends LitElement { white-space: nowrap; } .description { - font-size: 14px; + font-size: var(--ha-font-size-m); font-style: normal; font-weight: 400; line-height: 20px; diff --git a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts index 6b4e51fe06..fb9eb73f16 100644 --- a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts +++ b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts @@ -580,7 +580,7 @@ class DialogBackupOnboarding extends LitElement implements HassDialog { margin: 0; flex: 1; font-family: "Roboto Mono", "Consolas", "Menlo", monospace; - font-size: 20px; + font-size: var(--ha-font-size-xl); font-style: normal; font-weight: 400; line-height: 28px; 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 f8e7ee2f70..58e249f6b4 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 @@ -314,7 +314,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog { margin: 0; flex: 1; font-family: "Roboto Mono", "Consolas", "Menlo", monospace; - font-size: 20px; + font-size: var(--ha-font-size-xl); font-style: normal; font-weight: 400; line-height: 28px; diff --git a/src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts b/src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts index 8c82390142..df7b23ccb0 100644 --- a/src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts +++ b/src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts @@ -208,7 +208,7 @@ class DialogDownloadDecryptedBackup extends LitElement implements HassDialog { background: none; border: none; padding: 0; - font-size: 14px; + font-size: var(--ha-font-size-m); color: var(--primary-color); text-decoration: underline; cursor: pointer; 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 748e8cc325..b4ed58c235 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 @@ -232,7 +232,7 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog { margin: 0; flex: 1; font-family: "Roboto Mono", "Consolas", "Menlo", monospace; - font-size: 20px; + font-size: var(--ha-font-size-xl); font-style: normal; font-weight: 400; line-height: 28px; 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 15bb07096c..0d6859dde2 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 @@ -154,7 +154,7 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog { margin: 0; flex: 1; font-family: "Roboto Mono", "Consolas", "Menlo", monospace; - font-size: 20px; + font-size: var(--ha-font-size-xl); font-style: normal; font-weight: 400; line-height: 28px; diff --git a/src/panels/config/backup/ha-config-backup-backups.ts b/src/panels/config/backup/ha-config-backup-backups.ts index 30af43c705..bd538ab566 100644 --- a/src/panels/config/backup/ha-config-backup-backups.ts +++ b/src/panels/config/backup/ha-config-backup-backups.ts @@ -235,7 +235,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) { ${agentsMore ? html` +${agentsMore} diff --git a/src/panels/config/backup/ha-config-backup-settings.ts b/src/panels/config/backup/ha-config-backup-settings.ts index 422f96d69c..33ea9d5adb 100644 --- a/src/panels/config/backup/ha-config-backup-settings.ts +++ b/src/panels/config/backup/ha-config-backup-settings.ts @@ -535,7 +535,7 @@ class HaConfigBackupSettings extends LitElement { .cloud-info .cloud-header { display: flex; gap: 16px; - font-size: 22px; + font-size: var(--ha-font-size-xl); align-items: center; padding: 16px; } diff --git a/src/panels/config/core/ha-config-system-navigation.ts b/src/panels/config/core/ha-config-system-navigation.ts index 3f6675e5b1..3fc8684347 100644 --- a/src/panels/config/core/ha-config-system-navigation.ts +++ b/src/panels/config/core/ha-config-system-navigation.ts @@ -244,7 +244,7 @@ class HaConfigSystemNavigation extends LitElement { } .title { - font-size: 16px; + font-size: var(--ha-font-size-l); padding: 16px; padding-bottom: 0; } @@ -269,7 +269,7 @@ class HaConfigSystemNavigation extends LitElement { } ha-navigation-list { - --navigation-list-item-title-font-size: 16px; + --navigation-list-item-title-font-size: var(--ha-font-size-l); } `, ]; diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index ab6aeadc4b..eb83876aa3 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -408,7 +408,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) { margin: 8px 16px 16px 16px; } .title { - font-size: 16px; + font-size: var(--ha-font-size-l); padding: 16px; padding-bottom: 0; } diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts index d34d266364..87b2f1bc62 100644 --- a/src/panels/config/dashboard/ha-config-navigation.ts +++ b/src/panels/config/dashboard/ha-config-navigation.ts @@ -66,7 +66,7 @@ class HaConfigNavigation extends LitElement { static styles: CSSResultGroup = css` ha-navigation-list { - --navigation-list-item-title-font-size: 16px; + --navigation-list-item-title-font-size: var(--ha-font-size-l); } `; } diff --git a/src/panels/config/dashboard/ha-config-updates.ts b/src/panels/config/dashboard/ha-config-updates.ts index 271e398558..bb3db558cc 100644 --- a/src/panels/config/dashboard/ha-config-updates.ts +++ b/src/panels/config/dashboard/ha-config-updates.ts @@ -148,7 +148,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) { return [ css` .title { - font-size: 16px; + font-size: var(--ha-font-size-l); padding: 16px; padding-bottom: 0; } @@ -180,7 +180,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) { text-decoration: underline; } ha-md-list-item { - font-size: 16px; + font-size: var(--ha-font-size-l); } div[slot="start"] { position: relative; diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts index 3bfb0a12ba..e16196b396 100644 --- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts @@ -269,7 +269,7 @@ export class HaDeviceEntitiesCard extends LitElement { margin: 0 16px 0 8px; } .name { - font-size: 14px; + font-size: var(--ha-font-size-m); } .name:dir(rtl) { margin-inline-start: 8px; diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 4144c74571..b296741e05 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -1551,7 +1551,7 @@ ${rejected margin-top: 20px; } .header-toolbar .selected-txt { - font-size: 16px; + font-size: var(--ha-font-size-l); } .header-toolbar .header-btns { margin-right: -12px; diff --git a/src/panels/config/ha-config-section.ts b/src/panels/config/ha-config-section.ts index c21d18e103..6e75f503f3 100644 --- a/src/panels/config/ha-config-section.ts +++ b/src/panels/config/ha-config-section.ts @@ -80,7 +80,7 @@ export class HaConfigSection extends LitElement { line-height: var(--ha-line-height-normal); width: 100%; opacity: var(--dark-primary-opacity); - font-size: 14px; + font-size: var(--ha-font-size-m); padding-bottom: 20px; } diff --git a/src/panels/config/hardware/ha-config-hardware.ts b/src/panels/config/hardware/ha-config-hardware.ts index 6f420aeebe..2ce2a754c2 100644 --- a/src/panels/config/hardware/ha-config-hardware.ts +++ b/src/panels/config/hardware/ha-config-hardware.ts @@ -502,11 +502,11 @@ class HaConfigHardware extends SubscribeMixin(LitElement) { text-align: center; } .primary-text { - font-size: 16px; + font-size: var(--ha-font-size-l); margin: 0; } .secondary-text { - font-size: 14px; + font-size: var(--ha-font-size-m); margin-bottom: 0; color: var(--secondary-text-color); } @@ -519,11 +519,11 @@ class HaConfigHardware extends SubscribeMixin(LitElement) { .header .title { color: var(--secondary-text-color); - font-size: 18px; + font-size: var(--ha-font-size-l); } .header .value { - font-size: 16px; + font-size: var(--ha-font-size-l); } .row { display: flex; diff --git a/src/panels/config/helpers/forms/ha-schedule-form.ts b/src/panels/config/helpers/forms/ha-schedule-form.ts index 9fe2ef5c7b..026c0578d8 100644 --- a/src/panels/config/helpers/forms/ha-schedule-form.ts +++ b/src/panels/config/helpers/forms/ha-schedule-form.ts @@ -480,7 +480,7 @@ class HaScheduleForm extends LitElement { th.fc-col-header-cell.fc-day { background-color: var(--table-header-background-color); color: var(--primary-text-color); - font-size: 11px; + font-size: var(--ha-font-size-xs); font-weight: bold; text-transform: uppercase; } diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts index 26acffcabd..f001c41aa8 100644 --- a/src/panels/config/info/ha-config-info.ts +++ b/src/panels/config/info/ha-config-info.ts @@ -297,7 +297,7 @@ class HaConfigInfo extends LitElement { } .header p { - font-size: 22px; + font-size: var(--ha-font-size-2xl); font-weight: 400; line-height: 28px; text-align: center; @@ -328,7 +328,7 @@ class HaConfigInfo extends LitElement { display: flex; flex-direction: row; justify-content: space-between; - font-size: 14px; + font-size: var(--ha-font-size-m); font-weight: 400; padding: 4px 0; } @@ -344,7 +344,7 @@ class HaConfigInfo extends LitElement { .ha-version { color: var(--primary-text-color); font-weight: 500; - font-size: 16px; + font-size: var(--ha-font-size-l); } .pages { diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts index cd14551053..c61d40a440 100644 --- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts +++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts @@ -1038,7 +1038,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( padding-left: 8px; padding-inline-start: 8px; padding-inline-end: 2px; - font-size: 14px; + font-size: var(--ha-font-size-m); width: max-content; cursor: initial; direction: var(--direction); diff --git a/src/panels/config/integrations/ha-domain-integrations.ts b/src/panels/config/integrations/ha-domain-integrations.ts index 8a7d8cc16f..f9e43bc614 100644 --- a/src/panels/config/integrations/ha-domain-integrations.ts +++ b/src/panels/config/integrations/ha-domain-integrations.ts @@ -332,7 +332,7 @@ class HaDomainIntegrations extends LitElement { h3 { margin: 8px 24px 0; color: var(--secondary-text-color); - font-size: 14px; + font-size: var(--ha-font-size-m); font-weight: 500; } h3:first-of-type { diff --git a/src/panels/config/integrations/ha-integration-action-card.ts b/src/panels/config/integrations/ha-integration-action-card.ts index c26a79d6b5..6c506dc5ee 100644 --- a/src/panels/config/integrations/ha-integration-action-card.ts +++ b/src/panels/config/integrations/ha-integration-action-card.ts @@ -75,14 +75,14 @@ export class HaIntegrationActionCard extends LitElement { height: 40px; } h2 { - font-size: 16px; + font-size: var(--ha-font-size-l); font-weight: 400; margin-top: 8px; margin-bottom: 0; max-width: 100%; } h3 { - font-size: 14px; + font-size: var(--ha-font-size-m); margin: 0; max-width: 100%; text-align: center; diff --git a/src/panels/config/integrations/ha-integration-header.ts b/src/panels/config/integrations/ha-integration-header.ts index d4c3b433a1..21fe2f8a9a 100644 --- a/src/panels/config/integrations/ha-integration-header.ts +++ b/src/panels/config/integrations/ha-integration-header.ts @@ -121,19 +121,19 @@ export class HaIntegrationHeader extends LitElement { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - font-size: 16px; + font-size: var(--ha-font-size-l); font-weight: 400; color: var(--primary-text-color); } .has-secondary { -webkit-line-clamp: 1; - font-size: 14px; + font-size: var(--ha-font-size-m); } .secondary { min-width: 0; --mdc-icon-size: 20px; -webkit-line-clamp: 1; - font-size: 12px; + font-size: var(--ha-font-size-s); display: flex; flex-direction: row; } diff --git a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-failed.ts b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-failed.ts index 7f9ef1412d..72d0793f37 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-failed.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-failed.ts @@ -52,7 +52,7 @@ export class ZWaveJsAddNodeFailed extends LitElement { div.note { text-align: center; margin-top: 16px; - font-size: 12px; + font-size: var(--ha-font-size-s); color: var(--secondary-text-color); } ha-button { 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 c92c856e9b..d966009c42 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 @@ -121,7 +121,7 @@ export class ZWaveJsAddNodeSearchingDevices extends LitElement { display: block; } .note { - font-size: 12px; + font-size: var(--ha-font-size-s); color: var(--secondary-text-color); } .searching-spinner { diff --git a/src/panels/config/repairs/dialog-repairs-issue-subtitle.ts b/src/panels/config/repairs/dialog-repairs-issue-subtitle.ts index 6ea15ed6e4..6c0ff68808 100644 --- a/src/panels/config/repairs/dialog-repairs-issue-subtitle.ts +++ b/src/panels/config/repairs/dialog-repairs-issue-subtitle.ts @@ -40,7 +40,7 @@ class DialogRepairsIssueSubtitle extends LitElement { static styles = css` :host { display: block; - font-size: 14px; + font-size: var(--ha-font-size-m); margin-bottom: 8px; color: var(--secondary-text-color); text-overflow: ellipsis; diff --git a/src/panels/config/repairs/ha-config-repairs.ts b/src/panels/config/repairs/ha-config-repairs.ts index 77345f3e86..17f1e7e001 100644 --- a/src/panels/config/repairs/ha-config-repairs.ts +++ b/src/panels/config/repairs/ha-config-repairs.ts @@ -171,7 +171,7 @@ class HaConfigRepairs extends LitElement { --mdc-list-vertical-padding: 0; } .title { - font-size: 16px; + font-size: var(--ha-font-size-l); padding: 16px; padding-bottom: 0; } diff --git a/src/panels/config/repairs/integrations-startup-time.ts b/src/panels/config/repairs/integrations-startup-time.ts index 6779717429..836c30afca 100644 --- a/src/panels/config/repairs/integrations-startup-time.ts +++ b/src/panels/config/repairs/integrations-startup-time.ts @@ -111,7 +111,7 @@ class IntegrationsStartupTime extends LitElement { border-radius: 0; } div[slot="end"] { - font-size: 12px; + font-size: var(--ha-font-size-s); } `; } diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index fdc99c324d..1c07dbdfa0 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -1081,7 +1081,7 @@ export class HaScriptEditor extends SubscribeMixin( align-items: center; } .header .name { - font-size: 20px; + font-size: var(--ha-font-size-xl); font-weight: 400; flex: 1; } diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts index 8ef9cc66d9..0fd0576325 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -201,7 +201,7 @@ export class HaManualScriptEditor extends LitElement { margin-top: -16px; } .header .name { - font-size: 20px; + font-size: var(--ha-font-size-xl); font-weight: 400; flex: 1; } diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts index c85ea484d5..ccf135f29e 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts @@ -95,7 +95,7 @@ export class AssistPipelineDetailConfig extends LitElement { } h3 { font-weight: normal; - font-size: 22px; + font-size: var(--ha-font-size-xl); line-height: 28px; margin-top: 0; margin-bottom: 4px; diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts index 0e69b0c9b5..5214bd4f9e 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts @@ -132,7 +132,7 @@ export class AssistPipelineDetailConversation extends LitElement { } h3 { font-weight: normal; - font-size: 22px; + font-size: var(--ha-font-size-xl); line-height: 28px; margin-top: 0; margin-bottom: 4px; diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts index 3836faa222..d816586dd3 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts @@ -92,7 +92,7 @@ export class AssistPipelineDetailSTT extends LitElement { } h3 { font-weight: normal; - font-size: 22px; + font-size: var(--ha-font-size-xl); line-height: 28px; margin-top: 0; margin-bottom: 4px; diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts index a8dc5cb6bb..3a20f268af 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts @@ -139,7 +139,7 @@ export class AssistPipelineDetailTTS extends LitElement { } h3 { font-weight: normal; - font-size: 22px; + font-size: var(--ha-font-size-xl); line-height: 28px; margin-top: 0; margin-bottom: 4px; diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts index 549900b7fb..7080d31c25 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts @@ -146,7 +146,7 @@ export class AssistPipelineDetailWakeWord extends LitElement { } h3 { font-weight: normal; - font-size: 22px; + font-size: var(--ha-font-size-xl); line-height: 28px; margin-top: 0; margin-bottom: 4px; diff --git a/src/panels/config/voice-assistants/cloud-discover.ts b/src/panels/config/voice-assistants/cloud-discover.ts index 2beca52043..3a545f4bb5 100644 --- a/src/panels/config/voice-assistants/cloud-discover.ts +++ b/src/panels/config/voice-assistants/cloud-discover.ts @@ -127,7 +127,7 @@ export class CloudDiscover extends LitElement { } .header { font-weight: 400; - font-size: 28px; + font-size: var(--ha-font-size-3xl); line-height: 36px; text-align: center; max-width: 600px; @@ -135,7 +135,7 @@ export class CloudDiscover extends LitElement { } @media (min-width: 800px) { .header { - font-size: 32px; + font-size: var(--ha-font-size-4xl); line-height: 40px; margin-bottom: 16px; } @@ -173,18 +173,18 @@ export class CloudDiscover extends LitElement { display: flex; align-items: center; justify-content: center; - font-size: 24px; + font-size: var(--ha-font-size-2xl); } .feature h2 { font-weight: 500; - font-size: 16px; + font-size: var(--ha-font-size-l); line-height: 24px; margin-top: 0; margin-bottom: 8px; } .feature p { font-weight: 400; - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 20px; margin: 0; } @@ -197,7 +197,7 @@ export class CloudDiscover extends LitElement { text-decoration: none; color: var(--primary-color); font-weight: 500; - font-size: 14px; + font-size: var(--ha-font-size-m); } .more a ha-svg-icon { --mdc-icon-size: 16px; diff --git a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts index e3bb6ef500..e2d070f60f 100644 --- a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts +++ b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts @@ -421,7 +421,7 @@ export class AssistPipelineDebug extends LitElement { } .message { - font-size: 18px; + font-size: var(--ha-font-size-l); margin: 8px 0; padding: 8px; border-radius: 15px; diff --git a/src/panels/config/voice-assistants/entity-voice-settings.ts b/src/panels/config/voice-assistants/entity-voice-settings.ts index 2909576718..4f2946eeb1 100644 --- a/src/panels/config/voice-assistants/entity-voice-settings.ts +++ b/src/panels/config/voice-assistants/entity-voice-settings.ts @@ -423,7 +423,7 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) { } .description { color: var(--secondary-text-color); - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 20px; margin-top: 0; margin-bottom: 16px; diff --git a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts index 4118de6f14..f731077320 100644 --- a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts +++ b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts @@ -820,7 +820,7 @@ export class VoiceAssistantsExpose extends LitElement { margin-top: 20px; } .header-toolbar .selected-txt { - font-size: 16px; + font-size: var(--ha-font-size-l); } .header-toolbar .header-btns { margin-right: -12px; diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index ca7c56c845..f5563e039a 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -139,7 +139,7 @@ class PanelDeveloperTools extends LitElement { height: var(--header-height); display: flex; align-items: center; - font-size: 20px; + font-size: var(--ha-font-size-xl); padding: 8px 12px; font-weight: 400; box-sizing: border-box; diff --git a/src/panels/developer-tools/statistics/developer-tools-statistics.ts b/src/panels/developer-tools/statistics/developer-tools-statistics.ts index 84668dc424..83f71b8a2e 100644 --- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts +++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts @@ -762,7 +762,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) { justify-content: space-between; padding: 8px 12px; box-sizing: border-box; - font-size: 14px; + font-size: var(--ha-font-size-m); --ha-assist-chip-container-color: var(--card-background-color); } diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts index 7bf69dbc23..23b7e1f86c 100644 --- a/src/panels/energy/ha-panel-energy.ts +++ b/src/panels/energy/ha-panel-energy.ts @@ -402,7 +402,7 @@ class PanelEnergy extends LitElement { display: flex; flex: 1; align-items: center; - font-size: 20px; + font-size: var(--ha-font-size-xl); padding: 0px 12px; font-weight: 400; box-sizing: border-box; diff --git a/src/panels/logbook/ha-logbook-renderer.ts b/src/panels/logbook/ha-logbook-renderer.ts index ae391ca7ec..56bc0d7a92 100644 --- a/src/panels/logbook/ha-logbook-renderer.ts +++ b/src/panels/logbook/ha-logbook-renderer.ts @@ -636,7 +636,7 @@ class HaLogbookRenderer extends LitElement { } .secondary { - font-size: 12px; + font-size: var(--ha-font-size-s); line-height: 1.7; } diff --git a/src/panels/lovelace/badges/hui-view-badges.ts b/src/panels/lovelace/badges/hui-view-badges.ts index f04d33a59c..62e136ccf0 100644 --- a/src/panels/lovelace/badges/hui-view-badges.ts +++ b/src/panels/lovelace/badges/hui-view-badges.ts @@ -239,7 +239,7 @@ export class HuiViewBadges extends LitElement { border-color: var(--primary-color); --mdc-icon-size: 18px; cursor: pointer; - font-size: 14px; + font-size: var(--ha-font-size-m); color: var(--primary-text-color); --ha-ripple-color: var(--primary-color); --ha-ripple-hover-opacity: 0.04; diff --git a/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts b/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts index d0b14f1f46..be20091a8c 100644 --- a/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts @@ -118,7 +118,7 @@ class HuiLockOpenDoorCardFeature cardFeatureStyles, css` ha-control-button { - font-size: 14px; + font-size: var(--ha-font-size-m); } .open-button { width: 130px; @@ -127,7 +127,7 @@ class HuiLockOpenDoorCardFeature --control-button-background-color: var(--warning-color); } .open-done { - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 14px; display: flex; align-items: center; diff --git a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts index 734f806de4..f7a22b9ae2 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts @@ -190,7 +190,7 @@ class HuiEnergyCarbonGaugeCard line-height: initial; color: var(--primary-text-color); width: 100%; - font-size: 15px; + font-size: var(--ha-font-size-m); margin-top: 8px; } 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 2eb162ec1c..4d6856f482 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts @@ -872,7 +872,7 @@ class HuiEnergyDistrubutionCard align-items: center; justify-content: center; text-align: center; - font-size: 12px; + font-size: var(--ha-font-size-s); line-height: 12px; position: relative; text-decoration: none; @@ -886,7 +886,7 @@ class HuiEnergyDistrubutionCard } .label { color: var(--secondary-text-color); - font-size: 12px; + font-size: var(--ha-font-size-s); opacity: 1; height: 20px; overflow: hidden; diff --git a/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts index 457bc63ba7..05e1b1ced5 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts @@ -166,7 +166,7 @@ class HuiEnergyGridGaugeCard line-height: initial; color: var(--primary-text-color); width: 100%; - font-size: 15px; + font-size: var(--ha-font-size-m); margin-top: 8px; } diff --git a/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts index 18e94255c2..b61f3c8ed8 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts @@ -220,7 +220,7 @@ class HuiEnergySelfSufficiencyGaugeCard line-height: initial; color: var(--primary-text-color); width: 100%; - font-size: 15px; + font-size: var(--ha-font-size-m); margin-top: 8px; } diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts index 83e5e32c72..dc71393103 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts @@ -169,7 +169,7 @@ class HuiEnergySolarGaugeCard line-height: initial; color: var(--primary-text-color); width: 100%; - font-size: 15px; + font-size: var(--ha-font-size-m); margin-top: 8px; } diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts index b9496675eb..fc06ebd0ac 100644 --- a/src/panels/lovelace/cards/hui-area-card.ts +++ b/src/panels/lovelace/cards/hui-area-card.ts @@ -611,7 +611,7 @@ export class HuiAreaCard .sensors { color: #e3e3e3; - font-size: 16px; + font-size: var(--ha-font-size-l); --mdc-icon-size: 24px; opacity: 0.6; margin-top: 8px; @@ -648,7 +648,7 @@ export class HuiAreaCard .name { color: white; - font-size: 24px; + font-size: var(--ha-font-size-2xl); } .bottom { diff --git a/src/panels/lovelace/cards/hui-clock-card.ts b/src/panels/lovelace/cards/hui-clock-card.ts index 729cfb2c14..414cf2fdef 100644 --- a/src/panels/lovelace/cards/hui-clock-card.ts +++ b/src/panels/lovelace/cards/hui-clock-card.ts @@ -204,7 +204,7 @@ export class HuiClockCard extends LitElement implements LovelaceCard { .time-title { color: var(--primary-text-color); - font-size: 14px; + font-size: var(--ha-font-size-m); font-weight: 400; line-height: 18px; overflow: hidden; @@ -215,12 +215,12 @@ export class HuiClockCard extends LitElement implements LovelaceCard { } .time-wrapper.size-medium .time-title { - font-size: 18px; + font-size: var(--ha-font-size-l); line-height: 21px; } .time-wrapper.size-large .time-title { - font-size: 24px; + font-size: var(--ha-font-size-2xl); line-height: 28px; } @@ -251,13 +251,13 @@ export class HuiClockCard extends LitElement implements LovelaceCard { .time-wrapper.size-medium .time-parts .time-part.second, .time-wrapper.size-medium .time-parts .time-part.am-pm { - font-size: 16px; + font-size: var(--ha-font-size-l); margin-left: 6px; } .time-wrapper.size-large .time-parts .time-part.second, .time-wrapper.size-large .time-parts .time-part.am-pm { - font-size: 24px; + font-size: var(--ha-font-size-2xl); margin-left: 8px; } @@ -283,7 +283,7 @@ export class HuiClockCard extends LitElement implements LovelaceCard { .time-parts .time-part.second, .time-parts .time-part.am-pm { - font-size: 10px; + font-size: var(--ha-font-size-xs); margin-left: 4px; } diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts index 6a099d0ba1..ba459f822a 100644 --- a/src/panels/lovelace/cards/hui-entity-card.ts +++ b/src/panels/lovelace/cards/hui-entity-card.ts @@ -283,7 +283,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard { color: var(--secondary-text-color); line-height: 40px; font-weight: 500; - font-size: 16px; + font-size: var(--ha-font-size-l); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -305,14 +305,14 @@ export class HuiEntityCard extends LitElement implements LovelaceCard { } .value { - font-size: 28px; + font-size: var(--ha-font-size-3xl); margin-right: 4px; margin-inline-end: 4px; margin-inline-start: initial; } .measurement { - font-size: 18px; + font-size: var(--ha-font-size-l); color: var(--secondary-text-color); } diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 62f7e16d2c..f1879166b5 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -301,7 +301,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { line-height: initial; color: var(--primary-text-color); width: 100%; - font-size: 15px; + font-size: var(--ha-font-size-m); margin-top: 8px; } `; diff --git a/src/panels/lovelace/cards/hui-heading-card.ts b/src/panels/lovelace/cards/hui-heading-card.ts index 68337d45d8..44afbee64c 100644 --- a/src/panels/lovelace/cards/hui-heading-card.ts +++ b/src/panels/lovelace/cards/hui-heading-card.ts @@ -196,7 +196,10 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard { } .content.subtitle { color: var(--ha-heading-card-subtitle-color, var(--secondary-text-color)); - font-size: var(--ha-heading-card-subtitle-font-size, 14px); + font-size: var( + --ha-heading-card-subtitle-font-size, + var(--ha-font-size-m) + ); font-weight: var(--ha-heading-card-subtitle-font-weight, 500); line-height: var(--ha-heading-card-subtitle-line-height, 20px); } diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts index 7da931fba0..edbe0b782b 100644 --- a/src/panels/lovelace/cards/hui-humidifier-card.ts +++ b/src/panels/lovelace/cards/hui-humidifier-card.ts @@ -210,7 +210,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard { .title { width: 100%; - font-size: 18px; + font-size: var(--ha-font-size-l); line-height: 36px; padding: 8px 30px 8px 30px; margin: 0; diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts index 6fa5be786c..fb7abab346 100644 --- a/src/panels/lovelace/cards/hui-picture-entity-card.ts +++ b/src/panels/lovelace/cards/hui-picture-entity-card.ts @@ -221,7 +221,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard { rgba(0, 0, 0, 0.3) ); padding: 16px; - font-size: 16px; + font-size: var(--ha-font-size-l); line-height: 16px; color: var(--ha-picture-card-text-color, white); pointer-events: none; diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index fc40cf6bca..1657f994bc 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -361,7 +361,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - font-size: 16px; + font-size: var(--ha-font-size-l); line-height: 40px; color: var(--ha-picture-card-text-color, white); align-self: center; @@ -382,7 +382,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { } .state { display: block; - font-size: 12px; + font-size: var(--ha-font-size-s); text-align: center; line-height: 12px; white-space: nowrap; diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts index d6996a6836..1bffb7b9f1 100644 --- a/src/panels/lovelace/cards/hui-plant-status-card.ts +++ b/src/panels/lovelace/cards/hui-plant-status-card.ts @@ -189,7 +189,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard { } .has-plant-image .header { - font-size: 16px; + font-size: var(--ha-font-size-l); font-weight: 500; line-height: 16px; padding: 16px; diff --git a/src/panels/lovelace/cards/hui-statistic-card.ts b/src/panels/lovelace/cards/hui-statistic-card.ts index eebe867bbf..d381c7def1 100644 --- a/src/panels/lovelace/cards/hui-statistic-card.ts +++ b/src/panels/lovelace/cards/hui-statistic-card.ts @@ -371,7 +371,7 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard { color: var(--secondary-text-color); line-height: 40px; font-weight: 500; - font-size: 16px; + font-size: var(--ha-font-size-l); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -392,14 +392,14 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard { } .value { - font-size: 28px; + font-size: var(--ha-font-size-3xl); margin-right: 4px; margin-inline-end: 4px; margin-inline-start: initial; } .measurement { - font-size: 18px; + font-size: var(--ha-font-size-l); color: var(--secondary-text-color); } `, diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index 4784141970..5d1aebb00d 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -202,7 +202,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { .title { width: 100%; - font-size: 18px; + font-size: var(--ha-font-size-l); line-height: 36px; padding: 8px 30px 8px 30px; margin: 0; diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts index 8c37699dd3..1ef7d3a1c7 100644 --- a/src/panels/lovelace/cards/hui-todo-list-card.ts +++ b/src/panels/lovelace/cards/hui-todo-list-card.ts @@ -747,7 +747,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { .description, .due { - font-size: 12px; + font-size: var(--ha-font-size-s); color: var(--secondary-text-color); } diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 9e8818d7f9..215a8be140 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -529,19 +529,19 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { .temp-attribute .temp span { position: absolute; - font-size: 24px; + font-size: var(--ha-font-size-2xl); top: 1px; } .state, .temp-attribute .temp { - font-size: 28px; + font-size: var(--ha-font-size-3xl); line-height: 1.2; } .name, .attribute { - font-size: 14px; + font-size: var(--ha-font-size-m); line-height: 1; } @@ -581,7 +581,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { } .forecast .temp { - font-size: 16px; + font-size: var(--ha-font-size-l); } .forecast-image-icon { @@ -617,7 +617,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { display: flex; justify-content: center; align-items: center; - font-size: 16px; + font-size: var(--ha-font-size-l); padding: 10px 20px; text-align: center; } @@ -639,7 +639,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { [class*="narrow"] .state, [class*="narrow"] .temp-attribute .temp { - font-size: 22px; + font-size: var(--ha-font-size-2xl); } [class*="narrow"] .temp-attribute .temp { @@ -650,7 +650,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { [class*="narrow"] .temp span { top: 1px; - font-size: 16px; + font-size: var(--ha-font-size-l); } /* ============= VERY NARROW ============= */ diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index c2e971124b..830b788f89 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -232,7 +232,7 @@ export class HuiCardOptions extends LitElement { border-radius: 50%; font-weight: 500; text-align: center; - font-size: 14px; + font-size: var(--ha-font-size-m); background-color: var(--app-header-edit-background-color, #455a64); color: var(--app-header-edit-text-color, white); } diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts index 08f136e088..6f1742d031 100644 --- a/src/panels/lovelace/components/hui-energy-period-selector.ts +++ b/src/panels/lovelace/components/hui-energy-period-selector.ts @@ -475,7 +475,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { display: flex; align-items: center; justify-content: flex-end; - font-size: 20px; + font-size: var(--ha-font-size-xl); margin-left: auto; margin-inline-start: auto; margin-inline-end: initial; 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 1e720a4632..bcd8617078 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts @@ -475,7 +475,7 @@ export class HuiBadgePicker extends LitElement { } .badges-container-header { - font-size: 16px; + font-size: var(--ha-font-size-l); font-weight: 500; padding: 12px 8px 4px 8px; margin: 0; @@ -506,7 +506,7 @@ export class HuiBadgePicker extends LitElement { .badge-header { color: var(--ha-card-header-color, var(--primary-text-color)); font-family: var(--ha-card-header-font-family, inherit); - font-size: 16px; + font-size: var(--ha-font-size-l); font-weight: bold; letter-spacing: -0.012em; line-height: 20px; 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 edb1c704fd..7808b3fbf0 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -474,7 +474,7 @@ export class HuiCardPicker extends LitElement { } .cards-container-header { - font-size: 16px; + font-size: var(--ha-font-size-l); font-weight: 500; padding: 12px 8px; margin: 0; @@ -511,7 +511,7 @@ export class HuiCardPicker extends LitElement { .card-header { color: var(--ha-card-header-color, var(--primary-text-color)); font-family: var(--ha-card-header-font-family, inherit); - font-size: 16px; + font-size: var(--ha-font-size-l); font-weight: bold; letter-spacing: -0.012em; line-height: 20px; 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 3f88085c26..18df5c4ae9 100644 --- a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts +++ b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts @@ -314,7 +314,7 @@ export class HaCardConditionEditor extends LitElement { left: 0px; text-transform: uppercase; font-weight: bold; - font-size: 14px; + font-size: var(--ha-font-size-m); background-color: var(--divider-color, #e0e0e0); color: var(--text-primary-color); max-height: 0px; diff --git a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts index 0a2c058ada..18ffbd4276 100644 --- a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts @@ -444,7 +444,7 @@ export class HuiCardFeaturesEditor extends LitElement { .feature-content { height: 60px; - font-size: 16px; + font-size: var(--ha-font-size-l); display: flex; align-items: center; justify-content: space-between; @@ -463,7 +463,7 @@ export class HuiCardFeaturesEditor extends LitElement { } .secondary { - font-size: 12px; + font-size: var(--ha-font-size-s); color: var(--secondary-text-color); } diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts index 47b172d615..e06d7bad0e 100644 --- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts @@ -409,13 +409,6 @@ export class HuiEntitiesCardEditor return [ configElementStyle, css` - .edit-entity-row-header { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 18px; - } - hui-header-footer-editor { padding-top: 4px; } diff --git a/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts b/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts index 81872b3c99..a644629e60 100644 --- a/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts @@ -251,7 +251,7 @@ export class HuiHeadingBadgesEditor extends LitElement { .badge-content { height: 60px; - font-size: 16px; + font-size: var(--ha-font-size-l); display: flex; align-items: center; justify-content: space-between; @@ -270,7 +270,7 @@ export class HuiHeadingBadgesEditor extends LitElement { } .secondary { - font-size: 12px; + font-size: var(--ha-font-size-s); color: var(--secondary-text-color); } diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts index ffc58df168..1560ce05e8 100644 --- a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts +++ b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts @@ -165,7 +165,7 @@ export class HuiCreateDialogHeaderFooter box-sizing: border-box; padding: 8px; color: var(--secondary-text-color); - font-size: 16px; + font-size: var(--ha-font-size-l); cursor: pointer; } diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts index 17f3f2cfb9..cfaf0289ec 100644 --- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts +++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts @@ -99,7 +99,7 @@ export class HuiHeaderFooterEditor extends LitElement { static styles = css` :host { - font-size: 16px; + font-size: var(--ha-font-size-l); display: flex; flex-wrap: wrap; justify-content: space-between; diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts index 06d9ab0f35..79cdea6cbe 100644 --- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts +++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts @@ -214,7 +214,7 @@ export class HuiEntitiesCardRowEditor extends LitElement { .special-row { height: 60px; - font-size: 16px; + font-size: var(--ha-font-size-l); display: flex; align-items: center; justify-content: space-between; @@ -233,7 +233,7 @@ export class HuiEntitiesCardRowEditor extends LitElement { } .secondary { - font-size: 12px; + font-size: var(--ha-font-size-s); color: var(--secondary-text-color); } `; diff --git a/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts b/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts index be8ff35a30..ab4d3fa078 100644 --- a/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts +++ b/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts @@ -238,7 +238,7 @@ export class HuiPictureElementsCardRowEditor extends LitElement { .element-row { height: 60px; - font-size: 16px; + font-size: var(--ha-font-size-l); display: flex; align-items: center; justify-content: space-between; @@ -258,7 +258,7 @@ export class HuiPictureElementsCardRowEditor extends LitElement { } .secondary { - font-size: 12px; + font-size: var(--ha-font-size-s); color: var(--secondary-text-color); } diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts index 99ef0f0991..eec8aa019c 100644 --- a/src/panels/lovelace/editor/hui-sub-element-editor.ts +++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts @@ -170,7 +170,7 @@ export class HuiSubElementEditor extends LitElement { .back-title { display: flex; align-items: center; - font-size: 18px; + font-size: var(--ha-font-size-l); } `; } diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index 75ea3430aa..a7fd0c0216 100644 --- a/src/panels/lovelace/hui-editor.ts +++ b/src/panels/lovelace/hui-editor.ts @@ -152,12 +152,12 @@ class LovelaceFullConfigEditor extends LitElement { } .comments { - font-size: 16px; + font-size: var(--ha-font-size-l); } .save-button { opacity: 0; - font-size: 14px; + font-size: var(--ha-font-size-m); padding: 0px 10px; } diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 5ec43a2d10..b1335b50e4 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -1021,7 +1021,7 @@ class HUIRoot extends LitElement { height: var(--header-height); display: flex; align-items: center; - font-size: 20px; + font-size: var(--ha-font-size-xl); padding: 0px 12px; font-weight: 400; box-sizing: border-box; @@ -1178,7 +1178,7 @@ class HUIRoot extends LitElement { .exit-edit-mode { --mdc-theme-primary: var(--app-header-edit-text-color, #fff); --mdc-button-outline-color: var(--app-header-edit-text-color, #fff); - --mdc-typography-button-font-size: 14px; + --mdc-typography-button-font-size: var(--ha-font-size-m); } .child-view-icon { opacity: 0.5; diff --git a/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts b/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts index e4989a431d..d9f73f3b4f 100644 --- a/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts @@ -204,7 +204,7 @@ export class HuiAreasDashboardStrategyEditor } .toolbar p { margin: 0; - font-size: 18px; + font-size: var(--ha-font-size-l); line-height: 24px; font-weight: 400; padding: 6px 4px; diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts index 58d45edba8..3ad8ccac9f 100644 --- a/src/panels/lovelace/views/hui-sections-view.ts +++ b/src/panels/lovelace/views/hui-sections-view.ts @@ -530,7 +530,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement { .drop-helper p { color: var(--primary-text-color); - font-size: 16px; + font-size: var(--ha-font-size-l); font-weight: 400; line-height: 24px; text-align: center; @@ -617,7 +617,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement { .imported-card-header .title { margin: 0; color: var(--primary-text-color); - font-size: 16px; + font-size: var(--ha-font-size-l); font-weight: 400; line-height: 24px; --mdc-icon-size: 18px; @@ -629,7 +629,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement { .imported-card-header .subtitle { margin: 0; color: var(--secondary-text-color); - font-size: 14px; + font-size: var(--ha-font-size-m); font-weight: 400; line-height: 20px; } diff --git a/src/panels/lovelace/views/hui-view-header.ts b/src/panels/lovelace/views/hui-view-header.ts index b4ef30037a..bd300a1c1a 100644 --- a/src/panels/lovelace/views/hui-view-header.ts +++ b/src/panels/lovelace/views/hui-view-header.ts @@ -471,7 +471,7 @@ export class HuiViewHeader extends LitElement { border-color: var(--primary-color); --mdc-icon-size: 18px; cursor: pointer; - font-size: 14px; + font-size: var(--ha-font-size-m); color: var(--primary-text-color); --ha-ripple-color: var(--primary-color); --ha-ripple-hover-opacity: 0.04; diff --git a/src/panels/todo/dialog-todo-item-editor.ts b/src/panels/todo/dialog-todo-item-editor.ts index 880f74cafa..b28cf4af97 100644 --- a/src/panels/todo/dialog-todo-item-editor.ts +++ b/src/panels/todo/dialog-todo-item-editor.ts @@ -423,7 +423,7 @@ class DialogTodoItemEditor extends LitElement { justify-content: space-between; } .label { - font-size: 12px; + font-size: var(--ha-font-size-s); font-weight: 500; color: var(--input-label-ink-color); } 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 5608ed92b5..c798ff0de3 100644 --- a/src/state-control/cover/ha-state-control-cover-position.ts +++ b/src/state-control/cover/ha-state-control-cover-position.ts @@ -80,7 +80,7 @@ export class HaStateControlCoverPosition extends LitElement { --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; - --control-slider-tooltip-font-size: 20px; + --control-slider-tooltip-font-size: var(--ha-font-size-xl); } `; } 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 77b6f573af..4d93740a7f 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 @@ -111,7 +111,7 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement { --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; - --control-slider-tooltip-font-size: 20px; + --control-slider-tooltip-font-size: var(--ha-font-size-xl); } .gradient { background: -webkit-linear-gradient(top, ${GRADIENT}); 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 8ed0d15baf..e9c0b69321 100644 --- a/src/state-control/fan/ha-state-control-fan-speed.ts +++ b/src/state-control/fan/ha-state-control-fan-speed.ts @@ -145,7 +145,7 @@ export class HaStateControlFanSpeed extends LitElement { --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; - --control-slider-tooltip-font-size: 20px; + --control-slider-tooltip-font-size: var(--ha-font-size-xl); } ha-control-select { height: 45vh; 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 ce649782ea..0039ed8611 100644 --- a/src/state-control/light/ha-state-control-light-brightness.ts +++ b/src/state-control/light/ha-state-control-light-brightness.ts @@ -94,7 +94,7 @@ export class HaStateControlLightBrightness extends LitElement { --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; - --control-slider-tooltip-font-size: 20px; + --control-slider-tooltip-font-size: var(--ha-font-size-xl); } `; } diff --git a/src/state-control/state-control-circular-slider-style.ts b/src/state-control/state-control-circular-slider-style.ts index c0f51bb8b6..52479e01ab 100644 --- a/src/state-control/state-control-circular-slider-style.ts +++ b/src/state-control/state-control-circular-slider-style.ts @@ -23,7 +23,7 @@ export const stateControlCircularSliderStyle = css` align-items: center; justify-content: center; pointer-events: none; - font-size: 16px; + font-size: var(--ha-font-size-l); line-height: 1.5; letter-spacing: 0.1px; gap: 8px; @@ -72,7 +72,7 @@ export const stateControlCircularSliderStyle = css` pointer-events: auto; } .primary-state { - font-size: 36px; + font-size: var(--ha-font-size-4xl); } .buttons ha-outlined-icon-button { --md-outlined-icon-button-container-width: 48px; @@ -83,7 +83,7 @@ export const stateControlCircularSliderStyle = css` font-size: 44px; } .container.md .state { - font-size: 30px; + font-size: var(--ha-font-size-3xl); } .container.md .info { margin-top: 12px; @@ -97,14 +97,14 @@ export const stateControlCircularSliderStyle = css` } .container.sm ha-big-number { - font-size: 32px; + font-size: var(--ha-font-size-4xl); } .container.sm .state { - font-size: 26px; + font-size: var(--ha-font-size-2xl); } .container.sm .info { margin-top: 12px; - font-size: 14px; + font-size: var(--ha-font-size-m); gap: 2px; --mdc-icon-size: 14px; } @@ -116,10 +116,10 @@ export const stateControlCircularSliderStyle = css` } .container.xs ha-big-number { - font-size: 32px; + font-size: var(--ha-font-size-4xl); } .container.xs .state { - font-size: 16px; + font-size: var(--ha-font-size-l); } .container.xs .info { margin-top: 12px; 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 45808adc61..eef5460c86 100644 --- a/src/state-control/valve/ha-state-control-valve-position.ts +++ b/src/state-control/valve/ha-state-control-valve-position.ts @@ -76,7 +76,7 @@ export class HaStateControlValvePosition extends LitElement { --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; - --control-slider-tooltip-font-size: 20px; + --control-slider-tooltip-font-size: var(--ha-font-size-xl); } `; }