Catalog
The webbloqs catalog is a Storybook-based component explorer for browsing, testing, and documenting all webbloqs elements and design tokens.
- Public: https://docs.webbloqs.io
- Internal (Quatico): https://catalog-test-webbloqs.internal.quatico.dev
Theme Customizations Panel
The Theme Customizations panel lets you override brand colors at runtime — no SCSS compilation needed. It lives in the Storybook bottom panel area under the "Theme Customizations" tab.
Controls
| Control | CSS Custom Property |
|---|---|
| Primary color | --wb-ds-color-brand--primary |
| Secondary color | --wb-ds-color-brand--secondary |
Each control has a native color picker and a hex text input that stay in sync. When no override is set, the color picker shows the theme's current computed value. The "Clear" button removes all overrides, letting the theme's own values apply.
How It Works
The full palette derives from these two brand properties via color-mix() — setting a new value cascades through all 11 shades instantly. See Theming for the token architecture.
Persistence
Colors are saved to localStorage (key: wb-catalog-theme-customizations) and restored on page reload. Clicking "Clear" removes all overrides and clears localStorage.