@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/src/ui/tokens/colors/types.ts

@@ -0,0 +1,221 @@
+/**
+ * AIppin Design System - Color Token Types
+ *
+ * TypeScript types for the color system.
+ *
+ * @brand AIppin
+ * @version 1.0.0
+ */
+
+/**
+ * Color scale values (50-950)
+ * Standard Tailwind-compatible color scale
+ */
+export type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+
+/**
+ * All available color scale values as array
+ */
+export const COLOR_SCALES: ColorScale[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+/**
+ * Primitive color names (raw color palettes)
+ */
+export type PrimitiveColorName =
+  | 'indigo'
+  | 'violet'
+  | 'cyan'
+  | 'slate'
+  | 'gray'
+  | 'emerald'
+  | 'green'
+  | 'amber'
+  | 'yellow'
+  | 'orange'
+  | 'rose'
+  | 'red'
+  | 'sky'
+  | 'blue'
+  | 'fuchsia'
+  | 'pink'
+  | 'purple'
+  | 'teal'
+  | 'lime';
+
+/**
+ * Semantic color names (meaningful colors)
+ */
+export type SemanticColorName =
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'neutral';
+
+/**
+ * Text color semantic names
+ */
+export type TextColorName =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'quaternary'
+  | 'placeholder'
+  | 'disabled'
+  | 'inverse'
+  | 'link'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info';
+
+/**
+ * Background color semantic names
+ */
+export type BgColorName =
+  | 'base'
+  | 'subtle'
+  | 'muted'
+  | 'emphasis'
+  | 'strong'
+  | 'inverse'
+  | 'brand'
+  | 'secondary'
+  | 'accent';
+
+/**
+ * Border color semantic names
+ */
+export type BorderColorName =
+  | 'default'
+  | 'muted'
+  | 'subtle'
+  | 'emphasis'
+  | 'strong'
+  | 'focus'
+  | 'brand';
+
+/**
+ * State color names
+ */
+export type StateColorName =
+  | 'hover'
+  | 'active'
+  | 'selected'
+  | 'disabled'
+  | 'focus';
+
+/**
+ * Theme mode
+ */
+export type ThemeMode = 'light' | 'dark';
+
+/**
+ * Theme variant (visual style)
+ */
+export type ThemeVariant = 'tech' | 'creative' | 'minimal';
+
+/**
+ * Single color token with multiple formats
+ */
+export interface ColorToken {
+  /** Hex color value (e.g., #6366f1) */
+  hex: string;
+  /** RGB values as string (e.g., "99, 102, 241") */
+  rgb: string;
+  /** HSL values as string (e.g., "239, 84%, 67%") */
+  hsl: string;
+  /** CSS variable reference (e.g., "var(--color-indigo-500)") */
+  cssVar: string;
+  /** Tailwind class suffix (e.g., "indigo-500") */
+  tailwind: string;
+}
+
+/**
+ * Complete color palette (all shades)
+ */
+export type ColorPalette = Record<ColorScale, ColorToken>;
+
+/**
+ * Semantic color with light/dark/contrast variants
+ */
+export interface SemanticColor {
+  light: ColorToken;
+  DEFAULT: ColorToken;
+  dark: ColorToken;
+  contrast: ColorToken;
+}
+
+/**
+ * Complete semantic color palette
+ */
+export type SemanticColorPalette = Record<SemanticColorName, SemanticColor>;
+
+/**
+ * All primitive colors
+ */
+export type PrimitiveColors = Record<PrimitiveColorName, ColorPalette>;
+
+/**
+ * Theme color configuration
+ */
+export interface ThemeColors {
+  /** Brand colors */
+  brand: {
+    primary: ColorToken;
+    primaryLight: ColorToken;
+    primaryDark: ColorToken;
+    secondary: ColorToken;
+    secondaryLight: ColorToken;
+    secondaryDark: ColorToken;
+    accent: ColorToken;
+    accentLight: ColorToken;
+    accentDark: ColorToken;
+  };
+  /** Text colors */
+  text: Record<TextColorName, ColorToken>;
+  /** Background colors */
+  bg: Record<BgColorName, ColorToken>;
+  /** Border colors */
+  border: Record<BorderColorName, ColorToken>;
+  /** State colors */
+  state: Record<StateColorName, ColorToken>;
+  /** Feedback colors */
+  feedback: {
+    success: ColorToken;
+    successBg: ColorToken;
+    warning: ColorToken;
+    warningBg: ColorToken;
+    error: ColorToken;
+    errorBg: ColorToken;
+    info: ColorToken;
+    infoBg: ColorToken;
+  };
+}
+
+/**
+ * Color utility function options
+ */
+export interface GetColorOptions {
+  /** Output format */
+  format?: 'hex' | 'rgb' | 'hsl' | 'cssVar' | 'tailwind';
+  /** Include opacity */
+  opacity?: number;
+}
+
+/**
+ * Color class generation options
+ */
+export interface GetColorClassOptions {
+  /** Class type */
+  type?: 'text' | 'bg' | 'border' | 'ring' | 'fill' | 'stroke';
+  /** Include hover variant */
+  hover?: boolean;
+  /** Include focus variant */
+  focus?: boolean;
+  /** Include active variant */
+  active?: boolean;
+}

package/src/ui/tokens/colors/utils.ts

@@ -0,0 +1,253 @@
+/**
+ * AIppin Design System - Color Utilities
+ *
+ * Helper functions for working with colors.
+ *
+ * @brand AIppin
+ * @version 1.0.0
+ */
+
+import type {
+  ColorToken,
+  ColorScale,
+  PrimitiveColorName,
+  SemanticColorName,
+  GetColorOptions,
+  GetColorClassOptions,
+} from './types';
+import { getPrimitiveColor } from './primitives';
+import { getSemanticColor } from './semantic';
+
+/**
+ * Get a primitive color value in the specified format
+ */
+export function getColor(
+  name: PrimitiveColorName,
+  scale: ColorScale,
+  options: GetColorOptions = {}
+): string {
+  const { format = 'hex', opacity } = options;
+  const token = getPrimitiveColor(name, scale);
+
+  let value: string;
+  switch (format) {
+    case 'rgb':
+      value = opacity !== undefined
+        ? `rgba(${token.rgb}, ${opacity})`
+        : `rgb(${token.rgb})`;
+      break;
+    case 'hsl':
+      value = opacity !== undefined
+        ? `hsla(${token.hsl}, ${opacity})`
+        : `hsl(${token.hsl})`;
+      break;
+    case 'cssVar':
+      value = token.cssVar;
+      break;
+    case 'tailwind':
+      value = token.tailwind;
+      break;
+    case 'hex':
+    default:
+      value = token.hex;
+  }
+
+  return value;
+}
+
+/**
+ * Get a semantic color value in the specified format
+ */
+export function getSemanticColorValue(
+  role: SemanticColorName,
+  shade: 'light' | 'DEFAULT' | 'dark' | 'contrast' = 'DEFAULT',
+  options: GetColorOptions = {}
+): string {
+  const { format = 'hex', opacity } = options;
+  const token = getSemanticColor(role, shade);
+
+  let value: string;
+  switch (format) {
+    case 'rgb':
+      value = opacity !== undefined
+        ? `rgba(${token.rgb}, ${opacity})`
+        : `rgb(${token.rgb})`;
+      break;
+    case 'hsl':
+      value = opacity !== undefined
+        ? `hsla(${token.hsl}, ${opacity})`
+        : `hsl(${token.hsl})`;
+      break;
+    case 'cssVar':
+      value = token.cssVar;
+      break;
+    case 'tailwind':
+      value = token.tailwind;
+      break;
+    case 'hex':
+    default:
+      value = token.hex;
+  }
+
+  return value;
+}
+
+/**
+ * Get Tailwind color class for a primitive color
+ */
+export function getColorClass(
+  name: PrimitiveColorName,
+  scale: ColorScale,
+  options: GetColorClassOptions = {}
+): string {
+  const { type = 'text', hover = false, focus = false, active = false } = options;
+  const token = getPrimitiveColor(name, scale);
+  const base = `${type}-${token.tailwind}`;
+
+  const classes: string[] = [base];
+
+  if (hover) {
+    classes.push(`hover:${type}-${token.tailwind}`);
+  }
+  if (focus) {
+    classes.push(`focus:${type}-${token.tailwind}`);
+  }
+  if (active) {
+    classes.push(`active:${type}-${token.tailwind}`);
+  }
+
+  return classes.join(' ');
+}
+
+/**
+ * Get Tailwind color class for a semantic color
+ */
+export function getSemanticColorClass(
+  role: SemanticColorName,
+  shade: 'light' | 'DEFAULT' | 'dark' = 'DEFAULT',
+  options: GetColorClassOptions = {}
+): string {
+  const { type = 'text', hover = false, focus = false, active = false } = options;
+  const token = getSemanticColor(role, shade);
+  const base = `${type}-${token.tailwind}`;
+
+  const classes: string[] = [base];
+
+  if (hover) {
+    const hoverToken = getSemanticColor(role, shade === 'DEFAULT' ? 'dark' : 'DEFAULT');
+    classes.push(`hover:${type}-${hoverToken.tailwind}`);
+  }
+  if (focus) {
+    classes.push(`focus:${type}-${token.tailwind}`);
+  }
+  if (active) {
+    const activeToken = getSemanticColor(role, 'dark');
+    classes.push(`active:${type}-${activeToken.tailwind}`);
+  }
+
+  return classes.join(' ');
+}
+
+/**
+ * Get hover color class
+ */
+export function getHoverColorClass(
+  name: PrimitiveColorName,
+  scale: ColorScale,
+  type: 'text' | 'bg' | 'border' = 'bg'
+): string {
+  const token = getPrimitiveColor(name, scale);
+  return `hover:${type}-${token.tailwind}`;
+}
+
+/**
+ * Get focus color class
+ */
+export function getFocusColorClass(
+  name: PrimitiveColorName,
+  scale: ColorScale,
+  type: 'text' | 'bg' | 'border' = 'border'
+): string {
+  const token = getPrimitiveColor(name, scale);
+  return `focus:${type}-${token.tailwind}`;
+}
+
+/**
+ * Get focus ring class for a color
+ */
+export function getFocusRingClass(
+  name: PrimitiveColorName,
+  scale: ColorScale
+): string {
+  const token = getPrimitiveColor(name, scale);
+  return `focus:ring-${token.tailwind}`;
+}
+
+/**
+ * Generate a color with opacity
+ */
+export function withOpacity(token: ColorToken, opacity: number): string {
+  return `rgba(${token.rgb}, ${opacity})`;
+}
+
+/**
+ * Check if a color is considered "light" (for contrast calculations)
+ */
+export function isLightColor(hex: string): boolean {
+  const rgb = hexToRgbArray(hex);
+  if (!rgb) return true;
+
+  // Calculate relative luminance
+  const luminance = 0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2];
+  return luminance > 128;
+}
+
+/**
+ * Get contrast color (black or white) for a given color
+ */
+export function getContrastColor(hex: string): '#000000' | '#ffffff' {
+  return isLightColor(hex) ? '#000000' : '#ffffff';
+}
+
+/**
+ * Convert hex to RGB array
+ */
+function hexToRgbArray(hex: string): [number, number, number] | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return null;
+  return [
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16),
+  ];
+}
+
+/**
+ * Blend two colors together
+ */
+export function blendColors(color1: string, color2: string, weight: number = 0.5): string {
+  const rgb1 = hexToRgbArray(color1);
+  const rgb2 = hexToRgbArray(color2);
+
+  if (!rgb1 || !rgb2) return color1;
+
+  const r = Math.round(rgb1[0] * (1 - weight) + rgb2[0] * weight);
+  const g = Math.round(rgb1[1] * (1 - weight) + rgb2[1] * weight);
+  const b = Math.round(rgb1[2] * (1 - weight) + rgb2[2] * weight);
+
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+}
+
+/**
+ * Lighten a color by a percentage
+ */
+export function lighten(hex: string, percent: number): string {
+  return blendColors(hex, '#ffffff', percent / 100);
+}
+
+/**
+ * Darken a color by a percentage
+ */
+export function darken(hex: string, percent: number): string {
+  return blendColors(hex, '#000000', percent / 100);
+}

