[Radio][Joy] Use precise dimensions for radio icon

[hbjORbj]

• I have followed (at least) the PR section of the contributing guide.

Closes #35531
Closes #34167

Problem:

• For variant="outlined", radio icon isn't precisely centered due to the border of radio element.

Solution:

--- a/packages/mui-joy/src/Radio/Radio.tsx
+++ b/packages/mui-joy/src/Radio/Radio.tsx
@@ -204,8 +204,8 @@ const RadioIcon = styled('span', {
   slot: 'Icon',
   overridesResolver: (props, styles) => styles.icon,
 })<{ ownerState: RadioOwnerState }>(({ ownerState }) => ({
-  width: '50%',
-  height: '50%',
+  width: 'calc((var(--Radio-size) - var(--variant-borderWidth)) / 2)',
+  height: 'calc((var(--Radio-size) - var(--variant-borderWidth)) / 2)',

Preview: https://deploy-preview-35548--material-ui.netlify.app/joy-ui/react-radio-button/

P.S. Argos changes are expected.

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-35548--material-ui.netlify.app/

Details of bundle changes

Generated by 🚫 dangerJS against 928cc0f

[siriwatknp]

👍 Nice catch!

[Studio384]

There are still issues with this:

This is the "Basic usage" demo from the documentation page in this pull request. The dimensions of the RadioIcon are 9.5x9.5 according to Edge, but it doesn't appear as such. At 100% scaling, these values are rounded to 10 pixels wide and 9 pixels tall.

The current height calculation only switches one rounding error out for another.

I'm also not sure why the border is considered like this. The border width only gives the width of a single border and not the border at both sides (horizontal or vertical), so at some point, the border can overlap with the RadioIcon, which I assume its inclusion is trying to prevent in the first place. Adding a * 2 would fix that, but it won't solve this issue of course, because that is just a much more complex way of writing 50%.