Regression: CSS runtime variable theming for tabs is broken

[jamesmfriedman]

I think I've tracked it down to this line which no longer respects css variables, only the SASS.

https://github.com/material-components/material-components-web/pull/4675/files#diff-bebfa5920069adc8cf8c7d36390da5f6R130

[abhiomkar]

#4688 will fix this to some extent.

But as per the current state most of the components we do not support theming using only CSS variables because of CSS limitations. For example, we use rgba() function in most of the places get less opaque color, for example, in components like text field, drawer, chips, checkbox etc.

But, support for CSS variables for theming is something that is in our radar.

[jamesmfriedman]

Pointing out something that was previously supported / working that now isn't, which is a breaking change for people that rely on it. I've had a ton of success using only css variables. This old PR I had open was more for brainstorming, but the idea this guy posted would solve the color mixin problem and allow css vars to work everywhere. #3145 (comment)

[abhiomkar]

So far we've included sass variable / mixin changes & component API changes as breaking changes. Since we don't fully support theming using CSS variable we haven't consider this as breaking change.

Another alternative approach to support CSS variables is to generate CSS variables for each primary color variant (ranging from 100 to 800) and reference it in the places where we need to mix with alpha. For example, primary color with alpha .34: --mdc-theme-primary-300: rgba(purple, .34);)

[jamesmfriedman]

Did you see the comment above? You can specify the colors and comma separated rgb for the variables which would allow you to do it all dynamically.

[abhiomkar]

I did take a look at the issue that you linked last year. Now I remember that I made a working prototype with that approach as proof-of-concept. /theme_alpha_variables_issue3066 :)

At that time, we decided not to change the color value format just to support this feature.

[jamesmfriedman]

Oh awesome. Well, personally I feel that css vars are freaking amazing (and I'll never run SASS again). I'd love to see the library move into a direction of official support for them, and as always, willing to help get it there. I've been using them exlusively for 2 years with little to no issues, just minor things like this that pop up.

[abhiomkar]

I created epic bug to track all the things related to CSS variables: #4709

[jamesmfriedman]

Awesome, thanks :)