@umituz/react-native-design-system 1.14.0 → 2.0.0

package/src/theme/core/TokenFactory.ts

@@ -0,0 +1,103 @@
+/**
+ * TOKEN FACTORY - THEME INJECTION LOGIC
+ *
+ * ✅ Factory Pattern for creating complete design tokens
+ * ✅ Combines static tokens (BaseTokens) + dynamic colors (ColorPalette)
+ * ✅ Type-safe token generation
+ * ✅ Zero duplication - SINGLE SOURCE OF TRUTH
+ *
+ * @module TokenFactory
+ */
+
+import { BASE_TOKENS } from './BaseTokens';
+import { getColorPalette, withAlpha, type ThemeMode, type ColorPalette } from './ColorPalette';
+import { applyCustomColors, type CustomThemeColors } from './CustomColors';
+
+// =============================================================================
+// DESIGN TOKENS TYPE
+// =============================================================================
+
+/**
+ * Complete design tokens shape
+ * Combines static tokens (spacing, typography, borders) + dynamic colors
+ */
+export type DesignTokens = {
+  colors: ColorPalette;
+  spacing: typeof BASE_TOKENS.spacing;
+  typography: typeof BASE_TOKENS.typography;
+  iconSizes: typeof BASE_TOKENS.iconSizes;
+  opacity: typeof BASE_TOKENS.opacity;
+  avatarSizes: typeof BASE_TOKENS.avatarSizes;
+  borders: typeof BASE_TOKENS.borders & {
+    card: typeof BASE_TOKENS.borders.card & { borderColor: string };
+    input: typeof BASE_TOKENS.borders.input & { borderColor: string };
+  };
+};
+
+// =============================================================================
+// TOKEN FACTORY FUNCTION
+// =============================================================================
+
+/**
+ * Create complete design tokens for a specific theme mode
+ *
+ * @param mode - Theme mode ('light' or 'dark')
+ * @param customColors - Optional custom colors to override default colors
+ * @returns Complete design tokens object
+ *
+ * @example
+ * ```typescript
+ * const lightTokens = createDesignTokens('light');
+ * const darkTokens = createDesignTokens('dark');
+ * const customTokens = createDesignTokens('dark', { primary: '#FF6B35' });
+ *
+ * // Use in components
+ * <View style={{ backgroundColor: lightTokens.colors.primary }}>
+ *   <Text style={lightTokens.typography.bodyLarge}>Hello!</Text>
+ * </View>
+ * ```
+ */
+export const createDesignTokens = (
+  mode: ThemeMode,
+  customColors?: CustomThemeColors,
+): DesignTokens => {
+  // Get color palette for theme mode
+  const baseColors = getColorPalette(mode);
+
+  // Apply custom colors if provided
+  const colors = applyCustomColors(baseColors, customColors);
+
+  // Combine static tokens + dynamic colors
+  return {
+    // ✅ DYNAMIC: Colors from theme mode + custom overrides
+    colors,
+
+    // ✅ STATIC: These don't change with theme
+    spacing: BASE_TOKENS.spacing,
+    typography: BASE_TOKENS.typography,
+    iconSizes: BASE_TOKENS.iconSizes,
+    opacity: BASE_TOKENS.opacity,
+    avatarSizes: BASE_TOKENS.avatarSizes,
+
+    // ✅ BORDERS: Static + injected border colors from theme
+    borders: {
+      ...BASE_TOKENS.borders,
+      card: {
+        ...BASE_TOKENS.borders.card,
+        borderColor: colors.border,
+      },
+      input: {
+        ...BASE_TOKENS.borders.input,
+        borderColor: colors.border,
+      },
+    },
+  };
+};
+
+// =============================================================================
+// UTILITY EXPORTS
+// =============================================================================
+
+export { withAlpha };
+export type { ThemeMode, ColorPalette };
+

package/src/theme/core/colors/ColorUtils.ts

