Use ha-font-weight typography css tokens (#25374)

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

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

@@ -113,7 +113,7 @@ class HcLayout extends LitElement {
     }
 
     :host ::slotted(.section-header) {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       padding: 4px 16px;
       text-transform: uppercase;
     }

gallery/src/ha-gallery.ts

@@ -251,7 +251,7 @@ class HaGallery extends LitElement {
 
       .page-footer .header {
         font-size: 16px;
-        font-weight: 500;
+        font-weight: var(--ha-font-weight-medium);
         line-height: 28px;
         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

@@ -106,7 +106,7 @@ export class DemoHaHsColorPicker extends LitElement {
     }
     .value {
       font-size: 22px;
-      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

@@ -434,7 +434,7 @@ class HassioAddonConfig extends LitElement {
           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/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;

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-medium);
           margin-bottom: 0.5em;
           color: var(--primary-text-color);
         }

hassio/src/entrypoint.ts

@@ -13,7 +13,7 @@ body {
   font-family: ${haFontFamilyBody};
   -moz-osx-font-smoothing: ${haMozOsxFontSmoothing};
   -webkit-font-smoothing: ${haFontSmoothing};
-  font-weight: 400;
+  font-weight: var(--ha-font-weight-normal);
   margin: 0;
   padding: 0;
   height: 100vh;

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

@@ -345,7 +345,7 @@ class HassioIngressView extends LitElement {
       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;

src/auth/ha-authorize.ts

@@ -152,7 +152,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         }
         h1 {
           font-size: 28px;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           margin-top: 16px;
           margin-bottom: 16px;
         }

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

@@ -58,7 +58,7 @@ export class HaPickAuthProvider extends LitElement {
       z-index: 1;
       text-align: center;
       font-size: 14px;
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
       line-height: 20px;
     }
     h3:before {

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

@@ -933,7 +933,7 @@ export class HaDataTable extends LitElement {
           -webkit-font-smoothing: var(--ha-font-smoothing);
           font-size: 0.875rem;
           line-height: 1.25rem;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           letter-spacing: 0.0178571429em;
           text-decoration: inherit;
           text-transform: inherit;
@@ -1053,7 +1053,7 @@ export class HaDataTable extends LitElement {
           -webkit-font-smoothing: var(--ha-font-smoothing);
           font-size: 0.875rem;
           line-height: 1.25rem;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           letter-spacing: 0.0178571429em;
           text-decoration: inherit;
           text-transform: inherit;
@@ -1175,7 +1175,7 @@ export class HaDataTable extends LitElement {
           -webkit-font-smoothing: var(--ha-font-smoothing);
           font-size: 0.875rem;
           line-height: 1.375rem;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           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-medium);
           display: flex;
           align-items: center;
           cursor: pointer;

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-badge.ts

@@ -97,7 +97,7 @@ export class HaBadge extends LitElement {
     .label {
       font-size: 10px;
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       line-height: 10px;
       letter-spacing: 0.1px;
       color: var(--secondary-text-color);
@@ -105,7 +105,7 @@ export class HaBadge extends LitElement {
     .content {
       font-size: var(--ha-badge-font-size, var(--ha-font-size-s));
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       line-height: 16px;
       letter-spacing: 0.1px;
       color: var(--primary-text-color);

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

@@ -389,7 +389,10 @@ export class HaBaseTimeInput extends LitElement {
       );
       font-size: var(--mdc-typography-body2-font-size, 0.875rem);
       line-height: var(--mdc-typography-body2-line-height, 1.25rem);
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
       letter-spacing: var(
         --mdc-typography-body2-letter-spacing,
         0.0178571429em

src/components/ha-card.ts

@@ -48,7 +48,7 @@ export class HaCard extends LitElement {
       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-control-button.ts

@@ -59,7 +59,7 @@ export class HaControlButton extends LitElement {
       box-sizing: border-box;
       line-height: inherit;
       font-family: var(--ha-font-family-body);
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       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-medium);
       transition: color 180ms ease-in-out;
     }
     :host([disabled]) {

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

@@ -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-medium);
       color: var(--primary-text-color);
       user-select: none;
       -webkit-tap-highlight-color: transparent;

src/components/ha-dialog-header.ts

@@ -55,7 +55,7 @@ export class HaDialogHeader extends LitElement {
         .header-title {
           font-size: 22px;
           line-height: 28px;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
         }
         .header-subtitle {
           font-size: 14px;

src/components/ha-dialog.ts

@@ -85,7 +85,7 @@ 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-dialog__actions {

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-medium);
       outline: none;
     }
     #summary.noCollapse {

src/components/ha-file-upload.ts

@@ -324,7 +324,7 @@ export class HaFileUpload extends LitElement {
       box-sizing: border-box;
     }
     .header {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
     }
     .progress {
       color: var(--secondary-text-color);

src/components/ha-filter-blueprints.ts

@@ -208,7 +208,7 @@ 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;
           background-color: var(--primary-color);
           line-height: 16px;

src/components/ha-filter-categories.ts

@@ -303,7 +303,7 @@ 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;
           background-color: var(--primary-color);
           line-height: 16px;

src/components/ha-filter-devices.ts

@@ -232,7 +232,7 @@ 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;
           background-color: var(--primary-color);
           line-height: 16px;

src/components/ha-filter-domains.ts

@@ -189,7 +189,7 @@ 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;
           background-color: var(--primary-color);
           line-height: 16px;

src/components/ha-filter-entities.ts

@@ -246,7 +246,7 @@ 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;
           background-color: var(--primary-color);
           line-height: 16px;

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

@@ -303,7 +303,7 @@ 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;
           background-color: var(--primary-color);
           line-height: 16px;

src/components/ha-filter-integrations.ts

@@ -195,7 +195,7 @@ 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;
           background-color: var(--primary-color);
           line-height: 16px;

src/components/ha-filter-labels.ts

@@ -233,7 +233,7 @@ 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;
           background-color: var(--primary-color);
           line-height: 16px;

src/components/ha-filter-states.ts

@@ -177,7 +177,7 @@ 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;
           background-color: var(--primary-color);
           line-height: 16px;

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

@@ -71,7 +71,10 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
       box-sizing: border-box;
       color: var(--secondary-text-color);
       font-size: 0.875rem;
-      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-medium);
     }
   `;
 }

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-label-badge.ts

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

@@ -33,7 +33,7 @@ class HaLabel extends LitElement {
           flex-direction: row;
           align-items: center;
           font-size: 12px;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           line-height: 16px;
           letter-spacing: 0.1px;
           vertical-align: middle;

src/components/ha-markdown.ts

@@ -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-select-box.ts

@@ -155,7 +155,7 @@ export class HaSelectBox extends LitElement {
     .option .content .text .label {
       color: var(--primary-text-color);
       font-size: 14px;
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
       line-height: 20px;
       overflow: hidden;
       white-space: nowrap;
@@ -164,7 +164,7 @@ export class HaSelectBox extends LitElement {
     .option .content .text .description {
       color: var(--secondary-text-color);
       font-size: 13px;
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
       line-height: 16px;
     }
     img {

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

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

@@ -62,7 +62,10 @@ export class HaBooleanSelector extends LitElement {
       box-sizing: border-box;
       color: var(--secondary-text-color);
       font-size: 0.875rem;
-      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-medium);
     }
   `;
 }

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

src/components/ha-settings-row.ts

@@ -71,7 +71,10 @@ export class HaSettingsRow extends LitElement {
       -webkit-font-smoothing: var(--ha-font-smoothing);
       -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
       font-size: var(--mdc-typography-body2-font-size, 0.875rem);
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
       line-height: normal;
       color: var(--secondary-text-color);
     }

src/components/ha-sidebar.ts

@@ -829,7 +829,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)
@@ -941,7 +941,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ha-md-list-item .item-text {
           font-family: var(--ha-font-family-body);
           display: none;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           font-size: 14px;
         }
         :host([expanded]) ha-md-list-item .item-text {
@@ -964,7 +964,7 @@ 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;
           background-color: var(--accent-color);
           padding: 2px 6px;
@@ -998,7 +998,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
         .subheader {
           color: var(--sidebar-text-color);
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           font-size: 14px;
           padding: 16px;
           white-space: nowrap;
@@ -1013,7 +1013,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-medium);
         }
 
         .menu ha-icon-button {

src/components/ha-tip.ts

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

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,

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,

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/media-player/ha-media-player-browse.ts

@@ -967,7 +967,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         .breadcrumb .title {
           font-size: 32px;
           line-height: 1.2;
-          font-weight: bold;
+          font-weight: var(--ha-font-weight-bold);
           margin: 0;
           overflow: hidden;
           display: -webkit-box;

src/components/tile/ha-tile-info.ts

@@ -34,14 +34,14 @@ export class HaTileInfo extends LitElement {
       width: 100%;
     }
     .primary {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       font-size: 14px;
       line-height: 20px;
       letter-spacing: 0.1px;
       color: var(--primary-text-color);
     }
     .secondary {
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
       font-size: 12px;
       line-height: 16px;
       letter-spacing: 0.4px;

src/dialogs/config-flow/styles.ts

@@ -16,7 +16,10 @@ export const configFlowContentStyles = css`
     );
     font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
     line-height: var(--mdc-typography-headline6-line-height, 2rem);
-    font-weight: var(--mdc-typography-headline6-font-weight, 500);
+    font-weight: var(
+      --mdc-typography-headline6-font-weight,
+      var(--ha-font-weight-medium)
+    );
     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/more-info/components/ha-more-info-state-header.ts

@@ -74,13 +74,13 @@ export class HaMoreInfoStateHeader extends LitElement {
     }
     .state {
       font-style: normal;
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
       font-size: 36px;
       line-height: 44px;
     }
     .last-changed {
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       font-size: 16px;
       line-height: 24px;
       letter-spacing: 0.1px;

src/dialogs/more-info/controls/more-info-climate.ts

@@ -538,7 +538,7 @@ class MoreInfoClimate extends LitElement {
 
         .current .value {
           font-size: 22px;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           line-height: 28px;
           direction: ltr;
         }

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -240,7 +240,7 @@ class MoreInfoHumidifier extends LitElement {
         }
         .current .value {
           font-size: 22px;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           line-height: 28px;
           direction: ltr;
         }

src/dialogs/more-info/controls/more-info-lock.ts

@@ -182,7 +182,7 @@ class MoreInfoLock extends LitElement {
           align-items: center;
           flex-direction: row;
           gap: 8px;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           color: var(--success-color);
         }
         ha-control-button-group.jammed {

src/dialogs/more-info/controls/more-info-script.ts

@@ -226,7 +226,7 @@ class MoreInfoScript extends LitElement {
       margin-bottom: 16px;
     }
     .fields .title {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     ha-control-button ha-svg-icon {
       z-index: -1;

src/dialogs/more-info/controls/more-info-water_heater.ts

@@ -242,7 +242,7 @@ class MoreInfoWaterHeater extends LitElement {
 
         .current .value {
           font-size: 22px;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           line-height: 28px;
           direction: ltr;
         }

src/dialogs/restart/dialog-restart.ts

@@ -467,7 +467,7 @@ class DialogRestart extends LitElement {
           background-color: var(--divider-color);
         }
         .section {
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           font-size: 14px;
           line-height: 20px;
           margin: 8px 0 4px 0;

src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts

@@ -160,14 +160,14 @@ export class CloudStepIntro extends LitElement {
         background-color: #cceffe;
       }
       .feature h2 {
-        font-weight: 500;
+        font-weight: var(--ha-font-weight-medium);
         font-size: 16px;
         line-height: 24px;
         margin-top: 0;
         margin-bottom: 8px;
       }
       .feature p {
-        font-weight: 400;
+        font-weight: var(--ha-font-weight-normal);
         font-size: 14px;
         line-height: 20px;
         margin: 0;

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -267,7 +267,7 @@ export class HaVoiceCommandDialog extends LitElement {
           --mdc-theme-primary: var(--secondary-text-color);
           --mdc-typography-button-text-transform: none;
           --mdc-typography-button-font-size: unset;
-          --mdc-typography-button-font-weight: 400;
+          --mdc-typography-button-font-weight: var(--ha-font-weight-normal);
           --mdc-typography-button-letter-spacing: var(
             --mdc-typography-headline6-letter-spacing,
             0.0125em

src/layouts/hass-error-screen.ts

@@ -69,7 +69,7 @@ class HassErrorScreen extends LitElement {
           padding: 8px 12px;
           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;

src/layouts/hass-loading-screen.ts

@@ -69,7 +69,7 @@ class HassLoadingScreen extends LitElement {
           padding: 8px 12px;
           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;

src/layouts/hass-subpage.ts

@@ -101,7 +101,7 @@ class HassSubpage extends LitElement {
           height: var(--header-height);
           padding: 8px 12px;
           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;

src/layouts/hass-tabs-subpage-data-table.ts

@@ -789,7 +789,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       min-width: 20px;
       box-sizing: border-box;
       border-radius: 50%;
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
       background-color: var(--primary-color);
       line-height: 20px;
       text-align: center;
@@ -822,7 +822,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       min-width: 16px;
       box-sizing: border-box;
       border-radius: 50%;
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
       font-size: 11px;
       background-color: var(--primary-color);
       line-height: 16px;

src/layouts/hass-tabs-subpage.ts

@@ -233,7 +233,7 @@ class HassTabsSubpage extends LitElement {
           font-size: 20px;
           height: var(--header-height);
           background-color: var(--sidebar-background-color);
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           border-bottom: 1px solid var(--divider-color);
           box-sizing: border-box;
         }

src/onboarding/onboarding-location.ts

@@ -529,7 +529,10 @@ class OnboardingLocation extends LitElement {
             var(--mdc-typography-font-family, var(--ha-font-family-body))
           );
           font-size: var(--mdc-typography-caption-font-size, 0.75rem);
-          font-weight: var(--mdc-typography-caption-font-weight, 400);
+          font-weight: var(
+            --mdc-typography-caption-font-weight,
+            var(--ha-font-weight-normal)
+          );
           letter-spacing: var(
             --mdc-typography-caption-letter-spacing,
             0.0333333333em

src/onboarding/onboarding-welcome-link.ts

@@ -42,7 +42,7 @@ class OnboardingWelcomeLink extends LitElement {
       flex-direction: column;
       align-items: center;
       text-align: center;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       padding: 32px 16px;
       height: 100%;
     }

src/onboarding/restore-backup/onboarding-restore-backup-restore.ts

@@ -342,7 +342,7 @@ class OnboardingRestoreBackupRestore extends LitElement {
           margin-top: 24px;
           margin-bottom: 8px;
           font-style: normal;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
         }
         .supervisor-warning {
           display: block;

src/onboarding/styles.ts

@@ -5,7 +5,7 @@ export const onBoardingStyles = css`
     padding: 32px;
   }
   h1 {
-    font-weight: 400;
+    font-weight: var(--ha-font-weight-normal);
     font-size: 28px;
     line-height: 36px;
     margin-bottom: 8px;

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -624,7 +624,7 @@ class DialogCalendarEventEditor extends LitElement {
         }
         .label {
           font-size: 12px;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           color: var(--input-label-ink-color);
         }
         .date-range-details-content {

src/panels/calendar/ha-full-calendar.ts

@@ -564,7 +564,7 @@ export class HAFullCalendar extends LitElement {
           background-color: var(--table-header-background-color);
           color: var(--primary-text-color);
           font-size: 11px;
-          font-weight: bold;
+          font-weight: var(--ha-font-weight-bold);
           text-transform: uppercase;
         }
 
@@ -658,11 +658,11 @@ export class HAFullCalendar extends LitElement {
 
         .fc-list-day-text {
           font-size: 16px;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
         }
 
         .fc-list-day-side-text {
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           font-size: 16px;
           color: var(--primary-color);
         }

src/panels/calendar/ha-panel-calendar.ts

@@ -311,7 +311,7 @@ class PanelCalendar extends LitElement {
           );
           --mdc-typography-button-font-weight: var(
             --mdc-typography-headline6-font-weight,
-            500
+            var(--ha-font-weight-medium)
           );
           --mdc-typography-button-letter-spacing: var(
             --mdc-typography-headline6-letter-spacing,

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -330,7 +330,7 @@ export class HaConfigApplicationCredentials extends LitElement {
       top: -4px;
     }
     .selected-txt {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
       padding-left: 16px;
       padding-inline-start: 16px;
       direction: var(--direction);

src/panels/config/areas/ha-config-area-page.ts

@@ -655,7 +655,7 @@ class HaConfigAreaPage extends LitElement {
         h3 {
           margin: 0;
           padding: 0 16px;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           color: var(--secondary-text-color);
         }
         img {

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -456,7 +456,7 @@ export class HaConfigAreasDashboard extends LitElement {
     }
     .header h2 {
       font-size: 14px;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       margin-top: 28px;
     }
     .header ha-icon {

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -554,7 +554,7 @@ export default class HaAutomationConditionRow extends LitElement {
           right: 0px;
           left: 0px;
           text-transform: uppercase;
-          font-weight: bold;
+          font-weight: var(--ha-font-weight-bold);
           font-size: 14px;
           background-color: var(--divider-color, #e0e0e0);
           color: var(--text-primary-color);

src/panels/config/automation/ha-automation-trace.ts

@@ -532,7 +532,7 @@ export class HaAutomationTrace extends LitElement {
           height: var(--header-height);
           padding: 4px;
           background-color: var(--primary-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;

src/panels/config/automation/manual-automation-editor.ts

@@ -540,7 +540,7 @@ export class HaManualAutomationEditor extends LitElement {
           margin-top: -16px;
         }
         .header .name {
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           flex: 1;
           margin-bottom: 16px;
         }
@@ -549,7 +549,7 @@ export class HaManualAutomationEditor extends LitElement {
         }
         .header .small {
           font-size: small;
-          font-weight: normal;
+          font-weight: var(--ha-font-weight-normal);
           line-height: 0;
         }
       `,

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -700,7 +700,7 @@ export default class HaAutomationTriggerRow extends LitElement {
           right: 0px;
           left: 0px;
           text-transform: uppercase;
-          font-weight: bold;
+          font-weight: var(--ha-font-weight-bold);
           font-size: 14px;
           background-color: var(--primary-color);
           color: var(--text-primary-color);