feat(typography): allow font-family to be set per typography level (#…

…5905)

Fixes #5563.

src/lib/button/_button-theme.scss

@@ -109,7 +109,7 @@
 @mixin mat-button-typography($config) {
   .mat-button, .mat-raised-button, .mat-icon-button {
     font: {
-      family: mat-font-family($config);
+      family: mat-font-family($config, button);
       size: mat-font-size($config, button);
       weight: mat-font-weight($config, button);
     }

src/lib/core/option/_option-theme.scss

@@ -47,7 +47,7 @@
 @mixin mat-option-typography($config) {
   .mat-option {
     font: {
-      family: mat-font-family($config);
+      family: mat-font-family($config, subheading-2);
       size: mat-font-size($config, subheading-2);
     }
   }

src/lib/core/typography/_typography-utils.scss

@@ -19,16 +19,22 @@
 }
 
 // Gets the font-family from a typography config and removes the quotes around it.
-@function mat-font-family($config) {
-  @return unquote(map-get($config, font-family));
+@function mat-font-family($config, $level: null) {
+  $font-family: map-get($config, font-family);
+
+  @if $level != null {
+    $font-family: _mat-get-type-value($config, $level, font-family);
+  }
+
+  @return unquote($font-family);
 }
 
 // Converts a typography level into CSS styles.
 @mixin mat-typography-level-to-styles($config, $level) {
   $font-size: mat-font-size($config, $level);
   $font-weight: mat-font-weight($config, $level);
   $line-height: mat-line-height($config, $level);
-  $font-family: mat-font-family($config);
+  $font-family: mat-font-family($config, $level);
 
   // Use the shorthand `font` to represent a typography level, because it's the shortest. Notes that
   // we need to use interpolation for `font-size/line-height` in order to prevent SASS from dividing

src/lib/core/typography/_typography.scss

@@ -1,11 +1,17 @@
 @import 'typography-utils';
 
 // Represents a typography level from the Material design spec.
-@function mat-typography-level($font-size, $line-height: $font-size, $font-weight: 400) {
+@function mat-typography-level(
+  $font-size,
+  $line-height: $font-size,
+  $font-weight: 400,
+  $font-family: null) {
+
   @return (
     font-size: $font-size,
     line-height: $line-height,
-    font-weight: $font-weight
+    font-weight: $font-weight,
+    font-family: $font-family
   );
 }
 
@@ -28,8 +34,9 @@
   // Line-height must be unit-less fraction of the font-size.
   $input:         mat-typography-level(inherit, 1.125, 400)
 ) {
-  @return (
-    font-family:    $font-family,
+
+  // Declare an initial map with all of the levels.
+  $config: (
     display-4:      $display-4,
     display-3:      $display-3,
     display-2:      $display-2,
@@ -44,6 +51,18 @@
     button:         $button,
     input:          $input,
   );
+
+  // 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));
 }
 
 // Adds the base typography styles, based on a config.
@@ -74,15 +93,15 @@
   .mat-h5, #{$selector} h5 {
     font-size: mat-font-size($config, body-1) * 0.83;
     font-weight: mat-font-weight($config, body-1);
-    font-family: mat-font-family($config);
+    font-family: mat-font-family($config, body-1);
     line-height: mat-line-height($config, body-1);
     margin: 0 0 12px;
   }
 
   .mat-h6, #{$selector} h6 {
     font-size: mat-font-size($config, body-1) * 0.67;
     font-weight: mat-font-weight($config, body-1);
-    font-family: mat-font-family($config);
+    font-family: mat-font-family($config, body-1);
     line-height: mat-line-height($config, body-1);
     margin: 0 0 12px;
   }

src/lib/expansion/_expansion-theme.scss

@@ -36,7 +36,7 @@
 @mixin mat-expansion-panel-typography($config) {
   .mat-expansion-panel-header {
     font: {
-      family: mat-font-family($config);
+      family: mat-font-family($config, subheading-1);
       size: mat-font-size($config, subheading-1);
       weight: mat-font-weight($config, subheading-1);
     }

src/lib/menu/_menu-theme.scss

@@ -38,7 +38,7 @@
 @mixin mat-menu-typography($config) {
   .mat-menu-item {
     font: {
-      family: mat-font-family($config);
+      family: mat-font-family($config, subheading-2);
       size: mat-font-size($config, subheading-2);
     }
   }

src/lib/paginator/_paginator-theme.scss

@@ -31,16 +31,10 @@
 }
 
 @mixin mat-paginator-typography($config) {
-  .mat-paginator {
-    font: {
-      family: mat-font-family($config);
-      size: mat-font-size($config, caption);
-    }
-  }
-
+  .mat-paginator,
   .mat-paginator-page-size .mat-select-trigger {
     font: {
-      family: mat-font-family($config);
+      family: mat-font-family($config, caption);
       size: mat-font-size($config, caption);
     }
   }

src/lib/snack-bar/_simple-snack-bar-theme.scss

@@ -5,7 +5,7 @@
 @mixin mat-simple-snack-bar-typography($config) {
   .mat-simple-snackbar {
     font: {
-      family: mat-font-family($config);
+      family: mat-font-family($config, body-1);
       size: mat-font-size($config, body-1);
     }
   }

src/lib/tabs/_tabs-theme.scss

@@ -47,7 +47,7 @@
 
   .mat-tab-label, .mat-tab-link {
     font: {
-      family: mat-font-family($config);
+      family: mat-font-family($config, button);
       size: mat-font-size($config, button);
       weight: mat-font-weight($config, button);
     }