Skip to content

Commit a608a2f

Browse files
mmalerbammalerba
committed
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
1 parent c42ece3 commit a608a2f

File tree

26 files changed

+149
-168
lines changed

26 files changed

+149
-168
lines changed

‎src/dev-app/theme.scss

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -19,52 +19,42 @@
1919

2020
// Plus imports for other components in your app.
2121

22-
// Include the common styles for Angular Material. We include this here so that you only
23-
// have to load a single css file for Angular Material in your app.
24-
// **Be sure that you only ever include this mixin once!**
25-
@include core.core();
26-
@include all-typography.angular-material-mdc-typography(all-typography.config());
27-
@include popover-edit.typography(typography.config());
28-
29-
// Include base styles for strong focus indicators.
30-
.demo-strong-focus {
31-
@include focus-indicators-focus-indicators.strong-focus-indicators();
32-
@include focus-indicators.strong-focus-indicators();
33-
}
34-
35-
// Define the default theme (same as the example above).
22+
// Define the default (light) theme.
3623
$candy-app-primary: theming.palette(palette.$indigo);
3724
$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400);
3825
$candy-app-theme: theming.light-theme((
39-
color: (
40-
primary: $candy-app-primary,
41-
accent: $candy-app-accent
42-
)
26+
// Define the default colors for our app.
27+
color: (
28+
primary: $candy-app-primary,
29+
accent: $candy-app-accent
30+
),
31+
// Define the default typography for our app.
32+
// TODO(mmalerba): Update to `mat-mdc-typography-config()` once non-MDC components can handle
33+
// 2018 configs.
34+
typography: typography.config(),
35+
// Define the default density level for our app.
36+
density: 0,
4337
));
4438

39+
// Include the common styles for Angular Material. We include this here so that you only
40+
// have to load a single css file for Angular Material in your app.
41+
// **Be sure that you only ever include this mixin once!**
42+
@include core.core($candy-app-theme);
43+
4544
// Include the default theme styles.
4645
@include theming-all-theme.angular-material-theme($candy-app-theme);
4746
@include all-theme.angular-material-mdc-theme($candy-app-theme);
4847
@include column-resize.theme($candy-app-theme);
4948
@include popover-edit.theme($candy-app-theme);
50-
5149
// We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
5250
@include slider-theme.theme($candy-app-theme);
5351

