Shine por tokens del tema (v1.66.3) — reoptimización de rendimiento
Resumen
La característica Shine (brillo/aclarado de la UI) ha sido reimplementada en v1.66.3 eliminando el uso de filter y backdrop-filter CSS. Estos provocaban re-renderizados continuos del fondo animado de Asteroids en cada frame, hundiendo el rendimiento. Nueva estrategia: tokens de color CSS dinámicos — coste cero, animación fluida.
Cambio de arquitectura
| Aspecto | v1.66.2 (anterior) | v1.66.3 (nuevo) |
|---|---|---|
| Mecanismo | overlay div con backdrop-filter: brightness(…) | Atributo data-shine en <html>, variantes de tokens en CSS |
| Coste de rendimiento | ❌ Alto (re-filtra fondo cada frame) | ✅ Cero (solo CSS vars) |
Impacto en position:fixed | ❌ Rompía anclaje (bug Asteroids) | ✅ Sin efecto |
| Funcionalidad | ✅ Brillo completo | ⚠️ Parcial (crece con #211) |
Cómo funciona
Lado JavaScript (static/js/base.js)
La función applyShine(level, idx) ahora:
- Lee el índice Shine del nivel seleccionado
- Establece
document.documentElement.dataset.shine = String(i)(1 o 2, o lo borra si 0) - Ya no crea overlay ni manipula
backdropFilter
function applyShine(level, idx) {
const i = idx !== undefined ? idx : Math.max(0, SHINE_LEVELS.indexOf(level));
if (i > 0) {
document.documentElement.dataset.shine = String(i);
} else {
delete document.documentElement.dataset.shine;
}
// ... actualizar botón ...
}Lado CSS (static/css/variables.css)
Dos selectores [data-shine] definen variantes de ~9 tokens de superficie y texto:
Shine Nivel 1 (data-shine="1"):
- Fondos más claros:
#131313→--bg-color-solid - Bordes más legibles:
#555555 - Texto secundario desaturado:
#c2c2c2
Shine Nivel 2 (data-shine="2"):
- Fondos aún más claros:
#202020 - Bordes más brillantes:
#666666 - Texto secundario más claro:
#d4d4d4
La cobertura inicial es ~70-80% de las superficies actuales. Crece sola conforme la Iniciativa UI (#211) migre los ~128 hex-codes sueltos aún presentes en *.css a tokens reales.
Limitaciones conocidas
Cobertura parcial: Los estilos inline, @layer antiguos y algunos componentes heredados aún con valores hex directos no responden al Shine. Esto no es un bug, es un estado temporal aceptado:
- La migración completa ocurre en Fase 2 de #211
- El token-based Shine es “progresivo” — cada hex migrado → Shine ahora alcanza esa zona
- Prioridad: paneles principales, fondos de cards, bordes visibles. Elementos secundarios heredarán más adelante.
Por qué no filter/backdrop-filter
Problema 1: Rendimiento
El backdrop-filter: brightness(…) recalcula el área de fondo en cada frame si hay animaciones dentro (el fondo Asteroids es canvas SVG animado). Con 120 FPS, esto es un coste prohibitivo.
Problema 2: Anclaje de position:fixed
Por la spec CSS Filter Effects, un filter en un elemento lo convierte en containing block de todos sus descendientes position:fixed. El overlay estaba en <body>, por lo que cada elemento fijo (menú, tooltips, modales) pasaba a medirse contra el documento entero en lugar del viewport.
- Síntoma observado: El fondo Asteroids se deformaba y se reescalaba
- Solución: Eliminar el overlay y usar únicamente CSS variable overrides
Testing y validación
Validación de Edu post-deploy:
- ✅ Click-test manual en la UI (JS/CSS sin CI)
- ✅ Brillo fluido incluso con animación activa
- ✅
position:fixedanchored correctamente - ❌ Algunas zonas legacy aún sin Shine (esperado)
No hay tests unitarios nuevos — el cambio es puramente declarativo (CSS vars + DOM attribute).
Véase también
- [[concept—crearack-tech—design-system]]
- [[concept—crearack-tech—performance]]
- [[decision—20260806—shine-architecture]]
- [[entity—static—css—shine-tokens]]
- [[feature—ui—iniciativa-ui-fase-2]]