Skip to content

Commit 3de6f3d

Browse files
crisbetocrisbeto
authored
refactor(material/chips): switch to new theming API (#25866)
Reworks the chips to use the new theming API from MDC.
1 parent 166ed5e commit 3de6f3d

File tree

2 files changed

+109
-48
lines changed

2 files changed

+109
-48
lines changed

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

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,18 @@
99
@use '../core/theming/theming';
1010
@use '../core/typography/typography';
1111

12-
// Customizes the appearance of a chip. Note that ideally we would be doing this using the
13-
// `theme-styles` mixin, however it has the following problems:
14-
// 1. Some of MDC's base styles have **very** high specificity. E.g. setting the background of a
15-
// non-selected, enabled chip uses a selector like `.chip:not(.selected):not(.disabled)` instead of
16-
// just `.chip`. This specificity increase has a ripple effect over all other components that are
17-
// built on top of ours, making overrides extremely difficult and brittle.
18-
// 2. Including the individual mixins allows us to avoid a lot of unnecessary CSS (~35kb in the
19-
// dev app theme).
2012
@mixin _chip-variant($background, $foreground) {
21-
@include mdc-chip-theme.container-color($background);
22-
@include mdc-chip-theme.icon-color($foreground);
23-
@include mdc-chip-theme.trailing-action-color($foreground);
24-
@include mdc-chip-theme.checkmark-color($foreground);
25-
@include mdc-chip-theme.text-label-color($foreground);
26-
27-
// Technically the avatar is only supposed to have an image, but we also allow for icons.
28-
// Set the color so the icons inherit the correct color.
29-
.mat-mdc-chip-avatar {
30-
color: $foreground;
31-
}
13+
@include mdc-chip-theme.theme((
14+
elevated-container-color: $background,
15+
elevated-disabled-container-color: $background,
16+
label-text-color: $foreground,
17+
disabled-label-text-color: $foreground,
18+
with-icon-icon-color: $foreground,
19+
with-icon-disabled-icon-color: $foreground,
20+
with-trailing-icon-disabled-trailing-icon-color: $foreground,
21+
with-trailing-icon-trailing-icon-color: $foreground,
22+
with-icon-selected-icon-color: $foreground,
23+
));
3224
}
3325

3426
@mixin _colored-chip($palette) {

‎src/material/chips/chip.scss

Lines changed: 98 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,102 @@
55
@use '../core/style/layout-common';
66
@use '../core/focus-indicators/private' as focus-indicators-private;
77

8-
@include mdc-chip.without-ripple-styles($query: mdc-helpers.$mdc-base-styles-query);
8+
// We *should* be able to include these styles through MDC's
9+
// `theme-styles` mixin, but we can't at the time of writing.
10+
@mixin _missing-mdc-theme-styles() {
11+
.mat-mdc-standard-chip {
12+
@include mdc-chip-theme.checkmark-size(mdc-chip-theme.$checkmark-size);
13+
@include mdc-chip-theme.trailing-action-size(mdc-chip-theme.$trailing-action-size);
14+
@include mdc-chip-theme.horizontal-padding(
15+
mdc-chip-theme.$leading-padding,
16+
mdc-chip-theme.$trailing-padding);
17+
@include mdc-chip-theme.with-graphic-horizontal-padding(
18+
mdc-chip-theme.$graphic-leading-padding,
19+
mdc-chip-theme.$graphic-trailing-padding,
20+
mdc-chip-theme.$trailing-padding);
21+
@include mdc-chip-theme.with-trailing-action-horizontal-padding(
22+
mdc-chip-theme.$leading-padding,
23+
mdc-chip-theme.$trailing-action-leading-padding,
24+
mdc-chip-theme.$trailing-action-trailing-padding);
25+
@include mdc-chip-theme.with-graphic-and-trailing-action-horizontal-padding(
26+
mdc-chip-theme.$graphic-leading-padding,
27+
mdc-chip-theme.$graphic-trailing-padding,
28+
mdc-chip-theme.$trailing-action-leading-padding,
29+
mdc-chip-theme.$trailing-action-trailing-padding);
30+
31+
// MDC has some code looking for a `with-icon-selected-disabled-icon-color` token for this
32+
// color, but the token isn't defined in the theme map so the validation throws an error.
33+
// We don't change the color anyway so we can point it to the enable color instead.
34+
&.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark {
35+
color: var(--mdc-chip-with-icon-selected-icon-color, currentColor);
36+
}
37+
}
38+
39+
.mdc-evolution-chip--with-avatar {
40+
@include mdc-chip-theme.with-graphic-horizontal-padding(
41+
mdc-chip-theme.$avatar-leading-padding,
42+
mdc-chip-theme.$avatar-trailing-padding,
43+
mdc-chip-theme.$trailing-padding
44+
);
45+
@include mdc-chip-theme.with-graphic-and-trailing-action-horizontal-padding(
46+
mdc-chip-theme.$avatar-leading-padding,
47+
mdc-chip-theme.$avatar-trailing-padding,
48+
mdc-chip-theme.$trailing-action-leading-padding,
49+
mdc-chip-theme.$trailing-action-trailing-padding
50+
);
51+
@include mdc-chip-theme.graphic-size(mdc-chip-theme.$avatar-size);
52+
@include mdc-chip-theme.icon-size(mdc-chip-theme.$avatar-size);
53+
}
54+
}
55+
56+
@include mdc-helpers.disable-mdc-fallback-declarations {
57+
@include mdc-chip.static-styles();
58+
@include _missing-mdc-theme-styles();
59+
}
960

1061
.mat-mdc-standard-chip {
11-
@include mdc-chip-theme.theme-styles((
12-
with-avatar-avatar-shape: (
13-
family: 'rounded',
14-
radius: (14px, 14px, 14px, 14px)
15-
),
16-
with-icon-icon-size: 18px,
17-
with-leading-icon-disabled-leading-icon-opacity: 0.38,
18-
with-leading-icon-leading-icon-size: 20px,
19-
with-trailing-icon-disabled-trailing-icon-opacity: 0.38,
20-
with-avatar-avatar-size: 28px,
21-
with-avatar-disabled-avatar-opacity: 0.38,
22-
with-icon-disabled-icon-opacity: 0.38,
23-
with-trailing-icon-trailing-icon-size: 18px,
24-
flat-disabled-outline-opacity: 0.12,
25-
flat-disabled-unselected-outline-opacity: 0.12,
26-
flat-selected-outline-width: 0,
27-
outline-width: 1px,
28-
flat-unselected-outline-width: 1px,
29-
flat-outline-width: 1px,
30-
disabled-label-text-opacity: 0.38,
31-
disabled-outline-opacity: 0.12,
32-
elevated-disabled-container-opacity: 0.12,
33-
container-height: 32px,
34-
container-shape: (
35-
family: 'rounded',
36-
radius: (16px, 16px, 16px, 16px)
37-
),
38-
));
62+
@include mdc-helpers.disable-mdc-fallback-declarations {
63+
@include mdc-chip-theme.theme-styles((
64+
// Static tokens
65+
with-avatar-avatar-shape: (
66+
family: 'rounded',
67+
radius: (14px, 14px, 14px, 14px)
68+
),
69+
with-icon-icon-size: 18px,
70+
with-leading-icon-disabled-leading-icon-opacity: 0.38,
71+
with-leading-icon-leading-icon-size: 20px,
72+
with-trailing-icon-disabled-trailing-icon-opacity: 0.38,
73+
with-avatar-avatar-size: 28px,
74+
with-avatar-disabled-avatar-opacity: 0.38,
75+
with-icon-disabled-icon-opacity: 0.38,
76+
with-trailing-icon-trailing-icon-size: 18px,
77+
flat-disabled-outline-opacity: 0.12,
78+
flat-disabled-unselected-outline-opacity: 0.12,
79+
flat-selected-outline-width: 0,
80+
outline-width: 1px,
81+
flat-unselected-outline-width: 1px,
82+
flat-outline-width: 1px,
83+
disabled-label-text-opacity: 0.38,
84+
disabled-outline-opacity: 0.12,
85+
elevated-disabled-container-opacity: 0.12,
86+
container-height: 32px,
87+
container-shape: (
88+
family: 'rounded',
89+
radius: (16px, 16px, 16px, 16px)
90+
),
91+
92+
// Tokens that will be overwritten in the theme
93+
elevated-container-color: transparent,
94+
elevated-disabled-container-color: transparent,
95+
label-text-color: currentColor,
96+
disabled-label-text-color: currentColor,
97+
with-icon-icon-color: currentColor,
98+
with-icon-disabled-icon-color: currentColor,
99+
with-trailing-icon-disabled-trailing-icon-color: currentColor,
100+
with-trailing-icon-trailing-icon-color: currentColor,
101+
with-icon-selected-icon-color: currentColor,
102+
));
103+
}
39104

40105
@include cdk.high-contrast(active, off) {
41106
outline: solid 1px;
@@ -144,6 +209,10 @@
144209
// In case an icon or text is used as an avatar.
145210
text-align: center;
146211
line-height: 1;
212+
213+
// Technically the avatar is only supposed to have an image, but we also allow for icons.
214+
// Set the color so the icons inherit the correct color.
215+
color: var(--mdc-chip-with-icon-icon-color, currentColor);
147216
}
148217

149218
// Required for the strong focus indicator to fill the chip.

0 commit comments

Comments
 (0)