| 1 | "use client"; |
| 2 | |
| 3 | import { |
| 4 | themes as builtinThemes, |
| 5 | type ThemeColors, |
| 6 | type ThemeProperties, |
| 7 | type Themes, |
| 8 | } from "@/lib/presentation/themes"; |
| 9 | import { type ThemeFormValues } from "../types"; |
| 10 | |
| 11 | export type CreateThemeStep = "colors" | "fonts" | "design" | "save"; |
| 12 | |
| 13 | export type DesignStyle = |
| 14 | | "standard" |
| 15 | | "flat" |
| 16 | | "outline" |
| 17 | | "sharp" |
| 18 | | "blocky" |
| 19 | | "glass" |
| 20 | | "rounded" |
| 21 | | "soft-cloud" |
| 22 | | "capsule"; |
| 23 | |
| 24 | export type PreviewTab = "test" | "current"; |
| 25 | |
| 26 | // ColorTheme extends the core theme form structure with flat types |
| 27 | export type ColorTheme = { |
| 28 | id: Themes; |
| 29 | } & ThemeProperties; |
| 30 | |
| 31 | const fallbackColors: ThemeColors = { |
| 32 | primary: "#3B82F6", |
| 33 | accent: "#60A5FA", |
| 34 | background: "#FFFFFF", |
| 35 | text: "#1F2937", |
| 36 | heading: "#111827", |
| 37 | smartLayout: "#3B82F6", |
| 38 | cardBackground: "#FFFFFF", |
| 39 | }; |
| 40 | |
| 41 | const fallbackFonts: ThemeFormValues["fonts"] = { |
| 42 | heading: "Inter, sans-serif", |
| 43 | body: "Inter, sans-serif", |
| 44 | }; |
| 45 | |
| 46 | const fallbackShadows: ThemeFormValues["shadows"] = { |
| 47 | card: "0 1px 3px rgba(0,0,0,0.05)", |
| 48 | button: "0 1px 2px rgba(0,0,0,0.03)", |
| 49 | slide: "", |
| 50 | }; |
| 51 | |
| 52 | const fallbackTransitions: ThemeFormValues["transitions"] = { |
| 53 | default: "all 0.2s ease-in-out", |
| 54 | }; |
| 55 | const fallbackBorderRaidus: ThemeFormValues["borderRadius"] = { |
| 56 | card: "0rem", |
| 57 | slide: "0rem", |
| 58 | button: "0rem", |
| 59 | }; |
| 60 | |
| 61 | const fromTheme = (id: Themes, theme: ThemeProperties): ColorTheme => ({ |
| 62 | id, |
| 63 | name: theme.name, |
| 64 | description: theme.description, |
| 65 | mode: theme.mode, |
| 66 | colors: { ...theme.colors }, |
| 67 | fonts: { ...theme.fonts }, |
| 68 | borderRadius: theme.borderRadius, |
| 69 | transitions: { ...theme.transitions }, |
| 70 | shadows: { ...theme.shadows }, |
| 71 | background: theme.background ? { ...theme.background } : undefined, |
| 72 | }); |
| 73 | |
| 74 | const derivedThemes = Object.entries(builtinThemes).map(([key, value]) => |
| 75 | fromTheme(key as Themes, value), |
| 76 | ); |
| 77 | |
| 78 | export const colorThemes: ColorTheme[] = |
| 79 | derivedThemes.length > 0 |
| 80 | ? derivedThemes |
| 81 | : [ |
| 82 | { |
| 83 | id: "mystique", |
| 84 | name: "Mystique", |
| 85 | description: "Default theme", |
| 86 | colors: fallbackColors, |
| 87 | fonts: fallbackFonts, |
| 88 | borderRadius: fallbackBorderRaidus, |
| 89 | transitions: fallbackTransitions, |
| 90 | shadows: fallbackShadows, |
| 91 | mode: "light", |
| 92 | }, |
| 93 | ]; |
| 94 |