117 lines
9.0 KiB
Markdown
117 lines
9.0 KiB
Markdown
# Auditoría de colores — Etapa 1 Sprint 1.5
|
|
|
|
> Hallazgos del audit de azules, hardcodes y `primary` en 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` | **Decisión arquitectónica: NO migrar** | Decisión arquitectónica: mantener azul informativo. No es color de marca, es semántica funcional (info banner, valor inmutable, patrón Bootstrap/Tailwind estándar). NO migrar. |
|
|
| `GatewayPanel.tsx:124` | `text-blue-500` | **Decisión arquitectónica: NO migrar** | Decisión arquitectónica: mantener azul informativo. No es color de marca, es semántica funcional (info banner, valor inmutable, patrón Bootstrap/Tailwind estándar). NO migrar. |
|
|
| `GatewayPanel.tsx:126-127` | `text-blue-800`, `text-blue-700` | **Decisión arquitectónica: NO migrar** | Decisión arquitectónica: mantener azul informativo. No es color de marca, es semántica funcional (info banner, valor inmutable, patrón Bootstrap/Tailwind estándar). NO migrar. |
|
|
| `GatewayPanel.tsx:144` | `text-blue-600` | **Decisión arquitectónica: NO migrar** | Decisión arquitectónica: mantener azul informativo. No es color de marca, es semántica funcional (info banner, valor inmutable, patrón Bootstrap/Tailwind estándar). NO migrar. |
|
|
| `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** | Composición directo/overhead en donut. Decisión visual: el sector "directo" va en naranja InQ `#F59845`. El sector "overhead" NO debe ser otro naranja (pierde contraste) — usar slate-400 (`#94A3B8`) o naranja muy claro (`#FED7AA`). Decisión final en Etapa 3 mirando el render. |
|
|
| `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`, `chart-options.ts` | Evaluar paleta de tipos de recurso |
|
|
|
|
**No se toca nada de lo anterior en Etapa 1.**
|
|
|
|
---
|
|
|
|
## Accesibilidad — Contraste de marca
|
|
|
|
**Color auditado**: `#F59845` (InQ orange) sobre fondo blanco `#FFFFFF`
|
|
**Resultado (calculado 2026-05-16)**:
|
|
|
|
```
|
|
Contrast ratio: 2.22 :1
|
|
AA normal text (4.5): FAIL
|
|
AA large text (3.0): FAIL
|
|
```
|
|
|
|
**Veredicto**: el naranja InQ no alcanza el mínimo WCAG AA en ninguna categoría de texto.
|
|
|
|
**Opciones de remediación**:
|
|
|
|
| Opción | Descripción | Trade-off |
|
|
|---|---|---|
|
|
| A | Aceptar contraste sub-WCAG en CTAs | Riesgo accesibilidad — usuarios con baja visión |
|
|
| B | Oscurecer naranja a `#D97706` en CTAs | Rompe marca parcialmente — perceptible en UI |
|
|
| C | Usar texto oscuro `#451A03` en CTAs sobre naranja | Cambia el look del botón visiblemente |
|
|
| **D** | **Forzar `font-weight: 700` en CTAs primarios** | **Cumple AA large text con texto grande/bold** |
|
|
|
|
**Propuesta para Etapa 3**: implementar opción D — `font-weight: 700` en todos los CTAs primarios y KPI cards. NO modificar componentes en esta etapa.
|