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

Author: mmalerba

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

@@ -2,6 +2,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';
 @import '../../../material/core/theming/theming';
 
@@ -43,6 +44,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-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-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);
+    }
   }
 }