devops/apps-registry
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ecommerce): ADR 0008 - iteracion de paleta a Azul & Amarillo

Browse Source 
Reemplaza los valores de marino/coral/coral-claro de "Navy & Coral"
por una paleta azul solido (#0055B8, ancla + accion unica) + amarillo
(#FFC220, acento en badges/detalles, nunca en botones). Los nombres de
token (--color-ari-marino/coral/coral-claro) no cambian, solo sus
valores, por lo que el resto de componentes que ya migraron en las
sub-fases 1-3 heredan la paleta nueva automaticamente via CSS vars.

Ajustes puntuales de contraste: badges de descuento/destacado en
product-card.tsx pasan de texto blanco a texto marino sobre fondo
amarillo; linea decorativa del navbar pasa de coral (ahora identico al
marino) a coral-claro para seguir siendo visible contra el header.
This commit is contained in:
devops committed 2026-08-27 18:36:55 -05:00
1 parent 2b3768bfb4
commit 53b65965f3
6 files changed
+33 -30
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

workloads/ecommerce/app/globals.css
+8 -7
View File
@@ -1,11 +1,12 @@
@import "tailwindcss"; @import "tailwindcss";
@theme { @theme {
/* ADR 0008 ("Navy & Coral") -- reemplaza ADR 0007 (Opcion 2, "Atelier /* ADR 0008 -- paleta final "Azul & Amarillo" (inspirada en Walmart),
calido"). Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md */ iteracion sobre "Navy & Coral". Ver
--color-ari-marino: #122844; /* ancla: header, footer, badge "Nuevo", fondo de hero */ docs-portal/docs/decisiones/0008-identidad-navy-coral.md */
--color-ari-coral: #D85A30; /* acento unico de accion: CTA, precio destacado */ --color-ari-marino: #0055B8; /* ancla: header, footer, badge "Nuevo", fondo de hero */
--color-ari-coral-claro: #F0997B; /* acento secundario: subtitulos sobre marino, ala inferior del isotipo */ --color-ari-coral: #0055B8; /* boton de accion (CTA): azul solido, nunca amarillo */
--color-ari-coral-claro: #FFC220; /* acento: badges de oferta/descuento/urgencia, detalles del isotipo -- nunca en botones */
/* Alias de compatibilidad -- ADR 0007 definio estos nombres y hoy los /* Alias de compatibilidad -- ADR 0007 definio estos nombres y hoy los
siguen consumiendo catalog-client.tsx, product-card.tsx y button.tsx siguen consumiendo catalog-client.tsx, product-card.tsx y button.tsx
@@ -33,8 +34,8 @@
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: var(--color-slate-900); font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; } body { margin: 0; background: #FFFFFF; color: var(--color-slate-900); font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
button, a { -webkit-tap-highlight-color: transparent; } button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(216 90 48 / .5); outline-offset: 3px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(0 85 184 / .5); outline-offset: 3px; }
::selection { background: rgb(216 90 48 / .15); color: var(--color-slate-900); } ::selection { background: rgb(0 85 184 / .15); color: var(--color-slate-900); }
.content-auto { .content-auto {
content-visibility: auto; content-visibility: auto;
workloads/ecommerce/app/icon.svg
+11 -10
View File
@@ -1,14 +1,15 @@
<!-- ADR 0008 ("Navy & Coral"). Version reducida del isotipo para favicon/ <!-- ADR 0008, paleta final "Azul & Amarillo" (Walmart-inspirada). Version
app icon: solo circulo marino + mariposa, sin wordmark (no cabe reducida del isotipo para favicon/app icon: solo circulo azul +
legible a este tamano). Convencion de Next.js App Router: este mariposa, sin wordmark (no cabe legible a este tamano). Convencion de
archivo se sirve automaticamente como favicon/app icon. --> Next.js App Router: este archivo se sirve automaticamente como
favicon/app icon. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34" role="img" aria-label="ARI shopping"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34" role="img" aria-label="ARI shopping">
<circle cx="17" cy="17" r="17" fill="#122844"/> <circle cx="17" cy="17" r="17" fill="#0055B8"/>
<g transform="translate(0 5)"> <g transform="translate(0 5)">
<ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#D85A30"/> <ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#FFC220"/>
<ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#D85A30"/> <ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#FFC220"/>
<ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#F0997B"/> <ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#FFDD73"/>
<ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#F0997B"/> <ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#FFDD73"/>
<rect x="16" y="3" width="2" height="18" rx="1" fill="#122844"/> <rect x="16" y="3" width="2" height="18" rx="1" fill="#0055B8"/>
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 895 B

After

Width:  |  Height:  |  Size: 932 B

workloads/ecommerce/app/layout.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const metadata: Metadata = {
openGraph: { title: "ARI Shopping", description: "Tesoros para cada aventura.", type: "website", locale: "es_CO" }, openGraph: { title: "ARI Shopping", description: "Tesoros para cada aventura.", type: "website", locale: "es_CO" },
}; };
export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#122844" }; export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#0055B8" };
// ADR 0008 ("Navy & Coral"): Poppins peso 700 para los "momentos de marca" // ADR 0008 ("Navy & Coral"): Poppins peso 700 para los "momentos de marca"
// (wordmark, h1/h2, precio, CTA) + Inter para body/UI -- solo se carga el // (wordmark, h1/h2, precio, CTA) + Inter para body/UI -- solo se carga el
workloads/ecommerce/components/layout/navbar.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ export function Navbar({ products, categories }: { products: Product[]; categori
</div> </div>
<div className="relative overflow-visible bg-white"> <div className="relative overflow-visible bg-white">
<div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-ari-coral" /> <div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-ari-coral-claro" />
<div className="mx-auto grid max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-4 px-4 py-4 lg:gap-8"> <div className="mx-auto grid max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-4 px-4 py-4 lg:gap-8">
<Link href="/" aria-label="ARI shopping" className="shrink-0"> <Link href="/" aria-label="ARI shopping" className="shrink-0">
{/* eslint-disable-next-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */} {/* eslint-disable-next-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}
workloads/ecommerce/components/product/product-card.tsx
+2 -2
View File
@@ -36,11 +36,11 @@ export function ProductCard({ product, priority = false }: { product: Product; p
<article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-marino/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-coral/10"> <article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-marino/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-coral/10">
<div className="relative aspect-square overflow-hidden bg-white"> <div className="relative aspect-square overflow-hidden bg-white">
<Link href={`/product/${product.slug}`} prefetch={false}><Image src={product.thumbnail} alt={product.name} fill priority={priority} sizes="(max-width: 640px) 82vw, (max-width: 1024px) 44vw, 280px" className="object-cover transition duration-500 group-hover:scale-[1.035]" /></Link> <Link href={`/product/${product.slug}`} prefetch={false}><Image src={product.thumbnail} alt={product.name} fill priority={priority} sizes="(max-width: 640px) 82vw, (max-width: 1024px) 44vw, 280px" className="object-cover transition duration-500 group-hover:scale-[1.035]" /></Link>
<div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-ari-coral text-white">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-marino text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-coral-claro text-white"><Sparkles className="mr-1 size-3" />Top</Badge>}</div> <div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-ari-coral-claro text-ari-marino">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-marino text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-coral-claro text-ari-marino"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
<button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-ari-coral text-white" : "bg-white/95 text-slate-900 hover:text-ari-coral"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button> <button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-ari-coral text-white" : "bg-white/95 text-slate-900 hover:text-ari-coral"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
</div> </div>
<div className="flex flex-1 flex-col space-y-3 p-5"> <div className="flex flex-1 flex-col space-y-3 p-5">
<div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-md bg-ari-coral-claro/10 px-2 py-1 text-ari-coral-claro">{product.collection}</span></div> <div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-md bg-ari-coral-claro/10 px-2 py-1 text-ari-marino">{product.collection}</span></div>
<Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-ari-marino group-hover:text-ari-coral">{product.name}</h3></Link> <Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-ari-marino group-hover:text-ari-coral">{product.name}</h3></Link>
<p className="line-clamp-2 min-h-10 text-sm leading-5 text-slate-500">{product.shortDescription}</p> <p className="line-clamp-2 min-h-10 text-sm leading-5 text-slate-500">{product.shortDescription}</p>
{product.variants.length > 1 && ( {product.variants.length > 1 && (
workloads/ecommerce/public/images/brand/logo-ari.svg
+10 -9
View File
@@ -1,15 +1,16 @@
<!-- ADR 0008 ("Navy & Coral"). Isotipo: mariposa geometrica de 4 elipses <!-- ADR 0008, paleta final "Azul & Amarillo" (Walmart-inspirada). Isotipo:
sobre circulo/campo marino + wordmark "ARI shopping". mariposa geometrica de 4 elipses sobre circulo/campo azul + wordmark
"ARI shopping".
Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md --> Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" role="img" aria-label="ARI shopping"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" role="img" aria-label="ARI shopping">
<rect width="200" height="64" rx="12" fill="#122844"/> <rect width="200" height="64" rx="12" fill="#0055B8"/>
<g transform="translate(14 20)"> <g transform="translate(14 20)">
<ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#D85A30"/> <ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#FFC220"/>
<ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#D85A30"/> <ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#FFC220"/>
<ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#F0997B"/> <ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#FFDD73"/>
<ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#F0997B"/> <ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#FFDD73"/>
<rect x="16" y="3" width="2" height="18" rx="1" fill="#122844"/> <rect x="16" y="3" width="2" height="18" rx="1" fill="#0055B8"/>
</g> </g>
<text x="64" y="38" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="26" fill="#FFFFFF">ARI</text> <text x="64" y="38" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="26" fill="#FFFFFF">ARI</text>
<text x="64" y="53" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="11" letter-spacing="2.5" fill="#F0997B">shopping</text> <text x="64" y="53" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="11" letter-spacing="2.5" fill="#FFC220">shopping</text>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB