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

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

src/material-experimental/mdc-core/option/_option-theme.scss

@@ -43,6 +43,14 @@
 
 @mixin mat-mdc-option-typography($config-or-theme) {
   $config: mat-get-typography-config($config-or-theme);
+
+  @include mat-using-mdc-typography($config) {
+    // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
+    // level. Class is repeated for increased specificity.
+    .mat-mdc-option {
+      @include mdc-typography(body1, $query: $mat-typography-styles-query);
+    }
+  }
 }
 
 @mixin mat-mdc-option-density($config-or-theme) {

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.
@@ -89,6 +90,10 @@
       // a bunch of styles that we aren't using for the select panel.
       @include mdc-list-base_($mat-typography-styles-query);
     }
+
+    .mat-mdc-select-value {
+      @include mdc-typography(body1, $query: $mat-typography-styles-query);
+    }
   }
 }