@umituz/react-native-design-system 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/presentation/hooks/useAppDesignTokens.ts

@@ -1,37 +1,53 @@
 /**
- * useAppDesignTokens Hook - Design Tokens Access
+ * useAppDesignTokens Hook - Theme-Aware Design Tokens
  *
- * ✅ NPM PACKAGE VERSION - Standalone, no theme dependencies
- * ✅ Returns static light theme tokens
- * ✅ Type-safe design tokens
- * ✅ Zero external dependencies
+ * ✅ Accepts optional themeMode parameter
+ * ✅ Returns tokens for specified theme (light/dark)
+ * ✅ Apps control theme, package provides tokens
+ * ✅ Single source of truth
  *
- * NOTE: This is the npm package version which returns light theme only.
- * For dynamic theme switching, apps should use @domains/theme ThemeProvider.
+ * @param themeMode - Optional theme mode ('light' | 'dark'), defaults to 'light'
  *
- * @example
+ * @example Basic usage (light theme)
  * ```typescript
  * import { useAppDesignTokens } from '@umituz/react-native-design-system';
  *
  * const MyComponent = () => {
- *   const tokens = useAppDesignTokens();
+ *   const tokens = useAppDesignTokens(); // Uses light theme by default
  *   return (
  *     <View style={{
  *       backgroundColor: tokens.colors.primary,
- *       padding: tokens.spacing.md,
- *       borderRadius: tokens.borders.radius.md
+ *       padding: tokens.spacing.md
  *     }}>
  *       <Text style={tokens.typography.bodyLarge}>Hello!</Text>
  *     </View>
  *   );
  * };
  * ```
+ *
+ * @example Theme-aware usage
+ * ```typescript
+ * import { useAppDesignTokens } from '@umituz/react-native-design-system';
+ * import { useTheme } from '@domains/theme';
+ *
+ * const MyComponent = () => {
+ *   const { themeMode } = useTheme(); // Get theme from app's theme system
+ *   const tokens = useAppDesignTokens(themeMode); // Pass theme to hook
+ *
+ *   return (
+ *     <View style={{ backgroundColor: tokens.colors.background }}>
+ *       <Text style={{ color: tokens.colors.textPrimary }}>
+ *         This text color changes with theme!
+ *       </Text>
+ *     </View>
+ *   );
+ * };
+ * ```
  */
 
-import { STATIC_DESIGN_TOKENS } from '../tokens/core/TokenFactory';
+import { useMemo } from 'react';
+import { createDesignTokens, type DesignTokens, type ThemeMode } from '../tokens/core/TokenFactory';
 
