Material-components-web: CSS Custom Properties not fully supported

[dfreedm]

This is a tracking issue for CSS Custom Property theming fixes.

[dfreedm]

Also related to #3685

[jamesmfriedman]

Adding a var for border-radius globally that elements inherited would be a good one :).

Vars for transition speeds

I’ve also put forth several proposals for how to handle runtime color alpha, basically you can store a var as a comma separated value

—color: 255, 255, 255

And then use it like this.

color: rgba(var(—color), 0.8)

That would allow the same functionality that sass Mixins provide.

[zbot473]

Is there a workaround for styling input labels?

[jamesmfriedman]

Yes, for now you can target the label directly with a css rule and fix the color, or if you’re using SASS you can override the color variables and it will build the appropriate CSS

[zbot473]

I did end up using that method, but unfortunately, I cannot use sass.
If only the RasPi supported node-sass...

[una]

A few items listed out with potential resolutions: #5349

[drzony]

In mwc-textfield the following properties do not work:
--mdc-text-field-idle-line-color
--mdc-text-field-hover-line-color
--mdc-text-field-disabled-line-color
The line is covered by mdc-line-ripple which is styled without custom properties

[asyncLiz]

@drzony the textfield custom properties were fixed in #1044, but haven't been released yet. You can install the canary version from npm to test them out.

[drzony]

@asyncLiz Thanks, canary seems to be working

[asyncLiz]

From https://github.com/material-components/material-components-web/issues/5878:

The text field's floating label is always purple, even when --mdc-theme-secondary or --mdc-theme-primary is set to custom colors.

https://material-components.github.io/material-components-web-catalog/#/component/text-field

https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield

Note that this problem of "hard-coded" colors exists also for:

• mdc-select ( to reproduce, open: https://material-components.github.io/material-components-web-catalog/#/component/select )
• mdc-snackbar ( to reproduce, open: https://material-components.github.io/material-components-web-catalog/#/component/snackbar )
• mdc-drawer / .mdc-list-item--activated ( to reproduce, open: https://material-components.github.io/material-components-web-catalog/#/component/drawer )

Steps to reproduce

1. Go to https://material-components.github.io/material-components-web-catalog/#/component/text-field
2. Open the web inspector, and add a style attribute to the body or html element, in order to change the theme's primary and secondary color CSS properties, for example: style="--mdc-theme-primary: magenta; --mdc-theme-secondary: orange;"

Actual behavior

The floating label is always purple

Expected behavior

The floating label should have the color of either primary or secondary

Screenshots

Your Environment:

| Software | Version(s) |
| ---------------- | ---------- |
| MDC Web | 6.0.0
| Browser | Firefox (latest)
| Operating System | MacOS 10.15.4

Possible solution

My current workaround is to override the following selectors:

/* MDC select floating label */
.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label,

/* MDC drawer list item text */
.mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic,

/* MDC drawer list item leading icon */
.mdc-drawer .mdc-list-item--activated,

/* MDC snackbar */
.mdc-snackbar__action:not(:disabled),

/* MDC textfield floating label */
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label
{
    color: var(--mdc-theme-secondary); /* or primary */
}

[danielweck]

Heads-up: bug tested and reproduced (as per the above comment) with the latest version deployed at https://material-components.github.io

[asyncLiz]

@danielweck keep in mind that the catalog is still on v4 and is not updated to the latest version, nor has this issue been fixed in the latest version.