Skip to content

Commit e4b1089

Browse files
mmalerbammalerba
committed
refactor(material/typography): Move define-typography-config under _typography.scss
This never should have been under _all-typography.scss to begin with. _all-typography.scss depends on all of the component themes, which prevents any of the component themes from using this function as it would cause a circular dep. Instead, moving it under _typography.scss where the legacy version lives makes much more sense.
1 parent 3703cc9 commit e4b1089

File tree

5 files changed

+181
-182
lines changed

5 files changed

+181
-182
lines changed

‎src/material/_index.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
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,
13-
define-legacy-typography-config, legacy-typography-hierarchy, typography-hierarchy;
12+
@forward './core/typography/typography' show define-typography-level, define-rem-typography-config,
13+
define-typography-config, typography-hierarchy, define-legacy-typography-config,
14+
legacy-typography-hierarchy;
1415
@forward './core/typography/typography-utils' show typography-level,
1516
font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
1617

@@ -48,8 +49,7 @@
4849
// Theme bundles
4950
@forward './core/theming/all-theme' show all-component-themes;
5051
@forward './core/color/all-color' show all-component-colors;
51-
@forward './core/typography/all-typography' show all-component-typographies,
52-
define-rem-typography-config, define-typography-config;
52+
@forward './core/typography/all-typography' show all-component-typographies;
5353
@forward './legacy-core/theming/all-theme' show all-legacy-component-themes;
5454
@forward './legacy-core/color/all-color' show all-legacy-component-colors;
5555
@forward './legacy-core/typography/all-typography' show all-legacy-component-typographies;

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

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -83,21 +83,6 @@ $mat-typography-mdc-level-mappings: (
8383
@return $mdc-config;
8484
}
8585