@@ -0,0 +1,53 @@
+/**
+ * COLOR UTILITIES
+ * 
+ * Color manipulation and validation utilities
+ */
+
+import { DESIGN_CONSTANTS } from '../constants/DesignConstants';
+
+/**
+ * Validate hex color format
+ * @param hexColor - Hex color string to validate
+ * @returns true if valid hex color
+ */
+export const isValidHexColor = (hexColor: string): boolean => {
+  if (!hexColor || typeof hexColor !== 'string') {
+    return false;
+  }
+  
+  return DESIGN_CONSTANTS.HEX_COLOR_REGEX.test(hexColor);
+};
+
+/**
+ * Add alpha transparency to hex color
+ * @param hexColor - Hex color string (#RRGGBB or #RGB)
+ * @param alpha - Alpha value 0-1
+ * @returns Hex color with alpha (#RRGGBBAA)
+ */
+export const withAlpha = (hexColor: string, alpha: number): string => {
+  if (!isValidHexColor(hexColor)) {
+    if (__DEV__) {
+      console.warn('[withAlpha] Invalid hex color format:', hexColor);
+    }
+    return hexColor;
+  }
+
+  if (typeof alpha !== 'number' || alpha < 0 || alpha > 1) {
+    if (__DEV__) {
+      console.warn('[withAlpha] Invalid alpha value, must be 0-1:', alpha);
+    }
+    return hexColor;
+  }
+
+  // Convert 3-digit hex to 6-digit
+  const hex = hexColor.length === 4 
+    ? hexColor.split('').map(c => c + c).join('')
+    : hexColor;
+
+  const alphaHex = Math.round(alpha * 255)
+    .toString(16)
+    .padStart(2, '0');
+
+  return hex + alphaHex;
+};

package/src/theme/core/colors/DarkColors.ts

