Your brand, down to the tokens.

Every surface, state, and control shares a semantic token system. Start with the built-in themes, then change only what your product needs.

Theme

<StaqProvider theme="dark">
  <YourApplication />
</StaqProvider>

Dialogs, menus, popovers and tooltips carry their provider’s theme into their portals. The header theme toggle applies to all examples.

Override semantic tokens

.my-brand {
  --sq-accent: oklch(40% .1 240);
  --sq-accent-hover: oklch(33% .1 240);
  --sq-accent-ink: oklch(99% .003 240);
  --sq-focus: oklch(48% .15 260);
  --sq-radius-medium: 6px;
}

.my-brand[data-staq-theme="dark"] {
  --sq-accent: oklch(80% .08 240);
  --sq-accent-ink: oklch(20% .02 240);
}

Apply the class to StaqProvider. For custom overrides inside portals, also target .sq-modal, .sq-menu, .sq-popover and .sq-tooltip with the same token overrides, or declare brand tokens globally. Theme propagate automatically; arbitrary provider-only CSS overrides do not cross the DOM portal boundary.

Token groups

The stylesheet is the canonical token list. After changing colors, test text contrast, control boundaries, focus rings, error states, and portal surfaces in both themes.