Skip to content

Commit 99af8e9

Browse files
crisbetommalerba
authored andcommitted
fix(material-experimental/mdc-chips): checkmark not visible in… (#18061)
In high contrast mode SVG colors aren't changed which means that the white checkmark in the `mat-chip` will blend in with the background in black-on-white mode. These changes add an override to make the checkmark black in this case.
1 parent 61029c8 commit 99af8e9

File tree

1 file changed

+9
-0
lines changed

1 file changed

+9
-0
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,12 @@ $mat-chip-input-width: 150px;
7171
input.mat-mdc-chip-input {
7272
flex: 1 0 $mat-chip-input-width;
7373
}
74+
75+
.mdc-chip__checkmark-path {
76+
@include cdk-high-contrast(black-on-white) {
77+
// SVG colors won't be changed in high contrast mode and since the checkmark is white
78+
// by default, it'll blend in with the background in black-on-white mode. Override the color
79+
// to ensure that it's visible. We need !important, because the theme styles are very specific.
80+
stroke: #000 !important;
81+
}
82+
}

0 commit comments

Comments
 (0)