@@ -0,0 +1,146 @@
+/**
+ * DARK THEME COLORS
+ * 
+ * Dark theme color palette with warm orange harmony
+ */
+
+export const darkColors = {
+  // PRIMARY BRAND COLORS - Warm Orange & Harmony Bloom (Dark Mode)
+  primary: '#FF8C42',          // Warm Orange for dark backgrounds
+  primaryLight: '#FFA07A',     // Light Salmon
+  primaryDark: '#FF6B35',      // Vibrant Orange
+
+  secondary: '#FFCC99',        // Light Peach for dark backgrounds
+  secondaryLight: '#FFD4A3',   // Warm Beige
+  secondaryDark: '#FFB88C',    // Soft Peach
+
+  accent: '#FFB6C1',           // Light Pink (Bloom) for dark backgrounds
+  accentLight: '#FFA07A',      // Light Salmon
+  accentDark: '#FF8C69',       // Salmon
+
+  // MATERIAL DESIGN 3 - ON COLORS (Dark mode text colors)
+  onPrimary: '#000000',           // Dark text on light primary
+  onSecondary: '#000000',         // Dark text on light secondary
+  onSuccess: '#000000',           // Dark text on light success
+  onError: '#FFFFFF',             // Light text on dark error
+  onWarning: '#000000',           // Dark text on light warning
+  onInfo: '#000000',              // Dark text on light info
+  onSurface: '#E2E8F0',           // Light text on dark surface
+  onBackground: '#F1F5F9',        // Light text on dark background
+  onSurfaceDisabled: '#64748B',   // Disabled dark mode text
+
+  // MATERIAL DESIGN 3 - CONTAINER COLORS (Dark mode containers)
+  primaryContainer: '#CC4A1F',    // Dark orange container
+  onPrimaryContainer: '#FFE4CD',  // Light text on dark primary container
+  secondaryContainer: '#CC8C5F',  // Dark peach container
+  onSecondaryContainer: '#FFF8DC', // Light text on dark secondary container
+  errorContainer: '#7F1D1D',      // Dark red container
+  onErrorContainer: '#FEE2E2',    // Light text on dark error container
+
+  // MATERIAL DESIGN 3 - OUTLINE (Dark mode outlines)
+  outline: '#475569',             // Medium gray outline for dark mode
+  outlineVariant: '#334155',      // Darker outline variant
+  outlineDisabled: '#334155',     // Disabled outline
+
+  // SEMANTIC UI COLORS (slightly lighter for dark backgrounds)
+  success: '#34D399',             // Lighter green for dark mode
+  successLight: '#34D399',
+  successDark: '#059669',
+
+  error: '#EF4444',
+  errorLight: '#F87171',
+  errorDark: '#DC2626',
+
+  warning: '#F59E0B',
+  warningLight: '#FBBF24',
+  warningDark: '#D97706',
+
+  info: '#FF8C42',              // Warm Orange for info (dark mode)
+  infoLight: '#FFA07A',         // Light Salmon
+  infoDark: '#FF6347',          // Tomato
+
+  // SEMANTIC CONTAINER COLORS (Same as light mode for type consistency)
+  successContainer: '#D1FAE5',        // Same as light mode for type consistency
+  onSuccessContainer: '#065F46',      // Same as light mode for type consistency
+  warningContainer: '#FEF3C7',        // Same as light mode for type consistency
+  onWarningContainer: '#92400E',      // Same as light mode for type consistency
+  infoContainer: '#FFE4CD',           // Light orange container
+  onInfoContainer: '#CC4A1F',         // Text on info container
+
+  // GRAYSCALE PALETTE (Same as light mode for type consistency)
+  gray50: '#FAFAFA',
+  gray100: '#F4F4F5',
+  gray200: '#E4E4E7',
+  gray300: '#D4D4D8',
+  gray400: '#A1A1AA',
+  gray500: '#71717A',
+  gray600: '#52525B',
+  gray700: '#3F3F46',
+  gray800: '#27272A',
+  gray900: '#18181B',
+
+  // BACKGROUND COLORS (dark mode - true dark backgrounds)
+  backgroundPrimary: '#0F172A',      // Slate 900 - Deep dark background
+  backgroundSecondary: '#1E293B',    // Slate 800 - Slightly lighter
+
+  surface: '#1E293B',                // Slate 800 - Card/surface backgrounds
+  surfaceVariant: '#334155',         // Slate 700 - Variant surfaces
+  surfaceSecondary: '#334155',       // Alias for surfaceVariant
+  surfaceDisabled: '#475569',        // Slate 600 - Disabled surfaces
+
+  // TEXT COLORS (dark mode - light text on dark backgrounds)
+  textPrimary: '#F1F5F9',            // Slate 100 - Primary text (very light)
+  textSecondary: '#CBD5E1',          // Slate 300 - Secondary text
+  textTertiary: '#94A3B8',           // Slate 400 - Tertiary text
+  textDisabled: '#64748B',           // Slate 500 - Disabled text
+  textInverse: '#0F172A',            // Dark text for light backgrounds
+
+  // BORDER COLORS (dark mode - subtle borders)
+  border: '#334155',                 // Slate 700 - Default border
+  borderLight: '#475569',            // Slate 600 - Light border
+  borderMedium: '#64748B',           // Slate 500 - Medium border
+  borderFocus: '#60A5FA',            // Blue 400 - Focus border (lighter)
+  borderDisabled: '#475569',         // Slate 600 - Disabled border
+
+  // COMPONENT-SPECIFIC COLORS (dark mode specific)
+  buttonPrimary: '#FF8C42',          // Warm Orange for dark mode
+  buttonSecondary: '#FFCC99',        // Light Peach for dark mode
+
+  inputBackground: '#1E293B',        // Dark input background
+  inputBorder: '#475569',            // Subtle input border
+
+  cardBackground: '#1E293B',         // Dark card background
+
+  // COLOR ALIASES (for backward compatibility and convenience)
+  text: '#F1F5F9',                    // Alias for textPrimary
+  background: '#0F172A',              // Alias for backgroundPrimary
+  card: '#1E293B',                    // Alias for cardBackground
+
+  // SPECIAL COLORS
+  transparent: 'transparent',
+  black: '#000000',
+  white: '#FFFFFF',
+
+  // RGBA OVERLAY COLORS (Same as light mode for type consistency)
+  modalOverlay: 'rgba(0, 0, 0, 0.5)',
+  overlaySubtle: 'rgba(0, 0, 0, 0.05)',
+  overlayLight: 'rgba(0, 0, 0, 0.1)',
+  overlayMedium: 'rgba(0, 0, 0, 0.3)',
+  overlayBackground: 'rgba(0, 0, 0, 0.05)',
+
+  whiteOverlay: 'rgba(255, 255, 255, 0.2)',
+  whiteOverlayStrong: 'rgba(255, 255, 255, 0.95)',
+  whiteOverlayBorder: 'rgba(255, 255, 255, 0.5)',
+
+  textWhiteOpacity: 'rgba(255, 255, 255, 0.8)',
+
+  errorBackground: 'rgba(239, 68, 68, 0.1)',
+  primaryBackground: 'rgba(255, 140, 66, 0.1)',  // Orange background (dark mode)
+
+  cardOverlay: 'rgba(0, 0, 0, 0.15)',
+
+  inputBackground_RGBA: 'rgba(248, 250, 252, 0.9)',
+
+  // GRADIENTS - Warm Orange Harmony (Dark Mode)
+  gradient: ['#FF8C42', '#FFCC99'],  // Orange to Peach gradient
+};

