Skip to content

refactor(material/chips): switch to new theming API #25866

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 31, 2022
Merged

refactor(material/chips): switch to new theming API #25866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 11 additions & 19 deletions src/material/chips/_chips-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,18 @@
@use '../core/theming/theming';
@use '../core/typography/typography';

// Customizes the appearance of a chip. Note that ideally we would be doing this using the
// `theme-styles` mixin, however it has the following problems:
// 1. Some of MDC's base styles have **very** high specificity. E.g. setting the background of a
// non-selected, enabled chip uses a selector like `.chip:not(.selected):not(.disabled)` instead of
// just `.chip`. This specificity increase has a ripple effect over all other components that are
// built on top of ours, making overrides extremely difficult and brittle.
// 2. Including the individual mixins allows us to avoid a lot of unnecessary CSS (~35kb in the
// dev app theme).
@mixin _chip-variant($background, $foreground) {
@include mdc-chip-theme.container-color($background);
@include mdc-chip-theme.icon-color($foreground);
@include mdc-chip-theme.trailing-action-color($foreground);
@include mdc-chip-theme.checkmark-color($foreground);
@include mdc-chip-theme.text-label-color($foreground);

// Technically the avatar is only supposed to have an image, but we also allow for icons.
// Set the color so the icons inherit the correct color.
.mat-mdc-chip-avatar {
color: $foreground;
}
@include mdc-chip-theme.theme((
elevated-container-color: $background,
elevated-disabled-container-color: $background,
label-text-color: $foreground,
disabled-label-text-color: $foreground,
with-icon-icon-color: $foreground,
with-icon-disabled-icon-color: $foreground,
with-trailing-icon-disabled-trailing-icon-color: $foreground,
with-trailing-icon-trailing-icon-color: $foreground,
with-icon-selected-icon-color: $foreground,
));
}

