TextField does not respect CSS var --mdc-theme-primary

[kennylevinsen]

TextField no longer respects --mdc-theme-primary.

Specifically, .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label no longer references the CSS variable, and instead use the default purple primary color directly.

What MDC Web Version are you using?

Bug first occurred in 0.35.0, and persists in 0.37.0.

Last working version was 0.34.1

What browser(s) is this bug affecting?

Tested in Chrome

What OS are you using?

Fedora 28

What are the steps to reproduce the bug?

0.34.1 (working) codepen: https://codepen.io/anon/pen/oMjBPq
0.35.0 (not working) codepen: https://codepen.io/anon/pen/rrOjbm
0.37.0 (not working) codepen: https://codepen.io/anon/pen/vaNgMQ

What is the expected behavior?

That the primary color is observed like in 0.34.1.

What is the actual behavior?

The default primary purple color is observed from 0.35.0 and onwards.

Any other information you believe would be useful?

444f14f looks suspicious, but I have not bisected my way between the releases.

[kennylevinsen]

This is likely due to not being able to apply the .87 alpha channel to CSS var that already contains a color.

A solution to this could be to specify the color in a different way:

:root {
    --mdc-theme-primary: 240, 240, 240; /* arbitrary color */
}

.something {
    color: rgba(var(--mdc-theme-primary), .87);
}

[TANJX]

I have the same issue too; I overrode the original property

[abhiomkar]

@kennylevinsen Thanks for filing this issue.

mdc-theme-prop mixin currently only supports colors with no alpha value on theme property values (primary, secondary, on-surface etc). But, Text field component has alpha values mixed with the baseline colors which passed onto mdc-theme-prop that renders only color style directly without using CSS variables.

Added this to our tracker to make changes to out theme component to support using CSS variables.

[acdvorak]

Superseded by #4431.