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 when data-theme="endui" is on <html>, or when the page loads css/endui-scoped | Graphic main / line art (Brand 100 in dark) |
--catnip-graphic-accent | var(--catnip-color-accent-300) | follows accent remap (--catnip-color-accent-300 is Steel 200) | Graphic accent fills (Brand 600 in dark) |
--catnip-logo-background | var(--catnip-color-brand-900) | follows brand remap when data-theme="endui" is on <html>, or when the page loads css/endui-scoped | Signicat lockup blob (+ adjacent product name) |
--catnip-logo-content | var(--catnip-color-base-white) | same | Letter fills on the logo background |
--catnip-hero-primary | var(--catnip-color-brand-900) | follows brand remap when data-theme="endui" is on <html>, or when the page loads css/endui-scoped | Hero illustration primary fills |
--catnip-hero-accent | var(--catnip-color-accent-300) | follows accent remap (--catnip-color-accent-300 is Steel 200) | Hero illustration accent fills |
--catnip-hero-stroke | var(--catnip-color-base-white) | same | Hero illustration strokes |
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.
Graphics 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.
Hero illustrations use --catnip-hero-primary, --catnip-hero-accent, and --catnip-hero-stroke. Light and dark share those values (Brand 900, Accent 300, white). EndUI still remaps primary and accent through brand and --catnip-color-accent-300.
Signicat logos under illustrations/signicat-logos/ paint with --catnip-logo-background / --catnip-logo-content. Defaults are purple + white (light page). On a brand navbar, override the same two variables:
.brand-nav {
--catnip-logo-background: var(--catnip-color-content-on-primary);
--catnip-logo-content: var(--catnip-color-background-primary-strong);
}That yields a white logo with letters matching the brand surface (knockout). The SVG must be inlined (e.g. catnip-graphic) for the CSS variables to apply.
Related
- Radius tokens — primitive scale (
--catnip-radius-*) - Theming — light, dark, EndUI, and how to override variables
- Design tokens overview