@mixin _colored-chip($palette) {
Expand Down
127 changes: 98 additions & 29 deletions src/material/chips/chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,102 @@
@use '../core/style/layout-common';
@use '../core/focus-indicators/private' as focus-indicators-private;

@include mdc-chip.without-ripple-styles($query: mdc-helpers.$mdc-base-styles-query);
// We *should* be able to include these styles through MDC's
// `theme-styles` mixin, but we can't at the time of writing.
@mixin _missing-mdc-theme-styles() {
.mat-mdc-standard-chip {
@include mdc-chip-theme.checkmark-size(mdc-chip-theme.$checkmark-size);
@include mdc-chip-theme.trailing-action-size(mdc-chip-theme.$trailing-action-size);
@include mdc-chip-theme.horizontal-padding(
mdc-chip-theme.$leading-padding,
mdc-chip-theme.$trailing-padding);
@include mdc-chip-theme.with-graphic-horizontal-padding(
mdc-chip-theme.$graphic-leading-padding,
mdc-chip-theme.$graphic-trailing-padding,
mdc-chip-theme.$trailing-padding);
@include mdc-chip-theme.with-trailing-action-horizontal-padding(
mdc-chip-theme.$leading-padding,
mdc-chip-theme.$trailing-action-leading-padding,
mdc-chip-theme.$trailing-action-trailing-padding);
@include mdc-chip-theme.with-graphic-and-trailing-action-horizontal-padding(
mdc-chip-theme.$graphic-leading-padding,
mdc-chip-theme.$graphic-trailing-padding,
mdc-chip-theme.$trailing-action-leading-padding,
mdc-chip-theme.$trailing-action-trailing-padding);

// MDC has some code looking for a `with-icon-selected-disabled-icon-color` token for this
// color, but the token isn't defined in the theme map so the validation throws an error.
// We don't change the color anyway so we can point it to the enable color instead.
&.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark {
color: var(--mdc-chip-with-icon-selected-icon-color, currentColor);
}
}

.mdc-evolution-chip--with-avatar {
@include mdc-chip-theme.with-graphic-horizontal-padding(
mdc-chip-theme.$avatar-leading-padding,
mdc-chip-theme.$avatar-trailing-padding,
mdc-chip-theme.$trailing-padding
);
@include mdc-chip-theme.with-graphic-and-trailing-action-horizontal-padding(
mdc-chip-theme.$avatar-leading-padding,
mdc-chip-theme.$avatar-trailing-padding,
mdc-chip-theme.$trailing-action-leading-padding,
mdc-chip-theme.$trailing-action-trailing-padding
);
@include mdc-chip-theme.graphic-size(mdc-chip-theme.$avatar-size);
@include mdc-chip-theme.icon-size(mdc-chip-theme.$avatar-size);
}
}

@include mdc-helpers.disable-mdc-fallback-declarations {
@include mdc-chip.static-styles();
@include _missing-mdc-theme-styles();
}

.mat-mdc-standard-chip {
@include mdc-chip-theme.theme-styles((
with-avatar-avatar-shape: (
family: 'rounded',
radius: (14px, 14px, 14px, 14px)
),
with-icon-icon-size: 18px,
with-leading-icon-disabled-leading-icon-opacity: 0.38,
with-leading-icon-leading-icon-size: 20px,
with-trailing-icon-disabled-trailing-icon-opacity: 0.38,
with-avatar-avatar-size: 28px,
with-avatar-disabled-avatar-opacity: 0.38,
with-icon-disabled-icon-opacity: 0.38,
with-trailing-icon-trailing-icon-size: 18px,
flat-disabled-outline-opacity: 0.12,
flat-disabled-unselected-outline-opacity: 0.12,
flat-selected-outline-width: 0,
outline-width: 1px,
flat-unselected-outline-width: 1px,
flat-outline-width: 1px,
disabled-label-text-opacity: 0.38,
disabled-outline-opacity: 0.12,
elevated-disabled-container-opacity: 0.12,
container-height: 32px,
container-shape: (
family: 'rounded',
radius: (16px, 16px, 16px, 16px)
),
));
@include mdc-helpers.disable-mdc-fallback-declarations {
@include mdc-chip-theme.theme-styles((
// Static tokens
with-avatar-avatar-shape: (
family: 'rounded',
radius: (14px, 14px, 14px, 14px)
),
with-icon-icon-size: 18px,
with-leading-icon-disabled-leading-icon-opacity: 0.38,
with-leading-icon-leading-icon-size: 20px,
with-trailing-icon-disabled-trailing-icon-opacity: 0.38,
with-avatar-avatar-size: 28px,
with-avatar-disabled-avatar-opacity: 0.38,
with-icon-disabled-icon-opacity: 0.38,
with-trailing-icon-trailing-icon-size: 18px,
flat-disabled-outline-opacity: 0.12,
flat-disabled-unselected-outline-opacity: 0.12,
flat-selected-outline-width: 0,
outline-width: 1px,
flat-unselected-outline-width: 1px,
flat-outline-width: 1px,
disabled-label-text-opacity: 0.38,
disabled-outline-opacity: 0.12,
elevated-disabled-container-opacity: 0.12,
container-height: 32px,
container-shape: (
family: 'rounded',
radius: (16px, 16px, 16px, 16px)
),

// Tokens that will be overwritten in the theme
elevated-container-color: transparent,
elevated-disabled-container-color: transparent,
label-text-color: currentColor,
disabled-label-text-color: currentColor,
with-icon-icon-color: currentColor,
with-icon-disabled-icon-color: currentColor,
with-trailing-icon-disabled-trailing-icon-color: currentColor,
with-trailing-icon-trailing-icon-color: currentColor,
with-icon-selected-icon-color: currentColor,
));
}

@include cdk.high-contrast(active, off) {
outline: solid 1px;
Expand Down Expand Up @@ -144,6 +209,10 @@
// In case an icon or text is used as an avatar.
text-align: center;
line-height: 1;

// Technically the avatar is only supposed to have an image, but we also allow for icons.
// Set the color so the icons inherit the correct color.
color: var(--mdc-chip-with-icon-icon-color, currentColor);
}

// Required for the strong focus indicator to fill the chip.
Expand Down