Skip to content

Commit 90465a1

Browse files
mmalerbammalerba
authored
refactor(multiple): convert components to theme inspection API (round 4) (#27740)
BREAKING CHANGE: - Themes are now more strictly validated when calling Angular Material theme mixins. For example, calling `mat.button-typography` with a theme has `typography: null` is now an error. - The `mat.legacy-typography-hierarchy` mixin has been removed in favor of `mat.typography-hierarchy`
1 parent ccff68c commit 90465a1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+676
-1423
lines changed

‎.stylelintrc.json

+1-36
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
"./tools/stylelint/no-nested-mixin.ts",
1212
"./tools/stylelint/no-concrete-rules.ts",
1313
"./tools/stylelint/no-top-level-ampersand-in-mixin.ts",
14-
"./tools/stylelint/theme-mixin-api.ts",
1514
"./tools/stylelint/no-import.ts",
1615
"./tools/stylelint/single-line-comment-only.ts",
1716
"./tools/stylelint/no-unused-import.ts",
@@ -33,7 +32,6 @@
3332
"filePattern": "**/!(*-example.css)"
3433
}
3534
],
36-
"material/theme-mixin-api": true,
3735
"material/selector-no-deep": true,
3836
"material/no-nested-mixin": true,
3937
"material/no-unused-import": true,
@@ -143,38 +141,5 @@
143141
"resolveNestedSelectors": true
144142
}
145143
]
146-
},
147-
"overrides": [
148-
{
149-
"files": [
150-
"**/_button-theme.scss",
151-
"**/_card-theme.scss",
152-
"**/_checkbox-theme.scss",
153-
"**/_column-resize-theme.scss",
154-
"**/_core-theme.scss",
155-
"**/_datepicker-theme.scss",
156-
"**/_fab-theme.scss",
157-
"**/_form-field-theme.scss",
158-
"**/_icon-button-theme.scss",
159-
"**/_input-theme.scss",
160-
"**/_list-theme.scss",
161-
"**/_optgroup-theme.scss",
162-
"**/_option-theme.scss",
163-
"**/_paginator-theme.scss",
164-
"**/_popover-edit-theme.scss",
165-
"**/_progress-bar-theme.scss",
166-
"**/_pseudo-checkbox-theme.scss",
167-
"**/_radio-theme.scss",
168-
"**/_ripple-theme.scss",
169-
"**/_slide-toggle-theme.scss",
170-
"**/_slider-theme.scss",
171-
"**/_sort-theme.scss",
172-
"**/_stepper-theme.scss",
173-
"**/_tree-theme.scss"
174-
],
175-
"rules": {
176-
"material/theme-mixin-api": false
177-
}
178-
}
179-
]
144+
}
180145
}

‎src/dev-app/theme.scss

+2-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@
33

44
// Plus imports for other components in your app.
55

6-
// Disable legacy API compatibility.
7-
// TODO: uncomment once conversion to inspection API is complete.
8-
//mat.$theme-legacy-inspection-api-compatibility: false;
6+
// Disable legacy API compatibility, since dev-app is fully migrated to theme inspection API.
7+
mat.$theme-legacy-inspection-api-compatibility: false;
98

109
// Define the default (light) theme.
1110
$candy-app-primary: mat.define-palette(mat.$indigo-palette);

‎src/e2e-app/theme.scss

+3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22

33
// Plus imports for other components in your app.
44

5+
// Disable legacy API compatibility, since e2e-app is fully migrated to theme inspection API.
6+
mat.$theme-legacy-inspection-api-compatibility: false;
7+
58
// Include the common styles for Angular Material. We include this here so that you only
69
// have to load a single css file for Angular Material in your app.
710
// **Be sure that you only ever include this mixin once!**

‎src/material-experimental/selection/_selection.scss

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
@use '@angular/material' as mat;
22

3-
@mixin theme($theme-or-color-config) {
4-
$theme: mat.private-legacy-get-theme($theme-or-color-config);
3+
@mixin theme($theme) {
54
@include mat.private-check-duplicate-theme-styles($theme, 'mat-selection');
65
}
76

8-
@mixin typography($config-or-theme) {}
7+
@mixin typography($theme) {}

‎src/material/_index.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@
1111
$gray-palette, $blue-grey-palette, $blue-gray-palette, $light-theme-background-palette,
1212
$dark-theme-background-palette, $light-theme-foreground-palette, $dark-theme-foreground-palette;
1313
@forward './core/typography/typography' show define-typography-level, define-rem-typography-config,
14-
define-typography-config, typography-hierarchy, define-legacy-typography-config,
15-
legacy-typography-hierarchy;
14+
define-typography-config, typography-hierarchy, define-legacy-typography-config;
1615
@forward './core/typography/typography-utils' show typography-level,
1716
font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
1817
@forward './core/tokens/m2' show m2-tokens-from-theme;

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

+12-18
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,31 @@
11
@use '../core/theming/theming';
2+
@use '../core/theming/inspection';
23
@use '../core/typography/typography';
34
@use '../core/style/sass-utils';
45
@use '../core/tokens/token-utils';
56
@use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
67

7-
@mixin color($config-or-theme) {
8-
$config: theming.get-color-config($config-or-theme);
9-
8+
@mixin color($theme) {
109
@include sass-utils.current-selector-or-root() {
1110
@include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
12-
tokens-mat-autocomplete.get-color-tokens($config));
11+
tokens-mat-autocomplete.get-color-tokens($theme));
1312
}
1413
}
1514

