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

Use ha-font-family

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;

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);
       }
     `,
   ];

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;

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);

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;

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);
       }
     `,
   ];

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);

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);

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;

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);

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;

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;

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;

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;

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 {

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 {

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;

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)",

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"
+);