Skip to content

Commit c34511e

Browse files
mmalerbammalerba
authored
refactor(material/theming): normalize config in all typography mixins (#21937)
for non-mdc components This is split off of #21778 which covers MDC conmponents as well
1 parent c42ece3 commit c34511e

36 files changed

+144
-92
lines changed

‎src/dev-app/theme.scss

Lines changed: 38 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -15,56 +15,43 @@
1515
@use '../material/core/core';
1616
@use '../material/core/theming/palette';
1717
@use '../material/core/theming/theming';
18-
@use '../material/core/typography/typography';
1918

2019
// Plus imports for other components in your app.
2120

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).
21+
// Define the default (light) theme.
3622
$candy-app-primary: theming.palette(palette.$indigo);
3723
$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400);
3824
$candy-app-theme: theming.light-theme((
39-
color: (
40-
primary: $candy-app-primary,
41-
accent: $candy-app-accent
42-
)
25+
// Define the default colors for our app.
26+
color: (
27+
primary: $candy-app-primary,
28+
accent: $candy-app-accent
29+
),
30+
// Define the default typography for our app.
31+
typography: all-typography.config(),
32+
// Define the default density level for our app.
33+
density: 0,
4334
));
4435

36+
// Include the common styles for Angular Material. We include this here so that you only
37+
// have to load a single css file for Angular Material in your app.
38+
// **Be sure that you only ever include this mixin once!**
39+
@include core.core($candy-app-theme);
40+
4541
// Include the default theme styles.
4642
@include theming-all-theme.angular-material-theme($candy-app-theme);
4743
@include all-theme.angular-material-mdc-theme($candy-app-theme);
4844
@include column-resize.theme($candy-app-theme);
4945
@include popover-edit.theme($candy-app-theme);
50-
5146
// We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
5247
@include slider-theme.theme($candy-app-theme);
5348

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.
6749
.demo-strong-focus {
50+
// Include base styles for strong focus indicators.
51+
@include focus-indicators-focus-indicators.strong-focus-indicators();
52+
@include focus-indicators.strong-focus-indicators();
53+
54+
// Include the default theme for focus indicators.
6855
@include focus-indicators-focus-indicators.strong-focus-indicators-theme($candy-app-theme);
6956
@include focus-indicators.strong-focus-indicators-theme($candy-app-theme);
7057
}
@@ -74,17 +61,25 @@ $dark-theme: theming.dark-theme((
7461
// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
7562
// default theme.
7663
.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-
}
64+
// Create the color palettes used in our dark theme.
65+
$dark-primary: theming.palette(palette.$blue-grey);
66+
$dark-accent: theming.palette(palette.$amber, A200, A100, A400);
67+
$dark-warn: theming.palette(palette.$deep-orange);
68+
$dark-colors: theming.dark-theme($dark-primary, $dark-accent, $dark-warn);
8369

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);
70+
// Include the dark theme color styles.
71+
@include color-all-color.angular-material-color($dark-colors);
72+
@include all-color.angular-material-mdc-color($dark-colors);
73+
@include column-resize.color($dark-colors);
74+
@include popover-edit.color($dark-colors);
75+
// We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
76+
@include slider-theme.color($dark-colors);
77+
78+
// Include the dark theme colors for focus indicators.
79+
.demo-strong-focus {
80+
@include focus-indicators-focus-indicators.strong-focus-indicators-color($dark-colors);
81+
@include focus-indicators.strong-focus-indicators-color($dark-colors);
82+
}
8883
}
8984

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

‎src/material-experimental/popover-edit/_popover-edit.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@use '../../material/core/style/private';
55
@use '../../material/core/theming/palette';
66
@use '../../material/core/theming/theming';
7+
@use '../../material/core/typography/typography';
78
@use '../../material/core/typography/typography-utils';
89

910
@function mat-edit-hover-content-background($direction, $background-color) {
@@ -145,7 +146,7 @@
145146
}
146147

