@idealyst/theme 1.0.83 → 1.0.85

package/src/common.ts

@@ -1,92 +0,0 @@
-// =============================================================================
-// COMMON THEME PROPERTIES
-// =============================================================================
-
-// 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')}`,
-}; 

package/src/defaultThemes.md

@@ -1,407 +0,0 @@
-# Default Themes
-
-Pre-built light and dark theme configurations that provide a complete, production-ready theming solution out of the box.
-
-## Overview
-
-The default themes module provides two carefully crafted theme presets:
-- **Light Theme**: Optimized for daylight usage and general accessibility
-- **Dark Theme**: Optimized for low-light environments and reduced eye strain
-
-Both themes use the same color palettes but with different mappings and intent resolutions to ensure optimal readability and usability in their respective contexts.
-
-## Available Themes
-
-### defaultLightTheme
-
-A comprehensive light theme optimized for daylight usage and accessibility.
-
-```tsx
-import { defaultLightTheme } from '@idealyst/theme';
-
-// Theme structure
-const lightTheme = {
-  palettes: { /* 8 color palettes */ },
-  intents: { /* Light-optimized intent mappings */ },
-  colors: { /* Component color system for light backgrounds */ },
-  typography: { /* Font system */ },
-  spacing: { /* Spacing scale */ },
-  borderRadius: { /* Border radius scale */ },
-  shadows: { /* Shadow definitions */ },
-  transitions: { /* Animation timings */ },
-  breakpoints: { /* Responsive breakpoints */ },
-};
-```
-
-**Key Characteristics:**
-- High contrast dark text on light backgrounds
-- Subtle shadows for depth and elevation
-- Warm gray tones for comfort
-- Optimized for daylight viewing
-- WCAG AA compliant contrast ratios
-
-### defaultDarkTheme
-
-A comprehensive dark theme optimized for low-light environments.
-
-```tsx
-import { defaultDarkTheme } from '@idealyst/theme';
-
-// Similar structure to light theme but with dark-optimized values
-const darkTheme = {
-  palettes: { /* Same palettes as light theme */ },
-  intents: { /* Dark-optimized intent mappings */ },
-  colors: { /* Component color system for dark backgrounds */ },
-  // ... other properties optimized for dark theme
-};
-```
-
-**Key Characteristics:**
-- Light text on dark backgrounds
-- Reduced shadows, emphasis on borders
-- Cool gray tones to reduce eye strain
-- Optimized for low-light viewing
-- WCAG AA compliant contrast ratios
-
-## Color System Differences
-
-### Light Theme Colors
-
-```tsx
-// Text colors for light theme
-text: {
-  primary: '#1f2937',     // Dark gray for main text
-  secondary: '#6b7280',   // Medium gray for secondary text
-  disabled: '#9ca3af',    // Light gray for disabled text
-  inverse: '#ffffff',     // White text for dark backgrounds
-  muted: '#d1d5db',       // Very light gray for muted text
-  placeholder: '#9ca3af', // Medium gray for placeholders
-}
-
-// Surface colors for light theme
-surface: {
-  primary: '#ffffff',     // White primary surface
-  secondary: '#f9fafb',   // Very light gray secondary
-  tertiary: '#f3f4f6',    // Light gray tertiary
-  elevated: '#ffffff',    // White elevated surfaces
-  overlay: '#000000cc',   // Dark overlay with opacity
-  inverse: '#1f2937',     // Dark inverse surface
-}
-```
-
-### Dark Theme Colors
-
-```tsx
-// Text colors for dark theme
-text: {
-  primary: '#f9fafb',     // Light gray for main text
-  secondary: '#d1d5db',   // Medium gray for secondary text
-  disabled: '#6b7280',    // Darker gray for disabled text
-  inverse: '#1f2937',     // Dark text for light backgrounds
-  muted: '#9ca3af',       // Medium gray for muted text
-  placeholder: '#9ca3af', // Medium gray for placeholders
-}
-
-// Surface colors for dark theme
-surface: {
-  primary: '#111827',     // Very dark gray primary surface
-  secondary: '#1f2937',   // Dark gray secondary
-  tertiary: '#374151',    // Medium dark gray tertiary
-  elevated: '#1f2937',    // Dark gray elevated surfaces
-  overlay: '#000000e6',   // Black overlay with opacity
-  inverse: '#ffffff',     // White inverse surface
-}
-```
-
-## Intent Mappings
-
-### Light Theme Intents
-
-```tsx
-const lightIntents = {
-  primary: {
-    main: '#3b82f6',        // Blue 500
-    on: '#ffffff',          // White text
-    container: '#dbeafe',   // Blue 100 container
-    onContainer: '#1e40af', // Blue 800 text on container
-    light: '#60a5fa',       // Blue 400 light variant
-    dark: '#2563eb',        // Blue 600 dark variant
-    border: '#2563eb',      // Blue 600 border
-  },
-  success: {
-    main: '#22c55e',        // Green 500
-    on: '#ffffff',
-    container: '#dcfce7',   // Green 100
-    onContainer: '#166534', // Green 800
-    light: '#4ade80',       // Green 400
-    dark: '#16a34a',        // Green 600
-    border: '#16a34a',
-  },
-  // ... other intents
-};
-```
-
-### Dark Theme Intents
-
-```tsx
-const darkIntents = {
-  primary: {
-    main: '#60a5fa',        // Blue 400 (lighter for dark bg)
-    on: '#1e3a8a',          // Blue 900 text
-    container: '#1e40af',   // Blue 800 container
-    onContainer: '#dbeafe', // Blue 100 text on container
-    light: '#93c5fd',       // Blue 300 light variant
-    dark: '#3b82f6',        // Blue 500 dark variant
-    border: '#2563eb',      // Blue 600 border
-  },
-  success: {
-    main: '#4ade80',        // Green 400 (lighter for dark bg)
-    on: '#14532d',          // Green 900 text
-    container: '#166534',   // Green 800 container
-    onContainer: '#dcfce7', // Green 100 text on container
-    light: '#86efac',       // Green 300 light variant
-    dark: '#22c55e',        // Green 500 dark variant
-    border: '#16a34a',      // Green 600 border
-  },
-  // ... other intents
-};
-```
-
-## Typography System
-
-Both themes share the same typography system:
-
-```tsx
-const typography = {
-  fontFamily: {
-    sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace',
-  },
-  fontSize: {
-    xs: 12,   // Extra small
-    sm: 14,   // Small
-    md: 16,   // Medium (base)
-    lg: 18,   // Large
-    xl: 20,   // Extra large
-    xxl: 24,  // Extra extra large
-  },
-  fontWeight: {
-    light: '300',
-    regular: '400',
-    medium: '500',
-    semibold: '600',
-    bold: '700',
-  },
-  lineHeight: {
-    tight: 1.2,
-    normal: 1.5,
-    relaxed: 1.75,
-  },
-};
-```
-
-## Spacing System
-
-Consistent spacing scale for both themes:
-
-```tsx
-const spacing = {
-  xs: 4,    // 0.25rem
-  sm: 8,    // 0.5rem
-  md: 16,   // 1rem
-  lg: 24,   // 1.5rem
-  xl: 32,   // 2rem
-  xxl: 48,  // 3rem
-};
-```
-
-## Shadow System
-
-### Light Theme Shadows
-
-```tsx
-const lightShadows = {
-  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
-  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
-  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
-};
-```
-
-### Dark Theme Shadows
-
-```tsx
-const darkShadows = {
-  sm: '0 1px 2px 0 rgb(0 0 0 / 0.3)',
-  md: '0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)',
-  lg: '0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4)',
-  xl: '0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4)',
-};
-```
-
-## Usage Examples
-
-### Basic Theme Registration
-
-```tsx
-import { StyleSheet } from 'react-native-unistyles';
-import { defaultLightTheme, defaultDarkTheme } from '@idealyst/theme';
-
-StyleSheet.configure({
-  themes: {
-    light: defaultLightTheme,
-    dark: defaultDarkTheme,
-  },
-  settings: {
-    adaptiveThemes: true, // Automatically switch based on system preference
-  },
-});
-```
-
-### Theme Switching
-
-```tsx
-import { UnistylesRuntime } from 'react-native-unistyles';
-
-// Switch to dark theme
-UnistylesRuntime.setTheme('dark');
-
-// Switch to light theme
-UnistylesRuntime.setTheme('light');
-
-// Get current theme
-const currentTheme = UnistylesRuntime.themeName;
-```
-
-### Using Theme in Components
-
-```tsx
-import { StyleSheet } from 'react-native-unistyles';
-
-const styles = StyleSheet.create((theme) => ({
-  container: {
-    backgroundColor: theme.colors.surface.primary,
-    padding: theme.spacing.md,
-    borderRadius: theme.borderRadius.md,
-    shadowColor: theme.shadows.md,
-  },
-  title: {
-    color: theme.colors.text.primary,
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-  },
-  subtitle: {
-    color: theme.colors.text.secondary,
-    fontSize: theme.typography.fontSize.md,
-  },
-}));
-
-const MyComponent = () => {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Title</Text>
-      <Text style={styles.subtitle}>Subtitle</Text>
-    </View>
-  );
-};
-```
-
-## Customization
-
-### Extending Default Themes
-
-```tsx
-import { extendTheme, defaultLightTheme } from '@idealyst/theme';
-
-const customLightTheme = extendTheme(defaultLightTheme, {
-  typography: {
-    fontFamily: {
-      sans: 'Inter, system-ui, sans-serif', // Custom font
-    },
-  },
-  spacing: {
-    xs: 2,    // Tighter spacing
-    sm: 6,
-    md: 12,
-    lg: 20,
-    xl: 28,
-    xxl: 40,
-  },
-});
-```
-
-### Creating Theme Variants
-
-```tsx
-// High contrast light theme
-const highContrastLight = extendTheme(defaultLightTheme, {
-  colors: {
-    text: {
-      primary: '#000000',    // Pure black for maximum contrast
-      secondary: '#333333',
-    },
-    border: {
-      primary: '#000000',
-      focus: '#0066cc',      // High contrast blue
-    },
-  },
-});
-
-// Reduced motion theme
-const reducedMotionTheme = extendTheme(defaultLightTheme, {
-  transitions: {
-    fast: 0,       // No animations
-    normal: 0,
-    slow: 0,
-  },
-});
-```
-
-## Accessibility Features
-
-### WCAG Compliance
-
-Both default themes meet WCAG AA standards:
-- **Text contrast**: 4.5:1 minimum for normal text
-- **Large text contrast**: 3:1 minimum for large text (18pt+)
-- **UI element contrast**: 3:1 minimum for interactive elements
-
-### Color Blind Considerations
-
-- High contrast between different UI states
-- Not relying solely on color for information
-- Clear visual hierarchies
-- Consistent color meanings across the interface
-
-### Low Vision Support
-
-- Sufficient spacing between elements
-- Clear focus indicators
-- High contrast mode support
-- Scalable typography system
-
-## Performance Characteristics
-
-### Memory Usage
-- Themes are computed once and cached
-- Color calculations performed at build time
-- Minimal runtime overhead
-
-### Bundle Size
-- Light theme: ~3KB gzipped
-- Dark theme: ~3KB gzipped
-- Combined default themes: ~5KB gzipped
-
-### Runtime Performance
-- Instant theme switching
-- No color recalculation needed
-- Optimized for 60fps animations
-
-## Best Practices
-
-1. **Start with defaults**: Use default themes as base for custom themes
-2. **Maintain contrast**: Always check contrast ratios when customizing
-3. **Test both themes**: Ensure your app works well in light and dark modes
-4. **Consider context**: Choose appropriate theme based on usage environment
-5. **Accessibility first**: Prioritize readability and usability
-6. **Performance**: Avoid theme switching in tight loops