fix(mat-form-field mat-error mat-label): labels and errors on form fields are affecting one another on focus / hover with noticeable opacity applied on transition

[kanehjeong]

Reproduction

Use StackBlitz to reproduce your issue:

• Components: https://stackblitz.com/edit/angular-k6z7ve

Steps to reproduce:

1. Use dark theme in material (this step may not be required, but it's more obvious when viewing it)
2. Click each form field and click out of it to invoke 'required' error on all of them. Then click each individual one and notice the transition styles being applied on other ones.

Expected Behavior

Clicking each form field should cause a transition and style change that does not affect other form fields.

Actual Behavior

Clicking each form field seems to apply styles on other ones on transition when the field is focused or hovered. In particular, it seems like there is some hierarchy in which the styles are applied.

i.e. Clicking the first form field will apply transition styles on every element. Clicking the second form field will apply styles on itself (not the first field) and every element after, and so on.

Environment

• Angular: 11.0.4
• CDK/Material: 11+
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

On a similar topic, is there a possible way to override the styles to not apply these focus/hover styles? I can't find the place where the styles are being applied but it seems to give some opacity and make the font weight smaller. In darker themes, this transition style seems very obvious and looks weird. I'd rather the style be consistent during transition or not apply it at all.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}