Theming avec les tokens --fdl-*

Les tokens sont la voie supportée pour changer l'apparence du moteur de recherche avec du CSS. Ce sont des custom properties versionnées : tu les déclares une fois et le widget les applique dans tous ses composants, au-dessus de la configuration du panneau et du preset visuel actif.

Usage de base

Depuis n'importe quelle feuille de styles de ta boutique (pas besoin de toucher au panneau) :

.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;
}

Ou depuis le Custom CSS du panneau (Apparence → Avancé), sur la racine du widget :

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

Référence des tokens

Couleur

Token	Défaut	Contrôle
--fdl-primary	#18181b	Couleur principale : boutons, focus, éléments actifs. Équivaut à la « Couleur principale » du panneau.
--fdl-primary-soft	#f4f4f5	Version douce de la couleur principale (fonds des chips actifs, hovers marqués).
--fdl-accent	#dc2626	Couleur d'accent : prix en promotion, badges de réduction. Équivaut à la « Couleur d'accent » du panneau.
--fdl-text	#18181b	Couleur du texte principal.
--fdl-text-muted	#71717a	Texte secondaire : catégories, compteurs, sous-titres.
--fdl-bg	#fafafa	Fond général du moteur de recherche.
--fdl-surface	#ffffff	Fond des surfaces surélevées : cards, panneaux, dropdowns.
--fdl-border	#e4e4e7	Couleur des bordures et des séparateurs.
--fdl-hover	#f4f4f5	Fond des éléments au survol.

Panier

Token	Défaut	Contrôle
--fdl-cart-btn-bg	color principal	Fond du bouton « Ajouter au panier ».
--fdl-cart-btn-text	#ffffff	Texte et icône du bouton « Ajouter au panier ».
--fdl-cart-btn-hover-bg	auto (aclarado)	Fond du bouton au hover.
--fdl-cart-btn-hover-text	hereda	Texte du bouton au hover.
--fdl-cart-badge-bg	verde	Fond du compteur d'articles du panier (en-tête).

Image

Token	Défaut	Contrôle
--fdl-img-bg	gris suave	Fond de la boîte d'image produit dans les cards.

Forme

Token	Défaut	Contrôle
--fdl-radius-sm	0px	Petit rayon de bordure (inputs, chips internes).
--fdl-radius-md	0px	Rayon de bordure moyen (cards, panneaux).
--fdl-radius-lg	0px	Grand rayon de bordure (modal, sheets).
--fdl-btn-radius	999px	Rayon du bouton « Ajouter au panier » (999px = pilule).
--fdl-chip-radius	999px	Rayon des chips et des suggestions.
--fdl-card-pad	0px	Padding intérieur de la card produit.
--fdl-card-shadow	none	Ombre des cards produit.
--fdl-modal-shadow	0 20px 60px rgba(0,0,0,.18)	Ombre du modal du moteur de recherche.

Typographie

Token	Défaut	Contrôle
--fdl-font-display	hereda	Typographie des titres et des noms de produit.
--fdl-font-body	hereda	Typographie du reste des textes.

Animation

Token	Défaut	Contrôle
--fdl-anim-duration	180ms	Durée des transitions du widget.
--fdl-anim-easing	ease	Courbe des transitions du widget.

Précédence

De la priorité la plus haute à la plus basse : tes tokens → réglages du panneau (couleurs, colonnes…) → preset visuel → défauts du widget. Un token que tu déclares gagne toujours sur ce que le panneau configure pour cette même propriété.

Valeurs responsive

Déclare le token toujours (hors des media queries) et change sa valeur à l'intérieur. La présence du token est détectée au chargement ; sa valeur, elle, est suivie en direct.

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

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