From 474b501fffcc6760a7b3ecf86464bd32c3928266 Mon Sep 17 00:00:00 2001 From: markosbenitez Date: Fri, 26 Jun 2026 18:44:31 -0300 Subject: [PATCH] tema claro v1 --- sprints/sprint-4/ETAPA_DASHBOARD_CLARO.md | 62 +++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 sprints/sprint-4/ETAPA_DASHBOARD_CLARO.md diff --git a/sprints/sprint-4/ETAPA_DASHBOARD_CLARO.md b/sprints/sprint-4/ETAPA_DASHBOARD_CLARO.md new file mode 100644 index 0000000..8f9ab7d --- /dev/null +++ b/sprints/sprint-4/ETAPA_DASHBOARD_CLARO.md @@ -0,0 +1,62 @@ +# ETAPA — Dashboard tema claro (marca Re) + +## 1. Objetivo +Convertir el dashboard de tema oscuro a tema claro usando la paleta oficial de marca Re. +Un solo archivo modificado: `app/globals.css`. + +## 2. Decisiones ya tomadas — no consultar +- Fondo página: #E7E6E5 (gris claro Re) +- Cards/widgets: #FFFFFF +- Texto principal: #494F4F (carbón Re) +- Acento teal, colores de alerta inline y barras de pct: SIN CAMBIO +- Texto de tabs activos sobre teal (.db-survey-link-active): #FFFFFF + +## 3. Tarea +En `app/globals.css`, sección DASHBOARD (línea 710 en adelante), +aplicar los siguientes reemplazos SOLO en esa sección: + +FONDOS: +- background: #0F1923 → background: #E7E6E5 (.db-page, línea 716) +- background: #1A2535 → background: #FFFFFF (.db-widget, línea 741) +- background: #14202e → background: #F0EFEE (.db-sidebar, línea 887) +- background: #101a30 → background: #F0EFEE (.db-lens-intro, .db-placeholder) +- background: #2a3547 → background: rgba(73,79,79,0.10) (.db-bar-track) +- background: #1e2d42 → background: #FFFFFF (.db-filter-select) +- background: #1e2d42 → background: rgba(73,79,79,0.08) (.db-skeleton-block) + +TEXTO: +- color: #E7E6E5 → color: #494F4F (en TODAS las clases .db-* de esa sección) +- color: #9ca3af → color: #6B7878 +- color: #7A8FA0 → color: #8A9A9A +- color: #7d8da5 → color: #8A9A9A +- color: #9fb0cc → color: #8A9A9A +- color: #6b7280 → color: #9CA8A8 +- color: #0F1923 → color: #FFFFFF (solo .db-survey-link-active) +- color: #fff → color: #494F4F (solo .db-page-title, línea 721) + +NO TOCAR: +- color: var(--color-re-teal) — sin cambio en ninguna clase +- color: #ef4444, #f0b429, #f06b6b, #f06b6b — sin cambio +- Todo lo que esté fuera de la sección DASHBOARD (línea 710 en adelante) +- Cualquier archivo .tsx + +## 4. DoD (checklist antes de reportar) +- [ ] Solo `app/globals.css` modificado +- [ ] `git diff --name-only HEAD` lista únicamente `app/globals.css` +- [ ] Ningún valor de acento (teal, rojos, ámbar) fue tocado +- [ ] Ninguna clase fuera de la sección DASHBOARD fue modificada +- [ ] Build sin errores: `npm run build` + +## 5. Qué reportar +- Cantidad de líneas modificadas +- Lista de clases tocadas con valor anterior → valor nuevo +- Output de `git diff --name-only HEAD` +- Output de `npm run build` (últimas 5 líneas) +- Hallazgo visual: ¿`.db-gap-brecha` (#f0b429 ámbar) tiene contraste visible + sobre el nuevo fondo #F0EFEE? Verificar si el valor en pantalla sería legible. + +## 6. Qué NO hacer +- No tocar variables :root +- No tocar archivos .tsx +- No modificar colores de acento ni alertas +- No hacer deploy — solo commit y push a Gitea \ No newline at end of file