refactor(material/theming): normalize config in all typography mixins

for mdc components

This is split off of angular#21778 which covers non-MDC conmponents as well

src/dev-app/theme.scss

@@ -15,52 +15,42 @@
 
 // Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// **Be sure that you only ever include this mixin once!**
-@include mat-core();
-@include angular-material-mdc-typography(mat-mdc-typography-config());
-@include mat-popover-edit-typography(mat-typography-config());
-
-// Include base styles for strong focus indicators.
-.demo-strong-focus {
-  @include mat-strong-focus-indicators();
-  @include mat-mdc-strong-focus-indicators();
-}
-
-// Define the default theme (same as the example above).
+// Define the default (light) theme.
 $candy-app-primary: mat-palette($mat-indigo);
 $candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
 $candy-app-theme: mat-light-theme((
-  color: (
-    primary: $candy-app-primary,
-    accent: $candy-app-accent
-  )
+    // Define the default colors for our app.
+    color: (
+        primary: $candy-app-primary,
+        accent: $candy-app-accent
+    ),
+    // Define the default typography for our app.
+    // TODO(mmalerba): Update to `mat-mdc-typography-config()` once non-MDC components can handle
+    //  2018 configs.
+    typography: mat-typography-config(),
+    // Define the default density level for our app.
+    density: 0,
 ));
 
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// **Be sure that you only ever include this mixin once!**
+@include mat-core($candy-app-theme);
+
 // Include the default theme styles.
 @include angular-material-theme($candy-app-theme);
 @include angular-material-mdc-theme($candy-app-theme);
 @include mat-column-resize-theme($candy-app-theme);
 @include mat-popover-edit-theme($candy-app-theme);
-
 // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
 @include mat-mdc-slider-theme($candy-app-theme);
 
-// Define an alternate dark theme.
-$dark-primary: mat-palette($mat-blue-grey);
-$dark-accent: mat-palette($mat-amber, A200, A100, A400);
-$dark-warn: mat-palette($mat-deep-orange);
-$dark-theme: mat-dark-theme((
-  color: (
-    primary: $dark-primary,
-    accent: $dark-accent,
-    warn: $dark-warn
-  )
-));
-
-// Include the default theme for focus indicators.
 .demo-strong-focus {
+  // Include base styles for strong focus indicators.
+  @include mat-strong-focus-indicators();
+  @include mat-mdc-strong-focus-indicators();
+
+  // Include the default theme for focus indicators.
   @include mat-strong-focus-indicators-theme($candy-app-theme);
   @include mat-mdc-strong-focus-indicators-theme($candy-app-theme);
 }
@@ -70,17 +60,25 @@ $dark-theme: mat-dark-theme((
 // `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
 // default theme.
 .demo-unicorn-dark-theme {
-  @include angular-material-color($dark-theme);
-  @include angular-material-mdc-color($dark-theme);
-  @include mat-column-resize-color($dark-theme);
-  @include mat-popover-edit-color($dark-theme);
-  @include mat-mdc-slider-color($dark-theme);
-}
+  // Create the color palettes used in our dark theme.
+  $dark-primary: mat-palette($mat-blue-grey);
+  $dark-accent: mat-palette($mat-amber, A200, A100, A400);
+  $dark-warn: mat-palette($mat-deep-orange);
+  $dark-colors: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
-// Include the dark theme for focus indicators.
-.demo-unicorn-dark-theme.demo-strong-focus {
-  @include mat-strong-focus-indicators-color($dark-theme);
-  @include mat-mdc-strong-focus-indicators-color($dark-theme);
+  // Include the dark theme color styles.
+  @include angular-material-color($dark-colors);
+  @include angular-material-mdc-color($dark-colors);
+  @include mat-column-resize-color($dark-colors);
+  @include mat-popover-edit-color($dark-colors);
+  // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
+  @include mat-mdc-slider-color($dark-colors);
+
+  // Include the dark theme colors for focus indicators.
+  .demo-strong-focus {
+    @include mat-strong-focus-indicators-color($dark-colors);
+    @include mat-mdc-strong-focus-indicators-color($dark-colors);
+  }
 }
 
 // Create classes for all density scales which are supported by all MDC-based components.

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

@@ -1,6 +1,7 @@
 @import '@material/menu-surface/mixins.import';
 @import '@material/list/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-autocomplete-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -11,7 +12,7 @@
 }
 
 @mixin mat-mdc-autocomplete-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-menu-surface-core-styles($mat-typography-styles-query);
 

src/material-experimental/mdc-button/_button-theme.scss

@@ -5,6 +5,7 @@
 @import '@material/icon-button/mixins.import';
 @import '@material/theme/mixins.import';
 @import '../../material/core/ripple/ripple';
+@import '../../material/core/typography/typography';
 @import '../mdc-helpers/mdc-helpers';
 
 // Selector for the element that has a background color and opacity applied to its ::before and
@@ -167,7 +168,7 @@ $mat-button-state-target: '.mdc-button__ripple';
 }
 
 @mixin mat-mdc-button-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-button-without-ripple($query: $mat-typography-styles-query);
   }
