Skip to content

Commit 24202a8

Browse files
mmalerbammalerba
authored
refactor(multiple): convert components to theme inspection API (#27688)
* refactor(multiple): convert components to theme inspection API Converts the following components to use the new theme inspection API under the hood: card, core, form-field, optgroup, option, progress-bar, pseudo-checkbox, ripple As a side effect, this allows us to start cleaning up all of the theme normalization logic that previously had to be baked into every theme mixin. The goal once all components are converted is that apps can opt themselves into only supporting the inspection API to access theme values and throw errors on all attempts to access the theme via other means. This will identify usages of the theme that need to be updated to work with M3. * fix tests * fix typography * fix bad stylelint fix * remove theme mixin explicit normalization * fix test failures * add docs for new sass functions * fix another test failure
1 parent 6c724c7 commit 24202a8

25 files changed

+466
-426
lines changed

‎.stylelintrc.json‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,5 +143,22 @@
143143
"resolveNestedSelectors": true
144144
}
145145
]
146-
}
146+
},
147+
"overrides": [
148+
{
149+
"files": [
150+
"**/_card-theme.scss",
151+
"**/_core-theme.scss",
152+
"**/_form-field-theme.scss",
153+
"**/_optgroup-theme.scss",
154+
"**/_option-theme.scss",
155+
"**/_progress-bar-theme.scss",
156+
"**/_pseudo-checkbox-theme.scss",
157+
"**/_ripple-theme.scss"
158+
],
159+
"rules": {
160+
"material/theme-mixin-api": false
161+
}
162+
}
163+
]
147164
}

‎src/dev-app/theme.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
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;
9+
610
// Define the default (light) theme.
711
$candy-app-primary: mat.define-palette(mat.$indigo-palette);
812
$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

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

Lines changed: 27 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
@use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
1111
@use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
1212

