#Spacing
import { spacingSystem } from '@poodle/system'
The spacing system helps us to create a spacing scaling. Any props in the spacing system can use spacing scaling.
With theme.spacing.scale
we can set it with a number, string (rem, em...). The prop send in
can be scaling multiply.
For example theme.spacing.scale = 4
then mt = "4"
will be equal to marginTop = "16"
.
The system chooses the value "scale-number"
because it's easy to spot where are we using scaling for spacing when we refactor the code.
We can also use theme.spacing.sets
to predefine a list spacing we want.
const theme = {spacing: {scale: 4,sets: {custom: "1rem","custom-2": (props) => {return props.other + 10;},},},};const listSystem = compose(colorsSystem, spacingSystem);export const system = createSystem(listSystem);const styles = system({theme,other: 5,mt: "scale-4",pt: "custom",pl: "custom-2",})// Styles result// { other: 5 },// { marginTop: "16" },// { paddingTop: "1rem" },// { paddingLeft: 15 },
Prop | Type | Description |
---|---|---|
m | ResponsiveProp<CSS.Property.Margin \| number> | The CSS margin property |
margin | ResponsiveProp<CSS.Property.Margin \| number> | The CSS margin property |
marginBottom | ResponsiveProp<CSS.Property.MarginBottom \| number> | The CSS margin property |
marginLeft | ResponsiveProp<CSS.Property.MarginLeft \| number> | The CSS margin-left property |
marginRight | ResponsiveProp<CSS.Property.MarginRight \| number> | The CSS margin-right property |
marginTop | ResponsiveProp<CSS.Property.MarginTop \| number> | The CSS margin-top property |
marginX | ResponsiveProp<CSS.Property.Margin \| number> | The CSS margin-top and margin-bottom property |
marginY | ResponsiveProp<CSS.Property.Margin \| number> | The CSS margin-top and marin-bottom property |
mb | ResponsiveProp<CSS.Property.MarginBottom \| number> | The CSS margin-bottom property |
ml | ResponsiveProp<CSS.Property.MarginLeft \| number> | The CSS margin-left property |
mr | ResponsiveProp<CSS.Property.MarginRight \| number> | The CSS margin-right property |
mt | ResponsiveProp<CSS.Property.MarginTop \| number> | The CSS margin-top property |
mx | ResponsiveProp<CSS.Property.Margin \| number> | The CSS margin-top and margin-bottom property |
my | ResponsiveProp<CSS.Property.Margin \| number> | The CSS margin-top and marin-bottom property |
p | ResponsiveProp<CSS.Property.Padding \| number> | The CSS padding property |
padding | ResponsiveProp<CSS.Property.Padding \| number> | The CSS padding property |
paddingBottom | ResponsiveProp<CSS.Property.PaddingBottom \| number> | The CSS padding-bottom property |
paddingLeft | ResponsiveProp<CSS.Property.PaddingLeft \| number> | The CSS padding-left property |
paddingRight | ResponsiveProp<CSS.Property.PaddingRight \| number> | The CSS padding-right property |
paddingTop | ResponsiveProp<CSS.Property.PaddingTop \| number> | The CSS padding-top property |
paddingX | ResponsiveProp<CSS.Property.Padding \| number> | The CSS padding-top and padding-bottom property |
paddingY | ResponsiveProp<CSS.Property.Padding \| number> | The CSS padding-left and padding-right property |
pb | ResponsiveProp<CSS.Property.PaddingBottom \| number> | The CSS padding-bottom property |
pl | ResponsiveProp<CSS.Property.PaddingLeft \| number> | The CSS padding-left property |
pr | ResponsiveProp<CSS.Property.PaddingRight \| number> | The CSS padding-right property |
pt | ResponsiveProp<CSS.Property.PaddingTop \| number> | The CSS padding-top property |
px | ResponsiveProp<CSS.Property.Padding \| number> | The CSS padding-top and padding-bottom property |
py | ResponsiveProp<CSS.Property.Padding \| number> | The CSS padding-left and padding-right property |