Files
menulio/apps/web/src/lib/theme.ts
T
2026-08-20 01:51:59 +03:00

132 lines
3.4 KiB
TypeScript

import type { ThemeConfig } from "@menulio/shared";
export interface ThemePreset {
key: string;
name: string;
fontFamily: "serif" | "sans" | "heading";
config: ThemeConfig;
cardBg: string;
cardBorder: string;
textPrimary: string;
textSecondary: string;
accentBg: string;
headerGradient: string;
badgeBg: string;
badgeText: string;
}
export const THEME_PRESETS: Record<string, ThemePreset> = {
elegant: {
key: "elegant",
name: "Elegant Gold",
fontFamily: "serif",
config: {
primaryColor: "#C8A96B",
background: "#FAF8F5",
productLayout: "card",
categoryLayout: "accordion",
},
cardBg: "#FFFFFF",
cardBorder: "rgba(200, 169, 107, 0.18)",
textPrimary: "#1C1917",
textSecondary: "#78716C",
accentBg: "rgba(200, 169, 107, 0.12)",
headerGradient: "linear-gradient(180deg, #1C1917 0%, #292524 100%)",
badgeBg: "#F5F0E6",
badgeText: "#926E27",
},
modern: {
key: "modern",
name: "Modern Sapphire",
fontFamily: "sans",
config: {
primaryColor: "#2563EB",
background: "#F8FAFC",
productLayout: "card",
categoryLayout: "tabs",
},
cardBg: "#FFFFFF",
cardBorder: "rgba(226, 232, 240, 0.9)",
textPrimary: "#0F172A",
textSecondary: "#64748B",
accentBg: "rgba(37, 99, 235, 0.08)",
headerGradient: "linear-gradient(135deg, #1E293B 0%, #0F172A 100%)",
badgeBg: "#EFF6FF",
badgeText: "#1D4ED8",
},
dark: {
key: "dark",
name: "Luxury Dark",
fontFamily: "heading",
config: {
primaryColor: "#F59E0B",
background: "#0F0F12",
productLayout: "card",
categoryLayout: "accordion",
},
cardBg: "#18181D",
cardBorder: "rgba(255, 255, 255, 0.07)",
textPrimary: "#F8FAFC",
textSecondary: "#94A3B8",
accentBg: "rgba(245, 158, 11, 0.12)",
headerGradient: "linear-gradient(180deg, #09090B 0%, #18181B 100%)",
badgeBg: "#27272A",
badgeText: "#FBBF24",
},
minimal: {
key: "minimal",
name: "Nordic Minimal",
fontFamily: "sans",
config: {
primaryColor: "#18181B",
background: "#FAFAFA",
productLayout: "list",
categoryLayout: "flat",
},
cardBg: "#FFFFFF",
cardBorder: "#E4E4E7",
textPrimary: "#18181B",
textSecondary: "#71717A",
accentBg: "#F4F4F5",
headerGradient: "linear-gradient(180deg, #27272A 0%, #18181B 100%)",
badgeBg: "#F4F4F5",
badgeText: "#27272A",
},
classic: {
key: "classic",
name: "Classic Bistro",
fontFamily: "serif",
config: {
primaryColor: "#8B1E1E",
background: "#FFF9F2",
productLayout: "list",
categoryLayout: "accordion",
},
cardBg: "#FFFFFF",
cardBorder: "rgba(139, 30, 30, 0.15)",
textPrimary: "#2D1B18",
textSecondary: "#7A6966",
accentBg: "rgba(139, 30, 30, 0.08)",
headerGradient: "linear-gradient(180deg, #38120F 0%, #240B0A 100%)",
badgeBg: "#FDF2F0",
badgeText: "#8B1E1E",
},
};
const ELEGANT_PRESET: ThemePreset = THEME_PRESETS.elegant!;
export const DEFAULT_THEME: ThemeConfig = ELEGANT_PRESET.config;
export function resolveThemePreset(themeKey?: string, customConfig?: Partial<ThemeConfig>): ThemePreset {
const base = (themeKey ? THEME_PRESETS[themeKey] : undefined) ?? ELEGANT_PRESET;
if (!customConfig) return base;
return {
...base,
config: {
...base.config,
...customConfig,
},
};
}