@umituz/react-native-design-system 1.15.0 → 2.0.1

package/src/theme/core/tokens/Spacing.ts

@@ -0,0 +1,38 @@
+/**
+ * SPACING TOKENS
+ * 
+ * Spacing scale and semantic spacing values
+ */
+
+import type { Spacing } from './BaseTokens';
+
+export const spacing: Spacing = {
+  // Base Spacing Scale (4px base unit)
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+  xxxl: 64,
+
+  // Semantic Spacing
+  screenPadding: 20,
+  cardPadding: 16,
+  buttonPadding: 16,
+  inputPadding: 12,
+  sectionSpacing: 24,
+
+  // Icon Sizes
+  iconSizeSmall: 16,
+  iconSizeMedium: 20,
+  iconSizeLarge: 24,
+  iconSizeXLarge: 32,
+  iconSizeHero: 64,
+
+  // Component Heights
+  buttonHeight: 48,
+  inputHeight: 48,
+  appBarHeight: 56,
+  tabBarHeight: 60,
+};

package/src/theme/core/tokens/Typography.ts

@@ -0,0 +1,143 @@
+/**
+ * TYPOGRAPHY TOKENS
+ * 
+ * Typography scale and text styles following Material Design 3
+ */
+
+import type { TextStyle } from 'react-native';
+import type { Typography } from './BaseTokens';
+
+export const typography: Typography = {
+  displayLarge: {
+    fontSize: 57,
+    fontWeight: '400',
+    lineHeight: 64,
+    letterSpacing: -0.25,
+  } as TextStyle,
+  displayMedium: {
+    fontSize: 45,
+    fontWeight: '400',
+    lineHeight: 52,
+    letterSpacing: 0,
+  } as TextStyle,
+  displaySmall: {
+    fontSize: 36,
+    fontWeight: '400',
+    lineHeight: 44,
+    letterSpacing: 0,
+  } as TextStyle,
+  headlineLarge: {
+    fontSize: 32,
+    fontWeight: '400',
+    lineHeight: 40,
+    letterSpacing: 0,
+  } as TextStyle,
+  headlineMedium: {
+    fontSize: 28,
+    fontWeight: '400',
+    lineHeight: 36,
+    letterSpacing: 0,
+  } as TextStyle,
+  headlineSmall: {
+    fontSize: 24,
+    fontWeight: '400',
+    lineHeight: 32,
+    letterSpacing: 0,
+  } as TextStyle,
+  titleLarge: {
+    fontSize: 22,
+    fontWeight: '500',
+    lineHeight: 28,
+    letterSpacing: 0,
+  } as TextStyle,
+  titleMedium: {
+    fontSize: 16,
+    fontWeight: '500',
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  } as TextStyle,
+  titleSmall: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  } as TextStyle,
+  bodyLarge: {
+    fontSize: 16,
+    fontWeight: '400',
+    lineHeight: 24,
+    letterSpacing: 0.5,
+  } as TextStyle,
+  bodyMedium: {
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  } as TextStyle,
+  bodySmall: {
+    fontSize: 12,
+    fontWeight: '400',
+    lineHeight: 16,
+    letterSpacing: 0.4,
+  } as TextStyle,
+  labelLarge: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  } as TextStyle,
+  labelMedium: {
+    fontSize: 12,
+    fontWeight: '500',
+    lineHeight: 16,
+    letterSpacing: 0.5,
+  } as TextStyle,
+  labelSmall: {
+    fontSize: 11,
+    fontWeight: '500',
+    lineHeight: 16,
+    letterSpacing: 0.5,
+  } as TextStyle,
+  button: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  } as TextStyle,
+  caption: {
+    fontSize: 12,
+    fontWeight: '400',
+    lineHeight: 16,
+    letterSpacing: 0.4,
+  } as TextStyle,
+  overline: {
+    fontSize: 10,
+    fontWeight: '500',
+    lineHeight: 16,
+    letterSpacing: 1.5,
+    textTransform: 'uppercase',
+  } as TextStyle,
+    // Legacy compatibility aliases
+  headingLarge: {
+    fontSize: 32,
+    fontWeight: '700',
+    lineHeight: 40,
+    letterSpacing: 0,
+  } as TextStyle,
+  headingMedium: {
+    fontSize: 24,
+    fontWeight: '600',
+    lineHeight: 32,
+    letterSpacing: 0,
+  } as TextStyle,
+  headingSmall: {
+    fontSize: 20,
+    fontWeight: '600',
+    lineHeight: 28,
+    letterSpacing: 0,
+  } as TextStyle,
+  // Font weight helpers (for inline fontWeight usage)
+  semibold: '600' as const,
+  medium: '500' as const,
+  bold: '700' as const,
+};

package/src/theme/hooks/useAppDesignTokens.ts

