themes.ts

Go to the documentation of this file.

/**
 * EverydayPOS Theme System
 * Defines color palettes and styling for different themes
 */
 
export interface Theme {
  id: string;
  name: string;
  description: string;
  colors: {
    bg: string;
    surface: string;
    surface2: string;
    text: string;
    muted: string;
    border: string;
    brand: string;
    brand2: string;
    warn: string;
    danger: string;
    success?: string;
    info?: string;
  };
  shadows: {
    shadow: string;
    shadowSm: string;
  };
  radius: {
    radius: string;
    radiusSm: string;
  };
  focus: string;
}
 
export const themes: Record<string, Theme> = {
  fieldpine: {
    id: 'fieldpine',
    name: 'Fieldpine',
    description: 'Classic teal and mint - the original EverydayPOS look',
    colors: {
      bg: '#f8fafc',
      surface: '#ffffff',
      surface2: '#f1f5f9',
      text: '#0f172a',
      muted: '#64748b',
      border: '#e2e8f0',
      brand: '#00483d',
      brand2: '#00946b',
      warn: '#f59e0b',
      danger: '#ef4444',
      success: '#10b981',
      info: '#3b82f6',
    },
    shadows: {
      shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      shadowSm: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
    },
    radius: {
      radius: '0.75rem',
      radiusSm: '0.5rem',
    },
    focus: '0 0 0 3px rgba(16, 185, 129, 0.2)',
  },
  
  midnight: {
    id: 'midnight',
    name: 'Midnight',
    description: 'Deep blues and purples for a sophisticated dark aesthetic',
    colors: {
      bg: '#0f172a',
      surface: '#1e293b',
      surface2: '#283548',
      text: '#f1f5f9',
      muted: '#94a3b8',
      border: '#334155',
      brand: '#8b5cf6',
      brand2: '#a78bfa',
      warn: '#fbbf24',
      danger: '#ef4444',
      success: '#10b981',
      info: '#3b82f6',
    },
    shadows: {
      shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3)',
      shadowSm: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2)',
    },
    radius: {
      radius: '0.75rem',
      radiusSm: '0.5rem',
    },
    focus: '0 0 0 3px rgba(139, 92, 246, 0.4)',
  },
 
  sunset: {
    id: 'sunset',
    name: 'Miami Sunset',
    description: 'Vibrant coral, magenta and gold - tropical energy',
    colors: {
      bg: '#fff5f7',
      surface: '#ffffff',
      surface2: '#ffe4ec',
      text: '#4a1c2e',
      muted: '#a8546b',
      border: '#ffc9db',
      brand: '#ff6b9d',
      brand2: '#ff8fab',
      warn: '#ffb347',
      danger: '#ff4757',
      success: '#1dd1a1',
      info: '#5f27cd',
    },
    shadows: {
      shadow: '0 18px 48px rgba(255,107,157,0.25)',
      shadowSm: '0 8px 20px rgba(255,107,157,0.15)',
    },
    radius: {
      radius: '16px',
      radiusSm: '10px',
    },
    focus: '0 0 0 4px rgba(255,107,157,0.3)',
  },
 
  forest: {
    id: 'forest',
    name: 'Emerald Forest',
    description: 'Vibrant emerald and lime - fresh and energizing',
    colors: {
      bg: '#ecfdf5',
      surface: '#ffffff',
      surface2: '#d1fae5',
      text: '#064e3b',
      muted: '#047857',
      border: '#a7f3d0',
      brand: '#10b981',
      brand2: '#34d399',
      warn: '#f59e0b',
      danger: '#ef4444',
      success: '#22c55e',
      info: '#3b82f6',
    },
    shadows: {
      shadow: '0 18px 48px rgba(16,185,129,0.25)',
      shadowSm: '0 8px 20px rgba(16,185,129,0.15)',
    },
    radius: {
      radius: '14px',
      radiusSm: '9px',
    },
    focus: '0 0 0 4px rgba(16,185,129,0.3)',
  },
 
  ocean: {
    id: 'ocean',
    name: 'Electric Ocean',
    description: 'Bright turquoise and aqua - refreshing and modern',
    colors: {
      bg: '#e0f7ff',
      surface: '#ffffff',
      surface2: '#b3e5fc',
      text: '#01579b',
      muted: '#0277bd',
      border: '#81d4fa',
      brand: '#00bcd4',
      brand2: '#00e5ff',
      warn: '#ffc107',
      danger: '#e91e63',
      success: '#00e676',
      info: '#2196f3',
    },
    shadows: {
      shadow: '0 18px 48px rgba(0,188,212,0.3)',
      shadowSm: '0 8px 20px rgba(0,188,212,0.2)',
    },
    radius: {
      radius: '16px',
      radiusSm: '10px',
    },
    focus: '0 0 0 4px rgba(0,188,212,0.35)',
  },
 
  rose: {
    id: 'rose',
    name: 'Hot Pink',
    description: 'Bold fuchsia and magenta - confident and energetic',
    colors: {
      bg: '#fff0f9',
      surface: '#ffffff',
      surface2: '#fce4ec',
      text: '#880e4f',
      muted: '#ad1457',
      border: '#f8bbd0',
      brand: '#e91e63',
      brand2: '#ff4081',
      warn: '#ff9800',
      danger: '#f44336',
      success: '#4caf50',
      info: '#9c27b0',
    },
    shadows: {
      shadow: '0 18px 48px rgba(233,30,99,0.25)',
      shadowSm: '0 8px 20px rgba(233,30,99,0.15)',
    },
    radius: {
      radius: '16px',
      radiusSm: '10px',
    },
    focus: '0 0 0 4px rgba(233,30,99,0.3)',
  },
 
  retro: {
    id: 'retro',
    name: 'Retro Wave',
    description: '80s inspired with electric purple, hot pink and cyan',
    colors: {
      bg: '#fff5ff',
      surface: '#ffffff',
      surface2: '#f3e5f5',
      text: '#4a148c',
      muted: '#7b1fa2',
      border: '#e1bee7',
      brand: '#9c27b0',
      brand2: '#ba68c8',
      warn: '#ff6f00',
      danger: '#d50000',
      success: '#00e676',
      info: '#00b0ff',
    },
    shadows: {
      shadow: '0 18px 48px rgba(156,39,176,0.25)',
      shadowSm: '0 8px 20px rgba(156,39,176,0.15)',
    },
    radius: {
      radius: '12px',
      radiusSm: '8px',
    },
    focus: '0 0 0 4px rgba(156,39,176,0.3)',
  },
 
  cosmic: {
    id: 'cosmic',
    name: 'Cosmic Purple',
    description: 'Vivid violet and electric purple - otherworldly',
    colors: {
      bg: '#f3e5f5',
      surface: '#ffffff',
      surface2: '#e1bee7',
      text: '#4a148c',
      muted: '#6a1b9a',
      border: '#ce93d8',
      brand: '#8e24aa',
      brand2: '#ab47bc',
      warn: '#ff6f00',
      danger: '#c62828',
      success: '#00c853',
      info: '#2979ff',
    },
    shadows: {
      shadow: '0 18px 48px rgba(142,36,170,0.3)',
      shadowSm: '0 8px 20px rgba(142,36,170,0.2)',
    },
    radius: {
      radius: '14px',
      radiusSm: '9px',
    },
    focus: '0 0 0 4px rgba(142,36,170,0.35)',
  },
 
  sunshine: {
    id: 'sunshine',
    name: 'Sunshine',
    description: 'Bright yellow and orange - cheerful and optimistic',
    colors: {
      bg: '#fffde7',
      surface: '#ffffff',
      surface2: '#fff9c4',
      text: '#f57f17',
      muted: '#f9a825',
      border: '#fff59d',
      brand: '#ffc107',
      brand2: '#ffeb3b',
      warn: '#ff9800',
      danger: '#f44336',
      success: '#8bc34a',
      info: '#03a9f4',
    },
    shadows: {
      shadow: '0 18px 48px rgba(255,193,7,0.3)',
      shadowSm: '0 8px 20px rgba(255,193,7,0.2)',
    },
    radius: {
      radius: '14px',
      radiusSm: '9px',
    },
    focus: '0 0 0 4px rgba(255,193,7,0.3)',
  },
 
  neon: {
    id: 'neon',
    name: 'Neon Nights',
    description: 'Vibrant cyans and magentas for a bold, modern look',
    colors: {
      bg: '#18181b',
      surface: '#27272a',
      surface2: '#3f3f46',
      text: '#fafafa',
      muted: '#a1a1aa',
      border: '#52525b',
      brand: '#06b6d4',
      brand2: '#22d3ee',
      warn: '#fbbf24',
      danger: '#f43f5e',
      success: '#22c55e',
      info: '#a78bfa',
    },
    shadows: {
      shadow: '0 18px 48px rgba(6,182,212,0.4)',
      shadowSm: '0 8px 20px rgba(6,182,212,0.3)',
    },
    radius: {
      radius: '8px',
      radiusSm: '6px',
    },
    focus: '0 0 0 4px rgba(6,182,212,0.4)',
  },
 
  web3: {
    id: 'web3',
    name: 'Web3',
    description: 'Futuristic gradients and neon accents for the decentralized era',
    colors: {
      bg: '#0a0b0d',
      surface: '#13151a',
      surface2: '#1c1f26',
      text: '#e8e9ed',
      muted: '#9ca3af',
      border: '#2d3139',
      brand: '#7c3aed',
      brand2: '#a78bfa',
      warn: '#fbbf24',
      danger: '#f87171',
      success: '#34d399',
      info: '#60a5fa',
    },
    shadows: {
      shadow: '0 18px 48px rgba(124,58,237,0.5), 0 0 80px rgba(124,58,237,0.15)',
      shadowSm: '0 8px 20px rgba(124,58,237,0.3), 0 0 40px rgba(124,58,237,0.1)',
    },
    radius: {
      radius: '10px',
      radiusSm: '7px',
    },
    focus: '0 0 0 4px rgba(124,58,237,0.4), 0 0 20px rgba(124,58,237,0.2)',
  },
 
  cartridge: {
    id: 'cartridge',
    name: 'Cartridge World',
    description: 'Bold orange and red - powered by Cartridge World',
    colors: {
      bg: '#fff8f0',
      surface: '#ffffff',
      surface2: '#ffe8d6',
      text: '#1a1a1a',
      muted: '#666666',
      border: '#ffc299',
      brand: '#ff6600',
      brand2: '#ff8533',
      warn: '#ffa500',
      danger: '#cc0000',
      success: '#00a650',
      info: '#0066cc',
    },
    shadows: {
      shadow: '0 18px 48px rgba(255,102,0,0.25)',
      shadowSm: '0 8px 20px rgba(255,102,0,0.15)',
    },
    radius: {
      radius: '12px',
      radiusSm: '8px',
    },
    focus: '0 0 0 4px rgba(255,102,0,0.3)',
  },
 
  monochrome: {
    id: 'monochrome',
    name: 'Monochrome',
    description: 'Pure black and white for maximum contrast and focus',
    colors: {
      bg: '#ffffff',
      surface: '#ffffff',
      surface2: '#f5f5f5',
      text: '#000000',
      muted: '#666666',
      border: '#e0e0e0',
      brand: '#000000',
      brand2: '#333333',
      warn: '#666666',
      danger: '#000000',
      success: '#000000',
      info: '#333333',
    },
    shadows: {
      shadow: '0 18px 48px rgba(0,0,0,0.15)',
      shadowSm: '0 8px 20px rgba(0,0,0,0.1)',
    },
    radius: {
      radius: '4px',
      radiusSm: '2px',
    },
    focus: '0 0 0 3px rgba(0,0,0,0.2)',
  },
};
 
