refactor(material/form-field): switch custom typography styles to tokens (#27590)

Switches our custom typography styles on top of MDC to use tokens.

(cherry picked from commit c0b3aa5)

Author: crisbeto

src/material/core/tokens/m2/mat/_form-field.scss

@@ -3,6 +3,7 @@
 @use '../../../style/sass-utils';
 @use '../../../theming/theming';
 @use '../../../theming/palette';
+@use '../../../typography/typography-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, form-field);
@@ -57,7 +58,34 @@ $prefix: (mat, form-field);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($config) {
-  @return ();
+  $fallback-font-family: typography-utils.font-family($config);
+
+  @return (
+    // MDC uses `subtitle1` for the input value, placeholder and floating label. The spec
+    // shows `body1` for text fields though, so we manually override the typography.
+    // Note: Form controls inherit the typography from the parent form field.
+    container-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
+    container-text-line-height: typography-utils.line-height($config, body-1),
+    container-text-size: typography-utils.font-size($config, body-1),
+    container-text-tracking: typography-utils.letter-spacing($config, body-1),
+    container-text-weight: typography-utils.font-weight($config, body-1),
+
+    // In the container styles, we updated the floating label to use the `body-1` typography level.
+    // The MDC notched outline overrides this accidentally (only when the label floats) to a
+    // `rem`-based value. This results in different label widths when floated/docked and ultimately
+    // breaks the notch width as it has been measured in the docked state (where `body-1` is
+    // applied). We try to unset these styles set by the `mdc-notched-outline`:
+    // https://github.com/material-components/material-components-web/blob/master/packages/mdc-notched-outline/_mixins.scss#L272-L292.
+    // This is why we can't use their `label-text-populated-size` token and we have to declare
+    // our own version of it.
+    outlined-label-text-populated-size: typography-utils.font-size($config, body-1),
+
+    subscript-text-font: typography-utils.font-family($config, caption) or $fallback-font-family,
+    subscript-text-line-height: typography-utils.line-height($config, caption),
+    subscript-text-size: typography-utils.font-size($config, caption),
+    subscript-text-tracking: typography-utils.letter-spacing($config, caption),
+    subscript-text-weight: typography-utils.font-weight($config, caption),
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

src/material/core/tokens/m2/mdc/_filled-text-field.scss

@@ -88,6 +88,7 @@ $prefix: (mdc, filled-text-field);
     error-hover-state-layer-opacity: null,
     hover-state-layer-color: null,
     hover-state-layer-opacity: null,
+    label-text-line-height: null, // We override the line height to `normal` so don't emit a slot.
   );
 }
 
@@ -151,7 +152,6 @@ $prefix: (mdc, filled-text-field);
 
   @return (
     label-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
-    label-text-line-height: typography-utils.line-height($config, body-1),
     label-text-size: typography-utils.font-size($config, body-1),
     label-text-tracking: typography-utils.letter-spacing($config, body-1),
     label-text-weight: typography-utils.font-weight($config, body-1),

src/material/core/tokens/m2/mdc/_outlined-text-field.scss

@@ -82,6 +82,7 @@ $prefix: (mdc, outlined-text-field);
     error-input-text-color: null,
     focus-input-text-color: null,
     hover-input-text-color: null,
+    label-text-line-height: null, // We override the line height to `normal` so don't emit a slot.
   );
 }
 
