Use ha-font-smoothing typography css tokens (#25364)

hassio/src/entrypoint.ts

@@ -1,4 +1,8 @@
-import { haFontFamilyBody } from "../../src/resources/theme/typography.globals";
+import {
+  haFontFamilyBody,
+  haFontSmoothing,
+  haMozOsxFontSmoothing,
+} from "../../src/resources/theme/typography.globals";
 import "./hassio-main";
 
 import("../../src/resources/append-ha-style");
@@ -7,8 +11,8 @@ const styleEl = document.createElement("style");
 styleEl.textContent = `
 body {
   font-family: ${haFontFamilyBody};
-  -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: ${haMozOsxFontSmoothing};
-  -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: ${haFontSmoothing};
   font-weight: 400;
   margin: 0;
   padding: 0;

hassio/src/resources/hassio-style.ts

@@ -14,6 +14,7 @@ export const hassioStyle = css`
     margin-bottom: 8px;
     font-family: var(--ha-font-family-body);
     -webkit-font-smoothing: var(--ha-font-smoothing);
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
     font-size: var(--ha-font-size-2xl);
     font-weight: var(--ha-font-weight-normal);
     line-height: var(--ha-line-height-condensed);

src/components/data-table/ha-data-table.ts

@@ -929,8 +929,8 @@ export class HaDataTable extends LitElement {
         }
         .mdc-data-table__content {
           font-family: var(--ha-font-family-body);
-          -moz-osx-font-smoothing: grayscale;
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-          -webkit-font-smoothing: antialiased;
+          -webkit-font-smoothing: var(--ha-font-smoothing);
           font-size: 0.875rem;
           line-height: 1.25rem;
           font-weight: 400;
@@ -1049,8 +1049,8 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__cell {
           font-family: var(--ha-font-family-body);
-          -moz-osx-font-smoothing: grayscale;
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-          -webkit-font-smoothing: antialiased;
+          -webkit-font-smoothing: var(--ha-font-smoothing);
           font-size: 0.875rem;
           line-height: 1.25rem;
           font-weight: 400;
@@ -1171,8 +1171,8 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__header-cell {
           font-family: var(--ha-font-family-body);
-          -moz-osx-font-smoothing: grayscale;
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-          -webkit-font-smoothing: antialiased;
+          -webkit-font-smoothing: var(--ha-font-smoothing);
           font-size: 0.875rem;
           line-height: 1.375rem;
           font-weight: 500;

src/components/ha-base-time-input.ts

@@ -381,8 +381,8 @@ export class HaBaseTimeInput extends LitElement {
       border-bottom-width: 1px;
     }
     label {
-      -moz-osx-font-smoothing: grayscale;
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-      -webkit-font-smoothing: antialiased;
+      -webkit-font-smoothing: var(--ha-font-smoothing);
       font-family: var(
         --mdc-typography-body2-font-family,
         var(--mdc-typography-font-family, var(--ha-font-family-body))

src/components/ha-settings-row.ts

@@ -68,7 +68,8 @@ export class HaSettingsRow extends LitElement {
         --mdc-typography-body2-font-family,
         var(--mdc-typography-font-family, var(--ha-font-family-body))
       );
-      -webkit-font-smoothing: antialiased;
+      -webkit-font-smoothing: var(--ha-font-smoothing);
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
       font-size: var(--mdc-typography-body2-font-size, 0.875rem);
       font-weight: var(--mdc-typography-body2-font-weight, 400);
       line-height: normal;

src/dialogs/config-flow/styles.ts

@@ -8,8 +8,8 @@ export const configFlowContentStyles = css`
     padding: 0 24px;
     padding-inline-start: 24px;
     padding-inline-end: 24px;
-    -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-    -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: var(--ha-font-smoothing);
     font-family: var(
       --mdc-typography-headline6-font-family,
       var(--mdc-typography-font-family, var(--ha-font-family-body))

src/dialogs/notifications/notification-item-template.ts

@@ -27,6 +27,7 @@ export class HuiNotificationItemTemplate extends LitElement {
     ha-card .header {
       font-family: var(--ha-font-family-body);
       -webkit-font-smoothing: var(--ha-font-smoothing);
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
       font-size: var(--ha-font-size-2xl);
       font-weight: var(--ha-font-weight-normal);
       line-height: var(--ha-line-height-condensed);

src/panels/config/devices/ha-config-device-page.ts

@@ -1543,6 +1543,7 @@ export class HaConfigDevicePage extends LitElement {
           margin: 0;
           font-family: var(--ha-font-family-body);
           -webkit-font-smoothing: var(--ha-font-smoothing);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
           font-size: var(--ha-font-size-2xl);
           font-weight: var(--ha-font-weight-normal);
           line-height: var(--ha-line-height-condensed);

src/panels/config/ha-config-section.ts

@@ -63,6 +63,7 @@ export class HaConfigSection extends LitElement {
     .header {
       font-family: var(--ha-font-family-body);
       -webkit-font-smoothing: var(--ha-font-smoothing);
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
       font-size: var(--ha-font-size-2xl);
       font-weight: var(--ha-font-weight-normal);
       line-height: var(--ha-line-height-condensed);
@@ -76,6 +77,7 @@ export class HaConfigSection extends LitElement {
     .intro {
       font-family: var(--ha-font-family-body);
       -webkit-font-smoothing: var(--ha-font-smoothing);
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
       font-weight: var(--ha-font-weight-normal);
       line-height: var(--ha-line-height-normal);
       width: 100%;

src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts

@@ -168,6 +168,7 @@ export class ZHAAddGroupPage extends LitElement {
         .header {
           font-family: var(--ha-font-family-body);
           -webkit-font-smoothing: var(--ha-font-smoothing);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
           font-size: var(--ha-font-size-4xl);
           font-weight: var(--ha-font-weight-normal);
           line-height: var(--ha-line-height-condensed);

src/panels/config/integrations/integration-panels/zha/zha-group-page.ts

@@ -295,6 +295,7 @@ export class ZHAGroupPage extends LitElement {
         .header {
           font-family: var(--ha-font-family-body);
           -webkit-font-smoothing: var(--ha-font-smoothing);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
           font-size: var(--ha-font-size-4xl);
           font-weight: var(--ha-font-weight-normal);
           line-height: var(--ha-line-height-condensed);

src/panels/config/voice-assistants/dialog-expose-entity.ts

@@ -196,7 +196,8 @@ class DialogExposeEntity extends LitElement {
         .header {
           margin: 0;
           pointer-events: auto;
-          -webkit-font-smoothing: antialiased;
+          -webkit-font-smoothing: var(--ha-font-smoothing);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
           font-weight: inherit;
           font-size: inherit;
           box-sizing: border-box;

src/panels/developer-tools/template/developer-tools-template.ts

@@ -323,7 +323,8 @@ ${type === "object"
 
         .rendered {
           font-family: var(--ha-font-family-code);
-          -webkit-font-smoothing: antialiased;
+          -webkit-font-smoothing: var(--ha-font-smoothing);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
           clear: both;
           white-space: pre-wrap;
           background-color: var(--secondary-background-color);

src/panels/lovelace/cards/hui-plant-status-card.ts

@@ -180,6 +180,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
     .header {
       font-family: var(--ha-font-family-body);
       -webkit-font-smoothing: var(--ha-font-smoothing);
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
       font-size: var(--ha-font-size-2xl);
       font-weight: var(--ha-font-weight-normal);
       line-height: var(--ha-line-height-condensed);

src/resources/styles.ts

@@ -18,6 +18,7 @@ export const haStyle = css`
   :host {
     font-family: var(--ha-font-family-body);
     -webkit-font-smoothing: var(--ha-font-smoothing);
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
     font-size: var(--ha-font-size-m);
     font-weight: var(--ha-font-weight-normal);
     line-height: var(--ha-line-height-normal);
@@ -36,6 +37,7 @@ export const haStyle = css`
   h1 {
     font-family: var(--ha-font-family-heading);
     -webkit-font-smoothing: var(--ha-font-smoothing);
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
     font-size: var(--ha-font-size-2xl);
     font-weight: var(--ha-font-weight-normal);
     line-height: var(--ha-line-height-condensed);
@@ -44,6 +46,7 @@ export const haStyle = css`
   h2 {
     font-family: var(--ha-font-family-body);
     -webkit-font-smoothing: var(--ha-font-smoothing);
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -55,6 +58,7 @@ export const haStyle = css`
   h3 {
     font-family: var(--ha-font-family-body);
     -webkit-font-smoothing: var(--ha-font-smoothing);
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
     font-size: var(--ha-font-size-l);
     font-weight: var(--ha-font-weight-normal);
     line-height: var(--ha-line-height-normal);

src/resources/theme/typography.globals.ts

@@ -37,6 +37,7 @@ export const typographyStyles = css`
     --ha-line-height-expanded: 2;
 
     --ha-font-smoothing: antialiased;
+    --ha-moz-osx-font-smoothing: grayscale;
   }
 `;
 
@@ -44,5 +45,15 @@ export const typographyDerivedVariables = extractDerivedVars(typographyStyles);
 
 export const haFontFamilyBody = extractVar(
   typographyStyles,
-  "font-family-body"
+  "ha-font-family-body"
+);
+
+export const haFontSmoothing = extractVar(
+  typographyStyles,
+  "ha-font-smoothing"
+);
+
+export const haMozOsxFontSmoothing = extractVar(
+  typographyStyles,
+  "ha-moz-osx-font-smoothing"
 );