54-
// Define an alternate dark theme.
55-
$dark-primary: theming.palette(palette.$blue-grey);
56-
$dark-accent: theming.palette(palette.$amber, A200, A100, A400);
57-
$dark-warn: theming.palette(palette.$deep-orange);
58-
$dark-theme: theming.dark-theme((
59-
color: (
60-
primary: $dark-primary,
61-
accent: $dark-accent,
62-
warn: $dark-warn
63-
)
64-
));
65-
66-
// Include the default theme for focus indicators.
6752
.demo-strong-focus {
53+
// Include base styles for strong focus indicators.
54+
@include focus-indicators-focus-indicators.strong-focus-indicators();
55+
@include focus-indicators.strong-focus-indicators();
56+
57+
// Include the default theme for focus indicators.
6858
@include focus-indicators-focus-indicators.strong-focus-indicators-theme($candy-app-theme);
6959
@include focus-indicators.strong-focus-indicators-theme($candy-app-theme);
7060
}
@@ -74,17 +64,25 @@ $dark-theme: theming.dark-theme((
7464
// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
7565
// default theme.
7666
.demo-unicorn-dark-theme {
77-
@include color-all-color.angular-material-color($dark-theme);
78-
@include all-color.angular-material-mdc-color($dark-theme);
79-
@include column-resize.color($dark-theme);
80-
@include popover-edit.color($dark-theme);
81-
@include slider-theme.color($dark-theme);
82-
}
67+
// Create the color palettes used in our dark theme.
68+
$dark-primary: theming.palette(palette.$blue-grey);
69+
$dark-accent: theming.palette(palette.$amber, A200, A100, A400);
70+
$dark-warn: theming.palette(palette.$deep-orange);
71+
$dark-colors: theming.dark-theme($dark-primary, $dark-accent, $dark-warn);
8372

84-
// Include the dark theme for focus indicators.
85-
.demo-unicorn-dark-theme.demo-strong-focus {
86-
@include focus-indicators-focus-indicators.strong-focus-indicators-color($dark-theme);
87-
@include focus-indicators.strong-focus-indicators-color($dark-theme);
73+
// Include the dark theme color styles.
74+
@include color-all-color.angular-material-color($dark-colors);
75+
@include all-color.angular-material-mdc-color($dark-colors);
76+
@include column-resize.color($dark-colors);
77+
@include popover-edit.color($dark-colors);
78+
// We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
79+
@include slider-theme.color($dark-colors);
80+
81+
// Include the dark theme colors for focus indicators.
82+
.demo-strong-focus {
83+
@include focus-indicators-focus-indicators.strong-focus-indicators-color($dark-colors);
84+
@include focus-indicators.strong-focus-indicators-color($dark-colors);
85+
}
8886
}
8987

9088
// Create classes for all density scales which are supported by all MDC-based components.

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

Lines changed: 2 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
@import '@material/menu-surface/mixins.import';
45
@import '@material/list/mixins.import';
@@ -12,7 +13,7 @@
1213
}
1314

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

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use '../../material/core/ripple/ripple';
2+
@use '../../material/core/typography/typography';
23
@use '../mdc-helpers/mdc-helpers';
34
@use '../../material/core/theming/theming';
45
@import '@material/button/mixins.import';
@@ -173,7 +174,7 @@ $mat-button-state-target: '.mdc-button__ripple';
173174
}
174175

175176
@mixin typography($config-or-theme) {
176-
$config: theming.get-typography-config($config-or-theme);
177+
$config: typography.typography-to-2018-config(theming.get-typography-config($config-or-theme));
177178
@include mdc-helpers.mat-using-mdc-typography($config) {
178179
@include mdc-button-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
179180
}
@@ -260,7 +261,7 @@ $mat-button-state-target: '.mdc-button__ripple';
260261
}
261262

262263
@mixin fab-typography($config-or-theme) {
263-
$config: theming.get-typography-config($config-or-theme);
264+
$config: typography.typography-to-2018-config(theming.get-typography-config($config-or-theme));
264265
@include mdc-helpers.mat-using-mdc-typography($config) {
265266
@include mdc-fab-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
266267
}
@@ -333,7 +334,7 @@ $mat-button-state-target: '.mdc-button__ripple';
333334
}
334335

