@praxiis/ui 0.0.1

package/src/tokens/colors.ts

@@ -0,0 +1,371 @@
+/**
+ * MiTiendita Design System - Color Tokens
+ *
+ * Color philosophy:
+ * - Vibrant blue as primary for trust and action
+ * - Pink/red accent for energy and highlights
+ * - Clean neutral grays for professional feel
+ * - Designed for modern e-commerce/retail app
+ *
+ * @example
+ * // Use semantic tokens, not base colors
+ * backgroundColor: theme.colors.surface.primary
+ */
+
+// =============================================================================
+// BASE COLORS (Primitives)
+// These are implementation details. Prefer semantic tokens in components.
+// =============================================================================
+
+export const baseColors = {
+  // Transparent
+  transparent: 'transparent',
+
+  // Pure white/black
+  white: '#FFFFFF',
+  black: '#000000',
+
+  // Blue (Primary) - Trust, action, tech-forward
+  blue: {
+    50: '#E6F0FE',
+    100: '#CCE1FD',
+    200: '#99C3FB',
+    300: '#66A5F9',
+    400: '#348AF9',
+    500: '#016DF7', // Primary blue
+    600: '#0158C6',
+    700: '#014294',
+    800: '#002C63',
+    900: '#001631',
+  },
+
+  // Pink/Red (Accent) - Energy, highlights, CTAs
+  pink: {
+    50: '#FFE8EC',
+    100: '#FFD1D9',
+    200: '#FFA3B3',
+    300: '#FF758E',
+    400: '#FF4768',
+    500: '#FF375F', // Primary pink/red
+    600: '#CC2C4C',
+    700: '#992139',
+    800: '#661626',
+    900: '#330B13',
+  },
+
+  // Yellow (Warning/Accent) - Attention, highlights
+  yellow: {
+    50: '#FFF8E6',
+    100: '#FEF1CC',
+    200: '#FDE399',
+    300: '#FCD566',
+    400: '#FBC733',
+    500: '#FBBC04', // Primary yellow
+    600: '#C99603',
+    700: '#977102',
+    800: '#644B01',
+    900: '#322601',
+  },
+
+  // Green (Success) - Positive, confirmation
+  green: {
+    50: '#E7F9EC',
+    100: '#CFF3D9',
+    200: '#9FE7B3',
+    300: '#6FDB8D',
+    400: '#3FCF67',
+    500: '#35C759', // Primary green
+    600: '#2A9F47',
+    700: '#207735',
+    800: '#155024',
+    900: '#0B2812',
+  },
+
+  // Orange (Secondary accent) - Warmth, energy
+  orange: {
+    50: '#FFF0E9',
+    100: '#FFE1D3',
+    200: '#FFC3A7',
+    300: '#FFA57B',
+    400: '#FF874F',
+    500: '#FF6838', // Primary orange
+    600: '#CC532D',
+    700: '#993E22',
+    800: '#662A16',
+    900: '#33150B',
+  },
+
+  // Amber (Alternative warning)
+  amber: {
+    50: '#FEF5E6',
+    100: '#FDEBCC',
+    200: '#FBD799',
+    300: '#F9C366',
+    400: '#F7AF33',
+    500: '#F29423', // Primary amber
+    600: '#C2771C',
+    700: '#915915',
+    800: '#613C0E',
+    900: '#301E07',
+  },
+
+  // Red (Error) - Alerts, errors
+  red: {
+    50: '#FEE9EA',
+    100: '#FDD3D5',
+    200: '#FBA7AB',
+    300: '#F97B81',
+    400: '#F74F57',
+    500: '#F94545', // Primary red
+    600: '#C73737',
+    700: '#952929',
+    800: '#641C1C',
+    900: '#320E0E',
+  },
+
+  // Purple (Decorative) - Premium, special
+  purple: {
+    50: '#F0E7FB',
+    100: '#E1CFF7',
+    200: '#C39FEF',
+    300: '#A56FE7',
+    400: '#873FDF',
+    500: '#6218D1', // Primary purple
+    600: '#4E13A7',
+    700: '#3B0E7D',
+    800: '#270954',
+    900: '#14052A',
+  },
+
+  // Cyan (Info/Accent) - Fresh, informative
+  cyan: {
+    50: '#E6F9FF',
+    100: '#CCF3FF',
+    200: '#99E7FF',
+    300: '#66DBFF',
+    400: '#33CFFF',
+    500: '#06C1FF', // Primary cyan
+    600: '#059ACC',
+    700: '#047499',
+    800: '#024D66',
+    900: '#012733',
+  },
+
+  // Deep Purple (Special) - Premium dark accent
+  deepPurple: {
+    50: '#EBEAF0',
+    100: '#D7D5E1',
+    200: '#AFABC3',
+    300: '#8781A5',
+    400: '#5F5787',
+    500: '#332C68', // Primary deep purple
+    600: '#292353',
+    700: '#1F1A3E',
+    800: '#14112A',
+    900: '#0A0915',
+  },
+
+  // Neutral Grays - Clean, professional
+  gray: {
+    50: '#F5F5F5',
+    100: '#E6E6E6',
+    200: '#CCCCCC',
+    300: '#B3B3B3',
+    400: '#909090',
+    500: '#6B6B6B',
+    600: '#555555',
+    700: '#333333',
+    800: '#292929',
+    900: '#202020',
+  },
+} as const;
+
+// =============================================================================
+// SEMANTIC COLORS - LIGHT THEME
+// Clean, modern palette for e-commerce app
+// =============================================================================
+
+export const lightSemanticColors = {
+  // Backgrounds - Clean white/light gray
+  background: {
+    primary: baseColors.white,
+    secondary: baseColors.gray[50],
+    tertiary: baseColors.gray[100],
+    inverse: baseColors.gray[900],
+  },
+
+  // Surfaces (cards, modals, sheets)
+  surface: {
+    primary: baseColors.white,
+    secondary: baseColors.gray[50],
+    elevated: baseColors.white,
+    overlay: 'rgba(32, 32, 32, 0.5)',
+  },
+
+  // Text
+  text: {
+    primary: baseColors.gray[900],
+    secondary: baseColors.gray[600],
+    tertiary: baseColors.gray[500],
+    disabled: baseColors.gray[400],
+    inverse: baseColors.white,
+    link: baseColors.blue[500],
+  },
+
+  // Borders
+  border: {
+    default: baseColors.gray[200],
+    subtle: baseColors.gray[100],
+    strong: baseColors.gray[300],
+    focus: baseColors.blue[500],
+  },
+
+  // Accent (interactive elements)
+  accent: {
+    primary: baseColors.blue[500],
+    primaryHover: baseColors.blue[600],
+    primaryPressed: baseColors.blue[700],
+    secondary: baseColors.pink[500],
+    secondaryHover: baseColors.pink[600],
+    secondaryPressed: baseColors.pink[700],
+  },
+
+  // Interactive states
+  interactive: {
+    default: baseColors.gray[100],
+    hover: baseColors.gray[200],
+    pressed: baseColors.gray[300],
+    disabled: baseColors.gray[200],
+  },
+
+  // Feedback colors
+  feedback: {
+    success: baseColors.green[500],
+    successLight: baseColors.green[50],
+    successDark: baseColors.green[700],
+    warning: baseColors.yellow[500],
+    warningLight: baseColors.yellow[50],
+    warningDark: baseColors.yellow[700],
+    error: baseColors.red[500],
+    errorLight: baseColors.red[50],
+    errorDark: baseColors.red[700],
+    info: baseColors.cyan[500],
+    infoLight: baseColors.cyan[50],
+    infoDark: baseColors.cyan[700],
+  },
+
+  // Special
+  special: {
+    skeleton: baseColors.gray[200],
+    divider: baseColors.gray[200],
+    scrim: 'rgba(32, 32, 32, 0.4)',
+  },
+
+  // Emotion colors (for mood tracking / product categories)
+  emotion: {
+    happy: baseColors.yellow[400],
+    calm: baseColors.cyan[300],
+    neutral: baseColors.gray[400],
+    sad: baseColors.blue[300],
+    anxious: baseColors.orange[400],
+    angry: baseColors.red[500],
+    overwhelmed: baseColors.purple[400],
+  },
+} as const;
+
+// =============================================================================
+// SEMANTIC COLORS - DARK THEME
+// Professional deep-gray/charcoal backgrounds with vibrant accents
+// =============================================================================
+
+export const darkSemanticColors = {
+  // Backgrounds - Deep charcoal grays
+  background: {
+    primary: baseColors.gray[900], // #202020
+    secondary: baseColors.gray[800], // #292929
+    tertiary: baseColors.gray[700], // #333333
+    inverse: baseColors.white,
+  },
+
+  // Surfaces
+  surface: {
+    primary: baseColors.gray[800],
+    secondary: baseColors.gray[700],
+    elevated: baseColors.gray[700],
+    overlay: 'rgba(0, 0, 0, 0.7)',
+  },
+
+  // Text
+  text: {
+    primary: baseColors.white,
+    secondary: baseColors.gray[300],
+    tertiary: baseColors.gray[400],
+    disabled: baseColors.gray[500],
+    inverse: baseColors.gray[900],
+    link: baseColors.blue[400],
+  },
+
+  // Borders
+  border: {
+    default: baseColors.gray[700],
+    subtle: baseColors.gray[800],
+    strong: baseColors.gray[600],
+    focus: baseColors.blue[400],
+  },
+
+  // Accent - Brand colors for dark mode
+  accent: {
+    primary: baseColors.blue[400],
+    primaryHover: baseColors.blue[300],
+    primaryPressed: baseColors.blue[500],
+    secondary: baseColors.pink[400],
+    secondaryHover: baseColors.pink[300],
+    secondaryPressed: baseColors.pink[500],
+  },
+
+  // Interactive states
+  interactive: {
+    default: baseColors.gray[700],
+    hover: baseColors.gray[600],
+    pressed: baseColors.gray[500],
+    disabled: baseColors.gray[700],
+  },
+
+  // Feedback colors
+  feedback: {
+    success: baseColors.green[400],
+    successLight: 'rgba(53, 199, 89, 0.15)',
+    successDark: baseColors.green[300],
+    warning: baseColors.yellow[400],
+    warningLight: 'rgba(251, 188, 4, 0.15)',
+    warningDark: baseColors.yellow[300],
+    error: baseColors.red[400],
+    errorLight: 'rgba(249, 69, 69, 0.15)',
+    errorDark: baseColors.red[300],
+    info: baseColors.cyan[400],
+    infoLight: 'rgba(6, 193, 255, 0.15)',
+    infoDark: baseColors.cyan[300],
+  },
+
+  // Special
+  special: {
+    skeleton: baseColors.gray[600],
+    divider: baseColors.gray[700],
+    scrim: 'rgba(0, 0, 0, 0.6)',
+  },
+
+  // Emotion colors (for mood tracking / product categories)
+  emotion: {
+    happy: baseColors.yellow[400],
+    calm: baseColors.cyan[400],
+    neutral: baseColors.gray[500],
+    sad: baseColors.blue[400],
+    anxious: baseColors.orange[400],
+    angry: baseColors.red[400],
+    overwhelmed: baseColors.purple[400],
+  },
+} as const;
+
+// Type exports
+export type BaseColors = typeof baseColors;
+export type SemanticColors = typeof lightSemanticColors;