@@ -134,7 +135,6 @@ $prefix: (mdc, outlined-text-field);
 
   @return (
     label-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
-    label-text-line-height: typography-utils.line-height($config, body-1),
     label-text-size: typography-utils.font-size($config, body-1),
     label-text-tracking: typography-utils.letter-spacing($config, body-1),
     label-text-weight: typography-utils.font-weight($config, body-1),

src/material/form-field/_form-field-subscript.scss

@@ -3,8 +3,6 @@
 
 @use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
 @use '../core/tokens/token-utils';
-@use '../core/theming/theming';
-@use '../core/mdc-helpers/mdc-helpers';
 @use './form-field-sizing';
 
 @mixin private-form-field-subscript() {
@@ -59,22 +57,24 @@
   .mat-mdc-form-field-error {
     display: block;
 
-    @include token-utils.use-tokens(
-      tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()) {
+    @include token-utils.use-tokens(tokens-mat-form-field.$prefix,
+      tokens-mat-form-field.get-token-slots()) {
       @include token-utils.create-token-slot(color, error-text-color);
     }
   }
-}
-
-// We need to define our own typography for the subscript because we don't include MDC's
-// helper text in our MDC based form field
-@mixin private-form-field-subscript-typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
 
   // The subscript wrapper has a minimum height to avoid that the form-field
   // jumps when hints or errors are displayed.
   .mat-mdc-form-field-subscript-wrapper,
   .mat-mdc-form-field-bottom-align::before {
-    @include mdc-typography.typography(caption, $query: mdc-helpers.$mdc-typography-styles-query);
+    @include token-utils.use-tokens(tokens-mat-form-field.$prefix,
+      tokens-mat-form-field.get-token-slots()) {
+      @include mdc-typography.smooth-font();
+      @include token-utils.create-token-slot(font-family, subscript-text-font);
+      @include token-utils.create-token-slot(line-height, subscript-text-line-height);
+      @include token-utils.create-token-slot(font-size, subscript-text-size);
+      @include token-utils.create-token-slot(letter-spacing, subscript-text-tracking);
+      @include token-utils.create-token-slot(font-weight, subscript-text-weight);
+    }
   }
 }

src/material/form-field/_form-field-theme.scss

@@ -1,17 +1,14 @@
 @use '@material/textfield/filled-text-field-theme' as mdc-filled-text-field-theme;
 @use '@material/textfield/outlined-text-field-theme' as mdc-outlined-text-field-theme;
-@use '@material/typography/typography' as mdc-typography;
 
 @use '../core/tokens/m2/mdc/filled-text-field' as tokens-mdc-filled-text-field;
 @use '../core/tokens/m2/mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
 @use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
 @use '../core/theming/theming';
 @use '../core/typography/typography';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use './form-field-density';
-@use './form-field-subscript';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
@@ -53,36 +50,8 @@
       tokens-mdc-filled-text-field.get-typography-tokens($config));
     @include mdc-outlined-text-field-theme.theme(
       tokens-mdc-outlined-text-field.get-typography-tokens($config));
-  }
-
-  @include mdc-helpers.using-mdc-typography($config) {
-    @include form-field-subscript.private-form-field-subscript-typography($config);
-
-    // MDC uses `subtitle1` for the input value, placeholder and floating label. The spec
-    // shows `body1` for text fields though, so we manually override the typography.
-    // Note: Form controls inherit the typography from the parent form field.
-    .mat-mdc-form-field {
-      @include mdc-typography.typography(body1, $query: mdc-helpers.$mdc-typography-styles-query);
-    }
-
-    // TODO(crisbeto): we may be able to set this style with the `label-text-populated-size` token.
-    // Above, we updated the floating label to use the `body1` typography level. The MDC notched
-    // outline overrides this accidentally (only when the label floats) to a `rem`-based value.
-    // This results in different label widths when floated/docked and ultimately breaks the notch
-    // width as it has been measured in the docked state (where `body1` is applied). We try to
-    // unset these styles set by the `mdc-notched-outline`:
-    // https://github.com/material-components/material-components-web/blob/master/packages/mdc-notched-outline/_mixins.scss#L272-L292.
-    .mat-mdc-form-field .mdc-text-field--outlined {
-      // For the non-upgraded notch label (i.e. when rendered on the server), also
-      // use the correct `body1` typography level.
-      .mdc-floating-label--float-above {
-        font-size: calc(#{
-            mdc-typography.get-size(body1)} * var(--mat-mdc-form-field-floating-label-scale, 0.75));
-      }
-      .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-        font-size: mdc-typography.get-size(body1);
-      }
-    }
+    @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
+      tokens-mat-form-field.get-typography-tokens($config));
   }
 }
 

src/material/form-field/form-field.scss

@@ -8,6 +8,7 @@
 @use '@material/line-ripple/line-ripple' as mdc-line-ripple;
 @use '@material/line-ripple/line-ripple-theme' as mdc-line-ripple-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
+@use '@material/typography' as mdc-typography;
 @use '../core/tokens/token-utils';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/vendor-prefixes';
@@ -95,6 +96,30 @@
   [dir='rtl'] & {
     text-align: right;
   }
+
+  @include token-utils.use-tokens(tokens-mat-form-field.$prefix,
+    tokens-mat-form-field.get-token-slots()) {
+    @include mdc-typography.smooth-font();
+    @include token-utils.create-token-slot(font-family, container-text-font);
+    @include token-utils.create-token-slot(line-height, container-text-line-height);
+    @include token-utils.create-token-slot(font-size, container-text-size);
+    @include token-utils.create-token-slot(letter-spacing, container-text-tracking);
+    @include token-utils.create-token-slot(font-weight, container-text-weight);
+
+    .mdc-text-field--outlined {
+      $token-value: var(#{token-utils.get-token-variable(outlined-label-text-populated-size)});
+
+      // For the non-upgraded notch label (i.e. when rendered on the server), also
+      // use the correct typography.
+      .mdc-floating-label--float-above {
+        font-size: calc(#{$token-value} * var(--mat-mdc-form-field-floating-label-scale));
+      }
+
+      .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+        font-size: $token-value;
+      }
+    }
+  }
 }
 
 // Container that contains the prefixes, infix and suffixes. These elements should