Theming mit --fdl-*-Tokens

Die Tokens sind der supportete Weg, das Aussehen der Suche per CSS zu ändern. Es sind versionierte Custom Properties: Du deklarierst sie einmal, und das Widget wendet sie in allen seinen Komponenten an — über der Dashboard-Konfiguration und dem aktiven visuellen Preset.

Grundlegende Nutzung

Aus einem beliebigen Stylesheet deines Shops (das Dashboard musst du dafür nicht anfassen):

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

Oder aus dem Custom CSS des Dashboards (Darstellung → Erweitert), auf der Wurzel des Widgets:

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

Token-Referenz

Farbe

Token	Default	Steuert
--fdl-primary	#18181b	Primärfarbe: Buttons, Fokus, aktive Elemente. Entspricht der „Hauptfarbe“ im Dashboard.
--fdl-primary-soft	#f4f4f5	Sanfte Variante der Primärfarbe (Hintergründe aktiver Chips, deutliche Hover-Zustände).
--fdl-accent	#dc2626	Akzentfarbe: Angebotspreise, Rabatt-Badges. Entspricht der „Akzentfarbe“ im Dashboard.
--fdl-text	#18181b	Farbe des Haupttexts.
--fdl-text-muted	#71717a	Sekundärtext: Kategorien, Zähler, Untertitel.
--fdl-bg	#fafafa	Allgemeiner Hintergrund der Suche.
--fdl-surface	#ffffff	Hintergrund erhöhter Flächen: Cards, Panels, Dropdowns.
--fdl-border	#e4e4e7	Farbe von Rahmen und Trennlinien.
--fdl-hover	#f4f4f5	Hintergrund von Elementen beim Überfahren mit der Maus.

Warenkorb

Token	Default	Steuert
--fdl-cart-btn-bg	color principal	Hintergrund des Buttons „In den Warenkorb“.
--fdl-cart-btn-text	#ffffff	Text und Icon des Buttons „In den Warenkorb“.
--fdl-cart-btn-hover-bg	auto (aclarado)	Hintergrund des Buttons beim Hover.
--fdl-cart-btn-hover-text	hereda	Text des Buttons beim Hover.
--fdl-cart-badge-bg	verde	Hintergrund des Stückzahl-Zählers des Warenkorbs (Kopfzeile).

Bild

Token	Default	Steuert
--fdl-img-bg	gris suave	Hintergrund der Produktbild-Box in den Cards.

Form

Token	Default	Steuert
--fdl-radius-sm	0px	Kleiner Eckenradius (Inputs, interne Chips).
--fdl-radius-md	0px	Mittlerer Eckenradius (Cards, Panels).
--fdl-radius-lg	0px	Großer Eckenradius (Modal, Sheets).
--fdl-btn-radius	999px	Radius des Buttons „In den Warenkorb“ (999px = Pille).
--fdl-chip-radius	999px	Radius von Chips und Vorschlägen.
--fdl-card-pad	0px	Innenabstand (Padding) der Produkt-Card.
--fdl-card-shadow	none	Schatten der Produkt-Cards.
--fdl-modal-shadow	0 20px 60px rgba(0,0,0,.18)	Schatten des Such-Modals.

Typografie

Token	Default	Steuert
--fdl-font-display	hereda	Schrift für Titel und Produktnamen.
--fdl-font-body	hereda	Schrift für alle übrigen Texte.

Animation

Token	Default	Steuert
--fdl-anim-duration	180ms	Dauer der Widget-Transitions.
--fdl-anim-easing	ease	Kurve der Widget-Transitions.

Präzedenz

Von höchster zu niedrigster Priorität: deine Tokens → Dashboard-Einstellungen (Farben, Spalten …) → visuelles Preset → Widget-Defaults. Ein Token, den du deklarierst, gewinnt für dieselbe Eigenschaft immer gegen die Dashboard-Konfiguration.

Responsive Werte

Deklariere den Token immer (außerhalb von Media Queries) und ändere seinen Wert innerhalb davon. Die Präsenz des Tokens wird beim Laden erkannt; sein Wert wird dagegen live verfolgt.

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

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