Skip to content

Commit 03be924

Browse files
mmalerbammalerba
authored
refactor(material/theming): normalize config in all typography mixins for mdc components (#21935)
* refactor(material/theming): normalize config in all typography mixins for mdc components This is split off of #21778 which covers non-MDC conmponents as well * fixup! refactor(material/theming): normalize config in all typography mixins for mdc components * fixup! refactor(material/theming): normalize config in all typography mixins for mdc components * fixup! refactor(material/theming): normalize config in all typography mixins for mdc components
1 parent ff69e19 commit 03be924

File tree

26 files changed

+100
-112
lines changed

26 files changed

+100
-112
lines changed

‎src/dev-app/theme.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ $candy-app-theme: mat.define-light-theme((
1515
accent: $candy-app-accent
1616
),
1717
// Define the default typography for our app.
18+
// TODO(mmalerba): Update to `mat-mdc-typography-config()` once non-MDC components can handle
19+
// 2018 configs.
1820
typography: mat.define-typography-config(),
1921
// Define the default density level for our app.
2022
density: 0,

‎src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use '@material/menu-surface/mixins' as mdc-menu-surface;
22
@use '@material/list/mixins' as mdc-list;
33
@use '../mdc-helpers/mdc-helpers';
4+
@use '../../material/core/typography/typography';
45
@use '../../material/core/theming/theming';
56

67
@mixin color($config-or-theme) {
@@ -12,7 +13,8 @@
1213
}
1314

1415
@mixin typography($config-or-theme) {
15-
$config: theming.get-typography-config($config-or-theme);
16+
$config: typography.private-typography-to-2018-config(
17+
theming.get-typography-config($config-or-theme));
1618
@include mdc-helpers.mat-using-mdc-typography($config) {
1719
@include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
1820

‎src/material-experimental/mdc-button/_button-theme.scss

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@use '@material/theme/theme' as mdc-theme;
99
@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
1010
@use '../../material/core/ripple/ripple-theme';
11+
@use '../../material/core/typography/typography';
1112
@use '../mdc-helpers/mdc-helpers';
1213
@use '../../material/core/theming/theming';
1314

@@ -189,7 +190,8 @@ $mat-fab-state-target: '.mdc-fab__ripple';
189190
}
190191

191192
@mixin typography($config-or-theme) {
192-
$config: theming.get-typography-config($config-or-theme);
193+
$config: typography.private-typography-to-2018-config(
194+
theming.get-typography-config($config-or-theme));
193195
@include mdc-helpers.mat-using-mdc-typography($config) {
194196
@include mdc-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
195197
}
@@ -281,7 +283,8 @@ $mat-fab-state-target: '.mdc-fab__ripple';
281283
}
282284

283285
@mixin fab-typography($config-or-theme) {
284-
$config: theming.get-typography-config($config-or-theme);
286+
$config: typography.private-typography-to-2018-config(
287+
theming.get-typography-config($config-or-theme));
285288
@include mdc-helpers.mat-using-mdc-typography($config) {
286289
@include mdc-fab.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
287290
}
@@ -350,7 +353,8 @@ $mat-fab-state-target: '.mdc-fab__ripple';
350353
}
351354

352355
@mixin icon-button-typography($config-or-theme) {
353-
$config: theming.get-typography-config($config-or-theme);
356+
$config: typography.private-typography-to-2018-config(
357+
theming.get-typography-config($config-or-theme));
354358
@include mdc-helpers.mat-using-mdc-typography($config) {
355359
@include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
356360
}

‎src/material-experimental/mdc-card/_card-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@use 'sass:color';
55
@use 'sass:map';
66
@use '../mdc-helpers/mdc-helpers';
7+
@use '../../material/core/typography/typography';
78
@use '../../material/core/theming/theming';
89

910
@mixin color($config-or-theme) {
@@ -34,7 +35,8 @@
3435
}
3536

3637
@mixin typography($config-or-theme) {
37-
$config: theming.get-typography-config($config-or-theme);
38+
$config: typography.private-typography-to-2018-config(
39+
theming.get-typography-config($config-or-theme));
3840
@include mdc-helpers.mat-using-mdc-typography($config) {
3941
@include mdc-card.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
4042

‎src/material-experimental/mdc-checkbox/_checkbox-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@use '@material/theme/theme';
77
@use 'sass:map';
88
@use '../mdc-helpers/mdc-helpers';
9+
@use '../../material/core/typography/typography';
910
@use '../../material/core/theming/theming';
1011
@use '../../material/core/ripple/ripple-theme';
1112

@@ -108,7 +109,8 @@
108109
}
109110

110111
@mixin typography($config-or-theme) {
111-
$config: theming.get-typography-config($config-or-theme);
112+
$config: typography.private-typography-to-2018-config(
113+
theming.get-typography-config($config-or-theme));
112114
@include mdc-helpers.mat-using-mdc-typography($config) {
113115
@include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
114116
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);

‎src/material-experimental/mdc-chips/_chips-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use 'sass:color';
44
@use 'sass:map';
55
@use '../mdc-helpers/mdc-helpers';
6+
@use '../../material/core/typography/typography';
67
@use '../../material/core/theming/theming';
78

89
@mixin _selected-color($color) {
@@ -75,7 +76,8 @@
7576
}
7677

7778
@mixin typography($config-or-theme) {
78-
$config: theming.get-typography-config($config-or-theme);
79+
$config: typography.private-typography-to-2018-config(
80+
theming.get-typography-config($config-or-theme));
7981
@include mdc-chips.set-core-styles($query: mdc-helpers.$mat-typography-styles-query);
8082
@include mdc-helpers.mat-using-mdc-typography($config) {
8183
@include mdc-chips.without-ripple($query: mdc-helpers.$mat-typography-styles-query);

‎src/material-experimental/mdc-core/option/_optgroup-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@use '@material/theme/theme' as mdc-theme;
33
@use '../../mdc-helpers/mdc-helpers';
44
@use '../../../material/core/theming/theming';
5+
@use '../../../material/core/typography/typography';
56

67
@mixin color($config-or-theme) {
78
$config: theming.get-color-config($config-or-theme);
@@ -18,7 +19,8 @@
1819
}
1920

2021
@mixin typography($config-or-theme) {
21-
$config: theming.get-typography-config($config-or-theme);
22+
$config: typography.private-typography-to-2018-config(
23+
theming.get-typography-config($config-or-theme));
2224
}
2325

2426
@mixin density($config-or-theme) {

‎src/material-experimental/mdc-core/option/_option-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@use '@material/ripple' as mdc-ripple;
88
@use '../../mdc-helpers/mdc-helpers';
99
@use '../../../material/core/theming/theming';
10+
@use '../../../material/core/typography/typography';
1011

1112
@mixin color($config-or-theme) {
1213
$config: theming.get-color-config($config-or-theme);
@@ -54,7 +55,8 @@
5455
}
5556

5657
@mixin typography($config-or-theme) {
57-
$config: theming.get-typography-config($config-or-theme);
58+
$config: typography.private-typography-to-2018-config(
59+
theming.get-typography-config($config-or-theme));
5860

5961
@include mdc-helpers.mat-using-mdc-typography($config) {
6062
// MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct

‎src/material-experimental/mdc-dialog/_dialog-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use '@material/dialog' as mdc-dialog;
22
@use '../mdc-helpers/mdc-helpers';
3+
@use '../../material/core/typography/typography';
34
@use '../../material/core/theming/theming';
45

56
@mixin color($config-or-theme) {
@@ -10,7 +11,8 @@
1011
}
1112

1213
@mixin typography($config-or-theme) {
13-
$config: theming.get-typography-config($config-or-theme);
14+
$config: typography.private-typography-to-2018-config(
15+
theming.get-typography-config($config-or-theme));
1416
@include mdc-helpers.mat-using-mdc-typography($config) {
1517
@include mdc-dialog.core-styles($query: mdc-helpers.$mat-typography-styles-query);
1618
}

‎src/material-experimental/mdc-form-field/_form-field-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@use '@material/theme/theme-color' as mdc-theme-color;
77
@use '@material/typography' as mdc-typography;
88
@use '../mdc-helpers/mdc-helpers';
9+
@use '../../material/core/typography/typography';
910
@use 'form-field-density';
1011
@use 'form-field-subscript';
1112
@use 'form-field-focus-overlay';
@@ -63,7 +64,8 @@
6364
}
6465

6566
@mixin typography($config-or-theme) {
66-
$config: theming.get-typography-config($config-or-theme);
67+
$config: typography.private-typography-to-2018-config(
68+
theming.get-typography-config($config-or-theme));
6769
@include mdc-helpers.mat-using-mdc-typography($config) {
6870
@include mdc-textfield.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
6971
@include mdc-floating-label.core-styles($query: mdc-helpers.$mat-typography-styles-query);

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

Lines changed: 16 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -19,84 +19,26 @@ $mat-base-styles-without-animation-query:
1919
$mat-theme-styles-query: color;
2020
$mat-typography-styles-query: typography;
2121

22-
// Mappings between Angular Material and MDC's typography levels.
23-
// TODO: delete once all MDC components have migrated to using the 2018 mappings.
24-
$mat-typography-2014-level-mappings: (
25-
mdc-to-mat: (
26-
headline1: display-4,
27-
headline2: display-3,
28-
headline3: display-2,
29-
headline4: display-1,
30-
headline5: headline,
31-
headline6: title,
32-
subtitle1: subheading-2,
33-
subtitle2: subheading-1,
34-
body1: body-2,
35-
body2: body-1,
22+
// Mappings from Angular Material's typography levels to MDC's typography levels.
23+
$mat-typography-mdc-level-mappings: (
24+
headline-1: headline1,
25+
headline-2: headline2,
26+
headline-3: headline3,
27+
headline-4: headline4,
28+
headline-5: headline5,
29+
headline-6: headline6,
30+
subtitle-1: subtitle1,
31+
subtitle-2: subtitle2,
32+
body-1: body1,
33+
body-2: body2,
3634
caption: caption,
3735
button: button,
38-
overline: null
39-
),
40-
mat-to-mdc: (
41-
display-4: headline1,
42-
display-3: headline2,
43-
display-2: headline3,
44-
display-1: headline4,
45-
headline: headline5,
46-
title: headline6,
47-
subheading-2: subtitle1,
48-
subheading-1: subtitle2,
49-
body-2: body1,
50-
body-1: body2,
51-
caption: caption,
52-
button: button,
53-
input: null
54-
)
55-
);
56-
57-
// Mappings between Angular Material and MDC's typography levels.
58-
$mat-typography-2018-level-mappings: (
59-
// Maps from MDC typography levels (e.g. body1) to Angular Material typography levels
60-
// (e.g. body-1).
61-
mdc-to-mat: (
62-
headline1: headline-1,
63-
headline2: headline-2,
64-
headline3: headline-3,
65-
headline4: headline-4,
66-
headline5: headline-5,
67-
headline6: headline-6,
68-
subtitle1: subtitle-1,
69-
subtitle2: subtitle-2,
70-
body1: body-1,
71-
body2: body-2,
72-
caption: caption,
73-
button: button,
74-
overline: overline
75-
),
76-
// Maps from Angular Material typography levels (e.g. body-1) to MDC typography levels
77-
// (e.g. body1).
78-
mat-to-mdc: (
79-
headline-1: headline1,
80-
headline-2: headline2,
81-
headline-3: headline3,
82-
headline-4: headline4,
83-
headline-5: headline5,
84-
headline-6: headline6,
85-
subtitle-1: subtitle1,
86-
subtitle-2: subtitle2,
87-
body-1: body1,
88-
body-2: body2,
89-
caption: caption,
90-
button: button,
91-
overline: overline
92-
)
36+
overline: overline
9337
);
9438

9539
// Converts an Angular Material typography level config to an MDC one.
9640
@function mat-typography-level-config-to-mdc($mat-config, $mat-level) {
97-
$mappings: if(typography.private-typography-is-2018-config($mat-config),
98-
$mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings);
99-
$mdc-level: map.get(map.get($mappings, mat-to-mdc), $mat-level);
41+
$mdc-level: map.get($mat-typography-mdc-level-mappings, $mat-level);
10042

10143
$result-with-nulls: map.merge(
10244
if($mdc-level,
@@ -130,13 +72,10 @@ $mat-typography-2018-level-mappings: (
13072
}
13173

13274
// Converts an Angular Material typography config to an MDC one.
133-
@function mat-typography-config-to-mdc($mat-config: typography.define-mdc-typography-config()) {
75+
@function mat-typography-config-to-mdc($mat-config) {
13476
$mdc-config: ();
13577

136-
$mappings: if(typography.private-typography-is-2018-config($mat-config),
137-
$mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings);
138-
139-
@each $mdc-level, $mat-level in map.get($mappings, mdc-to-mat) {
78+
@each $mat-level, $mdc-level in $mat-typography-mdc-level-mappings {
14079
$mdc-config: map.merge(
14180
$mdc-config,
14281
($mdc-level: mat-typography-level-config-to-mdc($mat-config, $mat-level)));

‎src/material-experimental/mdc-input/_input-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use '../mdc-helpers/mdc-helpers';
2+
@use '../../material/core/typography/typography';
23
@use '../../material/core/theming/theming';
34

45
@mixin color($config-or-theme) {
@@ -7,7 +8,8 @@
78
}
89

910
@mixin typography($config-or-theme) {
10-
$config: theming.get-typography-config($config-or-theme);
11+
$config: typography.private-typography-to-2018-config(
12+
theming.get-typography-config($config-or-theme));
1113
@include mdc-helpers.mat-using-mdc-typography($config) {}
1214
}
1315

‎src/material-experimental/mdc-list/_list-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use './interactive-list-theme';
44
@use './list-option-theme';
55
@use '../mdc-helpers/mdc-helpers';
6+
@use '../../material/core/typography/typography';
67
@use '../../material/core/theming/theming';
78

89

@@ -52,7 +53,8 @@
5253
}
5354

5455
@mixin typography($config-or-theme) {
55-
$config: theming.get-typography-config($config-or-theme);
56+
$config: typography.private-typography-to-2018-config(
57+
theming.get-typography-config($config-or-theme));
5658
@include mdc-helpers.mat-using-mdc-typography($config) {
5759
@include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
5860
@include list-option-theme.private-list-option-typography-styles();

‎src/material-experimental/mdc-menu/_menu-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@use '@material/typography' as mdc-typography;
66
@use '@material/ripple' as mdc-ripple;
77
@use '../mdc-helpers/mdc-helpers';
8+
@use '../../material/core/typography/typography';
89
@use '../../material/core/theming/theming';
910

1011
@mixin color($config-or-theme) {
@@ -44,7 +45,8 @@
4445
}
4546

4647
@mixin typography($config-or-theme) {
47-
$config: theming.get-typography-config($config-or-theme);
48+
$config: typography.private-typography-to-2018-config(
49+
theming.get-typography-config($config-or-theme));
4850
@include mdc-helpers.mat-using-mdc-typography($config) {
4951
@include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
5052

‎src/material-experimental/mdc-paginator/_paginator-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@use 'sass:map';
33
@use '../../material/core/theming/theming';
44
@use '../../material/core/density/private/compatibility';
5+
@use '../../material/core/typography/typography';
56
@use '../mdc-helpers/mdc-helpers';
67
@use './paginator-variables';
78
@use '../../material/core/typography/typography-utils';
@@ -48,7 +49,8 @@
4849
}
4950

5051
@mixin typography($config-or-theme) {
51-
$config: theming.get-typography-config($config-or-theme);
52+
$config: typography.private-typography-to-2018-config(
53+
theming.get-typography-config($config-or-theme));
5254

5355
@include mdc-helpers.mat-using-mdc-typography($config) {
5456
.mat-mdc-paginator {

‎src/material-experimental/mdc-radio/_radio-theme.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
@use '@material/radio/radio' as mdc-radio;
44
@use '@material/form-field' as mdc-form-field;
55
@use '../mdc-helpers/mdc-helpers';
6+
@use '../../material/core/typography/typography';
67
@use '../../material/core/theming/theming';
78

8-
99
@mixin color($config-or-theme) {
1010
$config: theming.get-color-config($config-or-theme);
1111
// Save original values of MDC global variables. We need to save these so we can restore the
@@ -45,7 +45,8 @@
4545
}
4646

4747
@mixin typography($config-or-theme) {
48-
$config: theming.get-typography-config($config-or-theme);
48+
$config: typography.private-typography-to-2018-config(
49+
theming.get-typography-config($config-or-theme));
4950
@include mdc-helpers.mat-using-mdc-typography($config) {
5051
@include mdc-radio.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
5152
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);

0 commit comments

Comments
 (0)