147148
@mixin typography($config-or-theme) {
148-
$config: theming.get-typography-config($config-or-theme);
149+
$config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
149150
[mat-edit-title] {
150151
@include typography-utils.level-to-styles($config, title);
151152
}

‎src/material/badge/_badge-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@use 'sass:meta';
77
@use '../core/theming/palette';
88
@use '../core/theming/theming';
9+
@use '../core/typography/typography';
910
@use '../core/typography/typography-utils';
1011
@use '../../cdk/a11y/a11y';
1112

@@ -191,7 +192,7 @@ $large-size: $default-size + 6;
191192
}
192193

193194
@mixin typography($config-or-theme) {
194-
$config: theming.get-typography-config($config-or-theme);
195+
$config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
195196
.mat-badge-content {
196197
font-weight: $font-weight;
197198
font-size: $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,5 +1,6 @@
11
@use 'sass:map';
22
@use '../core/style/private';
3+
@use '../core/typography/typography';
34
@use '../core/typography/typography-utils';
45
@use '../core/theming/palette';
56
@use '../core/theming/theming';
@@ -17,7 +18,7 @@
1718
}
1819

1920
@mixin typography($config-or-theme) {
20-
$config: theming.get-typography-config($config-or-theme);
21+
$config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
2122
.mat-bottom-sheet-container {
2223
@include typography-utils.level-to-styles($config, body-1);
2324
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use '../core/style/private';
44
@use '../core/theming/palette';
55
@use '../core/theming/theming';
6+
@use '../core/typography/typography';
67
@use '../core/typography/typography-utils';
78
@use '../core/density/private/compatibility';
89
@use './button-toggle-variables';
@@ -86,7 +87,7 @@
8687
}
8788

8889
@mixin typography($config-or-theme) {
89-
$config: theming.get-typography-config($config-or-theme);
90+
$config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
9091
.mat-button-toggle {
9192
font-family: typography-utils.font-family($config);
9293
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@use 'sass:meta';
33
@use '../core/theming/theming';
44
@use '../core/style/private';
5+
@use '../core/typography/typography';
56
@use '../core/typography/typography-utils';
67

78
$_mat-button-ripple-opacity: 0.1;
@@ -163,7 +164,7 @@ $_mat-button-ripple-opacity: 0.1;
163164
}
164165

165166
@mixin typography($config-or-theme) {
166-
$config: theming.get-typography-config($config-or-theme);
167+
$config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
167168
.mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,
168169
.mat-flat-button, .mat-fab, .mat-mini-fab {
169170
font: {

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

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

78

@@ -27,7 +28,7 @@
2728
}
2829

2930
@mixin typography($config-or-theme) {
30-
$config: theming.get-typography-config($config-or-theme);
31+
$config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
3132
.mat-card {
3233
font-family: typography-utils.font-family($config);
3334
}

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

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

56

@@ -97,7 +98,7 @@
9798
}
9899

99100
@mixin typography($config-or-theme) {
100-
$config: theming.get-typography-config($config-or-theme);
101+
$config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
101102
.mat-checkbox {
102103
font-family: typography-utils.font-family($config);
103104
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use '../core/style/private';
44
@use '../core/theming/palette';
55
@use '../core/theming/theming';
6+
@use '../core/typography/typography';
67
@use '../core/typography/typography-utils';
78

89
$chip-remove-font-size: 18px;
@@ -90,7 +91,7 @@ $chip-remove-font-size: 18px;
9091
}
9192

9293
@mixin typography($config-or-theme) {
93-
$config: theming.get-typography-config($config-or-theme);
94+
$config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
9495
.mat-chip {
9596
font-size: typography-utils.font-size($config, body-2);
9697
font-weight: typography-utils.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,6 +1,7 @@
11
@use 'sass:map';
22
@use '../theming/palette';
33
@use '../theming/theming';
4+
@use '../typography/typography';
45
@use '../typography/typography-utils';
56

67
@mixin color($config-or-theme) {
@@ -17,7 +18,7 @@
1718
}
1819

1920
@mixin typography($config-or-theme) {
20-
$config: theming.get-typography-config($config-or-theme);
21+
$config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
2122
.mat-optgroup-label {
2223
@include typography-utils.level-to-styles($config, body-2);
2324
}

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

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

67
@mixin color($config-or-theme) {
@@ -48,7 +49,7 @@
4849
}
4950

5051
@mixin typography($config-or-theme) {
51-
$config: theming.get-typography-config($config-or-theme);
52+
$config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
5253
.mat-option {
5354
font: {
5455
family: typography-utils.font-family($config);

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

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use 'sass:map';
22
@use 'typography-utils';
3+
@use '../theming/theming';
34

45
// Represents a typography level from the Material design spec.
56
@function level(
@@ -84,22 +85,35 @@
8485
// produces a normalized typography config for the 2014 Material Design typography system.
8586
// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
8687
// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
88+
//
89+
// Components using this function should be migrated to normalize to the 2018 style config instead.
90+
// New components should not use this function.
8791
@function typography-to-2014-config($config) {
88-
@if typography-is-2018-config($config) {
89-
@return config(
90-
$display-4: map.get($config, headline-1),
91-
$display-3: map.get($config, headline-2),
92-
$display-2: map.get($config, headline-3),
93-
$display-1: map.get($config, headline-4),
94-
$headline: map.get($config, headline-5),
95-
$title: map.get($config, headline-6),
96-
$subheading-2: map.get($config, subtitle-1),
97-
$subheading-1: map.get($config, subtitle-2),
98-
$body-2: map.get($config, body-1),
99-
$body-1: map.get($config, body-2),
100-
$button: map.get($config, button),
101-
$caption: map.get($config, caption),
92+
@if $config == null {
93+
@return null;
94+
}
95+
@if not typography-is-2014-config($config) {
96+
$args: (
97+
display-4: map.get($config, headline-1),
98+
display-3: map.get($config, headline-2),
99+
display-2: map.get($config, headline-3),
100+
display-1: map.get($config, headline-4),
101+
headline: map.get($config, headline-5),
102+
title: map.get($config, headline-6),
103+
subheading-2: map.get($config, subtitle-1),
104+
subheading-1: map.get($config, subtitle-2),
105+
body-2: map.get($config, body-1),
106+
body-1: map.get($config, body-2),
107+
button: map.get($config, button),
108+
caption: map.get($config, caption),
102109
);
110+
$non-null-args: ();
111+
@each $key, $value in $args {
112+
@if $value != null {
113+
$non-null-args: map.merge($non-null-args, ($key: $value));
114+
}
115+
}
116+
@return config($non-null-args...);
103117
}
104118
@return $config;
105119
}
@@ -109,6 +123,9 @@
109123
// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
110124
// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
111125
@function typography-to-2018-config($config) {
126+
@if $config == null {
127+
@return null;
128+
}
112129
@if typography-is-2014-config($config) {
113130
@return (
114131
headline-1: map.get($config, display-4),
@@ -123,14 +140,19 @@
123140
body-2: map.get($config, body-1),
124141
button: map.get($config, button),
125142
caption: map.get($config, caption),
143+
overline: if(map.get($config, overline), map.get($config, overline),
144+
level(12px, 32px, 500)
145+
)
126146
);
127147
}
128148
@return $config;
129149
}
130150

131151
// Adds the base typography styles, based on a config.
132152
/* stylelint-disable-next-line material/theme-mixin-api */
133-
@mixin base-typography($config, $selector: '.mat-typography') {
153+
@mixin base-typography($config-or-theme, $selector: '.mat-typography') {
154+
$config: typography-to-2014-config(theming.get-typography-config($config-or-theme));
155+
134156
.mat-h1, .mat-headline, #{$selector} h1 {
135157
@include typography-utils.level-to-styles($config, headline);
136158
margin: 0 0 16px;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@use '../core/style/private';
66
@use '../core/theming/palette';
77
@use '../core/theming/theming';
8+
@use '../core/typography/typography';
89
@use '../core/typography/typography-utils';
910

1011

@@ -183,7 +184,7 @@ $calendar-weekday-table-font-size: 11px !default;
183184
}
184185

185186
@mixin typography($config-or-theme) {
186-
$config: theming.get-typography-config($config-or-theme);
187+
$config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
187188
.mat-calendar {
188189
font-family: typography-utils.font-family($config);
189190
}

0 commit comments

Comments
 (0)