Component tokens
Component tokens are named for a control (for example --catnip-button-radius) but defined on :root in @signicat/catnip-design-tokens. Themes override the same variables; component SCSS only consumes them.
For the theming rules and EndUI / whitelabel activation, see Theming — Component tokens and Theming — EndUI.
Pattern
- Defaults always exist on
:root(Signicat look). - Themes (for example EndUI) override the same CSS variables under
[data-theme="…"]. - Use a leaf name first:
button.radius→--catnip-button-radius. Add a suffix only when a second value is needed (button.radius.utility→--catnip-button-radius-utility). - Prefer semantic color tokens for color; add component color tokens only when a control needs a mapping semantic cannot express.
Source JSON lives under packages/design-tokens/src/tokens/component/.
Shipped tokens
| Token | Default (:root) | EndUI (data-theme="endui") | Used by |
|---|---|---|---|
--catnip-button-radius | var(--catnip-radius-round) | var(--catnip-radius-s) | Button with purpose="main" |
Button purpose="utility" still uses the global --catnip-radius-s scale step. A second component token (for example --catnip-button-radius-utility) is only added if a theme needs to diverge from that.
Related
- Radius tokens — primitive scale (
--catnip-radius-*) - Theming — light, dark, EndUI, and how to override variables
- Design tokens overview