lib/theme-system.ts

/**
 * Theme System
 *
 * Supports three templates: neobrutalism, galeryn, and noisy.
 * User-facing labels are Neo-Brutal, Galeryn, and Distortion.
 * Layout-specific styling is handled by the template config in data/templates/.
 * This file exists for backward compatibility with components that reference ThemeName.
 */

export type ThemeName = 'neobrutalism' | 'galeryn' | 'noisy';

export interface ThemeStyle {
  background: string;
  textColor: string;
  accentColor?: string;
  secondaryAccent?: string;
  overlay?: string;
}

export interface Theme {
  name: ThemeName;
  displayName: string;
  default: ThemeStyle;
}

export const themes: Theme[] = [
  {
    name: 'neobrutalism',
    displayName: 'Neo-Brutal',
    default: {
      background: 'bg-[#F5F5F0]',
      textColor: 'text-black',
      accentColor: 'bg-[#D9FF00]',
      secondaryAccent: 'bg-[#00FFFF]',
      overlay: 'radial-gradient(circle, #000 1px, transparent 1px) 0 0 / 24px 24px',
    },
  },
  {
    name: 'galeryn',
    displayName: 'Galeryn',
    default: {
      background: 'bg-[#fbf9f4]',
      textColor: 'text-[#021d30]',
      accentColor: 'bg-[#021d30]',
      secondaryAccent: 'bg-[#d4e8d4]',
    },
  },
  {
    name: 'noisy',
    displayName: 'Distortion',
    default: {
      background: 'bg-[#547BEE]',
      textColor: 'text-white',
      accentColor: 'bg-[#FF7A59]',
      secondaryAccent: 'bg-[#F2725C]',
    },
  },
];

export function getThemeStyle(themeName: ThemeName): ThemeStyle {
  const theme = themes.find((t) => t.name === themeName);
  return theme?.default ?? themes[0].default;
}

export function getAllThemes(): Array<{ name: ThemeName; displayName: string }> {
  return themes.map((t) => ({ name: t.name, displayName: t.displayName }));
}