@framingui/core

Installation

npm install @framingui/core

generateTokens

Generate CSS custom properties from a theme configuration.

import { generateTokens } from '@framingui/core';

const tokens = generateTokens({
  theme: 'editorial-tech',
  format: 'css', // 'css' | 'scss' | 'json'
});

// Returns CSS custom properties:
// --color-brand-500: oklch(0.55 0.00 0);
// --spacing-md: 1rem;
// ...

parseTheme

Parse a theme JSON file and validate its structure.

import { parseTheme } from '@framingui/core';

const theme = parseTheme(themeJson);

// Returns validated theme object with:
// - tokens.atomic.color
// - tokens.atomic.typography
// - tokens.atomic.spacing
// - tokens.semantic.*

oklchToHex

Convert OKLCH color values to hex format.

import { oklchToHex } from '@framingui/core';

const hex = oklchToHex({ l: 0.55, c: 0.15, h: 250 });
// Returns: '#4a6fd4'

validateWCAG

Check color contrast ratio for WCAG compliance.

import { validateWCAG } from '@framingui/core';

const result = validateWCAG({
  foreground: { l: 0.2, c: 0, h: 0 },
  background: { l: 0.98, c: 0, h: 0 },
  level: 'AA', // 'AA' | 'AAA'
});

// Returns:
// { 
//   pass: true, 
//   ratio: 12.5,
//   level: 'AAA'
// }

Types

interface OKLCHColor {
  l: number; // Lightness: 0-1
  c: number; // Chroma: 0-0.4
  h: number; // Hue: 0-360
}

interface ThemeConfig {
  id: string;
  name: string;
  schemaVersion: string;
  brandTone: 'mono' | 'warm' | 'cool' | 'vibrant';
  tokens: {
    atomic: AtomicTokens;
    semantic: SemanticTokens;
  };
}