@@ -0,0 +1,45 @@
+/**
+ * useAppDesignTokens Hook - Theme-Aware Design Tokens
+ *
+ * ✅ Automatically reads theme from global store
+ * ✅ No parameters needed - fully automatic!
+ * ✅ Returns tokens for current theme (light/dark)
+ * ✅ Single source of truth
+ *
+ * @example Usage (fully automatic theme-aware)
+ * ```typescript
+ * import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+ *
+ * const MyComponent = () => {
+ *   const tokens = useAppDesignTokens(); // Automatically uses current theme!
+ *   return (
+ *     <View style={{
+ *       backgroundColor: tokens.colors.primary,
+ *       padding: tokens.spacing.md
+ *     }}>
+ *       <Text style={tokens.typography.bodyLarge}>Hello!</Text>
+ *     </View>
+ *   );
+ * };
+ * ```
+ *
+ * How it works:
+ * - Reads themeMode from global store (useDesignSystemTheme)
+ * - App's theme store syncs to global store automatically
+ * - All components get correct tokens without prop drilling
+ * - Change theme once, everything updates!
+ */
+
+import { useMemo } from 'react';
+import { createDesignTokens, type DesignTokens } from '../core/TokenFactory';
+import { useDesignSystemTheme } from '../infrastructure/globalThemeStore';
+
+export const useAppDesignTokens = (): DesignTokens => {
+  const { themeMode, customColors } = useDesignSystemTheme();
+  
+  return useMemo(() => {
+    const mode = themeMode === 'dark' ? 'dark' : 'light';
+    return createDesignTokens(mode, customColors);
+  }, [themeMode, customColors]);
+};
+

package/src/theme/hooks/useCommonStyles.ts

@@ -0,0 +1,248 @@
+/**
+ * Common Styles - Reusable Style Patterns
+ *
+ * Centralized style utilities to reduce duplication across screens.
+ * These styles are composable and follow DRY principles.
+ *
+ * Usage:
+ * ```typescript
+ * import { useCommonStyles } from '@umituz/react-native-design-system-theme';
+ *
+ * const MyComponent = () => {
+ *   const commonStyles = useCommonStyles();
+ *   return <View style={commonStyles.screenContainer}>...</View>;
+ * };
+ * ```
+ */
+
+import { useMemo } from 'react';
+import type { ViewStyle, TextStyle } from 'react-native';
+import { useAppDesignTokens } from './useAppDesignTokens';
+
+/**
+ * Hook to get common styles with dynamic theme support
+ * Memoized to prevent unnecessary re-renders
+ */
+export const useCommonStyles = () => {
+  const tokens = useAppDesignTokens();
+  
+  return useMemo(() => ({
+    // ========================================================================
+    // SCREEN CONTAINERS
+    // ========================================================================
+    /**
+     * Standard full-screen container
+     * Most common pattern: flex: 1 with background color
+     */
+    screenContainer: {
+      flex: 1,
+      backgroundColor: tokens.colors.backgroundPrimary,
+    } as ViewStyle,
+    
+    /**
+     * Basic flex container without background
+     * Use when background is set elsewhere or not needed
+     */
+    flexContainer: {
+      flex: 1,
+    } as ViewStyle,
+    
+    /**
+     * Screen container with secondary background
+     */
+    screenContainerSecondary: {
+      flex: 1,
+      backgroundColor: tokens.colors.backgroundSecondary,
+    } as ViewStyle,
+    
+    // ========================================================================
+    // SCROLL CONTAINERS
+    // ========================================================================
+    /**
+     * Standard ScrollView wrapper
+     */
+    scrollView: {
+      flex: 1,
+    } as ViewStyle,
+    
+    /**
+     * ScrollView content container with standard padding
+     */
+    scrollContent: {
+      paddingHorizontal: tokens.spacing.lg,
+      paddingBottom: tokens.spacing.xl,
+    } as ViewStyle,
+    
+    /**
+     * ScrollView content that grows to fill available space
+     */
+    scrollContentGrow: {
+      flexGrow: 1,
+      padding: tokens.spacing.lg,
+    } as ViewStyle,
+    
+    /**
+     * Centered scroll content (for forms, onboarding screens)
+     */
+    scrollContentCentered: {
+      flexGrow: 1,
+      padding: tokens.spacing.lg,
+      justifyContent: 'center',
+    } as ViewStyle,
+    
+    // ========================================================================
+    // LAYOUT UTILITIES
+    // ========================================================================
+    /**
+     * Centered container - both horizontal and vertical
+     * Perfect for empty states, splash screens
+     */
+    centerContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    } as ViewStyle,
+    
+    /**
+     * Centered container with padding
+     */
+    centerContainerPadded: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: tokens.spacing.xl,
+    } as ViewStyle,
+    
+    /**
+     * Horizontal row layout
+     */
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    } as ViewStyle,
+    
+    /**
+     * Horizontal row with space between
+     */
+    rowBetween: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    } as ViewStyle,
+    
+    /**
+     * Horizontal row centered
+     */
+    rowCenter: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    } as ViewStyle,
+    
+    // ========================================================================
+    // PADDING UTILITIES
+    // ========================================================================
+    /**
+     * Standard horizontal padding
+     */
+    paddedHorizontal: {
+      paddingHorizontal: tokens.spacing.lg,
+    } as ViewStyle,
+    
+    /**
+     * Standard vertical padding
+     */
+    paddedVertical: {
+      paddingVertical: tokens.spacing.lg,
+    } as ViewStyle,
+    
+    /**
+     * Standard padding all sides
+     */
+    padded: {
+      padding: tokens.spacing.lg,
+    } as ViewStyle,
+    
+    // ========================================================================
+    // SECTION STYLES
+    // ========================================================================
+    /**
+     * Standard section container
+     */
+    section: {
+      marginBottom: tokens.spacing.xl,
+    } as ViewStyle,
+    
+    /**
+     * Section with padding
+     */
+    sectionPadded: {
+      marginBottom: tokens.spacing.xl,
+      paddingHorizontal: tokens.spacing.lg,
+    } as ViewStyle,
+    
+    // ========================================================================
+    // TEXT STYLES
+    // ========================================================================
+    /**
+     * Screen title - primary heading
+     */
+    screenTitle: {
+      ...tokens.typography.headingLarge,
+      color: tokens.colors.textPrimary,
+      marginBottom: tokens.spacing.sm,
+    } as TextStyle,
+    
+    /**
+     * Section title
+     */
+    sectionTitle: {
+      ...tokens.typography.headingMedium,
+      color: tokens.colors.textPrimary,
+      marginBottom: tokens.spacing.md,
+    } as TextStyle,
+    
+    /**
+     * Subtitle/description text
+     */
+    subtitle: {
+      ...tokens.typography.bodyMedium,
+      color: tokens.colors.textSecondary,
+      textAlign: 'center',
+    } as TextStyle,
+    
+    /**
+     * Body text
+     */
+    bodyText: {
+      ...tokens.typography.bodyMedium,
+      color: tokens.colors.textPrimary,
+    } as TextStyle,
+    
+    /**
+     * Secondary text (muted)
+     */
+    secondaryText: {
+      ...tokens.typography.bodySmall,
+      color: tokens.colors.textSecondary,
+    } as TextStyle,
+    
+    // ========================================================================
+    // FORM STYLES
+    // ========================================================================
+    /**
+     * Form container
+     */
+    form: {
+      width: '100%',
+    } as ViewStyle,
+    
+    /**
+     * Form header section
+     */
+    formHeader: {
+      alignItems: 'center',
+      marginBottom: tokens.spacing.xl,
+    } as ViewStyle,
+  }), [tokens]);
+};

