[doc] Theme generator

README.md

@@ -31,7 +31,7 @@ const App = () => (
 
 ## Where to start
 
-Learn everything you need to know about Halstack principles and components on the [official documentation site](https://developer.assure.dxc.com/halstack/).
+Learn everything you need to know about Halstack guidelines and components on the [official documentation site](https://developer.assure.dxc.com/halstack/).
 
 ## Contributing
 

apps/website/hooks/useCopyToClipboard.tsx

@@ -0,0 +1,20 @@
+import { useToast } from "@dxc-technology/halstack-react";
+
+const useCopyToClipboard = () => {
+  const toast = useToast();
+
+  const handleCopy = (text: string) => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        toast.success({ message: "Code copied to the clipboard." });
+      })
+      .catch(() => {
+        toast.warning({ message: "Failed to copy the text to the clipboard." });
+      });
+  };
+
+  return handleCopy;
+};
+
+export default useCopyToClipboard;

apps/website/package.json

@@ -8,6 +8,7 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
+    "@adobe/leonardo-contrast-colors": "^1.0.0",
     "@cloudscape-design/components": "^3.0.706",
     "@dxc-technology/halstack-react": "*",
     "@emotion/cache": "^11.14.0",

apps/website/pages/_app.tsx

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode, useMemo, useState } from "react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import { DxcApplicationLayout, DxcToastsQueue } from "@dxc-technology/halstack-react";
+import { DxcApplicationLayout, DxcInset, DxcLink, DxcToastsQueue } from "@dxc-technology/halstack-react";
 import MainContent from "@/common/MainContent";
 import { useRouter } from "next/router";
 import { LinkDetails, LinksSectionDetails, LinksSections } from "@/common/pagesList";
@@ -31,6 +31,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
   const componentWithLayout = getLayout(<Component {...pageProps} />);
   const [filter, setFilter] = useState("");
   const { asPath: currentPath } = useRouter();
