Theming com tokens --fdl-*

Os tokens são a via suportada de mudar o aspeto da pesquisa com CSS. São custom properties versionadas: declara-as uma vez e o widget aplica-as em todos os seus componentes, por cima da configuração do painel e do preset visual ativo.

Uso básico

A partir de qualquer folha de estilos da sua loja (não é preciso tocar no painel):

.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 a partir do Custom CSS do painel (Aparência → Avançado), sobre a raiz do widget:

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

Referência de tokens

Precedência

Da maior para a menor prioridade: os seus tokens → ajustes do painel (cores, colunas…) → preset visual → defaults do widget. Um token que declare ganha sempre ao que está configurado no painel para essa mesma propriedade.

Valores responsive

Declare o token sempre (fora de media queries) e mude o seu valor dentro delas. A presença do token é detetada ao carregar; o seu valor, esse, é seguido em direto.

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

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