Vaadin text field label states

Flow
1

Hi, firstly I’d like to know how to change label font color in the vaadin text field . I am using polymer 3 and it seems to be imported from import '@vaadin/vaadin-material-styles/color.js';
I can change it using a module but that applies to the floating label as well I’ve already set that using --material-primary-text-color

But my main question is, how do I keep the floating label color even when it’s not focused.
So at the moment the label is black, it floats to blue and when I click away the floating label changes back to black. The last behavior is the one I don’t want.

2

If I understood correctly, you want the label to use the primary color when the field has a value.

To do that, you need to add something like this:

:host([has-value]
:not([invalid]
)) [part="label"]
 {
  color: var(--material-primary-text-color);
}
3

This works great, thank you.
And I was able to use this solution to figure out the first part of my question.