package/src/theme/core/colors/LightColors.ts

@@ -0,0 +1,146 @@
+/**
+ * LIGHT THEME COLORS
+ * 
+ * Light theme color palette with warm orange harmony
+ */
+
+export const lightColors = {
+  // PRIMARY BRAND COLORS - Warm Orange & Harmony Bloom
+  primary: '#FF6B35',          // Vibrant Orange
+  primaryLight: '#FF8C42',     // Warm Orange
+  primaryDark: '#FF4500',      // Orange Red
+
+  secondary: '#FFB88C',        // Soft Peach
+  secondaryLight: '#FFCC99',   // Light Peach
+  secondaryDark: '#FF8C69',    // Salmon
+
+  accent: '#FFB6C1',           // Light Pink (Bloom)
+  accentLight: '#FFA07A',      // Light Salmon
+  accentDark: '#FF8C69',       // Salmon
+
+  // MATERIAL DESIGN 3 - ON COLORS (Text on colored backgrounds)
+  onPrimary: '#FFFFFF',           // Text on primary background
+  onSecondary: '#FFFFFF',         // Text on secondary background
+  onSuccess: '#FFFFFF',           // Text on success background
+  onError: '#FFFFFF',             // Text on error background
+  onWarning: '#000000',           // Text on warning background
+  onInfo: '#FFFFFF',              // Text on info background
+  onSurface: '#1E293B',           // Text on surface
+  onBackground: '#1E293B',        // Text on background
+  onSurfaceDisabled: '#CBD5E1',   // Disabled text color
+
+  // MATERIAL DESIGN 3 - CONTAINER COLORS (Lighter versions for containers)
+  primaryContainer: '#FFE4CD',    // Light orange container
+  onPrimaryContainer: '#CC4A1F',  // Text on primary container
+  secondaryContainer: '#FFF8DC',  // Light peach container
+  onSecondaryContainer: '#CC8C5F', // Text on secondary container
+  errorContainer: '#FEE2E2',      // Light container using error
+  onErrorContainer: '#991B1B',    // Text on error container
+
+  // MATERIAL DESIGN 3 - OUTLINE
+  outline: '#CBD5E1',             // Default outline color
+  outlineVariant: '#E2E8F0',      // Lighter outline variant
+  outlineDisabled: '#E2E8F0',     // Disabled outline color
+
+  // SEMANTIC UI COLORS
+  success: '#10B981',
+  successLight: '#34D399',
+  successDark: '#059669',
+
+  error: '#EF4444',
+  errorLight: '#F87171',
+  errorDark: '#DC2626',
+
+  warning: '#F59E0B',
+  warningLight: '#FBBF24',
+  warningDark: '#D97706',
+
+  info: '#FF8C42',              // Warm Orange for info
+  infoLight: '#FFA07A',         // Light Salmon
+  infoDark: '#FF6347',          // Tomato
+
+  // SEMANTIC CONTAINER COLORS (Light mode)
+  successContainer: '#D1FAE5',        // Light container for success states
+  onSuccessContainer: '#065F46',      // Text on success container
+  warningContainer: '#FEF3C7',        // Light container for warning states
+  onWarningContainer: '#92400E',      // Text on warning container
+  infoContainer: '#FFE4CD',           // Light orange container for info states
+  onInfoContainer: '#CC4A1F',         // Text on info container
+
+  // GRAYSCALE PALETTE
+  gray50: '#FAFAFA',
+  gray100: '#F4F4F5',
+  gray200: '#E4E4E7',
+  gray300: '#D4D4D8',
+  gray400: '#A1A1AA',
+  gray500: '#71717A',
+  gray600: '#52525B',
+  gray700: '#3F3F46',
+  gray800: '#27272A',
+  gray900: '#18181B',
+
+  // BACKGROUND COLORS
+  backgroundPrimary: '#FFFFFF',
+  backgroundSecondary: '#F8FAFC',
+
+  surface: '#FFFFFF',
+  surfaceVariant: '#F1F5F9',
+  surfaceSecondary: '#F1F5F9', // Alias
+  surfaceDisabled: '#F4F4F5',     // Disabled surface color
+
+  // TEXT COLORS
+  textPrimary: '#1E293B',
+  textSecondary: '#64748B',
+  textTertiary: '#94A3B8',
+  textDisabled: '#CBD5E1',
+  textInverse: '#FFFFFF',
+
+  // BORDER COLORS
+  border: '#E2E8F0',
+  borderLight: '#F1F5F9',
+  borderMedium: '#CBD5E1',
+  borderFocus: '#3B82F6',
+  borderDisabled: '#F1F5F9',
+
+  // COMPONENT-SPECIFIC COLORS
+  buttonPrimary: '#FF6B35',        // Vibrant Orange
+  buttonSecondary: '#FFB88C',      // Soft Peach
+
+  inputBackground: '#FFFFFF',
+  inputBorder: '#E2E8F0',
+
+  cardBackground: '#FFFFFF',
+
+  // COLOR ALIASES (for backward compatibility and convenience)
+  text: '#1E293B',                    // Alias for textPrimary
+  background: '#FFFFFF',              // Alias for backgroundPrimary
+  card: '#FFFFFF',                    // Alias for cardBackground
+
+  // SPECIAL COLORS
+  transparent: 'transparent',
+  black: '#000000',
+  white: '#FFFFFF',
+
+  // RGBA OVERLAY COLORS (for modals, cards, etc.)
+  modalOverlay: 'rgba(0, 0, 0, 0.5)',
+  overlaySubtle: 'rgba(0, 0, 0, 0.05)',
+  overlayLight: 'rgba(0, 0, 0, 0.1)',
+  overlayMedium: 'rgba(0, 0, 0, 0.3)',
+  overlayBackground: 'rgba(0, 0, 0, 0.05)',
+
+  whiteOverlay: 'rgba(255, 255, 255, 0.2)',
+  whiteOverlayStrong: 'rgba(255, 255, 255, 0.95)',
+  whiteOverlayBorder: 'rgba(255, 255, 255, 0.5)',
+
+  textWhiteOpacity: 'rgba(255, 255, 255, 0.8)',
+
+  errorBackground: 'rgba(239, 68, 68, 0.1)',
+  primaryBackground: 'rgba(255, 107, 53, 0.1)',  // Orange background
+
+  cardOverlay: 'rgba(0, 0, 0, 0.15)',
+
+  inputBackground_RGBA: 'rgba(248, 250, 252, 0.9)',
+
+  // GRADIENTS - Warm Orange Harmony
+  gradient: ['#FF6B35', '#FFB88C'],  // Orange to Peach gradient
+};

