Ooko
Playground

CSS token customization ​

Ooko exposes --o-* CSS custom properties for the visual decisions applications are expected to customize. No Sass or JavaScript configuration is required.

1. Load overrides after Ooko ​

The order is important: import Ooko first, then the application theme.

ts
import "ooko-ui/style.css";
import "./ooko-theme.css";

2. Override semantic tokens globally ​

Create ooko-theme.css and assign tokens on :root:

css
:root {
  --o-radius-control: var(--o-radius-lg);
  --o-radius-surface: var(--o-radius-xl);
  --o-control-form-height-md: 2.75rem;
}

Semantic tokens are preferable to repeating the same component override. Here, every control that consumes --o-radius-control follows the new radius.

3. Scope an override ​

Place tokens on a container when only part of the interface should change:

css
.checkout-panel {
  --o-button-border-radius: var(--o-radius-full);
  --o-field-control-border-radius: var(--o-radius-lg);
}

Only Ooko components inside .checkout-panel inherit these values.

4. Customize light and dark themes ​

Use Ooko's explicit theme selectors for theme-specific values:

css
[data-ooko-theme="light"] {
  --o-color-primary-500: #6558d3;
}

[data-ooko-theme="dark"] {
  --o-color-primary-500: #9b8afb;
}

Override the complete shade scale when changing a palette so text, backgrounds, hover states, and contrast remain coherent. See Colors for the palette contract and Theme for automatic and explicit theme selection.

5. Find component-specific tokens ​

Every component page lists only its supported public custom properties and includes a focused override example. Internal color channels are deliberately not customization API.

Token layers and precedence ​

Ooko declares its defaults in cascade layers. A normal, unlayered stylesheet loaded afterward overrides the documented tokens without selector duplication or !important.