Skip to content

Commit a310fef

Browse files
crisbetocrisbeto
authored
fix(material/core): default font family not picked up in define-typography-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.
1 parent 8a1cf8c commit a310fef

File tree

2 files changed

+81
-87
lines changed

2 files changed

+81
-87
lines changed

‎src/material/core/mdc-helpers/_mdc-helpers.scss

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,17 @@ $mat-typography-mdc-level-mappings: (
8484
}
8585

8686
// Converts an MDC typography level config to an Angular Material one.
87-
@function typography-config-level-from-mdc($mdc-level) {
87+
@function typography-config-level-from-mdc($mdc-level, $overrides: ()) {
8888
$mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
8989

9090
@return typography.define-typography-level(
91-
map.get($mdc-level-config, font-size),
92-
map.get($mdc-level-config, line-height),
93-
map.get($mdc-level-config, font-weight),
94-
map.get($mdc-level-config, font-family),
95-
map.get($mdc-level-config, letter-spacing));
91+
$font-size: map.get($overrides, font-size) or map.get($mdc-level-config, font-size),
92+
$font-family: map.get($overrides, font-family) or map.get($mdc-level-config, font-family),
93+
$line-height: map.get($overrides, line-height) or map.get($mdc-level-config, line-height),
94+
$font-weight: map.get($overrides, font-weight) or map.get($mdc-level-config, font-weight),
95+
$letter-spacing:
96+
map.get($overrides, letter-spacing) or map.get($mdc-level-config, letter-spacing)
97+
);
9698
}
9799

98100
// Configures MDC's global variables to reflect the given theme, applies the given styles,

‎src/material/core/typography/_all-typography.scss

Lines changed: 73 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@use 'sass:map';
22
@use 'sass:math';
33
@use 'sass:meta';
4-
@use '@material/typography' as mdc-typography;
54
@use './typography';
65
@use '../../autocomplete/autocomplete-theme';
76
@use '../../badge/badge-theme';
@@ -88,49 +87,52 @@
8887
@function define-typography-config(
8988
// TODO(mmalerba): rename this function to define-typography-config,
9089
// and create a predefined px based config for people that need it.
91-
$font-family: mdc-typography.$font-family,
92-
$headline-1: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline1)),
93-
$headline-2: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline2)),
94-
$headline-3: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline3)),
95-
$headline-4: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline4)),
96-
$headline-5: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline5)),
97-
$headline-6: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline6)),
98-
$subtitle-1: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle1)),
99-
$subtitle-2: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle2)),
100-
$body-1: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body1)),
101-
$body-2: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body2)),
102-
$caption: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(caption)),
103-
$button: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(button)),
104-
$overline: _rem-to-px(mdc-helpers.typography-config-level-from-mdc(overline)),
90+
$font-family: null,
91+
$headline-1: null,
92+
$headline-2: null,
93+
$headline-3: null,
94+
$headline-4: null,
95+
$headline-5: null,
96+
$headline-6: null,
97+
$subtitle-1: null,
98+
$subtitle-2: null,
99+
$body-1: null,
100+
$body-2: null,
101+
$caption: null,
102+
$button: null,
103+
$overline: null,
105104
) {
106105
// Declare an initial map with all of the levels.
107-
$config: (
108-
headline-1: $headline-1,
109-
headline-2: $headline-2,
110-
headline-3: $headline-3,
111-
headline-4: $headline-4,
112-
headline-5: $headline-5,
113-
headline-6: $headline-6,
114-
subtitle-1: $subtitle-1,
115-
subtitle-2: $subtitle-2,
116-
body-1: $body-1,
117-
body-2: $body-2,
118-
caption: $caption,
119-
button: $button,
120-
overline: $overline,
121-
);
106+
$overrides: if($font-family, (font-family: $font-family), ());
122107

123-
// Loop through the levels and set the `font-family` of the ones that don't have one to the base.
124-
// Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
125-
@each $key, $level in $config {
126-
@if map.get($level, font-family) == null {
127-
$new-level: map.merge($level, (font-family: $font-family));
128-
$config: map.merge($config, ($key: $new-level));
129-
}
130-
}
131-
132-
// Add the base font family to the config.
133-
@return map.merge($config, (font-family: $font-family));
108+
@return (
109+
headline-1: $headline-1 or _rem-to-px(
110+
mdc-helpers.typography-config-level-from-mdc(headline1, $overrides)),
111+
headline-2: $headline-2 or _rem-to-px(
112+
mdc-helpers.typography-config-level-from-mdc(headline2, $overrides)),
113+
headline-3: $headline-3 or _rem-to-px(
114+
mdc-helpers.typography-config-level-from-mdc(headline3, $overrides)),
115+
headline-4: $headline-4 or _rem-to-px(
116+
mdc-helpers.typography-config-level-from-mdc(headline4, $overrides)),
117+
headline-5: $headline-5 or _rem-to-px(
118+
mdc-helpers.typography-config-level-from-mdc(headline5, $overrides)),
119+
headline-6: $headline-6 or _rem-to-px(
120+
mdc-helpers.typography-config-level-from-mdc(headline6, $overrides)),
121+
subtitle-1: $subtitle-1 or _rem-to-px(
122+
mdc-helpers.typography-config-level-from-mdc(subtitle1, $overrides)),
123+
subtitle-2: $subtitle-2 or _rem-to-px(
124+
mdc-helpers.typography-config-level-from-mdc(subtitle2, $overrides)),
125+
body-1: $body-1 or _rem-to-px(
126+
mdc-helpers.typography-config-level-from-mdc(body1, $overrides)),
127+
body-2: $body-2 or _rem-to-px(
128+
mdc-helpers.typography-config-level-from-mdc(body2, $overrides)),
129+
caption: $caption or _rem-to-px(
130+
mdc-helpers.typography-config-level-from-mdc(caption, $overrides)),
131+
button: $button or _rem-to-px(
132+
mdc-helpers.typography-config-level-from-mdc(button, $overrides)),
133+
overline: $overline or _rem-to-px(
134+
mdc-helpers.typography-config-level-from-mdc(overline, $overrides)),
135+
);
134136
}
135137

