Skip to content

Commit 8353d9e

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 64a2a07 commit 8353d9e

File tree

29 files changed

+152
-167
lines changed

29 files changed

+152
-167
lines changed

‎src/dev-app/theme.scss

Lines changed: 38 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -15,52 +15,40 @@
1515

1616
// Plus imports for other components in your app.
1717

18-
// Include the common styles for Angular Material. We include this here so that you only
19-
// have to load a single css file for Angular Material in your app.
20-
// **Be sure that you only ever include this mixin once!**
21-
@include mat-core();
22-
@include angular-material-mdc-typography(mat-mdc-typography-config());
23-
@include mat-popover-edit-typography(mat-typography-config());
24-
25-
// Include base styles for strong focus indicators.
26-
.demo-strong-focus {
27-
@include mat-strong-focus-indicators();
28-
@include mat-mdc-strong-focus-indicators();
29-
}
30-
31-
// Define the default theme (same as the example above).
18+
// Define the default (light) theme.
3219
$candy-app-primary: mat-palette($mat-indigo);
3320
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
3421
$candy-app-theme: mat-light-theme((
35-
color: (
36-
primary: $candy-app-primary,
37-
accent: $candy-app-accent
38-
)
22+
// Define the default colors for our app.
23+
color: (
24+
primary: $candy-app-primary,
25+
accent: $candy-app-accent
26+
),
27+
// Define the default typography for our app.
28+
typography: mat-mdc-typography-config(),
29+
// Define the default density level for our app.
30+
density: 0,
3931
));
4032

33+
// Include the common styles for Angular Material. We include this here so that you only
34+
// have to load a single css file for Angular Material in your app.
35+
// **Be sure that you only ever include this mixin once!**
36+
@include mat-core($candy-app-theme);
37+
4138
// Include the default theme styles.
4239
@include angular-material-theme($candy-app-theme);
4340
@include angular-material-mdc-theme($candy-app-theme);
4441
@include mat-column-resize-theme($candy-app-theme);
4542
@include mat-popover-edit-theme($candy-app-theme);
46-
4743
// We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
4844
@include mat-mdc-slider-theme($candy-app-theme);
4945

