@westayltd/design-tokens

A comprehensive design token system for Westay applications, providing consistent colors, spacing, typography, and radius values across the platform.

Installation

npm install @westayltd/design-tokens

Usage

Import All Tokens

import { tokens } from '@westayltd/design-tokens';

// Access all tokens
const brandColor = tokens.colors.light.brand.crimson[500];
const spacing = tokens.spacing[4]; // "16px"
const fontSize = tokens.typography.fontSize.base; // "16px"
const borderRadius = tokens.radius.md; // "10px"

Import Individual Token Files

You can also import individual JSON files directly:

import colors from '@westayltd/design-tokens/colors';
import spacing from '@westayltd/design-tokens/spacing';
import typography from '@westayltd/design-tokens/typography';
import radius from '@westayltd/design-tokens/radius';

TypeScript Support

The package includes full TypeScript definitions:

import { tokens, ThemeMode, Tokens } from '@westayltd/design-tokens';

// Type-safe access
const mode: ThemeMode = 'light';
const color: string = tokens.colors[mode].brand.crimson[500];

Available Tokens

Colors

The color system supports both light and dark themes:

import { tokens } from '@westayltd/design-tokens';

// Light theme colors
tokens.colors.light.brand.crimson[500]      // "#F17878"
tokens.colors.light.brand.burgundy[500]     // "#D8A6AE"
tokens.colors.light.brand.royals[500]       // "#004484"
tokens.colors.light.brand.oldMoney[500]     // "#448E80"
tokens.colors.light.surface.bg              // Background colors
tokens.colors.light.text.primary            // Text colors
tokens.colors.light.feedback.success        // Feedback colors

// Dark theme colors
tokens.colors.dark.brand.crimson[500]
tokens.colors.dark.surface.bg
tokens.colors.dark.text.primary

Color Categories:

• Brand: Crimson, Burgundy, Royals, OldMoney
• Surface: Background, subtle, raised, border colors
• Text: Primary, secondary, muted, inverse
• Feedback: Success, error, warning, info

Spacing

Consistent spacing scale from 0 to 12:

tokens.spacing[0]   // "0px"
tokens.spacing[1]   // "4px"
tokens.spacing[2]   // "8px"
tokens.spacing[3]   // "12px"
tokens.spacing[4]   // "16px"
tokens.spacing[5]   // "20px"
tokens.spacing[6]   // "24px"
tokens.spacing[8]   // "32px"
tokens.spacing[10]  // "40px"
tokens.spacing[12]  // "48px"

Typography

Font families, sizes, weights, and line heights:

// Font Family
tokens.typography.fontFamily.sans  // ["Helvetica", "Arial", "sans-serif"]

// Font Sizes
tokens.typography.fontSize.xs      // "12px"
tokens.typography.fontSize.sm      // "14px"
tokens.typography.fontSize.base    // "16px"
tokens.typography.fontSize.lg      // "18px"
tokens.typography.fontSize.xl      // "20px"
tokens.typography.fontSize['2xl']  // "24px"
tokens.typography.fontSize['3xl']  // "30px"

// Font Weights
tokens.typography.fontWeight.regular  // "400"
tokens.typography.fontWeight.medium   // "500"
tokens.typography.fontWeight.semibold // "600"
tokens.typography.fontWeight.bold     // "700"

// Line Heights
tokens.typography.lineHeight.tight    // "1.2"
tokens.typography.lineHeight.normal   // "1.5"
tokens.typography.lineHeight.relaxed   // "1.7"

Radius

Border radius values:

tokens.radius.none  // "0px"
tokens.radius.sm     // "6px"
tokens.radius.md     // "10px"
tokens.radius.lg     // "14px"
tokens.radius.xl     // "20px"
tokens.radius.full   // "9999px"

Building the Package

To build the package from source:

cd design-tokens
npm install
npm run build

This will:

• Compile TypeScript to both CommonJS and ES Module formats
• Generate TypeScript declaration files (.d.ts)
• Generate source maps for debugging
• Output files to the dist/ directory

Development Mode

For development with watch mode:

npm run dev

This will automatically rebuild when source files change.

Package Structure

design-tokens/
├── colors.json          # Color tokens (light & dark themes)
├── spacing.json         # Spacing scale
├── typography.json      # Typography tokens
├── radius.json          # Border radius tokens
├── index.ts             # Main entry point
├── tsconfig.json        # TypeScript configuration
├── tsup.config.ts       # Build configuration
├── package.json         # Package metadata
└── dist/                # Built output
    ├── index.js         # ES Module build
    ├── index.cjs        # CommonJS build
    ├── index.d.ts       # TypeScript declarations
    └── *.map            # Source maps

Exports

The package exports:

• Main export: @westayltd/design-tokens - Full tokens object with TypeScript types
• Colors: @westayltd/design-tokens/colors - Colors JSON file
• Spacing: @westayltd/design-tokens/spacing - Spacing JSON file
• Typography: @westayltd/design-tokens/typography - Typography JSON file
• Radius: @westayltd/design-tokens/radius - Radius JSON file

TypeScript Types

The package exports the following TypeScript types:

import type {
  ThemeMode,    // "light" | "dark"
  Tokens,       // Complete tokens object type
  Colors,       // Colors type
  Spacing,      // Spacing type
  Typography,   // Typography type
  Radius        // Radius type
} from '@westayltd/design-tokens';

Version

Current version: 0.2.1

License

MIT