@arroyavecommerce/theme-kinetic 0.2.0

package/src/test/mock-ctx.tsx

@@ -0,0 +1,236 @@
+import type { CartData, RenderContext } from "../context"
+import type { HttpTypes } from "@medusajs/types"
+import type { CmsFiltersConfig } from "@arroyavecommerce/cms-core"
+
+export function mockCtx(overrides?: Partial<RenderContext>): RenderContext {
+  return {
+    countryCode: "co",
+    region: {} as HttpTypes.StoreRegion,
+    products: [],
+    categories: [],
+    collections: [],
+    cartQuantities: {},
+    carrito: null,
+    acciones: { agregarAlCarrito: async () => ({ ok: true }) },
+    componentes: {
+      Imagen: ({ src, alt, className, prioridad }) =>
+        src
+          ? <img src={src} alt={alt} className={className} data-prioridad={prioridad ? "true" : undefined} />
+          : <div role="img" aria-label={alt} className={className} style={{ background: "var(--cms-superficie)" }} />,
+      Enlace: ({ href, className, children, "aria-current": ariaCurrent }) => (
+        <a href={href} className={className} aria-current={ariaCurrent}>{children}</a>
+      ),
+    },
+    sesion: null,
+    ...overrides,
+  }
+}
+
+const fixtureProductos: HttpTypes.StoreProduct[] = [
+  {
+    id: "prod_1",
+    title: "Sneaker Runner Blanco",
+    handle: "sneaker-runner-blanco",
+    thumbnail: null,
+    variants: [
+      {
+        id: "var_1",
+        title: "M",
+        calculated_price: { calculated_amount: 289900, currency_code: "cop" },
+        inventory_quantity: 5,
+        allow_backorder: false,
+      },
+    ],
+  },
+  {
+    id: "prod_2",
+    title: "Hoodie Heavy Negro",
+    handle: "hoodie-heavy-negro",
+    thumbnail: null,
+    variants: [
+      {
+        id: "var_2",
+        title: "M",
+        calculated_price: { calculated_amount: 179900, currency_code: "cop" },
+        inventory_quantity: 5,
+        allow_backorder: false,
+      },
+    ],
+  },
+  {
+    id: "prod_3",
+    title: "Camiseta Basica Blanca",
+    handle: "camiseta-basica-blanca",
+    thumbnail: null,
+    variants: [
+      {
+        id: "var_3",
+        title: "S",
+        calculated_price: { calculated_amount: 89900, currency_code: "cop" },
+        inventory_quantity: 5,
+        allow_backorder: false,
+      },
+    ],
+  },
+] as unknown as HttpTypes.StoreProduct[]
+
+const fixtureFiltros: CmsFiltersConfig = {
+  version: 1,
+  facets: [
+    {
+      id: "categoria",
+      label: "Categoría",
+      control: "pill",
+      source: { type: "tag", tagIds: ["tag_camisetas", "tag_hoodies"] },
+      order: 1,
+    },
+    {
+      id: "precio",
+      label: "Precio",
+      control: "range",
+      source: { type: "price" },
+      order: 2,
+    },
+  ],
+}
+
+export function fixtureCarrito(overrides?: Partial<CartData>): CartData {
+  return {
+    items: [
+      {
+        id: "line_1",
+        title: "Sneaker Runner Blanco",
+        variantTitle: "Blanco / 40",
+        thumbnail: "https://picsum.photos/seed/cart-1/80/100",
+        cantidad: 1,
+        precioTotal: 289900,
+        href: "/products/sneaker-runner-blanco",
+      },
+      {
+        id: "line_2",
+        title: "Hoodie Heavy Negro",
+        variantTitle: "Negro / M",
+        thumbnail: null,
+        cantidad: 2,
+        precioTotal: 359800,
+        href: "/products/hoodie-heavy-negro",
+      },
+    ],
+    count: 3,
+    subtotal: 649700,
+    moneda: "cop",
+    urlCarrito: "/cart",
+    urlCheckout: "/checkout",
+    ...overrides,
+  }
+}
+
+export function fixtureListado(
+  overrides?: Partial<NonNullable<NonNullable<RenderContext["catalogo"]>["listado"]>>
+): NonNullable<NonNullable<RenderContext["catalogo"]>["listado"]> {
+  return {
+    titulo: "Todos los productos",
+    breadcrumb: [
+      { texto: "Inicio", href: "/" },
+      { texto: "Todos los productos", href: "/productos" },
+    ],
+    productos: fixtureProductos,
+    total: fixtureProductos.length,
+    filtros: fixtureFiltros,
+    seleccion: {},
+    opcionesFaceta: {
+      categoria: [
+        { valor: "camisetas", etiqueta: "Camisetas", conteo: 128 },
+        { valor: "hoodies", etiqueta: "Hoodies", conteo: 42 },
+      ],
+      precio: [{ valor: "0-100000", etiqueta: "$0 - $100.000" }],
+    },
+    paginacion: { pagina: 1, totalPaginas: 3, hrefPara: (p: number) => `?page=${p}` },
+    urlFiltro: (facetId: string, valor: string) => `?${facetId}=${valor}`,
+    urlOrden: (valor: string) => `?order=${valor}`,
+    orden: "relevancia",
+    ...overrides,
+  }
+}
+
+export function fixtureDetalle(
+  overrides?: Partial<NonNullable<NonNullable<RenderContext["catalogo"]>["detalle"]>>
+): NonNullable<NonNullable<RenderContext["catalogo"]>["detalle"]> {
+  return {
+    producto: {
+      eyebrow: "SNEAKERS · UNISEX",
+      titulo: "Sneaker Runner Blanco",
+      descripcion:
+        "Silueta runner de perfil bajo en cuero y malla. Entresuela de EVA con amortiguación para todo el día.",
+      precio: "$ 289.900",
+      compareAt: "$ 349.900",
+      descuentoPct: 17,
+      imagenes: [
+        { url: "https://picsum.photos/seed/pdp-1/1200/1500", alt: "Sneaker Runner Blanco — lateral" },
+        { url: "https://picsum.photos/seed/pdp-2/1200/1500", alt: "Sneaker Runner Blanco — detalle" },
+        { url: "https://picsum.photos/seed/pdp-3/1200/1500", alt: "Sneaker Runner Blanco — puesto" },
+        { url: "https://picsum.photos/seed/pdp-4/1200/1500", alt: "Sneaker Runner Blanco — suela" },
+      ],
+      rating: { promedio: 4.6, total: 213 },
+      envioInfo: [
+        "🚚 Envío a Bogotá: 2–4 días hábiles · gratis desde $150.000",
+        "Paga con PSE, tarjeta o efectivo",
+        "↩ Cambios y devoluciones gratis por 30 días",
+      ],
+      acordeon: [
+        {
+          titulo: "Descripción",
+          cuerpo:
+            "Silueta runner de perfil bajo en cuero y malla. Entresuela de EVA con amortiguación para todo el día.",
+        },
+        { titulo: "Materiales y cuidado", cuerpo: "Cuero sintético y malla transpirable. Limpiar con paño húmedo." },
+        { titulo: "Envíos y devoluciones", cuerpo: "Envío gratis desde $150.000. Devoluciones gratis por 30 días." },
+      ],
+    },
+    variantes: {
+      color: [
+        { valor: "blanco", etiqueta: "Blanco", swatchUrl: "https://picsum.photos/seed/color-blanco/52/52" },
+        { valor: "negro", etiqueta: "Negro", swatchUrl: "https://picsum.photos/seed/color-negro/52/52" },
+        { valor: "gris", etiqueta: "Gris", swatchUrl: "https://picsum.photos/seed/color-gris/52/52" },
+      ],
+      talla: [
+        { valor: "37", etiqueta: "37", agotada: false },
+        { valor: "38", etiqueta: "38", agotada: false },
+        { valor: "39", etiqueta: "39", agotada: false, pocasUnidades: 2 },
+        { valor: "40", etiqueta: "40", agotada: true },
+        { valor: "41", etiqueta: "41", agotada: false },
+      ],
+    },
+    resolverVariante: (sel) => (sel.talla ? `var_${sel.talla}${sel.color ? `_${sel.color}` : ""}` : null),
+    reseñas: {
+      promedio: 4.6,
+      total: 213,
+      histograma: [
+        { estrellas: 5, porcentaje: 72 },
+        { estrellas: 4, porcentaje: 18 },
+        { estrellas: 3, porcentaje: 7 },
+        { estrellas: 2, porcentaje: 2 },
+        { estrellas: 1, porcentaje: 1 },
+      ],
+      muestra: [
+        {
+          autor: "Camila R.",
+          estrellas: 5,
+          verificada: true,
+          talla: "38",
+          texto:
+            "Súper cómodos para caminar todo el día. La talla es fiel, pedí mi talla usual y quedó perfecta.",
+        },
+        {
+          autor: "Andrés M.",
+          estrellas: 4,
+          verificada: true,
+          talla: "42",
+          texto: "Buen material y llegaron en 3 días a Medellín. El blanco se ensucia rápido, pero se limpian fácil.",
+        },
+      ],
+    },
+    relacionados: [fixtureProductos[1], fixtureProductos[2]],
+    ...overrides,
+  }
+}

