Border radius is inconsitent

[Zyclotrop-j]

The radius of borders is styled in an inconsistent fashion

Expected Behavior

There is one consistent way to set the border-radius. There is one place in the theme to store different border-radii.

Actual Behavior

There is a variety of locations in the theme to set the border-radius; these use a different syntax. Some allow choosing the degree of rounding, some don't. There are two helpers in the utils commonly used. Further global.edgeSize is used multi-purpose.

List of different methods:

• box -> round -> theme.global.edgeSize
• meter -> round.size -> theme.global.edgeSize
• rangeInput -> theme.global.spacing
• drop -> theme.global.drop.border.radius
• layer -> style -> theme.layer.border.radius
• button -> style -> theme.button.border.radius
• checkbox -> theme.checkBox.toggle.radius
• select -> utils/styles.js -> controlBorderStyle -> theme.global.control.border.radius
• maskedInput, textArea, textInput -> utils/styles.js -> inputStyle -> controlBorderStyle -> theme.global.control.border.radius

Implications:

• There is no central option to turn styles on or off
• Border radius is inconsitent
• Setting edgeSize -> medium to 0 (that is setting the default border-radius to 0) has implications on the overall layout

Steps to Reproduce

Render any / all of the above components and change the theme. Notice the inconsistencies outlined

[Hriishikeshh]

hey i would like to work on this as you have recently opened it under hacktoberfest2024 tag

[jcfilben]

Hi @Hriishikeshh this issue is tagged as v3-attention because it is something that requires breaking changes and we would not want to implement until we were considering a v3 of Grommet (we are not at this point in time). So this isn't something that should be worked on yet. This issue doesn't have a hacktoberfest label but you can check out some of the other issues that do https://github.com/grommet/grommet/issues?q=is%3Aopen+is%3Aissue+label%3Ahacktoberfest