From 514b6568e5980a3a2f8572d585d1f6888ae79a07 Mon Sep 17 00:00:00 2001 From: Wendelin Date: Mon, 28 Apr 2025 16:40:09 +0200 Subject: [PATCH] Update rem to use vars --- hassio/src/addon-view/config/hassio-addon-config.ts | 2 +- src/auth/ha-auth-flow.ts | 2 +- src/components/data-table/ha-data-table.ts | 6 +++--- src/components/ha-dialog.ts | 2 +- src/components/ha-form/ha-form-boolean.ts | 2 +- src/components/ha-input-helper-text.ts | 2 +- src/components/ha-selector/ha-selector-boolean.ts | 2 +- .../onboarding-restore-backup-no-cloud-backup.ts | 2 +- .../restore-backup/onboarding-restore-backup-restore.ts | 2 +- src/onboarding/styles.ts | 2 +- .../zwave_js/zwave_js-config-dashboard.ts | 4 ++-- .../config/voice-assistants/dialog-expose-entity.ts | 2 +- src/panels/lovelace/cards/hui-button-card.ts | 2 +- src/panels/lovelace/cards/hui-clock-card.ts | 8 ++++---- src/panels/lovelace/cards/hui-heading-card.ts | 2 +- src/panels/lovelace/cards/hui-light-card.ts | 4 ++-- 16 files changed, 23 insertions(+), 23 deletions(-) diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts index e5afe3ed15..b4f5b07fd9 100644 --- a/hassio/src/addon-view/config/hassio-addon-config.ts +++ b/hassio/src/addon-view/config/hassio-addon-config.ts @@ -428,7 +428,7 @@ class HassioAddonConfig extends LitElement { .header h2 { color: var(--ha-card-header-color, var(--primary-text-color)); font-family: var(--ha-card-header-font-family, inherit); - font-size: var(--ha-card-header-font-size, 24px); + font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl)); letter-spacing: -0.012em; line-height: 48px; padding: 12px 16px 16px; diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts index 2adce4d347..dd9e20b429 100644 --- a/src/auth/ha-auth-flow.ts +++ b/src/auth/ha-auth-flow.ts @@ -101,7 +101,7 @@ export class HaAuthFlow extends LitElement { a.forgot-password { color: var(--primary-color); text-decoration: none; - font-size: 0.875rem; + font-size: var(--ha-font-size-s); } .space-between { display: flex; diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 39447ca320..adebf2a958 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -931,7 +931,7 @@ export class HaDataTable extends LitElement { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - font-size: 0.875rem; + font-size: var(--ha-font-size-s); line-height: 1.25rem; font-weight: 400; letter-spacing: 0.0178571429em; @@ -1051,7 +1051,7 @@ export class HaDataTable extends LitElement { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - font-size: 0.875rem; + font-size: var(--ha-font-size-s); line-height: 1.25rem; font-weight: 400; letter-spacing: 0.0178571429em; @@ -1173,7 +1173,7 @@ export class HaDataTable extends LitElement { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - font-size: 0.875rem; + font-size: var(--ha-font-size-s); line-height: 1.375rem; font-weight: 500; letter-spacing: 0.0071428571em; diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index e326e6b19b..483494b092 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -86,7 +86,7 @@ export class HaDialog extends DialogBase { ); --mdc-dialog-box-shadow: var(--dialog-box-shadow, none); --mdc-typography-headline6-font-weight: 400; - --mdc-typography-headline6-font-size: 1.574rem; + --mdc-typography-headline6-font-size: var(--ha-font-size-xl); } .mdc-dialog__actions { justify-content: var(--justify-action-buttons, flex-end); diff --git a/src/components/ha-form/ha-form-boolean.ts b/src/components/ha-form/ha-form-boolean.ts index 494b9389c7..0f1249231a 100644 --- a/src/components/ha-form/ha-form-boolean.ts +++ b/src/components/ha-form/ha-form-boolean.ts @@ -70,7 +70,7 @@ export class HaFormBoolean extends LitElement implements HaFormElement { padding-top: 4px; box-sizing: border-box; color: var(--secondary-text-color); - font-size: 0.875rem; + font-size: var(--ha-font-size-s); font-weight: var(--mdc-typography-body2-font-weight, 400); } `; diff --git a/src/components/ha-input-helper-text.ts b/src/components/ha-input-helper-text.ts index 4af842ee74..d6b0a1aaed 100644 --- a/src/components/ha-input-helper-text.ts +++ b/src/components/ha-input-helper-text.ts @@ -12,7 +12,7 @@ class InputHelperText extends LitElement { :host { display: block; color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6)); - font-size: 0.75rem; + font-size: var(--ha-font-size-xs); padding-left: 16px; padding-right: 16px; padding-inline-start: 16px; diff --git a/src/components/ha-selector/ha-selector-boolean.ts b/src/components/ha-selector/ha-selector-boolean.ts index bffa9ca18a..e41146c9a6 100644 --- a/src/components/ha-selector/ha-selector-boolean.ts +++ b/src/components/ha-selector/ha-selector-boolean.ts @@ -61,7 +61,7 @@ export class HaBooleanSelector extends LitElement { padding-top: 4px; box-sizing: border-box; color: var(--secondary-text-color); - font-size: 0.875rem; + font-size: var(--ha-font-size-s); font-weight: var(--mdc-typography-body2-font-weight, 400); } `; diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-no-cloud-backup.ts b/src/onboarding/restore-backup/onboarding-restore-backup-no-cloud-backup.ts index 7c1698db45..d000588fdf 100644 --- a/src/onboarding/restore-backup/onboarding-restore-backup-no-cloud-backup.ts +++ b/src/onboarding/restore-backup/onboarding-restore-backup-no-cloud-backup.ts @@ -64,7 +64,7 @@ class OnboardingRestoreBackupNoCloudBackup extends LitElement { text-align: left; } .description { - font-size: 1rem; + font-size: var(--ha-font-size-m); line-height: 1.5rem; margin-top: 24px; margin-bottom: 32px; diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts index 1860d7cb47..e1eca88871 100644 --- a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts +++ b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts @@ -307,7 +307,7 @@ class OnboardingRestoreBackupRestore extends LitElement { text-align: left; } .description { - font-size: 1rem; + font-size: var(--ha-font-size-m); line-height: 1.5rem; margin-top: 24px; margin-bottom: 16px; diff --git a/src/onboarding/styles.ts b/src/onboarding/styles.ts index b98981e060..6de8737bc0 100644 --- a/src/onboarding/styles.ts +++ b/src/onboarding/styles.ts @@ -15,7 +15,7 @@ export const onBoardingStyles = css` display: block; } p { - font-size: 1rem; + font-size: var(--ha-font-size-m); line-height: 1.5rem; margin-top: 0; margin-bottom: 32px; diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts index f4eae36d92..941c9b97d4 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts @@ -912,11 +912,11 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { height: 48px; } .network-status div.heading .details { - font-size: 1.5rem; + font-size: var(--ha-font-size-xl); } .network-status small { - font-size: 1rem; + font-size: var(--ha-font-size-m); } ha-list-item { diff --git a/src/panels/config/voice-assistants/dialog-expose-entity.ts b/src/panels/config/voice-assistants/dialog-expose-entity.ts index 741feaffc2..0c57a00a72 100644 --- a/src/panels/config/voice-assistants/dialog-expose-entity.ts +++ b/src/panels/config/voice-assistants/dialog-expose-entity.ts @@ -206,7 +206,7 @@ class DialogExposeEntity extends LitElement { } .subtitle { color: var(--secondary-text-color); - font-size: 1rem; + font-size: var(--ha-font-size-m); line-height: normal; } lit-virtualizer { diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index 068f8e3866..d57e3baa02 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -324,7 +324,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { } .state { - font-size: 0.9rem; + font-size: var(--ha-font-size-s); color: var(--secondary-text-color); } `, diff --git a/src/panels/lovelace/cards/hui-clock-card.ts b/src/panels/lovelace/cards/hui-clock-card.ts index 414cf2fdef..d98b247a9b 100644 --- a/src/panels/lovelace/cards/hui-clock-card.ts +++ b/src/panels/lovelace/cards/hui-clock-card.ts @@ -231,22 +231,22 @@ export class HuiClockCard extends LitElement implements LovelaceCard { "hour minute second" "hour minute am-pm"; - font-size: 2rem; + font-size: var(--ha-font-size-3xl); font-weight: 500; line-height: 0.8; direction: ltr; } .time-title + .time-parts { - font-size: 1.5rem; + font-size: var(--ha-font-size-xl); } .time-wrapper.size-medium .time-parts { - font-size: 3rem; + font-size: var(--ha-font-size-5xl); } .time-wrapper.size-large .time-parts { - font-size: 4rem; + font-size: 56px; } .time-wrapper.size-medium .time-parts .time-part.second, diff --git a/src/panels/lovelace/cards/hui-heading-card.ts b/src/panels/lovelace/cards/hui-heading-card.ts index 44afbee64c..18452b87bc 100644 --- a/src/panels/lovelace/cards/hui-heading-card.ts +++ b/src/panels/lovelace/cards/hui-heading-card.ts @@ -174,7 +174,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard { align-items: center; gap: 8px; color: var(--ha-heading-card-title-color, var(--primary-text-color)); - font-size: var(--ha-heading-card-title-font-size, 16px); + font-size: var(--ha-heading-card-title-font-size, var(--ha-font-size-l)); font-weight: var(--ha-heading-card-title-font-weight, 400); line-height: var(--ha-heading-card-title-line-height, 24px); letter-spacing: 0.1px; diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index 6e9bae3b06..8493ec4474 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -254,8 +254,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard { position: relative; overflow: hidden; text-align: center; - --name-font-size: 1.2rem; - --brightness-font-size: 1.2rem; + --name-font-size: var(--ha-font-size-l); + --brightness-font-size: var(--ha-font-size-l); } .more-info {