Skip to content

Commit bf99037

Browse files
authored
fix(material-experimental/mdc-progress-spinner): apply correct color in high contrast mode (#22435)
The colors in the SVG used for the MDC progress spinner won't be re-mapped automatically in high contrast mode. These changes add the same treatment that we have for the non-MDC version.
1 parent d056f98 commit bf99037

File tree

1 file changed

+13
-0
lines changed

1 file changed

+13
-0
lines changed

src/material-experimental/mdc-progress-spinner/progress-spinner.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use '@material/circular-progress' as mdc-circular-progress;
22
@use '../mdc-helpers/mdc-helpers';
3+
@use '../../cdk/a11y';
34

45
@include mdc-circular-progress.core-styles($query: mdc-helpers.$mat-base-styles-query);
56

@@ -25,4 +26,16 @@
2526
stroke-dasharray: 0 !important;
2627
}
2728
}
29+
30+
@include a11y.high-contrast(active, off) {
31+
.mdc-circular-progress__indeterminate-circle-graphic,
32+
.mdc-circular-progress__determinate-circle {
33+
// SVG colors aren't inverted automatically in high contrast mode. Set the
34+
// stroke to currentColor in order to respect the user's color settings.
35+
stroke: currentColor;
36+
// currentColor blends in with the background in Chromium-based browsers
37+
// so we have to fall back to `CanvasText` which isn't supported on IE.
38+
stroke: CanvasText;
39+
}
40+
}
2841
}

0 commit comments

Comments
 (0)