Use ha-font-family typography css token (#25355)

Use ha-font-family
2025-07-27 03:06:41 +00:00 · 2025-05-07 16:38:07 +02:00 · 2025-05-07 16:38:07 +02:00 · 03ccf014d9
commit 03ccf014d9
parent ab41bdb87d
19 changed files with 30 additions and 21 deletions
--- 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;
--- 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);
      }
    `,
  ];
--- 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;
--- 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);
--- 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;
--- 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);
      }
    `,
  ];
--- 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);
--- 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);
--- 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;
--- 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);
--- 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;
--- 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;
--- 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;
--- 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;
--- 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 {
--- 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 {
--- 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;
--- 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)",
--- 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"
+);