@metacells/mcellui-core 0.1.0

package/src/theme/animations.ts

@@ -0,0 +1,379 @@
+/**
+ * Animation Presets
+ *
+ * Consistent animation configurations for micro-interactions.
+ * Uses Reanimated's spring physics for natural motion.
+ *
+ * Inspired by iOS 17+ animations and Linear App micro-interactions.
+ */
+
+import { Easing, EasingFunction } from 'react-native-reanimated';
+
+// Type definitions for Reanimated-compatible configs
+export interface SpringConfig {
+  damping?: number;
+  mass?: number;
+  stiffness?: number;
+  overshootClamping?: boolean;
+  restDisplacementThreshold?: number;
+  restSpeedThreshold?: number;
+  velocity?: number;
+}
+
+export interface TimingConfig {
+  duration?: number;
+  easing?: EasingFunction;
+}
+
+// Common easing functions using Reanimated's Easing module (worklet-compatible)
+const easeOutQuad = Easing.out(Easing.quad);
+const easeOutCubic = Easing.out(Easing.cubic);
+const easeInQuad = Easing.in(Easing.quad);
+
+/**
+ * Spring configurations for different animation contexts
+ */
+export const springs: SpringTokens = {
+  /** Quick, snappy response - for buttons, toggles */
+  snappy: {
+    damping: 20,
+    stiffness: 300,
+    mass: 0.5,
+  },
+
+  /** Balanced spring - for general UI */
+  default: {
+    damping: 15,
+    stiffness: 200,
+    mass: 0.8,
+  },
+
+  /** Bouncy spring - for playful interactions */
+  bouncy: {
+    damping: 12,
+    stiffness: 180,
+    mass: 0.8,
+  },
+
+  /** Gentle spring - for larger movements */
+  gentle: {
+    damping: 18,
+    stiffness: 120,
+    mass: 1,
+  },
+
+  /** Stiff spring - minimal overshoot */
+  stiff: {
+    damping: 25,
+    stiffness: 400,
+    mass: 0.5,
+  },
+
+  /** Soft spring - for modal animations */
+  soft: {
+    damping: 20,
+    stiffness: 100,
+    mass: 1,
+  },
+};
+
+/**
+ * Timing configurations for linear/eased animations
+ */
+export const timing: TimingTokens = {
+  /** Fast transition - 150ms */
+  fast: {
+    duration: 150,
+    easing: easeOutQuad,
+  },
+
+  /** Default transition - 200ms */
+  default: {
+    duration: 200,
+    easing: easeOutQuad,
+  },
+
+  /** Slow transition - 300ms */
+  slow: {
+    duration: 300,
+    easing: easeOutQuad,
+  },
+
+  /** Enter animation - 250ms ease out */
+  enter: {
+    duration: 250,
+    easing: easeOutCubic,
+  },
+
+  /** Exit animation - 200ms ease in */
+  exit: {
+    duration: 200,
+    easing: easeInQuad,
+  },
+};
+
+/**
+ * Scale values for press animations
+ */
+export const pressScale: PressScaleTokens = {
+  /** Subtle press - for text buttons */
+  subtle: 0.98,
+  /** Default press - for buttons */
+  default: 0.96,
+  /** Prominent press - for cards */
+  prominent: 0.94,
+};
+
+/**
+ * Press scale token structure (flexible for presets)
+ */
+export interface PressScaleTokens {
+  subtle: number;
+  default: number;
+  prominent: number;
+}
+
+/**
+ * Common animation durations in ms
+ */
+export const durations: DurationTokens = {
+  instant: 0,
+  fast: 150,
+  default: 200,
+  slow: 300,
+  slower: 500,
+};
+
+/**
+ * Duration token structure (flexible for presets)
+ */
+export interface DurationTokens {
+  instant: number;
+  fast: number;
+  default: number;
+  slow: number;
+  slower: number;
+}
+
+/**
+ * Spring tokens structure (flexible for presets)
+ */
+export interface SpringTokens {
+  snappy: SpringConfig;
+  default: SpringConfig;
+  bouncy: SpringConfig;
+  gentle: SpringConfig;
+  stiff: SpringConfig;
+  soft: SpringConfig;
+}
+
+/**
+ * Timing tokens structure (flexible for presets)
+ */
+export interface TimingTokens {
+  fast: TimingConfig;
+  default: TimingConfig;
+  slow: TimingConfig;
+  enter: TimingConfig;
+  exit: TimingConfig;
+}
+
+export type SpringPreset = keyof SpringTokens;
+export type TimingPreset = keyof TimingTokens;
+export type PressScalePreset = keyof PressScaleTokens;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Animation Presets (subtle vs playful)
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Animation preset type.
+ * Controls the overall feel of animations throughout the app.
+ *
+ * - `subtle`: Professional, smooth animations with minimal overshoot
+ * - `playful`: Bouncy, energetic animations with more personality
+ */
+export type AnimationPreset = 'subtle' | 'playful';
+
+/**
+ * Animation tokens structure for presets
+ */
+export interface AnimationTokens {
+  springs: SpringTokens;
+  timing: TimingTokens;
+  pressScale: PressScaleTokens;
+  durations: DurationTokens;
+}
+
+/**
+ * Subtle animation preset.
+ * Professional, smooth animations suited for business/productivity apps.
+ * Higher damping = less bounce, faster settling.
+ */
+export const subtleAnimations: AnimationTokens = {
+  springs: {
+    snappy: {
+      damping: 28,
+      stiffness: 350,
+      mass: 0.4,
+    },
+    default: {
+      damping: 22,
+      stiffness: 250,
+      mass: 0.6,
+    },
+    bouncy: {
+      damping: 18,
+      stiffness: 220,
+      mass: 0.6,
+    },
+    gentle: {
+      damping: 24,
+      stiffness: 150,
+      mass: 0.8,
+    },
+    stiff: {
+      damping: 30,
+      stiffness: 450,
+      mass: 0.4,
+    },
+    soft: {
+      damping: 26,
+      stiffness: 130,
+      mass: 0.8,
+    },
+  },
+  timing: {
+    fast: {
+      duration: 120,
+      easing: easeOutQuad,
+    },
+    default: {
+      duration: 180,
+      easing: easeOutQuad,
+    },
+    slow: {
+      duration: 280,
+      easing: easeOutQuad,
+    },
+    enter: {
+      duration: 220,
+      easing: easeOutCubic,
+    },
+    exit: {
+      duration: 180,
+      easing: easeInQuad,
+    },
+  },
+  pressScale: {
+    subtle: 0.99,
+    default: 0.97,
+    prominent: 0.95,
+  },
+  durations: {
+    instant: 0,
+    fast: 120,
+    default: 180,
+    slow: 280,
+    slower: 450,
+  },
+};
+
+/**
+ * Playful animation preset.
+ * Bouncy, energetic animations suited for consumer/social apps.
+ * Lower damping = more bounce, more overshoot.
+ */
+export const playfulAnimations: AnimationTokens = {
+  springs: {
+    snappy: {
+      damping: 14,
+      stiffness: 280,
+      mass: 0.5,
+    },
+    default: {
+      damping: 12,
+      stiffness: 180,
+      mass: 0.8,
+    },
+    bouncy: {
+      damping: 8,
+      stiffness: 150,
+      mass: 0.9,
+    },
+    gentle: {
+      damping: 14,
+      stiffness: 100,
+      mass: 1.1,
+    },
+    stiff: {
+      damping: 18,
+      stiffness: 350,
+      mass: 0.5,
+    },
+    soft: {
+      damping: 16,
+      stiffness: 80,
+      mass: 1.1,
+    },
+  },
+  timing: {
+    fast: {
+      duration: 180,
+      easing: easeOutQuad,
+    },
+    default: {
+      duration: 240,
+      easing: easeOutQuad,
+    },
+    slow: {
+      duration: 350,
+      easing: easeOutQuad,
+    },
+    enter: {
+      duration: 300,
+      easing: easeOutCubic,
+    },
+    exit: {
+      duration: 220,
+      easing: easeInQuad,
+    },
+  },
+  pressScale: {
+    subtle: 0.97,
+    default: 0.94,
+    prominent: 0.90,
+  },
+  durations: {
+    instant: 0,
+    fast: 180,
+    default: 240,
+    slow: 350,
+    slower: 550,
+  },
+};
+
+/**
+ * Get animation tokens for a specific preset.
+ */
+export function getAnimationPreset(preset: AnimationPreset): AnimationTokens {
+  switch (preset) {
+    case 'subtle':
+      return subtleAnimations;
+    case 'playful':
+      return playfulAnimations;
+    default:
+      // Default behavior matches the original springs/timing
+      return {
+        springs,
+        timing,
+        pressScale,
+        durations,
+      };
+  }
+}
+
+/**
+ * Default animation preset.
+ */
+export const defaultAnimationPreset: AnimationPreset = 'subtle';