86-
// Converts an MDC typography level config to an Angular Material one.
87-
@function typography-config-level-from-mdc($mdc-level, $font-family: null) {
88-
$mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
89-
90-
// Explicitly default the font family to null since we'll apply it globally
91-
// through the `define-typgraphy-config`/`define-legacy-typography-config`.
92-
@return typography.define-typography-level(
93-
$font-family: $font-family,
94-
$font-size: map.get($mdc-level-config, font-size),
95-
$line-height: map.get($mdc-level-config, line-height),
96-
$font-weight: map.get($mdc-level-config, font-weight),
97-
$letter-spacing: map.get($mdc-level-config, letter-spacing)
98-
);
99-
}
100-
10186
// MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
10287
// This function falls back to determining the tone based on whether the theme is light or dark.
10388
@function variable-safe-contrast-tone($value, $is-dark) {
@@ -238,19 +223,19 @@ $mat-typography-mdc-level-mappings: (
238223
$font-family: mdc-typography.$font-family;
239224
@return (
240225
font-family: $font-family,
241-
headline-1: typography-config-level-from-mdc(headline1, $font-family),
242-
headline-2: typography-config-level-from-mdc(headline2, $font-family),
243-
headline-3: typography-config-level-from-mdc(headline3, $font-family),
244-
headline-4: typography-config-level-from-mdc(headline4, $font-family),
245-
headline-5: typography-config-level-from-mdc(headline5, $font-family),
246-
headline-6: typography-config-level-from-mdc(headline6, $font-family),
247-
subtitle-1: typography-config-level-from-mdc(subtitle1, $font-family),
248-
subtitle-2: typography-config-level-from-mdc(subtitle2, $font-family),
249-
body-1: typography-config-level-from-mdc(body1, $font-family),
250-
body-2: typography-config-level-from-mdc(body2, $font-family),
251-
caption: typography-config-level-from-mdc(caption, $font-family),
252-
button: typography-config-level-from-mdc(button, $font-family),
253-
overline: typography-config-level-from-mdc(overline, $font-family),
226+
headline-1: typography.typography-config-level-from-mdc(headline1, $font-family),
227+
headline-2: typography.typography-config-level-from-mdc(headline2, $font-family),
228+
headline-3: typography.typography-config-level-from-mdc(headline3, $font-family),
229+
headline-4: typography.typography-config-level-from-mdc(headline4, $font-family),
230+
headline-5: typography.typography-config-level-from-mdc(headline5, $font-family),
231+
headline-6: typography.typography-config-level-from-mdc(headline6, $font-family),
232+
subtitle-1: typography.typography-config-level-from-mdc(subtitle1, $font-family),
233+
subtitle-2: typography.typography-config-level-from-mdc(subtitle2, $font-family),
234+
body-1: typography.typography-config-level-from-mdc(body1, $font-family),
235+
body-2: typography.typography-config-level-from-mdc(body2, $font-family),
236+
caption: typography.typography-config-level-from-mdc(caption, $font-family),
237+
button: typography.typography-config-level-from-mdc(button, $font-family),
238+
overline: typography.typography-config-level-from-mdc(overline, $font-family),
254239
);
255240
}
256241

‎src/material/core/tokens/_token-utils.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
@use '@material/theme/custom-properties' as mdc-custom-properties;
44
@use '@material/theme/theme' as mdc-theme;
55
@use '@material/theme/keys' as mdc-keys;
6-
@use '../mdc-helpers/mdc-helpers';
76
@use '../theming/palette';
87
@use '../theming/theming';
8+
@use '../typography/typography';
99

1010
$_placeholder-color-palette: theming.define-palette(palette.$red-palette);
1111

@@ -20,7 +20,7 @@ $placeholder-color-config: (
2020
background: palette.$light-theme-background-palette,
2121
);
2222

23-
$_placeholder-typography-level-config: mdc-helpers.typography-config-level-from-mdc(body1);
23+
$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
2424

2525
// Placeholder typography config that can be passed to token getter functions when generating token
2626
// slots.

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

Lines changed: 0 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
@use '@material/typography' as mdc-typography;
2-
@use 'sass:map';
3-
@use 'sass:math';
4-
@use 'sass:meta';
51
@use './typography';
62
@use '../../autocomplete/autocomplete-theme';
73
@use '../../badge/badge-theme';
@@ -47,150 +43,6 @@
4743
// (where define-typography-config is defined) because putting it there would cause a circular
4844
// dependency with mdc-helpers. We should refactor so these can live in the same place.
4945

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 math.div($x, 1rem) * $px-per-rem;
60-
}
61-
@else {
62-
@return $x;
63-
}
64-
}
65-
66-
// Applies the default font family to all levels in a typography config.
67-
@function _apply-font-family($font-family, $initial-config) {
68-
$config: $initial-config;
69-
70-
@each $key, $level in $config {
71-
@if map.get($level, 'font-family') == null {
72-
// Sass maps are immutable so we have to re-assign the variable each time.
73-
$config: map.set($config, $key, map.set($level, 'font-family', $font-family));
74-
}
75-
}
76-
77-
@return map.set($config, 'font-family', $font-family);
78-
}
79-
80-
/// Generates an Angular Material typography config based on values from the official Material
81-
/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
82-
/// the default values. The `mat-typography-level` function can be used to generate a custom
83-
/// typography level map which can be passed to this function to override one of the default levels.
84-
/// All default typography sizing generated by this function is in `px` units.
85-
///
86-
/// @param {String} $font-family The font family to use for levels where it is not explicitly
87-
/// specified.
88-
/// @param {Map} $headline-1 The font settings for the headline-1 font level.
89-
/// @param {Map} $headline-2 The font settings for the headline-2 font level.
90-
/// @param {Map} $headline-3 The font settings for the headline-3 font level.
91-
/// @param {Map} $headline-4 The font settings for the headline-4 font level.
92-
/// @param {Map} $headline-5 The font settings for the headline-5 font level.
93-
/// @param {Map} $headline-6 The font settings for the headline-6 font level.
94-
/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
95-
/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
96-
/// @param {Map} $body-1 The font settings for the body-1 font level.
97-
/// @param {Map} $body-2 The font settings for the body-2 font level.
98-
/// @param {Map} $caption The font settings for the caption font level.
99-
/// @param {Map} $button The font settings for the button font level.
100-
/// @param {Map} $overline The font settings for the overline font level.
101-
/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
102-
@function define-typography-config(
103-
// TODO(mmalerba): rename this function to define-typography-config,
104-
// and create a predefined px based config for people that need it.
105-
$font-family: mdc-typography.$font-family,
106-
$headline-1: null,
107-
$headline-2: null,
108-
$headline-3: null,
109-
$headline-4: null,
110-
$headline-5: null,
111-
$headline-6: null,
112-
$subtitle-1: null,
113-
$subtitle-2: null,
114-
$body-1: null,
115-
$body-2: null,
116-
$caption: null,
117-
$button: null,
118-
$overline: null,
119-
) {
120-
@return _apply-font-family($font-family, (
121-
headline-1: $headline-1 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline1)),
122-
headline-2: $headline-2 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline2)),
123-
headline-3: $headline-3 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline3)),
124-
headline-4: $headline-4 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline4)),
125-
headline-5: $headline-5 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline5)),
126-
headline-6: $headline-6 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline6)),
127-
subtitle-1: $subtitle-1 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle1)),
128-
subtitle-2: $subtitle-2 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle2)),
129-
body-1: $body-1 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body1)),
130-
body-2: $body-2 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body2)),
131-
caption: $caption or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(caption)),
132-
button: $button or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(button)),
133-
overline: $overline or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(overline)),
134-
));
135-
}
136-
137-
/// Generates an Angular Material typography config based on values from the official Material
138-
/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
139-
/// the default values. The `mat-typography-level` function can be used to generate a custom
140-
/// typography level map which can be passed to this function to override one of the default levels.
141-
/// All default typography sizing generated by this function is in `rem` units.
142-
///
143-
/// @param {String} $font-family The font family to use for levels where it is not explicitly
144-
/// specified.
145-
/// @param {Map} $headline-1 The font settings for the headline-1 font level.
146-
/// @param {Map} $headline-2 The font settings for the headline-2 font level.
147-
/// @param {Map} $headline-3 The font settings for the headline-3 font level.
148-
/// @param {Map} $headline-4 The font settings for the headline-4 font level.
149-
/// @param {Map} $headline-5 The font settings for the headline-5 font level.
150-
/// @param {Map} $headline-6 The font settings for the headline-6 font level.
151-
/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
152-
/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
153-
/// @param {Map} $body-1 The font settings for the body-1 font level.
154-
/// @param {Map} $body-2 The font settings for the body-2 font level.
155-
/// @param {Map} $caption The font settings for the caption font level.
156-
/// @param {Map} $button The font settings for the button font level.
157-
/// @param {Map} $overline The font settings for the overline font level.
158-
/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
159-
@function define-rem-typography-config(
160-
// TODO(mmalerba): rename this function to define-typography-config,
161-
// and create a predefined px based config for people that need it.
162-
$font-family: mdc-typography.$font-family,
163-
$headline-1: null,
164-
$headline-2: null,
165-
$headline-3: null,
166-
$headline-4: null,
167-
$headline-5: null,
168-
$headline-6: null,
169-
$subtitle-1: null,
170-
$subtitle-2: null,
171-
$body-1: null,
172-
$body-2: null,
173-
$caption: null,
174-
$button: null,
175-
$overline: null,
176-
) {
177-
@return _apply-font-family($font-family, (
178-
headline-1: $headline-1 or mdc-helpers.typography-config-level-from-mdc(headline1),
179-
headline-2: $headline-2 or mdc-helpers.typography-config-level-from-mdc(headline2),
180-
headline-3: $headline-3 or mdc-helpers.typography-config-level-from-mdc(headline3),
181-
headline-4: $headline-4 or mdc-helpers.typography-config-level-from-mdc(headline4),
182-
headline-5: $headline-5 or mdc-helpers.typography-config-level-from-mdc(headline5),
183-
headline-6: $headline-6 or mdc-helpers.typography-config-level-from-mdc(headline6),
184-
subtitle-1: $subtitle-1 or mdc-helpers.typography-config-level-from-mdc(subtitle1),
185-
subtitle-2: $subtitle-2 or mdc-helpers.typography-config-level-from-mdc(subtitle2),
186-
body-1: $body-1 or mdc-helpers.typography-config-level-from-mdc(body1),
187-
body-2: $body-2 or mdc-helpers.typography-config-level-from-mdc(body2),
188-
caption: $caption or mdc-helpers.typography-config-level-from-mdc(caption),
189-
button: $button or mdc-helpers.typography-config-level-from-mdc(button),
190-
overline: $overline or mdc-helpers.typography-config-level-from-mdc(overline),
191-
));
192-
}
193-
19446
// Includes all of the typographic styles.
19547
@mixin all-component-typographies($config-or-theme: null) {
19648
$config: if(theming.private-is-theme-object($config-or-theme),

0 commit comments

Comments
 (0)