13-
@mixin base($config-or-theme) {
14-
@if inspection.get-theme-version($config-or-theme) == 1 {
15-
@include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, base));
13+
@mixin base($theme) {
14+
@if inspection.get-theme-version($theme) == 1 {
15+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
1616
}
1717
@else {
1818
@include sass-utils.current-selector-or-root() {
@@ -24,24 +24,22 @@
2424
}
2525
}
2626

27-
@mixin color($config-or-theme) {
28-
$config: theming.get-color-config($config-or-theme);
29-
30-
@if inspection.get-theme-version($config-or-theme) == 1 {
31-
@include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, color));
27+
@mixin color($theme) {
28+
@if inspection.get-theme-version($theme) == 1 {
29+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
3230
}
3331
@else {
3432
$mdc-elevated-card-color-tokens: token-utils.resolve-elevation(
35-
tokens-mdc-elevated-card.get-color-tokens($config),
33+
tokens-mdc-elevated-card.get-color-tokens($theme),
3634
container-elevation,
3735
container-shadow-color
3836
);
3937
$mdc-outlined-card-color-tokens: token-utils.resolve-elevation(
40-
tokens-mdc-outlined-card.get-color-tokens($config),
38+
tokens-mdc-outlined-card.get-color-tokens($theme),
4139
container-elevation,
4240
container-shadow-color,
4341
);
44-
$mat-card-color-tokens: tokens-mat-card.get-color-tokens($config);
42+
$mat-card-color-tokens: tokens-mat-card.get-color-tokens($theme);
4543

4644
// Add values for card tokens.
4745
@include sass-utils.current-selector-or-root() {
@@ -52,17 +50,14 @@
5250
}
5351
}
5452

55-
@mixin typography($config-or-theme) {
56-
$config: typography.private-typography-to-2018-config(
57-
theming.get-typography-config($config-or-theme));
58-
59-
@if inspection.get-theme-version($config-or-theme) == 1 {
60-
@include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, typography));
53+
@mixin typography($theme) {
54+
@if inspection.get-theme-version($theme) == 1 {
55+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
6156
}
6257
@else {
63-
$mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($config);
64-
$mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($config);
65-
$mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($config);
58+
$mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($theme);
59+
$mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($theme);
60+
$mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($theme);
6661

6762
// Add values for card tokens.
6863
@include sass-utils.current-selector-or-root() {
@@ -74,16 +69,14 @@
7469
}
7570
}
7671

77-
@mixin density($config-or-theme) {
78-
$density-scale: theming.get-density-config($config-or-theme);
79-
80-
@if inspection.get-theme-version($config-or-theme) == 1 {
81-
@include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, density));
72+
@mixin density($theme) {
73+
@if inspection.get-theme-version($theme) == 1 {
74+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
8275
}
8376
@else {
84-
$mdc-elevated-card-density-tokens: tokens-mdc-elevated-card.get-density-tokens($density-scale);
85-
$mdc-outlined-card-density-tokens: tokens-mdc-outlined-card.get-density-tokens($density-scale);
86-
$mat-card-density-tokens: tokens-mat-card.get-density-tokens($density-scale);
77+
$mdc-elevated-card-density-tokens: tokens-mdc-elevated-card.get-density-tokens($theme);
78+
$mdc-outlined-card-density-tokens: tokens-mdc-outlined-card.get-density-tokens($theme);
79+
$mat-card-density-tokens: tokens-mat-card.get-density-tokens($theme);
8780

8881
// Add values for card tokens.
8982
@include sass-utils.current-selector-or-root() {
@@ -102,19 +95,15 @@
10295
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
10396
}
10497
@else {
105-
$color: theming.get-color-config($theme);
106-
$density: theming.get-density-config($theme);
107-
$typography: theming.get-typography-config($theme);
108-
10998
@include base($theme);
110-
@if $color != null {
111-
@include color($color);
99+
@if inspection.theme-has($theme, color) {
100+
@include color($theme);
112101
}
113-
@if $density != null {
114-
@include density($density);
102+
@if inspection.theme-has($theme, density) {
103+
@include density($theme);
115104
}
116-
@if $typography != null {
117-
@include typography($typography);
105+
@if inspection.theme-has($theme, typography) {
106+
@include typography($theme);
118107
}
119108
}
120109
}

‎src/material/core/_core-theme.scss‎

Lines changed: 24 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@use 'sass:map';
2-
@use 'theming/theming';
1+
@use './theming/theming';
2+
@use './theming/inspection';
33
@use './style/private';
44
@use './ripple/ripple-theme';
55
@use './option/option-theme';
@@ -8,23 +8,18 @@
88
@use './style/elevation';
99
@use './typography/typography';
1010

11-
@mixin color($config-or-theme) {
12-
$config: theming.get-color-config($config-or-theme);
13-
14-
@include ripple-theme.color($config);
15-
@include option-theme.color($config);
16-
@include optgroup-theme.color($config);
17-
@include pseudo-checkbox-theme.color($config);
11+
@mixin color($theme) {
12+
@include ripple-theme.color($theme);
13+
@include option-theme.color($theme);
14+
@include optgroup-theme.color($theme);
15+
@include pseudo-checkbox-theme.color($theme);
1816

1917
// Wrapper element that provides the theme background when the user's content isn't
2018
// inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
2119
// selector in case the mixin is included at the top level.
2220
.mat-app-background#{if(&, ', &.mat-app-background', '')} {
23-
$background: map.get($config, background);
24-
$foreground: map.get($config, foreground);
25-
26-
background-color: theming.get-color-from-palette($background, background);
27-
color: theming.get-color-from-palette($foreground, text);
21+
background-color: inspection.get-theme-color($theme, background, background);
22+
color: inspection.get-theme-color($theme, foreground, text);
2823
}
2924

3025
// Provides external CSS classes for each elevation value. Each CSS class is formatted as
@@ -35,7 +30,7 @@
3530
// We need the `mat-mdc-elevation-specific`, because some MDC mixins
3631
// come with elevation baked in and we don't have a way of removing it.
3732
.#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
38-
@include private.private-theme-elevation($zValue, $config);
33+
@include private.private-theme-elevation($zValue, $theme);
3934
}
4035
}
4136

@@ -47,46 +42,36 @@
4742
}
4843
}
4944

50-
@mixin typography($config-or-theme) {
51-
$config: typography.private-typography-to-2018-config(
52-
theming.get-typography-config($config-or-theme));
53-
54-
@include option-theme.typography($config);
55-
@include optgroup-theme.typography($config);
56-
@include pseudo-checkbox-theme.typography($config);
45+
@mixin typography($theme) {
46+
@include option-theme.typography($theme);
47+
@include optgroup-theme.typography($theme);
48+
@include pseudo-checkbox-theme.typography($theme);
5749
// TODO(mmalerba): add typography mixin for this.
5850
// @include ripple-theme.typography($config);
5951
}
6052

61-
@mixin density($config-or-theme) {
62-
$density-scale: theming.get-density-config($config-or-theme);
63-
64-
@include option-theme.density($density-scale);
65-
@include optgroup-theme.density($density-scale);
53+
@mixin density($theme) {
54+
@include option-theme.density($theme);
55+
@include optgroup-theme.density($theme);
6656
// TODO(mmalerba): add density mixins for these.
6757
// @include ripple-theme.density($density-scale);
6858
// @include pseudo-checkbox-theme.density($density-scale);
6959
}
7060

7161
// Mixin that renders all of the core styles that depend on the theme.
72-
@mixin theme($theme-or-color-config) {
73-
$theme: theming.private-legacy-get-theme($theme-or-color-config);
62+
@mixin theme($theme) {
7463
// Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
7564
// there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
7665
// the imported themes (such as `mat-ripple-theme`) should not report again.
7766
@include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {
78-
$color: theming.get-color-config($theme);
79-
$density: theming.get-density-config($theme);
80-
$typography: theming.get-typography-config($theme);
81-
82-
@if $color != null {
83-
@include color($color);
67+
@if inspection.theme-has($theme, color) {
68+
@include color($theme);
8469
}
85-
@if $density != null {
86-
@include density($density);
70+
@if inspection.theme-has($theme, density) {
71+
@include density($theme);
8772
}
88-
@if $typography != null {
89-
@include typography($typography);
73+
@if inspection.theme-has($theme, typography) {
74+
@include typography($theme);
9075
}
9176
}
9277
}

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

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,36 @@
33
@use '../style/sass-utils';
44

55
@use '../theming/theming';
6+
@use '../theming/inspection';
67
@use '../typography/typography';
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-optgroup.$prefix,
13-
tokens-mat-optgroup.get-color-tokens($config));
12+
tokens-mat-optgroup.get-color-tokens($theme));
1413
}
1514
}
1615

17-
@mixin typography($config-or-theme) {
18-
$config: typography.private-typography-to-2018-config(
19-
theming.get-typography-config($config-or-theme));
20-
16+
@mixin typography($theme) {
2117
@include sass-utils.current-selector-or-root() {
2218
@include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
23-
tokens-mat-optgroup.get-typography-tokens($config));
19+
tokens-mat-optgroup.get-typography-tokens($theme));
2420
}
2521
}
2622

27-
@mixin density($config-or-theme) {
28-
$density-scale: theming.get-density-config($config-or-theme);
23+
@mixin density($theme) {
2924
}
3025

31-
@mixin theme($theme-or-color-config) {
32-
$theme: theming.private-legacy-get-theme($theme-or-color-config);
26+
@mixin theme($theme) {
3327
@include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') {
34-
$color: theming.get-color-config($theme);
35-
$density: theming.get-density-config($theme);
36-
$typography: theming.get-typography-config($theme);
37-
38-
@if $color != null {
39-
@include color($color);
28+
@if inspection.theme-has($theme, color) {
29+
@include color($theme);
4030
}
41-
@if $density != null {
42-
@include density($density);
31+
@if inspection.theme-has($theme, density) {
32+
@include density($theme);
4333
}
44-
@if $typography != null {
45-
@include typography($typography);
34+
@if inspection.theme-has($theme, typography) {
35+
@include typography($theme);
4636
}
4737
}
4838
}

0 commit comments

Comments
 (0)