Introducción
Cobalt es el design system oficial de Prolibu. La estructura invisible que une todos los productos — Ventas, Operaciones, Soporte — bajo un mismo lenguaje visual y técnico.
Web Components estándar construidos con Stencil. Funcionan idénticamente en Vue, React, Svelte o HTML plano. Una sola implementación. Múltiples consumidores.
¿Por qué Cobalt?
Sección titulada «¿Por qué Cobalt?»Cobalt es el elemento #27 de la tabla periódica. El mineral responsable del azul más profundo que existe en la naturaleza.
Durante siglos dio color a la porcelana china, a los vitrales de las catedrales góticas y a las obras de Vermeer. Es un azul que no se desvanece — perdura.
Hoy, el cobalto es esencial en la tecnología que mueve al mundo: baterías de litio-ion, aleaciones de motores jet, superaleaciones resistentes al calor. Es el elemento que está dentro de las cosas que funcionan.
Por eso elegimos su nombre. Cobalt es lo que está debajo: invisible, estable, esencial.
Cobalt es Prolibu
Sección titulada «Cobalt es Prolibu»La metáfora no es decorativa — es operacional:
| Cobalt (mineral) | Prolibu (plataforma) |
|---|---|
| Se extrae de lo profundo | Se conecta a lo más profundo de la operación |
| Es estructura invisible | Es la infraestructura que une Ventas + Ops + Soporte |
| No se oxida, no se desvanece | Plataforma estable, precio predecible, sin sorpresas |
| Esencial para baterías | Esencial para que la empresa funcione |
| Un solo elemento → múltiples compuestos | Una sola plataforma → múltiples módulos |
Un elemento. Cuatro colores de marca.
Sección titulada «Un elemento. Cuatro colores de marca.»El cobalto produce los 4 colores de Prolibu según su compuesto químico:
| Color | Compuesto | Hex | Uso |
|---|---|---|---|
| Azul | CoAl₂O₄ | #2563EB | Acciones primarias, links, brand |
| Verde | CoCO₃ | #02A270 | Success, estados activos |
| Rosado | Co(OH)₂ | #F32A73 | Acentos, badges |
| Amarillo | CoC₂O₄ | #FDBF00 | Warnings, highlights |
Cuatro pigmentos del mismo elemento. Misma química, distinto compuesto. Como los módulos de Prolibu — distintos en función, idénticos en raíz.
Qué incluye
Sección titulada «Qué incluye»| Paquete | Contenido |
|---|---|
@prolibu-suite/cobalt-core | 53 Web Components (co-*) + loader perezoso |
@prolibu-suite/cobalt-tokens | Tokens en CSS, SCSS y JS — fuente única de verdad |
@prolibu-suite/cobalt-vue | Wrappers Vue 3 con tipos completos |
@prolibu-suite/cobalt-react | Wrappers React 17/18/19 con tipos completos |
@prolibu-suite/cobalt-form | <co-form> schema-driven, validación AJV incluida |
Web Components, framework-agnostic
Sección titulada «Web Components, framework-agnostic»- Una sola implementación — el mismo
<co-button>funciona en Vue 3 (suite-v2), Vue 2 (suite legacy), React o HTML plano. - Shadow DOM — los estilos del componente no contaminan tu app y tu CSS no contamina los componentes.
- API nativa del navegador — props vía atributos, eventos vía
CustomEvent, slots para composición. - Tree-shaking — el loader carga cada componente bajo demanda; pagas solo por lo que usas.
Convivencia con Quasar
Sección titulada «Convivencia con Quasar»En prolibu-front-v2/projects/suite-v2/ Cobalt convive con Quasar 2. La regla es simple: preferí co-* sobre q-* cuando exista un equivalente. Quasar queda como fallback para casos donde Cobalt aún no tiene componente (tablas complejas, uploader, editor WYSIWYG).
Ver el mapeo completo Quasar ↔ Cobalt en el CLAUDE.md del repo de suite-v2.
Próximos pasos
Sección titulada «Próximos pasos»- Instalación → — añade Cobalt a tu proyecto (npm o CDN).
- Tokens → — entiende cómo se construye el sistema de diseño.
- Iconos → — usá Phosphor a través de
<co-icon>.