@aws505/sheetsite 1.0.0

package/src/theme/colors.ts

@@ -0,0 +1,351 @@
+/**
+ * Theme Color Palettes
+ *
+ * Pre-defined color palettes for different business types and styles.
+ * Each palette follows Tailwind's color scale (50-950).
+ */
+
+import type { ColorPalette, ThemePreset } from '../config/types';
+
+/**
+ * Warm Brown - Tailoring, leather, traditional crafts
+ */
+export const warmBrown: ColorPalette = {
+  primary: {
+    50: '#faf8f6',
+    100: '#f2ede8',
+    200: '#e4d9ce',
+    300: '#d3c0ad',
+    400: '#bfa38a',
+    500: '#a68a6d',
+    600: '#8b7058',
+    700: '#735c49',
+    800: '#604d3f',
+    900: '#514237',
+    950: '#2b221c',
+  },
+  accent: {
+    50: '#fef3f2',
+    100: '#fee4e2',
+    200: '#fecdca',
+    300: '#fcaca5',
+    400: '#f87d71',
+    500: '#ef5544',
+    600: '#dc3626',
+    700: '#b92a1c',
+    800: '#99261b',
+    900: '#7f261d',
+    950: '#450f0a',
+  },
+};
+
+/**
+ * Cool Blue - Professional services, tech, trust
+ */
+export const coolBlue: ColorPalette = {
+  primary: {
+    50: '#f0f7ff',
+    100: '#e0effe',
+    200: '#b9dffd',
+    300: '#7cc5fc',
+    400: '#36a8f8',
+    500: '#0c8de9',
+    600: '#006fc7',
+    700: '#0159a1',
+    800: '#064c85',
+    900: '#0b406e',
+    950: '#072849',
+  },
+  accent: {
+    50: '#f0fdf4',
+    100: '#dcfce7',
+    200: '#bbf7d0',
+    300: '#86efac',
+    400: '#4ade80',
+    500: '#22c55e',
+    600: '#16a34a',
+    700: '#15803d',
+    800: '#166534',
+    900: '#14532d',
+    950: '#052e16',
+  },
+};
+
+/**
+ * Earth Green - Natural, organic, outdoor
+ */
+export const earthGreen: ColorPalette = {
+  primary: {
+    50: '#f4f9f4',
+    100: '#e5f2e7',
+    200: '#cce5d0',
+    300: '#a3d0ac',
+    400: '#72b381',
+    500: '#4f9760',
+    600: '#3d7a4c',
+    700: '#33613f',
+    800: '#2c4e35',
+    900: '#26412e',
+    950: '#112317',
+  },
+  accent: {
+    50: '#fefce8',
+    100: '#fef9c3',
+    200: '#fef08a',
+    300: '#fde047',
+    400: '#facc15',
+    500: '#eab308',
+    600: '#ca8a04',
+    700: '#a16207',
+    800: '#854d0e',
+    900: '#713f12',
+    950: '#422006',
+  },
+};
+
+/**
+ * Warm Amber - Food, hospitality, warmth
+ */
+export const warmAmber: ColorPalette = {
+  primary: {
+    50: '#fffbeb',
+    100: '#fef3c7',
+    200: '#fde68a',
+    300: '#fcd34d',
+    400: '#fbbf24',
+    500: '#f59e0b',
+    600: '#d97706',
+    700: '#b45309',
+    800: '#92400e',
+    900: '#78350f',
+    950: '#451a03',
+  },
+  accent: {
+    50: '#fef2f2',
+    100: '#fee2e2',
+    200: '#fecaca',
+    300: '#fca5a5',
+    400: '#f87171',
+    500: '#ef4444',
+    600: '#dc2626',
+    700: '#b91c1c',
+    800: '#991b1b',
+    900: '#7f1d1d',
+    950: '#450a0a',
+  },
+};
+
+/**
+ * Elegant Gold - Luxury, formal, upscale
+ */
+export const elegantGold: ColorPalette = {
+  primary: {
+    50: '#fdfcf7',
+    100: '#f9f5e7',
+    200: '#f2e9cb',
+    300: '#e8d7a5',
+    400: '#dcc07a',
+    500: '#cfaa58',
+    600: '#c09548',
+    700: '#a0783d',
+    800: '#826037',
+    900: '#6b4f31',
+    950: '#3b2a19',
+  },
+  accent: {
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    200: '#e2e8f0',
+    300: '#cbd5e1',
+    400: '#94a3b8',
+    500: '#64748b',
+    600: '#475569',
+    700: '#334155',
+    800: '#1e293b',
+    900: '#0f172a',
+    950: '#020617',
+  },
+};
+
+/**
+ * Fresh Teal - Modern, creative, spa
+ */
+export const freshTeal: ColorPalette = {
+  primary: {
+    50: '#f0fdfa',
+    100: '#ccfbf1',
+    200: '#99f6e4',
+    300: '#5eead4',
+    400: '#2dd4bf',
+    500: '#14b8a6',
+    600: '#0d9488',
+    700: '#0f766e',
+    800: '#115e59',
+    900: '#134e4a',
+    950: '#042f2e',
+  },
+  accent: {
+    50: '#fdf4ff',
+    100: '#fae8ff',
+    200: '#f5d0fe',
+    300: '#f0abfc',
+    400: '#e879f9',
+    500: '#d946ef',
+    600: '#c026d3',
+    700: '#a21caf',
+    800: '#86198f',
+    900: '#701a75',
+    950: '#4a044e',
+  },
+};
+
+/**
+ * Bold Red - Auto, sports, energy
+ */
+export const boldRed: ColorPalette = {
+  primary: {
+    50: '#fef2f2',
+    100: '#fee2e2',
+    200: '#fecaca',
+    300: '#fca5a5',
+    400: '#f87171',
+    500: '#ef4444',
+    600: '#dc2626',
+    700: '#b91c1c',
+    800: '#991b1b',
+    900: '#7f1d1d',
+    950: '#450a0a',
+  },
+  accent: {
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    200: '#e2e8f0',
+    300: '#cbd5e1',
+    400: '#94a3b8',
+    500: '#64748b',
+    600: '#475569',
+    700: '#334155',
+    800: '#1e293b',
+    900: '#0f172a',
+    950: '#020617',
+  },
+};
+
+/**
+ * Soft Pink - Beauty, feminine, delicate
+ */
+export const softPink: ColorPalette = {
+  primary: {
+    50: '#fdf2f8',
+    100: '#fce7f3',
+    200: '#fbcfe8',
+    300: '#f9a8d4',
+    400: '#f472b6',
+    500: '#ec4899',
+    600: '#db2777',
+    700: '#be185d',
+    800: '#9d174d',
+    900: '#831843',
+    950: '#500724',
+  },
+  accent: {
+    50: '#faf5ff',
+    100: '#f3e8ff',
+    200: '#e9d5ff',
+    300: '#d8b4fe',
+    400: '#c084fc',
+    500: '#a855f7',
+    600: '#9333ea',
+    700: '#7e22ce',
+    800: '#6b21a8',
+    900: '#581c87',
+    950: '#3b0764',
+  },
+};
+
+/**
+ * Slate Gray - Minimalist, industrial
+ */
+export const slateGray: ColorPalette = {
+  primary: {
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    200: '#e2e8f0',
+    300: '#cbd5e1',
+    400: '#94a3b8',
+    500: '#64748b',
+    600: '#475569',
+    700: '#334155',
+    800: '#1e293b',
+    900: '#0f172a',
+    950: '#020617',
+  },
+  accent: {
+    50: '#ecfeff',
+    100: '#cffafe',
+    200: '#a5f3fc',
+    300: '#67e8f9',
+    400: '#22d3ee',
+    500: '#06b6d4',
+    600: '#0891b2',
+    700: '#0e7490',
+    800: '#155e75',
+    900: '#164e63',
+    950: '#083344',
+  },
+};
+
+/**
+ * Forest Green - Deep nature, sustainability
+ */
+export const forestGreen: ColorPalette = {
+  primary: {
+    50: '#f0fdf4',
+    100: '#dcfce7',
+    200: '#bbf7d0',
+    300: '#86efac',
+    400: '#4ade80',
+    500: '#22c55e',
+    600: '#16a34a',
+    700: '#15803d',
+    800: '#166534',
+    900: '#14532d',
+    950: '#052e16',
+  },
+  accent: {
+    50: '#fffbeb',
+    100: '#fef3c7',
+    200: '#fde68a',
+    300: '#fcd34d',
+    400: '#fbbf24',
+    500: '#f59e0b',
+    600: '#d97706',
+    700: '#b45309',
+    800: '#92400e',
+    900: '#78350f',
+    950: '#451a03',
+  },
+};
+
+/**
+ * Map of theme presets to color palettes.
+ */
+export const themePalettes: Record<ThemePreset, ColorPalette> = {
+  'warm-brown': warmBrown,
+  'cool-blue': coolBlue,
+  'earth-green': earthGreen,
+  'warm-amber': warmAmber,
+  'elegant-gold': elegantGold,
+  'fresh-teal': freshTeal,
+  'bold-red': boldRed,
+  'soft-pink': softPink,
+  'slate-gray': slateGray,
+  'forest-green': forestGreen,
+};
+
+/**
+ * Get a color palette by theme preset name.
+ */
+export function getColorPalette(preset: ThemePreset): ColorPalette {
+  return themePalettes[preset] || themePalettes['cool-blue'];
+}