package/src/theme/core/constants/DesignConstants.ts

@@ -0,0 +1,31 @@
+/**
+ * DESIGN SYSTEM CONSTANTS
+ * 
+ * Magic numbers and constants used throughout the design system
+ */
+
+export const DESIGN_CONSTANTS = {
+  // Border radius
+  FULL_BORDER_RADIUS: 9999,
+  
+  // Alpha values
+  ALPHA_TRANSPARENT: 0,
+  ALPHA_MINIMUM: 0,
+  ALPHA_MAXIMUM: 1,
+  
+  // Spacing base unit (4px scale)
+  SPACING_BASE_UNIT: 4,
+  
+  // Touch targets
+  MINIMUM_TOUCH_TARGET: 44,
+  
+  // Storage keys
+  STORAGE_NAMESPACE: '@umituz/react-native-design-system-theme',
+  
+  // Validation
+  HEX_COLOR_REGEX: /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/,
+  
+  // Typography
+  MINIMUM_FONT_SIZE: 10,
+  MAXIMUM_FONT_SIZE: 57,
+} as const;

package/src/theme/core/themes.ts

@@ -0,0 +1,118 @@
+/**
+ * Theme Objects - Light and Dark Themes
+ *
+ * Combines BASE_TOKENS + ColorPalette into complete theme objects
+ */
+
+import { BASE_TOKENS } from './BaseTokens';
+import { lightColors, darkColors } from './ColorPalette';
+import type { ColorPalette } from './ColorPalette';
+
+/**
+ * Extended color palette for theme customization
+ */
+export interface ExtendedColorPalette extends ColorPalette {
+  customGradients?: Record<string, [string, string]>;
+}
+
+/**
+ * Complete Theme Object
+ * Combines colors, spacing, typography, borders, and design tokens
+ */
+export interface Theme {
+  colors: ExtendedColorPalette;
+  spacing: typeof BASE_TOKENS.spacing;
+  typography: typeof BASE_TOKENS.typography;
+  borders: typeof BASE_TOKENS.borders;
+  borderRadius: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+  };
+  iconSizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    hero: number;
+  };
+  opacity: {
+    disabled: number;
+    inactive: number;
+    subtle: number;
+    medium: number;
+    full: number;
+  };
+}
+
+/**
+ * Light Theme
+ * Combines static BASE_TOKENS + lightColors
+ */
+export const lightTheme: Theme = {
+  colors: {
+    ...lightColors,
+  },
+  spacing: BASE_TOKENS.spacing,
+  typography: BASE_TOKENS.typography,
+  borders: BASE_TOKENS.borders,
+
+  // Legacy compatibility mappings
+  borderRadius: {
+    sm: BASE_TOKENS.borders.radius.sm,
+    md: BASE_TOKENS.borders.radius.md,
+    lg: BASE_TOKENS.borders.radius.lg,
+    xl: BASE_TOKENS.borders.radius.xl,
+    full: BASE_TOKENS.borders.radius.full,
+  },
+
+  // Icon sizes from spacing
+  iconSizes: {
+    xs: BASE_TOKENS.spacing.iconSizeSmall,
+    sm: BASE_TOKENS.spacing.iconSizeSmall,
+    md: BASE_TOKENS.spacing.iconSizeMedium,
+    lg: BASE_TOKENS.spacing.iconSizeLarge,
+    xl: BASE_TOKENS.spacing.iconSizeXLarge,
+    xxl: BASE_TOKENS.spacing.iconSizeXLarge,
+    hero: BASE_TOKENS.spacing.iconSizeHero,
+  },
+
+  // Opacity levels (static values)
+  opacity: {
+    disabled: 0.6,
+    inactive: 0.7,
+    subtle: 0.8,
+    medium: 0.9,
+    full: 1.0,
+  },
+} as const;
+
+/**
+ * Dark Theme
+ * Combines static BASE_TOKENS + darkColors
+ */
+export const darkTheme: Theme = {
+  ...lightTheme,
+  colors: {
+    ...darkColors,
+  },
+} as const;
+
+/**
+ * Utility function for responsive design
+ */
+export const createResponsiveValue = <T>(
+  _theme: Theme,
+  values: Partial<Record<string, T>>,
+): T => {
+  const value = values.xs || values.sm || Object.values(values)[0];
+  if (value === undefined) {
+    throw new Error('createResponsiveValue: No valid value found');
+  }
+  return value;
+};
+