@idealyst/components 1.0.83 → 1.0.84

package/src/theme/colors.ts

@@ -1,315 +0,0 @@
-// Base color palettes - these are the source of truth for all colors
-export const colorPalettes = {
-  blue: {
-    50: '#eff6ff',
-    100: '#dbeafe',
-    200: '#bfdbfe',
-    300: '#93c5fd',
-    400: '#60a5fa',
-    500: '#3b82f6',
-    600: '#2563eb',
-    700: '#1d4ed8',
-    800: '#1e40af',
-    900: '#1e3a8a',
-  },
-  
-  green: {
-    50: '#f0fdf4',
-    100: '#dcfce7',
-    200: '#bbf7d0',
-    300: '#86efac',
-    400: '#4ade80',
-    500: '#22c55e',
-    600: '#16a34a',
-    700: '#15803d',
-    800: '#166534',
-    900: '#14532d',
-  },
-  
-  red: {
-    50: '#fef2f2',
-    100: '#fee2e2',
-    200: '#fecaca',
-    300: '#fca5a5',
-    400: '#f87171',
-    500: '#ef4444',
-    600: '#dc2626',
-    700: '#b91c1c',
-    800: '#991b1b',
-    900: '#7f1d1d',
-  },
-  
-  amber: {
-    50: '#fffbeb',
-    100: '#fef3c7',
-    200: '#fde68a',
-    300: '#fcd34d',
-    400: '#fbbf24',
-    500: '#f59e0b',
-    600: '#d97706',
-    700: '#b45309',
-    800: '#92400e',
-    900: '#78350f',
-  },
-  
-  gray: {
-    50: '#f9fafb',
-    100: '#f3f4f6',
-    200: '#e5e7eb',
-    300: '#d1d5db',
-    400: '#9ca3af',
-    500: '#6b7280',
-    600: '#4b5563',
-    700: '#374151',
-    800: '#1f2937',
-    900: '#111827',
-  },
-  
-  purple: {
-    50: '#f8fafc',
-    100: '#f1f5f9',
-    200: '#e2e8f0',
-    300: '#cbd5e1',
-    400: '#94a3b8',
-    500: '#64748b',
-    600: '#475569',
-    700: '#334155',
-    800: '#1e293b',
-    900: '#0f172a',
-  },
-  
-  pink: {
-    50: '#fdf2f8',
-    100: '#fce7f3',
-    200: '#fbcfe8',
-    300: '#f9a8d4',
-    400: '#f472b6',
-    500: '#ec4899',
-    600: '#db2777',
-    700: '#be185d',
-    800: '#9d174d',
-    900: '#831843',
-  },
-  
-  cyan: {
-    50: '#ecfeff',
-    100: '#cffafe',
-    200: '#a5f3fc',
-    300: '#67e8f9',
-    400: '#22d3ee',
-    500: '#06b6d4',
-    600: '#0891b2',
-    700: '#0e7490',
-    800: '#155e75',
-    900: '#164e63',
-  },
-} as const;
-
-// Intent system - maps semantic meanings to color palettes
-export const intentMappings = {
-  primary: {
-    palette: 'blue' as const,
-    main: 500 as const,
-    on: '#ffffff',
-    container: 100 as const,
-    onContainer: 800 as const,
-    light: 200 as const,
-    dark: 700 as const,
-    border: 300 as const,
-  },
-  
-  success: {
-    palette: 'green' as const,
-    main: 500 as const,
-    on: '#ffffff',
-    container: 100 as const,
-    onContainer: 800 as const,
-    light: 200 as const,
-    dark: 700 as const,
-    border: 300 as const,
-  },
-  
-  error: {
-    palette: 'red' as const,
-    main: 500 as const,
-    on: '#ffffff',
-    container: 100 as const,
-    onContainer: 800 as const,
-    light: 200 as const,
-    dark: 700 as const,
-    border: 300 as const,
-  },
-  
-  warning: {
-    palette: 'amber' as const,
-    main: 500 as const,
-    on: '#ffffff',
-    container: 100 as const,
-    onContainer: 800 as const,
-    light: 200 as const,
-    dark: 700 as const,
-    border: 300 as const,
-  },
-  
-  neutral: {
-    palette: 'gray' as const,
-    main: 500 as const,
-    on: '#ffffff',
-    container: 100 as const,
-    onContainer: 800 as const,
-    light: 200 as const,
-    dark: 700 as const,
-    border: 300 as const,
-  },
-  
-  info: {
-    palette: 'cyan' as const,
-    main: 500 as const,
-    on: '#ffffff',
-    container: 100 as const,
-    onContainer: 800 as const,
-    light: 200 as const,
-    dark: 700 as const,
-    border: 300 as const,
-  },
-} as const;
-
-// Color system for display components (non-actionable)
-export const colorMappings = {
-  // Text colors
-  text: {
-    primary: 'gray.900' as const,
-    secondary: 'gray.600' as const,
-    disabled: 'gray.400' as const,
-    inverse: '#ffffff',
-  },
-  
-  // Surface colors
-  surface: {
-    primary: '#ffffff',
-    secondary: 'gray.50' as const,
-    tertiary: 'gray.100' as const,
-    inverse: 'gray.900' as const,
-  },
-  
-  // Border colors
-  border: {
-    primary: 'gray.200' as const,
-    secondary: 'gray.300' as const,
-    focus: 'primary' as const, // References intent.primary.main
-  },
-  
-  // Direct color references (for backward compatibility and special cases)
-  primary: 'primary' as const,   // References intent.primary.main
-  success: 'success' as const,   // References intent.success.main
-  error: 'error' as const,       // References intent.error.main
-  warning: 'warning' as const,   // References intent.warning.main
-  neutral: 'neutral' as const,   // References intent.neutral.main
-  info: 'info' as const,         // References intent.info.main
-} as const;
-
-// Dark theme overrides
-export const darkThemeOverrides = {
-  colorMappings: {
-    text: {
-      primary: 'gray.50' as const,
-      secondary: 'gray.300' as const,
-      disabled: 'gray.500' as const,
-      inverse: 'gray.900' as const,
-    },
-    
-    surface: {
-      primary: 'gray.900' as const,
-      secondary: 'gray.800' as const,
-      tertiary: 'gray.700' as const,
-      inverse: '#ffffff',
-    },
-    
-    border: {
-      primary: 'gray.700' as const,
-      secondary: 'gray.600' as const,
-      focus: 'primary' as const,
-    },
-  },
-  
-  // Dark theme intent adjustments
-  intentMappings: {
-    primary: {
-      palette: 'blue' as const,
-      main: 400 as const,        // Lighter blue for dark theme
-      on: 'gray.900' as const,   // Dark text on light blue
-      container: 900 as const,   // Very dark blue container
-      onContainer: 100 as const, // Light text on dark container
-      light: 800 as const,
-      dark: 300 as const,
-      border: 400 as const,
-    },
-    
-    success: {
-      palette: 'green' as const,
-      main: 400 as const,
-      on: 'gray.900' as const,
-      container: 900 as const,
-      onContainer: 100 as const,
-      light: 800 as const,
-      dark: 300 as const,
-      border: 400 as const,
-    },
-    
-    error: {
-      palette: 'red' as const,
-      main: 400 as const,
-      on: 'gray.900' as const,
-      container: 900 as const,
-      onContainer: 100 as const,
-      light: 800 as const,
-      dark: 300 as const,
-      border: 400 as const,
-    },
-    
-    warning: {
-      palette: 'amber' as const,
-      main: 400 as const,
-      on: 'gray.900' as const,
-      container: 900 as const,
-      onContainer: 100 as const,
-      light: 800 as const,
-      dark: 300 as const,
-      border: 400 as const,
-    },
-    
-    neutral: {
-      palette: 'gray' as const,
-      main: 400 as const,
-      on: 'gray.900' as const,
-      container: 800 as const,
-      onContainer: 100 as const,
-      light: 700 as const,
-      dark: 300 as const,
-      border: 400 as const,
-    },
-    
-    info: {
-      palette: 'cyan' as const,
-      main: 400 as const,
-      on: 'gray.900' as const,
-      container: 900 as const,
-      onContainer: 100 as const,
-      light: 800 as const,
-      dark: 300 as const,
-      border: 400 as const,
-    },
-  },
-} as const;
-
-// Import variant types
-import type { IntentVariant, ColorVariant, ColorPaletteShade } from './variants';
-
-// Export types for TypeScript
-export type ColorPalette = keyof typeof colorPalettes;
-export type ColorShade = keyof typeof colorPalettes.blue;
-export type IntentName = keyof typeof intentMappings;
-export type ColorName = keyof typeof colorMappings;
-
-// Ensure our variant types match the actual data structures
-export type { IntentVariant, ColorVariant, ColorPaletteShade }; 

