@prolibu-suite/cobalt-tokens

Design tokens del Cobalt Design System — colores, tipografía, spacing, radius y sombras como CSS variables, SCSS y JS/TS.

Elemento #27. El azul que no se desvanece. La estructura invisible que hace que todo funcione.

Instalación

pnpm add @prolibu-suite/cobalt-tokens

Uso

CSS

@import '@prolibu-suite/cobalt-tokens/css';         /* tema claro */
@import '@prolibu-suite/cobalt-tokens/css/dark';    /* tokens dark mode (auto via prefers-color-scheme) */

.miCard {
  background: var(--co-semantic-surface-primary);
  color: var(--co-semantic-text-default);
  padding: var(--co-spacing-lg);
  border-radius: var(--co-border-radius-sm);
}

SCSS

@use '@prolibu-suite/cobalt-tokens/scss' as tokens;

JS / TS

import { tokens } from '@prolibu-suite/cobalt-tokens';

Sin build · vía CDN

<link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/[email protected]/build/css/tokens.css">
<link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/[email protected]/build/css/tokens-dark.css">

Cuatro colores de marca

Cuatro compuestos químicos del mismo elemento:

| Token | Compuesto | Hex | Uso | |---|---|---|---| | --co-color-primary-azul | CoAl₂O₄ | #2563EB | Acciones primarias, links | | --co-color-primary-verde | CoCO₃ | #02A270 | Success, estados activos | | --co-color-primary-rosado | Co(OH)₂ | #F32A73 | Acentos, badges | | --co-color-primary-amarillo | CoC₂O₄ | #FDBF00 | Warnings, highlights |

Documentación

→ cobalt-docs — referencia completa de tokens, dark mode, theming.

License

MIT