Skip to content

Commit

Permalink
fix(material/core): default font family not picked up in define-typog…
Browse files Browse the repository at this point in the history 
…raphy-config (#25789)

The `define-typography-config` function was set up so that if a level doesn't have a `font-family`, it would pick up the one that was passed into the function. The problem is that after we switched the typography over to MDC, we started using the `typography-config-level-from-mdc` function which provides a default `font-family` which meant that the default passed into `define-typography-config` was being ignored.

These changes add some logic that allows us to take the default font family, if it is specified.

Fixes #25780.
  • Loading branch information
@crisbeto
crisbeto committed Oct 11, 2022
1 parent 8a1cf8c commit a310fef
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 87 deletions.
14 changes: 8 additions & 6 deletions src/material/core/mdc-helpers/_mdc-helpers.scss
View file
Expand Up @@ -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,
Expand Down
154 changes: 73 additions & 81 deletions src/material/core/typography/_all-typography.scss
View file
@@ -1,7 +1,6 @@
@use 'sass:map';
@use 'sass:math';
@use 'sass:meta';
@use '@material/typography' as mdc-typography;
@use './typography';
@use '../../autocomplete/autocomplete-theme';
@use '../../badge/badge-theme';
Expand Down Expand Up @@ -88,49 +87,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
Expand Down Expand Up @@ -158,49 +160,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) {
Expand Down

0 comments on commit a310fef

Please sign in to comment.