Skip to content

Commit eb6b900

Browse files
andrewseguinandrewseguin
committed
refactor: directly use typography instead of a ref
1 parent 2ed82bc commit eb6b900

File tree

6 files changed

+85
-117
lines changed

6 files changed

+85
-117
lines changed

‎src/material/core/theming/_definition.scss‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -83,19 +83,20 @@ $theme-version: 1;
8383
$system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
8484
sass-utils.$use-system-typography-variables: map.get($config, use-system-variables) or false;
8585

86+
$typography: (
87+
plain: $plain,
88+
brand: $brand,
89+
bold: $bold,
90+
medium: $medium,
91+
regular: $regular,
92+
);
93+
8694
@return (
8795
$internals: (
8896
theme-version: $theme-version,
89-
font-definition: (
90-
plain: $plain,
91-
brand: $brand,
92-
bold: $bold,
93-
medium: $medium,
94-
regular: $regular,
95-
),
97+
font-definition: $typography,
9698
typography-system-variables-prefix: $system-variables-prefix,
97-
typography-tokens: m3-tokens.generate-typography-tokens(
98-
$brand, $plain, $bold, $medium, $regular, $system-variables-prefix)
99+
typography-tokens: m3-tokens.generate-typography-tokens($typography, $system-variables-prefix)
99100
)
100101
);
101102
}