-export const useAppDesignTokens = () => {
-  // NPM package version: Always return light theme
-  // Apps using factory generator will override this with theme-aware version
-  return STATIC_DESIGN_TOKENS;
+export const useAppDesignTokens = (themeMode: ThemeMode = 'light'): DesignTokens => {
+  return useMemo(() => createDesignTokens(themeMode), [themeMode]);
 };

package/src/presentation/tokens/core/ColorPalette.ts

@@ -41,19 +41,19 @@ export const withAlpha = (hexColor: string, alpha: number): string => {
 
 export const lightColors = {
   // =============================================================================
-  // PRIMARY BRAND COLORS (from theme template)
+  // PRIMARY BRAND COLORS
   // =============================================================================
-  primary: '{{PRIMARY_COLOR}}',
-  primaryLight: '{{PRIMARY_LIGHT_COLOR}}',
-  primaryDark: '{{PRIMARY_DARK_COLOR}}',
+  primary: '#3B82F6',
+  primaryLight: '#60A5FA',
+  primaryDark: '#2563EB',
 
-  secondary: '{{SECONDARY_COLOR}}',
-  secondaryLight: '{{SECONDARY_LIGHT_COLOR}}',
-  secondaryDark: '{{SECONDARY_DARK_COLOR}}',
+  secondary: '#8B5CF6',
+  secondaryLight: '#A78BFA',
+  secondaryDark: '#7C3AED',
 
-  accent: '{{ACCENT_COLOR}}',
-  accentLight: '{{ACCENT_LIGHT_COLOR}}',
-  accentDark: '{{ACCENT_DARK_COLOR}}',
+  accent: '#F59E0B',
+  accentLight: '#FBBF24',
+  accentDark: '#D97706',
 
   // =============================================================================
   // MATERIAL DESIGN 3 - ON COLORS (Text on colored backgrounds)
@@ -129,43 +129,43 @@ export const lightColors = {
   gray900: '#18181B',
 
   // =============================================================================
-  // BACKGROUND COLORS (from theme template)
+  // BACKGROUND COLORS
   // =============================================================================
-  backgroundPrimary: '{{BACKGROUND_COLOR}}',
-  backgroundSecondary: '{{BACKGROUND_SECONDARY_COLOR}}',
+  backgroundPrimary: '#FFFFFF',
+  backgroundSecondary: '#F8FAFC',
 
-  surface: '{{SURFACE_COLOR}}',
-  surfaceVariant: '{{SURFACE_SECONDARY_COLOR}}',
-  surfaceSecondary: '{{SURFACE_SECONDARY_COLOR}}', // Alias
+  surface: '#FFFFFF',
+  surfaceVariant: '#F1F5F9',
+  surfaceSecondary: '#F1F5F9', // Alias
   surfaceDisabled: '#F4F4F5',     // Disabled surface color
 
   // =============================================================================
-  // TEXT COLORS (from theme template)
+  // TEXT COLORS
   // =============================================================================
-  textPrimary: '{{TEXT_PRIMARY_COLOR}}',
-  textSecondary: '{{TEXT_SECONDARY_COLOR}}',
-  textTertiary: '{{TEXT_TERTIARY_COLOR}}',
-  textDisabled: '{{TEXT_DISABLED_COLOR}}',
-  textInverse: '{{TEXT_INVERSE_COLOR}}',
+  textPrimary: '#1E293B',
+  textSecondary: '#64748B',
+  textTertiary: '#94A3B8',
+  textDisabled: '#CBD5E1',
+  textInverse: '#FFFFFF',
 
   // =============================================================================
-  // BORDER COLORS (from theme template)
+  // BORDER COLORS
   // =============================================================================
-  border: '{{BORDER_COLOR}}',
-  borderLight: '{{BORDER_LIGHT_COLOR}}',
-  borderMedium: '{{BORDER_MEDIUM_COLOR}}',
-  borderFocus: '{{BORDER_FOCUS_COLOR}}',
+  border: '#E2E8F0',
+  borderLight: '#F1F5F9',
+  borderMedium: '#CBD5E1',
+  borderFocus: '#3B82F6',
 
   // =============================================================================
   // COMPONENT-SPECIFIC COLORS
   // =============================================================================
-  buttonPrimary: '{{PRIMARY_COLOR}}',
-  buttonSecondary: '{{SECONDARY_COLOR}}',
+  buttonPrimary: '#3B82F6',
+  buttonSecondary: '#8B5CF6',
 
-  inputBackground: '{{SURFACE_COLOR}}',
-  inputBorder: '{{BORDER_COLOR}}',
+  inputBackground: '#FFFFFF',
+  inputBorder: '#E2E8F0',
 
-  cardBackground: '{{SURFACE_COLOR}}',
+  cardBackground: '#FFFFFF',
 
   // =============================================================================
   // SPECIAL COLORS
@@ -204,7 +204,7 @@ export const lightColors = {
   // =============================================================================
   // GRADIENTS
   // =============================================================================
-  gradient: ['{{PRIMARY_COLOR}}', '{{SECONDARY_COLOR}}'],
+  gradient: ['#3B82F6', '#8B5CF6'],
 };
 
 // =============================================================================
@@ -215,17 +215,17 @@ export const darkColors = {
   // =============================================================================
   // PRIMARY BRAND COLORS (dark mode specific colors)
   // =============================================================================
-  primary: '{{PRIMARY_COLOR}}',
-  primaryLight: '{{PRIMARY_LIGHT_COLOR}}',
-  primaryDark: '{{PRIMARY_DARK_COLOR}}',
+  primary: '#3B82F6',
+  primaryLight: '#60A5FA',
+  primaryDark: '#2563EB',
 
-  secondary: '{{SECONDARY_COLOR}}',
-  secondaryLight: '{{SECONDARY_LIGHT_COLOR}}',
-  secondaryDark: '{{SECONDARY_DARK_COLOR}}',
+  secondary: '#8B5CF6',
+  secondaryLight: '#A78BFA',
+  secondaryDark: '#7C3AED',
 
-  accent: '{{ACCENT_COLOR}}',
-  accentLight: '{{ACCENT_LIGHT_COLOR}}',
-  accentDark: '{{ACCENT_DARK_COLOR}}',
+  accent: '#F59E0B',
+  accentLight: '#FBBF24',
+  accentDark: '#D97706',
 
   // =============================================================================
   // MATERIAL DESIGN 3 - ON COLORS (Same as light mode for type consistency)
@@ -303,41 +303,41 @@ export const darkColors = {
   // =============================================================================
   // BACKGROUND COLORS (dark mode specific colors)
   // =============================================================================
-  backgroundPrimary: '{{BACKGROUND_COLOR}}',
-  backgroundSecondary: '{{BACKGROUND_SECONDARY_COLOR}}',
+  backgroundPrimary: '#FFFFFF',
+  backgroundSecondary: '#F8FAFC',
 
-  surface: '{{SURFACE_COLOR}}',
-  surfaceVariant: '{{SURFACE_SECONDARY_COLOR}}',
-  surfaceSecondary: '{{SURFACE_SECONDARY_COLOR}}', // Alias
+  surface: '#FFFFFF',
+  surfaceVariant: '#F1F5F9',
+  surfaceSecondary: '#F1F5F9', // Alias
   surfaceDisabled: '#F4F4F5',     // Same as light mode for type consistency
 
   // =============================================================================
   // TEXT COLORS (same as light mode for type consistency)
   // =============================================================================
-  textPrimary: '{{TEXT_PRIMARY_COLOR}}',
-  textSecondary: '{{TEXT_SECONDARY_COLOR}}',
-  textTertiary: '{{TEXT_TERTIARY_COLOR}}',
-  textDisabled: '{{TEXT_DISABLED_COLOR}}',
-  textInverse: '{{TEXT_INVERSE_COLOR}}',
+  textPrimary: '#1E293B',
+  textSecondary: '#64748B',
+  textTertiary: '#94A3B8',
+  textDisabled: '#CBD5E1',
+  textInverse: '#FFFFFF',
 
   // =============================================================================
   // BORDER COLORS (same as light mode for type consistency)
   // =============================================================================
-  border: '{{BORDER_COLOR}}',
-  borderLight: '{{BORDER_LIGHT_COLOR}}',
-  borderMedium: '{{BORDER_MEDIUM_COLOR}}',
-  borderFocus: '{{BORDER_FOCUS_COLOR}}',
+  border: '#E2E8F0',
+  borderLight: '#F1F5F9',
+  borderMedium: '#CBD5E1',
+  borderFocus: '#3B82F6',
 
   // =============================================================================
   // COMPONENT-SPECIFIC COLORS (same as light mode for type consistency)
   // =============================================================================
-  buttonPrimary: '{{PRIMARY_COLOR}}',
-  buttonSecondary: '{{SECONDARY_COLOR}}',
+  buttonPrimary: '#3B82F6',
+  buttonSecondary: '#8B5CF6',
 
-  inputBackground: '{{SURFACE_COLOR}}',
-  inputBorder: '{{BORDER_COLOR}}',
+  inputBackground: '#FFFFFF',
+  inputBorder: '#E2E8F0',
 
-  cardBackground: '{{SURFACE_COLOR}}',
+  cardBackground: '#FFFFFF',
 
   // =============================================================================
   // SPECIAL COLORS
@@ -378,7 +378,7 @@ export const darkColors = {
   // =============================================================================
   // GRADIENTS (Same as light mode for type consistency)
   // =============================================================================
-  gradient: ['{{PRIMARY_COLOR}}', '{{SECONDARY_COLOR}}'],
+  gradient: ['#3B82F6', '#8B5CF6'],
 };
 
 // =============================================================================