feat: Make border of Radio thicker when hovering

[VincentSmedinga]

Describe the pull request

What

This makes the stroke of the circle of a Radio button a bit thicker when hovering over it.

Why

Because it has been designed as such.

How

The hover indicator is implemented as a separate circle to ensure it thickens to the inside only. Increasing the stroke width of one circle makes it grow to both the inside and outside.

I’ve added a token to make the background of the icon explicitly white – or else a background would shine through.

I’ve also changed the values to use pixels instead of rems to prevent the border from becoming overly thick when the text size is increased.

Checklist

Before submitting your pull request, please ensure you have done the following. Check each checkmark if you have done so or if it wasn't necessary:

• Add or update unit tests
• Add or update documentation
• Add or update stories
• Add or update exports in index.* files
• Start the PR title with a Conventional Commit prefix, as explained here.

Additional notes

–

[RubenSibon]

LGTM, slightly off position is acceptable imo.

[alimpens]

The position of the thicker border is not entirely correct. It divides is growth over the outside and inside, while the design shows it should grow to the inside only.

I think this looks a little weird, especially since all components with border width changes on hover currently grow to the inside only.

I left this hover effect out because it looks weird with a checked radio, that hasn't been designed yet I think.

Seeing as a Radio always has a label, and that has a very obvious underline on hover, maybe we don't need a hover effect on the radio icon at all? We should probably align that with the Checkbox though.

[VincentSmedinga]

The hover effect has been changed. This required redrawing the icon.

[dlnr]

The hover border now appears inside the radio. Is that supposed to happen?

[VincentSmedinga]

The hover border now appears inside the radio. Is that supposed to happen?

Yes, the PR description says so: “The hover indicator is implemented as a separate circle to ensure it thickens to the inside only.”

All our borders thicken to the inside: Checkbox, Link, Input.

[dlnr]

The only thing I think is left is a size reduction in the compact theme. We can do this in another PR.