🎨 Alpura Design System - Paleta de Colores
Esta documentación define la identidad visual para los Microfrontends de Alpura. El sistema garantiza consistencia, accesibilidad (cumplimiento de ratios de contraste WCAG) y jerarquía visual en toda la interfaz.
🏛️ Colores de Marca (Core)
Estos colores representan la esencia de la marca y se utilizan para componentes principales, CTAs y estados de marca.
Primary (Azul Corporativo)
Utilizado para acciones principales y elementos de marca destacados.
| Estado | Variable CSS | Hex |
|---|---|---|
| Light | --alp-color-primary-light | #E9EAF3 |
| Normal | --alp-color-primary-normal | #20298B |
| Hover | --alp-color-primary-hover | #1D257D |
| Active | --alp-color-primary-active | #1A216F |
| Dark | --alp-color-primary-dark | #181F68 |
Secondary & Tertiary
Colores de apoyo para jerarquía visual secundaria y acentos específicos.
| Categoría | Estado | Variable CSS | Hex |
|---|---|---|---|
| Secondary | Light | --alp-color-secondary-light | #E6F2F7 |
| Normal | --alp-color-secondary-normal | #007EAE | |
| Hover | --alp-color-secondary-hover | #00719D | |
| Active | --alp-color-secondary-active | #00658B | |
| Dark | --alp-color-secondary-dark | #005F83 | |
| Tertiary | Light | --alp-color-tertiary-light | #F1EBF3 |
| Normal | --alp-color-tertiary-normal | #753687 | |
| Hover | --alp-color-tertiary-hover | #69317A | |
| Active | --alp-color-tertiary-active | #5E2B6C | |
| Dark | --alp-color-tertiary-dark | #582965 |
⏳ Colores Legados (Legacy)
Estos colores se mantienen por compatibilidad con versiones anteriores del sistema.
- Green:
#16751d(--alpura-green) | Blue:#1976d2(--alpura-blue) - Red:
#e17c75(--alpura-red) | Purple:#6f42c1(--alpura-purple)
🚦 Colores Funcionales (Feedback)
Utilizados para comunicar estados del sistema y dar feedback al usuario.
| Tipo | Variable CSS | Soft (Fondo) | Sólido (Borde/Texto) |
|---|---|---|---|
| Éxito | --alp-state-success | #EBF7E6 (-soft) | #38B000 |
| Error | --alp-state-error | #FCEBED (-soft) | #DC3545 |
| Aviso | --alp-state-warning | #FFF9E6 (-soft) | #FFC107 |
| Info | --alp-state-info | - | #17A2B8 |
🌑 Colores Neutros
Para tipografía, bordes, fondos y superficies.
- Background / White:
#FEFEFE(--alp-tbl-bg) - Border / Divider:
#E5E7EB(--alp-tbl-border) - Text Muted:
#6B7280(--alp-tbl-text-muted) - Text Primary:
#111827(--alp-tbl-text)
💻 Implementación Técnica (Angular 19)
1. Variables Globales
Los colores están expuestos como CSS Variables en el :root, lo que permite que cualquier Microfrontend acceda a ellos sin necesidad de importar archivos SCSS pesados.
2. Clases de Utilidad
El sistema genera automáticamente clases para agilizar el desarrollo:
- Texto:
.text-primary,.text-secondary,.text-success, etc. - Fondos:
.bg-primary,.bg-secondary,.bg-error, etc.
🛠️ SCSS
// Ejemplo de uso en componente
.custom-card {
background-color: var(--alp-color-primary-light);
border: 1px solid var(--alp-tbl-border);
color: var(--alp-tbl-text);
}
📊 Soporte para Tablas y Datos
Se han incluido tokens específicos para componentes complejos como tablas de datos:
| Elemento | Variable CSS | Hex |
|---|---|---|
| Texto Principal | --alp-tbl-text | #111827 |
| Texto Secundario | --alp-tbl-text-muted | #6B7280 |
| Bordes / Divisores | --alp-tbl-border | #E5E7EB |
| Fondo Hover/Selección | --alp-tbl-hover / -selected | #DCEAF0 |
| Estado Peligro | --alp-tbl-danger | #EF4444 |
| Estado Éxito | --alp-tbl-success | #22C55E |
| Fondo de Tabla | --alp-tbl-bg | #FFFFFF |
Nota para desarrolladores: No usar colores en duro (Hardcoded Hex). Priorizar siempre el uso de las variables --alp-color-*.