Styling

Sledge widgets are styled in three layers. Understanding which layer you need is the difference between a one-line change and a fight with specificity.

Start with tokens

Before writing selectors, try overriding Sledge's design tokens. They are CSS custom properties, they cascade into every widget, and they cannot break when internal markup changes.

:host {
  --sledge-color-primary: #1a1a1a;
  --sledge-radius: 6px;
  --sledge-font-family: Inter, sans-serif;
}

:host inside Custom CSS refers to the widget element the stylesheet is applied to, so a :host rule reaches every widget at once. That makes it the right place for anything global — a font family, a base color, a radius.

Then target components

If tokens are not enough, write rules against the widget's internal structure:

.product-card {
  border: 1px solid #dedede;
  border-radius: 6px;
  overflow: hidden;
}

.product-card .product-title {
  font-size: 13px;
  letter-spacing: 2px;
}

This is the escape hatch tier — internal class names can change between releases. It works, it is how most real customization gets done, but keep a note of where you rely on it.

Styling the widget element itself

Custom CSS is applied inside widgets, so it cannot style the widget elements in your theme's DOM. Anything about a widget's own layout — its alignment, width, margins, whether it is displayed at all — has to be injected at document level from Custom JavaScript:

SledgeCC.style('search-width', 'sledge-search-bar{flex:1 1 100%;max-width:none}')

See Custom code for the helper.

Matching a theme Sledge doesn't have a template for

If Sledge ships a tuned template for your theme, widgets already match. If not, work in this order:

1. Tokens — set the font, primary color and radius. This alone usually gets close.
2. Component rules — adjust card borders, spacing and typography to match your theme's own product card.
3. Custom Components — if the structure is fundamentally different, replace the markup rather than fighting it with CSS.

Option 3 is often less work than a long stylesheet, and it is more durable, because you own the markup instead of overriding someone else's.