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 aeec71b45c..a7cd5b2470 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-semibold); padding: 4px 16px; text-transform: uppercase; } diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template index adcae133fb..f83507febc 100644 --- a/demo/src/html/index.html.template +++ b/demo/src/html/index.html.template @@ -50,7 +50,7 @@ font-family: Roboto, Noto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); height: 100vh; margin: 0; padding: 0; diff --git a/gallery/src/ha-gallery.ts b/gallery/src/ha-gallery.ts index 3c61428831..d4ed0bb6dc 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: var(--ha-font-size-l); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); 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 4cacf24342..3ff8e6196c 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: var(--ha-font-size-2xl); - 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 b4f5b07fd9..f819ed738e 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 06c506c053..acfb5a0ca6 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..e5a304005f 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-semibold); margin-bottom: 0.5em; color: var(--primary-text-color); } diff --git a/hassio/src/entrypoint.ts b/hassio/src/entrypoint.ts index 7efede19d2..29a1fee448 100644 --- a/hassio/src/entrypoint.ts +++ b/hassio/src/entrypoint.ts @@ -8,7 +8,7 @@ body { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); margin: 0; padding: 0; height: 100vh; diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts index b6e9d3d1a9..2afea76b1e 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 154420e880..13e8be0c2a 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: var(--ha-font-size-3xl); - 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 609e53324c..6787dca43f 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: var(--ha-font-size-m); - font-weight: 400; + font-weight: var(--ha-font-weight-normal); line-height: 20px; } h3:before { diff --git a/src/common/image/extract_color.ts b/src/common/image/extract_color.ts index dece055851..2647455a40 100644 --- a/src/common/image/extract_color.ts +++ b/src/common/image/extract_color.ts @@ -96,7 +96,7 @@ const customGenerator = (colors: Swatch[]) => { // eslint-disable-next-line no-console console.log( "%cPicked colors", - `color: ${foregroundColor}; background-color: ${backgroundColor.hex}; font-weight: bold; padding: 16px;` + `color: ${foregroundColor}; background-color: ${backgroundColor.hex}; font-weight: var(--ha-font-weight-bold); padding: 16px;` ); colors.forEach((color) => logColor(color)); // eslint-disable-next-line no-console diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index adebf2a958..a7e2c2a8f9 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: antialiased; font-size: var(--ha-font-size-s); 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: antialiased; font-size: var(--ha-font-size-s); 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: antialiased; font-size: var(--ha-font-size-s); line-height: 1.375rem; - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); letter-spacing: 0.0071428571em; text-decoration: inherit; text-transform: inherit; @@ -1199,7 +1199,7 @@ export class HaDataTable extends LitElement { padding-inline-start: 12px; padding-inline-end: initial; width: 100%; - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); display: flex; align-items: center; cursor: pointer; 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 2f139198b3..d530ba79dd 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: var(--ha-font-size-xs); font-style: normal; - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); 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-font-size-badge, var(--ha-font-size-s)); font-style: normal; - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); 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 bc873e499b..7d92b45a50 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 f680c23a5b..35064f7fd0 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: Roboto; - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); 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..cb5a30fd07 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-semibold); 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 5c5a521929..b5b255b792 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..32aece9ea7 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-semibold); 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 a2a5b2a419..9094fa999f 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: var(--ha-font-size-xl); line-height: 28px; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); } .header-subtitle { font-size: var(--ha-font-size-m); diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index 483494b092..ff3d3c8339 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: var(--ha-font-size-xl); } .mdc-dialog__actions { diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts index 877c02ac4d..6fe6ca00cb 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-semibold); outline: none; } #summary.noCollapse { diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts index f68488e519..ad82fd6d0c 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-semibold); } .progress { color: var(--secondary-text-color); diff --git a/src/components/ha-filter-blueprints.ts b/src/components/ha-filter-blueprints.ts index d4ca63b00b..8ea2ccac14 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: var(--ha-font-size-xs); 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 b473df76ad..280185b797 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: var(--ha-font-size-xs); 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 663516dc39..77517ee6ef 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: var(--ha-font-size-xs); 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 f4d2b61de9..034279a497 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: var(--ha-font-size-xs); 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 3187a7c501..83b9455d44 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: var(--ha-font-size-xs); 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 c581abcf72..fc5af1573d 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: var(--ha-font-size-xs); 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 9ebaf5e13b..c6d73cef1e 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: var(--ha-font-size-xs); 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 fbdd99c065..69ff204c33 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: var(--ha-font-size-xs); 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 5471b255cc..5248fc5550 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: var(--ha-font-size-xs); 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 0f1249231a..aa51a35cd7 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: var(--ha-font-size-s); - font-weight: var(--mdc-typography-body2-font-weight, 400); + font-weight: var( + --mdc-typography-body2-font-weight, + var(--ha-font-weight-normal) + ); } `; } diff --git a/src/components/ha-form/ha-form-constant.ts b/src/components/ha-form/ha-form-constant.ts index 43dc9bf754..fef62e0b23 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-semibold); } `; } diff --git a/src/components/ha-heading-badge.ts b/src/components/ha-heading-badge.ts index 27def2d750..06e1679813 100644 --- a/src/components/ha-heading-badge.ts +++ b/src/components/ha-heading-badge.ts @@ -35,7 +35,10 @@ export class HaBadge extends LitElement { gap: 3px; color: var(--ha-heading-badge-text-color, var(--secondary-text-color)); font-size: var(--ha-heading-badge-font-size, var(--ha-font-size-m)); - font-weight: var(--ha-heading-badge-font-weight, 400); + font-weight: var( + --ha-heading-badge-font-weight, + var(--ha-font-weight-normal) + ); line-height: var(--ha-heading-badge-line-height, 20px); letter-spacing: 0.1px; --mdc-icon-size: 14px; 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..d0f9679fcf 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-semibold); overflow: hidden; text-transform: uppercase; text-overflow: ellipsis; @@ -102,7 +102,10 @@ class HaLabelBadge extends LitElement { margin-top: 1em; font-size: var(--ha-label-badge-title-font-size, 0.9em); width: var(--ha-label-badge-title-width, 5em); - font-weight: var(--ha-label-badge-title-font-weight, 400); + font-weight: var( + --ha-label-badge-title-font-weight, + var(--ha-font-weight-normal) + ); overflow: hidden; text-overflow: ellipsis; line-height: normal; diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts index a9a74c43df..28b3a1717a 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: var(--ha-font-size-s); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); 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 b424c5f97d..a0b9d20f13 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: var(--ha-font-size-m); - 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: var(--ha-font-size-s); - 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..fef0bea177 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-semibold); } `; } diff --git a/src/components/ha-selector/ha-selector-boolean.ts b/src/components/ha-selector/ha-selector-boolean.ts index e41146c9a6..927781c367 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: var(--ha-font-size-s); - font-weight: var(--mdc-typography-body2-font-weight, 400); + font-weight: var( + --mdc-typography-body2-font-weight, + var(--ha-font-weight-normal) + ); } `; } diff --git a/src/components/ha-selector/ha-selector-condition.ts b/src/components/ha-selector/ha-selector-condition.ts index dafca3f206..b8a14fcaeb 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-semibold); } `; } diff --git a/src/components/ha-selector/ha-selector-trigger.ts b/src/components/ha-selector/ha-selector-trigger.ts index ffbc98852b..a8a62d7178 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-semibold); } `; } diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts index 1f9770a1e7..ac9f555449 100644 --- a/src/components/ha-settings-row.ts +++ b/src/components/ha-settings-row.ts @@ -70,7 +70,10 @@ export class HaSettingsRow extends LitElement { ); -webkit-font-smoothing: antialiased; 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 eb4559707c..327529884e 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -827,7 +827,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { padding: 0 4px; border-bottom: 1px solid transparent; white-space: nowrap; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); color: var( --sidebar-menu-button-text-color, var(--primary-text-color) @@ -939,7 +939,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { ha-md-list-item .item-text { display: none; max-width: calc(100% - 56px); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); font-size: var(--ha-font-size-m); } :host([expanded]) ha-md-list-item .item-text { @@ -962,7 +962,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; @@ -996,7 +996,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { .subheader { color: var(--sidebar-text-color); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); font-size: var(--ha-font-size-m); padding: 16px; white-space: nowrap; @@ -1011,7 +1011,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { color: var(--sidebar-background-color); background-color: var(--sidebar-text-color); padding: 4px; - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); } .menu ha-icon-button { diff --git a/src/components/ha-tip.ts b/src/components/ha-tip.ts index 8962543ba5..cd0ebefe8e 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-semibold); } `; } diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts index f080be581d..7915d48fb0 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 61cabf6efc..7dc65768c6 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 b2f9d3acd2..016e4e2cf9 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -961,7 +961,7 @@ export class HaMediaPlayerBrowse extends LitElement { .breadcrumb .title { font-size: var(--ha-font-size-4xl); 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 04aea75a61..ab368ea08f 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-semibold); font-size: var(--ha-font-size-m); 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: var(--ha-font-size-s); line-height: 16px; letter-spacing: 0.4px; diff --git a/src/dialogs/config-flow/styles.ts b/src/dialogs/config-flow/styles.ts index daaa9342af..e9e01dc409 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-semibold) + ); letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em); text-decoration: var(--mdc-typography-headline6-text-decoration, inherit); text-transform: var(--mdc-typography-headline6-text-transform, inherit); 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 dcc96d4342..3dde088caa 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: var(--ha-font-size-5xl); line-height: 44px; } .last-changed { font-style: normal; - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); font-size: var(--ha-font-size-l); 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 4914e3c4eb..b5f99398d8 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: var(--ha-font-size-2xl); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); 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 e274ef2857..60d7b6115b 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: var(--ha-font-size-2xl); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); 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 90e83696ac..f7906834fa 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-semibold); 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 91f271f820..c8df25fa38 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: var(--ha-font-size-2xl); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); line-height: 28px; direction: ltr; } diff --git a/src/dialogs/restart/dialog-restart.ts b/src/dialogs/restart/dialog-restart.ts index ac400ba8b2..b28ffac517 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-semibold); font-size: var(--ha-font-size-m); 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 83c30aa50f..a082e5d0dc 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-semibold); font-size: var(--ha-font-size-l); line-height: 24px; margin-top: 0; margin-bottom: 8px; } .feature p { - font-weight: 400; + font-weight: var(--ha-font-weight-normal); font-size: var(--ha-font-size-m); 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 60aa04fb11..c02f0af0ff 100644 --- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts +++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts @@ -266,7 +266,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/html/_style_base.html.template b/src/html/_style_base.html.template index ca503868fe..901faf1d0f 100644 --- a/src/html/_style_base.html.template +++ b/src/html/_style_base.html.template @@ -4,7 +4,7 @@ font-family: Roboto, Noto, Noto Sans, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - font-weight: 400; + font-weight: var(--ha-font-weight-normal); margin: 0; padding: 0; height: 100%; diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts index defea23eb5..bae81d2e87 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 b534356099..dcd089fca4 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 acab097678..639b0601e4 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 820983f2cd..d7df4e9569 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: var(--ha-font-size-xs); 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 e47a516082..49e4a65f85 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: var(--ha-font-size-xl); 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 58311b910e..cf0dc4bade 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, Roboto, sans-serif) ); 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..adaf92d005 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-semibold); 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 e1eca88871..b0bbc4ad09 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 6de8737bc0..5a45fc39d1 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: var(--ha-font-size-3xl); 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 02fdabefb4..440bf8c487 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: var(--ha-font-size-s); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); 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 13cff951a9..c7356287d0 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: var(--ha-font-size-xs); - 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: var(--ha-font-size-l); - 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: var(--ha-font-size-l); color: var(--primary-color); } 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 8312d1ce55..145edae494 100644 --- a/src/panels/config/application_credentials/ha-config-application-credentials.ts +++ b/src/panels/config/application_credentials/ha-config-application-credentials.ts @@ -329,7 +329,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..45fbf82473 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-semibold); 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 be0a029f56..bfb3e60710 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: var(--ha-font-size-m); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); 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 cd44b1d742..dfc504ca01 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: var(--ha-font-size-m); 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 c66506b929..4544d97887 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 7799de3809..9ab21a7d4f 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -271,7 +271,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; } @@ -280,7 +280,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 e1fc84290c..d785595afe 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: var(--ha-font-size-m); 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 35b8a9ba4c..08e409cf42 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: var(--ha-font-size-l); - 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 bcf4a95acf..cdbe6d98b6 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: var(--ha-font-size-m); - 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 b468cfc61c..625e6f55e1 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: var(--ha-font-size-2xl); 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: var(--ha-font-size-m); 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 fb9eb73f16..4ecc52976d 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: "Roboto Mono", "Consolas", "Menlo", monospace; font-size: var(--ha-font-size-xl); 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 58e249f6b4..29efd4641d 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: "Roboto Mono", "Consolas", "Menlo", monospace; font-size: var(--ha-font-size-xl); 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 b4ed58c235..f385d2ccbb 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: "Roboto Mono", "Consolas", "Menlo", monospace; font-size: var(--ha-font-size-xl); 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 0d6859dde2..a66159bf72 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: "Roboto Mono", "Consolas", "Menlo", monospace; font-size: var(--ha-font-size-xl); 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 b296741e05..d911b12c79 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -1541,7 +1541,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 026c0578d8..e322cb3d2b 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: var(--ha-font-size-xs); - 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 f001c41aa8..fdec89eb5a 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: var(--ha-font-size-2xl); - 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: var(--ha-font-size-m); - 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-semibold); font-size: var(--ha-font-size-l); } diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts index 0c0793b1c1..400744d5d9 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-semibold) + ); 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 c61d40a440..19a9e63cb9 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 f9e43bc614..2d8a8c09d3 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: var(--ha-font-size-m); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); } 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 6c506dc5ee..ae7302ad17 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: var(--ha-font-size-l); - 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 21fe2f8a9a..c62edc530a 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: var(--ha-font-size-l); - 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 941c9b97d4..99f339bb4f 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 1c07dbdfa0..af30cf5594 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -1031,7 +1031,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 { @@ -1082,7 +1082,7 @@ export class HaScriptEditor extends SubscribeMixin( } .header .name { font-size: var(--ha-font-size-xl); - 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 0fd0576325..d9d82cdc97 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -202,7 +202,7 @@ export class HaManualScriptEditor extends LitElement { } .header .name { font-size: var(--ha-font-size-xl); - 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 ccf135f29e..ecac46bd7a 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: var(--ha-font-size-xl); 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 5214bd4f9e..d915df9442 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: var(--ha-font-size-xl); 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 d816586dd3..25d27a0fcd 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: var(--ha-font-size-xl); 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 3a20f268af..bcf76e121f 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: var(--ha-font-size-xl); 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 7080d31c25..bd786c9f95 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: var(--ha-font-size-xl); 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 3a545f4bb5..9d9d4bd905 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: var(--ha-font-size-3xl); line-height: 36px; text-align: center; @@ -176,14 +176,14 @@ export class CloudDiscover extends LitElement { font-size: var(--ha-font-size-2xl); } .feature h2 { - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); font-size: var(--ha-font-size-l); line-height: 24px; margin-top: 0; margin-bottom: 8px; } .feature p { - font-weight: 400; + font-weight: var(--ha-font-weight-normal); font-size: var(--ha-font-size-m); 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-semibold); font-size: var(--ha-font-size-m); } .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 e2d070f60f..aee68738a1 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-semibold); 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 f731077320..4864f60086 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 @@ -811,7 +811,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 a10e169ea2..75776e68f8 100644 --- a/src/panels/developer-tools/assist/developer-tools-assist.ts +++ b/src/panels/developer-tools/assist/developer-tools-assist.ts @@ -263,7 +263,7 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) { margin-bottom: 16px; } .sentence { - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); 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 f5563e039a..5cc477831a 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: var(--ha-font-size-xl); 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..fa0682e179 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-semibold); 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 23b7e1f86c..a3f2c5dbf1 100644 --- a/src/panels/energy/ha-panel-energy.ts +++ b/src/panels/energy/ha-panel-energy.ts @@ -404,7 +404,7 @@ class PanelEnergy extends LitElement { align-items: center; font-size: var(--ha-font-size-xl); 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 be20091a8c..6dab2d1386 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-semibold); 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..82baea9a9b 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-semibold); } .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 d98b247a9b..c5188d754c 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: var(--ha-font-size-m); - 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: var(--ha-font-size-3xl); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); 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 ba459f822a..cbd80ac4d7 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-semibold); font-size: var(--ha-font-size-l); 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 18452b87bc..2a60068ed4 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, var(--ha-font-size-l)); - 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; @@ -200,7 +203,10 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard { --ha-heading-card-subtitle-font-size, var(--ha-font-size-m) ); - font-weight: var(--ha-heading-card-subtitle-font-weight, 500); + font-weight: var( + --ha-heading-card-subtitle-font-weight, + var(--ha-font-weight-semibold) + ); 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 1657f994bc..249291466c 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-semibold); 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 1bffb7b9f1..cb6a70f564 100644 --- a/src/panels/lovelace/cards/hui-plant-status-card.ts +++ b/src/panels/lovelace/cards/hui-plant-status-card.ts @@ -190,7 +190,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard { .has-plant-image .header { font-size: var(--ha-font-size-l); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); line-height: 16px; padding: 16px; color: white; @@ -233,7 +233,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 d381c7def1..e758d6f776 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-semibold); font-size: var(--ha-font-size-l); 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 f48a99e0fd..0ab7fc8171 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-semibold); } .empty { diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index 830b788f89..cfa35bee77 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-semibold); text-align: center; font-size: var(--ha-font-size-m); 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 bcd8617078..8f1ee14694 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts @@ -476,7 +476,7 @@ export class HuiBadgePicker extends LitElement { .badges-container-header { font-size: var(--ha-font-size-l); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); padding: 12px 8px 4px 8px; margin: 0; grid-column: 1 / -1; @@ -507,7 +507,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: var(--ha-font-size-l); - 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 7808b3fbf0..4cf2ed0024 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -475,7 +475,7 @@ export class HuiCardPicker extends LitElement { .cards-container-header { font-size: var(--ha-font-size-l); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); padding: 12px 8px; margin: 0; grid-column: 1 / -1; @@ -512,7 +512,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: var(--ha-font-size-l); - 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 18df5c4ae9..83b51f5bb4 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: var(--ha-font-size-m); 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 b1335b50e4..5268f75f01 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: var(--ha-font-size-xl); 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..39b52b3086 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-semibold); } .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 d9f73f3b4f..be733ee9a8 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: var(--ha-font-size-l); 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 3ad8ccac9f..b0f6d11951 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: var(--ha-font-size-l); - 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: var(--ha-font-size-l); - 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: var(--ha-font-size-m); - 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 b28cf4af97..b07cf0049b 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: var(--ha-font-size-s); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); color: var(--input-label-ink-color); } .date-range-details-content { diff --git a/src/resources/codemirror.ts b/src/resources/codemirror.ts index 89c5330120..7963f74969 100644 --- a/src/resources/codemirror.ts +++ b/src/resources/codemirror.ts @@ -109,7 +109,8 @@ export const haTheme = EditorView.theme({ "var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif))", fontSize: "var(--mdc-typography-button-font-size, 0.875rem)", height: "36px", - fontWeight: "var(--mdc-typography-button-font-weight, 500)", + fontWeight: + "var(--mdc-typography-button-font-weight, var(--ha-font-weight-semibold))", borderRadius: "4px", letterSpacing: "var(--mdc-typography-button-letter-spacing, 0.0892857em)", }, diff --git a/src/resources/roboto.ts b/src/resources/roboto.ts index f156b1fa88..883c16e759 100644 --- a/src/resources/roboto.ts +++ b/src/resources/roboto.ts @@ -1,26 +1,6 @@ import { css, unsafeCSS } from "lit"; export const fontStyles = css` - @font-face { - font-family: "Roboto"; - src: - local("Roboto Thin"), - local("Roboto-Thin"), - url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Thin.woff2) - format("woff2"); - font-weight: 100; - font-style: normal; - } - @font-face { - font-family: "Roboto"; - src: - local("Roboto Thin Italic"), - local("Roboto-ThinItalic"), - url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-ThinItalic.woff2) - format("woff2"); - font-weight: 100; - font-style: italic; - } @font-face { font-family: "Roboto"; src: @@ -28,7 +8,7 @@ export const fontStyles = css` local("Roboto-Light"), url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Light.woff2) format("woff2"); - font-weight: 300; + font-weight: var(--ha-font-weight-light); font-style: normal; } @font-face { @@ -38,7 +18,7 @@ export const fontStyles = css` local("Roboto-LightItalic"), url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-LightItalic.woff2) format("woff2"); - font-weight: 300; + font-weight: var(--ha-font-weight-light); font-style: italic; } @font-face { @@ -48,7 +28,7 @@ export const fontStyles = css` local("Roboto-Regular"), url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Regular.woff2) format("woff2"); - font-weight: 400; + font-weight: var(--ha-font-weight-normal); font-style: normal; } @font-face { @@ -58,7 +38,7 @@ export const fontStyles = css` local("Roboto-Italic"), url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-RegularItalic.woff2) format("woff2"); - font-weight: 400; + font-weight: var(--ha-font-weight-normal); font-style: italic; } @font-face { @@ -68,7 +48,7 @@ export const fontStyles = css` local("Roboto-Medium"), url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Medium.woff2) format("woff2"); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); font-style: normal; } @font-face { @@ -78,7 +58,7 @@ export const fontStyles = css` local("Roboto-MediumItalic"), url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-MediumItalic.woff2) format("woff2"); - font-weight: 500; + font-weight: var(--ha-font-weight-semibold); font-style: italic; } @font-face { @@ -88,7 +68,7 @@ export const fontStyles = css` local("Roboto-Bold"), url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Bold.woff2) format("woff2"); - font-weight: 700; + font-weight: var(--ha-font-weight-bold); font-style: normal; } @font-face { @@ -98,27 +78,7 @@ export const fontStyles = css` local("Roboto-BoldItalic"), url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-BoldItalic.woff2) format("woff2"); - font-weight: 700; - font-style: italic; - } - @font-face { - font-family: "Roboto"; - src: - local("Roboto Black"), - local("Roboto-Black"), - url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Black.woff2) - format("woff2"); - font-weight: 900; - font-style: normal; - } - @font-face { - font-family: "Roboto"; - src: - local("Roboto Black Italic"), - local("Roboto-BlackItalic"), - url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-BlackItalic.woff2) - format("woff2"); - font-weight: 900; + font-weight: var(--ha-font-weight-bold); font-style: italic; } `; diff --git a/src/resources/theme/typography.globals.ts b/src/resources/theme/typography.globals.ts index c7ae6fe678..540c92685b 100644 --- a/src/resources/theme/typography.globals.ts +++ b/src/resources/theme/typography.globals.ts @@ -7,6 +7,8 @@ export const typographyStyles = css` --ha-font-family-code: monospace; --ha-font-family-longform: ui-sans-serif, system-ui, sans-serif; + --ha-font-family-heading: var(--ha-font-family-body); + font-size: 14px; --ha-font-size-scale: 1; --ha-font-size-xs: calc(10px * var(--ha-font-size-scale)); @@ -24,7 +26,6 @@ export const typographyStyles = css` --ha-font-weight-semibold: 500; --ha-font-weight-bold: 600; - --ha-font-family-heading: var(--ha-font-family-body); --ha-font-weight-body: var(--ha-font-weight-normal); --ha-font-weight-heading: var(--ha-font-weight-bold); --ha-font-weight-action: var(--ha-font-weight-semibold); diff --git a/src/state-control/state-control-circular-slider-style.ts b/src/state-control/state-control-circular-slider-style.ts index 52479e01ab..8336ab4e35 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-semibold); text-align: center; color: var(--action-color, inherit); display: -webkit-box;