Skip to content

Commit 690169a

Browse files
mmalerbammalerba
committed
refactor(material/theming): normalize config in all typography mixins
for non-mdc components This is split off of angular#21778 which covers MDC conmponents as well
1 parent 64a2a07 commit 690169a

35 files changed

+141
-90
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/badge/_badge-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
// no style sheet support for directives.
44
@import '../core/theming/palette';
55
@import '../core/theming/theming';
6+
@import '../core/typography/typography';
67
@import '../core/typography/typography-utils';
78
@import '../../cdk/a11y/a11y';
89

@@ -188,7 +189,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
188189
}
189190

190191
@mixin mat-badge-typography($config-or-theme) {
191-
$config: mat-get-typography-config($config-or-theme);
192+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
192193
.mat-badge-content {
193194
font-weight: $mat-badge-font-weight;
194195
font-size: $mat-badge-font-size;

‎src/material/bottom-sheet/_bottom-sheet-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import '../core/style/private';
2+
@import '../core/typography/typography';
23
@import '../core/typography/typography-utils';
34
@import '../core/theming/palette';
45
@import '../core/theming/theming';
@@ -16,7 +17,7 @@
1617
}
1718

1819
@mixin mat-bottom-sheet-typography($config-or-theme) {
19-
$config: mat-get-typography-config($config-or-theme);
20+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
2021
.mat-bottom-sheet-container {
2122
@include mat-typography-level-to-styles($config, body-1);
2223
}

‎src/material/button-toggle/_button-toggle-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import '../core/style/private';
33
@import '../core/theming/palette';
44
@import '../core/theming/theming';
5+
@import '../core/typography/typography';
56
@import '../core/typography/typography-utils';
67
@import '../core/density/private/compatibility';
78
@import './button-toggle-variables';
@@ -85,7 +86,7 @@
8586
}
8687

8788
@mixin mat-button-toggle-typography($config-or-theme) {
88-
$config: mat-get-typography-config($config-or-theme);
89+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
8990
.mat-button-toggle {
9091
font-family: mat-font-family($config);
9192
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import '../core/theming/theming';
22
@import '../core/style/private';
3+
@import '../core/typography/typography';
34
@import '../core/typography/typography-utils';
45

56
$_mat-button-ripple-opacity: 0.1;
@@ -161,7 +162,7 @@ $_mat-button-ripple-opacity: 0.1;
161162
}
162163

163164
@mixin mat-button-typography($config-or-theme) {
164-
$config: mat-get-typography-config($config-or-theme);
165+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
165166
.mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,
166167
.mat-flat-button, .mat-fab, .mat-mini-fab {
167168
font: {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import '../core/theming/palette';
22
@import '../core/theming/theming';
33
@import '../core/style/private';
4+
@import '../core/typography/typography';
45
@import '../core/typography/typography-utils';
56

67

@@ -26,7 +27,7 @@
2627
}
2728

2829
@mixin mat-card-typography($config-or-theme) {
29-
$config: mat-get-typography-config($config-or-theme);
30+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
3031
.mat-card {
3132
font-family: mat-font-family($config);
3233
}

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

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

45

@@ -96,7 +97,7 @@
9697
}
9798

9899
@mixin mat-checkbox-typography($config-or-theme) {
99-
$config: mat-get-typography-config($config-or-theme);
100+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
100101
.mat-checkbox {
101102
font-family: mat-font-family($config);
102103
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import '../core/style/private';
22
@import '../core/theming/palette';
33
@import '../core/theming/theming';
4+
@import '../core/typography/typography';
45
@import '../core/typography/typography-utils';
56

67
$mat-chip-remove-font-size: 18px;
@@ -87,7 +88,7 @@ $mat-chip-remove-font-size: 18px;
8788
}
8889

8990
@mixin mat-chips-typography($config-or-theme) {
90-
$config: mat-get-typography-config($config-or-theme);
91+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
9192
.mat-chip {
9293
font-size: mat-font-size($config, body-2);
9394
font-weight: mat-font-weight($config, body-2);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import '../theming/palette';
22
@import '../theming/theming';
3+
@import '../typography/typography';
34
@import '../typography/typography-utils';
45

56
@mixin mat-optgroup-color($config-or-theme) {
@@ -16,7 +17,7 @@
1617
}
1718

1819
@mixin mat-optgroup-typography($config-or-theme) {
19-
$config: mat-get-typography-config($config-or-theme);
20+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
2021
.mat-optgroup-label {
2122
@include mat-typography-level-to-styles($config, body-2);
2223
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import '../theming/palette';
22
@import '../theming/theming';
3+
@import '../typography/typography';
34
@import '../typography/typography-utils';
45

56
@mixin mat-option-color($config-or-theme) {
@@ -47,7 +48,7 @@
4748
}
4849

4950
@mixin mat-option-typography($config-or-theme) {
50-
$config: mat-get-typography-config($config-or-theme);
51+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
5152
.mat-option {
5253
font: {
5354
family: mat-font-family($config);

‎src/material/core/typography/_typography.scss

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -83,22 +83,35 @@
8383
// produces a normalized typography config for the 2014 Material Design typography system.
8484
// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
8585
// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
86+
//
87+
// Components using this function should be migrated to normalize to the 2018 style config instead.
88+
// New components should not use this function.
8689
@function mat-private-typography-to-2014-config($config) {
87-
@if mat-private-typography-is-2018-config($config) {
88-
@return mat-typography-config(
89-
$display-4: map-get($config, headline-1),
90-
$display-3: map-get($config, headline-2),
91-
$display-2: map-get($config, headline-3),
92-
$display-1: map-get($config, headline-4),
93-
$headline: map-get($config, headline-5),
94-
$title: map-get($config, headline-6),
95-
$subheading-2: map-get($config, subtitle-1),
96-
$subheading-1: map-get($config, subtitle-2),
97-
$body-2: map-get($config, body-1),
98-
$body-1: map-get($config, body-2),
99-
$button: map-get($config, button),
100-
$caption: map-get($config, caption),
90+
@if $config == null {
91+
@return null;
92+
}
93+
@if not mat-private-typography-is-2014-config($config) {
94+
$args: (
95+
display-4: map-get($config, headline-1),
96+
display-3: map-get($config, headline-2),
97+
display-2: map-get($config, headline-3),
98+
display-1: map-get($config, headline-4),
99+
headline: map-get($config, headline-5),
100+
title: map-get($config, headline-6),
101+
subheading-2: map-get($config, subtitle-1),
102+
subheading-1: map-get($config, subtitle-2),
103+
body-2: map-get($config, body-1),
104+
body-1: map-get($config, body-2),
105+
button: map-get($config, button),
106+
caption: map-get($config, caption),
101107
);
108+
$non-null-args: ();
109+
@each $key, $value in $args {
110+
@if $value != null {
111+
$non-null-args: map-merge($non-null-args, ($key: $value));
112+
}
113+
}
114+
@return mat-typography-config($non-null-args...);
102115
}
103116
@return $config;
104117
}
@@ -108,6 +121,9 @@
108121
// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
109122
// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
110123
@function mat-private-typography-to-2018-config($config) {
124+
@if $config == null {
125+
@return null;
126+
}
111127
@if mat-private-typography-is-2014-config($config) {
112128
@return (
113129
headline-1: map-get($config, display-4),
@@ -122,14 +138,19 @@
122138
body-2: map-get($config, body-1),
123139
button: map-get($config, button),
124140
caption: map-get($config, caption),
141+
overline: if(map-get($config, overline), map-get($config, overline),
142+
mat-typography-level(12px, 32px, 500)
143+
)
125144
);
126145
}
127146
@return $config;
128147
}
129148

130149
// Adds the base typography styles, based on a config.
131150
/* stylelint-disable-next-line material/theme-mixin-api */
132-
@mixin mat-base-typography($config, $selector: '.mat-typography') {
151+
@mixin mat-base-typography($config-or-theme, $selector: '.mat-typography') {
152+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
153+
133154
.mat-h1, .mat-headline, #{$selector} h1 {
134155
@include mat-typography-level-to-styles($config, headline);
135156
margin: 0 0 16px;

‎src/material/datepicker/_datepicker-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import '../core/style/private';
22
@import '../core/theming/palette';
33
@import '../core/theming/theming';
4+
@import '../core/typography/typography';
45
@import '../core/typography/typography-utils';
56

67

@@ -179,7 +180,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
179180
}
180181

181182
@mixin mat-datepicker-typography($config-or-theme) {
182-
$config: mat-get-typography-config($config-or-theme);
183+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
183184
.mat-calendar {
184185
font-family: mat-font-family($config);
185186
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import '../core/style/private';
22
@import '../core/theming/palette';
33
@import '../core/theming/theming';
4+
@import '../core/typography/typography';
45
@import '../core/typography/typography-utils';
56

67

@@ -17,7 +18,7 @@
1718
}
1819

1920
@mixin mat-dialog-typography($config-or-theme) {
20-
$config: mat-get-typography-config($config-or-theme);
21+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
2122
.mat-dialog-title {
2223
@include mat-typography-level-to-styles($config, title);
2324
}

‎src/material/expansion/_expansion-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import '../core/theming/palette';
33
@import '../core/theming/theming';
44
@import '../core/style/private';
5+
@import '../core/typography/typography';
56
@import '../core/typography/typography-utils';
67
@import './expansion-variables';
78
@import './expansion-mixins';
@@ -54,7 +55,7 @@
5455
}
5556

5657
@mixin mat-expansion-panel-typography($config-or-theme) {
57-
$config: mat-get-typography-config($config-or-theme);
58+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
5859
.mat-expansion-panel-header {
5960
font: {
6061
family: mat-font-family($config, subheading-1);

0 commit comments

Comments
 (0)