[system] Change the borderRadius prop to use the theme.shape.borderRadius as a multiplication value

[mnajdova]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Currently the borderRadius property on the Box component matches the theme.shape values. So for defining a borderRadius, usually we have the following code:

<Box borderRadius="borderRadius" />

The proposal (taken from #23053 (comment)) is to consider the theme.shape.borderRadius as a value used for multiplying the values inside the borderRadius.

Examples 🌈

Here are a few examples of how the new conversion could be used

theme = createMuiTheme({ shape: { borderRadius: 2}});
// ...
<Box borderRadius={1} /> // borderRadius: 2
<Box borderRadius={3} /> // borderRadius: 6
<Box borderRadius={10} /> // borderRadius: 20

Motivation 🔦

With this, we will have a more flexible approach for defining the borderRadius values and it would work consistently with the spacing values already available in the system.