[Bug] Slider's track container background is not updated by --mdc-theme-secondary

[kkimdev]

For example, with --mdc-theme-secondary: black; It results:

Notice that the right side track container background is still green-ish.

This is because slider's scss is compiled to a constant color for that background. Ideally it should be compiled to css that reflects --mdc-theme-secondary variable. https://github.com/material-components/material-components-web/blob/bfdd2ddce0e20187342224282c6b625008e7f074/packages/mdc-slider/_mixins.scss#L105

Other places correctly takes account --mdc-theme-secondary but not on that line, and I suspect it's due to the use of rgba(...) function there.

Either it shouldn't compile to a constant color, or provide a way to use user compiled scss with their choice of variables for slider material component.

[kkimdev]

@acdvorak

[svencowart]

I spent some time troubleshooting this bug and I came to similar conclusions as @kkimdev. Here is what I have found:

The mdc-slider-rail-color_ mixin uses the mdc-theme-prop-value function. mdc-theme-prop-value does not utilize css variables but instead uses constant sass variables.

I suspect that a part of the issue is the rgba function requires an rgb value and cannot accept hex values. If you look at the mdc-theme-prop mixin, there is special handling for using css variables which is why it works in other places. However, because rgba requires an rgb value this does not work here. The implementation of mdc-theme-prop-value needs to change in order to fix this bug. When I find additional time, I will try to come up with a possible solution and report back.

[svencowart]

I have submitted a fix within material-components-web: material-components/material-components-web#5132

[asyncliz]

@svencowart does the change to MDC automatically fix this issue?

[svencowart]

@async Yes, it does. Once the MDC version is changed this should be resolved automatically.

[asyncliz]

Verified and closing as fixed