✨ Multiplier unit x and config.baseUnit

[1aron]

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.