B3 Swatches Article
Variation Chips & Container Styling
Set the selected-state color, style the swatch wrapper, and tune dual-color cut and gradient behavior.
Variation chip styling controls how the selector feels on the page. The active state highlights the current option, the wrapper can be given its own surface, and dual-color settings change how paired colors are drawn.
Browse docs
On this page
Selected state
Use selected chip color to make the active option obvious without overwhelming the page.
Selected Color is the main active-state signal the plugin uses when a
choice is picked. Keep it obvious, but still compatible with the theme and
the swatch type underneath it.
Container surface
Adjust the background, border, and radius around the swatch group when it needs more separation.
Enable Dropdown Background styles the wrapper around the whole swatch
group, not the individual chips. It is useful when the variation area needs
a little more separation from the rest of the form.
- Background
- Adds a surface behind the swatch group so the selector reads as one unit.
- Border
- Control border width, type, and color when the wrapper needs more definition.
- Radius
- Match the wrapper radius to the rest of the theme so the selector does not look bolted on.
Dual-color rendering
Choose the cut direction and blend style for two-tone swatches.
Once dual-color support is enabled, the chip renderer can split a swatch
into two tones. Use Dual Color Cut to control the direction of the split
and Dual Color Gradient to choose between a hard cut and a softer blend.