@codeandfunction/callaloo-tokens

Shared design tokens and theme logic for the Callaloo UI library.

This package serves as the "Brain" of the Callaloo design system, containing platform-agnostic visual constants (colors, spacing, radii) and the logic to resolve them into functional theme objects.

Installation

# pnpm
pnpm add @codeandfunction/callaloo-tokens

# npm
npm install @codeandfunction/callaloo-tokens

# yarn
yarn add @codeandfunction/callaloo-tokens

Features

• Visual Tokens: Platform-agnostic enums and constants for colors, sizes, icons, etc.
• Palettes: Raw hex/numeric values for the default theme and spacing scales.
• Theme Logic: Standardized logic for mapping color variants (Solid, Soft, Outline, etc.) to specific shades.
• Utilities: Platform-agnostic deep merging for theme customization.

Example usage

Resolving Theme Colors

import { getColorValues, CLColors, CLColorVariants } from '@codeandfunction/callaloo-tokens';

// Get color values for a 'Solid' Primary button
const colors = getColorValues({
  color: CLColors.Primary,
  variant: CLColorVariants.Solid,
  isDarkMode: false
});

console.log(colors.background); // "#640100" (Primary 700)
console.log(colors.text);       // "#FFFFFF"

Custom Theme Merging

import { deepMerge, DEFAULT_THEME } from '@codeandfunction/callaloo-tokens';

const customTheme = deepMerge(DEFAULT_THEME, {
  colors: {
    primary: {
      500: '#ff0000' // Override the main primary color
    }
  }
});