From 03ccf014d95e6f0762b4cea09ff7b9fe93cb07ca Mon Sep 17 00:00:00 2001
From: Wendelin <12148533+wendevlin@users.noreply.github.com>
Date: Wed, 7 May 2025 16:38:07 +0200
Subject: [PATCH] Use ha-font-family typography css token (#25355)

Use ha-font-family
---
 hassio/src/entrypoint.ts                               |  3 ++-
 src/components/chips/ha-assist-chip.ts                 |  2 +-
 src/components/data-table/ha-data-table.ts             |  6 +++---
 src/components/ha-base-time-input.ts                   |  2 +-
 src/components/ha-control-button.ts                    |  2 +-
 src/components/ha-outlined-text-field.ts               |  2 +-
 src/components/ha-settings-row.ts                      |  2 +-
 src/dialogs/config-flow/styles.ts                      |  2 +-
 src/html/_style_base.html.template                     |  2 +-
 src/onboarding/onboarding-location.ts                  |  2 +-
 .../config/backup/dialogs/dialog-backup-onboarding.ts  |  2 +-
 .../dialogs/dialog-change-backup-encryption-key.ts     |  2 +-
 .../backup/dialogs/dialog-set-backup-encryption-key.ts |  2 +-
 .../dialogs/dialog-show-backup-encryption-key.ts       |  2 +-
 .../matter/dialog-matter-open-commissioning-window.ts  |  2 +-
 .../zwave_js/add-node/zwave-js-add-node-code-input.ts  |  2 +-
 .../template/developer-tools-template.ts               |  2 +-
 src/resources/codemirror.ts                            |  2 +-
 src/resources/theme/typography.globals.ts              | 10 +++++++++-
 19 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/hassio/src/entrypoint.ts b/hassio/src/entrypoint.ts
index 7efede19d2..d26b78f19e 100644
--- a/hassio/src/entrypoint.ts
+++ b/hassio/src/entrypoint.ts
@@ -1,3 +1,4 @@
+import { haFontFamilyBody } from "../../src/resources/theme/typography.globals";
 import "./hassio-main";
 
 import("../../src/resources/append-ha-style");
@@ -5,7 +6,7 @@ import("../../src/resources/append-ha-style");
 const styleEl = document.createElement("style");
 styleEl.textContent = `
 body {
-  font-family: Roboto, sans-serif;
+  font-family: ${haFontFamilyBody};
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-weight: 400;
diff --git a/src/components/chips/ha-assist-chip.ts b/src/components/chips/ha-assist-chip.ts
index 2775264aa4..275d2a7d20 100644
--- a/src/components/chips/ha-assist-chip.ts
+++ b/src/components/chips/ha-assist-chip.ts
@@ -60,7 +60,7 @@ export class HaAssistChip extends AssistChip {
         opacity: var(--ha-assist-chip-active-container-opacity);
       }
       .label {
-        font-family: Roboto, sans-serif;
+        font-family: var(--ha-font-family-body);
       }
     `,
   ];
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index 66d7a3ba60..100496a858 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -928,7 +928,7 @@ export class HaDataTable extends LitElement {
           height: 100%;
         }
         .mdc-data-table__content {
-          font-family: Roboto, sans-serif;
+          font-family: var(--ha-font-family-body);
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
           font-size: 0.875rem;
@@ -1048,7 +1048,7 @@ export class HaDataTable extends LitElement {
         }
 
         .mdc-data-table__cell {
-          font-family: Roboto, sans-serif;
+          font-family: var(--ha-font-family-body);
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
           font-size: 0.875rem;
@@ -1170,7 +1170,7 @@ export class HaDataTable extends LitElement {
         }
 
         .mdc-data-table__header-cell {
-          font-family: Roboto, sans-serif;
+          font-family: var(--ha-font-family-body);
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
           font-size: 0.875rem;
diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index bc873e499b..0839cf05c3 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -385,7 +385,7 @@ export class HaBaseTimeInput extends LitElement {
       -webkit-font-smoothing: antialiased;
       font-family: var(
         --mdc-typography-body2-font-family,
-        var(--mdc-typography-font-family, Roboto, sans-serif)
+        var(--mdc-typography-font-family, var(--ha-font-family-body))
       );
       font-size: var(--mdc-typography-body2-font-size, 0.875rem);
       line-height: var(--mdc-typography-body2-line-height, 1.25rem);
diff --git a/src/components/ha-control-button.ts b/src/components/ha-control-button.ts
index f680c23a5b..c07898fa70 100644
--- a/src/components/ha-control-button.ts
+++ b/src/components/ha-control-button.ts
@@ -58,7 +58,7 @@ export class HaControlButton extends LitElement {
       padding: var(--control-button-padding);
       box-sizing: border-box;
       line-height: inherit;
-      font-family: Roboto;
+      font-family: var(--ha-font-family-body);
       font-weight: 500;
       outline: none;
       overflow: hidden;
diff --git a/src/components/ha-outlined-text-field.ts b/src/components/ha-outlined-text-field.ts
index e50357cfb4..194b48659d 100644
--- a/src/components/ha-outlined-text-field.ts
+++ b/src/components/ha-outlined-text-field.ts
@@ -37,7 +37,7 @@ export class HaOutlinedTextField extends OutlinedTextField {
         --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
       }
       .input {
-        font-family: Roboto, sans-serif;
+        font-family: var(--ha-font-family-body);
       }
     `,
   ];
diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts
index 1f9770a1e7..9d0adcbc86 100644
--- a/src/components/ha-settings-row.ts
+++ b/src/components/ha-settings-row.ts
@@ -66,7 +66,7 @@ export class HaSettingsRow extends LitElement {
       padding-top: 4px;
       font-family: var(
         --mdc-typography-body2-font-family,
-        var(--mdc-typography-font-family, Roboto, sans-serif)
+        var(--mdc-typography-font-family, var(--ha-font-family-body))
       );
       -webkit-font-smoothing: antialiased;
       font-size: var(--mdc-typography-body2-font-size, 0.875rem);
diff --git a/src/dialogs/config-flow/styles.ts b/src/dialogs/config-flow/styles.ts
index 0e2aca3e7b..30a5dd46de 100644
--- a/src/dialogs/config-flow/styles.ts
+++ b/src/dialogs/config-flow/styles.ts
@@ -12,7 +12,7 @@ export const configFlowContentStyles = css`
     -webkit-font-smoothing: antialiased;
     font-family: var(
       --mdc-typography-headline6-font-family,
-      var(--mdc-typography-font-family, Roboto, sans-serif)
+      var(--mdc-typography-font-family, var(--ha-font-family-body))
     );
     font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
     line-height: var(--mdc-typography-headline6-line-height, 2rem);
diff --git a/src/html/_style_base.html.template b/src/html/_style_base.html.template
index ca503868fe..8e075daaf3 100644
--- a/src/html/_style_base.html.template
+++ b/src/html/_style_base.html.template
@@ -1,7 +1,7 @@
 <meta name="viewport" content="width=device-width, user-scalable=no, viewport-fit=cover, initial-scale=1">
 <style>
   body {
-    font-family: Roboto, Noto, Noto Sans, sans-serif;
+    font-family: Roboto, Noto, sans-serif;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     font-weight: 400;
diff --git a/src/onboarding/onboarding-location.ts b/src/onboarding/onboarding-location.ts
index 58311b910e..a8d8c585a5 100644
--- a/src/onboarding/onboarding-location.ts
+++ b/src/onboarding/onboarding-location.ts
@@ -526,7 +526,7 @@ class OnboardingLocation extends LitElement {
           color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
           font-family: var(
             --mdc-typography-caption-font-family,
-            var(--mdc-typography-font-family, Roboto, sans-serif)
+            var(--mdc-typography-font-family, var(--ha-font-family-body))
           );
           font-size: var(--mdc-typography-caption-font-size, 0.75rem);
           font-weight: var(--mdc-typography-caption-font-weight, 400);
diff --git a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
index 6b4e51fe06..430b7dcc6a 100644
--- a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
+++ b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
@@ -579,7 +579,7 @@ class DialogBackupOnboarding extends LitElement implements HassDialog {
         .encryption-key p {
           margin: 0;
           flex: 1;
-          font-family: "Roboto Mono", "Consolas", "Menlo", monospace;
+          font-family: var(--ha-font-family-code);
           font-size: 20px;
           font-style: normal;
           font-weight: 400;
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 f8e7ee2f70..e7dc3cb5cf 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
@@ -313,7 +313,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
         .encryption-key p {
           margin: 0;
           flex: 1;
-          font-family: "Roboto Mono", "Consolas", "Menlo", monospace;
+          font-family: var(--ha-font-family-code);
           font-size: 20px;
           font-style: normal;
           font-weight: 400;
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 748e8cc325..ff42d9f8a7 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
@@ -231,7 +231,7 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog {
         .encryption-key p {
           margin: 0;
           flex: 1;
-          font-family: "Roboto Mono", "Consolas", "Menlo", monospace;
+          font-family: var(--ha-font-family-code);
           font-size: 20px;
           font-style: normal;
           font-weight: 400;
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 15bb07096c..5338314559 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
@@ -153,7 +153,7 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
         .encryption-key p {
           margin: 0;
           flex: 1;
-          font-family: "Roboto Mono", "Consolas", "Menlo", monospace;
+          font-family: var(--ha-font-family-code);
           font-size: 20px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts
index 72808746d7..e687259c2f 100644
--- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts
+++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts
@@ -256,7 +256,7 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
         }
 
         .code {
-          font-family: monospace;
+          font-family: var(--ha-font-family-code);
         }
 
         .note {
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-code-input.ts b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-code-input.ts
index ed91ba56bf..3b26d00f55 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-code-input.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-code-input.ts
@@ -80,7 +80,7 @@ export class ZWaveJsAddNodeCodeInput extends LitElement {
       margin-bottom: 16px;
     }
     div {
-      font-family: "Roboto Mono", "Consolas", "Menlo", monospace;
+      font-family: var(--ha-font-family-code);
       margin-top: 16px;
     }
     div span {
diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index dc9fc7b6e5..143a72215e 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -322,7 +322,7 @@ ${type === "object"
         }
 
         .rendered {
-          font-family: "Roboto Mono", "Consolas", "Menlo", monospace;
+          font-family: var(--ha-font-family-code);
           -webkit-font-smoothing: antialiased;
           clear: both;
           white-space: pre-wrap;
diff --git a/src/resources/codemirror.ts b/src/resources/codemirror.ts
index 89c5330120..0999859c22 100644
--- a/src/resources/codemirror.ts
+++ b/src/resources/codemirror.ts
@@ -106,7 +106,7 @@ export const haTheme = EditorView.theme({
     background: "none",
     color: "var(--primary-color)",
     fontFamily:
-      "var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif))",
+      "var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, var(--ha-font-family-body)))",
     fontSize: "var(--mdc-typography-button-font-size, 0.875rem)",
     height: "36px",
     fontWeight: "var(--mdc-typography-button-font-weight, 500)",
diff --git a/src/resources/theme/typography.globals.ts b/src/resources/theme/typography.globals.ts
index 11b790aac1..6ee986ffb1 100644
--- a/src/resources/theme/typography.globals.ts
+++ b/src/resources/theme/typography.globals.ts
@@ -1,5 +1,8 @@
 import { css } from "lit";
-import { extractDerivedVars } from "../../common/style/derived-css-vars";
+import {
+  extractDerivedVars,
+  extractVar,
+} from "../../common/style/derived-css-vars";
 
 export const typographyStyles = css`
   html {
@@ -38,3 +41,8 @@ export const typographyStyles = css`
 `;
 
 export const typographyDerivedVariables = extractDerivedVars(typographyStyles);
+
+export const haFontFamilyBody = extractVar(
+  typographyStyles,
+  "font-family-body"
+);