package/src/theme/hooks/useThemedStyles.ts

@@ -0,0 +1,68 @@
+/**
+ * useThemedStyles Hook
+ * Helper hook for creating StyleSheets with theme support
+ *
+ * Usage:
+ * ```typescript
+ * const createStyles = (theme: Theme) => StyleSheet.create({
+ *   container: {
+ *     backgroundColor: theme.colors.backgroundPrimary,
+ *   }
+ * });
+ *
+ * const Component = () => {
+ *   const styles = useThemedStyles(createStyles);
+ *   return <View style={styles.container} />;
+ * };
+ * ```
+ */
+
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import { useTheme } from '../infrastructure/stores/themeStore';
+import type { Theme } from '../core/themes';
+
+type NamedStyles<T> = {
+  [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
+};
+
+/**
+ * Hook for creating themed styles
+ * Returns memoized styles that update when theme changes
+ */
+export function useThemedStyles<T extends NamedStyles<T>>(
+  createStyles: (theme: Theme) => T,
+): T {
+  const { theme } = useTheme();
+
+  return useMemo(() => createStyles(theme), [theme, createStyles]);
+}
+
+/**
+ * Alternative: Direct StyleSheet creation with theme
+ * Returns memoized styles that update when theme changes
+ */
+export function useThemedStyleSheet<T extends NamedStyles<T>>(
+  styleFactory: (theme: Theme) => T,
+): T {
+  const { theme } = useTheme();
+
+  return useMemo(
+    () => StyleSheet.create(styleFactory(theme)),
+    [theme, styleFactory],
+  );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+

package/src/theme/index.ts

@@ -0,0 +1,94 @@
+/**
+ * @umituz/react-native-design-system-theme - Public API
+ *
+ * Theme management system for React Native apps
+ * Provides colors, design tokens, and theme state management
+ *
+ * Usage:
+ *   import { useAppDesignTokens, useDesignSystemTheme, lightColors, darkColors } from '@umituz/react-native-design-system-theme';
+ */
+
+// =============================================================================
+// COLOR PALETTE
+// =============================================================================
+
+export {
+  lightColors,
+  darkColors,
+  getColorPalette,
+  withAlpha,
+  type ColorPalette,
+  type ThemeMode,
+} from './core/ColorPalette';
+
+export {
+  applyCustomColors,
+  type CustomThemeColors,
+} from './core/CustomColors';
+
+// =============================================================================
+// BASE TOKENS - Static Design Tokens
+// =============================================================================
+
+export {
+  BASE_TOKENS,
+  BASE_TOKENS as STATIC_TOKENS,
+  spacing,
+  typography,
+  borders,
+  type Spacing,
+  type Typography,
+  type Borders,
+  type BaseTokens,
+  type IconSizes,
+  type Opacity,
+  type AvatarSizes,
+  type ComponentSizes,
+} from './core/BaseTokens';
+
+// =============================================================================
+// TOKEN FACTORY
+// =============================================================================
+
+export {
+  createDesignTokens,
+  type DesignTokens,
+} from './core/TokenFactory';
+
+// =============================================================================
+// HOOKS
+// =============================================================================
+
+export { useAppDesignTokens } from './hooks/useAppDesignTokens';
+export { useDesignSystemTheme } from './infrastructure/globalThemeStore';
+export { useTheme } from './infrastructure/stores/themeStore';
+export { useThemedStyles, useThemedStyleSheet } from './hooks/useThemedStyles';
+export { useCommonStyles } from './hooks/useCommonStyles';
+
+// =============================================================================
+// THEME OBJECTS
+// =============================================================================
+
+export {
+  lightTheme,
+  darkTheme,
+  createResponsiveValue,
+  type Theme,
+  type ExtendedColorPalette,
+} from './core/themes';
+
+// =============================================================================
+// STORAGE
+// =============================================================================
+
+export { ThemeStorage } from './infrastructure/storage/ThemeStorage';
+
+// =============================================================================
+// NAVIGATION THEME
+// =============================================================================
+
+export {
+  createNavigationTheme,
+  type NavigationTheme,
+} from './core/NavigationTheme';
+

package/src/theme/infrastructure/globalThemeStore.ts

@@ -0,0 +1,69 @@
+/**
+ * Global Theme Store for Design System
+ *
+ * Minimal Zustand store for theme state management.
+ * Apps can sync their theme state with this global store.
+ *
+ * WHY THIS EXISTS:
+ * - ScreenLayout needs to know current theme mode
+ * - Without prop drilling or Context API
+ * - Single source of truth for design system components
+ * - Apps control theme, design system reacts
+ *
+ * USAGE IN APP:
+ * ```typescript
+ * import { useDesignSystemTheme } from '@umituz/react-native-design-system-theme';
+ * import { useTheme } from '@domains/theme';
+ *
+ * // Sync app theme with design system
+ * const { themeMode } = useTheme();
+ * const { setThemeMode } = useDesignSystemTheme();
+ *
+ * useEffect(() => {
+ *   setThemeMode(themeMode);
+ * }, [themeMode]);
+ * ```
+ */
+
+import { create } from 'zustand';
+import type { ThemeMode } from '../core/ColorPalette';
+import type { CustomThemeColors } from '../core/CustomColors';
+
+interface GlobalThemeStore {
+  /** Current theme mode */
+  themeMode: ThemeMode;
+
+  /** Custom theme colors override */
+  customColors?: CustomThemeColors;
+
+  /** Update theme mode (called by app when theme changes) */
+  setThemeMode: (mode: ThemeMode) => void;
+
+  /** Set custom theme colors (called by app when custom colors change) */
+  setCustomColors: (colors?: CustomThemeColors) => void;
+}
+
+/**
+ * Global theme store for design system components
+ *
+ * This is a MINIMAL store - app has the real theme logic.
+ * Design system just mirrors the current theme for its components.
+ */
+export const useDesignSystemTheme = create<GlobalThemeStore>()((set: any, get: any) => ({
+  themeMode: 'dark',
+  customColors: undefined,
+  setThemeMode: (mode: ThemeMode) => {
+    // Only update if mode actually changed to prevent unnecessary re-renders
+    const currentMode = get().themeMode;
+    if (currentMode !== mode) {
+      set({ themeMode: mode });
+    }
+  },
+  setCustomColors: (colors?: CustomThemeColors) => {
+    set({ customColors: colors });
+  },
+}));
+
+// Re-export ThemeMode for backward compatibility
+export type { ThemeMode };
+