@coreforge/design-tokens¶

Design system tokens for consistent styling.

Installation¶

pnpm add @coreforge/design-tokens

Features¶

Color palette with semantic tokens
Typography scale
Spacing scale
Breakpoints
Shadows
Border radii
Z-index scale
CSS custom properties
Tailwind CSS preset

Usage¶

Direct Import¶

import { colors, spacing, typography } from '@coreforge/design-tokens';

const styles = {
  color: colors.primary[500],
  padding: spacing[4],
  fontSize: typography.sizes.lg,
};

CSS Custom Properties¶

.button {
  background-color: var(--cf-color-primary-500);
  padding: var(--cf-spacing-4);
  font-size: var(--cf-font-size-lg);
  border-radius: var(--cf-radius-md);
}

With Tailwind CSS¶

// tailwind.config.js
import { tailwindPreset } from '@coreforge/design-tokens';

export default {
  presets: [tailwindPreset],
  // your config...
};

Tokens¶

Colors¶

import { colors } from '@coreforge/design-tokens';

colors.primary[500]    // Primary brand color
colors.secondary[500]  // Secondary color
colors.success[500]    // Success states
colors.warning[500]    // Warning states
colors.error[500]      // Error states
colors.gray[500]       // Neutral gray

Typography¶

import { typography } from '@coreforge/design-tokens';

typography.sizes.xs    // 12px
typography.sizes.sm    // 14px
typography.sizes.base  // 16px
typography.sizes.lg    // 18px
typography.sizes.xl    // 20px
typography.sizes['2xl'] // 24px
typography.sizes['3xl'] // 30px

typography.weights.normal    // 400
typography.weights.medium    // 500
typography.weights.semibold  // 600
typography.weights.bold      // 700

typography.lineHeights.tight   // 1.25
typography.lineHeights.normal  // 1.5
typography.lineHeights.relaxed // 1.75

Spacing¶

import { spacing } from '@coreforge/design-tokens';

spacing[0]   // 0
spacing[1]   // 4px
spacing[2]   // 8px
spacing[3]   // 12px
spacing[4]   // 16px
spacing[6]   // 24px
spacing[8]   // 32px
spacing[12]  // 48px
spacing[16]  // 64px

Breakpoints¶

import { breakpoints } from '@coreforge/design-tokens';

breakpoints.sm   // 640px
breakpoints.md   // 768px
breakpoints.lg   // 1024px
breakpoints.xl   // 1280px
breakpoints['2xl'] // 1536px

Shadows¶

import { shadows } from '@coreforge/design-tokens';

shadows.sm     // Small shadow
shadows.md     // Medium shadow
shadows.lg     // Large shadow
shadows.xl     // Extra large shadow

Border Radii¶

import { radii } from '@coreforge/design-tokens';

radii.none    // 0
radii.sm      // 2px
radii.md      // 4px
radii.lg      // 8px
radii.xl      // 12px
radii.full    // 9999px

Z-Index¶

import { zIndex } from '@coreforge/design-tokens';

zIndex.dropdown   // 1000
zIndex.sticky     // 1100
zIndex.modal      // 1200
zIndex.popover    // 1300
zIndex.tooltip    // 1400

CSS Variables¶

All tokens are available as CSS custom properties:

:root {
  --cf-color-primary-500: #6366f1;
  --cf-spacing-4: 16px;
  --cf-font-size-lg: 18px;
  --cf-radius-md: 4px;
  --cf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}