Files
apps-registry/workloads/ecommerce
devops 45d8152317 feat(ecommerce): ADR 0007 Sub-fase 1 - tokens base + smoke test
Identidad visual propia (ver docs-portal/docs/decisiones/0007-identidad-visual-propia.md):
paleta terracota/espresso/pino/crema/carbon reemplaza los tokens
--color-ari-cyan/magenta/yellow/blue (confirmado sin uso en ningun
componente antes de tocarlos). Fraunces + Inter cargadas via
next/font/google (antes "Inter" era solo un fallback de CSS sin
garantia real de carga).

Cambio minimo a proposito: nueva variant "primary" en button.tsx sin
tocar la clase base compartida (radio, ring de foco quedan igual para
el resto del sitio), aplicada como smoke test unico en el CTA y el
precio de ProductCard. El resto de la propagacion (header, footer,
badges, home, product detail) queda para las Sub-fases 2-5, cada una
con su propio gate.

Validado con `docker build --target builder` (npm ci + next build con
typecheck completo) -- compila limpio.
2026-08-27 00:27:54 -05:00
..
2026-07-24 06:40:21 +00:00
2026-07-31 23:27:01 -05:00
2026-07-31 23:27:01 -05:00

ARI Shopping Headless Storefront v4.1

Actualización enfocada en UX, interactividad y rendimiento sobre Next.js 15.5.10.

Correcciones principales

  • Encabezado blanco premium con acentos cyan, violeta, fucsia y navegación negra.
  • Imágenes promocionales sin opacity, mix-blend ni filtros de color.
  • Menú principal funcional mediante Drawer accesible de Radix UI.
  • Cuenta y favoritos funcionales.
  • Carrusel con flechas, teclado, scroll suave y scroll-snap.
  • Zoom real de producto entre 100% y 300%, rueda, botones, doble clic y arrastre.
  • Thumbnails WebP dedicados para tarjetas, búsqueda, carrito y favoritos.
  • Recursos originales recomprimidos y caché HTTP para /images.
  • next/image en modo unoptimized porque los recursos ya vienen procesados; evita latencia del optimizador durante la primera visita.
  • Menos componentes animados con JavaScript; las tarjetas usan transiciones CSS.
  • content-visibility para contenido fuera de pantalla.
  • Pantalla loading.tsx para transiciones de ruta.

Validación

npm ci
npm run typecheck
npm run build

Flujo

Gitea → Gitea Actions → Registry → actualización de frontend.yaml → Argo CD → Kubernetes.