183 lines
4.7 KiB
TypeScript
183 lines
4.7 KiB
TypeScript
export type EmailStylePreset = {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
canvasColor: string;
|
|
cardColor: string;
|
|
headerColor: string;
|
|
headingColor: string;
|
|
textColor: string;
|
|
mutedColor: string;
|
|
borderColor: string;
|
|
buttonColor: string;
|
|
buttonTextColor: string;
|
|
chipColor: string;
|
|
chipTextColor: string;
|
|
shadow: string;
|
|
};
|
|
|
|
export const EMAIL_STYLE_PRESETS: EmailStylePreset[] = [
|
|
{
|
|
id: "minimal",
|
|
name: "Minimal",
|
|
description: "Reduziert, klar und neutral.",
|
|
canvasColor: "#f8fafc",
|
|
cardColor: "#ffffff",
|
|
headerColor: "#f8fafc",
|
|
headingColor: "#0f172a",
|
|
textColor: "#1e293b",
|
|
mutedColor: "#64748b",
|
|
borderColor: "#e2e8f0",
|
|
buttonColor: "#0f172a",
|
|
buttonTextColor: "#ffffff",
|
|
chipColor: "#f1f5f9",
|
|
chipTextColor: "#334155",
|
|
shadow: "0 12px 24px rgba(15,23,42,0.08)"
|
|
},
|
|
{
|
|
id: "corporate",
|
|
name: "Corporate",
|
|
description: "Professionell mit Indigo-Header.",
|
|
canvasColor: "#eef2ff",
|
|
cardColor: "#ffffff",
|
|
headerColor: "#4f46e5",
|
|
headingColor: "#ffffff",
|
|
textColor: "#1e293b",
|
|
mutedColor: "#6366f1",
|
|
borderColor: "#c7d2fe",
|
|
buttonColor: "#4f46e5",
|
|
buttonTextColor: "#ffffff",
|
|
chipColor: "#eef2ff",
|
|
chipTextColor: "#3730a3",
|
|
shadow: "0 16px 36px rgba(79,70,229,0.18)"
|
|
},
|
|
{
|
|
id: "startup",
|
|
name: "Startup",
|
|
description: "Gradient-lastig und modern.",
|
|
canvasColor: "#f8fafc",
|
|
cardColor: "#ffffff",
|
|
headerColor: "#eef2ff",
|
|
headingColor: "#4f46e5",
|
|
textColor: "#334155",
|
|
mutedColor: "#6366f1",
|
|
borderColor: "#cbd5e1",
|
|
buttonColor: "#4f46e5",
|
|
buttonTextColor: "#ffffff",
|
|
chipColor: "#e0e7ff",
|
|
chipTextColor: "#4338ca",
|
|
shadow: "0 20px 36px rgba(79,70,229,0.16)"
|
|
},
|
|
{
|
|
id: "serif",
|
|
name: "Serif",
|
|
description: "Magazin-Stil mit Serifen-Typografie.",
|
|
canvasColor: "#faf8f5",
|
|
cardColor: "#ffffff",
|
|
headerColor: "#f5f0e8",
|
|
headingColor: "#1a1a1a",
|
|
textColor: "#2b2721",
|
|
mutedColor: "#78716c",
|
|
borderColor: "#e7e0d5",
|
|
buttonColor: "#1a1a1a",
|
|
buttonTextColor: "#faf8f5",
|
|
chipColor: "#f0ebe0",
|
|
chipTextColor: "#44403c",
|
|
shadow: "0 12px 28px rgba(43,39,33,0.08)"
|
|
},
|
|
{
|
|
id: "mono",
|
|
name: "Mono",
|
|
description: "Schwarz-Weiß, klar und direkt.",
|
|
canvasColor: "#ffffff",
|
|
cardColor: "#ffffff",
|
|
headerColor: "#0f172a",
|
|
headingColor: "#ffffff",
|
|
textColor: "#1e293b",
|
|
mutedColor: "#64748b",
|
|
borderColor: "#0f172a",
|
|
buttonColor: "#0f172a",
|
|
buttonTextColor: "#ffffff",
|
|
chipColor: "#f1f5f9",
|
|
chipTextColor: "#0f172a",
|
|
shadow: "0 8px 20px rgba(15,23,42,0.06)"
|
|
},
|
|
{
|
|
id: "glass",
|
|
name: "Glass",
|
|
description: "Subtile Transparenz und Unschärfe.",
|
|
canvasColor: "#f8fafc",
|
|
cardColor: "rgba(255,255,255,0.7)",
|
|
headerColor: "rgba(255,255,255,0.4)",
|
|
headingColor: "#0f172a",
|
|
textColor: "#334155",
|
|
mutedColor: "#94a3b8",
|
|
borderColor: "rgba(226,232,240,0.8)",
|
|
buttonColor: "#0f172a",
|
|
buttonTextColor: "#ffffff",
|
|
chipColor: "rgba(241,245,249,0.8)",
|
|
chipTextColor: "#475569",
|
|
shadow: "0 8px 32px rgba(15,23,42,0.04)"
|
|
},
|
|
{
|
|
id: "ink",
|
|
name: "Ink",
|
|
description: "Tiefes Blau, edel und ruhig.",
|
|
canvasColor: "#f0f4ff",
|
|
cardColor: "#ffffff",
|
|
headerColor: "#1e3a5f",
|
|
headingColor: "#e8f0fe",
|
|
textColor: "#1e293b",
|
|
mutedColor: "#475569",
|
|
borderColor: "#cbd5e1",
|
|
buttonColor: "#1e3a5f",
|
|
buttonTextColor: "#ffffff",
|
|
chipColor: "#e2e8f0",
|
|
chipTextColor: "#1e3a5f",
|
|
shadow: "0 14px 30px rgba(30,58,95,0.1)"
|
|
},
|
|
{
|
|
id: "warm",
|
|
name: "Warm",
|
|
description: "Persönlich mit warmen Erdtönen.",
|
|
canvasColor: "#fef7ed",
|
|
cardColor: "#ffffff",
|
|
headerColor: "#b45309",
|
|
headingColor: "#fff7ed",
|
|
textColor: "#431407",
|
|
mutedColor: "#92400e",
|
|
borderColor: "#fde68a",
|
|
buttonColor: "#b45309",
|
|
buttonTextColor: "#ffffff",
|
|
chipColor: "#fef3c7",
|
|
chipTextColor: "#78350f",
|
|
shadow: "0 14px 28px rgba(180,83,9,0.12)"
|
|
},
|
|
{
|
|
id: "soft",
|
|
name: "Soft",
|
|
description: "Luftig, hell und unaufdringlich.",
|
|
canvasColor: "#fafafa",
|
|
cardColor: "#ffffff",
|
|
headerColor: "#f5f5f5",
|
|
headingColor: "#404040",
|
|
textColor: "#525252",
|
|
mutedColor: "#a3a3a3",
|
|
borderColor: "#e5e5e5",
|
|
buttonColor: "#737373",
|
|
buttonTextColor: "#ffffff",
|
|
chipColor: "#f5f5f5",
|
|
chipTextColor: "#525252",
|
|
shadow: "0 8px 20px rgba(0,0,0,0.03)"
|
|
}
|
|
];
|
|
|
|
export const DEFAULT_EMAIL_STYLE_ID = EMAIL_STYLE_PRESETS[0]!.id;
|
|
|
|
export function getEmailStylePreset(styleId?: string) {
|
|
return (
|
|
EMAIL_STYLE_PRESETS.find((preset) => preset.id === styleId) ??
|
|
EMAIL_STYLE_PRESETS[0]!
|
|
);
|
|
}
|