Skip to content

Commit e573974

Browse files
mmalerbammalerba
committed
WIP: convert components to theme inspection API
1 parent f8252d8 commit e573974

File tree

17 files changed

+283
-127
lines changed

17 files changed

+283
-127
lines changed

‎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: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -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() {
@@ -102,13 +100,12 @@
102100
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
103101
}
104102
@else {
105-
$color: theming.get-color-config($theme);
106103
$density: theming.get-density-config($theme);
107104
$typography: theming.get-typography-config($theme);
108105

109106
@include base($theme);
110-
@if $color != null {
111-
@include color($color);
107+
@if inspection.theme-has($theme, color) {
108+
@include color($theme);
112109
}
113110
@if $density != null {
114111
@include density($density);

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

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use 'sass:map';
2-
@use 'theming/theming';
2+
@use './theming/theming';
3+
@use './theming/inspection';
34
@use './style/private';
45
@use './ripple/ripple-theme';
56
@use './option/option-theme';
@@ -8,23 +9,18 @@
89
@use './style/elevation';
910
@use './typography/typography';
1011

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);
12+
@mixin color($theme) {
13+
@include ripple-theme.color($theme);
14+
@include option-theme.color($theme);
15+
@include optgroup-theme.color($theme);
16+
@include pseudo-checkbox-theme.color($theme);
1817

1918
// Wrapper element that provides the theme background when the user's content isn't
2019
// inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
2120
// selector in case the mixin is included at the top level.
2221
.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);
22+
background-color: inspection.get-theme-color($theme, background, background);
23+
color: inspection.get-theme-color($theme, foreground, text);
2824
}
2925

3026
// Provides external CSS classes for each elevation value. Each CSS class is formatted as
@@ -35,7 +31,7 @@
3531
// We need the `mat-mdc-elevation-specific`, because some MDC mixins
3632
// come with elevation baked in and we don't have a way of removing it.
3733
.#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
38-
@include private.private-theme-elevation($zValue, $config);
34+
@include private.private-theme-elevation($zValue, $theme);
3935
}
4036
}
4137

