material-components-web icon indicating copy to clipboard operation
material-components-web copied to clipboard

[MDCSelect] Hardcoded color instead of CSS custom properties

Open Slion opened this issue 3 years ago • 2 comments

In version 14.0 MDCSelect can't be themed just by changing the CSS custom properties.

In fact in material-components-web.css on line 13313 you get the following:

.mdc-menu .mdc-deprecated-list {
  color: rgba(0, 0, 0, 0.87);
}

Theming by simply using CSS custom properties seems to be broken that way in quite a few places.

Slion avatar Jun 01 '22 15:06 Slion

I reckon it should be:

.mdc-menu .mdc-deprecated-list-item__meta {
    color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
}

.mdc-menu .mdc-deprecated-list-item__graphic {
    color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
}

.mdc-menu .mdc-deprecated-list {
    color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
}

Slion avatar Jun 01 '22 15:06 Slion

Here are a few other broken hardcoded color examples for that component:

.mdc-select--filled:not(.mdc-select--disabled) .mdc-select__anchor {
  background-color: whitesmoke;
}
.mdc-select--filled.mdc-select--disabled .mdc-select__anchor {
  background-color: #fafafa;
}
.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple::before {
  border-bottom-color: rgba(0, 0, 0, 0.42);
}
.mdc-select--filled:not(.mdc-select--disabled):hover .mdc-line-ripple::before {
  border-bottom-color: rgba(0, 0, 0, 0.87);
}

Slion avatar Jun 01 '22 15:06 Slion