@lioncore/tokens
v0.1.2
Published
Design tokens for the LionCore design system — colors, spacing, radius, typography, shadows, and data visualization palettes
Maintainers
willhgoffReadme
@lioncore/tokens
Design tokens for the LionCore design system, covering colors, spacing, border radius, typography, shadows, and data visualization palettes. Ships as JavaScript/TypeScript exports, a CSS custom properties stylesheet, and an optional Tailwind CSS preset.
Install
npm install @lioncore/tokens
# or
pnpm add @lioncore/tokensUsage
CSS custom properties (recommended)
Import the token stylesheet to get all CSS variables with automatic Midnight (dark) and Light theme support:
@import '@lioncore/tokens/css';Then use variables in your styles:
.card {
background: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border-primary);
border-radius: var(--radius-md);
}Switch themes by setting data-theme="light" on a parent element (defaults to Midnight):
<html data-theme="light">Font loading
If your project uses the Volte typeface, import the font stylesheet separately:
@import '@lioncore/tokens/css/fonts';JavaScript / TypeScript
Import token primitives directly for use in JS-based styling solutions:
import { gray, stardust, spacing, radius, fontSize } from '@lioncore/tokens'
console.log(gray[900]) // '#141b1f'
console.log(spacing.lg) // '12px'
console.log(radius.md) // '8px'Tailwind CSS preset
Extend your tailwind.config with the LionCore preset to get all tokens mapped as Tailwind utilities (prefixed with cai-):
// tailwind.config.js
import lioncorePreset from '@lioncore/tokens/tailwind'
export default {
presets: [lioncorePreset],
// ...
}This gives you classes like cai-bg-primary, cai-text-secondary, cai-rounded-md, etc.
What's included
| Category | Tokens |
|---|---|
| Colors | Primitives (gray, stardust, red, yellow, green, blue), semantic aliases (text, icon, border, background), brand, status, surfaces, gradients |
| Spacing | 17 steps from none (0) to 11xl (160px) |
| Border radius | 11 steps from none (0) to full (9999px) |
| Typography | Font families (sans, mono), 10 font sizes, 3 weights, 14 icon sizes |
| Shadows | 3 levels: shallow, medium, deep |
| Data Viz | 5 DV palettes (teal, pink, orange, lavender, lime), 30 qualitative tokens, 31 sequential tokens |
| Component | Accent, badge, and component-level tokens for buttons, inputs, alerts, etc. |
Theming
All semantic tokens resolve to different values based on theme:
- Midnight (default): Dark theme, defined in
:root - Light: Light theme, activated via
[data-theme="light"]
License
MIT