Theming amb tokens --fdl-*

Els tokens són la via suportada per canviar l'aspecte del cercador amb CSS. Són custom properties versionades: les declares una vegada i el widget les aplica a tots els seus components, per sobre de la configuració del panell i del preset visual actiu.

Ús bàsic

Des de qualsevol full d'estils de la teva botiga (no cal tocar el panell):

.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 des del Custom CSS del panell (Aparença → Avançat), sobre l'arrel del widget:

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

Referència de tokens

Color

Token	Default	Controla
--fdl-primary	#18181b	Color principal: botons, focus, elements actius. Equival al «Color principal» del panell.
--fdl-primary-soft	#f4f4f5	Versió suau del color principal (fons de chips actius, hovers marcats).
--fdl-accent	#dc2626	Color d'accent: preus en oferta, badges de descompte. Equival al «Color d'accent» del panell.
--fdl-text	#18181b	Color del text principal.
--fdl-text-muted	#71717a	Text secundari: categories, comptadors, subtítols.
--fdl-bg	#fafafa	Fons general del cercador.
--fdl-surface	#ffffff	Fons de superfícies elevades: cards, panells, dropdowns.
--fdl-border	#e4e4e7	Color de vores i separadors.
--fdl-hover	#f4f4f5	Fons dels elements en passar-hi el ratolí.

Cistella

Token	Default	Controla
--fdl-cart-btn-bg	color principal	Fons del botó «Afegeix a la cistella».
--fdl-cart-btn-text	#ffffff	Text i icona del botó «Afegeix a la cistella».
--fdl-cart-btn-hover-bg	auto (aclarado)	Fons del botó en fer-hi hover.
--fdl-cart-btn-hover-text	hereda	Text del botó en fer-hi hover.
--fdl-cart-badge-bg	verde	Fons del comptador d'unitats de la cistella (capçalera).

Imatge

Token	Default	Controla
--fdl-img-bg	gris suave	Fons de la caixa d'imatge de producte a les cards.

Forma

Token	Default	Controla
--fdl-radius-sm	0px	Radi de vora petit (inputs, chips interns).
--fdl-radius-md	0px	Radi de vora mitjà (cards, panells).
--fdl-radius-lg	0px	Radi de vora gran (modal, sheets).
--fdl-btn-radius	999px	Radi del botó «Afegeix a la cistella» (999px = píndola).
--fdl-chip-radius	999px	Radi de chips i suggeriments.
--fdl-card-pad	0px	Padding interior de la card de producte.
--fdl-card-shadow	none	Ombra de les cards de producte.
--fdl-modal-shadow	0 20px 60px rgba(0,0,0,.18)	Ombra del modal del cercador.

Tipografia

Token	Default	Controla
--fdl-font-display	hereda	Tipografia de títols i noms de producte.
--fdl-font-body	hereda	Tipografia de la resta de textos.

Animació

Token	Default	Controla
--fdl-anim-duration	180ms	Durada de les transicions del widget.
--fdl-anim-easing	ease	Corba de les transicions del widget.

Precedència

De més a menys prioritat: els teus tokens → ajustos del panell (colors, columnes…) → preset visual → defaults del widget. Un token que declaris guanya sempre al que hi hagi configurat al panell per a aquesta mateixa propietat.

Valors responsive

Declara el token sempre (fora de media queries) i canvia'n el valor dins d'elles. La presència del token es detecta en carregar; el seu valor sí que se segueix en viu.

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

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