From ef63a082caa4aeff57e5a45e88ff8f96eb707ae2 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Tue, 10 Mar 2026 09:48:25 +0100
Subject: [PATCH] export theme correctly exports the correct json

---
 .../ThemeGeneratorConfigPage.tsx              | 19 ++++++++++++++++---
 .../components/review/ReviewTokensGrid.tsx    |  4 ++--
 .../theme-generator/steps/ReviewDetails.tsx   | 18 ++----------------
 apps/website/screens/theme-generator/utils.ts |  4 ++--
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx
index efd6f2506..28342182c 100644
--- a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx
+++ b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { DxcContainer, DxcFlex, DxcWizard } from "@dxc-technology/halstack-react";
 import StepHeading from "./components/StepHeading";
 import BottomButtons from "./components/BottomButtons";
@@ -57,6 +57,19 @@ const ThemeGeneratorConfigPage = () => {
   const [tokens, setTokens] = useState<Record<string, string>>({});
   const lastGeneratedColorsRef = useRef<string>("");
 
+  const themeJson = useMemo(() => {
+    const themeObject = {
+      tokens: tokens,
+      logos: {
+        mainLogo: "",
+        footerLogo: "",
+        footerReducedLogo: "",
+        favicon: "",
+      },
+    };
+    return JSON.stringify(themeObject, null, 2);
+  }, [tokens]);
+
   const generateTokensFromColors = () => {
     try {
       const mappedColors = {
@@ -93,7 +106,7 @@ const ThemeGeneratorConfigPage = () => {
       case 1:
         return <ThemeGeneratorPreviewPage tokens={tokens} logos={logos} />;
       case 2:
-        return <ReviewDetails generatedTokens={tokens} logos={logos} />;
+        return <ReviewDetails tokens={tokens} logos={logos} themeJson={themeJson} />;
     }
   };
 
@@ -131,7 +144,7 @@ const ThemeGeneratorConfigPage = () => {
         <BottomButtons
           currentStep={currentStep}
           onChangeStep={handleChangeStep}
-          onExport={() => handleExport(tokens)}
+          onExport={() => handleExport(themeJson)}
         />
       </DxcFlex>
     </DxcContainer>
diff --git a/apps/website/screens/theme-generator/components/review/ReviewTokensGrid.tsx b/apps/website/screens/theme-generator/components/review/ReviewTokensGrid.tsx
index 639f62244..8bead7e18 100644
--- a/apps/website/screens/theme-generator/components/review/ReviewTokensGrid.tsx
+++ b/apps/website/screens/theme-generator/components/review/ReviewTokensGrid.tsx
@@ -3,8 +3,8 @@ import { Tokens } from "../../types";
 import React, { useMemo } from "react";
 import { divideColorTokens, SHADE_VALUES } from "../../utils";
 
-const ReviewTokensGrid = ({ generatedTokens }: { generatedTokens: Tokens }) => {
-  const tokenGroups = useMemo(() => divideColorTokens(generatedTokens), [generatedTokens]);
+const ReviewTokensGrid = ({ tokens }: { tokens: Tokens }) => {
+  const tokenGroups = useMemo(() => divideColorTokens(tokens), [tokens]);
   return (
     <DxcGrid
       templateColumns={["100px", "repeat(10, 1fr)"]}
diff --git a/apps/website/screens/theme-generator/steps/ReviewDetails.tsx b/apps/website/screens/theme-generator/steps/ReviewDetails.tsx
index 0089da961..2fa934186 100644
--- a/apps/website/screens/theme-generator/steps/ReviewDetails.tsx
+++ b/apps/website/screens/theme-generator/steps/ReviewDetails.tsx
@@ -4,23 +4,9 @@ import ReviewTokensGrid from "../components/review/ReviewTokensGrid";
 import ReviewTokensList from "../components/review/ReviewTokensList";
 import ReviewBrandingAssets from "../components/review/ReviewBrandingAssets";
 import useCopyToClipboard from "hooks/useCopyToClipboard";
-import { useMemo } from "react";
 import ReviewSectionContainer from "../components/review/ReviewSectionContainer";
 
-const ReviewDetails = ({ generatedTokens, logos }: { generatedTokens: Tokens; logos: Logos }) => {
-  const themeJson = useMemo(() => {
-    const themeObject = {
-      tokens: generatedTokens,
-      logos: {
-        mainLogo: "",
-        footerLogo: "",
-        footerReducedLogo: "",
-        favicon: "",
-      },
-    };
-    return JSON.stringify(themeObject, null, 2);
-  }, [generatedTokens]);
-
+const ReviewDetails = ({ tokens, logos, themeJson }: { tokens: Tokens; logos: Logos; themeJson: string }) => {
   const handleCopy = useCopyToClipboard();
 
   return (
@@ -42,7 +28,7 @@ const ReviewDetails = ({ generatedTokens, logos }: { generatedTokens: Tokens; lo
       >
         <DxcGrid templateColumns={["2fr", "1fr"]} templateRows={["368px"]} gap="var(--spacing-gap-m)">
           <DxcFlex justifyContent="center">
-            <ReviewTokensGrid generatedTokens={generatedTokens} />
+            <ReviewTokensGrid tokens={tokens} />
           </DxcFlex>
           <ReviewTokensList themeJson={themeJson} />
         </DxcGrid>
diff --git a/apps/website/screens/theme-generator/utils.ts b/apps/website/screens/theme-generator/utils.ts
index 943e55293..e9830f8bf 100644
--- a/apps/website/screens/theme-generator/utils.ts
+++ b/apps/website/screens/theme-generator/utils.ts
@@ -93,8 +93,8 @@ export const generateTokens = (baseColors: BaseColors): Tokens => {
   return generateTokensObject(baseColors);
 };
 
-export const handleExport = (tokens: Tokens) => {
-  const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(tokens, null, 2));
+export const handleExport = (themeJson: string) => {
+  const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(themeJson);
   const downloadAnchorNode = document.createElement("a");
   downloadAnchorNode.setAttribute("href", dataStr);
   downloadAnchorNode.setAttribute("download", "halstack-theme-tokens.json");