@@ -253,7 +254,7 @@ $mat-button-state-target: '.mdc-button__ripple';
 }
 
 @mixin mat-mdc-fab-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-fab-without-ripple($query: $mat-typography-styles-query);
   }
@@ -326,7 +327,7 @@ $mat-button-state-target: '.mdc-button__ripple';
 }
 
 @mixin mat-mdc-icon-button-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
   }

src/material-experimental/mdc-card/_card-theme.scss

@@ -3,6 +3,7 @@
 @import '@material/card/variables.import';
 @import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-card-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -32,7 +33,7 @@
 }
 
 @mixin mat-mdc-card-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-card-without-ripple($query: $mat-typography-styles-query);
 

src/material-experimental/mdc-checkbox/_checkbox-theme.scss

@@ -8,6 +8,7 @@
 @import '@material/ripple/variables.import';
 @import '@material/theme/functions.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 
 // Mixin that includes the checkbox theme styles with a given palette.
 // By default, the MDC checkbox always uses the `secondary` palette.
@@ -110,7 +111,7 @@
 }
 
 @mixin mat-mdc-checkbox-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-checkbox-without-ripple($query: $mat-typography-styles-query);
     @include mdc-form-field-core-styles($query: $mat-typography-styles-query);

src/material-experimental/mdc-chips/_chips-theme.scss

@@ -1,6 +1,7 @@
 @import '@material/chips/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import '@material/theme/functions.import';
+@import '../../material/core/typography/typography';
 
 @mixin _selected-color($color) {
   @include mdc-chip-fill-color($color, $query: $mat-theme-styles-query);
@@ -70,7 +71,7 @@
 }
 
 @mixin mat-mdc-chips-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mdc-chip-set-core-styles($query: $mat-typography-styles-query);
   @include mat-using-mdc-typography($config) {
     @include mdc-chip-without-ripple($query: $mat-typography-styles-query);

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

@@ -4,6 +4,8 @@
 @import '@material/theme/mixins.import';
 @import '../../mdc-helpers/mdc-helpers';
 @import '../../../material/core/theming/theming';
+@import '../../../material/core/typography/typography';
+
 
 @mixin mat-mdc-optgroup-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -20,7 +22,7 @@
 }
 
 @mixin mat-mdc-optgroup-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
 }
 
 @mixin mat-mdc-optgroup-density($config-or-theme) {

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

@@ -5,6 +5,7 @@
 @import '@material/typography/mixins.import';
 @import '../../mdc-helpers/mdc-helpers';
 @import '../../../material/core/theming/theming';
+@import '../../../material/core/typography/typography';
 
 @mixin mat-mdc-option-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -43,7 +44,7 @@
 }
 
 @mixin mat-mdc-option-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-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

src/material-experimental/mdc-dialog/_dialog-theme.scss

@@ -1,5 +1,6 @@
 @import '../mdc-helpers/mdc-helpers';
 @import '@material/dialog/mixins.import';
+@import '../../material/core/typography/typography';
 
 @mixin mat-mdc-dialog-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -9,7 +10,7 @@
 }
 
 @mixin mat-mdc-dialog-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-dialog-core-styles($query: $mat-typography-styles-query);
   }

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

@@ -6,6 +6,7 @@
 @import '@material/textfield/variables.import';
 @import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/typography/typography';
 @import 'form-field-density';
 @import 'form-field-subscript';
 @import 'form-field-focus-overlay';