16-
@mixin typography($config-or-theme) {}
15+
@mixin typography($theme) {}
1716

18-
@mixin density($config-or-theme) {}
17+
@mixin density($theme) {}
1918

20-
@mixin theme($theme-or-color-config) {
21-
$theme: theming.private-legacy-get-theme($theme-or-color-config);
19+
@mixin theme($theme) {
2220
@include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
23-
$color: theming.get-color-config($theme);
24-
$density: theming.get-density-config($theme);
25-
$typography: theming.get-typography-config($theme);
26-
27-
@if $color != null {
28-
@include color($color);
21+
@if inspection.theme-has($theme, color) {
22+
@include color($theme);
2923
}
30-
@if $density != null {
31-
@include density($density);
24+
@if inspection.theme-has($theme, density) {
25+
@include density($theme);
3226
}
33-
@if $typography != null {
34-
@include typography($typography);
27+
@if inspection.theme-has($theme, typography) {
28+
@include typography($theme);
3529
}
3630
}
3731
}

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

+15-27
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@use 'sass:color';
2-
@use 'sass:map';
32
@use 'sass:math';
43
@use '@angular/cdk';
54

65
@use '../core/theming/theming';
6+
@use '../core/theming/inspection';
77
@use '../core/typography/typography';
88
@use '../core/tokens/m2/mat/badge' as tokens-mat-badge;
99
@use '../core/tokens/token-utils';
@@ -164,46 +164,34 @@ $_emit-fallback-vars: true;
164164
}
165165
}
166166

167-
@mixin color($config-or-theme) {
168-
$config: theming.get-color-config($config-or-theme);
169-
$accent: map.get($config, accent);
170-
$warn: map.get($config, warn);
171-
167+
@mixin color($theme) {
172168
@include sass-utils.current-selector-or-root() {
173169
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
174-
tokens-mat-badge.get-color-tokens($config));
170+
tokens-mat-badge.get-color-tokens($theme));
175171
}
176172

177173
.mat-badge-accent {
178174
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
179-
tokens-mat-badge.private-get-color-palette-color-tokens($accent));
175+
tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
180176
}
181177

182178
.mat-badge-warn {
183179
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
184-
tokens-mat-badge.private-get-color-palette-color-tokens($warn));
180+
tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
185181
}
186182
}
187183

188-
@mixin typography($config-or-theme) {
189-
$config: typography.private-typography-to-2014-config(
190-
theming.get-typography-config($config-or-theme));
191-
184+
@mixin typography($theme) {
192185
@include sass-utils.current-selector-or-root() {
193186
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
194-
tokens-mat-badge.get-typography-tokens($config));
187+
tokens-mat-badge.get-typography-tokens($theme));
195188
}
196189
}
197190

198-
@mixin density($config-or-theme) {}
191+
@mixin density($theme) {}
199192

200-
@mixin theme($theme-or-color-config) {
201-
$theme: theming.private-legacy-get-theme($theme-or-color-config);
193+
@mixin theme($theme) {
202194
@include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
203-
$color: theming.get-color-config($theme);
204-
$density: theming.get-density-config($theme);
205-
$typography: theming.get-typography-config($theme);
206-
207195
// Try to reduce the number of times that the structural styles are emitted.
208196
@if not $_badge-structure-emitted {
209197
@include _badge-structure;
@@ -216,14 +204,14 @@ $_emit-fallback-vars: true;
216204
}
217205
}
218206

219-
@if $color != null {
220-
@include color($color);
207+
@if inspection.theme-has($theme, color) {
208+
@include color($theme);
221209
}
222-
@if $density != null {
223-
@include density($density);
210+
@if inspection.theme-has($theme, density) {
211+
@include density($theme);
224212
}
225-
@if $typography != null {
226-
@include typography($typography);
213+
@if inspection.theme-has($theme, typography) {
214+
@include typography($theme);
227215
}
228216
}
229217
}

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

+13-22
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,36 @@
11
@use '../core/typography/typography';
22
@use '../core/theming/theming';
3+
@use '../core/theming/inspection';
34
@use '../core/style/sass-utils';
45
@use '../core/tokens/token-utils';
56
@use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
67

7-
@mixin color($config-or-theme) {
8-
$config: theming.get-color-config($config-or-theme);
9-
8+
@mixin color($theme) {
109
@include sass-utils.current-selector-or-root() {
1110
@include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
12-
tokens-mat-bottom-sheet.get-color-tokens($config));
11+
tokens-mat-bottom-sheet.get-color-tokens($theme));
1312
}
1413
}
1514

16-
@mixin typography($config-or-theme) {
17-
$config: typography.private-typography-to-2014-config(
18-
theming.get-typography-config($config-or-theme));
19-
15+
@mixin typography($theme) {
2016
@include sass-utils.current-selector-or-root() {
2117
@include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
22-
tokens-mat-bottom-sheet.get-typography-tokens($config));
18+
tokens-mat-bottom-sheet.get-typography-tokens($theme));
2319
}
2420
}
2521

