fix(material/form-field): align fill, outline, and standard appearance on hover behavior with spec

[NicholasCobbFromGoogle]

For mat-form-field elements being hovered (for fill, standard and outline appearances), the underline does not match that of the Google Material Spec. This PR should resolve that issue.

See Github Issue: #15583

Attached screenshots demonstrate the old behavior versus the new behavior on hovering (the cursor is not visible, but hovering is occurring):
Filled Now:

Filled Before:

Outline Now:

Outline Before:

Standard Now:

Standard Before:

[jelbourn]

@mmalerba could you take a look?

[jelbourn]

We should double check that this is still compliant with https://material.io/design/components/text-fields.html

[mmalerba]

The background color for the filled version looks quite dark in the focused state. Is that intentional, or accidental result of having background on both .mat-form-field-flex and .mat-form-field-flex::before and having the two blend together? Also the background color seems wrong in dark mode: https://mmalerba-demo4.firebaseapp.com/input

[NicholasCobbFromGoogle]

Regarding the focused state, I made the fill colors based on the coloring of the fill inputs in the MDC Wiz Sandbox that Sterling White sent over email a bit ago: a background color approximately equal to our mat-gray-50 and black overlay of opacity 0 (still), 0.04 (hover), 0.12 (focused). However, after looking at his response on the email again, the color values seem to not match the colors in the Sandbox. The Sandbox did not appear to have dark mode equivalents, so I used the dark mode palette equivalents of the colors I picked for the light mode.

Since this scheme is incorrect, I have reverted to the color scheme to that used on the previous push.

[Splaktar]

Can you please rebase this PR?

[jelbourn]

@Splaktar at this point I don't see us merging changes like this for form-field since we're replacing it with the MDC-based version.

[annieyw]

Closing because we are working on new MDC based components as mentioned above.

[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.}