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

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
2026-04-17 23:54:28 +01:00 · 2025-05-08 17:11:53 +02:00
parent 6692d9c6aa
commit ba4ec960c8
158 changed files with 219 additions and 189 deletions
--- a/gallery/src/ha-gallery.ts
+++ b/gallery/src/ha-gallery.ts
@@ -251,7 +251,7 @@ class HaGallery extends LitElement {

      .page-footer .header {
        font-size: 16px;
-        font-weight: 500;
+        font-weight: var(--ha-font-weight-medium);
        line-height: 28px;
        text-align: center;
      }
--- 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);
--- 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;
--- 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);
--- 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;
--- 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;
--- 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);
--- a/gallery/src/pages/components/ha-hs-color-picker.ts
+++ b/gallery/src/pages/components/ha-hs-color-picker.ts
@@ -106,7 +106,7 @@ export class DemoHaHsColorPicker extends LitElement {
    }
    .value {
      font-size: 22px;
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
      margin: 0 0 12px 0;
    }
  `;
--- 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;
    }
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;