Bloque D.1 · Design Tokens y Utility Classes centralizadas
Bloque D.1 · Design Tokens y Utility Classes centralizadas
Sprint: s56 · Fecha: 11-05-2026 · PR: #12 (
edu/design-tokens-D1)
Archivo maestro:src/styles/globals.css
Runbook de migración: [[runbook—workspace—design-tokens-migration]]
Qué es
El bloque D.1 es la primera fase de centralización del design system visual de CreaRack Pro workspace. Consolida en globals.css todos los valores de estilo que estaban hardcodeados (literales padding: '1px 6px', borderRadius: '4px', etc.) dentro de componentes React individuales.
El objetivo es que los componentes solo consuman variables CSS y utility classes, eliminando la deuda de estilos inline inconsistentes identificada en el REFACTORING_GUIDE.md (P2-5 «Estilos Inline»).
Tokens añadidos
Radius
| Variable | Valor | Uso canónico |
|---|---|---|
--radius-xs | 4px | Badges, kbd, chips microscópicos |
--radius-md | 8px | Inputs, botones pequeños |
Los tokens
--radius-sm(6px),--radius(12px),--radius-lg(16px) y--radius-xl(20px) ya existían.
Spacing scale (base 4)
| Variable | Valor rem | px equiv. |
|---|---|---|
--space-0 | 0 | 0 |
--space-1 | 0.25rem | 4 |
--space-2 | 0.5rem | 8 |
--space-3 | 0.75rem | 12 |
--space-4 | 1rem | 16 |
--space-5 | 1.25rem | 20 |
--space-6 | 1.5rem | 24 |
--space-8 | 2rem | 32 |
--space-10 | 2.5rem | 40 |
Equivalen a las clases Tailwind
p-1..p-10. Los tokens permiten usarlos también enstyle={{ }}y en CSS custom sin repetir literales.
Tipografía
| Variable | Valor |
|---|---|
--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
| Variable | Valor |
|---|---|
--t-fast | .12s ease |
--t-base | .2s ease |
--t-slow | .35s cubic-bezier(.2, .8, .2, 1) |
Scrim (overlay de modal)
| Variable | Valor |
|---|---|
--scrim | rgba(0,0,0,0.6) |
--scrim-heavy | rgba(0,0,0,0.9) |
Utility classes añadidas
.badge — estado semántico
Reemplaza el patrón padding: '1px 6px'; borderRadius: '4px'; textTransform: 'uppercase' disperso en componentes.
<span class="badge danger">critical</span>
<span class="badge warning">degraded</span>
<span class="badge success">online</span>
<span class="badge info">info</span>
<span class="badge pill">Etiqueta</span>Variantes: .danger, .warning, .success, .info, .pill
.assignee-badge — chip de persona
Acepta una única CSS var personalizada en lugar de 5 estilos sueltos:
<span class="assignee-badge" style="--assignee-color: #3b82f6">Edu</span>.list-row — fila de lista dentro de card
<div class="list-row">...</div>Incluye hover state (background: var(--overlay-2)) y transición var(--t-fast).
.empty-state — vacío semántico
<div class="empty-state">Sin tareas pendientes</div>.section-eyebrow — heading eyebrow
Standalone. Equivale a .card-title fuera de .card-head.
.modal-overlay / .modal-dialog
Reemplazan el patrón inline position:fixed; inset:0; background:rgba(0,0,0,X).
<div class="modal-overlay">
<div class="modal-dialog">...</div>
</div>
<!-- Variante oscura: -->
<div class="modal-overlay heavy">...</div>Convención data-* en <body>
El bloque D.1 documenta la tabla canónica de atributos que gestiona lib/prefs.ts:applyPrefsToBody:
| Atributo | Valores válidos | Default |
|---|---|---|
data-theme | dark | light | auto | dark |
data-accent | blue | violet | green | amber | cyan | blue |
data-density | compact | comfy | spacious | comfy |
data-font-size | sm | md | lg | xl | md |
data-font | jakarta | inter | mono | jakarta |
data-width | normal | wide | normal |
data-sidebar | default | collapsed | wide | default |
data-sidebar-side | left | right | left |
data-header | default | slim | tall | default |
data-anim | on | off | on |
data-shine | low | default | high | default |
data-detail | default | minimal | default |
data-radius | default | sharp | soft | default |
data-variant | a | b | c | a |
Convención de excepciones
Cuando un componente no puede usar una variable (KPI hero, eyebrows microscópicos, logo brand), debe incluir comentario inline:
/* design-exception: KPI hero — tamaño de fuente exclusivo de landing */
font-size: 4.5rem;Bloques posteriores planificados
| Bloque | Descripción |
|---|---|
| D.2 | Migración de componentes de tabla/grid |
| D.3 | Migración de componentes de formulario |
| D.4 | Migración de navigation / sidebar |
Ver [[runbook—workspace—design-tokens-migration]] para la hoja de ruta completa.
Véase también
- [[runbook—workspace—design-tokens-migration]]
- [[crearack—conceptos—interfaz-general]]