@@ -60,7 +61,7 @@
 }
 
 @mixin mat-mdc-form-field-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
   @include mat-using-mdc-typography($config) {
     @include mdc-text-field-without-ripple($query: $mat-typography-styles-query);
     @include mdc-floating-label-core-styles($query: $mat-typography-styles-query);

src/material-experimental/mdc-helpers/_mdc-helpers.scss

@@ -17,84 +17,26 @@ $mat-base-styles-without-animation-query:
 $mat-theme-styles-query: color;
 $mat-typography-styles-query: typography;
 
-// Mappings between Angular Material and MDC's typography levels.
-// TODO: delete once all MDC components have migrated to using the 2018 mappings.
-$mat-typography-2014-level-mappings: (
-  mdc-to-mat: (
-    headline1: display-4,
-    headline2: display-3,
-    headline3: display-2,
-    headline4: display-1,
-    headline5: headline,
-    headline6: title,
-    subtitle1: subheading-2,
-    subtitle2: subheading-1,
-    body1: body-2,
-    body2: body-1,
+// Mappings from Angular Material's typography levels to MDC's typography levels.
+$mat-typography-mdc-level-mappings: (
+    headline-1: headline1,
+    headline-2: headline2,
+    headline-3: headline3,
+    headline-4: headline4,
+    headline-5: headline5,
+    headline-6: headline6,
+    subtitle-1: subtitle1,
+    subtitle-2: subtitle2,
+    body-1: body1,
+    body-2: body2,
     caption: caption,
     button: button,
-    overline: null
-  ),
-  mat-to-mdc: (
-    display-4: headline1,
-    display-3: headline2,
-    display-2: headline3,
-    display-1: headline4,
-    headline: headline5,
-    title: headline6,
-    subheading-2: subtitle1,
-    subheading-1: subtitle2,
-    body-2: body1,
-    body-1: body2,
-    caption: caption,
-    button: button,
-    input: null
-  )
-);
-
-// Mappings between Angular Material and MDC's typography levels.
-$mat-typography-2018-level-mappings: (
-    // Maps from MDC typography levels (e.g. body1) to Angular Material typography levels
-    // (e.g. body-1).
-    mdc-to-mat: (
-        headline1: headline-1,
-        headline2: headline-2,
-        headline3: headline-3,
-        headline4: headline-4,
-        headline5: headline-5,
-        headline6: headline-6,
-        subtitle1: subtitle-1,
-        subtitle2: subtitle-2,
-        body1: body-1,
-        body2: body-2,
-        caption: caption,
-        button: button,
-        overline: overline
-    ),
-    // Maps from Angular Material typography levels (e.g. body-1) to MDC typography levels
-    // (e.g. body1).
-    mat-to-mdc: (
-        headline-1: headline1,
-        headline-2: headline2,
-        headline-3: headline3,
-        headline-4: headline4,
-        headline-5: headline5,
-        headline-6: headline6,
-        subtitle-1: subtitle1,
-        subtitle-2: subtitle2,
-        body-1: body1,
-        body-2: body2,
-        caption: caption,
-        button: button,
-        overline: overline
-    )
+    overline: overline
 );
 
 // Converts an Angular Material typography level config to an MDC one.
 @function mat-typography-level-config-to-mdc($mat-config, $mat-level) {
-  $mappings: if(mat-private-typography-is-2018-config($mat-config),
-      $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings);
-  $mdc-level: map-get(map-get($mappings, mat-to-mdc), $mat-level);
+  $mdc-level: map-get($mat-typography-mdc-level-mappings, $mat-level);
 
   @return map-merge(
       if($mdc-level,
@@ -119,13 +61,10 @@ $mat-typography-2018-level-mappings: (
 }
 
 // Converts an Angular Material typography config to an MDC one.
-@function mat-typography-config-to-mdc($mat-config: mat-typography-config()) {
+@function mat-typography-config-to-mdc($mat-config) {
   $mdc-config: ();
 
-  $mappings: if(mat-private-typography-is-2018-config($mat-config),
-      $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings);
-
-  @each $mdc-level, $mat-level in map-get($mappings, mdc-to-mat) {
+  @each $mat-level, $mdc-level in $mat-typography-mdc-level-mappings {
     $mdc-config: map-merge(
         $mdc-config,
         ($mdc-level: mat-typography-level-config-to-mdc($mat-config, $mat-level)));