package/src/ui/tokens/colors.ts

@@ -1,16 +1,26 @@
 /**
  * Color Tokens
- * 
+ *
  * Semantic color system for consistent theming.
  * Uses Strategy Pattern for different color strategies (light, dark, custom).
+ *
+ * NOTE: This file maintains backward compatibility with the old API.
+ * For the new color system, use imports from './colors/index.ts'
+ *
+ * @brand AIppin
+ * @version 2.0.0
  */
 
-export type ColorRole = 
-  | 'primary' 
-  | 'secondary' 
-  | 'success' 
-  | 'warning' 
-  | 'error' 
+// Re-export everything from the new color system
+export * from './colors/index';
+
+// Legacy type aliases for backward compatibility
+export type ColorRole =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
   | 'info'
   | 'neutral';
 
@@ -62,9 +72,9 @@ export class LightColorStrategy implements ColorStrategy {
 
   generateSecondary(): SemanticColor {
     return {
-      light: { hex: '#a78bfa', rgb: '167, 139, 250', tailwind: 'violet-400' },
-      DEFAULT: { hex: '#8b5cf6', rgb: '139, 92, 246', tailwind: 'violet-500' },
-      dark: { hex: '#7c3aed', rgb: '124, 58, 237', tailwind: 'violet-600' },
+      light: { hex: '#f9a8d4', rgb: '249, 168, 212', tailwind: 'pink-300' },
+      DEFAULT: { hex: '#ec4899', rgb: '236, 72, 153', tailwind: 'pink-500' },
+      dark: { hex: '#db2777', rgb: '219, 39, 119', tailwind: 'pink-600' },
       contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
     };
   }
@@ -130,9 +140,9 @@ export class DarkColorStrategy implements ColorStrategy {
 
   generateSecondary(): SemanticColor {
     return {
-      light: { hex: '#8b5cf6', rgb: '139, 92, 246', tailwind: 'violet-500' },
-      DEFAULT: { hex: '#a78bfa', rgb: '167, 139, 250', tailwind: 'violet-400' },
-      dark: { hex: '#c4b5fd', rgb: '196, 181, 253', tailwind: 'violet-300' },
+      light: { hex: '#ec4899', rgb: '236, 72, 153', tailwind: 'pink-500' },
+      DEFAULT: { hex: '#f472b6', rgb: '244, 114, 182', tailwind: 'pink-400' },
+      dark: { hex: '#f9a8d4', rgb: '249, 168, 212', tailwind: 'pink-300' },
       contrast: { hex: '#ffffff', rgb: '255, 255, 255', tailwind: 'white' },
     };
   }
@@ -220,14 +230,37 @@ export class ColorTokenFactory {
 /**
  * Light theme colors (default)
  */
-const lightFactory = new ColorTokenFactory(new LightColorStrategy());
-export const COLOR_TOKENS_LIGHT = lightFactory.generatePalette();
+let COLOR_TOKENS_LIGHT: Record<ColorRole, SemanticColor>;
+let COLOR_TOKENS_DARK: Record<ColorRole, SemanticColor>;
 
-/**
- * Dark theme colors
- */
-const darkFactory = new ColorTokenFactory(new DarkColorStrategy());
-export const COLOR_TOKENS_DARK = darkFactory.generatePalette();
+try {
+  const lightFactory = new ColorTokenFactory(new LightColorStrategy());
+  COLOR_TOKENS_LIGHT = lightFactory.generatePalette();
+} catch (error) {
+  console.error('Failed to initialize COLOR_TOKENS_LIGHT:', error);
+  // Fallback: create minimal palette
+  const fallbackStrategy = new LightColorStrategy();
+  COLOR_TOKENS_LIGHT = {
+    primary: fallbackStrategy.generatePrimary(),
+    secondary: fallbackStrategy.generateSecondary(),
+    success: fallbackStrategy.generateSuccess(),
+    warning: fallbackStrategy.generateWarning(),
+    error: fallbackStrategy.generateError(),
+    info: fallbackStrategy.generateInfo(),
+    neutral: fallbackStrategy.generateNeutral(),
+  };
+}
+
+try {
+  const darkFactory = new ColorTokenFactory(new DarkColorStrategy());
+  COLOR_TOKENS_DARK = darkFactory.generatePalette();
+} catch (error) {
+  console.error('Failed to initialize COLOR_TOKENS_DARK:', error);
+  // Fallback: use light theme as fallback
+  COLOR_TOKENS_DARK = COLOR_TOKENS_LIGHT;
+}
+
+export { COLOR_TOKENS_LIGHT, COLOR_TOKENS_DARK };
 
 /**
  * Default color tokens (light theme)
@@ -238,13 +271,125 @@ export const COLOR_TOKENS = COLOR_TOKENS_LIGHT;
  * Helper function to get color token
  */
 export function getColor(role: ColorRole, shade: 'light' | 'DEFAULT' | 'dark' = 'DEFAULT'): ColorToken {
-  return COLOR_TOKENS[role][shade];
+  // Safety check: ensure COLOR_TOKENS is initialized
+  if (!COLOR_TOKENS || typeof COLOR_TOKENS !== 'object') {
+    console.warn('COLOR_TOKENS is not initialized, using fallback');
+    return { hex: '#6b7280', rgb: '107, 114, 128', tailwind: 'gray-500' }; // Fallback
+  }
+  
+  // Safety check: ensure role exists
+  const roleTokens = COLOR_TOKENS[role];
+  if (!roleTokens || typeof roleTokens !== 'object') {
+    console.warn(`Color role "${role}" not found in COLOR_TOKENS, using fallback`);
+    return { hex: '#6b7280', rgb: '107, 114, 128', tailwind: 'gray-500' }; // Fallback
+  }
+  
+  // Safety check: ensure shade exists
+  const token = roleTokens[shade];
+  if (!token || typeof token !== 'object') {
+    console.warn(`Color shade "${shade}" not found for role "${role}", using fallback`);
+    return { hex: '#6b7280', rgb: '107, 114, 128', tailwind: 'gray-500' }; // Fallback
+  }
+  
+  return token;
 }
 
 /**
  * Helper function to get color as Tailwind class
  */
-export function getColorClass(role: ColorRole, shade: 'light' | 'DEFAULT' | 'dark' = 'DEFAULT', type: 'text' | 'bg' | 'border' = 'text'): string {
-  const token = COLOR_TOKENS[role][shade];
+export function getColorClass(role: ColorRole, shade: 'light' | 'DEFAULT' | 'dark' | 'contrast' = 'DEFAULT', type: 'text' | 'bg' | 'border' = 'text'): string {
+  // Safety check: ensure COLOR_TOKENS is initialized
+  if (!COLOR_TOKENS || typeof COLOR_TOKENS !== 'object') {
+    console.warn('COLOR_TOKENS is not initialized, using fallback');
+    return `${type}-gray-500`; // Fallback color
+  }
+  
+  // Safety check: ensure role exists
+  const roleTokens = COLOR_TOKENS[role];
+  if (!roleTokens || typeof roleTokens !== 'object') {
+    console.warn(`Color role "${role}" not found in COLOR_TOKENS, using fallback`);
+    return `${type}-gray-500`; // Fallback color
+  }
+  
+  // Safety check: ensure shade exists
+  const token = roleTokens[shade];
+  if (!token || typeof token !== 'object' || !token.tailwind) {
+    console.warn(`Color shade "${shade}" not found for role "${role}", using fallback`);
+    return `${type}-gray-500`; // Fallback color
+  }
+  
   return `${type}-${token.tailwind}`;
 }
+
+/**
+ * Helper function to get hover color class
+ * Returns the complete hover class (e.g., 'hover:bg-gray-100')
+ * Note: Tailwind needs to see the full class name, so we return it as a complete string
+ */
+export function getHoverColorClass(role: ColorRole, shade: 'light' | 'DEFAULT' | 'dark' = 'DEFAULT', type: 'text' | 'bg' | 'border' = 'bg'): string {
+  const baseClass = getColorClass(role, shade, type);
+  // Extract the class name part (e.g., 'bg-gray-100' -> 'bg-gray-100')
+  // and prepend 'hover:' prefix
+  return `hover:${baseClass}`;
+}
+
+/**
+ * Helper function to get focus color class
+ * Returns the complete focus class (e.g., 'focus:bg-gray-100')
+ */
+export function getFocusColorClass(role: ColorRole, shade: 'light' | 'DEFAULT' | 'dark' = 'DEFAULT', type: 'text' | 'bg' | 'border' = 'border'): string {
+  const baseClass = getColorClass(role, shade, type);
+  return `focus:${baseClass}`;
+}
+
+/**
+ * Helper function to get focus ring color class
+ * Returns the complete focus ring class (e.g., 'focus:ring-indigo-500')
+ * This returns complete classes that Tailwind can detect, avoiding string manipulation.
+ * 
+ * Note: These classes must be in the safelist or used elsewhere in the codebase
+ * for Tailwind to include them in the build.
+ */
+export function getFocusRingClass(role: ColorRole, shade: 'light' | 'DEFAULT' | 'dark' = 'DEFAULT'): string {
+  // Map color roles and shades to complete focus ring classes
+  // These are complete classes that Tailwind can detect
+  const ringClassMap: Record<ColorRole, Record<'light' | 'DEFAULT' | 'dark', string>> = {
+    primary: {
+      light: 'focus:ring-indigo-400',
+      DEFAULT: 'focus:ring-indigo-500',
+      dark: 'focus:ring-indigo-600',
+    },
+    secondary: {
+      light: 'focus:ring-pink-300',
+      DEFAULT: 'focus:ring-pink-500',
+      dark: 'focus:ring-pink-600',
+    },
+    success: {
+      light: 'focus:ring-green-300',
+      DEFAULT: 'focus:ring-green-500',
+      dark: 'focus:ring-green-600',
+    },
+    warning: {
+      light: 'focus:ring-yellow-300',
+      DEFAULT: 'focus:ring-yellow-500',
+      dark: 'focus:ring-yellow-600',
+    },
+    error: {
+      light: 'focus:ring-red-300',
+      DEFAULT: 'focus:ring-red-500',
+      dark: 'focus:ring-red-600',
+    },
+    info: {
+      light: 'focus:ring-blue-300',
+      DEFAULT: 'focus:ring-blue-500',
+      dark: 'focus:ring-blue-600',
+    },
+    neutral: {
+      light: 'focus:ring-gray-200',
+      DEFAULT: 'focus:ring-gray-500',
+      dark: 'focus:ring-gray-700',
+    },
+  };
+  
+  return ringClassMap[role]?.[shade] || 'focus:ring-indigo-500';
+}