export const defaultTheme = 'fieldpine';
 
const CUSTOM_THEMES_KEY = 'everydaypos_custom_themes';
 
// Load custom themes from localStorage
export function loadCustomThemes(): Record<string, Theme> {
  if (typeof window === 'undefined') return {};
  
  try {
    const stored = localStorage.getItem(CUSTOM_THEMES_KEY);
    if (stored) {
      return JSON.parse(stored);
    }
  } catch (error) {
    console.error('Error loading custom themes:', error);
  }
  return {};
}
 
// Save custom theme to localStorage
export function saveCustomTheme(theme: Theme): void {
  if (typeof window === 'undefined') return;
  
  try {
    const customThemes = loadCustomThemes();
    customThemes[theme.id] = theme;
    localStorage.setItem(CUSTOM_THEMES_KEY, JSON.stringify(customThemes));
  } catch (error) {
    console.error('Error saving custom theme:', error);
  }
}
 
// Delete custom theme from localStorage
export function deleteCustomTheme(themeId: string): void {
  if (typeof window === 'undefined') return;
  
  try {
    const customThemes = loadCustomThemes();
    delete customThemes[themeId];
    localStorage.setItem(CUSTOM_THEMES_KEY, JSON.stringify(customThemes));
  } catch (error) {
    console.error('Error deleting custom theme:', error);
  }
}
 
// Get all themes (built-in + custom)
export function getAllThemes(): Record<string, Theme> {
  return { ...themes, ...loadCustomThemes() };
}
 
export function getTheme(themeId: string): Theme {
  const allThemes = getAllThemes();
  return allThemes[themeId] || themes[defaultTheme];
}
 
export function getThemeList(): { id: string; name: string; description: string; isCustom?: boolean }[] {
  const allThemes = getAllThemes();
  return Object.values(allThemes).map(theme => ({
    id: theme.id,
    name: theme.name,
    description: theme.description,
    isCustom: !themes[theme.id],
  }));
}