package/src/theme/index.ts

@@ -0,0 +1,249 @@
+/**
+ * SheetSite Theme Module
+ *
+ * Provides theming utilities, color palettes, and Tailwind CSS configuration helpers.
+ */
+
+import type { ThemeConfig, ThemePreset, ColorPalette, FontConfig } from '../config/types';
+export { getColorPalette, themePalettes } from './colors';
+export * from './colors';
+
+// =============================================================================
+// FONT CONFIGURATIONS
+// =============================================================================
+
+/**
+ * Recommended font pairings.
+ */
+export const fontPairings: Record<string, FontConfig> = {
+  classic: {
+    heading: 'Playfair Display',
+    body: 'Inter',
+  },
+  modern: {
+    heading: 'Inter',
+    body: 'Inter',
+  },
+  elegant: {
+    heading: 'Cormorant Garamond',
+    body: 'Lato',
+  },
+  friendly: {
+    heading: 'Nunito',
+    body: 'Open Sans',
+  },
+  professional: {
+    heading: 'Merriweather',
+    body: 'Source Sans Pro',
+  },
+  bold: {
+    heading: 'Montserrat',
+    body: 'Roboto',
+  },
+};
+
+// =============================================================================
+// TAILWIND CONFIGURATION GENERATOR
+// =============================================================================
+
+/**
+ * Generate Tailwind CSS theme extension from a theme configuration.
+ */
+export function generateTailwindTheme(config: ThemeConfig): object {
+  const { getColorPalette } = require('./colors');
+  const palette = config.preset ? getColorPalette(config.preset) : null;
+
+  // Merge custom colors with preset
+  const colors = {
+    primary: {
+      ...(palette?.primary || {}),
+      ...(config.colors?.primary || {}),
+    },
+    accent: {
+      ...(palette?.accent || {}),
+      ...(config.colors?.accent || {}),
+    },
+  };
+
+  return {
+    colors,
+    fontFamily: config.fonts
+      ? {
+          heading: [config.fonts.heading, 'serif'],
+          body: [config.fonts.body, 'sans-serif'],
+          ...(config.fonts.accent ? { accent: [config.fonts.accent, 'sans-serif'] } : {}),
+        }
+      : undefined,
+    borderRadius: config.borderRadius
+      ? {
+          DEFAULT: getBorderRadiusValue(config.borderRadius),
+        }
+      : undefined,
+    boxShadow: config.shadows
+      ? {
+          DEFAULT: getShadowValue(config.shadows),
+        }
+      : undefined,
+  };
+}
+
+/**
+ * Generate a complete Tailwind config object.
+ */
+export function generateTailwindConfig(config: ThemeConfig): object {
+  const themeExtend = generateTailwindTheme(config);
+
+  return {
+    theme: {
+      extend: themeExtend,
+    },
+  };
+}
+
+/**
+ * Generate CSS custom properties from a theme configuration.
+ * Useful for CSS-in-JS or custom styling.
+ */
+export function generateCSSVariables(config: ThemeConfig): Record<string, string> {
+  const { getColorPalette } = require('./colors');
+  const palette = config.preset ? getColorPalette(config.preset) : null;
+  const variables: Record<string, string> = {};
+
+  // Add color variables
+  if (palette) {
+    for (const [shade, color] of Object.entries(palette.primary)) {
+      variables[`--color-primary-${shade}`] = color as string;
+    }
+    for (const [shade, color] of Object.entries(palette.accent)) {
+      variables[`--color-accent-${shade}`] = color as string;
+    }
+  }
+
+  // Add custom colors
+  if (config.colors?.primary) {
+    for (const [shade, color] of Object.entries(config.colors.primary)) {
+      variables[`--color-primary-${shade}`] = color;
+    }
+  }
+  if (config.colors?.accent) {
+    for (const [shade, color] of Object.entries(config.colors.accent)) {
+      variables[`--color-accent-${shade}`] = color;
+    }
+  }
+
+  // Add font variables
+  if (config.fonts) {
+    if (config.fonts.heading) {
+      variables['--font-heading'] = config.fonts.heading;
+    }
+    if (config.fonts.body) {
+      variables['--font-body'] = config.fonts.body;
+    }
+    if (config.fonts.accent) {
+      variables['--font-accent'] = config.fonts.accent;
+    }
+  }
+
+  return variables;
+}
+
+/**
+ * Generate the CSS string for custom properties.
+ */
+export function generateCSSVariablesString(config: ThemeConfig): string {
+  const variables = generateCSSVariables(config);
+  const lines = Object.entries(variables).map(([key, value]) => `  ${key}: ${value};`);
+  return `:root {\n${lines.join('\n')}\n}`;
+}
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function getBorderRadiusValue(size: ThemeConfig['borderRadius']): string {
+  const values: Record<NonNullable<ThemeConfig['borderRadius']>, string> = {
+    none: '0',
+    sm: '0.125rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    full: '9999px',
+  };
+  return values[size || 'md'];
+}
+
+function getShadowValue(size: ThemeConfig['shadows']): string {
+  const values: Record<NonNullable<ThemeConfig['shadows']>, string> = {
+    none: 'none',
+    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)',
+  };
+  return values[size || 'md'];
+}
+
+// =============================================================================
+// THEME UTILITIES
+// =============================================================================
+
+/**
+ * Get the primary color for a given shade.
+ */
+export function getPrimaryColor(config: ThemeConfig, shade: keyof ColorPalette['primary'] = 600): string {
+  const { getColorPalette } = require('./colors');
+
+  // Check custom colors first
+  if (config.colors?.primary?.[shade]) {
+    return config.colors.primary[shade];
+  }
+
+  // Fall back to preset
+  if (config.preset) {
+    const palette = getColorPalette(config.preset);
+    return palette.primary[shade];
+  }
+
+  // Default
+  return '#0c8de9'; // cool-blue 500
+}
+
+/**
+ * Get the accent color for a given shade.
+ */
+export function getAccentColor(config: ThemeConfig, shade: keyof ColorPalette['accent'] = 600): string {
+  const { getColorPalette } = require('./colors');
+
+  // Check custom colors first
+  if (config.colors?.accent?.[shade]) {
+    return config.colors.accent[shade];
+  }
+
+  // Fall back to preset
+  if (config.preset) {
+    const palette = getColorPalette(config.preset);
+    return palette.accent[shade];
+  }
+
+  // Default
+  return '#16a34a'; // green 600
+}
+
+/**
+ * Recommend a font pairing for a business type.
+ */
+export function recommendFontPairing(businessType: string): FontConfig {
+  const recommendations: Record<string, string> = {
+    tailor: 'classic',
+    restaurant: 'elegant',
+    'home-kitchen': 'friendly',
+    salon: 'modern',
+    accountant: 'professional',
+    lawyer: 'professional',
+    'auto-repair': 'bold',
+    'shoe-repair': 'classic',
+    generic: 'modern',
+  };
+
+  const pairingName = recommendations[businessType] || 'modern';
+  return fontPairings[pairingName];
+}