136138
/// Generates an Angular Material typography config based on values from the official Material
@@ -158,49 +160,39 @@
158160
@function define-rem-typography-config(
159161
// TODO(mmalerba): rename this function to define-typography-config,
160162
// and create a predefined px based config for people that need it.
161-
$font-family: mdc-typography.$font-family,
162-
$headline-1: mdc-helpers.typography-config-level-from-mdc(headline1),
163-
$headline-2: mdc-helpers.typography-config-level-from-mdc(headline2),
164-
$headline-3: mdc-helpers.typography-config-level-from-mdc(headline3),
165-
$headline-4: mdc-helpers.typography-config-level-from-mdc(headline4),
166-
$headline-5: mdc-helpers.typography-config-level-from-mdc(headline5),
167-
$headline-6: mdc-helpers.typography-config-level-from-mdc(headline6),
168-
$subtitle-1: mdc-helpers.typography-config-level-from-mdc(subtitle1),
169-
$subtitle-2: mdc-helpers.typography-config-level-from-mdc(subtitle2),
170-
$body-1: mdc-helpers.typography-config-level-from-mdc(body1),
171-
$body-2: mdc-helpers.typography-config-level-from-mdc(body2),
172-
$caption: mdc-helpers.typography-config-level-from-mdc(caption),
173-
$button: mdc-helpers.typography-config-level-from-mdc(button),
174-
$overline: mdc-helpers.typography-config-level-from-mdc(overline),
163+
$font-family: null,
164+
$headline-1: null,
165+
$headline-2: null,
166+
$headline-3: null,
167+
$headline-4: null,
168+
$headline-5: null,
169+
$headline-6: null,
170+
$subtitle-1: null,
171+
$subtitle-2: null,
172+
$body-1: null,
173+
$body-2: null,
174+
$caption: null,
175+
$button: null,
176+
$overline: null,
175177
) {
176178
// Declare an initial map with all of the levels.
177-
$config: (
178-
headline-1: $headline-1,
179-
headline-2: $headline-2,
180-
headline-3: $headline-3,
181-
headline-4: $headline-4,
182-
headline-5: $headline-5,
183-
headline-6: $headline-6,
184-
subtitle-1: $subtitle-1,
185-
subtitle-2: $subtitle-2,
186-
body-1: $body-1,
187-
body-2: $body-2,
188-
caption: $caption,
189-
button: $button,
190-
overline: $overline,
191-
);
179+
$overrides: if($font-family, (font-family: $font-family), ());
192180

193-
// Loop through the levels and set the `font-family` of the ones that don't have one to the base.
194-
// Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
195-
@each $key, $level in $config {
196-
@if map.get($level, font-family) == null {
197-
$new-level: map.merge($level, (font-family: $font-family));
198-
$config: map.merge($config, ($key: $new-level));
199-
}
200-
}
201-
202-
// Add the base font family to the config.
203-
@return map.merge($config, (font-family: $font-family));
181+
@return (
182+
headline-1: $headline-1 or mdc-helpers.typography-config-level-from-mdc(headline1, $overrides),
183+
headline-2: $headline-2 or mdc-helpers.typography-config-level-from-mdc(headline2, $overrides),
184+
headline-3: $headline-3 or mdc-helpers.typography-config-level-from-mdc(headline3, $overrides),
185+
headline-4: $headline-4 or mdc-helpers.typography-config-level-from-mdc(headline4, $overrides),
186+
headline-5: $headline-5 or mdc-helpers.typography-config-level-from-mdc(headline5, $overrides),
187+
headline-6: $headline-6 or mdc-helpers.typography-config-level-from-mdc(headline6, $overrides),
188+
subtitle-1: $subtitle-1 or mdc-helpers.typography-config-level-from-mdc(subtitle1, $overrides),
189+
subtitle-2: $subtitle-2 or mdc-helpers.typography-config-level-from-mdc(subtitle2, $overrides),
190+
body-1: $body-1 or mdc-helpers.typography-config-level-from-mdc(body1, $overrides),
191+
body-2: $body-2 or mdc-helpers.typography-config-level-from-mdc(body2, $overrides),
192+
caption: $caption or mdc-helpers.typography-config-level-from-mdc(caption, $overrides),
193+
button: $button or mdc-helpers.typography-config-level-from-mdc(button, $overrides),
194+
overline: $overline or mdc-helpers.typography-config-level-from-mdc(overline, $overrides),
195+
);
204196
}
205197

206198
@mixin private-all-unmigrated-component-typographies($config) {

0 commit comments

Comments
 (0)