Bloque D.1 · Tokens y utility classes centralizadas (globals.css)

Bloque D.1 · Tokens y utility classes centralizadas

Primer bloque de la migración de design tokens ([runbook—workspace—design-tokens-migration]). Añade a src/styles/globals.css los tokens CSS y las utility classes que los bloques siguientes (D.3–D.9) consumirán para eliminar estilos inline y valores hardcodeados de los componentes.

Scope: solo añade CSS. No toca ningún componente. Sin riesgo de regresión visual.

Contexto

Antes de este bloque, los componentes React del workspace (TaskKanban, TaskModal, modales, badges de estado, etc.) usaban literales de espaciado, radii, pesos tipográficos y colores de scrim directamente en style={{ }} o en reglas CSS locales sin sistema. El resultado era inconsistencia visual y dificultad para cambiar valores globalmente.

El bloque D.1 es el cimiento: define los tokens y las clases reutilizables una sola vez para que todos los demás bloques puedan apuntar a ellos.

Tokens nuevos en :root

Spacing scale (base 4)

Alineados con Tailwind (p-1 = 0.25rem, etc.) para poder usarlos también en style={{ }} y CSS custom sin repetir literales.

Radii completados

Los tokens --radius-sm, --radius, --radius-lg, --radius-xl ya existían. D.1 cierra el hueco entre xs y sm.

Tipografía

--fw-regular:  400;
--fw-medium:   500;
--fw-semibold: 600;
--fw-bold:     700;

--leading-tight:   1.2;
--leading-normal:  1.5;
--leading-relaxed: 1.7;

Transiciones

--t-fast: .12s ease;
--t-base: .2s  ease;
--t-slow: .35s cubic-bezier(.2, .8, .2, 1);

Modal scrim

--scrim:       rgba(0, 0, 0, 0.6);
--scrim-heavy: rgba(0, 0, 0, 0.9);

Utility classes

.badge + modificadores

Badge semántico para status, tags y severidad. Reemplaza patrones padding: '1px 6px'; borderRadius: '4px' dispersos en componentes.

<span class="badge danger">CRITICAL</span>
<span class="badge warning">WARNING</span>
<span class="badge success">OK</span>
<span class="badge info">INFO</span>
<span class="badge pill">Etiqueta</span>

Usa color-mix(in srgb, <color> 18%, transparent) para el fondo semitransparente, lo que respeta automáticamente el tema activo.

.assignee-badge

Chip de persona con color dinámico inyectado por CSS custom property en runtime.

<span class="assignee-badge" style="--assignee-color: #3b82f6">Edu</span>

El componente solo necesita inyectar 1 variable, no 5 estilos sueltos.

.list-row

Fila de item dentro de una card. Con hover animado vía --t-fast.

<div class="list-row">...</div>

.empty-state

Placeholder genérico para listas vacías (“Sin tareas”, “No hay alertas”, etc.).

.section-eyebrow

Heading uppercase pequeño standalone. Variante de .card-title para uso fuera de .card-head.

.modal-overlay + .modal-dialog

Reemplaza patrones inline position:fixed; inset:0; background:rgba(0,0,0,X).

<div class="modal-overlay">
  <div class="modal-dialog">...</div>
</div>

<!-- Scrim más oscuro -->
<div class="modal-overlay heavy">...</div>

Convención data-* en <body>

Documentada como comentario canónico al inicio del bloque D.1. Los valores los aplica lib/prefs.ts:applyPrefsToBody vía PreferencesPanel.

Convención de excepciones

Cuando un valor no puede seguir el sistema de tokens (KPI hero, eyebrows microscópicos, logo brand), se documenta con comentario inline:

/* design-exception: KPI hero necesita tamaño específico no cubierto por escala */
font-size: 3.5rem;

Tamaño del cambio

• Archivo: src/styles/globals.css
• LOC añadidas: +193
• LOC eliminadas: 0
• Componentes tocados: ninguno

Bloques siguientes

Véase también

• [[runbook—workspace—design-tokens-migration]]
• [[workspace—que-es-workspace]]
• [[crearack—conceptos—interfaz-general]]
• [[crearack—conceptos—organizaciones-y-planes]]