HCM Light/Dark: Forms invalid and valid feedback + border colors should be kept

[imagoiq]

Currently, only the check icon color is kept on input and select and there is no way to differentiate valid and invalid with a checkbox for example.
https://next.design-system.post.ch/?path=/docs/patterns-forms--docs#validation-messages

[gfellerph]

@Cian77 do you have suggestions for styling errors and success messages in HCM?

[gfellerph]

@imagoiq set validation icon color to text color

[imagoiq]

@imagoiq set validation icon color to text color

@gfellerph Can you please clarify, your sentence is ambiguous. Setting the validation icon color to white on dark background would not fix the issue as the background of the feedback is still highlighted on valid or invalid state.

[gfellerph]

There are not enough colors to distinguish between valid/invalid state in HCM (and the other available colors have a different meaning https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/ but I'm sure you know that already). I'd argue that the highlight color is useful for directing attention towards the field.

As we had a look at the screenshot, we noticed that the only other identifier, the icon, is barely visible. Therefore we decided that it would be best to make this identifier more visible by giving it the same color as text. What do you think?

[imagoiq]

There are not enough colors to distinguish between valid/invalid state in HCM (and the other available colors have a different meaning https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/ but I'm sure you know that already). I'd argue that the highlight color is useful for directing attention towards the field.

As we had a look at the screenshot, we noticed that the only other identifier, the icon, is barely visible. Therefore we decided that it would be best to make this identifier more visible by giving it the same color as text. What do you think?

I went with "Mark" color instead of "Highlight" for the background color, because according to mdn "Hightlight" is for "Background of selected items" and then it's difficult to distinguish between selected input and the rest. #2766