Description

I'm struggling to get some of the mixins to work properly. I'll provide an example using the mdc-checkbox component, but the issues apply to many other components as well.

I followed the instructions to install the component (npm install @material/checkbox) and then I included it in my .scss file (@use "@material/checkbox"; and @include checkbox.core-styles;). Then I added the following class to customize the checkbox in my .scss file:

.checkbox-test {  
    @include checkbox.ink-color(blue);   
    @include checkbox.container-colors(blue, lightgreen, blue, lightgreen);  
}

Supposedly, this should yield blue ticks, blue borders, and green background. But this is what I get instead:

The colors of the second checkbox are right, but those of the first checkbox are wrong: both the border the background are white. And this is the styling that is being applied to mdc-checkbox__background:

So here's the (surprising) way the colors are determined:

• first, it checks --mdc-checkbox-checked-color (but this variable is not mentioned in the docs???)
• then, it checks --mdc-theme-secondary (which is white, in my case)
• lastly, it checks the value passed through the mixin (what's the point if it has the lowest priority???)

I added --mdc-theme-secondary: null; to my checkbox-test class and this is what I got:

Once again, the border is not blue, and the background is not green. Am I doing something wrong, or is this mixin bugged? I have experienced the same issue on Firefox, Chrome, and Safari.