+  const isThemeGenerator = currentPath.includes("/theme-generator");
 
   const matchPaths = (linkPath: string) => {
     const desiredPaths = [linkPath, `${linkPath}/code`];
@@ -109,18 +110,40 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
       </Head>
       <DxcApplicationLayout
         logo={{ src: dxcLogo, alt: "DXC Technology" }}
-        header={<DxcApplicationLayout.Header />}
+        header={
+          isThemeGenerator ? (
+            <DxcApplicationLayout.Header
+              appTitle="Theme Generator"
+              sideContent={
+                !currentPath.includes("/theme-generator/user-guide") && (
+                  <DxcInset horizontal="var(--spacing-padding-xs)">
+                    <Link href="/theme-generator/user-guide" legacyBehavior passHref>
+                      <DxcLink newWindow icon="description">
+                        User guide
+                      </DxcLink>
+                    </Link>
+                  </DxcInset>
+                )
+              }
+            />
+          ) : (
+            <DxcApplicationLayout.Header />
+          )
+        }
         sidenav={
-          <DxcApplicationLayout.Sidenav
-            navItems={navItems}
-            appTitle={<SidenavLogo />}
-            searchBar={{ placeholder: "Search docs", onChange: (value) => setFilter(value) }}
-          />
+          !isThemeGenerator && (
+            <DxcApplicationLayout.Sidenav
+              navItems={navItems}
+              appTitle={<SidenavLogo />}
+              searchBar={{ placeholder: "Search docs", onChange: (value) => setFilter(value) }}
+            />
+          )
         }
+        footer={isThemeGenerator ? <DxcApplicationLayout.Footer mode="reduced" /> : undefined}
       >
         <DxcApplicationLayout.Main>
           <DxcToastsQueue duration={7000}>
-            <MainContent>{componentWithLayout}</MainContent>
+            {!isThemeGenerator ? <MainContent>{componentWithLayout}</MainContent> : <>{componentWithLayout}</>}
           </DxcToastsQueue>
         </DxcApplicationLayout.Main>
       </DxcApplicationLayout>

apps/website/pages/principles/data-visualization.tsx → apps/website/pages/guidelines/data-visualization.tsx

@@ -1,5 +1,5 @@
 import Head from "next/head";
-import DataVisualizationPage from "screens/principles/data-visualization/DataVisualizationPage";
+import DataVisualizationPage from "screens/guidelines/data-visualization/DataVisualizationPage";
 
 const DataVisualization = () => (
   <>

apps/website/pages/principles/localization.tsx → apps/website/pages/guidelines/localization.tsx

@@ -1,5 +1,5 @@
 import Head from "next/head";
-import LocalizationPage from "screens/principles/localization/LocalizationPage";
+import LocalizationPage from "screens/guidelines/localization/LocalizationPage";
 
 const Localization = () => (
   <>

apps/website/pages/guidelines/themes.tsx

@@ -0,0 +1,13 @@
+import Head from "next/head";
+import ThemesPage from "screens/guidelines/themes/ThemesPage";
+
+const Themes = () => (
+  <>
+    <Head>
+      <title>Themes — Halstack Design System</title>
+    </Head>
+    <ThemesPage />
+  </>
+);
+
+export default Themes;

apps/website/pages/theme-generator/configuration.tsx

@@ -0,0 +1,15 @@
+import Head from "next/head";
+import ThemeGeneratorConfigPage from "screens/theme-generator/ThemeGeneratorConfigPage";
+
+const Index = () => {
+  return (
+    <>
+      <Head>
+        <title>Theme generator — Halstack Design System</title>
+      </Head>
+      <ThemeGeneratorConfigPage />
+    </>
+  );
+};
+
+export default Index;

apps/website/pages/theme-generator/index.tsx

@@ -0,0 +1,15 @@
+import Head from "next/head";
+import ThemeGeneratorPage from "screens/theme-generator/ThemeGeneratorPage";
+
+const Index = () => {
+  return (
+    <>
+      <Head>
+        <title>Theme generator — Halstack Design System</title>
+      </Head>
+      <ThemeGeneratorPage />
+    </>
+  );
+};
+
+export default Index;

apps/website/pages/theme-generator/user-guide.tsx

@@ -0,0 +1,15 @@
+import Head from "next/head";
+import ThemeGeneratorUserGuidePage from "screens/theme-generator/ThemeGeneratorUserGuidePage";
+
+const Index = () => {
+  return (
+    <>
+      <Head>
+        <title>Theme generator — Halstack Design System</title>
+      </Head>
+      <ThemeGeneratorUserGuidePage />
+    </>
+  );
+};
+
+export default Index;

apps/website/screens/common/example/Example.tsx

@@ -2,7 +2,8 @@ import { useState } from "react";
 import styled from "@emotion/styled";
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 import theme from "./liveEditorTheme";
-import { DxcButton, DxcFlex, useToast } from "@dxc-technology/halstack-react";
+import { DxcButton, DxcFlex } from "@dxc-technology/halstack-react";
+import useCopyToClipboard from "hooks/useCopyToClipboard";
 
 const StyledPreview = styled.div`
   background-color: var(--color-bg-neutral-lightest);
@@ -49,24 +50,13 @@ type ExamplePropTypes = {
 };
 //
 const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes) => {
-  const toast = useToast();
   const [isCodeVisible, changeIsCodeVisible] = useState(defaultIsVisible);
   const [liveCode, setLiveCode] = useState(example.code);
 
   const handleCodeOnClick = () => {
     changeIsCodeVisible(!isCodeVisible);
   };
-
-  const handleCopy = () => {
-    navigator.clipboard
-      .writeText(liveCode)
-      .then(() => {
-        toast.success({ message: "Code copied to the clipboard." });
-      })
-      .catch(() => {
-        toast.warning({ message: "Failed to copy the text to the clipboard." });
-      });
-  };
+  const handleCopy = useCopyToClipboard();
 
   return (
     <DxcFlex direction="column" gap="var(--spacing-gap-m)">
@@ -79,7 +69,16 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
         </StyledPreview>
         {actionsVisible && (
           <DxcFlex gap="var(--spacing-gap-s)" justifyContent="flex-end">
-            {isCodeVisible && <DxcButton icon="content_copy" label="Copy code" mode="tertiary" onClick={handleCopy} />}
+            {isCodeVisible && (
+              <DxcButton
+                icon="content_copy"
+                label="Copy code"
+                mode="tertiary"
+                onClick={() => {
+                  handleCopy(liveCode);
+                }}
+              />
+            )}
             <DxcButton
               icon={isCodeVisible ? "code_off" : "code"}
               label={isCodeVisible ? "Hide code" : "View code"}

apps/website/screens/common/images/dxc_logo.tsx

@@ -1,19 +1,26 @@
 export const dxcLogo = (
-  <svg xmlns="http://www.w3.org/2000/svg" width="73" height="40" viewBox="0 0 73 40">
-    <title>DXC Logo</title>
-    <g transform="translate(0)">
-      <g>
-        <path
-          d="M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322"
-          transform="translate(-21.028 65.555)"
-          fill="#010101"
-        />
-        <path
-          d="M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978"
-          transform="translate(-21.049 88.739)"
-          fill="#603494"
-        />
-      </g>
-    </g>
+  <svg xmlns="http://www.w3.org/2000/svg" width="860" height="240" viewBox="0 0 860 240" fill="none">
+    Expand commentComment on line R9Resolved
+    <path
+      d="M220.055 60.7583C252.905 60.7583 279.643 87.4387 279.644 120.247C279.644 153.055 252.905 179.735 220.055 179.735H61V155.455H220.055C239.522 155.455 255.362 139.657 255.362 120.247C255.362 100.836 239.522 85.0396 220.055 85.0396H61V60.7583H220.055ZM798 85.0386H638.945C619.478 85.0386 603.638 100.836 603.638 120.247C603.638 139.657 619.478 155.454 638.945 155.454H798V179.735H638.945C606.08 179.735 579.357 153.054 579.356 120.247C579.356 87.4387 606.095 60.7573 638.945 60.7573H798V85.0386ZM556.104 85.0386C530.11 85.0387 511.856 96.5366 492.531 108.706C486.261 112.662 479.906 116.647 473.278 120.204C479.905 123.76 486.261 127.744 492.531 131.701C511.856 143.87 530.11 155.368 556.104 155.368V179.649C523.097 179.649 499.987 165.095 479.591 152.254C462.637 141.585 447.997 132.358 430.058 132.358C412.118 132.358 397.478 141.571 380.524 152.254C360.128 165.095 337.018 179.649 304.011 179.649V155.368C330.006 155.368 348.259 143.87 367.584 131.701C373.854 127.744 380.211 123.76 386.838 120.204C380.211 116.647 373.854 112.662 367.584 108.706C348.259 96.5366 330.006 85.0386 304.011 85.0386V60.7573C337.018 60.7573 360.128 75.3119 380.524 88.1665C397.478 98.8358 412.118 108.063 430.058 108.063V108.048C447.997 108.048 462.637 98.8364 479.591 88.1528C499.987 75.3125 523.097 60.7575 556.104 60.7573V85.0386Z"
+      fill="url(#paint0_radial_1679_944)"
+    />
+    <defs>
+      <radialGradient
+        id="paint0_radial_1679_944"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientTransform="matrix(402.422 -113.55 49.0928 173.987 432 120.032)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FFB87E" />
+        <stop offset="0.163458" stopColor="#FFA962" />
+        <stop offset="0.337937" stopColor="#FEA15F" />
+        <stop offset="0.557693" stopColor="#FF7E51" />
+        <stop offset="0.839777" stopColor="#B88A99" />
+        <stop offset="1" stopColor="#6399F0" />
+      </radialGradient>
+    </defs>
   </svg>
 );