package/src/theme-defaults.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest"
+import { THEME_DEFAULTS, THEME_PRESETS } from "./theme"
+
+describe("THEME_DEFAULTS", () => {
+  it("es el preset kinetic (el brand del template)", () => {
+    expect(THEME_DEFAULTS).toBe(THEME_PRESETS.kinetic)
+    expect(THEME_DEFAULTS["fuente-titulo"]).toBe("archivo-black")
+  })
+})

package/src/theme.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from "vitest"
+import { FUENTES, THEME_DEFAULTS, THEME_PRESETS, themeModaCss, themeTokens } from "./theme"
+
+describe("themeTokens", () => {
+  it("declara los 25 tokens del tema de moda", () => {
+    expect(Object.keys(themeTokens).length).toBe(25)
+  })
+
+  it("incluye los tokens de fundaciones Kinetic", () => {
+    for (const key of [
+      "acento-2", "sombra-sm", "sombra-md", "sombra-lg",
+      "radio-sm", "radio-md", "radio-lg", "radio-full", "degradado",
+    ]) {
+      expect(themeTokens[key], `falta token ${key}`).toBeDefined()
+    }
+    expect(themeTokens["acento-2"].tipo).toBe("color")
+    expect(themeTokens["sombra-md"].tipo).toBe("medida")
+    expect(themeTokens["acento-2"].cssVars).toContain("--cms-acento-2")
+  })
+})
+
+describe("FUENTES", () => {
+  it("incluye Archivo Black", () => {
+    expect(FUENTES["archivo-black"]).toBeDefined()
+    expect(FUENTES["archivo-black"].stack).toContain("Archivo Black")
+  })
+})
+
+describe("THEME_PRESETS", () => {
+  it("cada preset tiene las mismas 25 claves que themeTokens", () => {
+    const esperadas = Object.keys(themeTokens).sort()
+    for (const [nombre, preset] of Object.entries(THEME_PRESETS)) {
+      expect(Object.keys(preset).sort(), `preset ${nombre}`).toEqual(esperadas)
+    }
+  })
+
+  it("THEME_DEFAULTS es el preset kinetic (brand del template)", () => {
+    expect(THEME_DEFAULTS).toBe(THEME_PRESETS.kinetic)
+  })
+
+  it("incluye el preset kinetic (cobalto + coral + Archivo Black)", () => {
+    const k = THEME_PRESETS.kinetic
+    expect(k.acento).toBe("#3b2bff")
+    expect(k["acento-2"]).toBe("#ff3b2e")
+    expect(k["fuente-titulo"]).toBe("archivo-black")
+  })
+})
+
+describe("themeModaCss", () => {
+  it("editorial produce --cms-fondo: #fafaf8", () => {
+    const css = themeModaCss(THEME_PRESETS.editorial)
+    expect(css).toContain("--cms-fondo: #fafaf8")
+  })
+
+  it("street produce --cms-titulo-transform: uppercase y --cms-primario: oklch(0.87 0.19 128)", () => {
+    const css = themeModaCss(THEME_PRESETS.street)
+    expect(css).toContain("--cms-titulo-transform: uppercase")
+    expect(css).toContain("--cms-primario: oklch(0.87 0.19 128)")
+  })
+
+  it("premium produce --cms-radio: 2px y utility --cms-grosor-borde: 1.5px", () => {
+    expect(themeModaCss(THEME_PRESETS.premium)).toContain("--cms-radio: 2px")
+    expect(themeModaCss(THEME_PRESETS.utility)).toContain("--cms-grosor-borde: 1.5px")
+  })
+
+  it("no omite ningún token de los 25 en ningún preset (25 declaraciones por preset)", () => {
+    for (const preset of Object.values(THEME_PRESETS)) {
+      const css = themeModaCss(preset)
+      const declaraciones = css.split(";").map((s) => s.trim()).filter(Boolean)
+      expect(declaraciones.length).toBe(25)
+    }
+  })
+
+  it("kinetic emite las vars nuevas y resuelve la fuente Archivo Black", () => {
+    const css = themeModaCss(THEME_PRESETS.kinetic)
+    expect(css).toContain("--cms-acento-2: #ff3b2e")
+    expect(css).toContain("--cms-radio-full: 999px")
+    expect(css).toContain("--cms-sombra-md:")
+    expect(css).toContain("--cms-degradado: linear-gradient(120deg,#3b2bff,#ff3b2e)")
+    expect(css).toContain("--cms-fuente-titulo: 'Archivo Black',sans-serif")
+  })
+})

