@web-engine-dev/design-tokens

Visual design language for the editor UI. Defines colors, typography, spacing, shadows, border radii, and animation curves as CSS custom properties and TypeScript constants for consistent editor theming.

Layer 8 · Content

Features

• Color Palette: Semantic color tokens (surface, text, accent, error, warning, success)
• Dark & Light Themes: Complete token sets for both themes with smooth transitions
• Typography Scale: Font families, sizes, weights, and line heights
• Spacing Scale: Consistent spacing values (4px base unit)
• Elevation System: Shadow tokens for layered depth (panels, dropdowns, modals)
• Border Radii: Consistent corner rounding tokens
• Animation Curves: Timing functions and durations for UI transitions
• Icon Set: Monochrome icon tokens with size variants
• CSS Custom Properties: Runtime theme switching via property overrides
• TypeScript Constants: Type-safe access to all tokens in code

Installation

npm install @web-engine-dev/design-tokens
# or
pnpm add @web-engine-dev/design-tokens

Quick Start

import { tokens, applyTheme } from '@web-engine-dev/design-tokens';

// Apply dark theme
applyTheme('dark');

// Access tokens in TypeScript
const panelBg = tokens.color.surface.primary; // '#1e1e1e'
const textColor = tokens.color.text.primary; // '#cccccc'
const spacing = tokens.spacing.md; // '12px'
const radius = tokens.radius.md; // '6px'

/* Use tokens in CSS */
.panel {
  background: var(--surface-primary);
  color: var(--text-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
}

Token Categories

Category	Examples	Format
Color	surface.primary, text.secondary, accent.blue	Hex, HSL
Typography	font.mono, size.sm, weight.bold	px, rem
Spacing	spacing.xs (4px) through spacing.xxl (48px)	px
Elevation	elevation.1 through elevation.5	CSS shadow
Radius	radius.sm (2px) through radius.full (9999px)	px
Animation	duration.fast (100ms), easing.standard	ms, cubic-bezier

Dependencies

None — design tokens are a standalone package with zero runtime dependencies.