From 33e4b44806103c63d9c0e25a84e60e04ab5aba90 Mon Sep 17 00:00:00 2001
From: Luis Llanes <137589205+llanesluis@users.noreply.github.com>
Date: Mon, 30 Jun 2025 14:55:48 -0700
Subject: [PATCH] fix: spacing default styles were overridden with 'undefined'
 when AI theme was generated (#135)

---
 components/editor/ai/message-controls.tsx |  3 ++-
 lib/ai/ai-theme-generator.ts              | 21 +++++++--------------
 utils/theme-style-generator.ts            |  9 ++++-----
 utils/theme-styles.ts                     | 11 +++++++++++
 4 files changed, 24 insertions(+), 20 deletions(-)
 create mode 100644 utils/theme-styles.ts

diff --git a/components/editor/ai/message-controls.tsx b/components/editor/ai/message-controls.tsx
index f1714083..b330579c 100644
--- a/components/editor/ai/message-controls.tsx
+++ b/components/editor/ai/message-controls.tsx
@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils";
 import { useEditorStore } from "@/store/editor-store";
 import { type ChatMessage as ChatMessageType } from "@/types/ai";
 import { ThemeStyles } from "@/types/theme";
+import { mergeThemeStylesWithDefaults } from "@/utils/theme-styles";
 import { Goal, RefreshCw } from "lucide-react";
 
 type MessageControlsProps = {
@@ -24,7 +25,7 @@ export function MessageControls({ message, onRetry }: MessageControlsProps) {
 
     setThemeState({
       ...themeState,
-      styles: themeStyles,
+      styles: mergeThemeStylesWithDefaults(themeStyles),
     });
   };
 
diff --git a/lib/ai/ai-theme-generator.ts b/lib/ai/ai-theme-generator.ts
index b5df2932..35b3341a 100644
--- a/lib/ai/ai-theme-generator.ts
+++ b/lib/ai/ai-theme-generator.ts
@@ -1,8 +1,8 @@
-import { defaultThemeState } from "@/config/theme";
 import { useEditorStore } from "@/store/editor-store";
 import { AIPromptData } from "@/types/ai";
 import { Theme } from "@/types/theme";
 import { buildPromptForAPI } from "@/utils/ai/ai-prompt";
+import { mergeThemeStylesWithDefaults } from "@/utils/theme-styles";
 
 /**
  * Generate a theme with AI using a text prompt
@@ -42,27 +42,20 @@ export async function generateThemeWithAI(prompt: string, options?: { signal?: A
 export function applyGeneratedTheme(themeStyles: Theme["styles"]) {
   const { themeState, setThemeState } = useEditorStore.getState();
 
+  // Merge the generated theme styles with the default theme styles
+  // if the generated theme styles are missing a value, use the default theme styles
+  const mergedStyles = mergeThemeStylesWithDefaults(themeStyles);
+
   if (!document.startViewTransition) {
     setThemeState({
       ...themeState,
-      styles: {
-        ...themeState.styles,
-        light: { ...defaultThemeState.styles.light, ...themeStyles.light },
-        dark: { ...defaultThemeState.styles.dark, ...themeStyles.dark },
-      },
+      styles: mergedStyles,
     });
   } else {
     document.startViewTransition(() => {
       setThemeState({
         ...themeState,
-        styles: {
-          ...themeState.styles,
-          light: {
-            ...defaultThemeState.styles.light,
-            ...themeStyles.light,
-          },
-          dark: { ...defaultThemeState.styles.dark, ...themeStyles.dark },
-        },
+        styles: mergedStyles,
       });
     });
   }
diff --git a/utils/theme-style-generator.ts b/utils/theme-style-generator.ts
index 7e4c20bb..007b246c 100644
--- a/utils/theme-style-generator.ts
+++ b/utils/theme-style-generator.ts
@@ -96,14 +96,13 @@ const generateThemeVariables = (
     getShadowMap({ styles: themeStyles, currentMode: mode })
   );
   const spacingVar =
-    mode === "light" && themeStyles["light"].spacing !== defaultLightThemeStyles.spacing
-      ? `\n  --spacing: ${themeStyles["light"].spacing};`
+    mode === "light"
+      ? `\n  --spacing: ${themeStyles["light"].spacing ?? defaultLightThemeStyles.spacing};`
       : "";
 
   const trackingVars =
-    mode === "light" &&
-    themeStyles["light"]["letter-spacing"] !== defaultLightThemeStyles["letter-spacing"]
-      ? `\n  --tracking-normal: ${themeStyles["light"]["letter-spacing"]};`
+    mode === "light"
+      ? `\n  --tracking-normal: ${themeStyles["light"]["letter-spacing"] ?? defaultLightThemeStyles["letter-spacing"]};`
       : "";
 
   return (
diff --git a/utils/theme-styles.ts b/utils/theme-styles.ts
new file mode 100644
index 00000000..ed308883
--- /dev/null
+++ b/utils/theme-styles.ts
@@ -0,0 +1,11 @@
+import { defaultThemeState } from "@/config/theme";
+import { ThemeStyles } from "@/types/theme";
+
+export function mergeThemeStylesWithDefaults(themeStyles: ThemeStyles) {
+  const mergedStyles = {
+    ...defaultThemeState.styles,
+    light: { ...defaultThemeState.styles.light, ...themeStyles.light },
+    dark: { ...defaultThemeState.styles.dark, ...themeStyles.dark },
+  };
+  return mergedStyles;
+}