package/src/theme.ts

@@ -0,0 +1,195 @@
+import type { FuenteDef, ThemeTokenDef } from "@arroyavecommerce/cms-core/theme"
+import { themeToCss } from "@arroyavecommerce/cms-core/theme"
+
+/**
+ * Tema de la plantilla de moda: 25 tokens `--cms-*` (9 colores, 3 fuentes,
+ * 13 medidas) y 5 presets (editorial/street/premium/utility/kinetic) sobre
+ * esos mismos tokens. Los tokens de "fundaciones Kinetic" (acento-2, sombras,
+ * radios por tamaño, degradado) son aditivos: `themeToCss` solo emite lo que
+ * está en el mapa publicado, así que los consumidores usan `var(--cms-x, fb)`.
+ */
+
+export const themeTokens: Record<string, ThemeTokenDef> = {
+  fondo: { label: "Fondo", tipo: "color", default: "#fafaf8", cssVars: ["--cms-fondo"] },
+  superficie: { label: "Superficie", tipo: "color", default: "#ffffff", cssVars: ["--cms-superficie"] },
+  texto: { label: "Texto", tipo: "color", default: "#151515", cssVars: ["--cms-texto"] },
+  "texto-suave": { label: "Texto suave", tipo: "color", default: "#666666", cssVars: ["--cms-texto-suave"] },
+  primario: { label: "Primario", tipo: "color", default: "#151515", cssVars: ["--cms-primario"] },
+  "primario-texto": { label: "Texto sobre primario", tipo: "color", default: "#ffffff", cssVars: ["--cms-primario-texto"] },
+  acento: { label: "Acento", tipo: "color", default: "#151515", cssVars: ["--cms-acento"] },
+  "acento-2": { label: "Acento secundario", tipo: "color", default: "#ff3b2e", cssVars: ["--cms-acento-2"] },
+  borde: { label: "Borde", tipo: "color", default: "#e6e4df", cssVars: ["--cms-borde"] },
+
+  "fuente-titulo": { label: "Fuente de títulos", tipo: "fuente", default: "archivo", cssVars: ["--cms-fuente-titulo"] },
+  "fuente-texto": { label: "Fuente de texto", tipo: "fuente", default: "archivo", cssVars: ["--cms-fuente-texto"] },
+  "fuente-mono": { label: "Fuente monoespaciada", tipo: "fuente", default: "ibm-plex-mono", cssVars: ["--cms-fuente-mono"] },
+
+  radio: { label: "Radio de esquinas", tipo: "medida", default: "0px", cssVars: ["--cms-radio"] },
+  "radio-sm": { label: "Radio chico", tipo: "medida", default: "6px", cssVars: ["--cms-radio-sm"] },
+  "radio-md": { label: "Radio medio", tipo: "medida", default: "12px", cssVars: ["--cms-radio-md"] },
+  "radio-lg": { label: "Radio grande", tipo: "medida", default: "20px", cssVars: ["--cms-radio-lg"] },
+  "radio-full": { label: "Radio circular", tipo: "medida", default: "999px", cssVars: ["--cms-radio-full"] },
+  "grosor-borde": { label: "Grosor de borde", tipo: "medida", default: "1px", cssVars: ["--cms-grosor-borde"] },
+  "sombra-sm": { label: "Sombra chica", tipo: "medida", default: "0 1px 2px rgba(0,0,0,0.06)", cssVars: ["--cms-sombra-sm"] },
+  "sombra-md": { label: "Sombra media", tipo: "medida", default: "0 10px 30px -12px rgba(0,0,0,0.18)", cssVars: ["--cms-sombra-md"] },
+  "sombra-lg": { label: "Sombra grande", tipo: "medida", default: "0 30px 70px -28px rgba(0,0,0,0.32)", cssVars: ["--cms-sombra-lg"] },
+  "degradado": { label: "Degradado", tipo: "medida", default: "linear-gradient(120deg,#3b2bff,#ff3b2e)", cssVars: ["--cms-degradado"] },
+  "titulo-peso": { label: "Peso de títulos", tipo: "medida", default: "600", cssVars: ["--cms-titulo-peso"] },
+  "titulo-transform": { label: "Transformación de títulos", tipo: "medida", default: "none", cssVars: ["--cms-titulo-transform"] },
+  "titulo-espaciado": { label: "Espaciado de títulos", tipo: "medida", default: "-0.02em", cssVars: ["--cms-titulo-espaciado"] },
+}
+
+export const FUENTES: Record<string, FuenteDef> = {
+  archivo: { label: "Archivo", stack: "'Archivo',sans-serif" },
+  "archivo-black": { label: "Archivo Black", stack: "'Archivo Black',sans-serif" },
+  anton: { label: "Anton", stack: "'Anton',sans-serif" },
+  "libre-caslon": { label: "Libre Caslon Text", stack: "'Libre Caslon Text',serif" },
+  "ibm-plex-mono": { label: "IBM Plex Mono", stack: "'IBM Plex Mono',monospace" },
+}
+
+export const THEME_PRESETS: Record<
+  "editorial" | "street" | "premium" | "utility" | "kinetic",
+  Record<string, string>
+> = {
+  editorial: {
+    fondo: "#fafaf8",
+    superficie: "#ffffff",
+    texto: "#151515",
+    "texto-suave": "#666666",
+    primario: "#151515",
+    "primario-texto": "#ffffff",
+    acento: "#151515",
+    "acento-2": "#151515",
+    borde: "#e6e4df",
+    radio: "0px",
+    "radio-sm": "0px",
+    "radio-md": "0px",
+    "radio-lg": "0px",
+    "radio-full": "999px",
+    "grosor-borde": "1px",
+    "sombra-sm": "0 1px 2px rgba(0,0,0,0.05)",
+    "sombra-md": "0 4px 16px -8px rgba(0,0,0,0.12)",
+    "sombra-lg": "0 18px 40px -24px rgba(0,0,0,0.22)",
+    "degradado": "linear-gradient(120deg,#151515,#333333)",
+    "fuente-titulo": "archivo",
+    "fuente-texto": "archivo",
+    "fuente-mono": "ibm-plex-mono",
+    "titulo-peso": "600",
+    "titulo-transform": "none",
+    "titulo-espaciado": "-0.02em",
+  },
+  street: {
+    fondo: "#101010",
+    superficie: "#181818",
+    texto: "#f2f2ef",
+    "texto-suave": "#999999",
+    primario: "oklch(0.87 0.19 128)",
+    "primario-texto": "#101010",
+    acento: "oklch(0.87 0.19 128)",
+    "acento-2": "#ff2e6a",
+    borde: "#262626",
+    radio: "0px",
+    "radio-sm": "0px",
+    "radio-md": "2px",
+    "radio-lg": "4px",
+    "radio-full": "999px",
+    "grosor-borde": "1px",
+    "sombra-sm": "0 1px 2px rgba(0,0,0,0.4)",
+    "sombra-md": "0 10px 30px -12px rgba(0,0,0,0.6)",
+    "sombra-lg": "0 30px 70px -28px rgba(0,0,0,0.75)",
+    "degradado": "linear-gradient(120deg,oklch(0.87 0.19 128),#101010)",
+    "fuente-titulo": "anton",
+    "fuente-texto": "archivo",
+    "fuente-mono": "ibm-plex-mono",
+    "titulo-peso": "400",
+    "titulo-transform": "uppercase",
+    "titulo-espaciado": "0.01em",
+  },
+  premium: {
+    fondo: "#f6f1e8",
+    superficie: "#fdfaf4",
+    texto: "#2b2620",
+    "texto-suave": "#6b6459",
+    primario: "#2b2620",
+    "primario-texto": "#f6f1e8",
+    acento: "oklch(0.55 0.11 50)",
+    "acento-2": "oklch(0.55 0.11 50)",
+    borde: "#e3dccd",
+    radio: "2px",
+    "radio-sm": "2px",
+    "radio-md": "4px",
+    "radio-lg": "10px",
+    "radio-full": "999px",
+    "grosor-borde": "1px",
+    "sombra-sm": "0 1px 2px rgba(43,38,32,0.06)",
+    "sombra-md": "0 8px 24px -12px rgba(43,38,32,0.16)",
+    "sombra-lg": "0 24px 60px -26px rgba(43,38,32,0.28)",
+    "degradado": "linear-gradient(120deg,#2b2620,#6b6459)",
+    "fuente-titulo": "libre-caslon",
+    "fuente-texto": "archivo",
+    "fuente-mono": "ibm-plex-mono",
+    "titulo-peso": "400",
+    "titulo-transform": "none",
+    "titulo-espaciado": "0",
+  },
+  utility: {
+    fondo: "#f2f2f0",
+    superficie: "#fbfbfa",
+    texto: "#1a1a1a",
+    "texto-suave": "#666666",
+    primario: "oklch(0.62 0.19 40)",
+    "primario-texto": "#ffffff",
+    acento: "oklch(0.62 0.19 40)",
+    "acento-2": "oklch(0.62 0.19 40)",
+    borde: "#1a1a1a",
+    radio: "0px",
+    "radio-sm": "0px",
+    "radio-md": "0px",
+    "radio-lg": "0px",
+    "radio-full": "999px",
+    "grosor-borde": "1.5px",
+    "sombra-sm": "0 1px 0 rgba(0,0,0,0.08)",
+    "sombra-md": "0 6px 18px -10px rgba(0,0,0,0.18)",
+    "sombra-lg": "0 20px 44px -24px rgba(0,0,0,0.3)",
+    "degradado": "linear-gradient(120deg,oklch(0.62 0.19 40),#1a1a1a)",
+    "fuente-titulo": "archivo",
+    "fuente-texto": "archivo",
+    "fuente-mono": "ibm-plex-mono",
+    "titulo-peso": "700",
+    "titulo-transform": "none",
+    "titulo-espaciado": "-0.01em",
+  },
+  kinetic: {
+    fondo: "#f1eee6",
+    superficie: "#ffffff",
+    texto: "#0c0c10",
+    "texto-suave": "#6b675e",
+    primario: "#3b2bff",
+    "primario-texto": "#ffffff",
+    acento: "#3b2bff",
+    "acento-2": "#ff3b2e",
+    borde: "#dbd6c9",
+    radio: "8px",
+    "radio-sm": "8px",
+    "radio-md": "14px",
+    "radio-lg": "22px",
+    "radio-full": "999px",
+    "grosor-borde": "1px",
+    "sombra-sm": "0 1px 2px rgba(12,12,16,0.06)",
+    "sombra-md": "0 10px 30px -12px rgba(12,12,16,0.22)",
+    "sombra-lg": "0 30px 70px -28px rgba(12,12,16,0.4)",
+    "degradado": "linear-gradient(120deg,#3b2bff,#ff3b2e)",
+    "fuente-titulo": "archivo-black",
+    "fuente-texto": "archivo",
+    "fuente-mono": "ibm-plex-mono",
+    "titulo-peso": "900",
+    "titulo-transform": "uppercase",
+    "titulo-espaciado": "-0.04em",
+  },
+}
+
+export const THEME_DEFAULTS: Record<string, string> = THEME_PRESETS.kinetic
+
+export function themeModaCss(tokens: Record<string, string>): string {
+  return themeToCss(tokens, { tokens: themeTokens, fuentes: FUENTES }, () => {})
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"]
+}