search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.12k stars 2.15k forks source link

[MDCSelect] Hardcoded color instead of CSS custom properties #7629

Open Slion opened 2 years ago

Slion commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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);
}