The box variant of the TextField element has an issue where the focus background overlaps the floating label and input text. This causes the color of both to darken as a result. This seems to be unintentional.

What MDC Web Version are you using?

0.37.0

What browser(s) is this bug affecting?

Firefox 61.0.1
Chrome 68.0.3440.68

What OS are you using?

Windows 10

What are the steps to reproduce the bug?

Set custom colors on TextField element (see codepen style) and use a color select tool to see the difference in hex values. All colors should be #ff0000, but when checking the sample some are #ff0000 and some are #e40000.

0.37.0 (not working) https://codepen.io/anon/pen/vaXMvR
0.37.0 (working) https://codepen.io/anon/pen/ZjpNEW

What is the expected behavior?

The set color should be the same for both states.

What is the actual behavior?

The focus background overlaps the floating label and input text, causing their color to change unexpectedly.