fix(material-experimental/mdc-typography): update incorrect levels

Note: card, dialog, and form-field still don't look right according to
the spec. While they're now using the correct font level, the levels for
body1 and body2 themselves do not match the spec. This will be addressed
in a followup PR.

Author: mmalerba

src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss

@@ -1,5 +1,6 @@
 @import '@material/menu-surface/mixins.import';
 @import '@material/list/mixins.import';
+@import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @mixin mat-mdc-autocomplete-color($config-or-theme) {
@@ -19,6 +20,12 @@
       // Note that we include this private mixin, because the public one adds
       // a bunch of styles that we aren't using for the autocomplete panel.
       @include mdc-list-base_($mat-typography-styles-query);
+
+      // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
+      // level.
+      .mat-mdc-option {
+        @include mdc-typography(body1, $query: $mat-typography-styles-query);
+      }
     }
   }
 }

src/material-experimental/mdc-form-field/_form-field-sizing.scss

@@ -36,11 +36,11 @@ $mat-form-field-input-box-vertical-offset: 1px;
 // spacing as provided by the Material Design specification. The outlined dimensions in the
 // spec section do not match with the text fields shown in the overview or the ones implemented
 // by MDC. Note that we need to account for the input box offset. See above for more context.
-$mat-form-field-with-label-input-padding-top: 28px - $mat-form-field-input-box-vertical-offset;
-$mat-form-field-with-label-input-padding-bottom: 12px - $mat-form-field-input-box-vertical-offset;
+$mat-form-field-with-label-input-padding-top: 24px - $mat-form-field-input-box-vertical-offset;
+$mat-form-field-with-label-input-padding-bottom: 8px - $mat-form-field-input-box-vertical-offset;
 
 // Vertical spacing of the text-field if there is no label. We manually measure the
 // spacing in the specs. See comment above for padding for text fields with label. The
 // same reasoning applies to the padding for text fields without label.
-$mat-form-field-no-label-padding-bottom: 20px - $mat-form-field-input-box-vertical-offset;
-$mat-form-field-no-label-padding-top: 20px - $mat-form-field-input-box-vertical-offset;
+$mat-form-field-no-label-padding-bottom: 16px - $mat-form-field-input-box-vertical-offset;
+$mat-form-field-no-label-padding-top: 16px - $mat-form-field-input-box-vertical-offset;

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

@@ -4,6 +4,7 @@
 @import '@material/theme/variables.import';
 @import '@material/textfield/mixins.import';
 @import '@material/textfield/variables.import';
+@import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import 'form-field-density';
 @import 'form-field-subscript';
@@ -22,8 +23,8 @@
 
   .mdc-text-field--focused {
     @include mdc-text-field-focused_($query);
-
   }
+
   .mdc-text-field--invalid {
     @include mdc-text-field-invalid_($query);
   }
@@ -67,8 +68,13 @@
     @include mdc-line-ripple-core-styles($query: $mat-typography-styles-query);
     @include mat-mdc-private-form-field-subscript-typography($config);
 
-    .mat-mdc-form-field {
-      @include mat-typography-level-to-styles($config, input);
+    // MDC uses the `subtitle1` level for the input label and value, but the spec shows `body1` as
+    // the correct level.
+    .mat-mdc-input-element,
+    .mat-mdc-form-field label,
+    .mat-mdc-form-field-prefix,
+    .mat-mdc-form-field-suffix {
+      @include mdc-typography(body1, $query: $mat-typography-styles-query);
     }
   }
 }

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

@@ -9,15 +9,18 @@
 @mixin mat-mdc-private-text-field-structure-overrides() {
   // 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 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).
+  // bottom-line to span across the whole form-field (including prefixes and suffixes).
   .mat-mdc-input-element {
-    font: inherit;
     border: none;
   }
 
+  // In order to ensure proper alignment of the floating label, we reset its line-height.
+  // The line-height is not important as the element is absolutely positioned and only has one line
+  // of text.
+  .mat-mdc-form-field .mdc-floating-label {
+    line-height: normal;
+  }
+
   // Reset the height that MDC sets on native input elements. We cannot rely on their
   // fixed height as we handle vertical spacing differently. MDC sets a fixed height for
   // inputs and modifies the baseline so that the textfield matches the spec. This does

src/material-experimental/mdc-menu/_menu-theme.scss

@@ -4,6 +4,7 @@
 @import '@material/list/variables.import';
 @import '@material/theme/functions.import';
 @import '@material/theme/mixins.import';
+@import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @mixin mat-mdc-menu-color($config-or-theme) {
@@ -47,10 +48,16 @@
   @include mat-using-mdc-typography($config) {
     @include mdc-menu-surface-core-styles($mat-typography-styles-query);
 
-    .mat-mdc-menu-content, .mat-mdc-menu-item {
+    .mat-mdc-menu-content {
       // Note that we include this private mixin, because the public
       // one adds a bunch of styles that we aren't using for the menu.
       @include mdc-list-base_($mat-typography-styles-query);
+
+      // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
+      // level.
+      .mat-mdc-menu-item {
+        @include mdc-typography(body1, $query: $mat-typography-styles-query);
+      }
     }
   }
 }

src/material-experimental/mdc-select/_select-theme.scss

@@ -2,6 +2,7 @@
 @import '@material/list/mixins.import';
 @import '@material/theme/variables.import';
 @import '@material/select/variables.import';
+@import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 
 // Gets the color to use for some text that is highlighted while a select has focus.
@@ -88,6 +89,12 @@
       // Note that we include this private mixin, because the public one adds
       // a bunch of styles that we aren't using for the select panel.
       @include mdc-list-base_($mat-typography-styles-query);
+
+      // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
+      // level.
+      .mat-mdc-option {
+        @include mdc-typography(body1, $query: $mat-typography-styles-query);
+      }
     }
   }
 }