Skip to content

Commit 262dc2a

Browse files
committed
fix(material-experimental/mdc-chips): set correct ripple opacity for focus states
1 parent acb3f33 commit 262dc2a

File tree

1 file changed

+18
-3
lines changed

1 file changed

+18
-3
lines changed

src/material-experimental/mdc-chips/_chips-theme.scss

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,36 @@
2929
@include mdc-chip-fill-color-accessible($unselected-background,
3030
$query: $mat-theme-styles-query);
3131

32+
// mdc-chip-fill-color-accessible includes mdc-chip-selected-ink-color which overrides the opacity
33+
// so selected chips always show a ripple.
34+
// Include the same mixins but use mdc-chip-selected-ink-color-without-ripple
3235
&.mat-primary {
3336
&.mdc-chip--selected, &.mat-mdc-chip-highlighted {
34-
@include mdc-chip-fill-color-accessible($primary, $query: $mat-theme-styles-query);
37+
@include mdc-chip-fill-color($primary, $query: $mat-theme-styles-query);
38+
@include mdc-chip-ink-color(text-primary-on-dark, $query: $mat-theme-styles-query);
39+
@include mdc-chip-selected-ink-color-without-ripple_(text-primary-on-dark, $query: $mat-theme-styles-query);
40+
@include mdc-chip-leading-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
41+
@include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
3542
}
3643
}
3744

3845
&.mat-accent {
3946
&.mdc-chip--selected, &.mat-mdc-chip-highlighted {
40-
@include mdc-chip-fill-color-accessible($accent, $query: $mat-theme-styles-query);
47+
@include mdc-chip-fill-color($accent, $query: $mat-theme-styles-query);
48+
@include mdc-chip-ink-color(text-primary-on-dark, $query: $mat-theme-styles-query);
49+
@include mdc-chip-selected-ink-color-without-ripple_(text-primary-on-dark, $query: $mat-theme-styles-query);
50+
@include mdc-chip-leading-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
51+
@include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
4152
}
4253
}
4354

4455
&.mat-warn {
4556
&.mdc-chip--selected, &.mat-mdc-chip-highlighted {
46-
@include mdc-chip-fill-color-accessible($warn, $query: $mat-theme-styles-query);
57+
@include mdc-chip-fill-color($warn, $query: $mat-theme-styles-query);
58+
@include mdc-chip-ink-color(text-primary-on-dark, $query: $mat-theme-styles-query);
59+
@include mdc-chip-selected-ink-color-without-ripple_(text-primary-on-dark, $query: $mat-theme-styles-query);
60+
@include mdc-chip-leading-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
61+
@include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
4762
}
4863
}
4964
}

0 commit comments

Comments
 (0)