Theming and styling

Start at the lowest level that works

• Theme values. Semantic tokens (colours, spacing, radii, type) restyle every element at once, with no JavaScript.
• Component variables, parts, and states. Each element documents its --odd-<element>-* variables, ::part() names, and custom states in its reference page.
• Your own skin. Every component also exports a foundation entry, @oddkin/components/<name>/foundation: its behaviour, template, and structural styles, for your visual styles under your own tag.

Every element’s reference lists the levels it supports (Components).

Scopes and overrides

The generated tokens sit in the odd.tokens cascade layer, so unlayered page CSS overrides them. Theme, mode, product, and density scopes are attributes; they nest in any order and reach into shadow roots, because tokens are inherited custom properties.

.marketing {
  --odd-color-text-primary: #1e1b4b;
  --odd-radius-md: 0;
}

Style one component

Page selectors never reach inside a component. Use its documented hooks: a variable on the host, a part, or a custom state.

odd-button.cta {
  --odd-button-radius: var(--odd-radius-full);
}
odd-input:state(user-invalid)::part(control) {
  outline: 2px solid var(--odd-color-danger-foreground);
}