CSS Variables

Start customization with CSS variables. This gives you broad visual control with minimal risk.

What you can change with variables

• typography base values,
• text/surface/accent/border colors,
• spacing and corner radius,
• shadows and layering,
• grid and layout gaps.

Full list: CSS Variables Reference

How to apply overrides

1. Scope rules to the search root (.kea-search / .kea-search-canvas) or your storefront wrapper.
2. Override only documented --kea-* variables from the CSS Variables Reference.
3. Recheck search box, results, cards, and facets in preview.

/* Search box scope (broadly matches the search root on storefront) */
.kea-search,
.kea-search-box-wrapper {
  --kea-color-accent: #1d4ed8;
  --kea-color-text: #111827;
  --kea-color-border: #d1d5db;
  --kea-radius-md: 12px;
  --kea-products-gap: 20px;
}

/* Mobile breakpoint — combine with the layout tokens */
@media (max-width: 640px) {
  .kea-search {
    --kea-layout-facets-width: 100%;
    --kea-layout-gap: 12px;
  }
}

Note: The data-kea-view attribute is also emitted on the root wrapper by the storefront runtime. For broad styling, prefer the stable .kea-search--{mode} / .kea-search-canvas class composition. Use data-kea-view only for fine-grained per-view overrides. See DOM Markers Reference for the stable-vs-partial table.

When variables are not enough

Keep variable overrides as the base layer, then add block selectors from CSS Classes and Selectors.

Common issue

If a variable does not apply, usually one of these is true:

• Wrong scope — your selector does not actually match the search root on the storefront. Open the storefront in Preview with ?kea-preview=true, inspect the live element, and confirm .kea-search or .kea-search-canvas is an ancestor of the element you want to restyle. Move the rule under the correct selector.
• Override loaded before base styles — your stylesheet is included earlier in the page than the runtime’s own styles. Raise the specificity (add a more specific selector), or ensure your override is loaded after the base runtime stylesheet, not before.
• Variable name is not in the reference catalog — the token you wrote is not part of the documented --kea-* set. Check CSS Variables Reference and remove or rename the rule. Custom token names will not propagate.