Implement green focus ring on checkboxes & radios

Thanks for working on this @AntoineH! I've checked the design implementation and looks good. I'll leave the code review to @lauriii. :)

Wow that looks very cool! Should we darken the green so that it has better contrast? The current green (I think) is #28aC67, which falls slightly short of a 3:1 contrast ratio between the green and the background white: https://webaim.org/resources/contrastchecker/

@anevins could you open separate issue to discuss the contrast ration of the focus ring? This color is used in various different places and it would be great to fix them all at once.

FYI per the designs the green should be #26A769, with a 3.08:1 contrast that afaik should be enough for graphic elements. But it makes sense to address it in another issue together with other components.

This looks great!

I found a pre-existing issue that becomes worse. According to the design system, there should be 8px between the form element and the label. However, our current implementation only has 6px, and when we add the focus effect, it renders very close to the label as a result. We should probably fix that as part of this issue.

I updated the form elements (checkbox&radio) with the new spacing. Please review! :)

Fixing whitespace lint error.

Just my 2 cents, isn't outline (https://www.w3.org/TR/css-ui-4/#outline-props) the right CSS property to managing this kind of status highlighting?

@quiron outline supports only some very basic use cases. Our design has multiple outlines (2px white, 3px green) which isn't supported by outline. Because of Windows high contrast doesn't render box-shadow, we define a transparent outline that will be visible there.

It seems like the latest patch doesn't work as expected. With the latest patch there's no spacing between the input and the label at all.

Sorry, changed the variable name but forgot to update!
This patch should be working.

Thank you! Looks great! Committed and pushed.