From 5ff5258cd4c1c9b22dffa0353d506f4c08e5dd3c Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 16 Jun 2026 09:11:02 +0200 Subject: [PATCH 1/3] add logos usage to the example --- .../halstack-provider/examples/customThemes.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx b/apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx index 3aefd430d..0e448ecd1 100644 --- a/apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx +++ b/apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx @@ -52,6 +52,14 @@ const code = `() => { "--color-secondary-900": "#100b06", }; + // Logos configuration + const logos = { + mainLogo: "https://example.com/main-logo.svg", + footerLogo: "https://example.com/footer-logo.svg", + footerReducedLogo: "https://example.com/footer-reduced-logo.svg", + favicon: "https://example.com/favicon.ico", + }; + const [theme, setTheme] = useState("light"); const toggleTheme = () => { @@ -64,7 +72,7 @@ const code = `() => { return ( + {tokens: lightPalette, logos: logos} : {tokens: darkPalette, logos: logos}}> ); From 020880c2ed82480656b0ad3fa35d7025f6a5a2e7 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 18 Jun 2026 10:02:05 +0200 Subject: [PATCH 2/3] Fix based on comments --- .../HalstackProviderPage.tsx | 22 ++++++++-- .../examples/customThemes.tsx | 44 +++---------------- 2 files changed, 26 insertions(+), 40 deletions(-) diff --git a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx index 7660e3603..87e19ae72 100644 --- a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx +++ b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx @@ -15,9 +15,19 @@ import { } from "@dxc-technology/halstack-react"; import Link from "next/link"; import PageHeading from "@/common/PageHeading"; -import Code, { TableCode } from "@/common/Code"; +import Code, { ExtendedTableCode, TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; +const opinionatedThemeTypeString = `{ + tokens?: Record; + logos?: { + mainLogo?: string; + footerLogo?: string; + footerReducedLogo?: string; + favicon?: string; + }; +};`; + const sections = [ { title: "Props", @@ -48,7 +58,7 @@ const sections = [ - OpinionatedTheme + {opinionatedThemeTypeString} Object with a given structure, specified below, for defining the opinionated theme. - @@ -105,10 +115,16 @@ const sections = [ - We create a lightPalette and darkPalette objects with as many CSS variables as we + We create a firstPalette and secondPalette objects with as many CSS variables as we want and their respective values. Then we pass one of the objects based on the state of the theme{" "} to the Halstack Provider, which wraps our components, through its opinionatedTheme property. + + Logos defined in the opinionatedTheme property of the Halstack Provider are applied globally to + the DxcApplicationLayout component. However, DxcApplicationLayout props take + precedence over the provider logos, allowing you to override them on a per-component basis when more specific + customization is needed. + Themes can be created with the{" "} diff --git a/apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx b/apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx index 0e448ecd1..efbefb570 100644 --- a/apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx +++ b/apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx @@ -2,8 +2,8 @@ import { HalstackProvider, DxcButton } from "@dxc-technology/halstack-react"; import { useState } from "react"; const code = `() => { - // Light palette example - const lightPalette = { + // First palette example + const firstPalette = { "--color-primary-50": "#d3f0b4", "--color-primary-100": "#a2df5e", "--color-primary-200": "#77c81f", @@ -14,21 +14,10 @@ const code = `() => { "--color-primary-700": "#2b470b", "--color-primary-800": "#1c2f07", "--color-primary-900": "#0d1503", - - "--color-secondary-50": "#fff9d6", - "--color-secondary-100": "#ffed99", - "--color-secondary-200": "#ffe066", - "--color-secondary-300": "#e6c84d", - "--color-secondary-400": "#ccad33", - "--color-secondary-500": "#b39426", - "--color-secondary-600": "#8f741f", - "--color-secondary-700": "#6b5517", - "--color-secondary-800": "#47370f", - "--color-secondary-900": "#241b08", }; - // Dark palette example - const darkPalette = { + // Second palette example + const secondPalette = { "--color-primary-50": "#ffd6e7", "--color-primary-100": "#ff99c2", "--color-primary-200": "#ff66a3", @@ -39,40 +28,21 @@ const code = `() => { "--color-primary-700": "#661f35", "--color-primary-800": "#441423", "--color-primary-900": "#220a12", - - "--color-secondary-50": "#f3e6db", - "--color-secondary-100": "#e2c7a9", - "--color-secondary-200": "#d1a577", - "--color-secondary-300": "#b88252", - "--color-secondary-400": "#99673f", - "--color-secondary-500": "#7a5232", - "--color-secondary-600": "#5c3f26", - "--color-secondary-700": "#3e2b19", - "--color-secondary-800": "#21170d", - "--color-secondary-900": "#100b06", - }; - - // Logos configuration - const logos = { - mainLogo: "https://example.com/main-logo.svg", - footerLogo: "https://example.com/footer-logo.svg", - footerReducedLogo: "https://example.com/footer-reduced-logo.svg", - favicon: "https://example.com/favicon.ico", }; const [theme, setTheme] = useState("light"); const toggleTheme = () => { setTheme((prev) => { - const newTheme = prev === "light" ? "dark" : "light"; + const newTheme = prev === "first" ? "second" : "first"; console.log("Toggling theme", newTheme); return newTheme; }); }; return ( - + ); From c1699c00a2be9d6939fb77a005758baefa4d228f Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 18 Jun 2026 13:25:41 +0200 Subject: [PATCH 3/3] Fix based on comments --- .../halstack-provider/HalstackProviderPage.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx index 87e19ae72..28f9825c0 100644 --- a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx +++ b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx @@ -120,10 +120,13 @@ const sections = [ to the Halstack Provider, which wraps our components, through its opinionatedTheme property. - Logos defined in the opinionatedTheme property of the Halstack Provider are applied globally to - the DxcApplicationLayout component. However, DxcApplicationLayout props take - precedence over the provider logos, allowing you to override them on a per-component basis when more specific - customization is needed. + Logos defined in the opinionatedTheme property of the Halstack Provider are applied to any{" "} + DxcApplicationLayout component within the provider. However,{" "} + + DxcApplicationLayout + {" "} + props take precedence over the provider logos, allowing you to override them on a per-component basis when + more specific customization is needed. Themes can be created with the{" "}