Redesign radio to match with checkbox

[Febakke]

When we implemented radio and checkbox with darkmode. We noticed that they dont match very well. We should try to alter the design of the radio button to handle darkmode better.

Elements we want

• checked components are filled
• Contrast color

Tasks

Preview Give feedback

1. Design new radiobutton component

[Febakke]

My first instinct is to add white to the "gap" inside the radiobutton. Hoping this would make the radio more visible and match with our checkbox. But this did not pan out. We have experience from working on focus indicators that radios get weird looking when you ad more circles.

Next was to draw inspiration from other designsystems that support darkmode. And there are many ways that this can be handled. One is let the check and "gap" have the background color. As shown in the screenshot 👇

They look better as a pair of components, but they are very subdued. I wish the selected inputs would be more visible.

We also looked into a outline versjon. But when you remove fill, they also get less visible and harder to read.

The version we have most hope for is the one inspired by Mantine. This will give us fill and a white indicator.

Cons:

• We need to use the contrast-default as color for the check/circle. If the base color is to light this color will be black instead of white. And be less visible in darkmode. And look weird in lightmode.
• It might be nitpicking, but I feel like it looks less "filled" than our current version. This is most apparent in the light version. Will this be a problem? There might be a reason why so many has implemented radio the way we have today.

Example in light mode

[Thunear]

I think we need to use the contrast color inside the radio button and the checkbox to make sure the contrast is sufficient in both light- and dark mode. Using just the background, as in the second example, is very problematic because a color cannot contrast properly against both dark and light colors at the same time. I like the Mantine example the most. Makes the checkbox and radio buttons fit together very nicely, and also makes sure contrasts work.

[mrosvik]

Should use token accent-contrast-1 to make sure it gets enough contrast. @Febakke

[Barsnes]

This has been done in Figma, and in React #2130