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" |
--catnip-graphic-primary | var(--catnip-color-brand-900) | follows brand remap (color.brand.* → blue) | Graphic main / line art |
--catnip-graphic-accent | var(--catnip-color-accent-green-300) | var(--catnip-color-steel-50) | Graphic accent fills |
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.
Graphic heroes use --catnip-graphic-primary for primary and --catnip-graphic-accent for accent (Signicat Brand 900 purple by default). Override those same variables on the host or an ancestor when you need a one-off.
Related
- Radius tokens — primitive scale (
--catnip-radius-*) - Theming — light, dark, EndUI, and how to override variables
- Design tokens overview