@multichoice/core

Core utilities, tokens, and types for the Multichoice Design System.

Installation

npm install @multichoice/core

What's Included

This package provides the foundational elements for the Multichoice Design System:

🎨 Design Tokens

• Colors: Brand colors, semantic colors, and theme variations
• Typography: Font families, sizes, weights, and line heights
• Spacing: Consistent spacing scale for margins, padding, and layouts

🔧 Utilities

• Helper functions for working with design tokens
• Common utility functions used across components

📝 Types

• TypeScript type definitions for all design system elements
• Type-safe interfaces for components and tokens

Usage

import { colors, typography, spacing } from '@multichoice/core';

// Using design tokens
const primaryColor = colors.primary;
const headingFont = typography.heading.fontFamily;
const mediumSpacing = spacing.md;

API Reference

Colors

Access brand and semantic colors:

import { colors } from '@multichoice/core';

// Brand colors
colors.primary
colors.secondary

// Semantic colors
colors.success
colors.warning
colors.error
colors.info

Typography

Use consistent typography tokens:

import { typography } from '@multichoice/core';

// Font families
typography.heading.fontFamily
typography.body.fontFamily

// Font sizes
typography.heading.sizes.large
typography.body.sizes.medium

Spacing

Apply consistent spacing:

import { spacing } from '@multichoice/core';

// Spacing scale
spacing.xs  // Extra small
spacing.sm  // Small
spacing.md  // Medium
spacing.lg  // Large
spacing.xl  // Extra large

Requirements

• TypeScript 5.0+
• Node.js 18+

License

MIT