Skip to content

Commit 064415b

Browse files
authored
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.
1 parent abbc044 commit 064415b

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)