Update font-size

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

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;

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 {

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

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;

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

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 {

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;

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;

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;

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

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 {

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

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;

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),

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

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

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

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

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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

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;

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;

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

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;

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;

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

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

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

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 {

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;

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

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 {

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

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;

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

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;

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;

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

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;

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 {

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;

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

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

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;

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;

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

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

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

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

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;

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;

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

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

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

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

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;

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

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;

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

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;

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;

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;

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;

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;

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;

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;

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;

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;

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>

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

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

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

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

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;

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;

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;

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

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;

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

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 {

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

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 {

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;

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

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 {

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 {

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;

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

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

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