DEVELOPER GUIDE

Theming the Widget

Align the Flow widget with your brand using colours, radius, and fonts.

Pass a theme when you mount the widget to align it with your brand. The widget applies theme values as CSS custom properties on its shadow host. These properties restyle the widget. They do not leak into the rest of your page.

ZeptoFlow.mount('#zepto-flow', {
  token,
  action,
  theme: {
    colors: { brand: { default: '#0f62fe' } },
    radius: 8,
    fontFamily: { sans: 'Inter, ui-sans-serif, system-ui, sans-serif' },
  },
});

Invalid values fall back, they don't break

The theme object is strict and rejects unknown keys. But one invalid value, such as a malformed colour, does not throw. It falls back to the default and writes a console warning.

Colours

colors groups the widget's semantic colour tokens. Every value accepts any CSS colour string. These include hex, rgb(), hsl(), oklch(), or a named colour. All fields are optional. Set only the fields that you want to override.

Group	Tokens
`surface`	`base`, `sunken`, `overlay`, `inverse`
`border`	`default`
`content`	`default`, `strong`, `subtle`, `inverse`
`brand`	`default`, `onBrand`
`feedback`	`successSurface`, `successContent`, `errorSurface`, `errorContent`, `infoSurface`, `infoContent`

brand.default is the primary accent. It is the fastest single change to make the widget feel like yours.

Radius

radius sets the base corner radius. Smaller and larger radii derive from it.

A number is in pixels: radius: 8 → 8px.
A string is a CSS length: radius: '0.5rem'.

Fonts

fontFamily takes standard font-family lists:

theme: {
  fontFamily: {
    sans: 'Inter, ui-sans-serif, system-ui, sans-serif',
    mono: 'ui-monospace, SFMono-Regular, monospace',
  },
}

Full shape

theme: {
  colors?: {
    surface?:  { base?; sunken?; overlay?; inverse? };
    border?:   { default? };
    content?:  { default?; strong?; subtle?; inverse? };
    brand?:    { default?; onBrand? };
    feedback?: {
      successSurface?; successContent?;
      errorSurface?;   errorContent?;
      infoSurface?;    infoContent?;
    };
  };
  radius?: number | string;
  fontFamily?: { sans?: string; mono?: string };
}

See the SDK reference for the complete mount API.