[ @sdxc/u/size ]
padding
Applies logical padding using the spacing scale or a raw CSS length.
import { p } from "@sdxc/u/size";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.p(4) | css({ padding: "calc(var(--ui-spacing, 0.25rem) * 4)" }) |
u.p(1, 2, 3, 4) | css({ paddingBlockStart: "...", paddingInlineEnd: "...", paddingBlockEnd: "...", paddingInlineStart: "..." }) |
Examples
Basic example
Use p(n) with a step of the spacing scale, like p(4) or p(8), to pad every side of an element:
<div mix={[p(8), ...]}>
<div mix={[...]}>p(8)</div>
</div>Block and inline padding
Pass two values to pad the block axis and then the inline axis, like p(4, 10):
<div mix={[p(4, 10), ...]}>
<div mix={[...]}>p(4, 10)</div>
</div>Each side
Pass four values to pad the block-start, inline-end, block-end and inline-start edges in that order, like p(2, 8, 6, 4):
<div mix={[p(2, 8, 6, 4), ...]}>
<div mix={[...]}>p(2, 8, 6, 4)</div>
</div>Arbitrary values
Pass a string to use any CSS length instead of a step of the scale, like p("1.25rem") or p("2em", "5%"):
<div mix={[...]}>
<div mix={[p("1.25rem"), ...]}>
<div mix={[...]}>p("1.25rem")</div>
</div>
<div mix={[p("2em", "5%"), ...]}>
<div mix={[...]}>p("2em", "5%")</div>
</div>
</div>Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.p("2.75rem")Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.p(4))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.p(4))Customizing your theme
Customizing spacing
Every numeric step multiplies --ui-spacing, so redefining it rescales every spacing and sizing utility at once:
:root {
--ui-spacing: 0.25rem;
}Every call that names the step now reads the new value:
p(4)Signature
u.p(...values: SpacingValue[])