Compact display and spacing tokens

[aweell]

Goal

The goal is to have a configuration in Mística to allow more compact display of components and spacing in each brand.

We can divide the spacing configuration in two main categories:

• Inner: The spacing each component has internally (cards or inputs padding)
• Outter: The spacing that creates vertical or horizontal rhythm when a page is designed (e. stack or inline spacing props)

A compact multiplier can be used to modify the values of the spacings in each category to recude the amount of space in order to be compact.

This is an example of how can the multiplier can be applied to margins paddings and font-size:

Context

There are some issues that may point in the same direction like:

• Comparador #1020
• Disminuir el tamaño de los text presets de inputs en desktop #1250

Both are focused in inner spacings / inner font-sizes. But currently there's a logic outside Mística that handles the outter spacing changes between brands,

Should that definition be part of mistica too?

Idea

This is an example of how different spacing configurations can change the density of the page design:

https://hihayk.github.io/shaper/

Impact

For the outter it would be neccessary to create design tokens to handle the different values the brands have.

For inner spacings the definition can be internal and i believe there's no need for tokens, only the definition of the compact multiplier.

Discussion Questions

• Should the compact multiplier be different between brands
• Should be consider inner and outter two different tasks, the outter can be already be configured in implementation but could be interesting to have a set of predefined values son we can achieve more consistency.
• Should the components have the possibility to be compact in an isolated way? I mean for example having one compact select in a page but the rest of them are default.
• Should mobile have a compact definition or it should be only for desktop?
• Could an outter spacing definition lead to problems since the list of the available spacing is enough to cover all product needs? Could be possible to mix tokenized spacings and the current ones?

Additional considerations

No response

Do you have a visual proposal?

No response