Spacing sizes are used for spacing elements, not sizing them. These values are mainly used for setting the gap, padding and margin styles.
Defined in rem units.
Use Spacing as an opaque type when creating a component that receives it as an argument.
That way you can make sure conflicting tokens like radius or spacings are not being used in the wrong place:
W.Box.view
[ W.Box.padding W.Theme.Spacing.sm ]
[ ... ]The value can be transformed into a CSS value later:
Html.div
[ W.Theme.styleList
[ ( "padding"
, W.Theme.Spacing.toCSS paddingValue
)
]
]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.