Skip to content

Commit e0bc165

Browse files
andrewseguinandrewseguin
authored
refactor: use system-level typography (#31334)
* refactor: create an m2 system directory * refactor: remove unused typography var * refactor: use system-level typography * refactor: fix old theming config case * refactor: fixes found from internal tests * refactor: take 2014 config into account
1 parent 3bde4f7 commit e0bc165

33 files changed

+337
-401
lines changed

‎src/material/badge/_m2-badge.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@use 'sass:map';
22
@use 'sass:math';
3-
@use '../core/theming/inspection';
43
@use '../core/tokens/m2-utils';
54
@use '../core/tokens/m3-utils';
65

@@ -64,10 +63,12 @@ $_large-size: $_default-size + 6px;
6463

6564
// Tokens that can be configured through Angular Material's typography theming API.
6665
@function get-typography-tokens($theme) {
66+
$system: m2-utils.get-system($theme);
67+
6768
$base-size: 12px;
6869

6970
@return (
70-
badge-text-font: inspection.get-theme-typography($theme, body-2, font-family),
71+
badge-text-font: map.get($system, body-medium-font),
7172
badge-line-height: $_default-size,
7273
badge-text-size: $base-size,
7374
badge-text-weight: 600,

‎src/material/bottom-sheet/_m2-bottom-sheet.scss

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '../core/theming/inspection';
21
@use '../core/tokens/m2-utils';
32
@use 'sass:map';
43

@@ -23,15 +22,13 @@
2322

2423
// Tokens that can be configured through Angular Material's typography theming API.
2524
@function get-typography-tokens($theme) {
25+
$system: m2-utils.get-system($theme);
2626
@return (
27-
bottom-sheet-container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
28-
bottom-sheet-container-text-line-height:
29-
inspection.get-theme-typography($theme, body-2, line-height),
30-
bottom-sheet-container-text-size: inspection.get-theme-typography($theme, body-2, font-size),
31-
bottom-sheet-container-text-tracking:
32-
inspection.get-theme-typography($theme, body-2, letter-spacing),
33-
bottom-sheet-container-text-weight:
34-
inspection.get-theme-typography($theme, body-2, font-weight),
27+
bottom-sheet-container-text-font: map.get($system, body-medium-font),
28+
bottom-sheet-container-text-line-height: map.get($system, body-medium-line-height),
29+
bottom-sheet-container-text-size: map.get($system, body-medium-size),
30+
bottom-sheet-container-text-tracking: map.get($system, body-medium-tracking),
31+
bottom-sheet-container-text-weight: map.get($system, body-medium-weight),
3532
);
3633
}
3734

‎src/material/button-toggle/_m2-button-toggle.scss

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -53,24 +53,18 @@
5353

5454
// Tokens that can be configured through Angular Material's typography theming API.
5555
@function get-typography-tokens($theme) {
56+
$system: m2-utils.get-system($theme);
5657
@return (
57-
button-toggle-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
58-
button-toggle-label-text-line-height:
59-
inspection.get-theme-typography($theme, body-1, line-height),
60-
button-toggle-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
61-
button-toggle-label-text-tracking:
62-
inspection.get-theme-typography($theme, body-1, letter-spacing),
63-
button-toggle-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
64-
button-toggle-legacy-label-text-font:
65-
inspection.get-theme-typography($theme, body-1, font-family),
66-
button-toggle-legacy-label-text-line-height:
67-
inspection.get-theme-typography($theme, body-1, line-height),
68-
button-toggle-legacy-label-text-size:
69-
inspection.get-theme-typography($theme, body-1, font-size),
70-
button-toggle-legacy-label-text-tracking:
71-
inspection.get-theme-typography($theme, body-1, letter-spacing),
72-
button-toggle-legacy-label-text-weight:
73-
inspection.get-theme-typography($theme, body-1, font-weight),
58+
button-toggle-label-text-font: map.get($system, body-large-font),
59+
button-toggle-label-text-line-height: map.get($system, body-large-line-height),
60+
button-toggle-label-text-size: map.get($system, body-large-size),
61+
button-toggle-label-text-tracking: map.get($system, body-large-tracking),
62+
button-toggle-label-text-weight: map.get($system, body-large-weight),
63+
button-toggle-legacy-label-text-font: map.get($system, body-large-font),
64+
button-toggle-legacy-label-text-line-height: map.get($system, body-large-line-height),
65+
button-toggle-legacy-label-text-size: map.get($system, body-large-size),
66+
button-toggle-legacy-label-text-tracking: map.get($system, body-large-tracking),
67+
button-toggle-legacy-label-text-weight: map.get($system, body-large-weight),
7468
);
7569
}
7670

‎src/material/button/_m2-button.scss

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -143,38 +143,34 @@
143143

144144
// Tokens that can be configured through Angular Material's typography theming API.
145145
@function get-typography-tokens($theme) {
146-
$font-family: inspection.get-theme-typography($theme, button, font-family);
147-
$font-size: inspection.get-theme-typography($theme, button, font-size);
148-
$font-weight: inspection.get-theme-typography($theme, button, font-weight);
149-
$letter-spacing: inspection.get-theme-typography($theme, button, letter-spacing);
150-
$text-transform: none;
146+
$system: m2-utils.get-system($theme);
151147

152148
@return (
153-
button-filled-label-text-font: $font-family,
154-
button-filled-label-text-size: $font-size,
155-
button-filled-label-text-tracking: $letter-spacing,
149+
button-filled-label-text-font: map.get($system, label-small-font),
150+
button-filled-label-text-size: map.get($system, label-small-size),
151+
button-filled-label-text-tracking: map.get($system, label-small-tracking),
156152
button-filled-label-text-transform: none,
157-
button-filled-label-text-weight: $font-weight,
158-
button-outlined-label-text-font: $font-family,
159-
button-outlined-label-text-size: $font-size,
160-
button-outlined-label-text-tracking: $letter-spacing,
153+
button-filled-label-text-weight: map.get($system, label-small-weight),
154+
button-outlined-label-text-font: map.get($system, label-small-font),
155+
button-outlined-label-text-size: map.get($system, label-small-size),
156+
button-outlined-label-text-tracking: map.get($system, label-small-tracking),
161157
button-outlined-label-text-transform: none,
162-
button-outlined-label-text-weight: $font-weight,
163-
button-protected-label-text-font: $font-family,
164-
button-protected-label-text-size: $font-size,
165-
button-protected-label-text-tracking: $letter-spacing,
158+
button-outlined-label-text-weight: map.get($system, label-small-weight),
159+
button-protected-label-text-font: map.get($system, label-small-font),
160+
button-protected-label-text-size: map.get($system, label-small-size),
161+
button-protected-label-text-tracking: map.get($system, label-small-tracking),
166162
button-protected-label-text-transform: none,
167-
button-protected-label-text-weight: $font-weight,
168-
button-text-label-text-font: $font-family,
169-
button-text-label-text-size: $font-size,
170-
button-text-label-text-tracking: $letter-spacing,
163+
button-protected-label-text-weight: map.get($system, label-small-weight),
164+
button-text-label-text-font: map.get($system, label-small-font),
165+
button-text-label-text-size: map.get($system, label-small-size),
166+
button-text-label-text-tracking: map.get($system, label-small-tracking),
171167
button-text-label-text-transform: none,
172-
button-text-label-text-weight: $font-weight,
173-
button-tonal-label-text-font: $font-family,
174-
button-tonal-label-text-size: $font-size,
175-
button-tonal-label-text-tracking: $letter-spacing,
168+
button-text-label-text-weight: map.get($system, label-small-weight),
169+
button-tonal-label-text-font: map.get($system, label-small-font),
170+
button-tonal-label-text-size: map.get($system, label-small-size),
171+
button-tonal-label-text-tracking: map.get($system, label-small-tracking),
176172
button-tonal-label-text-transform: none,
177-
button-tonal-label-text-weight: $font-weight,
173+
button-tonal-label-text-weight: map.get($system, label-small-weight),
178174
);
179175
}
180176

‎src/material/button/_m2-fab.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,12 +82,12 @@
8282

8383
// Tokens that can be configured through Angular Material's typography theming API.
8484
@function get-typography-tokens($theme) {
85+
$system: m2-utils.get-system($theme);
8586
@return (
86-
fab-extended-label-text-font: inspection.get-theme-typography($theme, button, font-family),
87-
fab-extended-label-text-size: inspection.get-theme-typography($theme, button, font-size),
88-
fab-extended-label-text-tracking:
89-
inspection.get-theme-typography($theme, button, letter-spacing),
90-
fab-extended-label-text-weight: inspection.get-theme-typography($theme, button, font-weight)
87+
fab-extended-label-text-font: map.get($system, label-small-font),
88+
fab-extended-label-text-size: map.get($system, label-small-size),
89+
fab-extended-label-text-tracking: map.get($system, label-small-tracking),
90+
fab-extended-label-text-weight: map.get($system, label-small-weight)
9191
);
9292
}
9393

‎src/material/card/_m2-card.scss

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '../core/theming/inspection';
21
@use '../core/style/elevation';
32
@use '../core/tokens/m2-utils';
43
@use 'sass:map';
@@ -32,19 +31,18 @@
3231

3332
// Tokens that can be configured through Angular Material's typography theming API.
3433
@function get-typography-tokens($theme) {
34+
$system: m2-utils.get-system($theme);
3535
@return (
36-
card-title-text-font: inspection.get-theme-typography($theme, headline-6, font-family),
37-
card-title-text-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
38-
card-title-text-size: inspection.get-theme-typography($theme, headline-6, font-size),
39-
card-title-text-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
40-
card-title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
41-
card-subtitle-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
42-
card-subtitle-text-line-height:
43-
inspection.get-theme-typography($theme, subtitle-2, line-height),
44-
card-subtitle-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
45-
card-subtitle-text-tracking:
46-
inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
47-
card-subtitle-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
36+
card-title-text-font: map.get($system, title-small-font),
37+
card-title-text-line-height: map.get($system, title-small-line-height),
38+
card-title-text-size: map.get($system, title-small-size),
39+
card-title-text-tracking: map.get($system, title-small-tracking),
40+
card-title-text-weight: map.get($system, title-small-weight),
41+
card-subtitle-text-font: map.get($system, label-medium-font),
42+
card-subtitle-text-line-height: map.get($system, label-medium-line-height),
43+
card-subtitle-text-size: map.get($system, label-medium-size),
44+
card-subtitle-text-tracking: map.get($system, label-medium-tracking),
45+
card-subtitle-text-weight: map.get($system, label-medium-weight),
4846
);
4947
}
5048

‎src/material/checkbox/_m2-checkbox.scss

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,13 @@
5757

5858
// Tokens that can be configured through Angular Material's typography theming API.
5959
@function get-typography-tokens($theme) {
60+
$system: m2-utils.get-system($theme);
6061
@return (
61-
checkbox-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
62-
checkbox-label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
63-
checkbox-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
64-
checkbox-label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
65-
checkbox-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
62+
checkbox-label-text-font: map.get($system, body-medium-font),
63+
checkbox-label-text-line-height: map.get($system, body-medium-line-height),
64+
checkbox-label-text-size: map.get($system, body-medium-size),
65+
checkbox-label-text-tracking: map.get($system, body-medium-tracking),
66+
checkbox-label-text-weight: map.get($system, body-medium-weight)
6667
);
6768
}
6869

‎src/material/chips/_m2-chip.scss

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,12 +72,13 @@
7272

7373
// Tokens that can be configured through Angular Material's typography theming API.
7474
@function get-typography-tokens($theme) {
75+
$system: m2-utils.get-system($theme);
7576
@return (
76-
chip-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
77-
chip-label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
78-
chip-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
79-
chip-label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
80-
chip-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
77+
chip-label-text-font: map.get($system, body-medium-font),
78+
chip-label-text-line-height: map.get($system, body-medium-line-height),
79+
chip-label-text-size: map.get($system, body-medium-size),
80+
chip-label-text-tracking: map.get($system, body-medium-tracking),
81+
chip-label-text-weight: map.get($system, body-medium-weight)
8182
);
8283
}
8384

‎src/material/core/m2/_theming.scss

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -114,20 +114,26 @@
114114
@return $theme;
115115
}
116116

117-
@function _define-system($primary, $accent, $warn, $is-dark) {
117+
@function _define-system($primary, $accent, $warn, $is-dark, $typography) {
118118
$palettes: (
119119
primary: $primary,
120120
accent: $accent,
121121
warn: $warn,
122122
);
123123

124-
$color: if(
124+
$sys-color: if(
125125
$is-dark,
126126
m2.md-sys-color-values-dark($palettes),
127127
m2.md-sys-color-values-light($palettes));
128-
$state: m2.md-sys-state-values();
128+
$sys-state: m2.md-sys-state-values();
129+
$sys-typography: m2.md-sys-typescale-values($typography);
129130

130-
@return map.merge($color, $state);
131+
$system: ();
132+
@each $map in ($sys-color, $sys-state, $sys-typography) {
133+
$system: map.merge($system, $map);
134+
}
135+
136+
@return $system;
131137
}
132138

133139
// Creates a color configuration from the specified
@@ -177,7 +183,13 @@
177183
);
178184

179185
$theme: _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
180-
$theme: map.set($theme, _mat-system, _define-system($primary, $accent, $warn, $is-dark));
186+
$system: _define-system(
187+
$primary: $primary,
188+
$accent: $accent,
189+
$warn: $warn,
190+
$is-dark: $is-dark,
191+
$typography: ());
192+
$theme: map.set($theme, _mat-system, $system);
181193
@return $theme;
182194
}
183195
// If the map pattern is used (1), we just pass-through the configurations for individual
@@ -199,10 +211,13 @@
199211
$theme: _internalize-theme(
200212
theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
201213
);
202-
$primary: map.get($result, primary) or map.get($result, color, primary) or ();
203-
$accent: map.get($result, accent) or map.get($result, color, accent) or ();
204-
$warn: map.get($result, warn) or map.get($result, color, warn) or ();
205-
$theme: map.set($theme, _mat-system, _define-system($primary, $accent, $warn, $is-dark));
214+
$system: _define-system(
215+
$primary: map.get($result, primary) or map.get($result, color, primary) or (),
216+
$accent: map.get($result, accent) or map.get($result, color, accent) or (),
217+
$warn: map.get($result, warn) or map.get($result, color, warn) or (),
218+
$is-dark: $is-dark,
219+
$typography: map.get($result, typography) or ());
220+
$theme: map.set($theme, _mat-system, $system);
206221
@return $theme;
207222
}
208223

‎src/material/core/option/_m2-optgroup.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '../theming/inspection';
21
@use '../tokens/m2-utils';
32
@use 'sass:map';
43

@@ -18,12 +17,13 @@
1817

1918
// Tokens that can be configured through Angular Material's typography theming API.
2019
@function get-typography-tokens($theme) {
20+
$system: m2-utils.get-system($theme);
2121
@return (
22-
optgroup-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
23-
optgroup-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
24-
optgroup-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
25-
optgroup-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
26-
optgroup-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight)
22+
optgroup-label-text-font: map.get($system, body-large-font),
23+
optgroup-label-text-line-height: map.get($system, body-large-line-height),
24+
optgroup-label-text-size: map.get($system, body-large-size),
25+
optgroup-label-text-tracking: map.get($system, body-large-tracking),
26+
optgroup-label-text-weight: map.get($system, body-large-weight)
2727
);
2828
}
2929

‎src/material/core/option/_m2-option.scss

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,13 @@
2929

3030
// Tokens that can be configured through Angular Material's typography theming API.
3131
@function get-typography-tokens($theme) {
32+
$system: m2-utils.get-system($theme);
3233
@return (
33-
option-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
34-
option-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
35-
option-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
36-
option-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
37-
option-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight)
34+
option-label-text-font: map.get($system, body-large-font),
35+
option-label-text-line-height: map.get($system, body-large-line-height),
36+
option-label-text-size: map.get($system, body-large-size),
37+
option-label-text-tracking: map.get($system, body-large-tracking),
38+
option-label-text-weight: map.get($system, body-large-weight)
3839
);
3940
}
4041

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use 'sass:map';
2+
@use './m2';
23

34
// Gets the theme's system values as a flat map.
45
@function get-system($theme) {
@@ -7,5 +8,10 @@
78
@return $system;
89
}
910

11+
// If the $theme is a typography-config, convert it to a system map.
12+
@if map.has-key($theme, body-1) {
13+
@return m2.md-sys-typescale-values($theme);
14+
}
15+
1016
@return ();
1117
}

0 commit comments

Comments
 (0)