feat(material-experimental/mdc-typography): add a function to create

config from MDC

Author: mmalerba

src/dev-app/theme.scss

@@ -19,7 +19,7 @@
 // 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();
+@include angular-material-mdc-typography(mat-mdc-typography-config());
 @include mat-popover-edit-typography(mat-typography-config());
 
 // Include base styles for strong focus indicators.

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

@@ -136,12 +136,14 @@ $mat-typography-2018-level-mappings: (
 
 // Converts an MDC typography level config to an Angular Material one.
 @function mat-typography-config-level-from-mdc($mdc-level) {
+  $mdc-level-config: map-get($mdc-typography-styles, $mdc-level);
+
   @return mat-typography-level(
-      map-get($mdc-typography-styles, font-size),
-      map-get($mdc-typography-styles, line-height),
-      map-get($mdc-typography-styles, font-weight),
-      map-get($mdc-typography-styles, font-family),
-      map-get($mdc-typography-styles, letter-spacing));
+      map-get($mdc-level-config, font-size),
+      map-get($mdc-level-config, line-height),
+      map-get($mdc-level-config, font-weight),
+      map-get($mdc-level-config, font-family),
+      map-get($mdc-level-config, letter-spacing));
 }
 
 // Configures MDC's global variables to reflect the given theme, applies the given styles,

src/material-experimental/mdc-typography/_all-typography.scss

@@ -1,5 +1,73 @@
+@import '@material/typography/variables.import';
 @import '../mdc-theming/all-theme';
 
+/// Generates an Angular Material typography config based on values from the official Material
+/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
+/// the default values. The `mat-typography-level` function can be used to generate a custom
+/// typography level map which can be passed to this function to override one of the default levels.
+///
+/// @param {String} $font-family The font family to use for levels where it is not explicitly
+///     specified.
+/// @param {Map} $headline-1 The font settings for the headline-1 font level.
+/// @param {Map} $headline-2 The font settings for the headline-2 font level.
+/// @param {Map} $headline-3 The font settings for the headline-3 font level.
+/// @param {Map} $headline-4 The font settings for the headline-4 font level.
+/// @param {Map} $headline-5 The font settings for the headline-5 font level.
+/// @param {Map} $headline-6 The font settings for the headline-6 font level.
+/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
+/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
+/// @param {Map} $body-1 The font settings for the body-1 font level.
+/// @param {Map} $body-2 The font settings for the body-2 font level.
+/// @param {Map} $caption The font settings for the caption font level.
+/// @param {Map} $button The font settings for the button font level.
+/// @param {Map} $overline The font settings for the overline font level.
+/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
+@function mat-mdc-typography-config(
+  $font-family: $mdc-typography-font-family,
+  $headline-1:  mat-typography-config-level-from-mdc(headline1),
+  $headline-2:  mat-typography-config-level-from-mdc(headline2),
+  $headline-3:  mat-typography-config-level-from-mdc(headline3),
+  $headline-4:  mat-typography-config-level-from-mdc(headline4),
+  $headline-5:  mat-typography-config-level-from-mdc(headline5),
+  $headline-6:  mat-typography-config-level-from-mdc(headline6),
+  $subtitle-1:  mat-typography-config-level-from-mdc(subtitle1),
+  $subtitle-2:  mat-typography-config-level-from-mdc(subtitle2),
+  $body-1:      mat-typography-config-level-from-mdc(body1),
+  $body-2:      mat-typography-config-level-from-mdc(body2),
+  $caption:     mat-typography-config-level-from-mdc(caption),
+  $button:      mat-typography-config-level-from-mdc(button),
+  $overline:    mat-typography-config-level-from-mdc(overline),
+) {
+  // Declare an initial map with all of the levels.
+  $config: (
+      headline-1: $headline-1,
+      headline-2: $headline-2,
+      headline-3: $headline-3,
+      headline-4: $headline-4,
+      headline-5: $headline-5,
+      headline-6: $headline-6,
+      subtitle-1: $subtitle-1,
+      subtitle-2: $subtitle-2,
+      body-1:     $body-1,
+      body-2:     $body-2,
+      caption:    $caption,
+      button:     $button,
+      overline:   $overline,
+  );
+
+  // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
+  // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
+  @each $key, $level in $config {
+    @if map-get($level, font-family) == null {
+      $new-level: map-merge($level, (font-family: $font-family));
+      $config: map-merge($config, ($key: $new-level));
+    }
+  }
+
+  // Add the base font family to the config.
+  @return map-merge($config, (font-family: $font-family));
+}
+
 @mixin angular-material-mdc-typography($config-or-theme: null) {
   $config: if(mat-private-is-theme-object($config-or-theme),
       mat-get-typography-config($config-or-theme), $config-or-theme);