335336
@mixin icon-button-typography($config-or-theme) {
336-
$config: theming.get-typography-config($config-or-theme);
337+
$config: typography.typography-to-2018-config(theming.get-typography-config($config-or-theme));
337338
@include mdc-helpers.mat-using-mdc-typography($config) {
338339
@include mdc-icon-button-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
339340
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:color';
22
@use 'sass:map';
33
@use '../mdc-helpers/mdc-helpers';
4+
@use '../../material/core/typography/typography';
45
@use '../../material/core/theming/theming';
56
@import '@material/card/mixins.import';
67
@import '@material/theme/functions.import';
@@ -35,7 +36,7 @@
3536
}
3637

3738
@mixin typography($config-or-theme) {
38-
$config: theming.get-typography-config($config-or-theme);
39+
$config: typography.typography-to-2018-config(theming.get-typography-config($config-or-theme));
3940
@include mdc-helpers.mat-using-mdc-typography($config) {
4041
@include mdc-card-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
4142

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

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

89
@import '@material/checkbox/mixins.import';
@@ -112,7 +113,7 @@
112113
}
113114

114115
@mixin typography($config-or-theme) {
115-
$config: theming.get-typography-config($config-or-theme);
116+
$config: typography.typography-to-2018-config(theming.get-typography-config($config-or-theme));
116117
@include mdc-helpers.mat-using-mdc-typography($config) {
117118
@include mdc-checkbox-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
118119
@include mdc-form-field-core-styles($query: mdc-helpers.$mat-typography-styles-query);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@use 'sass:color';
22
@use 'sass:map';
33
@use '../mdc-helpers/mdc-helpers';
4+
@use '../../material/core/typography/typography';
45
@use '../../material/core/theming/theming';
56
@import '@material/chips/mixins.import';
6-
77
@import '@material/theme/functions.import';
88

99
@mixin _selected-color($color) {
@@ -76,7 +76,7 @@
7676
}
7777

7878
@mixin typography($config-or-theme) {
79-
$config: theming.get-typography-config($config-or-theme);
79+
$config: typography.typography-to-2018-config(theming.get-typography-config($config-or-theme));
8080
@include mdc-chip-set-core-styles($query: mdc-helpers.$mat-typography-styles-query);
8181
@include mdc-helpers.mat-using-mdc-typography($config) {
8282
@include mdc-chip-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
@@ -1,10 +1,12 @@
11
@use '../../mdc-helpers/mdc-helpers';
22
@use '../../../material/core/theming/theming';
3+
@use '../../../material/core/typography/typography';
34
@import '@material/list/mixins.import';
45
@import '@material/list/variables.import';
56
@import '@material/theme/functions.import';
67
@import '@material/theme/mixins.import';
78

9+
810
@mixin color($config-or-theme) {
911
$config: theming.get-color-config($config-or-theme);
1012

@@ -20,7 +22,7 @@
2022
}
2123

2224
@mixin typography($config-or-theme) {
23-
$config: theming.get-typography-config($config-or-theme);
25+
$config: typography.typography-to-2018-config(theming.get-typography-config($config-or-theme));
2426
}
2527

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

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use '../../mdc-helpers/mdc-helpers';
22
@use '../../../material/core/theming/theming';
3+
@use '../../../material/core/typography/typography';
34
@import '@material/list/mixins.import';
45
@import '@material/list/variables.import';
56
@import '@material/theme/functions.import';
@@ -46,7 +47,7 @@
4647
}
4748

4849
@mixin option-typography($config-or-theme) {
49-
$config: theming.get-typography-config($config-or-theme);
50+
$config: typography.typography-to-2018-config(theming.get-typography-config($config-or-theme));
5051

5152
@include mdc-helpers.mat-using-mdc-typography($config) {
5253
// 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: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use '../mdc-helpers/mdc-helpers';
2+
@use '../../material/core/typography/typography';
23
@use '../../material/core/theming/theming';
3-
44
@import '@material/dialog/mixins.import';
55

66
@mixin color($config-or-theme) {
@@ -11,7 +11,7 @@
1111
}
1212

1313
@mixin typography($config-or-theme) {
14-
$config: theming.get-typography-config($config-or-theme);
14+
$config: typography.typography-to-2018-config(theming.get-typography-config($config-or-theme));
1515
@include mdc-helpers.mat-using-mdc-typography($config) {
1616
@include mdc-dialog-core-styles($query: mdc-helpers.$mat-typography-styles-query);
1717
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use '@material/ripple/mixins' as mdc-ripple;
22
@use '@material/textfield/variables' as mdc-text-field;
33
@use '../mdc-helpers/mdc-helpers';
4+
@use '../../material/core/typography/typography';
45
@use 'form-field-density';
56
@use 'form-field-subscript';
67
@use 'form-field-focus-overlay';
@@ -63,7 +64,7 @@
6364
}
6465

6566
@mixin typography($config-or-theme) {
66-
$config: theming.get-typography-config($config-or-theme);
67+
$config: typography.typography-to-2018-config(theming.get-typography-config($config-or-theme));
6768
@include mdc-helpers.mat-using-mdc-typography($config) {
6869
@include mdc-text-field-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
6970
@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.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.config()) {
75+
@function mat-typography-config-to-mdc($mat-config) {
13476
$mdc-config: ();
13577

136-
$mappings: if(typography.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)));

0 commit comments

Comments
 (0)