Primitivos de Tamaño
A continuación se detallan los valores base que definen la estructura visual de nuestro sistema. Estos tokens son inmutables y sirven como base para los componentes.
Escalas de Tamaño
Section titled “Escalas de Tamaño”Radius
| Token | Valor | Visual |
|---|---|---|
| radius-none
var(--radius-none)
| 0px
| |
| radius-xs
var(--radius-xs)
| 2px
| |
| radius-sm
var(--radius-sm)
| 4px
| |
| radius-md
var(--radius-md)
| 8px
| |
| radius-lg
var(--radius-lg)
| 16px
| |
| radius-xl
var(--radius-xl)
| 24px
| |
| radius-xxl
var(--radius-xxl)
| 32px
| |
| radius-full
var(--radius-full)
| 960px
| |
Spacing
| Token | Valor | Visual |
|---|---|---|
| sp-none
var(--sp-none)
| 0px
|
None
|
| sp-3xs
var(--sp-3xs)
| 2px
| |
| sp-2xs
var(--sp-2xs)
| 4px
| |
| sp-xs
var(--sp-xs)
| 8px
| |
| sp-sm
var(--sp-sm)
| 12px
| |
| sp-md
var(--sp-md)
| 16px
| |
| sp-lg
var(--sp-lg)
| 20px
| |
| sp-xl
var(--sp-xl)
| 24px
| |
| sp-2xl
var(--sp-2xl)
| 32px
| |
| sp-3xl
var(--sp-3xl)
| 48px
| |
| sp-4xl
var(--sp-4xl)
| 64px
| |
Icons
| Token | Valor | Visual |
|---|---|---|
| 2xs
var(--2xs)
| 10px
| |
| xs
var(--xs)
| 12px
| |
| sm
var(--sm)
| 16px
| |
| md
var(--md)
| 20px
| |
| lg
var(--lg)
| 24px
| |
| xl
var(--xl)
| 32px
| |
| 2xl
var(--2xl)
| 36px
| |
| 3xl
var(--3xl)
| 48px
| |
| 4xl
var(--4xl)
| 64px
| |
Stroke
| Token | Valor | Visual |
|---|---|---|
| Default
var(--Default)
| 1px
| |
| Active
var(--Active)
| 2px
| |
| Foco
var(--Foco)
| 2px
| |