Skip to content

[doc]User guide added to theme generator #2418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
raquelarrojo merged 4 commits into from
Mar 5, 2026
Merged

[doc]User guide added to theme generator #2418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f589bf6
User guide added to theme generator
Jialecl Mar 4, 2026
86ca88d
Merge branch 'theme-generator' of https://github.com/dxc-technology/h…
Jialecl Mar 4, 2026
c9dbfd0
Improved User Guide instructions, removed instroduction and added images
Jialecl Mar 5, 2026
7c9262a
Link added to bottom link
Jialecl Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions apps/website/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,13 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
<DxcApplicationLayout.Header
appTitle="Theme Generator"
sideContent={
// Will navigate to a documentation page that will probably be open in a different tab.
<Link href="" legacyBehavior passHref>
<DxcLink icon="description">Documentation</DxcLink>
</Link>
!currentPath.includes("/theme-generator/user-guide") && (
<Link href="/theme-generator/user-guide" legacyBehavior passHref>
<DxcLink newWindow icon="description">
User guide
</DxcLink>
</Link>
)
}
/>
) : (
Expand Down
15 changes: 15 additions & 0 deletions apps/website/pages/theme-generator/user-guide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions apps/website/screens/theme-generator/ThemeGeneratorPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,8 +144,8 @@ const ThemeGeneratorPage = () => {
Open Theme Generator
</DxcLink>
</Link>
<Link href="" passHref legacyBehavior>
<DxcLink>View documentation</DxcLink>
<Link href="/theme-generator/user-guide" passHref legacyBehavior>
<DxcLink newWindow>View documentation</DxcLink>
</Link>
</DxcFlex>
</DxcFlex>
Expand Down
143 changes: 143 additions & 0 deletions apps/website/screens/theme-generator/ThemeGeneratorUserGuidePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
import Figure from "@/common/Figure";
import Image from "@/common/Image";
import DxcQuickNavContainer from "@/common/QuickNavContainer";
import { DxcContainer, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
import step1 from "./images/Step_1.png";
import step2 from "./images/Step_2.png";
import step3 from "./images/Step_3.png";

const sections = [
{
title: "Theme Generator User Guide",
content: (
<DxcParagraph>
Building a custom theme is a simple three-step process. You can navigate between these steps at any time using
the wizard at the top of the page or the navigation buttons at the bottom.
</DxcParagraph>
),
subSections: [
{
title: "Step 1: Define your colors",
content: <DxcParagraph>Start by setting the foundation of your brand.</DxcParagraph>,
subSections: [
{
title: "Core colors and semantic colors",
content: (
<DxcParagraph>
You can select the desired values using the <strong>color picker</strong> or entering the specific{" "}
<strong>hex values</strong> for your core colors (
<strong>Primary, Secondary, Tertiary, and Neutral</strong>) along with your semantic colors (
<strong>Info, Success, Warning, and Error</strong>). These values will be used to generate the list of
tokens that can be seen applied in the next step. These will be the <strong>base colors</strong> used to
generate the rest of the tokens, so you can get a good idea of how your theme will look by just setting
these few values. You can always go back and tweak them if you want to see how a different shade of a
specific color looks in the preview step.
</DxcParagraph>
),
},
{
title: "Branding details",
content: (
<>
<DxcParagraph>
Brand logos can be uploaded to see how they appear within our{" "}
<strong>application layout components</strong> and a favicon can also be uploaded. The{" "}
<strong>main logo</strong> will be assigned to the Header (or the Sidenav if the Header is not
available). The <strong>footer logo</strong> is divided into two (default and reduced footer) one for
each mode of the footer, and the final slot is reserved for the favicon.
</DxcParagraph>
<DxcParagraph>
<strong>Note:</strong> Since we do not host these images, they are{" "}
<strong>for visualization purposes only</strong>. They help to see the theme in context, but they will
be left as empty strings in the exported theme file to be replaced with the correct asset paths.
</DxcParagraph>
<Figure caption="Select your colors and branding details in the first step of the theme generator.">
<Image src={step1} alt="Theme generator step 1" />
</Figure>
</>
),
},
],
},
{
title: "Step 2: Preview your theme",
content: (
<>
<DxcParagraph>
Once colors are set, you can move to the next step to see your theme in action. By applying the newly
generated tokens to real <strong>components and layouts</strong>, you will get a clear sense of the look
and feel of the chosen colors and logos in a live environment.
</DxcParagraph>
<DxcParagraph>
Remember that at any point of the process if a color doesn't look quite right in a specific layout, you
can jump back to the previous step at any time to tweak your core or semantic color values.
</DxcParagraph>
</>
),
subSections: [
{
title: "Component preview mode",
content: (
<>
<DxcParagraph>
In this mode, you can add <strong>individual components</strong> to the preview area to see how your
specific tokens—such as primary button colors or semantic alerts—behave in isolation. Use the
selection menu to pick the specific elements you want to inspect.
</DxcParagraph>
<Figure caption="Preview your theme by applying the generated tokens to actual components.">
<Image src={step2} alt="Theme generator step 2 components" />
</Figure>
</>
),
},
{
title: "Layout preview mode",
content: (
<>
<DxcParagraph>
This mode allows you to see how your theme looks when applied to different{" "}
<strong>layout options</strong>. You can see how the components look in different contexts and get a
better sense of the overall feel of your theme. You can switch between the available layouts to see
how your theme looks in each of them.
</DxcParagraph>
{/* TODO: add image of the layout preview mode. */}
</>
),
},
],
},
{
title: "Step 3: Review and export",
content: (
<>
<DxcParagraph>
In the third and last step, you can perform a <strong>final review</strong> of your configuration.
</DxcParagraph>
<DxcParagraph>
This step displays a full <strong>list of the generated tokens</strong> so you can take a final look and
review them. They can be <strong>copied</strong> directly to the clipboard or <strong>exported</strong> as
a file. If you need to make a change after you've exported, you can still go back and keep tweaking the
configurations.
</DxcParagraph>
<Figure caption="Review and export your theme in the third step of the theme generator">
<Image src={step3} alt="Theme generator step 3" />
</Figure>
</>
),
},
],
},
];
const ThemeGeneratorUserGuidePage = () => {
return (
<DxcFlex justifyContent="center" alignItems="center">
<DxcContainer maxWidth="80%" margin={{ top: "80px", bottom: "80px" }}>
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
<DxcQuickNavContainer sections={sections} startHeadingLevel={1} />
</DxcFlex>
</DxcContainer>
</DxcFlex>
);
};

export default ThemeGeneratorUserGuidePage;
Binary file added apps/website/screens/theme-generator/images/Step_1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/screens/theme-generator/images/Step_2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/screens/theme-generator/images/Step_3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.