ADR-21 Reset del sistema visual y Theme Engine

ADR-21 — Reset del sistema visual y Theme Engine

Estado

ACEPTADA — 2026-09-17. Especializa ADR-15 (skins de aplicación) y ADR-17 (marca por tenant). No cambia el stack (ADR-06) ni la tesis de producto (VISION-00/01). No implementa: la ejecución vive en FE-16 y ARCH-07.

Contexto

FE-15 ancló la plantilla visual (tokens, chrome, placeholders) sobre ARCH-03 y ADR-15. El resultado no cumple el estándar de producto: identidad visual, feel de componentes y layout se perciben genéricos. La causa es de diseño, no de framework: Angular v22 zoneless + Tailwind v4 + Spartan ya es un stack moderno y se mantiene.

Se decide rehacer la capa visual desde cero, no parchearla. Para que el reset no engendre otra piel hardcodeada, se hace sobre un Theme Engine de tokens por datos (ADR-17) y anticipa los presets y bloques de fases posteriores.

Decisión

1. Stack intacto. Angular v22 standalone zoneless, Tailwind v4 CSS-first y Spartan Helm como primitivas. Sin Next.js ni kits de UI (ADR-06, ADR-15).
2. Reset, no restyle incremental. FE-16 rehace tokens, fuentes, chrome, home, detalle, carrito, auth y admin. La lógica de FE-01..05 (rutas, servicios, signals, carrito) se reutiliza; no se reescribe.
3. Temas como datos. Los tokens de marca son configuración por tienda (ADR-17), no ramas de código. Tres presets semilla: modern (electrónica, TechStore), market (retail masivo) y fashion (Moda Lima). data-surface (storefront/admin) gobierna la superficie; data-store tiñe el tenant.
4. ThemeProvider como puerto (ADR-19). La resolución de tokens y presets entra por un puerto hexagonal; el adaptador se elige por configuración. Prohibido if (storeId == …).
5. Bloques declarativos. La home se compone de bloques (hero, categorías, top ventas, banner, testimonios, FAQ, newsletter) descritos como datos; el render es Angular. El constructor visual drag&drop es MVP_3, no MVP_0 (ROADMAP-01).
6. CMS diferido. Propio vs. headless sigue siendo decisión de MVP_2 (ROADMAP-01).

flowchart TB
  stack["Angular + Tailwind + Spartan (ADR-06)"]
  tokens["Tokens y presets por datos"]
  surface["data-surface storefront / admin"]
  store["data-store tinte del tenant"]
  blocks["Bloques declarativos MVP_0, builder MVP_3"]
  stack --> tokens
  tokens --> surface
  tokens --> store
  tokens --> blocks

Alternativas descartadas

• Migrar a Next.js/React. Reescribiría FE-01..15 y ADR-06/15 sin atacar la causa (diseño); contradice VISION-00.
• Parche de tokens sobre ARCH-03. No resuelve identidad, componentes ni layout; dejaría dos specs visuales coexistiendo.
• Constructor de bloques ahora. Es MVP_3; el foso es localidad (VISION-01), no el builder.
• Fork visual por cliente. Contradice ADR-11 y ADR-17.

Consecuencias

• ARCH-03 queda SUPERSEDED; ARCH-07 es la única spec visual vigente.
• FE-06 (checkout) y FE-08 (admin shell) dependen de FE-16 para no construirse sobre la piel vieja.
• Fotos y variantes siguen en MVP_1 con su ADR+DS; el reset usa placeholders.
• Los presets y el ThemeProvider habilitan el theming por tenant sin forks.