Workspace · Migración a estilos centralizados (s56)

Propósito

Este runbook registra el proceso iterativo de eliminación de estilos inline en los componentes React del Workspace (Astro + React + Tailwind v4 sobre Cloudflare Pages) para reemplazarlos por las utility classes globales definidas en globals.css (bloque D.1 del design system).

El objetivo es un código más mantenible, coherencia visual garantizada por tokens CSS y facilidad para cambios de tema global.

Utility classes de referencia (D.1)

Las clases centralizadas en globals.css que sirven de destino de la migración:

Nota: Los patrones que requieren valores CSS dinámicos (color por variable de JavaScript) o layout único no replicado se excluyen conscientemente de la migración — se mantienen como style={} inline explícito con override mínimo sobre la utility class base.

Estado de bloques

Nota: el bloque D.2 no existe — la numeración salta de D.1 a D.3 intencionadamente (D.2 quedó como prefijo histórico no usado). Relación con el sistema kb (s211): los valores semánticos de public/_kb/kb.css son los mismos que los tokens de globals.css y se mantienen en sync a mano (kb.css es autocontenido — lo cargan informes estáticos). Detalle del sistema: [[ia-tech—metodo—antesala-y-voz]] §4.

Detalle D.4 — Bloque migrado en PR#14 (2026-05-11)

Archivos modificados

Tamaño: 4 archivos · +26 / −14 LOC (refactor neto +12 por overrides explícitos necesarios)

Excluido conscientemente (decisión D.4)

Tests del runbook

Detalle D.10 — Corrección del toggle (PR#21, 2026-05-11)

Diagnóstico

Tras los rounds 1-4 anteriores el toggle de tamaño de texto en Preferencias solo afectaba ~50% del workspace. Los conteos previos:

La raíz: los rounds previos solo convirtieron literales numéricos (fontSize: 13) a las variables. Los rem-strings quedaron olvidados (fontSize: '0.8125rem', fontSize: '0.875rem'…).

Mapping aplicado

100 reemplazos en 21 archivos (99 vía script + 1 huérfano '0.825rem' en TaskKanban.tsx:277).

Excluidos intencionalmente (decorativos micro)

Los 10 rem hardcoded restantes están por debajo del rango calibrado del toggle:

• 8× 0.625rem (10px) — micro-chips y labels secundarios
• 1× 0.5rem (8px) — separadores decorativos
• 1× 0.5625rem (9px) — texto auxiliar muy pequeño

Estos NO escalan con el toggle por diseño: forman parte del set tipográfico secundario.

Detalle D.11 + D.12 — Unificación CI con CreaRack-Pro (PR#22 + PR#23, 2026-05-11)

Contexto

Tras D.10 detectamos que el repo CreaRackSL-workspace no tenía CI pre-merge (todos los workflows estaban configurados con on: push: branches: [main] o on: pull_request: types: [closed]). Las PRs nunca tenían “verde” que esperar — incidente en PR#21 D.10 donde esperamos ~25 min un CI inexistente.

Edu pidió unificar el patrón con CreaRack-Pro (que sí tiene Backend pytest+ruff, Frontend biome+vite, Docker Build pre-merge).

Análisis de estado inicial

D.11 — PR#22: formato masivo

Cambios:

• .prettierrc.json nuevo: plugins: [prettier-plugin-astro, prettier-plugin-tailwindcss], printWidth: 100, singleQuote: true, semi: true, trailingComma: 'all', arrowParens: 'always', endOfLine: 'auto' (necesario en Windows con core.autocrlf=true)
• .prettierignore nuevo: excluye node_modules, dist, .astro, .wrangler, public, pagefind, src/content/{wiki,help,news,changelog}/ (MD auto-sincronizado intacto)
• 74 archivos TS/TSX reformateados vía pnpm exec prettier --write src/**/*.{ts,tsx}. +5699 / −1994 LOC, solo whitespace y comillas

Verificación: tsc --noEmit sigue reportando los mismos 361 errores → reformat no toca lógica.

D.12 — PR#23: workflow CI

.github/workflows/ci.yml:

name: CI
on:
  pull_request:
    branches: [main]
  workflow_dispatch:
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
jobs:
  format:
    name: Prettier check
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm exec prettier --check "src/**/*.{ts,tsx}"

Footgun durante D.12: primer commit usó npm ci y cache: 'npm'. Falla inmediato en CI por “Dependencies lock file is not found” — el repo usa pnpm. Fix: pnpm/action-setup@v4 + pnpm install --frozen-lockfile + cache: 'pnpm'.

Estado tras D.12

Workspace tiene CI mínimo pero unificado conceptualmente: ningún PR puede romper formato. Asimetría restante (typecheck, tests) requiere plan de saneamiento de los 361 errores TS preexistentes.

Lockfile policy workspace

• Workspace usa pnpm (pnpm-lock.yaml), no npm.
• Cualquier workflow nuevo o script CI debe usar pnpm/action-setup@v4 + pnpm install --frozen-lockfile.
• Cualquier devDependency nueva: pnpm add -D <pkg> (no npm install).

Patrón de override aprobado

Cuando un elemento necesita un valor CSS dinámico (calculado en JS) sobre una utility class, el patrón aprobado es:

// ✅ Correcto: utility class base + override mínimo en style={}
<span
  className="badge"
  style={{
    backgroundColor: `color-mix(in srgb, ${typeColors[alert.type]} 20%, transparent)`,
    color: typeColors[alert.type],
  }}
>
  {typeLabels[alert.type]}
</span>

// ❌ Incorrecto: todos los props inline, sin reutilizar utility class
<span style={{ fontSize: '0.6875rem', padding: '1px 6px', borderRadius: '4px', fontWeight: 600, backgroundColor: '...', color: '...' }}>
  {typeLabels[alert.type]}
</span>

El style={} residual solo debe contener los valores que no puede proveer la utility class (valores dinámicos de JS o variantes únicas no contempladas en D.1).

Véase también

• [[feature—workspace—refresh-ui-2026]]
• [[feature—workspace—tasks-s56-improvements]]
• [[feature—styles—design-tokens-d1]]