Tokens
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
Sección titulada «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
Sección titulada «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
Sección titulada «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.