package/src/theme/colors.ts

@@ -0,0 +1,266 @@
+/**
+ * Theme Colors
+ *
+ * Semantic color tokens that adapt to light/dark mode.
+ * Inspired by iOS 17+ Dynamic Colors, Arc Browser, and Linear App.
+ */
+
+// Base color palette (raw values)
+export const palette = {
+  // Neutral scale
+  neutral: {
+    0: '#ffffff',
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#e5e5e5',
+    300: '#d4d4d4',
+    400: '#a3a3a3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+    950: '#0a0a0a',
+  },
+
+  // Primary blue
+  primary: {
+    50: '#eff6ff',
+    100: '#dbeafe',
+    200: '#bfdbfe',
+    300: '#93c5fd',
+    400: '#60a5fa',
+    500: '#3b82f6',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    800: '#1e40af',
+    900: '#1e3a8a',
+  },
+
+  // Success green
+  success: {
+    50: '#f0fdf4',
+    100: '#dcfce7',
+    200: '#bbf7d0',
+    300: '#86efac',
+    400: '#4ade80',
+    500: '#22c55e',
+    600: '#16a34a',
+    700: '#15803d',
+    800: '#166534',
+    900: '#14532d',
+  },
+
+  // Warning amber
+  warning: {
+    50: '#fffbeb',
+    100: '#fef3c7',
+    200: '#fde68a',
+    300: '#fcd34d',
+    400: '#fbbf24',
+    500: '#f59e0b',
+    600: '#d97706',
+    700: '#b45309',
+    800: '#92400e',
+    900: '#78350f',
+  },
+
+  // Error red
+  error: {
+    50: '#fef2f2',
+    100: '#fee2e2',
+    200: '#fecaca',
+    300: '#fca5a5',
+    400: '#f87171',
+    500: '#ef4444',
+    600: '#dc2626',
+    700: '#b91c1c',
+    800: '#991b1b',
+    900: '#7f1d1d',
+  },
+} as const;
+
+// Semantic colors for light mode
+export const lightColors = {
+  // Backgrounds
+  background: palette.neutral[0],
+  backgroundSubtle: palette.neutral[50],
+  backgroundMuted: palette.neutral[100],
+  backgroundElevated: palette.neutral[0],
+
+  // Foreground/Text
+  foreground: palette.neutral[900],
+  foregroundMuted: palette.neutral[500],
+  foregroundSubtle: palette.neutral[400],
+
+  // Borders
+  border: palette.neutral[200],
+  borderMuted: palette.neutral[100],
+  borderFocused: palette.primary[500],
+
+  // Primary
+  primary: palette.primary[500],
+  primaryForeground: palette.neutral[0],
+  primaryMuted: palette.primary[100],
+
+  // Secondary
+  secondary: palette.neutral[100],
+  secondaryForeground: palette.neutral[900],
+
+  // Destructive
+  destructive: palette.error[500],
+  destructiveForeground: palette.neutral[0],
+
+  // Success
+  success: palette.success[500],
+  successForeground: palette.neutral[0],
+  successMuted: palette.success[100],
+
+  // Warning
+  warning: palette.warning[500],
+  warningForeground: palette.neutral[900],
+  warningMuted: palette.warning[100],
+
+  // Error
+  error: palette.error[500],
+  errorForeground: palette.neutral[0],
+  errorMuted: palette.error[100],
+
+  // Card
+  card: palette.neutral[0],
+  cardForeground: palette.neutral[900],
+
+  // Input
+  input: palette.neutral[0],
+  inputBorder: palette.neutral[200],
+  inputPlaceholder: palette.neutral[400],
+
+  // Overlay
+  overlay: 'rgba(0, 0, 0, 0.5)',
+  scrim: 'rgba(0, 0, 0, 0.3)',
+} as const;
+
+// Semantic colors for dark mode
+export const darkColors = {
+  // Backgrounds
+  background: palette.neutral[950],
+  backgroundSubtle: palette.neutral[900],
+  backgroundMuted: palette.neutral[800],
+  backgroundElevated: palette.neutral[900],
+
+  // Foreground/Text
+  foreground: palette.neutral[50],
+  foregroundMuted: palette.neutral[400],
+  foregroundSubtle: palette.neutral[500],
+
+  // Borders
+  border: palette.neutral[800],
+  borderMuted: palette.neutral[900],
+  borderFocused: palette.primary[400],
+
+  // Primary
+  primary: palette.primary[400],
+  primaryForeground: palette.neutral[900],
+  primaryMuted: palette.primary[900],
+
+  // Secondary
+  secondary: palette.neutral[800],
+  secondaryForeground: palette.neutral[50],
+
+  // Destructive
+  destructive: palette.error[500],
+  destructiveForeground: palette.neutral[0],
+
+  // Success
+  success: palette.success[400],
+  successForeground: palette.neutral[900],
+  successMuted: palette.success[900],
+
+  // Warning
+  warning: palette.warning[400],
+  warningForeground: palette.neutral[900],
+  warningMuted: palette.warning[900],
+
+  // Error
+  error: palette.error[400],
+  errorForeground: palette.neutral[0],
+  errorMuted: palette.error[900],
+
+  // Card
+  card: palette.neutral[900],
+  cardForeground: palette.neutral[50],
+
+  // Input
+  input: palette.neutral[800],
+  inputBorder: palette.neutral[700],
+  inputPlaceholder: palette.neutral[500],
+
+  // Overlay
+  overlay: 'rgba(0, 0, 0, 0.7)',
+  scrim: 'rgba(0, 0, 0, 0.5)',
+} as const;
+
+/**
+ * Theme colors interface.
+ * Uses string type to allow color customization and presets.
+ */
+export interface ThemeColors {
+  // Backgrounds
+  background: string;
+  backgroundSubtle: string;
+  backgroundMuted: string;
+  backgroundElevated: string;
+
+  // Foreground/Text
+  foreground: string;
+  foregroundMuted: string;
+  foregroundSubtle: string;
+
+  // Borders
+  border: string;
+  borderMuted: string;
+  borderFocused: string;
+
+  // Primary
+  primary: string;
+  primaryForeground: string;
+  primaryMuted: string;
+
+  // Secondary
+  secondary: string;
+  secondaryForeground: string;
+
+  // Destructive
+  destructive: string;
+  destructiveForeground: string;
+
+  // Success
+  success: string;
+  successForeground: string;
+  successMuted: string;
+
+  // Warning
+  warning: string;
+  warningForeground: string;
+  warningMuted: string;
+
+  // Error
+  error: string;
+  errorForeground: string;
+  errorMuted: string;
+
+  // Card
+  card: string;
+  cardForeground: string;
+
+  // Input
+  input: string;
+  inputBorder: string;
+  inputPlaceholder: string;
+
+  // Overlay
+  overlay: string;
+  scrim: string;
+}
+
+export type ColorKey = keyof ThemeColors;