Space

import { space } from "@desygna/desygna";

A system that enables spacing props.

The space utility converts shorthand margin and padding props to margin and padding CSS declarations.

• Numbers from 0 to the length of theme.space are converted to values on the space scale.
• Negative values can be used for negative margins.
• Numbers greater than the length of the theme.space array are converted to raw pixel values.
• String values are passed as raw CSS values.
• And array values are converted into responsive values.

Margin and padding props follow a shorthand syntax for specifying direction.

Prop	CSS Property
margin, m	margin
marginTop, mt	margin-top
marginRight, mr	margin-right
marginBottom, mb	margin-bottom
marginLeft, ml	margin-left
marginX, mx	margin-left and margin-right
marginY, my	margin-top and margin-bottom
padding, p	padding
paddingTop, pt	padding-top
paddingRight, pr	padding-right
paddingBottom, pb	padding-bottom
paddingLeft, pl	padding-left
paddingX, px	padding-left and padding-right
paddingY, py	padding-top and padding-bottom
gap	gap

// examples (margin prop)

// sets margin value of `theme.space[2]`
<Box m={2} />

// sets margin value of `-1 * theme.space[2]`
<Box m={-2} />

// sets a margin value of `16px` since it's greater than `theme.space.length`
<Box m={16} />

// sets margin `'auto'`
<Box m='auto' />

// sets margin `8px` on all viewports and `16px` from the first breakpoint and up
<Box m={[ 2, 3 ]} />