package/src/tokens/index.ts

@@ -0,0 +1,145 @@
+/**
+ * StayEasy Design System - Token Exports
+ *
+ * This barrel file exports all design tokens for easy importing.
+ *
+ * @example
+ * import { baseColors, spacing, radii } from '@/design-system/tokens';
+ */
+
+// Colors
+export {
+  baseColors,
+  lightSemanticColors,
+  darkSemanticColors,
+  type BaseColors,
+  type SemanticColors,
+} from './colors';
+
+// Typography
+export {
+  fontFamily,
+  fontWeight,
+  fontSize,
+  lineHeight,
+  lineHeightValues,
+  letterSpacing,
+  typographyPresets,
+  type FontFamily,
+  type FontWeight,
+  type FontSize,
+  type TypographyPresets,
+  type TypographyVariant,
+} from './typography';
+
+// Spacing
+export {
+  spacing,
+  semanticSpacing,
+  touchTarget,
+  hitSlop,
+  type Spacing,
+  type SemanticSpacing,
+  type SpacingKey,
+} from './spacing';
+
+// Radii
+export {
+  radii,
+  semanticRadii,
+  type Radii,
+  type RadiiKey,
+} from './radii';
+
+// Shadows & Elevation
+export {
+  elevation,
+  semanticElevation,
+  opacity,
+  zIndex,
+  type Elevation,
+  type ElevationKey,
+  type Opacity,
+  type ZIndex,
+} from './shadows';
+
+// Motion
+export {
+  duration,
+  easing,
+  semanticMotion,
+  springConfig,
+  type Duration,
+  type DurationKey,
+  type Easing,
+  type EasingKey,
+  type SpringConfig,
+} from './motion';
+
+// Scales (mathematical relationships)
+export {
+  // Ratio constants
+  ICON_RATIOS,
+  // Container sizes
+  CONTAINER_SIZES,
+  BUTTON_HEIGHTS,
+  TOGGLE_CONTAINER_SIZES,
+  ICON_PIXEL_SIZES,
+  // Icon size mappings
+  ICON_BUTTON_ICON_SIZE,
+  CHECKBOX_ICON_SIZE,
+  BUTTON_ICON_SIZE,
+  TEXT_INPUT_ICON_SIZE,
+  // Switch scales
+  SWITCH_THUMB_INSET,
+  SWITCH_DIMENSIONS,
+  calculateSwitchThumbSize,
+  // Touch target utilities
+  MIN_TOUCH_TARGET,
+  calculateHitSlop,
+  ICON_BUTTON_HIT_SLOP,
+  CHECKBOX_HIT_SLOP,
+  SWITCH_HIT_SLOP,
+  GHOST_ICON_BUTTON_HIT_SLOP,
+  // Spinner and text mappings
+  SPINNER_SIZE,
+  BUTTON_TEXT_VARIANT,
+  // Types
+  type ComponentSizeType,
+  type IconSizeType,
+} from './scales';
+
+// =============================================================================
+// ICON SIZES
+// =============================================================================
+
+/**
+ * Consistent icon sizing scale
+ * Scale: 12 → 16 → 20 → 24 (+4px) → 32 → 40 → 48 (+8px)
+ * Smaller icons need finer control; larger icons can have bigger jumps
+ */
+export const iconSize = {
+  /** 12 - Badges, inline text indicators, status dots */
+  xs: 12,
+
+  /** 16 - Compact buttons, dense lists, checkbox icons (sm) */
+  sm: 16,
+
+  /** 20 - Phone default, standard buttons, checkbox icons (md) */
+  md: 20,
+
+  /** 24 - Primary actions, phone headers, checkbox icons (lg) */
+  lg: 24,
+
+  /** 32 - Tablet headers, emphasized actions */
+  xl: 32,
+
+  /** 40 - Empty states, onboarding illustrations */
+  '2xl': 40,
+
+  /** 48 - Hero sections, large feature illustrations */
+  '3xl': 48,
+} as const;
+
+export type IconSize = typeof iconSize;
+export type IconSizeKey = keyof typeof iconSize;

