✨ Multiplier unit `x` and `config.baseUnit`
1aron opened this issue · comments
Description
This base unit determines the spacing scale and ensures visual consistency across products.
Most spacing systems are built around a base unit of 4 or 8 pixels.
Current
We have to define all spacing beforehand. For example, base unit 4:
export default {
variables: {
spacing: {
'1x': 4,
'2x': 8,
'3x': 12,
...,
'40x': 160
}
}
}
Apply the custom spacing variables:
<div class="m:1x">margin: 0.25rem</div>
Isn’t it a bit clumsy?
Expect
Introducing the new config.baseUnit
:
export default {
baseUnit: 4, // default
}
Use the new Master CSS multiplier unit x
:
<div class="m:1x">margin: 0.25rem</div>
This is a new feature built for spacing and dimensions in a design system.