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

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

Open mindaugasvcs opened this issue 1 year ago • 0 comments

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

mindaugasvcs avatar Jun 07 '24 10:06 mindaugasvcs