Linked to #38041.
This is an alternate fix that includes some new CSS variables dedicated to form validation valid and invalid colors. This approach should suffice for a number of customization options while also solving our color contrast and color mode issues.
- We're not programmatically generating the CSS variables for form validation states (e.g., if folks move from valid/invalid to custom ones like warning/error), but that's okay I think. Maybe something to tackle in v6 if possible.
- This means folks can customize via Sass only (the validation map, Sass variables, and Sass mixin), or via CSS variables, depending on their needs.
What this doesn't, and can't, resolve is the icon color since we're embedding SVGs. I don't think the path of duplicating the SVG as embedded in our CSS is a good option either since that adds a good chunk of file size.