fix(material-experimental/mdc-form-field): setup typography styles fo…

…r form-fields (angular#18480)

Currently the MDC-based form-field does not have any typography styles.
MDC only sets typography styles on the inputs and textarea elements.
This won't work for our form-field since we support custom form-field
controls. To make this work, the input/textarea elements inherit the
font styles from parent elements, but we need to set up the typography
styles for the containing `mat-form-field` element.

src/material-experimental/mdc-form-field/_mdc-form-field.scss

@@ -59,5 +59,9 @@
     @include mdc-notched-outline-core-styles($query: $mat-typography-styles-query);
     @include mdc-line-ripple-core-styles($query: $mat-typography-styles-query);
     @include _mat-form-field-subscript-typography($config);
+
+    .mat-mdc-form-field {
+      @include mat-typography-level-to-styles($config, input);
+    }
   }
 }

src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss

@@ -18,10 +18,10 @@
 
   // Unset the border set by MDC. We move the border (which serves as the Material Design
   // text-field bottom line) into its own element. This is necessary because we want the
-  // bottom-line to span across the whole form-field (including prefixes and suffixes).
-  // Also we want to ensure that font styles are inherited for input elements. We want input
-  // text to align with surrounding text. Also font inheritance has been enabled in the non
-  // MDC-based implementation of the form-field too, so we need it for backwards compatibility.
+  // bottom-line to span across the whole form-field (including prefixes and suffixes). Also
+  // we ensure that font styles are inherited for input elements. We do this because inputs by
+  // default have explicit font styles from the user agent, and we set the desired font styles
+  // in the parent `mat-form-field` element (for better custom form-field control support).
   .mat-mdc-input-element {
     font: inherit;
     border: none;