[doc]Alert and icons added to theme page & new tokens structure applied

apps/website/screens/guidelines/themes/ThemesPage.tsx

@@ -1,7 +1,7 @@
 import DocFooter from "@/common/DocFooter";
 import PageHeading from "@/common/PageHeading";
 import DxcQuickNavContainer from "@/common/QuickNavContainer";
-import { DxcBulletedList, DxcFlex, DxcHeading, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
+import { DxcAlert, DxcBulletedList, DxcFlex, DxcHeading, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
 import Link from "next/link";
 
 const sections = [
@@ -93,7 +93,9 @@ const sections = [
       <>
         <DxcParagraph>
           <Link href="/theme-generator/" passHref legacyBehavior>
-            <DxcLink>Theme Generator</DxcLink>
+            <DxcLink newWindow icon="Link">
+              Theme Generator
+            </DxcLink>
           </Link>{" "}
           helps you create Halstack themes without manual token configuration. Instead of defining dozens of values, you
           provide your core and semantic colors, and the tool generates a complete, ready-to-use token structure.
@@ -109,7 +111,9 @@ const sections = [
         <DxcParagraph>
           For more details about how the tool works, visit the{" "}
           <Link href="/theme-generator/user-guide/" passHref legacyBehavior>
-            <DxcLink>Theme Generator user guide</DxcLink>
+            <DxcLink newWindow icon="link">
+              Theme Generator user guide
+            </DxcLink>
           </Link>
           .
         </DxcParagraph>
@@ -123,6 +127,22 @@ const ThemesPage = () => (
     <PageHeading>
       <DxcFlex direction="column" gap="var(--spacing-gap-xl)">
         <DxcHeading level={1} text="Themes" />
+        <DxcAlert
+          title="Theme generator"
+          closable={false}
+          message={{
+            text: (
+              <DxcParagraph>
+                You can start configuring your own themes using the{" "}
+                <Link href="/theme-generator/" passHref legacyBehavior>
+                  <DxcLink newWindow iconPosition="after" icon="arrow_right_alt">
+                    Theme Generator
+                  </DxcLink>
+                </Link>
+              </DxcParagraph>
+            ),
+          }}
+        />
       </DxcFlex>
     </PageHeading>
     <DxcQuickNavContainer sections={sections} startHeadingLevel={2} />

apps/website/screens/theme-generator/ThemeGeneratorPreviewPage.tsx

@@ -150,6 +150,15 @@ const ThemeGeneratorPreviewPage = ({ tokens, logos }: { tokens: Record<string, s
     return null;
   }, [mode, selectedComponents, selectedExample]);
 
+  const processedLogos = useMemo(() => {
+    return {
+      mainLogo: logos.mainLogo?.[0]?.preview,
+      footerLogo: logos.footerLogo?.[0]?.preview,
+      footerReducedLogo: logos.footerReducedLogo?.[0]?.preview,
+      favicon: logos.favicon?.[0]?.preview,
+    };
+  }, [logos]);
+
   return (
     <DxcContainer width="100%" height="100%">
       <DxcFlex direction="column" gap="var(--spacing-gap-s)" fullHeight>
@@ -234,7 +243,7 @@ const ThemeGeneratorPreviewPage = ({ tokens, logos }: { tokens: Record<string, s
                 />
               </DxcFlex>
               <PreviewAreaContainer>
-                <HalstackProvider opinionatedTheme={tokens}>
+                <HalstackProvider opinionatedTheme={{ tokens, logos: processedLogos }}>
                   <DxcFlex direction="column" gap="var(--spacing-gap-l)">
                     {displayedPreview}
                   </DxcFlex>