Tokens

This content is not available in your language yet.

Los tokens son la fuente única de verdad del sistema visual. Cada decisión de diseño (color, espacio, radio, sombra, tipografía) se expresa como un token y se consume desde CSS, SCSS o JS.

Arquitectura en capas

Cobalt organiza los tokens en tres capas, de menor a mayor nivel de abstracción:

Base — primitivas crudas: --co-color-azul-700: #2563eb. No tienen significado de uso.
Primary / Status — alias semánticos del primer nivel: --co-color-primary-azul, --co-color-status-success.
Semantic — pensados por contexto de uso: --co-semantic-surface-primary, --co-semantic-text-default. Cambian automáticamente en modo oscuro.

Regla de oro: en código de aplicación usa tokens semánticos. En componentes de bajo nivel puedes usar base. Nunca hardcodees hex.

Formatos disponibles

Import	Uso
`@prolibu-suite/cobalt-tokens/css`	Variables CSS modo claro
`@prolibu-suite/cobalt-tokens/css/dark`	Override para `[data-theme="dark"]`
`@prolibu-suite/cobalt-tokens/scss`	Mixins SCSS
`@prolibu-suite/cobalt-tokens`	Constantes JS/TS

Build pipeline

Los tokens se generan con Style Dictionary v5 desde los JSON fuente en packages/tokens/src/. El comando pnpm tokens reconstruye todos los formatos y los sincroniza con @prolibu-suite/cobalt-core para que los Web Components los puedan consumir.