[joy-ui][Theme] Components use radius 'sm' irrespective of their own size.

[cjmconie]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/github-9jgg4d?file=src%2Findex.tsx

Steps:

1. Inspect each of the size variants of the components button and input.
2. Notice all components have a radius of 0px irrespective of their own size. This is the value of the 'sm' prop in the theme's radius object. var(--joy-radius-sm)

Current behavior

Components like button, input, etc. all use theme radius 'sm' irrespective of their own size ('sm', 'md', 'lg').

Expected behavior

Components like button, input, etc. should (I think) use the theme's size radius appropriate for their own size. E.g <Button size='lg'> would use theme radius 'lg' as its radius.

At least, that's my assumption of how theme radius works 🙈

Context

Use the JoyUI theme object to theme my app.
Specifically here, to set the radius property for each size variant once (in the theme radius object) and have it apply to all components without the need to provide radius style override for components individually.

Your environment

npx @mui/envinfo

System:
    OS: macOS 14.3
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 123.0.6312.106
    Edge: Not Found
    Safari: 17.3
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.4 
    @emotion/styled: ^11.11.0 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.14 
    @mui/icons-material: ^5.15.14 => 5.15.14 
    @mui/joy: ^5.0.0-beta.32 => 5.0.0-beta.32 
    @mui/material: ^5.15.14 => 5.15.14 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.14 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-date-pickers: ^6.19.0 => 6.19.8 
    @types/react: ^18.2.74 => 18.2.74 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript:  5.4.3 

Search keywords: joy-ui radius theme