Styling

Layout CSS lives under .sdjs__. Brand colors are --sdjs-brand-* tokens on :root. Set overrides on the host page after the plugin stylesheet. Tokens on :root restyle the launcher and the pane without editing the compiled CSS.

<link rel="stylesheet" href="preferabli.searchdiscover.style.css" />
<style>
  :root {
    --sdjs-brand-primary: #323e48;
    --sdjs-brand-accent: #b6af9c;
    --sdjs-brand-on-primary: #fff;
  }
</style>

Quick brand override

These three cover a host brand. Everything in the next list follows them until you set that token yourself.

:root {
  --sdjs-brand-primary: #323e48;
  --sdjs-brand-accent: #b6af9c;
  --sdjs-brand-on-primary: #fff;
}

Search header text, search header icons, and footer text stay #fff. On a light primary, set these as well:

:root {
  --sdjs-brand-nav-header-font-color: #323e48;
  --sdjs-brand-nav-button-content-color: #323e48;
  --sdjs-brand-footer-content-color: #323e48;
}

Set a derived token only when that one surface should leave the palette:

:root {
  --sdjs-brand-tab-active-bg: #8e7d49;
  --sdjs-brand-fact-box-background-color: rgba(182, 175, 156, 0.15);
  --sdjs-brand-product-trait-icon-fill: #323e48;
  --sdjs-brand-product-scale-fill: #b6af9c;
}

Flavor and pairing tiles read --sdjs-brand-fact-box-background-color. That token follows accent mixed 15% with transparent.

Brand tokens

Core palette

--sdjs-brand-primary-light-10 is primary mixed 85% with white, and the launcher hover follows it. --sdjs-brand-primary-alpha-15 is primary mixed 15% with transparent, and the tab hover follows it. --sdjs-brand-accent-alpha-15 is accent mixed 15% with transparent, and the trait tiles follow it. Set the mix token to change that formula, or set the surface token (--sdjs-brand-btn-hover-bg, --sdjs-brand-tab-hover-bg, --sdjs-brand-fact-box-background-color) to replace the result.

Header, body, CTA, footer

Font tokens default to --sdjs-font.

Tabs, buttons, product details

Search results and product tabs both use .tabs--segmented. Tab label size is 14.4px in the stylesheet.

Layout tokens

--sdjs-* tokens control pane chrome. Color aliases follow the brand palette (--sdjs-color-text follows --sdjs-brand-surface-text, --sdjs-color-surface follows --sdjs-brand-surface).

:root {
  --sdjs-pane-width: min(36vw, 480px);
  --sdjs-font: "Source Sans 3", system-ui, sans-serif;
  --sdjs-z: 200000;
}

Below 576px (container query on .sdjs__overlay) the pane is 95vw and ignores --sdjs-pane-min-width.

What the classes cover

Plugin chrome uses the sdjs__ prefix. Cards, tabs, and product details use the class names below, scoped under .sdjs__ so they stay inside the plugin.

The launcher lives on the host element. The pane mounts on document.body inside #sdjs__root.

Host-page examples

Restyle the launcher without touching pane tokens:

.sdjs__launcher {
  border-radius: 999px;
  padding: 0.9rem 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Use a tinted search body, a tinted product body, and a wider desktop pane:

:root {
  --sdjs-color-canvas: #eef1f4;
  --sdjs-color-muted-surface: #e4e9ee;
  --sdjs-pane-width: min(44vw, 560px);
}

Match availability badges to a host inventory palette:

:root {
  --sdjs-brand-product-avail-instock-bg: transparent;
  --sdjs-brand-product-avail-instock-color: #0d6b3d;
  --sdjs-brand-product-avail-instock-border: #0d6b3d;
  --sdjs-brand-product-avail-outofstock-bg: transparent;
  --sdjs-brand-product-avail-outofstock-color: #8a2b2b;
  --sdjs-brand-product-avail-outofstock-border: #8a2b2b;
}