@litforge/tokens

Design tokens for the LitForge component library, providing a consistent design system.

Overview

@litforge/tokens exports a comprehensive set of design tokens including colors, typography, spacing, shadows, and component-specific tokens. These tokens can be used to maintain consistency across all LitForge components.

Installation

npm install @litforge/tokens
# or
pnpm add @litforge/tokens
# or
yarn add @litforge/tokens

Usage

JavaScript/TypeScript

import { tokens } from '@litforge/tokens';

// Access tokens
const primaryColor = tokens.color.accent;
const baseFontSize = tokens.font.sizeBase;
const spacingMd = tokens.space.md;

CSS Variables

The tokens are designed to work with CSS variables. You can set them globally:

:root {
  --lf-color-accent: #0b6efd;
  --lf-color-text: #0f172a;
  --lf-space-md: 12px;
  --lf-radius-md: 12px;
  /* ... */
}

Token Categories

Colors

• background: Main background color
• surface: Surface/card background
• surfaceMuted: Muted surface color
• text: Primary text color
• textMuted: Muted text color
• helper: Helper text color
• accent: Primary accent color
• accentMuted: Muted accent color
• accentStrong: Strong accent color
• border: Border color
• error: Error color
• errorSurface: Error surface color
• success: Success color
• warning: Warning color

Typography

• family: Font family
• sizeBase: Base font size
• lineHeightBase: Base line height

Spacing

• xs, sm, md, lg, xl, 2xl: Spacing scale

Radius

• xs, sm, md, lg, full: Border radius scale

Shadows

• xs, sm, md: Shadow scale

Component Tokens

Component-specific tokens for:

• Cards
• Buttons
• Inputs
• And more...

Examples

Using in JavaScript

import { tokens } from '@litforge/tokens';

// Apply tokens programmatically
element.style.color = tokens.color.text;
element.style.padding = tokens.space.md;
element.style.borderRadius = tokens.radius.md;

Using in CSS

.my-component {
  background: var(--lf-color-surface);
  color: var(--lf-color-text);
  padding: var(--lf-space-lg);
  border-radius: var(--lf-radius-md);
  box-shadow: var(--lf-shadow-sm);
}

Custom Theme

You can override tokens to create custom themes:

:root {
  --lf-color-accent: #your-color;
  --lf-space-md: 16px;
  /* Override any token */
}

TypeScript Support

Fully typed with TypeScript:

import type { TokenDefinition } from '@litforge/tokens';

License

Part of the LitForge component library.