Radius sizes are used for rounding the borders of different components.
Defined in rem units.
The default radius scale matches the default spacing scale. So the sm spacing would look good with the sm radius. This match is not required though - feel free to mix them.
Use Radius as an opaque type when creating a component that receives it as an argument.
That way you can make sure conflicting tokens like sizings or spacings are not being used in the wrong place:
W.Box.view
[ W.Box.radius W.Theme.Radius.sm ]
[ ... ]The value can be transformed into a CSS value later:
Html.div
[ W.Theme.styleList
[ ( "border-radius"
, W.Theme.Radius.toCSS radiusValue
)
]
]A custom value using rem as unit.
Although discouraged in a design system, it is useful to provide visibility for custom values. That way you can quickly search for edge cases where your team is using values outside your default scale.