diff --git a/src/material/core/mdc-helpers/_mdc-helpers.scss b/src/material/core/mdc-helpers/_mdc-helpers.scss index fb1f37fde8e8..e6b2320fcc71 100644 --- a/src/material/core/mdc-helpers/_mdc-helpers.scss +++ b/src/material/core/mdc-helpers/_mdc-helpers.scss @@ -84,15 +84,17 @@ $mat-typography-mdc-level-mappings: ( } // Converts an MDC typography level config to an Angular Material one. -@function typography-config-level-from-mdc($mdc-level) { +@function typography-config-level-from-mdc($mdc-level, $overrides: ()) { $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level); @return typography.define-typography-level( - 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)); + $font-size: map.get($overrides, font-size) or map.get($mdc-level-config, font-size), + $font-family: map.get($overrides, font-family) or map.get($mdc-level-config, font-family), + $line-height: map.get($overrides, line-height) or map.get($mdc-level-config, line-height), + $font-weight: map.get($overrides, font-weight) or map.get($mdc-level-config, font-weight), + $letter-spacing: + map.get($overrides, letter-spacing) or map.get($mdc-level-config, letter-spacing) + ); } // Configures MDC's global variables to reflect the given theme, applies the given styles, diff --git a/src/material/core/typography/_all-typography.scss b/src/material/core/typography/_all-typography.scss index a4df2ff1c777..16c76b1e71cb 100644 --- a/src/material/core/typography/_all-typography.scss +++ b/src/material/core/typography/_all-typography.scss @@ -88,49 +88,52 @@ @function define-typography-config( // TODO(mmalerba): rename this function to define-typography-config, // and create a predefined px based config for people that need it. - $font-family: mdc-typography.$font-family, - $headline-1: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline1)), - $headline-2: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline2)), - $headline-3: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline3)), - $headline-4: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline4)), - $headline-5: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline5)), - $headline-6: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline6)), - $subtitle-1: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle1)), - $subtitle-2: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle2)), - $body-1: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body1)), - $body-2: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body2)), - $caption: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(caption)), - $button: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(button)), - $overline: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(overline)), + $font-family: null, + $headline-1: null, + $headline-2: null, + $headline-3: null, + $headline-4: null, + $headline-5: null, + $headline-6: null, + $subtitle-1: null, + $subtitle-2: null, + $body-1: null, + $body-2: null, + $caption: null, + $button: null, + $overline: null, ) { // 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, - ); + $overrides: if($font-family, (font-family: $font-family), ()); - // 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)); + @return ( + headline-1: $headline-1 or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(headline1, $overrides)), + headline-2: $headline-2 or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(headline2, $overrides)), + headline-3: $headline-3 or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(headline3, $overrides)), + headline-4: $headline-4 or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(headline4, $overrides)), + headline-5: $headline-5 or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(headline5, $overrides)), + headline-6: $headline-6 or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(headline6, $overrides)), + subtitle-1: $subtitle-1 or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(subtitle1, $overrides)), + subtitle-2: $subtitle-2 or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(subtitle2, $overrides)), + body-1: $body-1 or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(body1, $overrides)), + body-2: $body-2 or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(body2, $overrides)), + caption: $caption or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(caption, $overrides)), + button: $button or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(button, $overrides)), + overline: $overline or _rem-to-px( + mdc-helpers.typography-config-level-from-mdc(overline, $overrides)), + ); } /// Generates an Angular Material typography config based on values from the official Material @@ -158,49 +161,39 @@ @function define-rem-typography-config( // TODO(mmalerba): rename this function to define-typography-config, // and create a predefined px based config for people that need it. - $font-family: mdc-typography.$font-family, - $headline-1: mdc-helpers.typography-config-level-from-mdc(headline1), - $headline-2: mdc-helpers.typography-config-level-from-mdc(headline2), - $headline-3: mdc-helpers.typography-config-level-from-mdc(headline3), - $headline-4: mdc-helpers.typography-config-level-from-mdc(headline4), - $headline-5: mdc-helpers.typography-config-level-from-mdc(headline5), - $headline-6: mdc-helpers.typography-config-level-from-mdc(headline6), - $subtitle-1: mdc-helpers.typography-config-level-from-mdc(subtitle1), - $subtitle-2: mdc-helpers.typography-config-level-from-mdc(subtitle2), - $body-1: mdc-helpers.typography-config-level-from-mdc(body1), - $body-2: mdc-helpers.typography-config-level-from-mdc(body2), - $caption: mdc-helpers.typography-config-level-from-mdc(caption), - $button: mdc-helpers.typography-config-level-from-mdc(button), - $overline: mdc-helpers.typography-config-level-from-mdc(overline), + $font-family: null, + $headline-1: null, + $headline-2: null, + $headline-3: null, + $headline-4: null, + $headline-5: null, + $headline-6: null, + $subtitle-1: null, + $subtitle-2: null, + $body-1: null, + $body-2: null, + $caption: null, + $button: null, + $overline: null, ) { // 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, - ); + $overrides: if($font-family, (font-family: $font-family), ()); - // 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)); + @return ( + headline-1: $headline-1 or mdc-helpers.typography-config-level-from-mdc(headline1, $overrides), + headline-2: $headline-2 or mdc-helpers.typography-config-level-from-mdc(headline2, $overrides), + headline-3: $headline-3 or mdc-helpers.typography-config-level-from-mdc(headline3, $overrides), + headline-4: $headline-4 or mdc-helpers.typography-config-level-from-mdc(headline4, $overrides), + headline-5: $headline-5 or mdc-helpers.typography-config-level-from-mdc(headline5, $overrides), + headline-6: $headline-6 or mdc-helpers.typography-config-level-from-mdc(headline6, $overrides), + subtitle-1: $subtitle-1 or mdc-helpers.typography-config-level-from-mdc(subtitle1, $overrides), + subtitle-2: $subtitle-2 or mdc-helpers.typography-config-level-from-mdc(subtitle2, $overrides), + body-1: $body-1 or mdc-helpers.typography-config-level-from-mdc(body1, $overrides), + body-2: $body-2 or mdc-helpers.typography-config-level-from-mdc(body2, $overrides), + caption: $caption or mdc-helpers.typography-config-level-from-mdc(caption, $overrides), + button: $button or mdc-helpers.typography-config-level-from-mdc(button, $overrides), + overline: $overline or mdc-helpers.typography-config-level-from-mdc(overline, $overrides), + ); } @mixin private-all-unmigrated-component-typographies($config) {