Skip to content

Commit

Permalink
fix(material/progress-bar): remove track color workaround (#28416)
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
crisbeto committed Jan 16, 2024
1 parent 244fb82 commit 53aae48
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 24 deletions.
17 changes: 2 additions & 15 deletions src/material/progress-bar/_progress-bar-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,8 @@
}

@mixin _palette-styles($theme, $palette-name) {
$color-tokens: tokens-mdc-linear-progress.get-color-tokens($theme, $palette-name);

// We can't set the `track-color` using `theme`, because it isn't possible for it to use a CSS
// variable since MDC's buffer animation works by constructing an SVG string from this color.
// We also can't set the `track-color` by creating our own token slot because the track-color
// is set in the SVG string in `theme-styles`.
@include mdc-linear-progress-theme.theme-styles((
// TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
// writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
// and doesn't match the Material design spec. For now we approximate the buffer background by
// applying an opacity to the color of the bar.
track-color: map.get($color-tokens, track-color),
));

@include mdc-linear-progress-theme.theme($color-tokens);
@include mdc-linear-progress-theme.theme(
tokens-mdc-linear-progress.get-color-tokens($theme, $palette-name));
}

@mixin color($theme) {
Expand Down
10 changes: 1 addition & 9 deletions src/material/progress-bar/progress-bar.scss
Original file line number Diff line number Diff line change
@@ -1,22 +1,14 @@
@use 'sass:map';
@use '@material/theme/custom-properties' as mdc-custom-properties;
@use '@material/linear-progress/linear-progress' as mdc-linear-progress;
@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
@use '../core/tokens/m2/mdc/linear-progress' as m2-mdc-linear-progress;

@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
$mdc-progress-bar-token-slots: m2-mdc-linear-progress.get-token-slots();

// Add the MDC progress-bar static styles.
@include mdc-linear-progress.static-styles();

// Add the official slots for the MDC progress-bar.
@include mdc-linear-progress-theme.theme-styles(
map.merge($mdc-progress-bar-token-slots, (
// Excluded because it is meant to be set by theme (b/273562256).
track-color: null,
))
);
@include mdc-linear-progress-theme.theme-styles(m2-mdc-linear-progress.get-token-slots());
}

.mat-mdc-progress-bar {
Expand Down

0 comments on commit 53aae48

Please sign in to comment.