diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index e1c5930ff70..ba17e0ceff2 100644 --- a/src/lib/button/_button-theme.scss +++ b/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); } diff --git a/src/lib/core/option/_option-theme.scss b/src/lib/core/option/_option-theme.scss index 9d4b7d40680..ddaf59a94f0 100644 --- a/src/lib/core/option/_option-theme.scss +++ b/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); } } diff --git a/src/lib/core/typography/_typography-utils.scss b/src/lib/core/typography/_typography-utils.scss index cfc5d59b4d3..dbb1dda1ee5 100644 --- a/src/lib/core/typography/_typography-utils.scss +++ b/src/lib/core/typography/_typography-utils.scss @@ -19,8 +19,14 @@ } // 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. @@ -28,7 +34,7 @@ $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 diff --git a/src/lib/core/typography/_typography.scss b/src/lib/core/typography/_typography.scss index 7ea07725f0a..8426c1e6b0c 100644 --- a/src/lib/core/typography/_typography.scss +++ b/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,7 +93,7 @@ .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; } @@ -82,7 +101,7 @@ .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; } diff --git a/src/lib/expansion/_expansion-theme.scss b/src/lib/expansion/_expansion-theme.scss index 9943107a4de..adb4ad63b6b 100644 --- a/src/lib/expansion/_expansion-theme.scss +++ b/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); } diff --git a/src/lib/menu/_menu-theme.scss b/src/lib/menu/_menu-theme.scss index 19a03736959..417604f9a24 100644 --- a/src/lib/menu/_menu-theme.scss +++ b/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); } } diff --git a/src/lib/paginator/_paginator-theme.scss b/src/lib/paginator/_paginator-theme.scss index a76cddbba90..ff7258557f4 100644 --- a/src/lib/paginator/_paginator-theme.scss +++ b/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); } } diff --git a/src/lib/snack-bar/_simple-snack-bar-theme.scss b/src/lib/snack-bar/_simple-snack-bar-theme.scss index 062c8672b3a..78ed2c8dd81 100644 --- a/src/lib/snack-bar/_simple-snack-bar-theme.scss +++ b/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); } } diff --git a/src/lib/tabs/_tabs-theme.scss b/src/lib/tabs/_tabs-theme.scss index 28f0b488f23..0f6238e9754 100644 --- a/src/lib/tabs/_tabs-theme.scss +++ b/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); }