diff --git a/cast/src/launcher/layout/hc-connect.ts b/cast/src/launcher/layout/hc-connect.ts index 17dee754c7..31f88ae8eb 100644 --- a/cast/src/launcher/layout/hc-connect.ts +++ b/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 { diff --git a/cast/src/launcher/layout/hc-layout.ts b/cast/src/launcher/layout/hc-layout.ts index 87cb2cced1..72344dc28d 100644 --- a/cast/src/launcher/layout/hc-layout.ts +++ b/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; } diff --git a/gallery/src/ha-gallery.ts b/gallery/src/ha-gallery.ts index d1043815a2..67899777ac 100644 --- a/gallery/src/ha-gallery.ts +++ b/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; } diff --git a/gallery/src/pages/components/ha-control-button.ts b/gallery/src/pages/components/ha-control-button.ts index 96f10d9625..5d2daf09fc 100644 --- a/gallery/src/pages/components/ha-control-button.ts +++ b/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); diff --git a/gallery/src/pages/components/ha-control-number-buttons.ts b/gallery/src/pages/components/ha-control-number-buttons.ts index 29496fc689..1b99117a50 100644 --- a/gallery/src/pages/components/ha-control-number-buttons.ts +++ b/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; diff --git a/gallery/src/pages/components/ha-control-select-menu.ts b/gallery/src/pages/components/ha-control-select-menu.ts index 638f682b0c..6050c2639b 100644 --- a/gallery/src/pages/components/ha-control-select-menu.ts +++ b/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); diff --git a/gallery/src/pages/components/ha-control-select.ts b/gallery/src/pages/components/ha-control-select.ts index f3887d0144..8666f42a1f 100644 --- a/gallery/src/pages/components/ha-control-select.ts +++ b/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; diff --git a/gallery/src/pages/components/ha-control-slider.ts b/gallery/src/pages/components/ha-control-slider.ts index b4af37cb67..5d8fb36cb5 100644 --- a/gallery/src/pages/components/ha-control-slider.ts +++ b/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; diff --git a/gallery/src/pages/components/ha-control-switch.ts b/gallery/src/pages/components/ha-control-switch.ts index 99ec957e9b..e175390948 100644 --- a/gallery/src/pages/components/ha-control-switch.ts +++ b/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); diff --git a/gallery/src/pages/components/ha-hs-color-picker.ts b/gallery/src/pages/components/ha-hs-color-picker.ts index c97ec7c8df..f205608a8f 100644 --- a/gallery/src/pages/components/ha-hs-color-picker.ts +++ b/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; } `; diff --git a/gallery/src/pages/components/ha-select-box.ts b/gallery/src/pages/components/ha-select-box.ts index ed2d182227..9cc5320424 100644 --- a/gallery/src/pages/components/ha-select-box.ts +++ b/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; } diff --git a/gallery/src/pages/date-time/date-time-numeric.ts b/gallery/src/pages/date-time/date-time-numeric.ts index 0694e6edf0..e5659cdc6a 100644 --- a/gallery/src/pages/date-time/date-time-numeric.ts +++ b/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; diff --git a/gallery/src/pages/date-time/date-time-seconds.ts b/gallery/src/pages/date-time/date-time-seconds.ts index a2d88a0293..614696fa5b 100644 --- a/gallery/src/pages/date-time/date-time-seconds.ts +++ b/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; diff --git a/gallery/src/pages/date-time/date-time-short-year.ts b/gallery/src/pages/date-time/date-time-short-year.ts index 9e55a5c2c8..1bb04e54b1 100644 --- a/gallery/src/pages/date-time/date-time-short-year.ts +++ b/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; diff --git a/gallery/src/pages/date-time/date-time-short.ts b/gallery/src/pages/date-time/date-time-short.ts index 01a32fa32d..55206d928e 100644 --- a/gallery/src/pages/date-time/date-time-short.ts +++ b/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; diff --git a/gallery/src/pages/date-time/date-time.ts b/gallery/src/pages/date-time/date-time.ts index 6a61041d2b..30bac54815 100644 --- a/gallery/src/pages/date-time/date-time.ts +++ b/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; diff --git a/gallery/src/pages/date-time/date.ts b/gallery/src/pages/date-time/date.ts index 12ee7244cc..3ae66b2325 100644 --- a/gallery/src/pages/date-time/date.ts +++ b/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; diff --git a/gallery/src/pages/date-time/time-seconds.ts b/gallery/src/pages/date-time/time-seconds.ts index 6a7dc0a8a7..499ca100e7 100644 --- a/gallery/src/pages/date-time/time-seconds.ts +++ b/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; diff --git a/gallery/src/pages/date-time/time-weekday.ts b/gallery/src/pages/date-time/time-weekday.ts index 68f24922ef..3f43b0e84d 100644 --- a/gallery/src/pages/date-time/time-weekday.ts +++ b/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; diff --git a/gallery/src/pages/date-time/time.ts b/gallery/src/pages/date-time/time.ts index bc2c0135ce..e9a24b7cd6 100644 --- a/gallery/src/pages/date-time/time.ts +++ b/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; diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts index e5afe3ed15..f174c3db4b 100644 --- a/hassio/src/addon-view/config/hassio-addon-config.ts +++ b/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; diff --git a/hassio/src/backups/hassio-backups.ts b/hassio/src/backups/hassio-backups.ts index 05cfe65ea4..679b0378c7 100644 --- a/hassio/src/backups/hassio-backups.ts +++ b/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; diff --git a/hassio/src/dashboard/hassio-update.ts b/hassio/src/dashboard/hassio-update.ts index 369a80101d..5e5bd09396 100644 --- a/hassio/src/dashboard/hassio-update.ts +++ b/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); } diff --git a/hassio/src/entrypoint.ts b/hassio/src/entrypoint.ts index 6bb32e58b2..73fa378323 100644 --- a/hassio/src/entrypoint.ts +++ b/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; diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts index 1120936fa6..fca53ff09d 100644 --- a/hassio/src/ingress-view/hassio-ingress-view.ts +++ b/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; diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts index a8b254a552..eee4201e6a 100644 --- a/src/auth/ha-authorize.ts +++ b/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; } diff --git a/src/auth/ha-pick-auth-provider.ts b/src/auth/ha-pick-auth-provider.ts index 9f6f11cd7b..c773d9fc84 100644 --- a/src/auth/ha-pick-auth-provider.ts +++ b/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 { diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 8e6df0246c..e2a4723a8d 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/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; diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts index 889894f35a..9f39af4bf2 100644 --- a/src/components/ha-alert.ts +++ b/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 { diff --git a/src/components/ha-ansi-to-html.ts b/src/components/ha-ansi-to-html.ts index 7bfd4ae8dd..224a2cb57b 100644 --- a/src/components/ha-ansi-to-html.ts +++ b/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; diff --git a/src/components/ha-badge.ts b/src/components/ha-badge.ts index 95bee281f4..4f0df46c73 100644 --- a/src/components/ha-badge.ts +++ b/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); diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts index df0e9389ce..c72a513677 100644 --- a/src/components/ha-base-time-input.ts +++ b/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 diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts index 5151bbf541..121e879b22 100644 --- a/src/components/ha-card.ts +++ b/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)), diff --git a/src/components/ha-climate-state.ts b/src/components/ha-climate-state.ts index e99b8f64e1..2fd0044eda 100644 --- a/src/components/ha-climate-state.ts +++ b/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 { diff --git a/src/components/ha-control-button.ts b/src/components/ha-control-button.ts index c07898fa70..61cedc44fd 100644 --- a/src/components/ha-control-button.ts +++ b/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; diff --git a/src/components/ha-control-number-buttons.ts b/src/components/ha-control-number-buttons.ts index 7977fb2190..cd3ea212f3 100644 --- a/src/components/ha-control-number-buttons.ts +++ b/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]) { diff --git a/src/components/ha-control-select-menu.ts b/src/components/ha-control-select-menu.ts index 6108cf5b26..ae9c224603 100644 --- a/src/components/ha-control-select-menu.ts +++ b/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 { diff --git a/src/components/ha-control-select.ts b/src/components/ha-control-select.ts index c3d245b829..e2126994a8 100644 --- a/src/components/ha-control-select.ts +++ b/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; diff --git a/src/components/ha-dialog-header.ts b/src/components/ha-dialog-header.ts index 995211c15b..ae796c1baf 100644 --- a/src/components/ha-dialog-header.ts +++ b/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; diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index 817bfe92ac..64d5565cc8 100644 --- a/src/components/ha-dialog.ts +++ b/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 { diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts index 6604123d48..e0217dc0f7 100644 --- a/src/components/ha-expansion-panel.ts +++ b/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 { diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts index d665910525..dcc9a77bbc 100644 --- a/src/components/ha-file-upload.ts +++ b/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); diff --git a/src/components/ha-filter-blueprints.ts b/src/components/ha-filter-blueprints.ts index 0b5c176352..1fc3449001 100644 --- a/src/components/ha-filter-blueprints.ts +++ b/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; diff --git a/src/components/ha-filter-categories.ts b/src/components/ha-filter-categories.ts index dd153c7b02..0ed0ffdcbd 100644 --- a/src/components/ha-filter-categories.ts +++ b/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; diff --git a/src/components/ha-filter-devices.ts b/src/components/ha-filter-devices.ts index 9e929fe8c4..e63c57c40f 100644 --- a/src/components/ha-filter-devices.ts +++ b/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; diff --git a/src/components/ha-filter-domains.ts b/src/components/ha-filter-domains.ts index dbada6c247..2addb22f1e 100644 --- a/src/components/ha-filter-domains.ts +++ b/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; diff --git a/src/components/ha-filter-entities.ts b/src/components/ha-filter-entities.ts index 39d6d51288..2ae83064b1 100644 --- a/src/components/ha-filter-entities.ts +++ b/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; diff --git a/src/components/ha-filter-floor-areas.ts b/src/components/ha-filter-floor-areas.ts index 3cf160dec7..c01c88635e 100644 --- a/src/components/ha-filter-floor-areas.ts +++ b/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; diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts index bf8507ff1f..1f590bd513 100644 --- a/src/components/ha-filter-integrations.ts +++ b/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; diff --git a/src/components/ha-filter-labels.ts b/src/components/ha-filter-labels.ts index 0e006c85de..07d385a23d 100644 --- a/src/components/ha-filter-labels.ts +++ b/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; diff --git a/src/components/ha-filter-states.ts b/src/components/ha-filter-states.ts index cd3ef47856..405898869d 100644 --- a/src/components/ha-filter-states.ts +++ b/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; diff --git a/src/components/ha-form/ha-form-boolean.ts b/src/components/ha-form/ha-form-boolean.ts index 494b9389c7..fd70a21b39 100644 --- a/src/components/ha-form/ha-form-boolean.ts +++ b/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) + ); } `; } diff --git a/src/components/ha-form/ha-form-constant.ts b/src/components/ha-form/ha-form-constant.ts index 43dc9bf754..386fd4a778 100644 --- a/src/components/ha-form/ha-form-constant.ts +++ b/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); } `; } diff --git a/src/components/ha-humidifier-state.ts b/src/components/ha-humidifier-state.ts index 63dec9fc33..e1a94409e7 100644 --- a/src/components/ha-humidifier-state.ts +++ b/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 { diff --git a/src/components/ha-label-badge.ts b/src/components/ha-label-badge.ts index 225dc4b000..89e2ec11f7 100644 --- a/src/components/ha-label-badge.ts +++ b/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; diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts index 1b15d914ed..8c4f4cf307 100644 --- a/src/components/ha-label.ts +++ b/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; diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts index c6eccf6190..e07d1f772d 100644 --- a/src/components/ha-markdown.ts +++ b/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); diff --git a/src/components/ha-select-box.ts b/src/components/ha-select-box.ts index a53506df74..43a182275b 100644 --- a/src/components/ha-select-box.ts +++ b/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 { diff --git a/src/components/ha-selector/ha-selector-action.ts b/src/components/ha-selector/ha-selector-action.ts index 255340b787..a3d94b9742 100644 --- a/src/components/ha-selector/ha-selector-action.ts +++ b/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); } `; } diff --git a/src/components/ha-selector/ha-selector-boolean.ts b/src/components/ha-selector/ha-selector-boolean.ts index bffa9ca18a..eca99ef278 100644 --- a/src/components/ha-selector/ha-selector-boolean.ts +++ b/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) + ); } `; } diff --git a/src/components/ha-selector/ha-selector-condition.ts b/src/components/ha-selector/ha-selector-condition.ts index dafca3f206..512b9657be 100644 --- a/src/components/ha-selector/ha-selector-condition.ts +++ b/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); } `; } diff --git a/src/components/ha-selector/ha-selector-trigger.ts b/src/components/ha-selector/ha-selector-trigger.ts index ffbc98852b..9a580d8d5a 100644 --- a/src/components/ha-selector/ha-selector-trigger.ts +++ b/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); } `; } diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts index 35615e3e74..910179ab58 100644 --- a/src/components/ha-settings-row.ts +++ b/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); } diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 35db8bed2f..1a88340e35 100644 --- a/src/components/ha-sidebar.ts +++ b/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 { diff --git a/src/components/ha-tip.ts b/src/components/ha-tip.ts index 8962543ba5..9f117db3e0 100644 --- a/src/components/ha-tip.ts +++ b/src/components/ha-tip.ts @@ -38,7 +38,7 @@ class HaTip extends LitElement { } .prefix { - font-weight: 500; + font-weight: var(--ha-font-weight-medium); } `; } diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts index 4a2b41c485..f8aaa11bac 100644 --- a/src/components/ha-top-app-bar-fixed.ts +++ b/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, diff --git a/src/components/ha-top-app-bar.ts b/src/components/ha-top-app-bar.ts index 40d27b40a8..698cc4e843 100644 --- a/src/components/ha-top-app-bar.ts +++ b/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, diff --git a/src/components/ha-two-pane-top-app-bar-fixed.ts b/src/components/ha-two-pane-top-app-bar-fixed.ts index 9b348d0442..28cf062464 100644 --- a/src/components/ha-two-pane-top-app-bar-fixed.ts +++ b/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, diff --git a/src/components/ha-water_heater-state.ts b/src/components/ha-water_heater-state.ts index 27c2877915..f74f4f7ca6 100644 --- a/src/components/ha-water_heater-state.ts +++ b/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 { diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index 78d5f1be51..bf9ae8d5af 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/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; diff --git a/src/components/tile/ha-tile-info.ts b/src/components/tile/ha-tile-info.ts index b18adc3e20..1212334748 100644 --- a/src/components/tile/ha-tile-info.ts +++ b/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; diff --git a/src/dialogs/config-flow/styles.ts b/src/dialogs/config-flow/styles.ts index e430345b5f..65926e7610 100644 --- a/src/dialogs/config-flow/styles.ts +++ b/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); diff --git a/src/dialogs/more-info/components/ha-more-info-state-header.ts b/src/dialogs/more-info/components/ha-more-info-state-header.ts index e166517bab..f7fd91f5ee 100644 --- a/src/dialogs/more-info/components/ha-more-info-state-header.ts +++ b/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; diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts index f265a1d916..f0146a3e10 100644 --- a/src/dialogs/more-info/controls/more-info-climate.ts +++ b/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; } diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts index 77f5556413..da2923b0b4 100644 --- a/src/dialogs/more-info/controls/more-info-humidifier.ts +++ b/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; } diff --git a/src/dialogs/more-info/controls/more-info-lock.ts b/src/dialogs/more-info/controls/more-info-lock.ts index 287199cc06..f92453fa19 100644 --- a/src/dialogs/more-info/controls/more-info-lock.ts +++ b/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 { diff --git a/src/dialogs/more-info/controls/more-info-script.ts b/src/dialogs/more-info/controls/more-info-script.ts index 39d6652c56..2b24ad8646 100644 --- a/src/dialogs/more-info/controls/more-info-script.ts +++ b/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; diff --git a/src/dialogs/more-info/controls/more-info-water_heater.ts b/src/dialogs/more-info/controls/more-info-water_heater.ts index 28f831e093..fa2fca75cb 100644 --- a/src/dialogs/more-info/controls/more-info-water_heater.ts +++ b/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; } diff --git a/src/dialogs/restart/dialog-restart.ts b/src/dialogs/restart/dialog-restart.ts index ee8c9164fa..ddd7c04d31 100644 --- a/src/dialogs/restart/dialog-restart.ts +++ b/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; diff --git a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts index c2edcf4949..fd4e461f91 100644 --- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts +++ b/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; diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts index 1b2a0e88a0..a8ddfb71b6 100644 --- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts +++ b/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 diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts index 461bd3fc3c..c774228b0a 100644 --- a/src/layouts/hass-error-screen.ts +++ b/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; diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts index 3aa2f5d672..866369f029 100644 --- a/src/layouts/hass-loading-screen.ts +++ b/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; diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts index 2c411b0478..eb309cc7f1 100644 --- a/src/layouts/hass-subpage.ts +++ b/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; diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index 81297196d1..a0de2b9774 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/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; diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index ca930a01b5..014c6b1cc8 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/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; } diff --git a/src/onboarding/onboarding-location.ts b/src/onboarding/onboarding-location.ts index a8d8c585a5..d1c8d18dab 100644 --- a/src/onboarding/onboarding-location.ts +++ b/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 diff --git a/src/onboarding/onboarding-welcome-link.ts b/src/onboarding/onboarding-welcome-link.ts index 40e8503fd5..08f0485abb 100644 --- a/src/onboarding/onboarding-welcome-link.ts +++ b/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%; } diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts index 96e1337e96..850140ed5b 100644 --- a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts +++ b/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; diff --git a/src/onboarding/styles.ts b/src/onboarding/styles.ts index b007eef334..ad838c3dc4 100644 --- a/src/onboarding/styles.ts +++ b/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; diff --git a/src/panels/calendar/dialog-calendar-event-editor.ts b/src/panels/calendar/dialog-calendar-event-editor.ts index eeb6560a83..ee098d9318 100644 --- a/src/panels/calendar/dialog-calendar-event-editor.ts +++ b/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 { diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index b2cd0e3c0d..0f275809dd 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/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); } diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts index 73cd194e4e..6365404ebd 100644 --- a/src/panels/calendar/ha-panel-calendar.ts +++ b/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, diff --git a/src/panels/config/application_credentials/ha-config-application-credentials.ts b/src/panels/config/application_credentials/ha-config-application-credentials.ts index 0ddb6f89da..e731c42677 100644 --- a/src/panels/config/application_credentials/ha-config-application-credentials.ts +++ b/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); diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts index 741b7e90c4..b8f4968817 100644 --- a/src/panels/config/areas/ha-config-area-page.ts +++ b/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 { diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts index 283f0972ab..f6e6e98aa3 100644 --- a/src/panels/config/areas/ha-config-areas-dashboard.ts +++ b/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 { diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 4130c26c92..d74d9c94cb 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/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); diff --git a/src/panels/config/automation/ha-automation-trace.ts b/src/panels/config/automation/ha-automation-trace.ts index 1ced1f10df..5e00b51a83 100644 --- a/src/panels/config/automation/ha-automation-trace.ts +++ b/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; diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index ad113fbef0..3d69ee8752 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/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; } `, diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 85adcbadfd..fb1bc698ca 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/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); diff --git a/src/panels/config/backup/components/ha-backup-agents-picker.ts b/src/panels/config/backup/components/ha-backup-agents-picker.ts index 529a5089dc..7d0421595f 100644 --- a/src/panels/config/backup/components/ha-backup-agents-picker.ts +++ b/src/panels/config/backup/components/ha-backup-agents-picker.ts @@ -121,7 +121,7 @@ class HaBackupAgentsPicker extends LitElement { align-items: center; gap: 16px; font-size: 16px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 24px; letter-spacing: 0.5px; } diff --git a/src/panels/config/backup/components/ha-backup-formfield-label.ts b/src/panels/config/backup/components/ha-backup-formfield-label.ts index d77c659851..52fb68cc79 100644 --- a/src/panels/config/backup/components/ha-backup-formfield-label.ts +++ b/src/panels/config/backup/components/ha-backup-formfield-label.ts @@ -43,7 +43,7 @@ class SupervisorFormfieldLabel extends LitElement { margin-inline-end: 4px; margin-inline-start: initial; font-size: 14px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 24px; letter-spacing: 0.5px; } diff --git a/src/panels/config/backup/components/ha-backup-summary-card.ts b/src/panels/config/backup/components/ha-backup-summary-card.ts index 16dd2bf4bb..7b562f7bd2 100644 --- a/src/panels/config/backup/components/ha-backup-summary-card.ts +++ b/src/panels/config/backup/components/ha-backup-summary-card.ts @@ -127,7 +127,7 @@ class HaBackupSummaryCard extends LitElement { .heading { font-size: 22px; font-style: normal; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 28px; color: var(--primary-text-color); margin: 0; @@ -138,7 +138,7 @@ class HaBackupSummaryCard extends LitElement { .description { font-size: 14px; font-style: normal; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 20px; letter-spacing: 0.25px; color: var(--secondary-text-color); diff --git a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts index 430b7dcc6a..0478274e7d 100644 --- a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts +++ b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts @@ -582,7 +582,7 @@ class DialogBackupOnboarding extends LitElement implements HassDialog { font-family: var(--ha-font-family-code); font-size: 20px; font-style: normal; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 28px; text-align: center; } diff --git a/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts index e7dc3cb5cf..b6c37febc9 100644 --- a/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts +++ b/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts @@ -316,7 +316,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog { font-family: var(--ha-font-family-code); font-size: 20px; font-style: normal; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 28px; text-align: center; } diff --git a/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts index ff42d9f8a7..23a70075c1 100644 --- a/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts +++ b/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts @@ -234,7 +234,7 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog { font-family: var(--ha-font-family-code); font-size: 20px; font-style: normal; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 28px; text-align: center; } diff --git a/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts index 5338314559..9d462345c4 100644 --- a/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts +++ b/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts @@ -156,7 +156,7 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog { font-family: var(--ha-font-family-code); font-size: 20px; font-style: normal; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 28px; text-align: center; } diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts index d7ff6a8049..b7f9e88821 100644 --- a/src/panels/config/cloud/account/cloud-remote-pref.ts +++ b/src/panels/config/cloud/account/cloud-remote-pref.ts @@ -260,7 +260,7 @@ export class CloudRemotePref extends LitElement { color: var(--secondary-text-color); } .warning { - font-weight: bold; + font-weight: var(--ha-font-weight-bold); margin-bottom: 1em; } .break-word { diff --git a/src/panels/config/cloud/account/dialog-cloud-support-package.ts b/src/panels/config/cloud/account/dialog-cloud-support-package.ts index ccf288d313..b45ebda259 100644 --- a/src/panels/config/cloud/account/dialog-cloud-support-package.ts +++ b/src/panels/config/cloud/account/dialog-cloud-support-package.ts @@ -193,7 +193,7 @@ export class DialogSupportPackage extends LitElement { border-radius: 16px; } summary { - font-weight: bold; + font-weight: var(--ha-font-weight-bold); cursor: pointer; } `; diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 807d03c380..640e5a48a2 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -1543,7 +1543,7 @@ ${rejected 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; diff --git a/src/panels/config/helpers/forms/ha-schedule-form.ts b/src/panels/config/helpers/forms/ha-schedule-form.ts index 9fe2ef5c7b..2db59403a9 100644 --- a/src/panels/config/helpers/forms/ha-schedule-form.ts +++ b/src/panels/config/helpers/forms/ha-schedule-form.ts @@ -481,7 +481,7 @@ class HaScheduleForm 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; } `, diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts index d58f4a858e..ef99715e4e 100644 --- a/src/panels/config/info/ha-config-info.ts +++ b/src/panels/config/info/ha-config-info.ts @@ -298,7 +298,7 @@ class HaConfigInfo extends LitElement { .header p { font-size: 22px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 28px; text-align: center; margin: 24px; @@ -329,7 +329,7 @@ class HaConfigInfo extends LitElement { flex-direction: row; justify-content: space-between; font-size: 14px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); padding: 4px 0; } @@ -343,7 +343,7 @@ class HaConfigInfo extends LitElement { .ha-version { color: var(--primary-text-color); - font-weight: 500; + font-weight: var(--ha-font-weight-medium); font-size: 16px; } diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts index 0c0793b1c1..8b544079d2 100644 --- a/src/panels/config/integrations/dialog-add-integration.ts +++ b/src/panels/config/integrations/dialog-add-integration.ts @@ -773,7 +773,10 @@ class AddIntegrationDialog extends LitElement { color: var(--mdc-dialog-heading-ink-color, rgba(0, 0, 0, 0.87)); 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 diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts index 5397d2ff9b..9c9e9ba764 100644 --- a/src/panels/config/integrations/ha-config-integration-page.ts +++ b/src/panels/config/integrations/ha-config-integration-page.ts @@ -1800,7 +1800,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { --state-message-color: var(--secondary-text-color); } .message { - font-weight: bold; + font-weight: var(--ha-font-weight-bold); display: flex; align-items: center; } diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts index cd14551053..08d0e00fc3 100644 --- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts +++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts @@ -1065,7 +1065,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( 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; diff --git a/src/panels/config/integrations/ha-domain-integrations.ts b/src/panels/config/integrations/ha-domain-integrations.ts index 8a7d8cc16f..05d3598801 100644 --- a/src/panels/config/integrations/ha-domain-integrations.ts +++ b/src/panels/config/integrations/ha-domain-integrations.ts @@ -333,7 +333,7 @@ class HaDomainIntegrations extends LitElement { margin: 8px 24px 0; color: var(--secondary-text-color); font-size: 14px; - font-weight: 500; + font-weight: var(--ha-font-weight-medium); } h3:first-of-type { margin-top: 0; diff --git a/src/panels/config/integrations/ha-integration-action-card.ts b/src/panels/config/integrations/ha-integration-action-card.ts index c26a79d6b5..53e2abb257 100644 --- a/src/panels/config/integrations/ha-integration-action-card.ts +++ b/src/panels/config/integrations/ha-integration-action-card.ts @@ -76,7 +76,7 @@ export class HaIntegrationActionCard extends LitElement { } h2 { font-size: 16px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); margin-top: 8px; margin-bottom: 0; max-width: 100%; diff --git a/src/panels/config/integrations/ha-integration-header.ts b/src/panels/config/integrations/ha-integration-header.ts index d4c3b433a1..7987f7189b 100644 --- a/src/panels/config/integrations/ha-integration-header.ts +++ b/src/panels/config/integrations/ha-integration-header.ts @@ -122,7 +122,7 @@ export class HaIntegrationHeader extends LitElement { -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); color: var(--primary-text-color); } .has-secondary { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts index dca4ce1cd2..e40bd08aad 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts @@ -212,7 +212,7 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) { width: 30%; } .device .name { - font-weight: bold; + font-weight: var(--ha-font-weight-bold); } .device .manuf { color: var(--secondary-text-color); diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts index f4eae36d92..3e0d3038ea 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts @@ -865,7 +865,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { .error-message h3 { text-align: center; - font-weight: bold; + font-weight: var(--ha-font-weight-bold); } .error-message ha-svg-icon { diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts index 183673c15f..7d3adebafc 100644 --- a/src/panels/config/logs/error-log-card.ts +++ b/src/panels/config/logs/error-log-card.ts @@ -781,7 +781,7 @@ class ErrorLogCard extends LitElement { line-height: 48px; display: block; margin-block-start: 0px; - font-weight: normal; + font-weight: var(--ha-font-weight-normal); white-space: nowrap; max-width: calc(100% - 150px); overflow: hidden; diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts index c63b4db9c9..4e343a1322 100644 --- a/src/panels/config/logs/system-log-card.ts +++ b/src/panels/config/logs/system-log-card.ts @@ -271,7 +271,7 @@ export class SystemLogCard extends LitElement { line-height: 48px; display: block; margin-block-start: 0px; - font-weight: normal; + font-weight: var(--ha-font-weight-normal); } .system-log-intro { diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index 4c58244a21..752463acb7 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -1229,7 +1229,7 @@ export class HaSceneEditor extends PreventUnsavedMixin( } .errors { padding: 20px; - font-weight: bold; + font-weight: var(--ha-font-weight-bold); color: var(--error-color); } ha-config-section { diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index a0e1b0c7ea..135a108cba 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -1021,7 +1021,7 @@ export class HaScriptEditor extends SubscribeMixin( } .errors { padding: 20px; - font-weight: bold; + font-weight: var(--ha-font-weight-bold); color: var(--error-color); } .yaml-mode { @@ -1072,7 +1072,7 @@ export class HaScriptEditor extends SubscribeMixin( } .header .name { font-size: 20px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); flex: 1; } .header a { diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts index 9799855cda..91909a4843 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -431,7 +431,7 @@ export class HaManualScriptEditor extends LitElement { } .header .name { font-size: 20px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); flex: 1; } .header a { diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts index c85ea484d5..ecfdcc33e2 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts @@ -94,7 +94,7 @@ export class AssistPipelineDetailConfig extends LitElement { margin-bottom: 16px; } h3 { - font-weight: normal; + font-weight: var(--ha-font-weight-normal); font-size: 22px; line-height: 28px; margin-top: 0; diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts index 0e69b0c9b5..145ebd2833 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts @@ -131,7 +131,7 @@ export class AssistPipelineDetailConversation extends LitElement { margin-bottom: 16px; } h3 { - font-weight: normal; + font-weight: var(--ha-font-weight-normal); font-size: 22px; line-height: 28px; margin-top: 0; diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts index 3836faa222..201754ad18 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts @@ -91,7 +91,7 @@ export class AssistPipelineDetailSTT extends LitElement { margin-bottom: 16px; } h3 { - font-weight: normal; + font-weight: var(--ha-font-weight-normal); font-size: 22px; line-height: 28px; margin-top: 0; diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts index a8dc5cb6bb..c1e2ac5dfa 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts @@ -138,7 +138,7 @@ export class AssistPipelineDetailTTS extends LitElement { margin-bottom: 16px; } h3 { - font-weight: normal; + font-weight: var(--ha-font-weight-normal); font-size: 22px; line-height: 28px; margin-top: 0; diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts index 549900b7fb..ccd64fae4f 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts @@ -145,7 +145,7 @@ export class AssistPipelineDetailWakeWord extends LitElement { margin-bottom: 16px; } h3 { - font-weight: normal; + font-weight: var(--ha-font-weight-normal); font-size: 22px; line-height: 28px; margin-top: 0; diff --git a/src/panels/config/voice-assistants/cloud-discover.ts b/src/panels/config/voice-assistants/cloud-discover.ts index 2beca52043..76f4e46c91 100644 --- a/src/panels/config/voice-assistants/cloud-discover.ts +++ b/src/panels/config/voice-assistants/cloud-discover.ts @@ -126,7 +126,7 @@ export class CloudDiscover extends LitElement { justify-content: space-between; } .header { - font-weight: 400; + font-weight: var(--ha-font-weight-normal); font-size: 28px; line-height: 36px; text-align: center; @@ -176,14 +176,14 @@ export class CloudDiscover extends LitElement { font-size: 24px; } .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; @@ -196,7 +196,7 @@ export class CloudDiscover extends LitElement { .more a { text-decoration: none; color: var(--primary-color); - font-weight: 500; + font-weight: var(--ha-font-weight-medium); font-size: 14px; } .more a ha-svg-icon { diff --git a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts index e3bb6ef500..2b3fe03cd2 100644 --- a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts +++ b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts @@ -412,7 +412,7 @@ export class AssistPipelineDebug extends LitElement { --expansion-panel-content-padding: 0px; } .heading { - font-weight: 500; + font-weight: var(--ha-font-weight-medium); margin-bottom: 16px; } diff --git a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts index 46a5cbba49..b5e66059cd 100644 --- a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts +++ b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts @@ -812,7 +812,7 @@ export class VoiceAssistantsExpose 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); diff --git a/src/panels/developer-tools/assist/developer-tools-assist.ts b/src/panels/developer-tools/assist/developer-tools-assist.ts index 220c12300d..45dd691c79 100644 --- a/src/panels/developer-tools/assist/developer-tools-assist.ts +++ b/src/panels/developer-tools/assist/developer-tools-assist.ts @@ -264,7 +264,7 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) { margin-bottom: 16px; } .sentence { - font-weight: 500; + font-weight: var(--ha-font-weight-medium); margin-bottom: 8px; display: flex; flex-direction: row; diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index ca7c56c845..76a4ae2b5f 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -141,7 +141,7 @@ class PanelDeveloperTools extends LitElement { align-items: center; font-size: 20px; padding: 8px 12px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); box-sizing: border-box; } @media (max-width: 599px) { diff --git a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts index e0ed5221ab..047fe5e9ff 100644 --- a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts +++ b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts @@ -234,7 +234,7 @@ export class DeveloperYamlConfig extends LitElement { .validate-result { color: var(--success-color); - font-weight: 500; + font-weight: var(--ha-font-weight-medium); margin: 1em 0; text-align: center; } diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts index cb63510b66..fef603d6ea 100644 --- a/src/panels/energy/ha-panel-energy.ts +++ b/src/panels/energy/ha-panel-energy.ts @@ -510,7 +510,7 @@ class PanelEnergy extends LitElement { align-items: center; font-size: 20px; padding: 0px 12px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); box-sizing: border-box; } @media (max-width: 599px) { diff --git a/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts b/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts index d0b14f1f46..67427d70c4 100644 --- a/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts @@ -134,7 +134,7 @@ class HuiLockOpenDoorCardFeature justify-content: center; flex-direction: row; gap: 8px; - font-weight: 500; + font-weight: var(--ha-font-weight-medium); color: var(--success-color); margin: 0 12px 12px 12px; height: 40px; diff --git a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts index 8cdf9633cd..dfb5f5e562 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts @@ -1178,7 +1178,7 @@ export class HuiEnergySourcesTableCard cursor: pointer; } .total { - --mdc-typography-body2-font-weight: 500; + --mdc-typography-body2-font-weight: var(--ha-font-weight-medium); } .total .mdc-data-table__cell { border-top: 1px solid var(--divider-color); diff --git a/src/panels/lovelace/cards/hui-clock-card.ts b/src/panels/lovelace/cards/hui-clock-card.ts index 729cfb2c14..03a674836d 100644 --- a/src/panels/lovelace/cards/hui-clock-card.ts +++ b/src/panels/lovelace/cards/hui-clock-card.ts @@ -205,7 +205,7 @@ export class HuiClockCard extends LitElement implements LovelaceCard { .time-title { color: var(--primary-text-color); font-size: 14px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 18px; overflow: hidden; text-align: center; @@ -232,7 +232,7 @@ export class HuiClockCard extends LitElement implements LovelaceCard { "hour minute am-pm"; font-size: 2rem; - font-weight: 500; + font-weight: var(--ha-font-weight-medium); line-height: 0.8; direction: ltr; } diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts index 6a099d0ba1..eacebf06ea 100644 --- a/src/panels/lovelace/cards/hui-entity-card.ts +++ b/src/panels/lovelace/cards/hui-entity-card.ts @@ -282,7 +282,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard { .name { color: var(--secondary-text-color); line-height: 40px; - font-weight: 500; + font-weight: var(--ha-font-weight-medium); font-size: 16px; overflow: hidden; white-space: nowrap; diff --git a/src/panels/lovelace/cards/hui-heading-card.ts b/src/panels/lovelace/cards/hui-heading-card.ts index 68337d45d8..c5bfbdedda 100644 --- a/src/panels/lovelace/cards/hui-heading-card.ts +++ b/src/panels/lovelace/cards/hui-heading-card.ts @@ -175,7 +175,10 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard { gap: 8px; color: var(--ha-heading-card-title-color, var(--primary-text-color)); font-size: var(--ha-heading-card-title-font-size, 16px); - font-weight: var(--ha-heading-card-title-font-weight, 400); + font-weight: var( + --ha-heading-card-title-font-weight, + var(--ha-font-weight-normal) + ); line-height: var(--ha-heading-card-title-line-height, 24px); letter-spacing: 0.1px; --mdc-icon-size: 18px; @@ -197,7 +200,10 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard { .content.subtitle { color: var(--ha-heading-card-subtitle-color, var(--secondary-text-color)); font-size: var(--ha-heading-card-subtitle-font-size, 14px); - font-weight: var(--ha-heading-card-subtitle-font-weight, 500); + font-weight: var( + --ha-heading-card-subtitle-font-weight, + var(--ha-font-weight-medium) + ); line-height: var(--ha-heading-card-subtitle-line-height, 20px); } .badges { diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index fc40cf6bca..700f80f495 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -354,7 +354,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { flex-direction: row; } .box .title { - font-weight: 500; + font-weight: var(--ha-font-weight-medium); margin-left: 8px; margin-inline-start: 8px; margin-inline-end: initial; diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts index 7a506b00ec..d2e80b24fc 100644 --- a/src/panels/lovelace/cards/hui-plant-status-card.ts +++ b/src/panels/lovelace/cards/hui-plant-status-card.ts @@ -191,7 +191,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard { .has-plant-image .header { font-size: 16px; - font-weight: 500; + font-weight: var(--ha-font-weight-medium); line-height: 16px; padding: 16px; color: white; @@ -234,7 +234,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard { .problem { color: var(--error-color); - font-weight: bold; + font-weight: var(--ha-font-weight-bold); } .uom { diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts index 2127302e66..4cc2ee39b0 100644 --- a/src/panels/lovelace/cards/hui-stack-card.ts +++ b/src/panels/lovelace/cards/hui-stack-card.ts @@ -97,7 +97,7 @@ export abstract class HuiStackCard text-align: var(--ha-stack-title-text-align, start); font-family: var(--ha-card-header-font-family, inherit); font-size: var(--ha-card-header-font-size, 24px); - font-weight: normal; + font-weight: var(--ha-font-weight-normal); margin-block-start: 0px; margin-block-end: 0px; letter-spacing: -0.012em; diff --git a/src/panels/lovelace/cards/hui-statistic-card.ts b/src/panels/lovelace/cards/hui-statistic-card.ts index eebe867bbf..00307b175c 100644 --- a/src/panels/lovelace/cards/hui-statistic-card.ts +++ b/src/panels/lovelace/cards/hui-statistic-card.ts @@ -370,7 +370,7 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard { .name { color: var(--secondary-text-color); line-height: 40px; - font-weight: 500; + font-weight: var(--ha-font-weight-medium); font-size: 16px; overflow: hidden; white-space: nowrap; diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts index f385243343..f4b302acfa 100644 --- a/src/panels/lovelace/cards/hui-todo-list-card.ts +++ b/src/panels/lovelace/cards/hui-todo-list-card.ts @@ -797,7 +797,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { .header h2 { color: var(--primary-text-color); font-size: inherit; - font-weight: 500; + font-weight: var(--ha-font-weight-medium); } .empty { diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index c2e971124b..7cca8ec0c2 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -230,7 +230,7 @@ export class HuiCardOptions extends LitElement { line-height: 24px; box-sizing: border-box; border-radius: 50%; - font-weight: 500; + font-weight: var(--ha-font-weight-medium); text-align: center; font-size: 14px; background-color: var(--app-header-edit-background-color, #455a64); diff --git a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts index af0030c52c..7cb475f5ef 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts @@ -477,7 +477,7 @@ export class HuiBadgePicker extends LitElement { .badges-container-header { font-size: 16px; - font-weight: 500; + font-weight: var(--ha-font-weight-medium); padding: 12px 8px 4px 8px; margin: 0; grid-column: 1 / -1; @@ -508,7 +508,7 @@ export class HuiBadgePicker extends LitElement { color: var(--ha-card-header-color, var(--primary-text-color)); font-family: var(--ha-card-header-font-family, inherit); font-size: 16px; - font-weight: bold; + font-weight: var(--ha-font-weight-bold); letter-spacing: -0.012em; line-height: 20px; padding: 12px 16px; diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index f663f36021..8a4cf01f07 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -476,7 +476,7 @@ export class HuiCardPicker extends LitElement { .cards-container-header { font-size: 16px; - font-weight: 500; + font-weight: var(--ha-font-weight-medium); padding: 12px 8px; margin: 0; grid-column: 1 / -1; @@ -513,7 +513,7 @@ export class HuiCardPicker extends LitElement { color: var(--ha-card-header-color, var(--primary-text-color)); font-family: var(--ha-card-header-font-family, inherit); font-size: 16px; - font-weight: bold; + font-weight: var(--ha-font-weight-bold); letter-spacing: -0.012em; line-height: 20px; padding: 12px 16px; diff --git a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts index 3f88085c26..3a9aa3043b 100644 --- a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts +++ b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts @@ -313,7 +313,7 @@ export class HaCardConditionEditor 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); diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 1ea4475d63..b24468c0c5 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -1023,7 +1023,7 @@ class HUIRoot extends LitElement { align-items: center; font-size: 20px; padding: 0px 12px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); box-sizing: border-box; } @media (max-width: 599px) { diff --git a/src/panels/lovelace/special-rows/hui-section-row.ts b/src/panels/lovelace/special-rows/hui-section-row.ts index 64eeb7cac4..f87c5e4a49 100644 --- a/src/panels/lovelace/special-rows/hui-section-row.ts +++ b/src/panels/lovelace/special-rows/hui-section-row.ts @@ -42,7 +42,7 @@ class HuiSectionRow extends LitElement implements LovelaceRow { margin-inline-end: initial; margin-bottom: 8px; margin-top: 16px; - font-weight: 500; + font-weight: var(--ha-font-weight-medium); } .divider { height: 1px; diff --git a/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts b/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts index e4989a431d..ddb77f00ea 100644 --- a/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts @@ -206,7 +206,7 @@ export class HuiAreasDashboardStrategyEditor margin: 0; font-size: 18px; line-height: 24px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); padding: 6px 4px; } ha-expansion-panel { diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts index 58d45edba8..b3a40b9f48 100644 --- a/src/panels/lovelace/views/hui-sections-view.ts +++ b/src/panels/lovelace/views/hui-sections-view.ts @@ -531,7 +531,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement { .drop-helper p { color: var(--primary-text-color); font-size: 16px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 24px; text-align: center; } @@ -618,7 +618,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement { margin: 0; color: var(--primary-text-color); font-size: 16px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 24px; --mdc-icon-size: 18px; display: flex; @@ -630,7 +630,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement { margin: 0; color: var(--secondary-text-color); font-size: 14px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 20px; } `; diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts index 3add74d949..66d5def2e0 100644 --- a/src/panels/media-browser/ha-bar-media-player.ts +++ b/src/panels/media-browser/ha-bar-media-player.ts @@ -706,7 +706,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) { } ha-list-item[selected] { - font-weight: bold; + font-weight: var(--ha-font-weight-bold); } span[slot="icon"] { diff --git a/src/panels/todo/dialog-todo-item-editor.ts b/src/panels/todo/dialog-todo-item-editor.ts index 880f74cafa..0503161ad6 100644 --- a/src/panels/todo/dialog-todo-item-editor.ts +++ b/src/panels/todo/dialog-todo-item-editor.ts @@ -424,7 +424,7 @@ class DialogTodoItemEditor 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 { diff --git a/src/state-control/state-control-circular-slider-style.ts b/src/state-control/state-control-circular-slider-style.ts index c0f51bb8b6..d5c2862438 100644 --- a/src/state-control/state-control-circular-slider-style.ts +++ b/src/state-control/state-control-circular-slider-style.ts @@ -35,7 +35,7 @@ export const stateControlCircularSliderStyle = css` } .label { width: 60%; - font-weight: 500; + font-weight: var(--ha-font-weight-medium); text-align: center; color: var(--action-color, inherit); display: -webkit-box;