/* * KummaraDS — kds-tema-tienda (#2003, #2004, #2007) * ============================================================ * El tema de la tienda: los valores de la librería con el negro, el blanco y los cuatro pasteles de la tienda. * Lo demás son los colores de KDS tal cual; uno que no se lee se ajusta un poco, el mismo color con algo de negro. * Sólo vale con la clase en el : * * * * Es un bloque de valores y nada más (#2007): ningún selector de pieza. Cada pieza lee sus papeles (tokens.css) y * sus valores de componente (--kds--*), y acá se fijan los de la tienda. * No declara modos: la tienda se ve siempre en su claro, aunque el panel guarde otro modo en el navegador, porque * un tema le gana a un modo (tokens.css). * ============================================================ */ html.kds-tienda { --kds-escala: 1; /* La paleta de la tienda. components/tienda-kds.css la repite para las páginas que todavía no pasaron a la librería; cuando pase la última, queda sólo acá. */ --tienda-tinta: #000; --tienda-texto: #1a1a1a; --tienda-borde: #e5e5e5; --tienda-verde: #A8E6CF; --tienda-naranja: #FFD3B6; --tienda-rosa: #FFAAA5; --tienda-celeste: #B2EBF2; /* ---- Papeles ---- */ --kds-fondo: #fff; --kds-superficie: #fff; --kds-superficie-2: #f8f9fa; --kds-superficie-flotante: #fff; --kds-texto: var(--tienda-texto); --kds-texto-2: #606060; --kds-texto-3: #606060; --kds-texto-sutil: #606060; --kds-texto-titulo: var(--tienda-tinta); --kds-texto-invertido: #fff; --kds-tinta: var(--tienda-tinta); --kds-borde: var(--tienda-borde); --kds-borde-control: #85888a; /* el gris de KDS #dee2e6 con 40% de negro: 3,57 a 1 sobre blanco */ --kds-acento: var(--tienda-tinta); --kds-acento-hover: #333; --kds-acento-activo: var(--tienda-tinta); --kds-sobre-acento: #fff; --kds-marca: var(--tienda-tinta); --kds-acento-texto: var(--tienda-tinta); --kds-enlace: var(--tienda-tinta); --kds-acento-fondo: #f8f9fa; --kds-foco: var(--tienda-tinta); --kds-foco-claro: #fff; /* Error y logro con los pasteles de la tienda: el pastel marca (borde, relleno, ícono) y el texto va en tinta */ --kds-peligro: var(--tienda-rosa); --kds-peligro-texto: var(--tienda-texto); --kds-sobre-peligro: var(--tienda-texto); --kds-exito: var(--tienda-verde); --kds-exito-texto: var(--tienda-texto); --kds-aviso: var(--tienda-tinta); --kds-aviso-texto: var(--tienda-texto); --kds-info: var(--tienda-tinta); --kds-peligro-fondo: color-mix(in srgb, var(--tienda-rosa) 30%, #fff); --kds-peligro-borde: var(--tienda-rosa); --kds-exito-fondo: color-mix(in srgb, var(--tienda-verde) 35%, #fff); --kds-exito-borde: var(--tienda-verde); --kds-aviso-fondo: color-mix(in srgb, var(--tienda-naranja) 35%, #fff); --kds-aviso-borde: var(--tienda-naranja); --kds-info-fondo: color-mix(in srgb, var(--tienda-celeste) 35%, #fff); --kds-info-borde: var(--tienda-celeste); --kds-dato: var(--tienda-tinta); --kds-velo: rgba(0, 0, 0, .4); --kds-seleccion: var(--tienda-celeste); /* Los puntitos de «cargando»: los cuatro pasteles con 15% de negro, para que se vean sobre blanco */ --kds-cargando-1: #8fc4b0; --kds-cargando-2: #d9b39b; --kds-cargando-3: #d9908c; --kds-cargando-4: #97c8ce; --kds-globito-fondo: var(--tienda-tinta); --kds-globito-texto: #fff; --kds-sombra-flotante: 0 .625rem 1.75rem rgba(0, 0, 0, .12); --kds-sombra-dialogo: 0 1.5rem 3.75rem rgba(0, 0, 0, .22); /* ---- Escalas ---- */ --kds-control-alto: 2.75rem; --kds-control-alto-chico: 2.25rem; --kds-radio: 0; --kds-radio-superficie: 0; --kds-boton-caja: uppercase; --kds-boton-tracking: .04em; --kds-boton-fs: var(--kds-fs-2); --kds-marco-margen: 1rem; /* ---- Valores de componente ---- */ --kds-boton-secundario-borde: var(--tienda-tinta); --kds-entrada-invalida-fondo: color-mix(in srgb, var(--tienda-rosa) 15%, #fff); --kds-note-radio: 0; --kds-note-fs: var(--kds-fs-2); --kds-note-lh: var(--kds-lh-ui); --kds-note-texto: var(--kds-texto); --kds-note-icono: var(--kds-tinta); --kds-note-enlace-activo: var(--kds-tinta); --kds-note-alineada: flex; --kds-note-alineada-aire: .5rem; --kds-note-alineada-eje: baseline; --kds-note-alineada-icono-sep: 0; --kds-telefono-pais-color: var(--kds-texto); --kds-telefono-pais-fs: var(--kds-fs-3); --kds-datalist-total-marca: none; --kds-datalist-total-fs: var(--kds-fs-5); --kds-datalist-total-peso: var(--kds-peso-fuerte); --kds-datalist-total-color: var(--kds-texto); --kds-datalist-descuento: var(--kds-exito-texto); --kds-datalist-separa: var(--kds-borde); --kds-qty-ancho: 8.5rem; --kds-qty-alto: var(--kds-control-alto); --kds-qty-radio: 0; --kds-qty-borde: var(--kds-borde-control); --kds-qty-foco: var(--kds-tinta); --kds-qty-foco-sombra: 0 0 0 1px var(--kds-tinta); --kds-qty-fs: var(--kds-fs-3); --kds-qty-color: var(--kds-texto); --kds-qty-boton-ancho: var(--kds-tactil); --kds-qty-boton-alto: calc(var(--kds-control-alto) - 2px); --kds-qty-boton-fs: var(--kds-fs-4); --kds-qty-boton-color: var(--kds-texto); --kds-qty-boton-hover: var(--kds-tinta); --kds-qty-boton-radio: 0; /* Lo que las piezas viejas leen de la paleta del panel: en la tienda, tinta */ --color-teal: var(--tienda-tinta); --color-teal-dark: var(--tienda-tinta); } @media (min-width: 768px) { html.kds-tienda { --kds-marco-margen: 1.5rem; } } /* El ancho del contenido, el mismo de las páginas de la tienda que todavía usan Bootstrap (container: 1140px y 1320px con 12px de margen), para que la tienda no cambie de ancho al pasar de una página a otra. */ @media (min-width: 1200px) { html.kds-tienda { --kds-marco-margen: 2rem; --kds-marco-ancho: 69.75rem; } } @media (min-width: 1400px) { html.kds-tienda { --kds-marco-ancho: 81rem; } }