@fortune-kit/tokens

Design tokens package — single source of truth for Fortune Kit's visual language.

Installation

pnpm add @fortune-kit/tokens

Exports

JavaScript/TypeScript

import {
  colors,
  typography,
  spacing,
  motion,
  radius,
  shadows,
  tokens  // All tokens combined
} from '@fortune-kit/tokens'

// Types
import type {
  Colors,
  Typography,
  Spacing,
  Motion,
  Radius,
  Shadows,
  Tokens
} from '@fortune-kit/tokens'

CSS Variables

import '@fortune-kit/tokens/css'

Colors

const colors = {
  background: {
    DEFAULT: '#09090b',
    secondary: '#18181b',
    tertiary: '#27272a'
  },
  foreground: {
    DEFAULT: '#fafafa',
    muted: '#a1a1aa',
    subtle: '#71717a'
  },
  primary: {
    50: '#fffbeb',
    // ... 100-800
    900: '#78350f',
    DEFAULT: '#f59e0b'
  },
  win: {
    DEFAULT: '#22c55e',
    muted: '#16a34a',
    background: 'rgba(34, 197, 94, 0.1)'
  },
  lose: {
    DEFAULT: '#ef4444',
    muted: '#dc2626',
    background: 'rgba(239, 68, 68, 0.1)'
  },
  info: {
    DEFAULT: '#3b82f6',
    muted: '#2563eb',
    background: 'rgba(59, 130, 246, 0.1)'
  },
  accent: {
    purple: '#a855f7',
    cyan: '#06b6d4',
    pink: '#ec4899'
  },
  border: {
    DEFAULT: '#27272a',
    muted: '#3f3f46'
  }
}

Motion

const motion = {
  duration: {
    instant: '50ms',
    fast: '100ms',
    normal: '200ms',
    slow: '300ms',
    slower: '500ms'
  },
  easing: {
    linear: 'linear',
    ease: 'ease',
    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
    easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
    easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
    bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
    spin: 'cubic-bezier(0.25, 0.1, 0.25, 1)'
  }
}

CSS Variable Reference

All tokens are exported as CSS custom properties:

:root {
  /* Colors */
  --fk-color-background-DEFAULT: #09090b;
  --fk-color-win-DEFAULT: #22c55e;
  --fk-color-primary-DEFAULT: #f59e0b;

  /* Spacing */
  --fk-space-1: 0.25rem;
  --fk-space-4: 1rem;
  --fk-space-8: 2rem;

  /* Motion */
  --fk-duration-fast: 100ms;
  --fk-duration-normal: 200ms;
  --fk-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Radius */
  --fk-radius-sm: 0.25rem;
  --fk-radius-lg: 0.75rem;
  --fk-radius-full: 9999px;
}