@campxdev/react-native-blueprint 0.1.0

package/src/lib/theme.ts

@@ -0,0 +1,151 @@
+import { DarkTheme, DefaultTheme, type Theme } from '@react-navigation/native';
+
+/**
+ * Custom theme colors based on your Figma design tokens
+ * Using your categorized color system:
+ * 1. Surfaces - Page and card backgrounds
+ * 2. Text - All text colors with opacity variants
+ * 3. Primary - Main buttons and CTAs
+ * 4. Secondary - Secondary buttons
+ * 5. Tertiary/Accent - Highlights and selections
+ * 6. Borders - All borders and dividers
+ * 7. Highlights - Status/semantic colors
+ * 8. Brand - Brand accent colors (use sparingly)
+ */
+export const THEME = {
+  light: {
+    // === 1. SURFACES ===
+    background: 'hsl(210, 17%, 97%)', // #F7F8FA
+    card: 'hsl(0, 0%, 100%)', // #FFFFFF
+    popover: 'hsl(0, 0%, 100%)', // #FFFFFF
+    muted: 'hsl(0, 0%, 100%)', // #FFFFFF
+
+    // === 2. TEXT ===
+    foreground: 'hsl(0, 0%, 7%)', // #121212
+    cardForeground: 'hsl(0, 0%, 7%)', // #121212
+    popoverForeground: 'hsl(0, 0%, 7%)', // #121212
+    mutedForeground: 'hsla(0, 0%, 7%, 0.7)', // #121212 at 70%
+
+    // === 3. PRIMARY (Main buttons, CTAs) ===
+    primary: 'hsl(200, 13%, 11%)', // #161A1D - Near black
+    primaryForeground: 'hsl(0, 0%, 100%)', // #FFFFFF
+
+    // === 4. SECONDARY (Secondary buttons) ===
+    secondary: 'hsl(218, 14%, 53%)', // #64748B
+    secondaryForeground: 'hsl(0, 0%, 100%)', // #FFFFFF
+
+    // === 5. TERTIARY/ACCENT (Highlights, selections) ===
+    accent: 'hsl(356, 76%, 57%)', // #E43341 - Crimson
+    accentForeground: 'hsl(0, 0%, 100%)', // #FFFFFF
+
+    // === 6. BORDERS ===
+    border: 'hsl(214, 32%, 84%)', // #CBD5E1
+    input: 'hsl(214, 32%, 84%)', // #CBD5E1
+    ring: 'hsl(200, 13%, 11%)', // #161A1D - Same as primary
+
+    // === 7. HIGHLIGHTS ===
+    destructive: 'hsl(356, 87%, 57%)', // #F2353C - Red
+    destructiveForeground: 'hsl(0, 0%, 100%)',
+    success: 'hsl(88, 37%, 52%)', // #88B053 - Green
+    info: 'hsl(189, 45%, 51%)', // #4BAABE - Blue
+    warning: 'hsl(28, 81%, 57%)', // #ED9035 - Orange
+
+    // === 8. BRAND COLORS (Custom - use manually) ===
+    brand1: 'hsl(252, 97%, 25%)', // #1E027F - Deep violet
+    brand2: 'hsl(356, 76%, 57%)', // #E43341 - Crimson
+    brand3: 'hsl(304, 69%, 33%)', // #931C88 - Magenta
+
+    // === CHART COLORS ===
+    chart1: 'hsl(88, 37%, 52%)', // #88B053 - Green
+    chart2: 'hsl(189, 45%, 51%)', // #4BAABE - Blue
+    chart3: 'hsl(28, 81%, 57%)', // #ED9035 - Orange
+    chart4: 'hsl(254, 46%, 42%)', // #573DAB - Purple
+    chart5: 'hsl(348, 78%, 60%)', // #EA4A6B - Pink
+
+    // === MISC ===
+    radius: '0.5rem',
+  },
+  dark: {
+    // === 1. SURFACES ===
+    background: 'hsl(200, 13%, 10%)', // #161A1D
+    card: 'hsl(180, 14%, 13%)', // #1D2727
+    popover: 'hsl(180, 14%, 13%)', // #1D2727
+    muted: 'hsl(180, 14%, 13%)', // #1D2727
+
+    // === 2. TEXT ===
+    foreground: 'hsl(0, 0%, 100%)', // #FFFFFF
+    cardForeground: 'hsl(0, 0%, 100%)', // #FFFFFF
+    popoverForeground: 'hsl(0, 0%, 100%)', // #FFFFFF
+    mutedForeground: 'hsla(0, 0%, 100%, 0.7)', // #FFFFFF at 70%
+
+    // === 3. PRIMARY (Main buttons, CTAs) ===
+    primary: 'hsl(210, 13%, 85%)', // #D0D5D9 - Light grey (softer than white)
+    primaryForeground: 'hsl(200, 13%, 11%)', // #161A1D - Dark text
+
+    // === 4. SECONDARY (Secondary buttons) ===
+    secondary: 'hsl(218, 14%, 53%)', // #64748B
+    secondaryForeground: 'hsl(0, 0%, 100%)', // #FFFFFF
+
+    // === 5. TERTIARY/ACCENT (Highlights, selections) ===
+    accent: 'hsl(356, 76%, 57%)', // #E43341 - Crimson
+    accentForeground: 'hsl(0, 0%, 100%)', // #FFFFFF
+
+    // === 6. BORDERS ===
+    border: 'hsl(215, 25%, 27%)', // #334155 - Balanced slate-700
+    input: 'hsl(215, 25%, 27%)', // #334155
+    ring: 'hsl(210, 13%, 85%)', // #D0D5D9 - Same as primary
+
+    // === 7. HIGHLIGHTS ===
+    destructive: 'hsl(356, 87%, 57%)', // #F2353C - Red
+    destructiveForeground: 'hsl(0, 0%, 100%)',
+    success: 'hsl(88, 37%, 52%)', // #88B053 - Green
+    info: 'hsl(189, 45%, 51%)', // #4BAABE - Blue
+    warning: 'hsl(28, 81%, 57%)', // #ED9035 - Orange
+
+    // === 8. BRAND COLORS (Custom - use manually) ===
+    brand1: 'hsl(244, 100%, 73%)', // #8075FF - Cool violet
+    brand2: 'hsl(356, 76%, 57%)', // #E43341 - Crimson
+    brand3: 'hsl(291, 46%, 61%)', // #C160D4 - Light magenta
+
+    // === CHART COLORS ===
+    chart1: 'hsl(88, 37%, 52%)', // #88B053 - Green
+    chart2: 'hsl(189, 45%, 51%)', // #4BAABE - Blue
+    chart3: 'hsl(28, 81%, 57%)', // #ED9035 - Orange
+    chart4: 'hsl(254, 46%, 42%)', // #573DAB - Purple
+    chart5: 'hsl(348, 78%, 60%)', // #EA4A6B - Pink
+
+    // === MISC ===
+    radius: '0.5rem',
+  },
+};
+
+/**
+ * React Navigation theme configuration
+ * Maps our custom theme to React Navigation's theme structure
+ */
+export const NAV_THEME: Record<'light' | 'dark', Theme> = {
+  light: {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      background: THEME.light.background,
+      border: THEME.light.border,
+      card: THEME.light.card,
+      notification: THEME.light.destructive,
+      primary: THEME.light.primary,
+      text: THEME.light.foreground,
+    },
+  },
+  dark: {
+    ...DarkTheme,
+    colors: {
+      ...DarkTheme.colors,
+      background: THEME.dark.background,
+      border: THEME.dark.border,
+      card: THEME.dark.card,
+      notification: THEME.dark.destructive,
+      primary: THEME.dark.primary,
+      text: THEME.dark.foreground,
+    },
+  },
+};