@@ -75,12 +71,11 @@
7571
// there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
7672
// the imported themes (such as `mat-ripple-theme`) should not report again.
7773
@include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {
78-
$color: theming.get-color-config($theme);
7974
$density: theming.get-density-config($theme);
8075
$typography: theming.get-typography-config($theme);
8176

82-
@if $color != null {
83-
@include color($color);
77+
@if inspection.theme-has($theme, color) {
78+
@include color($theme);
8479
}
8580
@if $density != null {
8681
@include density($density);

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,13 @@
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

@@ -35,7 +34,7 @@
3534
$density: theming.get-density-config($theme);
3635
$typography: theming.get-typography-config($theme);
3736

38-
@if $color != null {
37+
@if inspection.theme-has($theme, color) {
3938
@include color($color);
4039
}
4140
@if $density != null {

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

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,24 @@
44
@use '../style/sass-utils';
55

66
@use '../theming/theming';
7+
@use '../theming/inspection';
78
@use '../typography/typography';
89
@use '../mdc-helpers/mdc-helpers';
910

10-
@mixin color($config-or-theme) {
11-
$config: theming.get-color-config($config-or-theme);
12-
13-
@include mdc-helpers.using-mdc-theme($config) {
14-
@include sass-utils.current-selector-or-root() {
15-
@include token-utils.create-token-values(tokens-mat-option.$prefix,
16-
tokens-mat-option.get-color-tokens($config));
17-
}
11+
@mixin color($theme) {
12+
@include sass-utils.current-selector-or-root() {
13+
@include token-utils.create-token-values(tokens-mat-option.$prefix,
14+
tokens-mat-option.get-color-tokens($theme));
15+
}
1816

19-
.mat-accent {
20-
@include token-utils.create-token-values(tokens-mat-option.$prefix,
21-
tokens-mat-option.private-get-color-palette-color-tokens(map.get($config, accent)));
22-
}
17+
.mat-accent {
18+
@include token-utils.create-token-values(tokens-mat-option.$prefix,
19+
tokens-mat-option.get-color-tokens($theme, accent));
20+
}
2321

24-
.mat-warn {
25-
@include token-utils.create-token-values(tokens-mat-option.$prefix,
26-
tokens-mat-option.private-get-color-palette-color-tokens(map.get($config, warn)));
27-
}
22+
.mat-warn {
23+
@include token-utils.create-token-values(tokens-mat-option.$prefix,
24+
tokens-mat-option.get-color-tokens($theme, warn));
2825
}
2926
}
3027

@@ -49,8 +46,8 @@
4946
$density: theming.get-density-config($theme);
5047
$typography: theming.get-typography-config($theme);
5148

52-
@if $color != null {
53-
@include color($color);
49+
@if inspection.theme-has($theme, color) {
50+
@include color($theme);
5451
}
5552
@if $density != null {
5653
@include density($density);

‎src/material/core/ripple/_ripple-theme.scss‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
@use 'sass:map';
22
@use 'sass:meta';
33
@use '../theming/theming';
4+
@use '../theming/inspection';
45

56
// Colors for the ripple elements.
6-
@mixin color($config-or-theme) {
7-
$config: theming.get-color-config($config-or-theme);
8-
$foreground: map.get($config, foreground);
9-
$foreground-base: map.get($foreground, base);
7+
@mixin color($theme) {
8+
$foreground-base: inspection.get-theme-color($theme, foreground, base);
109
$color-opacity: 0.1;
1110

1211
.mat-ripple-element {
@@ -26,8 +25,8 @@
2625
$theme: theming.private-legacy-get-theme($theme-or-color-config);
2726
@include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') {
2827
$color: theming.get-color-config($theme);
29-
@if $color != null {
30-
@include color($color);
28+
@if inspection.theme-has($theme, color) {
29+
@include color($theme);
3130
}
3231
}
3332
}

‎src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss‎

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

45
@mixin _psuedo-checkbox-styles-with-color($text-color, $background) {
56
.mat-pseudo-checkbox-checked,
@@ -19,15 +20,13 @@
1920
}
2021
}
2122

22-
@mixin color($config-or-theme) {
23-
$config: theming.get-color-config($config-or-theme);
24-
$is-dark-theme: map.get($config, is-dark);
25-
26-
$primary: theming.get-color-from-palette(map.get($config, primary));
27-
$accent: theming.get-color-from-palette(map.get($config, accent));
28-
$warn: theming.get-color-from-palette(map.get($config, warn));
29-
$background: theming.get-color-from-palette(map.get($config, background), background);
30-
$secondary-text: theming.get-color-from-palette(map.get($config, foreground), secondary-text);
23+
@mixin color($theme) {
24+
$is-dark-theme: inspection.get-theme-type($theme) == dark;
25+
$primary: inspection.get-theme-color($theme, primary);
26+
$accent: inspection.get-theme-color($theme, accent);
27+
$warn: inspection.get-theme-color($theme, warn);
28+
$background: inspection.get-theme-color($theme, background, background);
29+
$secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
3130

3231
// NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
3332
// this does not work well with elements layered on top of one another. To get around this we

‎src/material/core/style/_private.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@use 'sass:map';
22
@use './elevation';
3+
@use '../theming/inspection';
34

4-
@mixin private-theme-elevation($zValue, $config) {
5-
$foreground: map.get($config, foreground);
6-
$elevation-color: map.get($foreground, elevation);
5+
@mixin private-theme-elevation($zValue, $theme) {
6+
$elevation-color: inspection.get-theme-color($theme, foreground, elevation);
77
$elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
88

99
@include elevation.elevation($zValue, $elevation-color-or-default);

0 commit comments

Comments
 (0)