Theming con tokens --fdl-*

Los tokens son la vía soportada de cambiar el aspecto del buscador con CSS. Son custom properties versionadas: las declaras una vez y el widget las aplica en todos sus componentes, por encima de la configuración del panel y del preset visual activo.

Uso básico

Desde cualquier hoja de estilos de tu tienda (no hace falta tocar el panel):

.findalo-search-host {
  --fdl-primary: #0d7a5e;
  --fdl-radius-md: 14px;
  --fdl-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  --fdl-font-display: "Poppins", sans-serif;
}

O desde el Custom CSS del panel (Apariencia → Avanzado), sobre la raíz del widget:

.kos-search {
  --fdl-primary: #0d7a5e;
  --fdl-btn-radius: 8px;
}

Referencia de tokens

Color

Token	Default	Controla
--fdl-primary	#18181b	Color principal: botones, foco, elementos activos. Equivale al «Color principal» del panel.
--fdl-primary-soft	#f4f4f5	Versión suave del color principal (fondos de chips activos, hovers marcados).
--fdl-accent	#dc2626	Color de acento: precios en oferta, badges de descuento. Equivale al «Color de acento» del panel.
--fdl-text	#18181b	Color del texto principal.
--fdl-text-muted	#71717a	Texto secundario: categorías, contadores, subtítulos.
--fdl-bg	#fafafa	Fondo general del buscador.
--fdl-surface	#ffffff	Fondo de superficies elevadas: cards, paneles, dropdowns.
--fdl-border	#e4e4e7	Color de bordes y separadores.
--fdl-hover	#f4f4f5	Fondo de elementos al pasar el ratón.

Carrito

Token	Default	Controla
--fdl-cart-btn-bg	color principal	Fondo del botón «Añadir al carrito».
--fdl-cart-btn-text	#ffffff	Texto e icono del botón «Añadir al carrito».
--fdl-cart-btn-hover-bg	auto (aclarado)	Fondo del botón al hacer hover.
--fdl-cart-btn-hover-text	hereda	Texto del botón al hacer hover.
--fdl-cart-badge-bg	verde	Fondo del contador de unidades de la cesta (cabecera).

Imagen

Token	Default	Controla
--fdl-img-bg	gris suave	Fondo de la caja de imagen de producto en las cards.

Forma

Token	Default	Controla
--fdl-radius-sm	0px	Radio de borde pequeño (inputs, chips internos).
--fdl-radius-md	0px	Radio de borde medio (cards, paneles).
--fdl-radius-lg	0px	Radio de borde grande (modal, sheets).
--fdl-btn-radius	999px	Radio del botón «Añadir al carrito» (999px = píldora).
--fdl-chip-radius	999px	Radio de chips y sugerencias.
--fdl-card-pad	0px	Padding interior de la card de producto.
--fdl-card-shadow	none	Sombra de las cards de producto.
--fdl-modal-shadow	0 20px 60px rgba(0,0,0,.18)	Sombra del modal del buscador.

Tipografía

Token	Default	Controla
--fdl-font-display	hereda	Tipografía de títulos y nombres de producto.
--fdl-font-body	hereda	Tipografía del resto de textos.

Animación

Token	Default	Controla
--fdl-anim-duration	180ms	Duración de las transiciones del widget.
--fdl-anim-easing	ease	Curva de las transiciones del widget.

Precedencia

De mayor a menor prioridad: tus tokens → ajustes del panel (colores, columnas…) → preset visual → defaults del widget. Un token que declares gana siempre a lo configurado en el panel para esa misma propiedad.

Valores responsive

Declara el token siempre (fuera de media queries) y cambia su valor dentro de ellas. La presencia del token se detecta al cargar; su valor sí se sigue en vivo.

.findalo-search-host { --fdl-card-pad: 12px; }

@media (max-width: 640px) {
  .findalo-search-host { --fdl-card-pad: 8px; }
}