package/src/lib/utils.ts

@@ -0,0 +1,146 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Utility function to merge Tailwind CSS classes with proper precedence
+ *
+ * Combines clsx (for conditional classes) and tailwind-merge (for deduplication)
+ * to create a single, optimized class string. Later classes override earlier ones.
+ *
+ * @param {...ClassValue[]} inputs - Class values to merge (strings, objects, arrays)
+ * @returns {string} Merged and deduplicated class string
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * cn('px-2 py-1', 'px-4') // => 'py-1 px-4'
+ *
+ * // With conditionals
+ * cn('text-base', isDark && 'text-white', 'font-bold')
+ * // => 'text-base text-white font-bold' (if isDark is true)
+ *
+ * // With objects
+ * cn({
+ *   'bg-primary': isPrimary,
+ *   'bg-secondary': !isPrimary
+ * })
+ *
+ * // Common component pattern
+ * cn('base-classes', variant === 'large' && 'large-classes', className)
+ * ```
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Applies dark mode classes with optional runtime control
+ *
+ * Provides three modes of operation:
+ * 1. Static mode (darkMode undefined): Returns classes with `dark:` prefix for automatic switching
+ * 2. Dark mode (darkMode true): Strips `dark:` prefix and returns only dark classes
+ * 3. Light mode (darkMode false): Returns only base classes
+ *
+ * This function is useful when you need to programmatically control dark mode
+ * instead of relying on Tailwind's automatic dark mode detection.
+ *
+ * @param {string} baseClasses - Classes to apply in light mode
+ * @param {string} darkClasses - Classes to apply in dark mode (with or without `dark:` prefix)
+ * @param {boolean} [darkMode] - Optional dark mode override (true/false/undefined)
+ * @returns {string} Merged class string based on mode
+ *
+ * @example
+ * ```tsx
+ * // Static mode - use Tailwind's automatic detection
+ * cnWithDark('bg-white', 'dark:bg-black')
+ * // => 'bg-white dark:bg-black'
+ *
+ * // Programmatic dark mode
+ * const { isDark } = useTheme();
+ * cnWithDark('bg-white', 'dark:bg-black', isDark)
+ * // => 'bg-black' (if isDark is true)
+ * // => 'bg-white' (if isDark is false)
+ *
+ * // With multiple classes
+ * cnWithDark(
+ *   'bg-white text-black border-gray-200',
+ *   'dark:bg-black dark:text-white dark:border-gray-800',
+ *   isDark
+ * )
+ * ```
+ *
+ * @see {@link cn} for basic class merging
+ * @see {@link useTheme} for accessing theme state
+ */
+export function cnWithDark(
+  baseClasses: string,
+  darkClasses: string,
+  darkMode?: boolean
+): string {
+  if (darkMode === undefined) {
+    // No override provided, use standard dark: prefixed classes
+    return cn(baseClasses, darkClasses);
+  }
+
+  if (darkMode) {
+    // Dark mode enabled - apply dark classes without the dark: prefix
+    const processedDarkClasses = darkClasses
+      .split(' ')
+      .map((cls) => cls.replace(/^dark:/, ''))
+      .join(' ');
+    return cn(processedDarkClasses);
+  }
+
+  // Dark mode disabled - only use base classes
+  return cn(baseClasses);
+}
+
+/**
+ * Get color value based on theme mode
+ *
+ * Simple utility to select between light and dark color values based on the
+ * current theme. Primarily used for native platforms where Tailwind CSS
+ * classes don't work with inline styles.
+ *
+ * @param {string} lightColor - Color value for light mode (CSS color, HSL, RGB, hex)
+ * @param {string} darkColor - Color value for dark mode (CSS color, HSL, RGB, hex)
+ * @param {boolean} [darkMode] - Whether dark mode is active (defaults to light if undefined)
+ * @returns {string} The appropriate color value for the current mode
+ *
+ * @example
+ * ```tsx
+ * import { useTheme } from './ThemeProvider';
+ *
+ * function MyComponent() {
+ *   const { isDark } = useTheme();
+ *
+ *   // Get color for inline styles
+ *   const textColor = getThemeColor('#000000', '#ffffff', isDark);
+ *   const bgColor = getThemeColor('hsl(0, 0%, 100%)', 'hsl(0, 0%, 10%)', isDark);
+ *
+ *   return (
+ *     <View style={{ backgroundColor: bgColor }}>
+ *       <NativeText style={{ color: textColor }}>
+ *         Theme-aware text
+ *       </NativeText>
+ *     </View>
+ *   );
+ * }
+ *
+ * // Without theme context (defaults to light)
+ * const color = getThemeColor('#000', '#fff'); // => '#000'
+ * ```
+ *
+ * @see {@link useTheme} for accessing theme state
+ * @see {@link getThemeColorValue} from theme-config for more advanced usage
+ */
+export function getThemeColor(
+  lightColor: string,
+  darkColor: string,
+  darkMode?: boolean
+): string {
+  if (darkMode === undefined) {
+    return lightColor; // Default to light if no preference
+  }
+  return darkMode ? darkColor : lightColor;
+}