package/src/tokens/motion.ts

@@ -0,0 +1,176 @@
+/**
+ * StayEasy Design System - Motion Tokens
+ *
+ * Philosophy: Motion should be subtle and purposeful.
+ * Animations guide attention, not distract.
+ *
+ * Always respect reduced motion preferences.
+ *
+ * @example
+ * Animated.timing(value, {
+ *   duration: theme.motion.duration.normal,
+ *   easing: Easing.bezier(...theme.motion.easing.standard),
+ * })
+ */
+
+// =============================================================================
+// DURATION SCALE (in milliseconds)
+// =============================================================================
+
+export const duration = {
+  /** 0 - Instant (for reduced motion) */
+  instant: 0,
+
+  /** 100ms - Very fast micro-interactions */
+  fastest: 100,
+
+  /** 150ms - Fast transitions (hover, press) */
+  fast: 150,
+
+  /** 200ms - Normal transitions (most common) */
+  normal: 200,
+
+  /** 300ms - Slow transitions (page transitions) */
+  slow: 300,
+
+  /** 400ms - Very slow (complex animations) */
+  slower: 400,
+
+  /** 500ms - Slowest standard animation */
+  slowest: 500,
+} as const;
+
+// =============================================================================
+// EASING CURVES (Bezier control points)
+// =============================================================================
+
+export const easing = {
+  /**
+   * Standard easing - for most transitions
+   * Starts fast, ends slow (ease-out)
+   */
+  standard: [0.2, 0, 0, 1] as const,
+
+  /**
+   * Entrance easing - elements entering the screen
+   * Starts slow, speeds up (ease-in)
+   */
+  entrance: [0.4, 0, 1, 1] as const,
+
+  /**
+   * Exit easing - elements leaving the screen
+   * Starts fast, slows down dramatically
+   */
+  exit: [0, 0, 0.2, 1] as const,
+
+  /**
+   * Emphasized easing - for important transitions
+   * More dramatic curve
+   */
+  emphasized: [0.2, 0, 0, 1] as const,
+
+  /**
+   * Linear - constant speed (use sparingly)
+   */
+  linear: [0, 0, 1, 1] as const,
+
+  /**
+   * Spring-like - bouncy feel (use for playful interactions)
+   * Note: For true spring physics, use Animated.spring()
+   */
+  spring: [0.175, 0.885, 0.32, 1.275] as const,
+} as const;
+
+// =============================================================================
+// SEMANTIC MOTION
+// =============================================================================
+
+export const semanticMotion = {
+  /** Button press feedback */
+  press: {
+    duration: duration.fast,
+    easing: easing.standard,
+  },
+
+  /** Micro-interactions (toggles, checkboxes) */
+  micro: {
+    duration: duration.fastest,
+    easing: easing.standard,
+  },
+
+  /** Standard transitions (modals, sheets) */
+  transition: {
+    duration: duration.normal,
+    easing: easing.standard,
+  },
+
+  /** Page/screen transitions */
+  page: {
+    duration: duration.slow,
+    easing: easing.emphasized,
+  },
+
+  /** Elements entering view */
+  enter: {
+    duration: duration.normal,
+    easing: easing.entrance,
+  },
+
+  /** Elements leaving view */
+  leave: {
+    duration: duration.fast,
+    easing: easing.exit,
+  },
+
+  /** Skeleton shimmer effect */
+  skeleton: {
+    duration: 1500,
+    easing: easing.linear,
+  },
+
+  /** Spinner rotation */
+  spinner: {
+    duration: 1000,
+    easing: easing.linear,
+  },
+} as const;
+
+// =============================================================================
+// SPRING CONFIGURATIONS (for Animated.spring)
+// =============================================================================
+
+export const springConfig = {
+  /** Gentle spring - subtle, natural feel */
+  gentle: {
+    tension: 100,
+    friction: 10,
+  },
+
+  /** Responsive spring - quick and snappy */
+  responsive: {
+    tension: 200,
+    friction: 15,
+  },
+
+  /** Bouncy spring - playful, attention-grabbing */
+  bouncy: {
+    tension: 300,
+    friction: 8,
+  },
+
+  /** Stiff spring - minimal overshoot */
+  stiff: {
+    tension: 400,
+    friction: 30,
+  },
+} as const;
+
+// =============================================================================
+// TYPE EXPORTS
+// =============================================================================
+
+export type Duration = typeof duration;
+export type DurationKey = keyof typeof duration;
+export type Easing = typeof easing;
+export type EasingKey = keyof typeof easing;
+export type SpringConfig = typeof springConfig;