Make focus-indicators more uniform across components

[vnys]

Both clickbounds and focus-indicators vary greatly across components, as can be seen in the screenshot. Most components have dotted outlines, but not all – and the spacing between the components and the focus-indicators are inconsistent.

[vnys]

https://w3c.github.io/wcag/techniques/css/C41

[mimarz]

We've had long discussions about this all year, in short we've landed on these approaches so far

• Input having a solid line is intended
• "Ghost" components should have a focus which matches the hover/clickbound box
• "Contained/filled" have the focus frame with a offset

Focus frame being a dotted line, with 2px width.

With the changes to rendering focus, we've noticed that the outline offset became to small & outline line to thin.

[oddvernes]

the focus frame currently is 1px dashed. Just changing it to 2px makes a big difference, and then maybe increase the offset from 2px to 3px

[vnys]

Let’s discuss this issue in the backlog meeting on Wednesday

[oddvernes]

After discussion with @lucasveil and @mimarz we have decided to decouple the focus-width from figma and instead hard code it in the figma broker to 2px. I will go over each component with focus-visible and test plus adjust offset where needed so we get a consistently visible focus ring

[oddvernes]

Components with focus-visible (that uses dashed outline) have been updated to fetch outline-width from token, and token have been updated to 2px, but for now this is hardcoded in figma-broker.
In the future we may have a 'second-source-of-truth' config for styles figma does not support or otherwise cannot be fetched from figma (#1388 ).

Radio/Checkbox: offset reduced by 1px so focus-ring doesn't touch label, table borders:

Button/Chip/Slider: increase offset by 1px to make where focus is it easier to spot when scanning:

Ghost_icon button: offset -2px so it is inset to clickbounds and fit inside table