Skip to content

Commit 742d858

Browse files
mmalerbammalerba
authored
feat(material/core): make mdc-based typography default (#25551)
1 parent 2c9c787 commit 742d858

File tree

6 files changed

+100
-11
lines changed

6 files changed

+100
-11
lines changed

‎src/material/_index.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
$amber-palette, $orange-palette, $deep-orange-palette, $brown-palette, $grey-palette,
1010
$gray-palette, $blue-grey-palette, $blue-gray-palette, $light-theme-background-palette,
1111
$dark-theme-background-palette, $light-theme-foreground-palette, $dark-theme-foreground-palette;
12-
@forward './core/typography/typography' show define-typography-level, define-typography-config,
13-
typography-hierarchy;
12+
@forward './core/typography/typography' show define-typography-level,
13+
define-legacy-typography-config, typography-hierarchy;
1414
@forward './core/typography/typography-utils' show typography-level,
1515
font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
1616

@@ -51,7 +51,7 @@
5151
@forward './core/theming/all-theme' show all-component-themes;
5252
@forward './core/color/all-color' show all-component-colors;
5353
@forward './core/typography/all-typography' show all-component-typographies,
54-
define-mdc-typography-config;
54+
define-rem-typography-config, define-typography-config;
5555
@forward './legacy-core/theming/all-theme' show all-legacy-component-themes;
5656
@forward './legacy-core/color/all-color' show all-legacy-component-colors;
5757
@forward './legacy-core/typography/all-typography' show all-legacy-component-typographies;

‎src/material/core/theming/tests/test-theming-api.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ $new-api-dark-theme-default-warn: theming.define-dark-theme((
6666
$light-theme-only-density: theming.define-light-theme((density: -2));
6767
$dark-theme-only-density: theming.define-dark-theme((density: -2));
6868

69-
$typography-config: typography.define-typography-config();
69+
$typography-config: all-typography.define-typography-config();
7070
$light-theme-only-typography: theming.define-light-theme((typography: $typography-config));
7171
$dark-theme-only-typography: theming.define-dark-theme((typography: $typography-config));
7272

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

Lines changed: 91 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
@use 'sass:map';
2+
@use 'sass:math';
3+
@use 'sass:meta';
24
@use '@material/typography' as mdc-typography;
35
@use './typography';
46
@use '../../autocomplete/autocomplete-theme';
@@ -45,10 +47,97 @@
4547
// (where define-typography-config is defined) because putting it there would cause a circular
4648
// dependency with mdc-helpers. We should refactor so these can live in the same place.
4749

50+
// Converts a map containing rem values to a map containing px values.
51+
@function _rem-to-px($x, $px-per-rem: 16px) {
52+
@if meta.type-of($x) == 'map' {
53+
@each $key, $val in $x {
54+
$x: map.merge($x, ($key: _rem-to-px($val)));
55+
}
56+
@return $x;
57+
}
58+
@if meta.type-of($x) == 'number' and math.unit($x) == 'rem' {
59+
@return ($x / 1rem) * $px-per-rem;
60+
}
61+
@else {
62+
@return $x;
63+
}
64+
}
65+
66+
/// Generates an Angular Material typography config based on values from the official Material
67+
/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
68+
/// the default values. The `mat-typography-level` function can be used to generate a custom
69+
/// typography level map which can be passed to this function to override one of the default levels.
70+
/// All default typography sizing generated by this function is in `rem` units.
71+
///
72+
/// @param {String} $font-family The font family to use for levels where it is not explicitly
73+
/// specified.
74+
/// @param {Map} $headline-1 The font settings for the headline-1 font level.
75+
/// @param {Map} $headline-2 The font settings for the headline-2 font level.
76+
/// @param {Map} $headline-3 The font settings for the headline-3 font level.
77+
/// @param {Map} $headline-4 The font settings for the headline-4 font level.
78+
/// @param {Map} $headline-5 The font settings for the headline-5 font level.
79+
/// @param {Map} $headline-6 The font settings for the headline-6 font level.
80+
/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
81+
/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
82+
/// @param {Map} $body-1 The font settings for the body-1 font level.
83+
/// @param {Map} $body-2 The font settings for the body-2 font level.
84+
/// @param {Map} $caption The font settings for the caption font level.
85+
/// @param {Map} $button The font settings for the button font level.
86+
/// @param {Map} $overline The font settings for the overline font level.
87+
/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
88+
@function define-rem-typography-config(
89+
// TODO(mmalerba): rename this function to define-typography-config,
90+
// 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)),
105+
) {
106+
// 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+
);
122+
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));
134+
}
135+
48136
/// Generates an Angular Material typography config based on values from the official Material
49137
/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
50138
/// the default values. The `mat-typography-level` function can be used to generate a custom
51139
/// typography level map which can be passed to this function to override one of the default levels.
140+
/// All default typography sizing generated by this function is in `px` units.
52141
///
53142
/// @param {String} $font-family The font family to use for levels where it is not explicitly
54143
/// specified.
@@ -66,7 +155,7 @@
66155
/// @param {Map} $button The font settings for the button font level.
67156
/// @param {Map} $overline The font settings for the overline font level.
68157
/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
69-
@function define-mdc-typography-config(
158+
@function define-typography-config(
70159
// TODO(mmalerba): rename this function to define-typography-config,
71160
// and create a predefined px based config for people that need it.
72161
$font-family: mdc-typography.$font-family,
@@ -139,7 +228,7 @@
139228

140229
// If no actual color configuration has been specified, create a default one.
141230
@if not $config {
142-
$config: typography.define-typography-config();
231+
$config: define-typography-config();
143232
}
144233

145234
// TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only

‎src/material/core/typography/_typography-deprecated.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
$button: typography.define-typography-level(14px, 14px, 500),
3434
$input: typography.define-typography-level(inherit, 1.125, 400)
3535
) {
36-
@return typography.define-typography-config($font-family, $display-4, $display-3, $display-2,
37-
$display-1, $headline, $title, $subheading-2, $subheading-1, $body-2,
36+
@return typography.define-legacy-typography-config($font-family, $display-4, $display-3,
37+
$display-2, $display-1, $headline, $title, $subheading-2, $subheading-1, $body-2,
3838
$body-1, $caption, $button, $input);
3939
}

‎src/material/core/typography/_typography.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
/// @param {Map} $button Configuration for the "button" typographic level.
4747
/// @param {Map} $input Configuration for the "input" typographic level.
4848
/// @returns {Map} A typography config for the application.
49-
@function define-typography-config(
49+
@function define-legacy-typography-config(
5050
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
5151
$display-4: define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
5252
$display-3: define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
@@ -136,7 +136,7 @@
136136
$non-null-args: map.merge($non-null-args, ($key: $value));
137137
}
138138
}
139-
@return define-typography-config($non-null-args...);
139+
@return define-legacy-typography-config($non-null-args...);
140140
}
141141
@return $config;
142142
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
// If no actual color configuration has been specified, create a default one.
3434
@if not $config {
35-
$config: typography.define-typography-config();
35+
$config: typography.define-legacy-typography-config();
3636
}
3737

3838
// TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only

0 commit comments

Comments
 (0)