Spacing

Os tokens de espaçamento nos ajudam a construir layouts, sejam eles internos de componentes ou de layouts complexos.

Os valores são todos uma escala do valor base (8px), ou seja, o valor base04 é 4x o valor do token base (4 x 8px = 32px).

Inner

Os tokens de spacing do tipo inner servem para criarmos espaçamentos internos de componentes, como no exemplo a seguir.

Token

Valor

spacing.inner.base
var(--spacing-inner-base)
$spacing-inner-base		4px
spacing.inner.base02
var(--spacing-inner-base02)
$spacing-inner-base02		8px
spacing.inner.base03
var(--spacing-inner-base03)
$spacing-inner-base03		12px
spacing.inner.base04
var(--spacing-inner-base04)
$spacing-inner-base04		16px
spacing.inner.base05
var(--spacing-inner-base05)
$spacing-inner-base05		20px
spacing.inner.base06
var(--spacing-inner-base06)
$spacing-inner-base06		24px
spacing.inner.base08
var(--spacing-inner-base08)
$spacing-inner-base08		32px
spacing.inner.base10
var(--spacing-inner-base10)
$spacing-inner-base10		40px
spacing.inner.base12
var(--spacing-inner-base12)
$spacing-inner-base12		48px
spacing.inner.base14
var(--spacing-inner-base14)
$spacing-inner-base14		56px