7.4 KiB
7.4 KiB
Auditoría de colores — Etapa 1 Sprint 1.5
Hallazgos del audit de azules, hardcodes y
primaryen el código fuente. No se resuelven en Etapa 1. Las acciones se ejecutan en Etapas 3 (Web App) y 4-8 (PDFs).Fecha: 2026-05-16 · Ejecutado por: Claude Code Comandos:
grep -rn "blue|sky|indigo|3B82F6|2563EB" src/+grep -rn "#[0-9a-fA-F]{6}" src/
Categorías
- Migrar a InQ orange: color azul que debería ser naranja de marca
- Mantener azul funcional: azul donde es convención semántica (info, links, paralelo AND)
- Migrar a neutral: azul accidental que debería ser slate/gray
- Migrar a token: hex hardcodeado que tiene un token equivalente en tailwind.config.js
Hallazgos — Azules en clases Tailwind
| Archivo:línea | Clase actual | Categoría | Acción sugerida |
|---|---|---|---|
GatewayPanel.tsx:122 |
bg-blue-50 border-blue-200 |
Mantener azul funcional | El azul en gateways AND paralelos es convención visual (flujo paralelo = azul). Evaluar en Sprint 2 si cambiar a slate-50 sin perder semántica. |
GatewayPanel.tsx:124 |
text-blue-500 |
Mantener azul funcional | Ídem — ícono Info en bloque paralelo |
GatewayPanel.tsx:126-127 |
text-blue-800, text-blue-700 |
Mantener azul funcional | Texto del bloque informativo de gateway AND |
GatewayPanel.tsx:144 |
text-blue-600 |
Mantener azul funcional | "100%" en gateway paralelo — valor fijo, semántica coherente |
ResourcesPanel.tsx:22 |
bg-blue-100 text-blue-700 (rol "role") |
Migrar a neutral | Badge de tipo "role" no tiene razón de ser azul. Migrar a slate o usar color propio del sistema de recursos. Etapa 3. |
Hallazgos — PDF.blue en exportación
| Archivo:línea | Color actual | Categoría | Acción sugerida |
|---|---|---|---|
pdf-sections.ts:9 |
blue: [30, 64, 175] (#1E40AF) |
Migrar a InQ orange | Header de tabla PDF usa azul corporativo. Reemplazar por naranja InQ [245, 152, 69] (#F59845) en Etapa 4 (PDF: header y footer). |
pdf-sections.ts:112 |
PDF.blue en KPI card accent |
Migrar a InQ orange | El KPI "Costo total" usa azul como accent. Cambiar a naranja InQ en Etapa 6 (PDF: rediseño página 1). |
pdf-export.ts:120 |
fillColor: PDF.blue en autotable |
Migrar a InQ orange | Header de tabla de costos en azul. Migrar en Etapa 7 (PDF: páginas 3-4). |
pdf-sections-roi.ts:203 |
fillColor: PDF.blue en autotable |
Migrar a InQ orange | Header de tabla comparativa ROI. Migrar en Etapa 7. |
Hallazgos — Hex hardcodes en componentes React
| Archivo:línea | Hex | Descripción | Categoría | Acción sugerida |
|---|---|---|---|---|
BpmnCanvas.tsx:24 |
#f59e0b |
Stroke del ícono Bot en SVG inline | Migrar a InQ orange | En Etapa 9 el badge ⚡ cambia a fondo naranja sólido #F59845. El stroke del SVG se rediseña en esa etapa. |
BpmnCanvas.tsx:40 |
#fffbeb |
Fondo del badge Bot (amber-50) | Migrar a InQ orange | Reemplazar por var(--inq-orange-lighter) #FFF8ED en Etapa 9. |
BpmnCanvas.tsx:41 |
#e2e8f0 |
Borde del badge Bot | Mantener neutral | Borde sutil, está bien como slate-200. |
CumulativeSavingsChart.tsx:32,34 |
#10b981 |
Color del marker de payback | Migrar a token | Verde éxito = var(--color-success) #16A34A. Migrar en Etapa 3. |
CumulativeSavingsChart.tsx:55 |
#10b981, #ef4444 |
Colores del tooltip (positivo/negativo) | Migrar a token | Usar --color-success y --color-danger. Etapa 3. |
CumulativeSavingsChart.tsx:91,102 |
#3b82f6 |
Línea y punto del chart acumulado | Migrar a InQ orange | La línea del gráfico de trayectoria debería ser naranja InQ #F59845 para coherencia de marca. Etapa 3. |
HeatmapCanvas.tsx:118 |
#f8fafc |
Background del canvas | Mantener neutral | slate-50 es correcto para fondo del diagrama BPMN. |
TopSavingsChart.tsx:73,79 |
#10b981 |
Barras y labels del chart | Migrar a token | Verde éxito correcto. Usar --color-success vía style={{ color: 'var(--color-success)' }}. Etapa 3. |
HeatmapLegend.tsx:24 |
#10b981, #f59e0b, #ef4444 |
Gradiente de la leyenda del heatmap | Migrar a token | Usar constantes exportadas de colors.ts o tokens heatmap.*. Etapa 3. |
chart-options.ts:12 |
#3b82f6 (role) |
Color del tipo de recurso "role" | Migrar a neutral | El azul para "roles" no es marca InQ. Evaluar paleta diferenciadora de tipos en Sprint 2. |
chart-options.ts:12 |
#8b5cf6 (system) |
Color del tipo "system" | Mantener azul funcional | Violeta para sistemas es una convención razonable. Evaluar en Sprint 2. |
chart-options.ts:123 |
#3b82f6 |
Costo directo en donut chart | Migrar a InQ orange | El donut de composición directo/overhead debería usar naranja InQ. Etapa 3. |
chart-options.ts:57,69,211,224 |
#f1f5f9, #e2e8f0 |
Grid lines y ejes de charts | Mantener neutral | slate-100/200 son correctos para UI de soporte. |
chart-options.ts:63,107,209 |
#475569 |
Labels de ejes | Mantener neutral | slate-600, correcto. |
chart-options.ts:78,217,237 |
#64748b, #94a3b8 |
Labels secundarios | Mantener neutral | slate-500/400, correctos. |
chart-options.ts:136 |
#1e293b |
Fill del label de total en donut | Mantener neutral | slate-800, correcto para texto. |
Hallazgos — primary en JSX
| Archivo | Usos | Evaluación |
|---|---|---|
router.tsx, WorkspacePage.tsx |
text-primary spinner |
✅ Correcto — spinner naranja InQ ahora |
ResourcesPanel.tsx:101 |
border-primary/20 bg-primary/5 |
✅ Correcto — borde/fondo naranja sutil |
RoiKpiBar.tsx:88-89 |
text-primary, bg-primary/10 |
✅ Correcto — ícono Calendar naranja |
KpiBar.tsx:46-47 |
text-primary, bg-primary/10 |
✅ Correcto — ícono DollarSign naranja |
ActivitiesTable.tsx:22-23 |
text-primary arrows |
✅ Correcto — flechas de ordenamiento naranjas |
ActivitiesTable.tsx:96 |
bg-primary/5 ring-primary/20 |
✅ Correcto — highlight de fila naranja |
ImportPage.tsx:173,198-199,205,210-211,252,255-258 |
text-primary, bg-primary/*, border-primary |
✅ Correcto — AccentS de la landing page naranjas |
SampleProcessLoader.tsx:77,83-84,92 |
hover:border-primary/30, bg-primary/10, text-primary |
✅ Correcto |
WorkspacePage.tsx:178,243 |
text-primary border-primary/30, bg-primary |
✅ Correcto |
slider.tsx |
bg-primary/20, bg-primary, border-primary/50 |
✅ Correcto — slider naranja |
tooltip.tsx |
bg-primary text-primary-foreground |
✅ Correcto — tooltip naranja |
switch.tsx |
bg-primary when checked |
✅ Correcto — switch naranja |
button.tsx |
bg-primary text-primary-foreground default |
✅ Correcto — botón naranja |
badge.tsx |
bg-primary text-primary-foreground |
✅ Correcto — badge naranja |
Resumen de acciones pendientes
| Etapa | Archivos afectados | Acción |
|---|---|---|
| Etapa 3 (Web App) | CumulativeSavingsChart.tsx, TopSavingsChart.tsx, HeatmapLegend.tsx, chart-options.ts |
Migrar hex a tokens CSS/constantes |
| Etapa 4-8 (PDFs) | pdf-sections.ts, pdf-export.ts, pdf-sections-roi.ts |
Reemplazar PDF.blue por array naranja InQ |
| Etapa 9 (Badge ⚡) | BpmnCanvas.tsx |
Rediseño completo del badge a naranja sólido |
| Sprint 2 | ResourcesPanel.tsx, GatewayPanel.tsx, chart-options.ts |
Evaluar paleta de tipos de recurso y gateways |
No se toca nada de lo anterior en Etapa 1.