Update font-size

2025-08-01 21:47:46 +00:00 · 2025-04-28 14:58:22 +02:00 · 2025-04-28 14:58:22 +02:00 · 404d6c75b5
commit 404d6c75b5
parent 6442606fc5
159 changed files with 249 additions and 253 deletions
--- 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);
    }
--- 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;
--- 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 {
--- 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);
      }
    `,
  ];
--- 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;
--- 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;
    }
--- 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 {
--- 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;
--- 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;
--- 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;
--- 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;
    }
--- 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 {
--- 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);
      }
    }

--- 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;
--- 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),
--- 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);
--- 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);
--- 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);
        }
--- 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);
    }
  `;
 }
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
        }
--- 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;
--- 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;
--- 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;
    }
--- 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;
--- 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;
--- 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;
        }
--- 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;
      }
--- 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;
      }
--- 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 {
--- 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;
--- 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);
--- 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 {
--- 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);
--- 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;
--- 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;
        }
      `,
--- 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;
--- 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;
--- 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;
        }
--- 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;
--- 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 {
--- 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;
--- 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);
--- 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;
      }
--- 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;
--- 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;
--- 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);
--- 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);
    }

--- 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);
        }
--- 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;
    }

--- 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;
--- 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;
--- 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%;
--- 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;
  }
--- 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);
        }
--- 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);
        }

--- 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;
--- 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;
    }
--- 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;
--- 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);
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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`
                    <span
-                      style="display: flex; align-items: center; font-size: 14px;"
+                      style="display: flex; align-items: center; font-size: var(--ha-font-size-m);"
                    >
                      +${agentsMore}
                    </span>
--- 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;
    }
--- 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);
        }
      `,
    ];
--- 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;
        }
--- 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);
    }
  `;
 }
--- 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;
--- 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;
--- 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;
--- 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;
    }

--- 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;
--- 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;
        }
--- 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 {
--- 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);
--- 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 {
--- 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;
--- 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;
    }
--- 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 {
--- 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 {
--- 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;
--- 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;
    }
--- 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);
    }
  `;
 }
--- 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;
        }
--- a/Show More
+++ b/Show More