Tokens

Principios

• Los tokens representan significado, no apariencia
• No existen tokens por componente
• Un token puede usarse en múltiples contextos
• Los componentes deciden cómo aplicar los tokens

Surface

Definen capas y profundidad. Usados para fondos, paneles y contenedores.

• --color-surface-main
• --color-surface-elevated
• --color-surface-sunken
• --color-surface-stroke

Ejemplo de uso: bg-(--color-surface-elevated)

Text

Controlan jerarquía y legibilidad. No representan estados.

• --color-text-primary
• --color-text-muted
• --color-text-dim

Ejemplo de uso: text-(--color-text-muted)

Accent

Colores de énfasis para acciones y focos visuales.

• --color-accent-primary
• --color-accent-muted

Ejemplo de uso: text-(--color-accent-primary)

Status

Tokens de feedback del sistema. No representan acciones.

• --color-status-success
• --color-status-warning
• --color-status-error

Ejemplo de uso: border-(--color-status-error)

Typography

Definen familias tipográficas base del sistema.

• --font-family-base
• --font-family-mono