site-builder/craft/src/constants/presets.ts

export const TEXT_COLORS = [
  { label: 'Dark', value: '#1f2937' },
  { label: 'Medium', value: '#374151' },
  { label: 'Light', value: '#6b7280' },
  { label: 'White', value: '#ffffff' },
  { label: 'Blue', value: '#3b82f6' },
  { label: 'Green', value: '#10b981' },
  { label: 'Red', value: '#ef4444' },
  { label: 'Orange', value: '#f59e0b' },
];

export const BG_COLORS = [
  { label: 'White', value: '#ffffff' },
  { label: 'Off-white', value: '#f9fafb' },
  { label: 'Dark', value: '#1f2937' },
  { label: 'Darker', value: '#111827' },
  { label: 'Blue', value: '#3b82f6' },
  { label: 'Green', value: '#10b981' },
  { label: 'Purple', value: '#8b5cf6' },
  { label: 'Pink', value: '#ec4899' },
];

export const FONT_FAMILIES = [
  { label: 'Inter', value: 'Inter, sans-serif' },
  { label: 'Roboto', value: 'Roboto, sans-serif' },
  { label: 'Open Sans', value: 'Open Sans, sans-serif' },
  { label: 'Poppins', value: 'Poppins, sans-serif' },
  { label: 'Montserrat', value: 'Montserrat, sans-serif' },
  { label: 'Playfair', value: 'Playfair Display, serif' },
  { label: 'Merriweather', value: 'Merriweather, serif' },
  { label: 'Source Code', value: 'Source Code Pro, monospace' },
];

export const TEXT_SIZES = [
  { label: 'XS', value: '12px' },
  { label: 'S', value: '14px' },
  { label: 'M', value: '16px' },
  { label: 'L', value: '20px' },
  { label: 'XL', value: '24px' },
  { label: '2XL', value: '32px' },
];

export const FONT_WEIGHTS = [
  { label: 'Light', value: '300' },
  { label: 'Normal', value: '400' },
  { label: 'Medium', value: '500' },
  { label: 'Semi', value: '600' },
  { label: 'Bold', value: '700' },
];

export const SPACING_PRESETS = [
  { label: 'None', value: '0' },
  { label: 'S', value: '8px' },
  { label: 'M', value: '16px' },
  { label: 'L', value: '24px' },
  { label: 'XL', value: '32px' },
];

export const RADIUS_PRESETS = [
  { label: 'None', value: '0' },
  { label: 'S', value: '8px' },
  { label: 'M', value: '16px' },
  { label: 'L', value: '32px' },
  { label: 'Full', value: '9999px' },
];

// Images need a larger radius scale than buttons/containers to be visually
// distinct on typical photo dimensions.
export const IMAGE_RADIUS_PRESETS = [
  { label: 'None', value: '0' },
  { label: 'S', value: '24px' },
  { label: 'M', value: '48px' },
  { label: 'L', value: '96px' },
  { label: 'Full', value: '9999px' },
];

export const GRADIENTS = [
  { label: 'Purple Dream', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
  { label: 'Pink Sunset', value: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
  { label: 'Ocean Blue', value: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
  { label: 'Green Teal', value: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
  { label: 'Warm Sunrise', value: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
  { label: 'Soft Pastel', value: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)' },
  { label: 'Peach', value: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)' },
  { label: 'Warm Sand', value: 'linear-gradient(135deg, #f5af19 0%, #f12711 100%)' },
  { label: 'Dark Purple', value: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)' },
  { label: 'Dark Blue', value: 'linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%)' },
  { label: 'Dark Gray', value: 'linear-gradient(135deg, #1f2937 0%, #111827 100%)' },
  { label: 'None', value: 'none' },
];

export const DEVICE_WIDTHS: Record<string, string> = {
  desktop: '100%',
  tablet: '768px',
  mobile: '375px',
};