search

material-components / material-components-web

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

[mdc-theme] mdc-floating-label color when focused is not changeable using CSS vars #8190

Open mindaugasvcs opened 4 weeks ago

mindaugasvcs commented 4 weeks ago

This is how the mentioned element color is styled when focused in current version of MD2 CSS:

.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
  color: rgba(98, 0, 238, 0.87);
}

and

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: rgba(98, 0, 238, 0.87);
}

Should be:

.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
  color: rgba(98, 0, 238, 0.87);
  color: var(--mdc-theme-primary, #6200ee);
}

and

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: rgba(98, 0, 238, 0.87);
  color: var(--mdc-theme-primary, #6200ee);
}