package/src/theme/defaultThemes.ts

@@ -1,326 +0,0 @@
-import { 
-  createTheme, 
-  generateColorPalette,
-  createLightResolvedIntents, 
-  createDarkResolvedIntents, 
-  createLightResolvedColors, 
-  createDarkResolvedColors,
-  type ThemeConfig
-} from './themeBuilder';
-
-// Common theme properties shared across all themes
-export const commonThemeProperties = {
-  spacing: {
-    xs: 4,
-    sm: 8,
-    md: 16,
-    lg: 24,
-    xl: 32,
-    xxl: 40,
-    xxxl: 48,
-    xxxxl: 64,
-  },
-  
-  borderRadius: {
-    none: 0,
-    xs: 2,
-    sm: 4,
-    md: 8,
-    lg: 12,
-    xl: 16,
-    xxl: 20,
-    full: 9999,
-  },
-  
-  typography: {
-    fontSize: {
-      xs: 12,
-      sm: 14,
-      md: 16,
-      lg: 18,
-      xl: 20,
-      xxl: 24,
-      xxxl: 32,
-      xxxxl: 40,
-    },
-    fontWeight: {
-      light: '300',
-      regular: '400',
-      medium: '500',
-      semibold: '600',
-      bold: '700',
-      extrabold: '800',
-    },
-    lineHeight: {
-      tight: 1.25,
-      normal: 1.5,
-      relaxed: 1.75,
-    },
-  },
-  
-  shadows: {
-    sm: {
-      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.05,
-      shadowRadius: 2,
-      elevation: 1,
-    },
-    md: {
-      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.1,
-      shadowRadius: 8,
-      elevation: 4,
-    },
-    lg: {
-      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 8 },
-      shadowOpacity: 0.15,
-      shadowRadius: 16,
-      elevation: 8,
-    },
-  },
-  
-  transitions: {
-    fast: '0.15s ease',
-    base: '0.2s ease',
-    slow: '0.3s ease',
-    button: 'all 0.2s ease',
-    fade: 'opacity 0.2s ease',
-    slide: 'transform 0.3s ease',
-  },
-  
-  // Dynamic helper functions
-  gap: (value: number) => value * 8,
-  scale: (value: number) => value * 1.2,
-  alpha: (color: string, alpha: number) => `${color}${Math.round(alpha * 255).toString(16).padStart(2, '0')}`,
-};
-
-// =============================================================================
-// DEFAULT PALETTES
-// =============================================================================
-
-/**
- * Helper function to create standard color palettes
- */
-export function createStandardPalettes(): ThemeConfig['palettes'] {
-  return {
-    red: generateColorPalette('#ef4444'),
-    orange: generateColorPalette('#f97316'),
-    yellow: generateColorPalette('#eab308'),
-    green: generateColorPalette('#22c55e'),
-    blue: generateColorPalette('#3b82f6'),
-    purple: generateColorPalette('#a855f7'),
-    black: generateColorPalette('#000000'),
-    gray: generateColorPalette('#6b7280'),
-    white: generateColorPalette('#ffffff'),
-  };
-}
-
-/**
- * Helper function to create dark theme palettes with proper dark mode colors
- */
-export function createDarkPalettes(): ThemeConfig['palettes'] {
-  const basePalettes = createStandardPalettes();
-  
-  return {
-    ...basePalettes,
-    // Adjusted gray palette for dark theme
-    gray: {
-      50: '#18181b',    // Very dark background
-      100: '#27272a',   // Dark surface
-      200: '#3f3f46',   // Medium dark
-      300: '#52525b',   // Medium
-      400: '#71717a',   // Medium light
-      500: '#a1a1aa',   // Light gray
-      600: '#d4d4d8',   // Lighter gray
-      700: '#e4e4e7',   // Very light gray
-      800: '#f4f4f5',   // Nearly white
-      900: '#fafafa',   // White
-    },
-    // Adjusted black palette for dark theme
-    black: {
-      50: '#000000',    // Pure black
-      100: '#0a0a0a',   // Very dark
-      200: '#141414',   // Dark
-      300: '#1f1f1f',   // Medium dark
-      400: '#2a2a2a',   // Medium
-      500: '#3c3c3c',   // Medium light
-      600: '#525252',   // Light
-      700: '#737373',   // Lighter
-      800: '#a3a3a3',   // Very light
-      900: '#d4d4d4',   // Nearly white
-    },
-    // Adjusted white palette for dark theme
-    white: {
-      50: '#0c0c0c',    // Very dark (inverted)
-      100: '#171717',   // Dark
-      200: '#262626',   // Medium dark
-      300: '#404040',   // Medium
-      400: '#525252',   // Medium light
-      500: '#737373',   // Light
-      600: '#a3a3a3',   // Lighter
-      700: '#d4d4d4',   // Very light
-      800: '#f5f5f5',   // Nearly white
-      900: '#ffffff',   // Pure white
-    },
-  };
-}
-
-// Convenience functions for complete theme creation
-export function createLightIntentMappings(): ThemeConfig['intents'] {
-  const palettes = createStandardPalettes();
-  return createLightResolvedIntents(palettes);
-}
-
-export function createDarkIntentMappings(): ThemeConfig['intents'] {
-  const palettes = createDarkPalettes();
-  return createDarkResolvedIntents(palettes);
-}
-
-export function createLightColorMappings(): ThemeConfig['colors'] {
-  const palettes = createStandardPalettes();
-  return createLightResolvedColors(palettes);
-}
-
-export function createDarkColorMappings(): ThemeConfig['colors'] {
-  const palettes = createDarkPalettes();
-  return createDarkResolvedColors(palettes);
-}
-
-// Create default light theme using the explicit theme builder
-export function createDefaultLightTheme() {
-  return createTheme({
-    name: 'DefaultLight',
-    mode: 'light',
-    palettes: createStandardPalettes(),
-    intents: createLightIntentMappings(),
-    colors: createLightColorMappings(),
-    
-    typography: {
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-    },
-    
-    borderRadius: {
-      sm: 4,
-      md: 8,
-      lg: 12,
-      xl: 16,
-      xxl: 20,
-    },
-    
-    spacing: {
-      xs: 4,
-      sm: 8,
-      md: 16,
-      lg: 24,
-      xl: 32,
-      xxl: 40,
-      xxxl: 48,
-    },
-    
-    shadows: {
-      sm: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.05,
-        shadowRadius: 2,
-        elevation: 1,
-      },
-      md: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.1,
-        shadowRadius: 8,
-        elevation: 4,
-      },
-      lg: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 8 },
-        shadowOpacity: 0.15,
-        shadowRadius: 16,
-        elevation: 8,
-      },
-    },
-    
-    transitions: {
-      fast: '0.15s ease',
-      base: '0.2s ease',
-      slow: '0.3s ease',
-      button: 'all 0.2s ease',
-      fade: 'opacity 0.2s ease',
-      slide: 'transform 0.3s ease',
-    },
-  });
-}
-
-// Create default dark theme using the explicit theme builder
-export function createDefaultDarkTheme() {
-  return createTheme({
-    name: 'DefaultDark',
-    mode: 'dark',
-    palettes: createDarkPalettes(),
-    intents: createDarkIntentMappings(),
-    colors: createDarkColorMappings(),
-    
-    typography: {
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-    },
-    
-    borderRadius: {
-      sm: 4,
-      md: 8,
-      lg: 12,
-      xl: 16,
-      xxl: 20,
-    },
-    
-    spacing: {
-      xs: 4,
-      sm: 8,
-      md: 16,
-      lg: 24,
-      xl: 32,
-      xxl: 40,
-      xxxl: 48,
-    },
-    
-    shadows: {
-      sm: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.2,
-        shadowRadius: 2,
-        elevation: 1,
-      },
-      md: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 4,
-      },
-      lg: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 8 },
-        shadowOpacity: 0.4,
-        shadowRadius: 16,
-        elevation: 8,
-      },
-    },
-    
-    transitions: {
-      fast: '0.15s ease',
-      base: '0.2s ease',
-      slow: '0.3s ease',
-      button: 'all 0.2s ease',
-      fade: 'opacity 0.2s ease',
-      slide: 'transform 0.3s ease',
-    },
-  });
-}
-
-// Export the created themes
-export const defaultLightTheme = createDefaultLightTheme();
-export const defaultDarkTheme = createDefaultDarkTheme();