Skip to content

Commit 53aae48

Browse files
committed
fix(material/progress-bar): remove track color workaround (#28416)
Previously we couldn't get the `track-color` to work through tokens, because it was generating an inline SVG. That's no longer the case so we can remove the workaround which also fixes the progress bar under M3. (cherry picked from commit 064415b)
1 parent 244fb82 commit 53aae48

File tree

2 files changed

+3
-24
lines changed

2 files changed

+3
-24
lines changed

src/material/progress-bar/_progress-bar-theme.scss

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,8 @@
1818
}
1919

2020
@mixin _palette-styles($theme, $palette-name) {
21-
$color-tokens: tokens-mdc-linear-progress.get-color-tokens($theme, $palette-name);
22-
23-
// We can't set the `track-color` using `theme`, because it isn't possible for it to use a CSS
24-
// variable since MDC's buffer animation works by constructing an SVG string from this color.
25-
// We also can't set the `track-color` by creating our own token slot because the track-color
26-
// is set in the SVG string in `theme-styles`.
27-
@include mdc-linear-progress-theme.theme-styles((
28-
// TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
29-
// writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
30-
// and doesn't match the Material design spec. For now we approximate the buffer background by
31-
// applying an opacity to the color of the bar.
32-
track-color: map.get($color-tokens, track-color),
33-
));
34-
35-
@include mdc-linear-progress-theme.theme($color-tokens);
21+
@include mdc-linear-progress-theme.theme(
22+
tokens-mdc-linear-progress.get-color-tokens($theme, $palette-name));
3623
}
3724

3825
@mixin color($theme) {

src/material/progress-bar/progress-bar.scss

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,14 @@
1-
@use 'sass:map';
21
@use '@material/theme/custom-properties' as mdc-custom-properties;
32
@use '@material/linear-progress/linear-progress' as mdc-linear-progress;
43
@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
54
@use '../core/tokens/m2/mdc/linear-progress' as m2-mdc-linear-progress;
65

76
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
8-
$mdc-progress-bar-token-slots: m2-mdc-linear-progress.get-token-slots();
9-
107
// Add the MDC progress-bar static styles.
118
@include mdc-linear-progress.static-styles();
129

1310
// Add the official slots for the MDC progress-bar.
14-
@include mdc-linear-progress-theme.theme-styles(
15-
map.merge($mdc-progress-bar-token-slots, (
16-
// Excluded because it is meant to be set by theme (b/273562256).
17-
track-color: null,
18-
))
19-
);
11+
@include mdc-linear-progress-theme.theme-styles(m2-mdc-linear-progress.get-token-slots());
2012
}
2113

2214
.mat-mdc-progress-bar {

0 commit comments

Comments
 (0)