CSS Variables Reference

This page lists documented --kea-* variables you can override safely.

How to use this catalog

1. Override only variables from this list.
2. Scope overrides by .kea-search / .kea-search--{mode} root (broad styling), by data-kea-view (fine-grained per-view targeting), or by your storefront wrapper.
3. Validate result in preview on desktop and mobile.

Note: The table below is the canonical list of documented --kea-* CSS variables that integrators can rely on. When Kea Labs adds, removes, or renames a variable, this table is updated to match.

Token catalog

Token	Category	Purpose
--kea-font-family	Typography	Base font family for storefront UI text.
--kea-font-size-base	Typography	Base font size.
--kea-line-height-base	Typography	Base line-height.
--kea-color-text	Color	Main text color.
--kea-color-muted	Color	Secondary/muted text and metadata color.
--kea-color-accent	Color	Accent/primary interactive color.
--kea-color-border	Color	Default border and active chip background color.
--kea-color-surface	Color	Primary surface/background and text-on-accent reference.
--kea-color-surface-alt	Color	Alternate surface for hover/background blocks.
--kea-color-danger	Color	Error/sale/highlight danger color.
--kea-radius-sm	Shape	Small radius for minor rounded elements.
--kea-radius-md	Shape	Main radius for cards/buttons/options.
--kea-shadow-panel	Elevation	Panel/dropdown shadow.
--kea-shadow-card	Elevation	Card shadow.
--kea-spacing-xs	Spacing	Compact spacing unit.
--kea-spacing-sm	Spacing	Small spacing unit.
--kea-spacing-md	Spacing	Medium spacing unit.
--kea-spacing-lg	Spacing	Large spacing unit.
--kea-products-gap	Layout	Grid row/column gap for product lists.
--kea-layout-gap	Layout	Base layout gap between main layout regions.
--kea-layout-facets-width	Layout	Facets column width hint.
--kea-layout-main-width	Layout	Main column sizing hint.
--kea-z-dropdown	Layers	Dropdown/search floating layer index.
--kea-z-overlay	Layers	Overlay/fullscreen layer index.

Example

[data-kea-view="search_box"] {
  --kea-color-accent: #1d4ed8;
  --kea-radius-md: 12px;
  --kea-products-gap: 20px;
}

If one block ignores token changes, add selector-level rules from DOM Markers Reference.