bug(mat-progress-bar): Buffer bar slightly lighter than expected

[infacto]

Reproduction

1. Visit the Material docs page: https://material.angular.io/components/progress-bar/overview
2. Change the theme to dark.
3. See that the mat-progress-bar has a fixed white background (blend with theme color).

Expected Behavior

The background should be transparent (semi opacity). Not fixed color white.

Actual Behavior

The background color is fixed white. It's 1. hard to see in dark mode. 2. Ugly in dark mode. 3. It violates Material Design.

https://material.io/components/progress-indicators
https://material.io/design/color/dark-theme.html

Get inspired by Vuetify Progress Bar

Demo

As you can see, the background color is more prominent as the progress in dark mode. Not good...

Goal

Should look like:

Environment

All you need is on the docs page. It's not related to my project.
Viewed in Chrome on Windows 10. Angular Material Version 11.2.2. (as you can see in the gif record).

[jelbourn]

@andrewseguin I took and a look and it does look like the buffer portion of the bar is a bit lighter than expected, which is more noticeable in dark themes. Seems to apply to the MDC version as well.

[y0nd0]

"slightly" is slightly understatement. The lighter section (background) takes the prominent part of this component.

^{This screenshot is zoomed. At 100% it's really impossible to see.}

[andrewseguin]

The colors are definitely off. Thanks for bring it to our attention. I think the best solution is to apply the color with transparency to the buffer. Unfortunately with the way the progress bar is structured, the buffer dots are underneath the entire progress bar and will show up when opacity is applied. I don't think we have the bandwidth to make such an HTML change.

The second best solution is for us to modify the color using a lightness adjustment. It's not perfect, but it's an improvement over what you see here.

If you are able to depend on material-experimental, I recommend trying out the MDC progress bar which should have the best look overall.

[andrewseguin]

Actually I think I've got a decent solution using color.mix - #22164

It's not as great as using opacity since it depends on the background being the same as the theme background, but I think it will suffice, and it's certainly an improvement over what was shown here.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}