50-
// Define an alternate dark theme.
51-
$dark-primary: mat-palette($mat-blue-grey);
52-
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
53-
$dark-warn: mat-palette($mat-deep-orange);
54-
$dark-theme: mat-dark-theme((
55-
color: (
56-
primary: $dark-primary,
57-
accent: $dark-accent,
58-
warn: $dark-warn
59-
)
60-
));
61-
62-
// Include the default theme for focus indicators.
6346
.demo-strong-focus {
47+
// Include base styles for strong focus indicators.
48+
@include mat-strong-focus-indicators();
49+
@include mat-mdc-strong-focus-indicators();
50+
51+
// Include the default theme for focus indicators.
6452
@include mat-strong-focus-indicators-theme($candy-app-theme);
6553
@include mat-mdc-strong-focus-indicators-theme($candy-app-theme);
6654
}
@@ -70,17 +58,25 @@ $dark-theme: mat-dark-theme((
7058
// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
7159
// default theme.
7260
.demo-unicorn-dark-theme {
73-
@include angular-material-color($dark-theme);
74-
@include angular-material-mdc-color($dark-theme);
75-
@include mat-column-resize-color($dark-theme);
76-
@include mat-popover-edit-color($dark-theme);
77-
@include mat-mdc-slider-color($dark-theme);
78-
}
61+
// Create the color palettes used in our dark theme.
62+
$dark-primary: mat-palette($mat-blue-grey);
63+
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
64+
$dark-warn: mat-palette($mat-deep-orange);
65+
$dark-colors: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
7966

80-
// Include the dark theme for focus indicators.
81-
.demo-unicorn-dark-theme.demo-strong-focus {
82-
@include mat-strong-focus-indicators-color($dark-theme);
83-
@include mat-mdc-strong-focus-indicators-color($dark-theme);
67+
// Include the dark theme color styles.
68+
@include angular-material-color($dark-colors);
69+
@include angular-material-mdc-color($dark-colors);
70+
@include mat-column-resize-color($dark-colors);
71+
@include mat-popover-edit-color($dark-colors);
72+
// We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
73+
@include mat-mdc-slider-color($dark-colors);
74+
75+
// Include the dark theme colors for focus indicators.
76+
.demo-strong-focus {
77+
@include mat-strong-focus-indicators-color($dark-colors);
78+
@include mat-mdc-strong-focus-indicators-color($dark-colors);
79+
}
8480
}
8581

8682
// 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,6 +1,7 @@
11
@import '@material/menu-surface/mixins.import';
22
@import '@material/list/mixins.import';
33
@import '../mdc-helpers/mdc-helpers';
4+
@import '../../material/core/typography/typography';
45

56
@mixin mat-mdc-autocomplete-color($config-or-theme) {
67
$config: mat-get-color-config($config-or-theme);
@@ -11,7 +12,7 @@
1112
}
1213

1314
@mixin mat-mdc-autocomplete-typography($config-or-theme) {
14-
$config: mat-get-typography-config($config-or-theme);
15+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
1516
@include mat-using-mdc-typography($config) {
1617
@include mdc-menu-surface-core-styles($mat-typography-styles-query);
1718

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import '@material/icon-button/mixins.import';
66
@import '@material/theme/mixins.import';
77
@import '../../material/core/ripple/ripple';
8+
@import '../../material/core/typography/typography';
89
@import '../mdc-helpers/mdc-helpers';
910

1011
// Selector for the element that has a background color and opacity applied to its ::before and
@@ -167,7 +168,7 @@ $mat-button-state-target: '.mdc-button__ripple';
167168
}
168169

169170
@mixin mat-mdc-button-typography($config-or-theme) {
170-
$config: mat-get-typography-config($config-or-theme);
171+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
171172
@include mat-using-mdc-typography($config) {
172173
@include mdc-button-without-ripple($query: $mat-typography-styles-query);
173174
}
@@ -253,7 +254,7 @@ $mat-button-state-target: '.mdc-button__ripple';
253254
}
254255

255256
@mixin mat-mdc-fab-typography($config-or-theme) {
256-
$config: mat-get-typography-config($config-or-theme);
257+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
257258
@include mat-using-mdc-typography($config) {
258259
@include mdc-fab-without-ripple($query: $mat-typography-styles-query);
259260
}
@@ -326,7 +327,7 @@ $mat-button-state-target: '.mdc-button__ripple';
326327
}
327328

328329
@mixin mat-mdc-icon-button-typography($config-or-theme) {
329-
$config: mat-get-typography-config($config-or-theme);
330+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
330331
@include mat-using-mdc-typography($config) {
331332
@include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
332333
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import '@material/card/variables.import';
44
@import '@material/typography/mixins.import';
55
@import '../mdc-helpers/mdc-helpers';
6+
@import '../../material/core/typography/typography';
67

78
@mixin mat-mdc-card-color($config-or-theme) {
89
$config: mat-get-color-config($config-or-theme);
@@ -32,7 +33,7 @@
3233
}
3334

3435
@mixin mat-mdc-card-typography($config-or-theme) {
35-
$config: mat-get-typography-config($config-or-theme);
36+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
3637
@include mat-using-mdc-typography($config) {
3738
@include mdc-card-without-ripple($query: $mat-typography-styles-query);
3839

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import '@material/ripple/variables.import';
99
@import '@material/theme/functions.import';
1010
@import '../mdc-helpers/mdc-helpers';
11+
@import '../../material/core/typography/typography';
1112

1213
// Mixin that includes the checkbox theme styles with a given palette.
1314
// By default, the MDC checkbox always uses the `secondary` palette.
@@ -110,7 +111,7 @@
110111
}
111112

112113
@mixin mat-mdc-checkbox-typography($config-or-theme) {
113-
$config: mat-get-typography-config($config-or-theme);
114+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
114115
@include mat-using-mdc-typography($config) {
115116
@include mdc-checkbox-without-ripple($query: $mat-typography-styles-query);
116117
@include mdc-form-field-core-styles($query: $mat-typography-styles-query);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import '@material/chips/mixins.import';
22
@import '../mdc-helpers/mdc-helpers';
33
@import '@material/theme/functions.import';
4+
@import '../../material/core/typography/typography';
45

56
@mixin _selected-color($color) {
67
@include mdc-chip-fill-color($color, $query: $mat-theme-styles-query);
@@ -70,7 +71,7 @@
7071
}
7172

7273
@mixin mat-mdc-chips-typography($config-or-theme) {
73-
$config: mat-get-typography-config($config-or-theme);
74+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
7475
@include mdc-chip-set-core-styles($query: $mat-typography-styles-query);
7576
@include mat-using-mdc-typography($config) {
7677
@include mdc-chip-without-ripple($query: $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
@@ -4,6 +4,8 @@
44
@import '@material/theme/mixins.import';
55
@import '../../mdc-helpers/mdc-helpers';
66
@import '../../../material/core/theming/theming';
7+
@import '../../../material/core/typography/typography';
8+
79

810
@mixin mat-mdc-optgroup-color($config-or-theme) {
911
$config: mat-get-color-config($config-or-theme);
@@ -20,7 +22,7 @@
2022
}
2123

2224
@mixin mat-mdc-optgroup-typography($config-or-theme) {
23-
$config: mat-get-typography-config($config-or-theme);
25+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
2426
}
2527

2628
@mixin mat-mdc-optgroup-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
@@ -5,6 +5,7 @@
55
@import '@material/typography/mixins.import';
66
@import '../../mdc-helpers/mdc-helpers';
77
@import '../../../material/core/theming/theming';
8+
@import '../../../material/core/typography/typography';
89

910
@mixin mat-mdc-option-color($config-or-theme) {
1011
$config: mat-get-color-config($config-or-theme);
@@ -43,7 +44,7 @@
4344
}
4445

4546
@mixin mat-mdc-option-typography($config-or-theme) {
46-
$config: mat-get-typography-config($config-or-theme);
47+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
4748

4849
@include mat-using-mdc-typography($config) {
4950
// 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 & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import '../mdc-helpers/mdc-helpers';
22
@import '@material/dialog/mixins.import';
3+
@import '../../material/core/typography/typography';
34

45
@mixin mat-mdc-dialog-color($config-or-theme) {
56
$config: mat-get-color-config($config-or-theme);
@@ -9,7 +10,7 @@
910
}
1011

1112
@mixin mat-mdc-dialog-typography($config-or-theme) {
12-
$config: mat-get-typography-config($config-or-theme);
13+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
1314
@include mat-using-mdc-typography($config) {
1415
@include mdc-dialog-core-styles($query: $mat-typography-styles-query);
1516
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@import '@material/textfield/variables.import';
77
@import '@material/typography/mixins.import';
88
@import '../mdc-helpers/mdc-helpers';
9+
@import '../../material/core/typography/typography';
910
@import 'form-field-density';
1011
@import 'form-field-subscript';
1112
@import 'form-field-focus-overlay';
@@ -60,7 +61,7 @@
6061
}
6162

6263
@mixin mat-mdc-form-field-typography($config-or-theme) {
63-
$config: mat-get-typography-config($config-or-theme);
64+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
6465
@include mat-using-mdc-typography($config) {
6566
@include mdc-text-field-without-ripple($query: $mat-typography-styles-query);
6667
@include mdc-floating-label-core-styles($query: $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
@@ -17,84 +17,26 @@ $mat-base-styles-without-animation-query:
1717
$mat-theme-styles-query: color;
1818
$mat-typography-styles-query: typography;
1919

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

9337
// Converts an Angular Material typography level config to an MDC one.
9438
@function mat-typography-level-config-to-mdc($mat-config, $mat-level) {
95-
$mappings: if(mat-private-typography-is-2018-config($mat-config),
96-
$mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings);
97-
$mdc-level: map-get(map-get($mappings, mat-to-mdc), $mat-level);
39+
$mdc-level: map-get($mat-typography-mdc-level-mappings, $mat-level);
9840

9941
@return map-merge(
10042
if($mdc-level,
@@ -119,13 +61,10 @@ $mat-typography-2018-level-mappings: (
11961
}
12062

12163
// Converts an Angular Material typography config to an MDC one.
122-
@function mat-typography-config-to-mdc($mat-config: mat-typography-config()) {
64+
@function mat-typography-config-to-mdc($mat-config) {
12365
$mdc-config: ();
12466

125-
$mappings: if(mat-private-typography-is-2018-config($mat-config),
126-
$mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings);
127-
128-
@each $mdc-level, $mat-level in map-get($mappings, mdc-to-mat) {
67+
@each $mat-level, $mdc-level in $mat-typography-mdc-level-mappings {
12968
$mdc-config: map-merge(
13069
$mdc-config,
13170
($mdc-level: mat-typography-level-config-to-mdc($mat-config, $mat-level)));

0 commit comments

Comments
 (0)