26-
@mixin density($config-or-theme) {}
22+
@mixin density($theme) {}
2723

28-
@mixin theme($theme-or-color-config) {
29-
$theme: theming.private-legacy-get-theme($theme-or-color-config);
24+
@mixin theme($theme) {
3025
@include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
31-
$color: theming.get-color-config($theme);
32-
$density: theming.get-density-config($theme);
33-
$typography: theming.get-typography-config($theme);
34-
35-
@if $color != null {
36-
@include color($color);
26+
@if inspection.theme-has($theme, color) {
27+
@include color($theme);
3728
}
38-
@if $density != null {
39-
@include density($density);
29+
@if inspection.theme-has($theme, density) {
30+
@include density($theme);
4031
}
41-
@if $typography != null {
42-
@include typography($typography);
32+
@if inspection.theme-has($theme, typography) {
33+
@include typography($theme);
4334
}
4435
}
4536
}

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

+17-28
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,48 @@
11
@use '../core/theming/theming';
2+
@use '../core/theming/inspection';
23
@use '../core/typography/typography';
34
@use '../core/tokens/m2/mat/legacy-button-toggle' as tokens-mat-legacy-button-toggle;
45
@use '../core/tokens/m2/mat/standard-button-toggle' as tokens-mat-standard-button-toggle;
56
@use '../core/tokens/token-utils';
67
@use '../core/style/sass-utils';
78

8-
@mixin color($config-or-theme) {
9-
$config: theming.get-color-config($config-or-theme);
10-
9+
@mixin color($theme) {
1110
@include sass-utils.current-selector-or-root() {
1211
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
13-
tokens-mat-legacy-button-toggle.get-color-tokens($config));
12+
tokens-mat-legacy-button-toggle.get-color-tokens($theme));
1413
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
15-
tokens-mat-standard-button-toggle.get-color-tokens($config));
14+
tokens-mat-standard-button-toggle.get-color-tokens($theme));
1615
}
1716
}
1817

19-
@mixin typography($config-or-theme) {
20-
$config: typography.private-typography-to-2014-config(
21-
theming.get-typography-config($config-or-theme));
22-
18+
@mixin typography($theme) {
2319
@include sass-utils.current-selector-or-root() {
2420
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
25-
tokens-mat-legacy-button-toggle.get-typography-tokens($config));
21+
tokens-mat-legacy-button-toggle.get-typography-tokens($theme));
2622
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
27-
tokens-mat-standard-button-toggle.get-typography-tokens($config));
23+
tokens-mat-standard-button-toggle.get-typography-tokens($theme));
2824
}
2925
}
3026

31-
@mixin density($config-or-theme) {
32-
$density-scale: theming.get-density-config($config-or-theme);
33-
27+
@mixin density($theme) {
3428
@include sass-utils.current-selector-or-root() {
3529
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
36-
tokens-mat-legacy-button-toggle.get-density-tokens($density-scale));
30+
tokens-mat-legacy-button-toggle.get-density-tokens($theme));
3731
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
38-
tokens-mat-standard-button-toggle.get-density-tokens($density-scale));
32+
tokens-mat-standard-button-toggle.get-density-tokens($theme));
3933
}
4034
}
4135

42-
@mixin theme($theme-or-color-config) {
43-
$theme: theming.private-legacy-get-theme($theme-or-color-config);
36+
@mixin theme($theme) {
4437
@include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
45-
$color: theming.get-color-config($theme);
46-
$density: theming.get-density-config($theme);
47-
$typography: theming.get-typography-config($theme);
48-
49-
@if $color != null {
50-
@include color($color);
38+
@if inspection.theme-has($theme, color) {
39+
@include color($theme);
5140
}
52-
@if $density != null {
53-
@include density($density);
41+
@if inspection.theme-has($theme, density) {
42+
@include density($theme);
5443
}
55-
@if $typography != null {
56-
@include typography($typography);
44+
@if inspection.theme-has($theme, typography) {
45+
@include typography($theme);
5746
}
5847
}
5948
}

0 commit comments

Comments
 (0)