‎src/material/core/tokens/_m3-system.scss‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,13 @@
132132
@mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) {
133133
$sys-names: map-merge-all(
134134
m3.md-sys-color-values-light(palettes.$blue-palette),
135-
m3.md-sys-typescale-values(),
135+
m3.md-sys-typescale-values((
136+
brand: (Roboto),
137+
plain: (Roboto),
138+
bold: 700,
139+
medium: 500,
140+
regular: 400
141+
)),
136142
m3.md-sys-elevation-values(),
137143
m3.md-sys-shape-values(),
138144
m3.md-sys-state-values());
@@ -196,22 +202,14 @@
196202

197203
@mixin system-level-typography($theme, $overrides: (), $prefix: null) {
198204
$font-definition: map.get($theme, _mat-theming-internals-do-not-access, font-definition);
199-
$brand: map.get($font-definition, brand);
200-
$plain: map.get($font-definition, plain);
201-
$bold: map.get($font-definition, bold);
202-
$medium: map.get($font-definition, medium);
203-
$regular: map.get($font-definition, regular);
204-
$ref: (md-ref-typeface:
205-
m3-tokens.generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
206-
);
207205

208206
@if (not $prefix) {
209207
$prefix: map.get($theme, _mat-theming-internals-do-not-access,
210208
typography-system-variables-prefix) or definition.$system-level-prefix;
211209
}
212210

213211
& {
214-
@each $name, $value in m3.md-sys-typescale-values($ref) {
212+
@each $name, $value in m3.md-sys-typescale-values($font-definition) {
215213
--#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
216214
}
217215
}
@@ -265,7 +263,13 @@
265263
'md-sys-color':
266264
_create-system-app-vars-map(m3.md-sys-color-values-light(palettes.$blue-palette)),
267265
'md-sys-typescale':
268-
_create-system-app-vars-map(m3.md-sys-typescale-values()),
266+
_create-system-app-vars-map(m3.md-sys-typescale-values((
267+
brand: (Roboto),
268+
plain: (Roboto),
269+
bold: 700,
270+
medium: 500,
271+
regular: 400
272+
))),
269273
'md-sys-elevation':
270274
_create-system-app-vars-map(m3.md-sys-elevation-values()),
271275
'md-sys-state':

‎src/material/core/tokens/_m3-tokens.scss‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -178,8 +178,8 @@ $_cached-token-slots: null;
178178
@return $sys-color;
179179
}
180180

181-
@function _get-sys-typeface($ref, $prefix) {
182-
$sys-typography: m3.md-sys-typescale-values($ref);
181+
@function _get-sys-typeface($typography, $prefix) {
182+
$sys-typography: m3.md-sys-typescale-values($typography);
183183
@if (sass-utils.$use-system-typography-variables) {
184184
$var-values: ();
185185
@each $key in map.keys($sys-typography) {
@@ -222,12 +222,8 @@ $_cached-token-slots: null;
222222
/// @param {String|Number} $regular The regular font-weight
223223
/// @param {String} $system-variables-prefix The prefix of system tokens
224224
/// @return {Map} A map of namespaced typography tokens
225-
@function generate-typography-tokens($brand, $plain, $bold, $medium, $regular,
226-
$system-variables-prefix) {
227-
$ref: (
228-
md-ref-typeface: generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
229-
);
230-
$sys-typeface: _get-sys-typeface($ref, $system-variables-prefix);
225+
@function generate-typography-tokens($typography, $system-variables-prefix) {
226+
$sys-typeface: _get-sys-typeface($typography, $system-variables-prefix);
231227
@return generate-tokens((
232228
md-sys-typescale: $sys-typeface
233229
));

‎src/material/core/tokens/m3/_index.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@forward './md-ref-palette';
2-
@forward './md-ref-typeface';
31
@forward './md-sys-color';
42
@forward './md-sys-elevation';
53
@forward './md-sys-motion';

‎src/material/core/tokens/m3/_md-ref-typeface.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
@return (
88
brand: (Roboto),
99
plain: (Roboto),
10-
weight-bold: 700,
11-
weight-medium: 500,
12-
weight-regular: 400
10+
bold: 700,
11+
medium: 500,
12+
regular: 400
1313
);
1414
}

‎src/material/core/tokens/m3/_md-sys-typescale.scss‎

Lines changed: 53 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -10,137 +10,106 @@
1010
// Indicates whether alternative tokens should be used
1111
$_alternate-tokens: false;
1212

13-
$_default: (
14-
md-ref-typeface: md-ref-typeface.md-ref-typeface-values(),
15-
);
13+
@function md-sys-typescale-values($typography) {
14+
$plain: map.get($typography, plain);
15+
$brand: map.get($typography, brand);
16+
$bold: map.get($typography, bold);
17+
$medium: map.get($typography, medium);
18+
$regular: map.get($typography, regular);
1619

17-
@function md-sys-typescale-values($deps: $_default) {
1820
$values: (
19-
body-large:
20-
map.get($deps, 'md-ref-typeface', 'weight-regular')
21-
1rem #{'/'} 1.5rem map.get($deps, 'md-ref-typeface', 'plain'),
22-
body-large-font: map.get($deps, 'md-ref-typeface', 'plain'),
21+
body-large: $regular 1rem #{'/'} 1.5rem $plain,
22+
body-large-font: $plain,
2323
body-large-line-height: 1.5rem,
2424
body-large-size: 1rem,
2525
body-large-tracking: 0.031rem,
26-
body-large-weight: map.get($deps, 'md-ref-typeface', 'weight-regular'),
27-
body-medium:
28-
map.get($deps, 'md-ref-typeface', 'weight-regular')
29-
0.875rem #{'/'} 1.25rem map.get($deps, 'md-ref-typeface', 'plain'),
30-
body-medium-font: map.get($deps, 'md-ref-typeface', 'plain'),
26+
body-large-weight: $regular,
27+
body-medium: $regular 0.875rem #{'/'} 1.25rem $plain,
28+
body-medium-font: $plain,
3129
body-medium-line-height: 1.25rem,
3230
body-medium-size: 0.875rem,
3331
body-medium-tracking: 0.016rem,
34-
body-medium-weight: map.get($deps, 'md-ref-typeface', 'weight-regular'),
35-
body-small:
36-
map.get($deps, 'md-ref-typeface', 'weight-regular')
37-
0.75rem #{'/'} 1rem map.get($deps, 'md-ref-typeface', 'plain'),
38-
body-small-font: map.get($deps, 'md-ref-typeface', 'plain'),
32+
body-medium-weight: $regular,
33+
body-small: $regular 0.75rem #{'/'} 1rem $plain,
34+
body-small-font: $plain,
3935
body-small-line-height: 1rem,
4036
body-small-size: 0.75rem,
4137
body-small-tracking: 0.025rem,
42-
body-small-weight: map.get($deps, 'md-ref-typeface', 'weight-regular'),
43-
display-large:
44-
map.get($deps, 'md-ref-typeface', 'weight-regular')
45-
3.562rem #{'/'} 4rem map.get($deps, 'md-ref-typeface', 'brand'),
46-
display-large-font: map.get($deps, 'md-ref-typeface', 'brand'),
38+
body-small-weight: $regular,
39+
display-large: $regular 3.562rem #{'/'} 4rem $brand,
40+
display-large-font: $brand,
4741
display-large-line-height: 4rem,
4842
display-large-size: 3.562rem,
4943
display-large-tracking: -0.016rem,
50-
display-large-weight: map.get($deps, 'md-ref-typeface', 'weight-regular'),
51-
display-medium:
52-
map.get($deps, 'md-ref-typeface', 'weight-regular')
53-
2.812rem #{'/'} 3.25rem map.get($deps, 'md-ref-typeface', 'brand'),
54-
display-medium-font: map.get($deps, 'md-ref-typeface', 'brand'),
44+
display-large-weight: $regular,
45+
display-medium: $regular 2.812rem #{'/'} 3.25rem $brand,
46+
display-medium-font: $brand,
5547
display-medium-line-height: 3.25rem,
5648
display-medium-size: 2.812rem,
5749
display-medium-tracking: 0,
58-
display-medium-weight: map.get($deps, 'md-ref-typeface', 'weight-regular'),
59-
display-small:
60-
map.get($deps, 'md-ref-typeface', 'weight-regular')
61-
2.25rem #{'/'} 2.75rem map.get($deps, 'md-ref-typeface', 'brand'),
62-
display-small-font: map.get($deps, 'md-ref-typeface', 'brand'),
50+
display-medium-weight: $regular,
51+
display-small: $regular 2.25rem #{'/'} 2.75rem $brand,
52+
display-small-font: $brand,
6353
display-small-line-height: 2.75rem,
6454
display-small-size: 2.25rem,
6555
display-small-tracking: 0,
66-
display-small-weight: map.get($deps, 'md-ref-typeface', 'weight-regular'),
67-
headline-large:
68-
map.get($deps, 'md-ref-typeface', 'weight-regular')
69-
2rem #{'/'} 2.5rem map.get($deps, 'md-ref-typeface', 'brand'),
70-
headline-large-font: map.get($deps, 'md-ref-typeface', 'brand'),
56+
display-small-weight: $regular,
57+
headline-large: $regular 2rem #{'/'} 2.5rem $brand,
58+
headline-large-font: $brand,
7159
headline-large-line-height: 2.5rem,
7260
headline-large-size: 2rem,
7361
headline-large-tracking: 0,
74-
headline-large-weight: map.get($deps, 'md-ref-typeface', 'weight-regular'),
75-
headline-medium:
76-
map.get($deps, 'md-ref-typeface', 'weight-regular')
77-
1.75rem #{'/'} 2.25rem map.get($deps, 'md-ref-typeface', 'brand'),
78-
headline-medium-font: map.get($deps, 'md-ref-typeface', 'brand'),
62+
headline-large-weight: $regular,
63+
headline-medium: $regular 1.75rem #{'/'} 2.25rem $brand,
64+
headline-medium-font: $brand,
7965
headline-medium-line-height: 2.25rem,
8066
headline-medium-size: 1.75rem,
8167
headline-medium-tracking: 0,
82-
headline-medium-weight:
83-
map.get($deps, 'md-ref-typeface', 'weight-regular'),
84-
headline-small:
85-
map.get($deps, 'md-ref-typeface', 'weight-regular')
86-
1.5rem #{'/'} 2rem map.get($deps, 'md-ref-typeface', 'brand'),
87-
headline-small-font: map.get($deps, 'md-ref-typeface', 'brand'),
68+
headline-medium-weight: $regular,
69+
headline-small: $regular 1.5rem #{'/'} 2rem $brand,
70+
headline-small-font: $brand,
8871
headline-small-line-height: 2rem,
8972
headline-small-size: 1.5rem,
9073
headline-small-tracking: 0,
91-
headline-small-weight: map.get($deps, 'md-ref-typeface', 'weight-regular'),
92-
label-large:
93-
map.get($deps, 'md-ref-typeface', 'weight-medium')
94-
0.875rem #{'/'} 1.25rem map.get($deps, 'md-ref-typeface', 'plain'),
95-
label-large-font: map.get($deps, 'md-ref-typeface', 'plain'),
74+
headline-small-weight: $regular,
75+
label-large: $medium 0.875rem #{'/'} 1.25rem $plain,
76+
label-large-font: $plain,
9677
label-large-line-height: 1.25rem,
9778
label-large-size: 0.875rem,
9879
label-large-tracking: 0.006rem,
99-
label-large-weight: map.get($deps, 'md-ref-typeface', 'weight-medium'),
100-
label-large-weight-prominent:
101-
map.get($deps, 'md-ref-typeface', 'weight-bold'),
102-
label-medium:
103-
map.get($deps, 'md-ref-typeface', 'weight-medium')
104-
0.75rem #{'/'} 1rem map.get($deps, 'md-ref-typeface', 'plain'),
105-
label-medium-font: map.get($deps, 'md-ref-typeface', 'plain'),
80+
label-large-weight: $medium,
81+
label-large-weight-prominent: $bold,
82+
label-medium: $medium 0.75rem #{'/'} 1rem $plain,
83+
label-medium-font: $plain,
10684
label-medium-line-height: 1rem,
10785
label-medium-size: 0.75rem,
10886
label-medium-tracking: 0.031rem,
109-
label-medium-weight: map.get($deps, 'md-ref-typeface', 'weight-medium'),
110-
label-medium-weight-prominent:
111-
map.get($deps, 'md-ref-typeface', 'weight-bold'),
112-
label-small:
113-
map.get($deps, 'md-ref-typeface', 'weight-medium')
114-
0.688rem #{'/'} 1rem map.get($deps, 'md-ref-typeface', 'plain'),
115-
label-small-font: map.get($deps, 'md-ref-typeface', 'plain'),
87+
label-medium-weight: $medium,
88+
label-medium-weight-prominent: $bold,
89+
label-small: $medium 0.688rem #{'/'} 1rem $plain,
90+
label-small-font: $plain,
11691
label-small-line-height: 1rem,
11792
label-small-size: 0.688rem,
11893
label-small-tracking: 0.031rem,
119-
label-small-weight: map.get($deps, 'md-ref-typeface', 'weight-medium'),
120-
title-large:
121-
map.get($deps, 'md-ref-typeface', 'weight-regular')
122-
1.375rem #{'/'} 1.75rem map.get($deps, 'md-ref-typeface', 'brand'),
123-
title-large-font: map.get($deps, 'md-ref-typeface', 'brand'),
94+
label-small-weight: $medium,
95+
title-large: $regular 1.375rem #{'/'} 1.75rem $brand,
96+
title-large-font: $brand,
12497
title-large-line-height: 1.75rem,
12598
title-large-size: 1.375rem,
12699
title-large-tracking: 0,
127-
title-large-weight: map.get($deps, 'md-ref-typeface', 'weight-regular'),
128-
title-medium:
129-
map.get($deps, 'md-ref-typeface', 'weight-medium')
130-
1rem #{'/'} 1.5rem map.get($deps, 'md-ref-typeface', 'plain'),
131-
title-medium-font: map.get($deps, 'md-ref-typeface', 'plain'),
100+
title-large-weight: $regular,
101+
title-medium: $medium 1rem #{'/'} 1.5rem $plain,
102+
title-medium-font: $plain,
132103
title-medium-line-height: 1.5rem,
133104
title-medium-size: 1rem,
134105
title-medium-tracking: 0.009rem,
135-
title-medium-weight: map.get($deps, 'md-ref-typeface', 'weight-medium'),
136-
title-small:
137-
map.get($deps, 'md-ref-typeface', 'weight-medium')
138-
0.875rem #{'/'} 1.25rem map.get($deps, 'md-ref-typeface', 'plain'),
139-
title-small-font: map.get($deps, 'md-ref-typeface', 'plain'),
106+
title-medium-weight: $medium,
107+
title-small: $medium 0.875rem #{'/'} 1.25rem $plain,
108+
title-small-font: $plain,
140109
title-small-line-height: 1.25rem,
141110
title-small-size: 0.875rem,
142111
title-small-tracking: 0.006rem,
143-
title-small-weight: map.get($deps, 'md-ref-typeface', 'weight-medium')
112+
title-small-weight: $medium
144113
);
145114

146115
@if ($_alternate-tokens) {

0 commit comments

Comments
 (0)