Fix more font sizes

cast/src/launcher/layout/hc-connect.ts

@@ -302,7 +302,7 @@ export class HcConnect extends LitElement {
     }
     .error {
       color: red;
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
 
     .error a {

cast/src/launcher/layout/hc-layout.ts

@@ -86,9 +86,9 @@ 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;
+      line-height: var(--ha-line-height-normal);
       padding: 24px 16px 16px;
       display: block;
       margin: 0;
@@ -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;
     }
@@ -113,7 +113,7 @@ class HcLayout extends LitElement {
     }
 
     :host ::slotted(.section-header) {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
       padding: 4px 16px;
       text-transform: uppercase;
     }
@@ -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;

demo/src/html/index.html.template

@@ -50,7 +50,7 @@
         font-family: Roboto, Noto, sans-serif;
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
-        font-weight: 400;
+        font-weight: var(--ha-font-weight-normal);
         height: 100vh;
         margin: 0;
         padding: 0;

gallery/src/components/page-description.ts

@@ -37,13 +37,13 @@ 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;
+        line-height: var(--ha-line-height-normal);
         padding-bottom: 8px;
       }
       .subtitle {
-        font-size: 18px;
+        font-size: var(--ha-font-size-l);
-        line-height: 24px;
+        line-height: var(--ha-line-height-normal);
       }
       .root {
         max-width: 800px;

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,14 +250,14 @@ class HaGallery extends LitElement {
       }
 
       .page-footer .header {
-        font-size: 16px;
+        font-size: var(--ha-font-size-l);
-        font-weight: 500;
+        font-weight: var(--ha-font-weight-semibold);
-        line-height: 28px;
+        line-height: var(--ha-line-height-normal);
         text-align: center;
       }
 
       .page-footer .secondary {
-        line-height: 23px;
+        line-height: var(--ha-line-height-normal);
         text-align: center;
       }
 

gallery/src/pages/components/ha-control-button.ts

@@ -150,7 +150,7 @@ export class DemoHaBarButton extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --control-button-icon-color: var(--primary-color);

gallery/src/pages/components/ha-control-number-buttons.ts

@@ -86,7 +86,7 @@ export class DemoHarControlNumberButtons extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       color: #2196f3;

gallery/src/pages/components/ha-control-select-menu.ts

@@ -125,7 +125,7 @@ export class DemoHaControlSelectMenu extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --control-button-icon-color: var(--primary-color);

gallery/src/pages/components/ha-control-select.ts

@@ -181,7 +181,7 @@ export class DemoHaControlSelect extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --mdc-icon-size: 24px;

gallery/src/pages/components/ha-control-slider.ts

@@ -144,7 +144,7 @@ export class DemoHaBarSlider extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --control-slider-color: #ffcf4c;

gallery/src/pages/components/ha-control-switch.ts

@@ -112,7 +112,7 @@ export class DemoHaControlSwitch extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --control-switch-on-color: var(--green-color);

gallery/src/pages/components/ha-hs-color-picker.ts

@@ -105,8 +105,8 @@ export class DemoHaHsColorPicker extends LitElement {
       width: 400px;
     }
     .value {
-      font-size: 22px;
+      font-size: var(--ha-font-size-2xl);
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
       margin: 0 0 12px 0;
     }
   `;

gallery/src/pages/components/ha-select-box.ts

@@ -123,7 +123,7 @@ export class DemoHaSelectBox extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
       margin-bottom: 8px;
       display: block;
     }

gallery/src/pages/date-time/date-time-numeric.ts

@@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

gallery/src/pages/date-time/date-time-seconds.ts

@@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

gallery/src/pages/date-time/date-time-short-year.ts

@@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

gallery/src/pages/date-time/date-time-short.ts

@@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeShort extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

gallery/src/pages/date-time/date-time.ts

@@ -106,7 +106,7 @@ export class DemoDateTimeDateTime extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

gallery/src/pages/date-time/date.ts

@@ -92,7 +92,7 @@ export class DemoDateTimeDate extends LitElement {
 
   static styles = css`
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

gallery/src/pages/date-time/time-seconds.ts

@@ -106,7 +106,7 @@ export class DemoDateTimeTimeSeconds extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

gallery/src/pages/date-time/time-weekday.ts

@@ -106,7 +106,7 @@ export class DemoDateTimeTimeWeekday extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

gallery/src/pages/date-time/time.ts

@@ -106,7 +106,7 @@ export class DemoDateTimeTime extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -428,13 +428,13 @@ class HassioAddonConfig extends LitElement {
         .header h2 {
           color: var(--ha-card-header-color, var(--primary-text-color));
           font-family: var(--ha-card-header-font-family, inherit);
-          font-size: var(--ha-card-header-font-size, 24px);
+          font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
           letter-spacing: -0.012em;
-          line-height: 48px;
+          line-height: var(--ha-line-height-expanded);
           padding: 12px 16px 16px;
           display: block;
           margin-block: 0px;
-          font-weight: normal;
+          font-weight: var(--ha-font-weight-normal);
         }
         .card-actions.right {
           justify-content: flex-end;

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

@@ -391,7 +391,7 @@ export class HassioBackups extends LitElement {
           top: -4px;
         }
         .selected-txt {
-          font-weight: bold;
+          font-weight: var(--ha-font-weight-bold);
           padding-left: 16px;
           padding-inline-start: 16px;
           padding-inline-end: initial;
@@ -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/components/hassio-card-content.ts

@@ -101,7 +101,7 @@ class HassioCardContent extends LitElement {
       overflow: hidden;
       position: relative;
       height: 2.4em;
-      line-height: 1.2em;
+      line-height: var(--ha-line-height-condensed);
     }
     .icon_image img {
       max-height: 40px;

hassio/src/dashboard/hassio-update.ts

@@ -131,7 +131,7 @@ export class HassioUpdate extends LitElement {
         }
         .update-heading {
           font-size: var(--ha-font-size-l);
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-semibold);
           margin-bottom: 0.5em;
           color: var(--primary-text-color);
         }

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -169,7 +169,7 @@ class HassioHardwareDialog extends LitElement {
         pre {
           padding: 16px;
           overflow: auto;
-          line-height: 1.45;
+          line-height: var(--ha-line-height-normal);
           font-family: var(--ha-font-family-code);
         }
         code {

hassio/src/entrypoint.ts

@@ -8,7 +8,7 @@ body {
   font-family: Roboto, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  font-weight: 400;
+  font-weight: var(--ha-font-weight-normal);
   margin: 0;
   padding: 0;
   height: 100vh;

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -340,12 +340,12 @@ 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;
       background-color: var(--app-header-background-color);
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
       color: var(--app-header-text-color, white);
       border-bottom: var(--app-header-border-bottom, none);
       box-sizing: border-box;
@@ -354,7 +354,7 @@ class HassioIngressView extends LitElement {
 
     .main-title {
       margin: var(--margin-title);
-      line-height: 20px;
+      line-height: var(--ha-line-height-normal);
       flex-grow: 1;
     }
 

src/auth/ha-auth-flow.ts

@@ -101,7 +101,7 @@ export class HaAuthFlow extends LitElement {
         a.forgot-password {
           color: var(--primary-color);
           text-decoration: none;
-          font-size: 0.875rem;
+          font-size: var(--ha-font-size-s);
         }
         .space-between {
           display: flex;

src/auth/ha-authorize.ts

@@ -93,8 +93,8 @@ 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;
+          line-height: var(--ha-line-height-normal);
         }
         .card-content {
           background: var(
@@ -151,8 +151,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           margin-inline-start: initial;
         }
         h1 {
-          font-size: 28px;
+          font-size: var(--ha-font-size-3xl);
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           margin-top: 16px;
           margin-bottom: 16px;
         }

src/auth/ha-pick-auth-provider.ts

@@ -57,9 +57,9 @@ 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;
+      font-weight: var(--ha-font-weight-normal);
-      line-height: 20px;
+      line-height: var(--ha-line-height-normal);
     }
     h3:before {
       border-top: 1px solid var(--divider-color);

src/common/image/extract_color.ts

@@ -96,7 +96,7 @@ const customGenerator = (colors: Swatch[]) => {
     // eslint-disable-next-line no-console
     console.log(
       "%cPicked colors",
-      `color: ${foregroundColor}; background-color: ${backgroundColor.hex}; font-weight: bold; padding: 16px;`
+      `color: ${foregroundColor}; background-color: ${backgroundColor.hex}; font-weight: var(--ha-font-weight-bold); padding: 16px;`
     );
     colors.forEach((color) => logColor(color));
     // eslint-disable-next-line no-console

src/components/chart/ha-chart-base.ts

@@ -719,7 +719,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/chart/state-history-charts.ts

@@ -293,7 +293,7 @@ export class StateHistoryCharts extends LitElement {
 
     .info {
       text-align: center;
-      line-height: 60px;
+      line-height: var(--ha-line-height-expanded);
       color: var(--secondary-text-color);
     }
 

src/components/chart/statistics-chart.ts

@@ -634,7 +634,7 @@ export class StatisticsChart extends LitElement {
     }
     .info {
       text-align: center;
-      line-height: 60px;
+      line-height: var(--ha-line-height-expanded);
       color: var(--secondary-text-color);
     }
   `;

src/components/data-table/ha-data-table.ts

@@ -931,9 +931,9 @@ export class HaDataTable extends LitElement {
           font-family: Roboto, sans-serif;
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
-          font-size: 0.875rem;
+          font-size: var(--ha-font-size-s);
-          line-height: 1.25rem;
+          line-height: var(--ha-line-height-condensed);
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           letter-spacing: 0.0178571429em;
           text-decoration: inherit;
           text-transform: inherit;
@@ -1051,9 +1051,9 @@ export class HaDataTable extends LitElement {
           font-family: Roboto, sans-serif;
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
-          font-size: 0.875rem;
+          font-size: var(--ha-font-size-s);
-          line-height: 1.25rem;
+          line-height: var(--ha-line-height-normal);
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           letter-spacing: 0.0178571429em;
           text-decoration: inherit;
           text-transform: inherit;
@@ -1173,9 +1173,9 @@ export class HaDataTable extends LitElement {
           font-family: Roboto, sans-serif;
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
-          font-size: 0.875rem;
+          font-size: var(--ha-font-size-s);
-          line-height: 1.375rem;
+          line-height: var(--ha-line-height-normal);
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-semibold);
           letter-spacing: 0.0071428571em;
           text-decoration: inherit;
           text-transform: inherit;
@@ -1199,7 +1199,7 @@ export class HaDataTable extends LitElement {
           padding-inline-start: 12px;
           padding-inline-end: initial;
           width: 100%;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-semibold);
           display: flex;
           align-items: center;
           cursor: pointer;

src/components/entity/state-info.ts

@@ -108,7 +108,7 @@ class StateInfo extends LitElement {
 
     .name.in-dialog,
     :host([secondary-line]) .name {
-      line-height: 20px;
+      line-height: var(--ha-line-height-normal);
     }
 
     .time-ago,

src/components/ha-alert.ts

@@ -129,7 +129,7 @@ class HaAlert extends LitElement {
     }
     .title {
       margin-top: 2px;
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .action mwc-button,
     .action ha-icon-button {

src/components/ha-ansi-to-html.ts

@@ -56,7 +56,7 @@ export class HaAnsiToHtml extends LitElement {
       overflow-wrap: break-word;
     }
     .bold {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .italic {
       font-style: italic;

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,18 +95,18 @@ 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;
+      font-weight: var(--ha-font-weight-semibold);
-      line-height: 10px;
+      line-height: var(--ha-line-height-condensed);
       letter-spacing: 0.1px;
       color: var(--secondary-text-color);
     }
     .content {
       font-size: var(--ha-font-size-badge, var(--ha-font-size-s));
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
-      line-height: 16px;
+      line-height: var(--ha-line-height-normal);
       letter-spacing: 0.1px;
       color: var(--primary-text-color);
     }

src/components/ha-base-time-input.ts

@@ -387,9 +387,15 @@ export class HaBaseTimeInput extends LitElement {
         --mdc-typography-body2-font-family,
         var(--mdc-typography-font-family, Roboto, sans-serif)
       );
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
-      line-height: var(--mdc-typography-body2-line-height, 1.25rem);
+      line-height: var(
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
+        --mdc-typography-body2-line-height,
+        var(--ha-line-height-normal)
+      );
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
       letter-spacing: var(
         --mdc-typography-body2-letter-spacing,
         0.0178571429em
@@ -403,7 +409,7 @@ export class HaBaseTimeInput extends LitElement {
     }
     ha-input-helper-text {
       padding-top: 8px;
-      line-height: normal;
+      line-height: var(--ha-line-height-normal);
     }
   `;
 }

src/components/ha-big-number.ts

@@ -59,7 +59,7 @@ export class HaBigNumber extends LitElement {
       css`
         :host {
           font-size: 57px;
-          line-height: 1.12;
+          line-height: var(--ha-line-height-condensed);
           letter-spacing: -0.25px;
         }
         .value {
@@ -87,12 +87,12 @@ export class HaBigNumber extends LitElement {
         }
         .value .decimal {
           font-size: 0.42em;
-          line-height: 1.33;
+          line-height: var(--ha-line-height-condensed);
           min-height: 1.33em;
         }
         .value .unit {
           font-size: 0.33em;
-          line-height: 1.26;
+          line-height: var(--ha-line-height-condensed);
         }
         /* Accessibility */
         .visually-hidden {

src/components/ha-card.ts

@@ -41,14 +41,14 @@ export class HaCard extends LitElement {
     :host ::slotted(.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: 48px;
+      line-height: var(--ha-line-height-expanded);
       padding: 12px 16px 16px;
       display: block;
       margin-block-start: 0px;
       margin-block-end: 0px;
-      font-weight: normal;
+      font-weight: var(--ha-font-weight-normal);
     }
 
     :host ::slotted(.card-content:not(:first-child)),

src/components/ha-climate-state.ts

@@ -154,7 +154,7 @@ class HaClimateState extends LitElement {
     }
 
     .state-label {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
 
     .unit {

src/components/ha-combo-box-item.ts

@@ -18,13 +18,13 @@ export class HaComboBoxItem extends HaMdListItem {
         border-top: 1px solid var(--divider-color);
       }
       [slot="headline"] {
-        line-height: 22px;
+        line-height: var(--ha-line-height-normal);
-        font-size: 14px;
+        font-size: var(--ha-font-size-m);
         white-space: nowrap;
       }
       [slot="supporting-text"] {
-        line-height: 18px;
+        line-height: var(--ha-line-height-normal);
-        font-size: 12px;
+        font-size: var(--ha-font-size-s);
         white-space: nowrap;
       }
       ::slotted(state-badge),

src/components/ha-control-button.ts

@@ -59,7 +59,7 @@ export class HaControlButton extends LitElement {
       box-sizing: border-box;
       line-height: inherit;
       font-family: Roboto;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
       outline: none;
       overflow: hidden;
       background: none;

src/components/ha-control-number-buttons.ts

@@ -194,7 +194,7 @@ export class HaControlNumberButton extends LitElement {
       color: var(--primary-text-color);
       -webkit-tap-highlight-color: transparent;
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
       transition: color 180ms ease-in-out;
     }
     :host([disabled]) {

src/components/ha-control-select-menu.ts

@@ -179,8 +179,8 @@ 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;
+        line-height: var(--ha-line-height-condensed);
         width: auto;
         color: var(--primary-text-color);
         -webkit-tap-highlight-color: transparent;
@@ -208,7 +208,7 @@ export class HaControlSelectMenu extends SelectBase {
         width: 100%;
         user-select: none;
         font-style: normal;
-        font-weight: 400;
+        font-weight: var(--ha-font-weight-normal);
         letter-spacing: 0.25px;
       }
       .content {

src/components/ha-control-select.ts

@@ -207,7 +207,7 @@ export class HaControlSelect extends LitElement {
       outline: none;
       transition: box-shadow 180ms ease-in-out;
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
       color: var(--primary-text-color);
       user-select: none;
       -webkit-tap-highlight-color: transparent;

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,13 +53,13 @@ export class HaDialogHeader extends LitElement {
           white-space: nowrap;
         }
         .header-title {
-          font-size: 22px;
+          font-size: var(--ha-font-size-xl);
-          line-height: 28px;
+          line-height: var(--ha-line-height-normal);
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
         }
         .header-subtitle {
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
-          line-height: 20px;
+          line-height: var(--ha-line-height-condensed);
           color: var(--secondary-text-color);
         }
         @media all and (min-width: 450px) and (min-height: 500px) {

src/components/ha-dialog.ts

@@ -85,8 +85,8 @@ export class HaDialog extends DialogBase {
           var(--dialog-backdrop-filter, none)
         );
         --mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
-        --mdc-typography-headline6-font-weight: 400;
+        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
-        --mdc-typography-headline6-font-size: 1.574rem;
+        --mdc-typography-headline6-font-size: var(--ha-font-size-xl);
       }
       .mdc-dialog__actions {
         justify-content: var(--justify-action-buttons, flex-end);

src/components/ha-expansion-panel.ts

@@ -188,7 +188,7 @@ export class HaExpansionPanel extends LitElement {
       align-items: center;
       cursor: pointer;
       overflow: hidden;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
       outline: none;
     }
     #summary.noCollapse {
@@ -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);
@@ -324,7 +324,7 @@ export class HaFileUpload extends LitElement {
       box-sizing: border-box;
     }
     .header {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
     }
     .progress {
       color: var(--secondary-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

@@ -208,10 +208,10 @@ export class HaFilterBlueprints extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
+          font-size: var(--ha-font-size-xs);
           background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
           text-align: center;
           padding: 0px 2px;
           color: var(--text-primary-color);

src/components/ha-filter-categories.ts

@@ -303,10 +303,10 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
+          font-size: var(--ha-font-size-xs);
           background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
           text-align: center;
           padding: 0px 2px;
           color: var(--text-primary-color);

src/components/ha-filter-devices.ts

@@ -232,10 +232,10 @@ export class HaFilterDevices extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
+          font-size: var(--ha-font-size-xs);
           background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
           text-align: center;
           padding: 0px 2px;
           color: var(--text-primary-color);

src/components/ha-filter-domains.ts

@@ -189,10 +189,10 @@ export class HaFilterDomains extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
+          font-size: var(--ha-font-size-xs);
           background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
           text-align: center;
           padding: 0px 2px;
           color: var(--text-primary-color);

src/components/ha-filter-entities.ts

@@ -246,10 +246,10 @@ export class HaFilterEntities extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
+          font-size: var(--ha-font-size-xs);
           background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
           text-align: center;
           padding: 0px 2px;
           color: var(--text-primary-color);

src/components/ha-filter-floor-areas.ts

@@ -303,10 +303,10 @@ export class HaFilterFloorAreas extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
+          font-size: var(--ha-font-size-xs);
           background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
           text-align: center;
           padding: 0px 2px;
           color: var(--text-primary-color);

src/components/ha-filter-integrations.ts

@@ -195,10 +195,10 @@ export class HaFilterIntegrations extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
+          font-size: var(--ha-font-size-xs);
           background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
           text-align: center;
           padding: 0px 2px;
           color: var(--text-primary-color);

src/components/ha-filter-labels.ts

@@ -233,10 +233,10 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
+          font-size: var(--ha-font-size-xs);
           background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
           text-align: center;
           padding: 0px 2px;
           color: var(--text-primary-color);

src/components/ha-filter-states.ts

@@ -177,10 +177,10 @@ export class HaFilterStates extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
+          font-size: var(--ha-font-size-xs);
           background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
           text-align: center;
           padding: 0px 2px;
           color: var(--text-primary-color);

src/components/ha-form/ha-form-boolean.ts

@@ -70,8 +70,11 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
       padding-top: 4px;
       box-sizing: border-box;
       color: var(--secondary-text-color);
-      font-size: 0.875rem;
+      font-size: var(--ha-font-size-s);
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
     }
   `;
 }

src/components/ha-form/ha-form-constant.ts

@@ -20,7 +20,7 @@ export class HaFormConstant extends LitElement implements HaFormElement {
       display: block;
     }
     .label {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
     }
   `;
 }

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,8 +34,11 @@ 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);
+      font-weight: var(
+        --ha-heading-badge-font-weight,
+        var(--ha-font-weight-normal)
+      );
       line-height: var(--ha-heading-badge-line-height, 20px);
       letter-spacing: 0.1px;
       --mdc-icon-size: 14px;

src/components/ha-humidifier-state.ts

@@ -103,7 +103,7 @@ class HaHumidifierState extends LitElement {
     }
 
     .state-label {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
 
     .unit {

src/components/ha-input-helper-text.ts

@@ -12,7 +12,7 @@ class InputHelperText extends LitElement {
     :host {
       display: block;
       color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-      font-size: 0.75rem;
+      font-size: var(--ha-font-size-xs);
       padding-left: 16px;
       padding-right: 16px;
       padding-inline-start: 16px;

src/components/ha-label-badge.ts

@@ -80,7 +80,7 @@ class HaLabelBadge extends LitElement {
           /* Make the label as wide as container+border. (parent_borderwidth / font-size) */
           left: -0.2em;
           right: -0.2em;
-          line-height: 1em;
+          line-height: var(--ha-line-height-condensed);
           font-size: 0.5em;
         }
         .label-badge .label span {
@@ -91,7 +91,7 @@ class HaLabelBadge extends LitElement {
           color: var(--ha-label-badge-label-color, white);
           border-radius: 1em;
           padding: 9% 16% 8% 16%; /* mostly apitalized text, not much descenders => bit more top margin */
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-semibold);
           overflow: hidden;
           text-transform: uppercase;
           text-overflow: ellipsis;
@@ -102,7 +102,10 @@ class HaLabelBadge extends LitElement {
           margin-top: 1em;
           font-size: var(--ha-label-badge-title-font-size, 0.9em);
           width: var(--ha-label-badge-title-width, 5em);
-          font-weight: var(--ha-label-badge-title-font-weight, 400);
+          font-weight: var(
+            --ha-label-badge-title-font-weight,
+            var(--ha-font-weight-normal)
+          );
           overflow: hidden;
           text-overflow: ellipsis;
           line-height: normal;

src/components/ha-label.ts

@@ -32,9 +32,9 @@ 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;
+          font-weight: var(--ha-font-weight-semibold);
-          line-height: 16px;
+          line-height: var(--ha-line-height-condensed);
           letter-spacing: 0.1px;
           vertical-align: middle;
           height: 32px;

src/components/ha-markdown.ts

@@ -73,7 +73,7 @@ export class HaMarkdown extends LitElement {
     pre {
       padding: 16px;
       overflow: auto;
-      line-height: 1.45;
+      line-height: var(--ha-line-height-normal);
       font-family: var(--ha-font-family-code);
     }
     h1,
@@ -86,7 +86,7 @@ export class HaMarkdown extends LitElement {
     }
     h2 {
       font-size: 1.5em;
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     hr {
       border-color: var(--divider-color);

src/components/ha-md-dialog.ts

@@ -155,10 +155,10 @@ export class HaMdDialog extends Dialog {
         --md-dialog-supporting-text-color: var(--primary-text-color);
         --md-sys-color-scrim: #000000;
 
-        --md-dialog-headline-weight: 400;
+        --md-dialog-headline-weight: var(--ha-font-weight-normal);
-        --md-dialog-headline-size: 1.574rem;
+        --md-dialog-headline-size: var(--ha-font-size-xl);
-        --md-dialog-supporting-text-size: 1rem;
+        --md-dialog-supporting-text-size: var(--ha-font-size-m);
-        --md-dialog-supporting-text-line-height: 1.5rem;
+        --md-dialog-supporting-text-line-height: var(--ha-line-height-normal);
       }
 
       :host([type="alert"]) {

src/components/ha-select-box.ts

@@ -154,18 +154,18 @@ 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;
+      font-weight: var(--ha-font-weight-normal);
-      line-height: 20px;
+      line-height: var(--ha-line-height-normal);
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
     .option .content .text .description {
       color: var(--secondary-text-color);
-      font-size: 13px;
+      font-size: var(--ha-font-size-s);
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
-      line-height: 16px;
+      line-height: var(--ha-line-height-condensed);
     }
     img {
       position: relative;

src/components/ha-selector/ha-selector-action.ts

@@ -45,7 +45,7 @@ export class HaActionSelector extends LitElement {
     label {
       display: block;
       margin-bottom: 4px;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
     }
   `;
 }

src/components/ha-selector/ha-selector-boolean.ts

@@ -61,8 +61,11 @@ export class HaBooleanSelector extends LitElement {
       padding-top: 4px;
       box-sizing: border-box;
       color: var(--secondary-text-color);
-      font-size: 0.875rem;
+      font-size: var(--ha-font-size-s);
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
     }
   `;
 }

src/components/ha-selector/ha-selector-condition.ts

@@ -36,7 +36,7 @@ export class HaConditionSelector extends LitElement {
     label {
       display: block;
       margin-bottom: 4px;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
     }
   `;
 }

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-selector/ha-selector-trigger.ts

@@ -45,7 +45,7 @@ export class HaTriggerSelector extends LitElement {
     label {
       display: block;
       margin-bottom: 4px;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
     }
   `;
 }

src/components/ha-settings-row.ts

@@ -69,9 +69,12 @@ export class HaSettingsRow extends LitElement {
         var(--mdc-typography-font-family, Roboto, sans-serif)
       );
       -webkit-font-smoothing: antialiased;
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
+      font-weight: var(
-      line-height: normal;
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
+      line-height: var(--ha-line-height-normal);
       color: var(--secondary-text-color);
     }
     .body[two-line] {

src/components/ha-sidebar.ts

@@ -827,7 +827,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           padding: 0 4px;
           border-bottom: 1px solid transparent;
           white-space: nowrap;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           color: var(
             --sidebar-menu-button-text-color,
             var(--primary-text-color)
@@ -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));
@@ -939,8 +939,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ha-md-list-item .item-text {
           display: none;
           max-width: calc(100% - 56px);
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-semibold);
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
         }
         :host([expanded]) ha-md-list-item .item-text {
           display: block;
@@ -962,8 +962,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           align-items: center;
           min-width: 8px;
           border-radius: 10px;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
-          line-height: normal;
+          line-height: var(--ha-line-height-normal);
           background-color: var(--accent-color);
           padding: 2px 6px;
           color: var(--text-accent-color, var(--text-primary-color));
@@ -975,7 +975,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           left: 26px;
           border-radius: 10px;
           font-size: 0.65em;
-          line-height: 2;
+          line-height: var(--ha-line-height-expanded);
           padding: 0 4px;
         }
 
@@ -996,8 +996,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
         .subheader {
           color: var(--sidebar-text-color);
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-semibold);
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           padding: 16px;
           white-space: nowrap;
         }
@@ -1011,7 +1011,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           color: var(--sidebar-background-color);
           background-color: var(--sidebar-text-color);
           padding: 4px;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-semibold);
         }
 
         .menu ha-icon-button {

src/components/ha-textarea.ts

@@ -30,7 +30,7 @@ export class HaTextArea extends TextAreaBase {
         content: attr(data-value);
         margin-top: 23px;
         margin-bottom: 9px;
-        line-height: 1.5rem;
+        line-height: var(--ha-line-height-normal);
         min-height: 42px;
         padding: 0px 32px 0 16px;
         letter-spacing: var(

src/components/ha-tip.ts

@@ -38,7 +38,7 @@ class HaTip extends LitElement {
     }
 
     .prefix {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
     }
   `;
 }

src/components/ha-top-app-bar-fixed.ts

@@ -16,7 +16,7 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
         padding-top: var(--header-height);
       }
       .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: 400;
+        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
         color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
         background-color: var(
           --app-header-background-color,
@@ -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-top-app-bar.ts

@@ -16,7 +16,7 @@ export class HaTopAppBar extends TopAppBarBase {
         padding-top: var(--header-height);
       }
       .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: 400;
+        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
         color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
         background-color: var(
           --app-header-background-color,

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -268,7 +268,7 @@ export class TopAppBarBaseBase extends BaseElement {
         );
       }
       .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: 400;
+        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
         color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
         background-color: var(
           --app-header-background-color,
@@ -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/ha-water_heater-state.ts

@@ -71,7 +71,7 @@ export class HaWaterHeaterState extends LitElement {
         }
 
         .state-label {
-          font-weight: bold;
+          font-weight: var(--ha-font-weight-bold);
         }
 
         .label {

src/components/map/ha-map.ts

@@ -688,11 +688,11 @@ 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 {
-      line-height: 30px;
+      line-height: var(--ha-line-height-expanded);
     }
   `;
 }

src/components/media-player/ha-media-player-browse.ts

@@ -959,9 +959,9 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding-top: 16px;
         }
         .breadcrumb .title {
-          font-size: 32px;
+          font-size: var(--ha-font-size-4xl);
-          line-height: 1.2;
+          line-height: var(--ha-line-height-condensed);
-          font-weight: bold;
+          font-weight: var(--ha-font-weight-bold);
           margin: 0;
           overflow: hidden;
           display: -webkit-box;
@@ -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

@@ -34,16 +34,16 @@ export class HaTileInfo extends LitElement {
       width: 100%;
     }
     .primary {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
-      line-height: 20px;
+      line-height: var(--ha-line-height-condensed);
       letter-spacing: 0.1px;
       color: var(--primary-text-color);
     }
     .secondary {
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
-      line-height: 16px;
+      line-height: var(--ha-line-height-condensed);
       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/config-flow/styles.ts

@@ -14,9 +14,15 @@ export const configFlowContentStyles = css`
       --mdc-typography-headline6-font-family,
       var(--mdc-typography-font-family, Roboto, sans-serif)
     );
-    font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
+    font-size: var(--mdc-typography-headline6-font-size, var(--ha-font-size-l));
-    line-height: var(--mdc-typography-headline6-line-height, 2rem);
+    line-height: var(
-    font-weight: var(--mdc-typography-headline6-font-weight, 500);
+      --mdc-typography-headline6-line-height,
+      var(--ha-line-height-expanded)
+    );
+    font-weight: var(
+      --mdc-typography-headline6-font-weight,
+      var(--ha-font-weight-semibold)
+    );
     letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
     text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
     text-transform: var(--mdc-typography-headline6-text-transform, inherit);

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

@@ -74,15 +74,15 @@ export class HaMoreInfoStateHeader extends LitElement {
     }
     .state {
       font-style: normal;
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
-      font-size: 36px;
+      font-size: var(--ha-font-size-5xl);
-      line-height: 44px;
+      line-height: var(--ha-line-height-condensed);
     }
     .last-changed {
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
-      line-height: 24px;
+      line-height: var(--ha-line-height-normal);
       letter-spacing: 0.1px;
       padding: 4px 0;
       margin-bottom: 20px;