MDC Select focus color is not themeable

[daneren2005]

What MDC Web Version are you using?

0.32

What browser(s) is this bug affecting?

Firefox/Chrome

What are the steps to reproduce the bug?

Create a custom theme and click inside of a select. While the focus is on the select, the underline will be themed correctly, but the select text will still be using color:rgba(98,0,238,.87) instead of the primary colors you selected. It shouldn't matter but here is the theme I am applying in case it does:

#app {
    --mdc-theme-primary: #03A9F4;
    --mdc-theme-primary-light: #90CAF9;
    --mdc-theme-primary-dark: #1976D2;
    --mdc-theme-secondary: #5C6BC0;
    --mdc-theme-secondary-light: #9FA8DA;
    --mdc-theme-secondary-dark: #1A237E;
}

I am using mdc-vue-adapter 0.11.2, but I was able to trace the problem back to material-components-web.min.css so I don't think that should matter. The offending line is: .mdc-select:not(.mdc-select--disabled) .mdc-select__surface:focus .mdc-select__label{color:rgba(98,0,238,.87)}

[patrickrodee]

Thanks for submitting an issue. Given that you've managed to track down the exact line where this occurs, I'm going to add the help-wanted tag to this.

Feel free to open a pull request resolving this issue. We're always happy to get community bug fixes!

Thanks!

[daneren2005]

I know where the problem is in the compiled css, but I have no idea how to use scss files since I have never used them in one of my projects before. I am guessing that the problem is from https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/_mixins.scss#L39 but I have no idea how to change that to be a var in the resulting css instead of a compiled in color.

[realtux]

Change

.mdc-select:not(.mdc-select--disabled)
.mdc-select__native-control:focus~.mdc-select__label{
    color:rgba(98,0,238,.87)
}

.mdc-select:not(.mdc-select--disabled)
.mdc-select__native-control:focus~.mdc-select__label{
    color:var(--mdc-theme-primary, #6200ee)
}

I tried finding this in the packages folder, but couldn't.

[asyncLiz]

This is still affecting select v4. We should not use prop-value in the focsed-label-color mixin

@mixin focused-label-color($color) {
  &:not(.mdc-select--disabled) {
    &.mdc-select--focused .mdc-floating-label {
-     @include floating-label-mixins.ink-color(theme-variables.prop-value($color));
+     @include floating-label-mixins.ink-color($color);
    }
  }
}