@televet/kibble-primitives

Framework-agnostic design token primitives for the Kibble design system.

Zero dependencies — no React, no Chakra UI. Plain TypeScript objects and types only.

Contents

core/ — Raw token scales

| Category | Description | |----------|-------------| | colors | Core color palette (coreColors: primary, secondary, neutral, danger, etc.) | | spacing | Spacing scale | | sizes | Size scale and breakpoints | | typography | Fonts, font sizes, weights, line heights, letter spacings | | borders | Border widths and radii | | shadows | Box shadow values | | blurs | Blur values | | transitions | Duration and easing values | | zIndices | Z-index scale |

semantic/ — Theme-aware tokens

Semantic color tokens with _light/_dark mode values. Maps core color scales to semantic roles (background.primary, text.contrast, etc.).

Imports

// Full barrel
import { coreColors, SemanticColorScheme } from '@televet/kibble-primitives';

// Category subpath (preferred for tree-shaking)
import { coreColors, CoreColor } from '@televet/kibble-primitives/core/colors';
import { spacing, Space } from '@televet/kibble-primitives/core/spacing';

// All core tokens
import { ... } from '@televet/kibble-primitives/core';

// Semantic tokens
import { semanticColorTokenRecord, invertToken } from '@televet/kibble-primitives/semantic';

Building

npm run build   # from packages/kibble-primitives/

Outputs dual CJS/ESM + TypeScript declarations to dist/.

Package boundary

• *.records.ts and *.types.ts → live here in kibble-primitives
• *.config.ts (Chakra defineTokens/defineSemanticTokens wrappers) → stay in @televet/kibble-ui