Consistent defaults for text-input error colors

[jestelle]

It appears in that #de3226 is used as the default 'invalid' color, used to style text indicating an input is invalid.

I'm assuming this was chosen because it meets accessibility contrast guidelines. However, the Material team has new recommendations on defaults here.

The Material Design team recommends replacing the default with:
Google Red a700 (#D50000) on light backgrounds and

ff6e6e on dark backgrounds.

FF6E6E is a value outside of the Material palette but its the closest to Red A700 that passes accessibility.

These colors will match the Material spec, but shouldn't be considered cast in stone.

For that reason, keeping your defaults is totally reasonable, although you may want to think about what you do for dark backgrounds. Also, we are attempting to bring consistency across all Material platforms for the default here, so you can see similar bugs:
PolymerElements/paper-input#326
angular/material#6982

Developers and designers are welcome to override these defaults, but should take care in meeting accessibility requirements within their own applications.

[sgomes]

Thanks, @jestelle! We'll update to red a700 here.

As for dark backgrounds, we haven't done any specific work so far. That would be the "dark theme" in the spec, I assume?

[sgomes]

Revived #328 to track dark theme implementation in V2.

[Gomah]

I also noticed an "untouched" class for inputs who requires validation in Angular Material.

Following the text fields component, the error is toggled once the field is not untouched (on blur/focusout).

It's possible to hack it but it's a bit dodgy: https://jsfiddle.net/1nz8jymv/ ; Would be nice to have this standard implemented 😄

[Garbee]

@Gomah This has been brought up numerous times before. We use native validation APIs which don't currently allow for that behavior. And doing deeper dirty-state checking ourselves is a lot of extra effort to maintain.

Yes we diverge from the spec a bit, but it is the native way to do things.