Review color behavior with `data-color` on Form components

[Febakke]

Related to #4506

Color on form components

Image showing all relevant components

Form components on the left are as they are today, the column on the right follow `data-color`

As you can see in the image, form components always have the pattern "neutral" color on form components before "activation". When they are selected they use the color specified with data-color. This is most prominent on checkbox, radio and switch.

This is a normal pattern for form components. Even native inputs follow this out of the box. But, for our case it might cause us a problem. How do I as a user of designsystemet give my form our visual identity. Text based form components will never use my colors for instance. Should we continue this practice? Or should we look at an alternative that can let our users use more colors even in forms?

We are also blocking our users for using consistent surface colors when form components are used. This is only visible in darkmode, but can make a design look more "messy".

Checkbox, Radio and Switch

Image example of Checkbox, radio and Switch

Note: use "on" and "off" as words to describe a form component that is active or inactive. In this context this means if the radio is selected or not selected. I am not talking about deactivated elements.

The decision we have to make is, is the pattern of using color as a indicator of what is "on" and what is "off" more important then being able to use your brand colors on components that are not in an "on" state. When looking at all form components its only on these elements shown here that the pattern makes sense. A text field is not "selected/unselected".

Search

There is no way to connect the field and search button right now. The field will always be neutral no matter what button color you use. Search is not really a form component and it makes no sense that the pattern should be used here. No matter what we decide here, I think search always should follow data-color

Textfield , Textarea, Select and Suggestion

All of these components have the same "field". The reason why they use "neutral" scale is because of the pattern explained above. But isolated, there are no reason why they should not follow data-color

Select and Suggestion

For Select we only control the field, not the "dropdown". Here we use the same "neutral" scale. But for Suggestion we have control over the dropdown. And here the behavior is weird.

In this example I set data-color="danger" Not something you normally would do on this component, but it shows clearly how the colors behave. On hover I can see that my selected color is visible. But the rest of the elements use the neutral scale. Here I would have thought the whole dropdown would use my selected color.

I think the "dropdown" is more coherent when all colors follows data-color

Text colors

data-color should not control label and description color. You would in most cases want to control text color for the whole document

As a user I want to follow the pattern neutral-> accent color on form components

Is there a way we can support this if we choose to remove the pattern...