/* ═══════════════════════════════════════════════════════════════════════ * `_palettes.css` — paletas de fondo de la tienda publica (IT265) * ═══════════════════════════════════════════════════════════════════════ * El fondo de la tienda estaba clavado en el markup * (`bg-slate-50 dark:bg-slate-950` en el ) y las superficies en * `bg-white dark:bg-slate-900`, repetidas ~200 veces entre templates. El * dueño podia elegir sus dos colores de marca, pero no el color sobre el * que se apoya su tienda. * * COMO FUNCIONA. El slug elegido viaja en `data-sf-palette` del y * acá se traduce a variables; despues un mapeo reescribe las clases * NEUTRAS de Tailwind (bg-white, bg-slate-50, border-slate-200 y sus * pares dark) dentro de ese scope. Es el mismo patron que usan las 26 * skins del terminal POS (`pos_variant_themes.css`): reskin sin tocar * doscientos partials. * * QUE **NO** SE TOCA: los acentos de color (emerald de "agregar al * carrito", rose de descuento, amber de estrellas), las sombras, los * radios y el layout. Una paleta cambia la superficie, no el semaforo — * si el boton de comprar cambiara de color con cada paleta, el cliente * tendria que aprender de nuevo donde tocar. * * CADA PALETA DEFINE LOS DOS TEMAS. La tienda deja al visitante alternar * claro/oscuro (`localStorage sf-theme`), asi que una paleta que solo * exista en claro dejaria media tienda sin diseñar. Los pares estan * VERIFICADOS: ninguno baja de 4.5:1 entre texto y superficie, en * ninguno de los dos temas. * Guard: apps/commercial/storefront/tests/test_paletas_fondo.py * * `neutro` reproduce EXACTAMENTE los hex que hoy estan en el markup: es * el default y no puede cambiarle la cara a ninguna tienda existente. * ═════════════════════════════════════════════════════════════════════ */ /* ── Neutro — El gris azulado de siempre. ─────────────────────────── */ [data-sf-palette="neutro"] { --sf-pal-bg: #f8fafc; --sf-pal-surface: #ffffff; --sf-pal-sunk: #f1f5f9; --sf-pal-border: #e2e8f0; --sf-pal-border-soft: #f1f5f9; --sf-pal-text: #0f172a; --sf-pal-muted: #475569; } .dark[data-sf-palette="neutro"] { --sf-pal-bg: #020617; --sf-pal-surface: #0f172a; --sf-pal-sunk: #1e293b; --sf-pal-border: #334155; --sf-pal-border-soft: #1e293b; --sf-pal-text: #f1f5f9; --sf-pal-muted: #94a3b8; } .sf-swatch--neutro { --sf-swatch-bg: #f8fafc; --sf-swatch-surface: #ffffff; --sf-swatch-text: #0f172a; --sf-swatch-border: #e2e8f0; } .dark .sf-swatch--neutro { --sf-swatch-bg: #020617; --sf-swatch-surface: #0f172a; --sf-swatch-text: #f1f5f9; --sf-swatch-border: #334155; } /* ── Papel cálido — Blanco roto, como una hoja impresa. ─────────────────────────── */ [data-sf-palette="papel"] { --sf-pal-bg: #faf7f2; --sf-pal-surface: #fffdfa; --sf-pal-sunk: #f3ede4; --sf-pal-border: #e7ded1; --sf-pal-border-soft: #f3ede4; --sf-pal-text: #1c1917; --sf-pal-muted: #57534e; } .dark[data-sf-palette="papel"] { --sf-pal-bg: #12100e; --sf-pal-surface: #1c1916; --sf-pal-sunk: #292420; --sf-pal-border: #3a332e; --sf-pal-border-soft: #292420; --sf-pal-text: #f5f0e8; --sf-pal-muted: #a8a29e; } .sf-swatch--papel { --sf-swatch-bg: #faf7f2; --sf-swatch-surface: #fffdfa; --sf-swatch-text: #1c1917; --sf-swatch-border: #e7ded1; } .dark .sf-swatch--papel { --sf-swatch-bg: #12100e; --sf-swatch-surface: #1c1916; --sf-swatch-text: #f5f0e8; --sf-swatch-border: #3a332e; } /* ── Arena — Tierra clara, para decoración y oficio. ─────────────────────────── */ [data-sf-palette="arena"] { --sf-pal-bg: #f5f1e8; --sf-pal-surface: #fdfbf6; --sf-pal-sunk: #eee7d8; --sf-pal-border: #e0d7c3; --sf-pal-border-soft: #eee7d8; --sf-pal-text: #1c1a15; --sf-pal-muted: #5c5344; } .dark[data-sf-palette="arena"] { --sf-pal-bg: #14120d; --sf-pal-surface: #1f1c15; --sf-pal-sunk: #2b2720; --sf-pal-border: #3d372b; --sf-pal-border-soft: #2b2720; --sf-pal-text: #f2ece0; --sf-pal-muted: #a8a08d; } .sf-swatch--arena { --sf-swatch-bg: #f5f1e8; --sf-swatch-surface: #fdfbf6; --sf-swatch-text: #1c1a15; --sf-swatch-border: #e0d7c3; } .dark .sf-swatch--arena { --sf-swatch-bg: #14120d; --sf-swatch-surface: #1f1c15; --sf-swatch-text: #f2ece0; --sf-swatch-border: #3d372b; } /* ── Menta — Verde muy claro, fresco y limpio. ─────────────────────────── */ [data-sf-palette="menta"] { --sf-pal-bg: #f0fdf9; --sf-pal-surface: #ffffff; --sf-pal-sunk: #dcf7ef; --sf-pal-border: #c8ece1; --sf-pal-border-soft: #dcf7ef; --sf-pal-text: #0c1f1a; --sf-pal-muted: #3f5f56; } .dark[data-sf-palette="menta"] { --sf-pal-bg: #04211c; --sf-pal-surface: #0a2e27; --sf-pal-sunk: #123c33; --sf-pal-border: #1b4d42; --sf-pal-border-soft: #123c33; --sf-pal-text: #e6fbf5; --sf-pal-muted: #8fc4b7; } .sf-swatch--menta { --sf-swatch-bg: #f0fdf9; --sf-swatch-surface: #ffffff; --sf-swatch-text: #0c1f1a; --sf-swatch-border: #c8ece1; } .dark .sf-swatch--menta { --sf-swatch-bg: #04211c; --sf-swatch-surface: #0a2e27; --sf-swatch-text: #e6fbf5; --sf-swatch-border: #1b4d42; } /* ── Cielo — Azul claro, sobrio y confiable. ─────────────────────────── */ [data-sf-palette="cielo"] { --sf-pal-bg: #f0f7ff; --sf-pal-surface: #ffffff; --sf-pal-sunk: #e0efff; --sf-pal-border: #cfe3f7; --sf-pal-border-soft: #e0efff; --sf-pal-text: #0d1b2a; --sf-pal-muted: #40566e; } .dark[data-sf-palette="cielo"] { --sf-pal-bg: #061626; --sf-pal-surface: #0d2135; --sf-pal-sunk: #152e46; --sf-pal-border: #1f405e; --sf-pal-border-soft: #152e46; --sf-pal-text: #e8f2fc; --sf-pal-muted: #8fadc9; } .sf-swatch--cielo { --sf-swatch-bg: #f0f7ff; --sf-swatch-surface: #ffffff; --sf-swatch-text: #0d1b2a; --sf-swatch-border: #cfe3f7; } .dark .sf-swatch--cielo { --sf-swatch-bg: #061626; --sf-swatch-surface: #0d2135; --sf-swatch-text: #e8f2fc; --sf-swatch-border: #1f405e; } /* ── Lavanda — Violeta suave, para marcas de diseño. ─────────────────────────── */ [data-sf-palette="lavanda"] { --sf-pal-bg: #f7f5ff; --sf-pal-surface: #ffffff; --sf-pal-sunk: #ebe7fb; --sf-pal-border: #ddd7f4; --sf-pal-border-soft: #ebe7fb; --sf-pal-text: #17122b; --sf-pal-muted: #4d4470; } .dark[data-sf-palette="lavanda"] { --sf-pal-bg: #140f26; --sf-pal-surface: #1e1836; --sf-pal-sunk: #2a2249; --sf-pal-border: #392f61; --sf-pal-border-soft: #2a2249; --sf-pal-text: #f0ecfc; --sf-pal-muted: #a79cd0; } .sf-swatch--lavanda { --sf-swatch-bg: #f7f5ff; --sf-swatch-surface: #ffffff; --sf-swatch-text: #17122b; --sf-swatch-border: #ddd7f4; } .dark .sf-swatch--lavanda { --sf-swatch-bg: #140f26; --sf-swatch-surface: #1e1836; --sf-swatch-text: #f0ecfc; --sf-swatch-border: #392f61; } /* ── Rosa — Cálido y cercano, para moda y regalería. ─────────────────────────── */ [data-sf-palette="rosa"] { --sf-pal-bg: #fff5f6; --sf-pal-surface: #ffffff; --sf-pal-sunk: #ffe6e9; --sf-pal-border: #f7d5da; --sf-pal-border-soft: #ffe6e9; --sf-pal-text: #2b1116; --sf-pal-muted: #70414a; } .dark[data-sf-palette="rosa"] { --sf-pal-bg: #241014; --sf-pal-surface: #33191f; --sf-pal-sunk: #43222a; --sf-pal-border: #582d38; --sf-pal-border-soft: #43222a; --sf-pal-text: #fdeced; --sf-pal-muted: #d09aa4; } .sf-swatch--rosa { --sf-swatch-bg: #fff5f6; --sf-swatch-surface: #ffffff; --sf-swatch-text: #2b1116; --sf-swatch-border: #f7d5da; } .dark .sf-swatch--rosa { --sf-swatch-bg: #241014; --sf-swatch-surface: #33191f; --sf-swatch-text: #fdeced; --sf-swatch-border: #582d38; } /* ── Grafito — Gris neutro, sin tinte de color. ─────────────────────────── */ [data-sf-palette="grafito"] { --sf-pal-bg: #f1f2f4; --sf-pal-surface: #ffffff; --sf-pal-sunk: #e6e8eb; --sf-pal-border: #d8dade; --sf-pal-border-soft: #e6e8eb; --sf-pal-text: #121316; --sf-pal-muted: #4d5057; } .dark[data-sf-palette="grafito"] { --sf-pal-bg: #0a0a0b; --sf-pal-surface: #151618; --sf-pal-sunk: #212326; --sf-pal-border: #303337; --sf-pal-border-soft: #212326; --sf-pal-text: #f2f3f5; --sf-pal-muted: #9a9da3; } .sf-swatch--grafito { --sf-swatch-bg: #f1f2f4; --sf-swatch-surface: #ffffff; --sf-swatch-text: #121316; --sf-swatch-border: #d8dade; } .dark .sf-swatch--grafito { --sf-swatch-bg: #0a0a0b; --sf-swatch-surface: #151618; --sf-swatch-text: #f2f3f5; --sf-swatch-border: #303337; } /* ═════════════════════════════════════════════════════════════════════ * MAPEO — las clases neutras de Tailwind toman la paleta * ═════════════════════════════════════════════════════════════════════ * Scope `[data-sf-palette]`: sin el atributo (todo el back-office) estas * reglas no existen. Cada regla lleva ademas el prefijo de su tema para * no pisar al par contrario — la leccion de IT80 en las skins del POS: * sin eso queda un panel oscuro sobre pagina clara. * ═════════════════════════════════════════════════════════════════════ */ /* Fondo de pagina */ html[data-sf-palette]:not(.dark) body, html[data-sf-palette]:not(.dark) .bg-slate-50 { background-color: var(--sf-pal-bg); } html.dark[data-sf-palette] body, html.dark[data-sf-palette] .dark\:bg-slate-950 { background-color: var(--sf-pal-bg); } /* Superficies elevadas: cards, header, footer, modales */ html[data-sf-palette]:not(.dark) .bg-white { background-color: var(--sf-pal-surface); } html.dark[data-sf-palette] .dark\:bg-slate-900 { background-color: var(--sf-pal-surface); } /* Superficie hundida: filas alternas, chips, zonas de descanso */ html[data-sf-palette]:not(.dark) .bg-slate-100 { background-color: var(--sf-pal-sunk); } html.dark[data-sf-palette] .dark\:bg-slate-800 { background-color: var(--sf-pal-sunk); } /* Bordes */ html[data-sf-palette]:not(.dark) .border-slate-200 { border-color: var(--sf-pal-border); } html.dark[data-sf-palette] .dark\:border-slate-700 { border-color: var(--sf-pal-border); } /* El borde sutil es OTRO nivel, no el mismo: colapsarlos haria que `neutro` — que tiene que ser un no-op exacto — cambiara 28 bordes. */ html[data-sf-palette]:not(.dark) .border-slate-100 { border-color: var(--sf-pal-border-soft); } html.dark[data-sf-palette] .dark\:border-slate-800 { border-color: var(--sf-pal-border-soft); } /* Tinta. Solo los dos niveles que la paleta define; los acentos de color (emerald, rose, amber) NO se tocan: son semaforo, no superficie. */ html[data-sf-palette]:not(.dark) .text-slate-900 { color: var(--sf-pal-text); } html.dark[data-sf-palette] .dark\:text-slate-100 { color: var(--sf-pal-text); } html[data-sf-palette]:not(.dark) .text-slate-600, html[data-sf-palette]:not(.dark) .text-slate-500 { color: var(--sf-pal-muted); } html.dark[data-sf-palette] .dark\:text-slate-400, html.dark[data-sf-palette] .dark\:text-slate-300 { color: var(--sf-pal-muted); } /* ── Variantes con ALPHA (IT265, correccion) ───────────────────────── El mapeo cubria solo las clases SOLIDAS, y el storefront usa ademas sus variantes con transparencia. Medido en vivo con la paleta Grafito: la banda de «Productos destacados» renderizaba rgba(15,23,42,.4) — slate-900 azulado — sobre un fondo casi negro, o sea una franja de otro color en el medio de la pagina. La superficie con alpha tiene que salir de la MISMA variable, no del gris de fabrica. */ html[data-theme="palette-alpha-doc"] { /* solo documental, no aplica */ } html[data-theme="dark"][data-sf-palette] .dark\:bg-slate-900\/40, html.dark[data-sf-palette] .dark\:bg-slate-900\/40 { background-color: color-mix(in srgb, var(--sf-pal-surface) 40%, transparent); } html.dark[data-sf-palette] .dark\:bg-slate-800\/95 { background-color: color-mix(in srgb, var(--sf-pal-sunk) 95%, transparent); } html.dark[data-sf-palette] .dark\:bg-slate-800\/60 { background-color: color-mix(in srgb, var(--sf-pal-sunk) 60%, transparent); } html.dark[data-sf-palette] .dark\:bg-slate-800\/50 { background-color: color-mix(in srgb, var(--sf-pal-sunk) 50%, transparent); } html[data-sf-palette]:not(.dark) .bg-white\/95 { background-color: color-mix(in srgb, var(--sf-pal-surface) 95%, transparent); } /* NO se mapean a proposito: - `bg-slate-800` / `bg-slate-900` en tema CLARO: son inversiones deliberadas (una banda oscura sobre pagina clara). Teñirlas con la superficie de la paleta las volveria claras y romperia el contraste del texto blanco que llevan encima. - `bg-white/10`: es un velo sobre una imagen, no una superficie. - `bg-slate-400`: separadores y puntos, no fondo. Guard: test_paletas_fondo.py::MapeoCubreElArbolTest — si aparece una clase neutra nueva en el storefront, hay que mapearla o declararla aca con su motivo. */ /* Los tokens del sistema tambien siguen a la paleta, para que los componentes `sf-*` (notas, tablas, campos) no queden en el gris de fabrica sobre un fondo arena. */ html[data-sf-palette] { --sf-color-bg: var(--sf-pal-bg); --sf-color-bg-elevated: var(--sf-pal-surface); --sf-color-bg-subtle: var(--sf-pal-sunk); --sf-color-border: var(--sf-pal-border); --sf-color-border-soft: var(--sf-pal-border-soft); --sf-color-text: var(--sf-pal-text); --sf-color-text-muted: var(--sf-pal-muted); } /* ── Muestra del selector (back-office) ─────────────────────────────── */ .sf-swatch { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--sf-radius-lg, 12px); border: 1px solid var(--sf-swatch-border); background: var(--sf-swatch-bg); padding: 0.5rem; overflow: hidden; } /* La muestra dibuja una tienda en miniatura — barra + dos tarjetas — en vez de un cuadrado de color: lo que se elige es la relacion entre el fondo y las superficies, no un color suelto. */ .sf-swatch__bar { height: 0.5rem; border-radius: 3px; background: var(--sf-swatch-surface); border: 1px solid var(--sf-swatch-border); margin-bottom: 0.4rem; } .sf-swatch__row { display: flex; gap: 0.35rem; height: calc(100% - 0.9rem); } .sf-swatch__card { flex: 1; border-radius: 4px; background: var(--sf-swatch-surface); border: 1px solid var(--sf-swatch-border); position: relative; } .sf-swatch__card::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 22%; height: 2px; border-radius: 2px; background: var(--sf-swatch-text); opacity: 0.5; }