Design Tokens Guide

npm install @artisanpack-ui/tokens

@import "@artisanpack-ui/tokens/css";

import { colors, colorsDark, daisyColors } from '@artisanpack-ui/tokens';

// Available semantic colors
// 'primary' | 'secondary' | 'accent' | 'neutral' |
// 'info' | 'success' | 'warning' | 'error' |
// 'base-100' | 'base-200' | 'base-300' | 'base-content'

import { resolveColor, resolveContentColor, resolveAllColors } from '@artisanpack-ui/tokens';

// Resolve a single color to its hex value
const hex = resolveColor('primary'); // e.g. '#570df8'

// Get the content (text) color for a semantic color
const textHex = resolveContentColor('primary'); // e.g. '#ffffff'

// Resolve multiple colors at once
const all = resolveAllColors(['primary', 'secondary', 'accent']);

import type { DaisyColor } from '@artisanpack-ui/tokens';

function MyComponent({ color }: { color: DaisyColor }) {
  // ...
}

import { spacing, spacingAliases } from '@artisanpack-ui/tokens';

spacing[0];   // '0px'
spacing[1];   // '0.25rem'
spacing[2];   // '0.5rem'
spacing[4];   // '1rem'
spacing[8];   // '2rem'
spacing[16];  // '4rem'

import { fontFamilies } from '@artisanpack-ui/tokens';

fontFamilies.sans;  // System sans-serif stack
fontFamilies.serif; // System serif stack
fontFamilies.mono;  // System monospace stack

import { fontSizes, fontWeights, lineHeights } from '@artisanpack-ui/tokens';

fontSizes.sm;   // '0.875rem'
fontSizes.base; // '1rem'
fontSizes.lg;   // '1.125rem'
fontSizes.xl;   // '1.25rem'

fontWeights.normal;   // '400'
fontWeights.medium;   // '500'
fontWeights.semibold; // '600'
fontWeights.bold;     // '700'

import { typographyPresets } from '@artisanpack-ui/tokens';

// Each preset includes fontSize, fontWeight, lineHeight, letterSpacing
typographyPresets.h1;
typographyPresets.h2;
typographyPresets.body;
typographyPresets.caption;

import { borderRadius, daisyRadius } from '@artisanpack-ui/tokens';

borderRadius.sm;   // '0.125rem'
borderRadius.md;   // '0.375rem'
borderRadius.lg;   // '0.5rem'
borderRadius.full; // '9999px'

import { shadows, shadowsDark, coloredShadows, glowShadows } from '@artisanpack-ui/tokens';

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

// Dark mode variants
shadowsDark.sm;

// Colored shadows (keyed by DaisyUI color)
coloredShadows.primary;

// Glow effects
glowShadows.primary;

import { durations, easings, expressiveEasings, transitionProperties } from '@artisanpack-ui/tokens';

durations.fast;    // '150ms'
durations.normal;  // '300ms'
durations.slow;    // '500ms'

easings.ease;      // Standard easing
easings.easeIn;    // Ease-in curve
easings.easeOut;   // Ease-out curve

import { glassClassName, glassStyles } from '@artisanpack-ui/tokens';
import type { GlassPreset } from '@artisanpack-ui/tokens';

// Generate a CSS class string for a glass effect
const className = glassClassName({ preset: 'frosted', tint: 'primary' });

// Or get inline style objects
const style = glassStyles({ preset: 'liquid', blur: 12, opacity: 0.3 });

import { cn } from '@artisanpack-ui/tokens';

cn('btn', 'btn-primary');           // 'btn btn-primary'
cn('p-4', condition && 'p-8');      // 'p-8' if condition is true
cn('text-red-500', 'text-blue-500'); // 'text-blue-500' (Tailwind merge resolves conflicts)

// tailwind.config.ts (or CSS-based for v4)
import { createArtisanPackPlugin } from '@artisanpack-ui/tokens/tailwind';

import type { Size, GlassProps, ColorProps, FormFieldProps } from '@artisanpack-ui/tokens';

// Size = 'xs' | 'sm' | 'md' | 'lg'
// GlassProps — Props for glass morphism styling
// ColorProps — Props for color-aware components
// FormFieldProps — Common form field props (label, hint, error)