Spacing sizes are used for sizing elements. This value is most commonly used for setting an element's max-width style.
Defined in rem units.
Use Sizing as an opaque type when creating a component that receives it as an argument.
That way you can make sure conflicting tokens like radiuses or spacings are not being used in the wrong place:
W.Box.view
[ W.Box.maxWidth W.Theme.Sizing.lg ]
[ ... ]The value can be transformed into a CSS value later:
Html.div
[ W.Theme.styleList
[ ( "max-width"
, W.Theme.Radius.toCSS maxWidthValue
)
]
]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.