From 245c7f1258c232d9d3d88fafcfd5c29675c9a02e Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 5 Mar 2026 17:20:49 +0100 Subject: [PATCH 1/7] Add themes page to doc site --- apps/website/pages/foundations/themes.tsx | 13 ++ apps/website/screens/common/pagesList.tsx | 1 + .../screens/foundations/themes/ThemesPage.tsx | 142 ++++++++++++++++++ 3 files changed, 156 insertions(+) create mode 100644 apps/website/pages/foundations/themes.tsx create mode 100644 apps/website/screens/foundations/themes/ThemesPage.tsx diff --git a/apps/website/pages/foundations/themes.tsx b/apps/website/pages/foundations/themes.tsx new file mode 100644 index 0000000000..b58d9718d5 --- /dev/null +++ b/apps/website/pages/foundations/themes.tsx @@ -0,0 +1,13 @@ +import Head from "next/head"; +import ThemesPage from "screens/foundations/themes/ThemesPage"; + +const Themes = () => ( + <> + + Themes — Halstack Design System + + + +); + +export default Themes; diff --git a/apps/website/screens/common/pagesList.tsx b/apps/website/screens/common/pagesList.tsx index 32f1f9f99d..ed294a3773 100644 --- a/apps/website/screens/common/pagesList.tsx +++ b/apps/website/screens/common/pagesList.tsx @@ -56,6 +56,7 @@ const foundationsLinks: (LinkDetails | LinksSectionDetails)[] = [ { label: "Spacing", path: "/foundations/spacing", icon: "space_bar" }, { label: "Tokens", links: tokensLinks, icon: "token" }, { label: "Typography", path: "/foundations/typography", icon: "font_download" }, + { label: "Themes", path: "/foundations/themes", icon: "format_paint" }, ]; const v16Links: LinkDetails[] = [ diff --git a/apps/website/screens/foundations/themes/ThemesPage.tsx b/apps/website/screens/foundations/themes/ThemesPage.tsx new file mode 100644 index 0000000000..8b2fb5a3d6 --- /dev/null +++ b/apps/website/screens/foundations/themes/ThemesPage.tsx @@ -0,0 +1,142 @@ +import DocFooter from "@/common/DocFooter"; +import PageHeading from "@/common/PageHeading"; +import DxcQuickNavContainer from "@/common/QuickNavContainer"; +import { DxcBulletedList, DxcFlex, DxcHeading, DxcParagraph } from "@dxc-technology/halstack-react"; +import Link from "next/link"; + +const sections = [ + { + title: "What is a theme in Halstack?", + content: ( + <> + + In Halstack, a theme is a structured set of properties that defines how your brand is + expressed across the design system. These properties allow you to adapt core visual decisions such as colors + and logos, while preserving the consistency, accesibility, and usability standards degined by Halstack. + + + To understand what a theme is, it is important to recognize that the definition of colors, sizes, shapes, and + visual foundations is an intrinsic part of any design system. These elements are carefully designed to ensure + accessibility, usability, and a consistent user experience. For this reason, changing them must be done in a + controlled and intentional way. + + + Themes provide this controlled flexibility. The allow teams to override specific foundational decisions os the + Halstack Design System in order to adapt product to different brand identities, while still benefiting from + the structure and scalability of the system. + + + ), + }, + { + title: "Why themes matter?", + content: ( + <> + + Color, branding, and visual identity{" "} + play a key role in how users perceive and interact with a product. A consistent and + accessible visual language helps guide user behavior, improves readability, and strengthens trust. + + + However, unmanaged customization can quickly lead to fragmentation, accessibility issues, and higher + maintenance costs. Themes help prevent this by offering a structured way to evolve brand identity without + breaking the foundations of the design system. They support scalability, maintain accessibility, and enable + consistency across products, teams, and client implementations. + + + Typically, teams build their applications using the default Halstack foundations. Themes are applied only when + there is a clear need to adapt the experience to a specific brand, such as in white-label or multi-brand + environments. In this way, theming remains intentional and aligned with product and business needs. + + + ), + }, + { + title: "How Halstack manages theming", + content: ( + <> + + Halstack approaches theming through design tokens. Instead of manually adjusting styles in + each component, you define a set of core and semantic values that are applied accross the system. + + The main customizable aspects include: + + + Core brand colors such as primary, secondary, tertiary, and neutral + + + Semantinc colors such as info, success, warning, and error + + + Brand assets such as logos and favicons + + + + This approach ensures that customization remains predictable, accessible, and easy to maintain over time. + + + ), + }, + { + title: "Where to manage your themes", + content: ( + <> + Depending on your context, there are two ways to work with themes in Halstack. + + + If you are part of the platform + + Themes managed through UXConfig. This approach is typically used in internal platfom enviroments where + configuration and deployement are integrated into the product lifecycle. + + + + If you are not part of the platform + + You can use the Theme Generator tool. This is the recommended way + for most teams to create and manage themes in a structured and scalable way. + + + + + ), + }, + { + title: "Introducing Theme Generator", + content: ( + <> + + Theme Generator 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. + + + You can also preview how your theme behaves in real Halstack components and layouts, validate contrast and + readability, and export a structured file ready to be integrated into your development workflow. + + + This enables designers and developers to collaborate around a shared and repeatable process, ensuring + consistency across products and brands. + + + For more details about how the tool works, visit the{" "} + Theme Generator documentation + + + ), + }, +]; + +const ThemesPage = () => ( + + + + + + + + + +); + +export default ThemesPage; From 095d040bdd5dc0aee19986f2596a2cff90366ba0 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 9 Mar 2026 16:13:17 +0100 Subject: [PATCH 2/7] Change Principles to Guidelines and add Themes there --- apps/website/screens/common/pagesList.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/website/screens/common/pagesList.tsx b/apps/website/screens/common/pagesList.tsx index ed294a3773..065e7c4bfc 100644 --- a/apps/website/screens/common/pagesList.tsx +++ b/apps/website/screens/common/pagesList.tsx @@ -36,9 +36,11 @@ const utilitiesLinks: LinkDetails[] = [ }, ]; -const principlesLinks: LinkDetails[] = [ - { label: "Data visualization", path: "/principles/data-visualization", icon: "insert_chart" }, - { label: "Localization", path: "/principles/localization", icon: "language" }, +const guidelinesLinks: LinkDetails[] = [ + { label: "Data visualization", path: "/guidelines/data-visualization", icon: "insert_chart" }, + { label: "Localization", path: "/guidelines/localization", icon: "language" }, + // TODO: update icon + { label: "Themes", path: "/guidelines/themes", icon: "format_paint" }, ]; const tokensLinks: LinkDetails[] = [ @@ -56,7 +58,6 @@ const foundationsLinks: (LinkDetails | LinksSectionDetails)[] = [ { label: "Spacing", path: "/foundations/spacing", icon: "space_bar" }, { label: "Tokens", links: tokensLinks, icon: "token" }, { label: "Typography", path: "/foundations/typography", icon: "font_download" }, - { label: "Themes", path: "/foundations/themes", icon: "format_paint" }, ]; const v16Links: LinkDetails[] = [ @@ -71,7 +72,7 @@ const componentsLinks = componentsList as (LinkDetails | LinksSectionDetails)[]; export const LinksSections: LinksSectionDetails[] = [ { label: "Overview", links: overviewLinks }, - { label: "Principles", links: principlesLinks }, + { label: "Guidelines", links: guidelinesLinks }, { label: "Foundations", links: foundationsLinks }, { label: "Migration", links: migrationLinks }, { label: "Utilities", links: utilitiesLinks }, From 6b8a868ac4077f32ef71e47ae849ba0a360aa428 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Mon, 9 Mar 2026 17:07:30 +0100 Subject: [PATCH 3/7] change principles everywhere and Themes icon --- README.md | 2 +- .../data-visualization.tsx | 2 +- .../localization.tsx | 2 +- .../{foundations => guidelines}/themes.tsx | 0 apps/website/screens/common/pagesList.tsx | 3 +-- .../quick-nav/code/examples/quickNav.tsx | 2 +- .../DataVisualizationPage.tsx | 0 .../data-visualization/examples/barChart.tsx | 0 .../images/bar_chart_color_palette.png | Bin .../images/bar_chart_variants.png | Bin .../localization/LocalizationPage.tsx | 0 .../localization/examples/translations.tsx | 0 .../installation/InstallationPage.tsx | 2 +- .../HalstackProviderPage.tsx | 2 +- .../theme-generator/previews/ChipPreview.tsx | 19 ++++++++++++++++++ 15 files changed, 26 insertions(+), 8 deletions(-) rename apps/website/pages/{principles => guidelines}/data-visualization.tsx (80%) rename apps/website/pages/{principles => guidelines}/localization.tsx (78%) rename apps/website/pages/{foundations => guidelines}/themes.tsx (100%) rename apps/website/screens/{principles => guidelines}/data-visualization/DataVisualizationPage.tsx (100%) rename apps/website/screens/{principles => guidelines}/data-visualization/examples/barChart.tsx (100%) rename apps/website/screens/{principles => guidelines}/data-visualization/images/bar_chart_color_palette.png (100%) rename apps/website/screens/{principles => guidelines}/data-visualization/images/bar_chart_variants.png (100%) rename apps/website/screens/{principles => guidelines}/localization/LocalizationPage.tsx (100%) rename apps/website/screens/{principles => guidelines}/localization/examples/translations.tsx (100%) create mode 100644 apps/website/screens/utilities/theme-generator/previews/ChipPreview.tsx diff --git a/README.md b/README.md index 10d8826fa5..085c047e23 100644 --- a/README.md +++ b/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 diff --git a/apps/website/pages/principles/data-visualization.tsx b/apps/website/pages/guidelines/data-visualization.tsx similarity index 80% rename from apps/website/pages/principles/data-visualization.tsx rename to apps/website/pages/guidelines/data-visualization.tsx index 8958669537..cbb9c4367c 100644 --- a/apps/website/pages/principles/data-visualization.tsx +++ b/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 = () => ( <> diff --git a/apps/website/pages/principles/localization.tsx b/apps/website/pages/guidelines/localization.tsx similarity index 78% rename from apps/website/pages/principles/localization.tsx rename to apps/website/pages/guidelines/localization.tsx index 70bba38057..39653ad2af 100644 --- a/apps/website/pages/principles/localization.tsx +++ b/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 = () => ( <> diff --git a/apps/website/pages/foundations/themes.tsx b/apps/website/pages/guidelines/themes.tsx similarity index 100% rename from apps/website/pages/foundations/themes.tsx rename to apps/website/pages/guidelines/themes.tsx diff --git a/apps/website/screens/common/pagesList.tsx b/apps/website/screens/common/pagesList.tsx index 065e7c4bfc..59a58c4ae1 100644 --- a/apps/website/screens/common/pagesList.tsx +++ b/apps/website/screens/common/pagesList.tsx @@ -39,8 +39,7 @@ const utilitiesLinks: LinkDetails[] = [ const guidelinesLinks: LinkDetails[] = [ { label: "Data visualization", path: "/guidelines/data-visualization", icon: "insert_chart" }, { label: "Localization", path: "/guidelines/localization", icon: "language" }, - // TODO: update icon - { label: "Themes", path: "/guidelines/themes", icon: "format_paint" }, + { label: "Themes", path: "/guidelines/themes", icon: "colors" }, ]; const tokensLinks: LinkDetails[] = [ diff --git a/apps/website/screens/components/quick-nav/code/examples/quickNav.tsx b/apps/website/screens/components/quick-nav/code/examples/quickNav.tsx index 436ca2def1..a01d75a611 100644 --- a/apps/website/screens/components/quick-nav/code/examples/quickNav.tsx +++ b/apps/website/screens/components/quick-nav/code/examples/quickNav.tsx @@ -6,7 +6,7 @@ const code = `() => { label: "Overview", }, { - label: "Principles", + label: "Foundations", links: [ { label: "Color" }, { label: "Spacing" }, diff --git a/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx b/apps/website/screens/guidelines/data-visualization/DataVisualizationPage.tsx similarity index 100% rename from apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx rename to apps/website/screens/guidelines/data-visualization/DataVisualizationPage.tsx diff --git a/apps/website/screens/principles/data-visualization/examples/barChart.tsx b/apps/website/screens/guidelines/data-visualization/examples/barChart.tsx similarity index 100% rename from apps/website/screens/principles/data-visualization/examples/barChart.tsx rename to apps/website/screens/guidelines/data-visualization/examples/barChart.tsx diff --git a/apps/website/screens/principles/data-visualization/images/bar_chart_color_palette.png b/apps/website/screens/guidelines/data-visualization/images/bar_chart_color_palette.png similarity index 100% rename from apps/website/screens/principles/data-visualization/images/bar_chart_color_palette.png rename to apps/website/screens/guidelines/data-visualization/images/bar_chart_color_palette.png diff --git a/apps/website/screens/principles/data-visualization/images/bar_chart_variants.png b/apps/website/screens/guidelines/data-visualization/images/bar_chart_variants.png similarity index 100% rename from apps/website/screens/principles/data-visualization/images/bar_chart_variants.png rename to apps/website/screens/guidelines/data-visualization/images/bar_chart_variants.png diff --git a/apps/website/screens/principles/localization/LocalizationPage.tsx b/apps/website/screens/guidelines/localization/LocalizationPage.tsx similarity index 100% rename from apps/website/screens/principles/localization/LocalizationPage.tsx rename to apps/website/screens/guidelines/localization/LocalizationPage.tsx diff --git a/apps/website/screens/principles/localization/examples/translations.tsx b/apps/website/screens/guidelines/localization/examples/translations.tsx similarity index 100% rename from apps/website/screens/principles/localization/examples/translations.tsx rename to apps/website/screens/guidelines/localization/examples/translations.tsx diff --git a/apps/website/screens/overview/installation/InstallationPage.tsx b/apps/website/screens/overview/installation/InstallationPage.tsx index 757f227a04..bdc2276248 100644 --- a/apps/website/screens/overview/installation/InstallationPage.tsx +++ b/apps/website/screens/overview/installation/InstallationPage.tsx @@ -88,7 +88,7 @@ const sections = [ title: "What's next?", content: ( - Before you continue developing your project with Halstack, we encourage you to read our principles. This will + Before you continue developing your project with Halstack, we encourage you to read our guidelines. This will help you understand the design foundations behind the components and how to use them effectively. ), diff --git a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx index b47a212d4a..a2219ecb4d 100644 --- a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx +++ b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx @@ -71,7 +71,7 @@ const sections = [ text: ( <> To find out the list of labels that are translatable we should refer to the documentation in the{" "} - + Localization {" "} section. diff --git a/apps/website/screens/utilities/theme-generator/previews/ChipPreview.tsx b/apps/website/screens/utilities/theme-generator/previews/ChipPreview.tsx new file mode 100644 index 0000000000..d5f5e74057 --- /dev/null +++ b/apps/website/screens/utilities/theme-generator/previews/ChipPreview.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import { DxcChip, DxcFlex } from "@dxc-technology/halstack-react"; +const ChipPreview = () => { + return ( + + + + + console.log("action clicked") }} + /> + + + ); +}; + +export default ChipPreview; From 5311e3ec5bcacf59b328d9d44a4e6a8c914b9eeb Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Mon, 9 Mar 2026 17:16:35 +0100 Subject: [PATCH 4/7] Remove unwanted file --- .../theme-generator/previews/ChipPreview.tsx | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100644 apps/website/screens/utilities/theme-generator/previews/ChipPreview.tsx diff --git a/apps/website/screens/utilities/theme-generator/previews/ChipPreview.tsx b/apps/website/screens/utilities/theme-generator/previews/ChipPreview.tsx deleted file mode 100644 index d5f5e74057..0000000000 --- a/apps/website/screens/utilities/theme-generator/previews/ChipPreview.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import { DxcChip, DxcFlex } from "@dxc-technology/halstack-react"; -const ChipPreview = () => { - return ( - - - - - console.log("action clicked") }} - /> - - - ); -}; - -export default ChipPreview; From 63ab256c4451c947374b5ee6f3a85122de502e65 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 10 Mar 2026 11:26:08 +0100 Subject: [PATCH 5/7] Fix based on comments --- apps/website/pages/guidelines/themes.tsx | 2 +- .../themes/ThemesPage.tsx | 52 ++++++++----------- 2 files changed, 22 insertions(+), 32 deletions(-) rename apps/website/screens/{foundations => guidelines}/themes/ThemesPage.tsx (68%) diff --git a/apps/website/pages/guidelines/themes.tsx b/apps/website/pages/guidelines/themes.tsx index b58d9718d5..500f50bb14 100644 --- a/apps/website/pages/guidelines/themes.tsx +++ b/apps/website/pages/guidelines/themes.tsx @@ -1,5 +1,5 @@ import Head from "next/head"; -import ThemesPage from "screens/foundations/themes/ThemesPage"; +import ThemesPage from "screens/guidelines/themes/ThemesPage"; const Themes = () => ( <> diff --git a/apps/website/screens/foundations/themes/ThemesPage.tsx b/apps/website/screens/guidelines/themes/ThemesPage.tsx similarity index 68% rename from apps/website/screens/foundations/themes/ThemesPage.tsx rename to apps/website/screens/guidelines/themes/ThemesPage.tsx index 8b2fb5a3d6..6255452c68 100644 --- a/apps/website/screens/foundations/themes/ThemesPage.tsx +++ b/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, DxcParagraph } from "@dxc-technology/halstack-react"; +import { DxcBulletedList, DxcFlex, DxcHeading, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react"; import Link from "next/link"; const sections = [ @@ -12,7 +12,7 @@ const sections = [ In Halstack, a theme is a structured set of properties that defines how your brand is expressed across the design system. These properties allow you to adapt core visual decisions such as colors - and logos, while preserving the consistency, accesibility, and usability standards degined by Halstack. + and logos, while preserving the consistency, accessibility, and usability standards defined by Halstack. To understand what a theme is, it is important to recognize that the definition of colors, sizes, shapes, and @@ -21,9 +21,9 @@ const sections = [ controlled and intentional way. - Themes provide this controlled flexibility. The allow teams to override specific foundational decisions os the - Halstack Design System in order to adapt product to different brand identities, while still benefiting from - the structure and scalability of the system. + Themes provide this controlled flexibility. They allow teams to override specific foundational decisions of + the Halstack Design System in order to adapt product to different brand identities, while still benefiting + from the structure and scalability of the system. ), @@ -57,7 +57,7 @@ const sections = [ <> Halstack approaches theming through design tokens. Instead of manually adjusting styles in - each component, you define a set of core and semantic values that are applied accross the system. + each component, you define a set of core and semantic values that are applied across the system. The main customizable aspects include: @@ -65,7 +65,7 @@ const sections = [ Core brand colors such as primary, secondary, tertiary, and neutral - Semantinc colors such as info, success, warning, and error + Semantic colors such as info, success, warning, and error Brand assets such as logos and favicons @@ -80,25 +80,11 @@ const sections = [ { title: "Where to manage your themes", content: ( - <> - Depending on your context, there are two ways to work with themes in Halstack. - - - If you are part of the platform - - Themes managed through UXConfig. This approach is typically used in internal platfom enviroments where - configuration and deployement are integrated into the product lifecycle. - - - - If you are not part of the platform - - You can use the Theme Generator tool. This is the recommended way - for most teams to create and manage themes in a structured and scalable way. - - - - + + To create and manage themes in Halstack, you can use the Theme Generator tool. You can preview how your theme + behaves across real Halstack components, validate contrast and readability, and export a structured file ready + to be integrated into your project. + ), }, { @@ -106,9 +92,11 @@ const sections = [ content: ( <> - Theme Generator 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. + + Theme Generator + {" "} + 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. You can also preview how your theme behaves in real Halstack components and layouts, validate contrast and @@ -120,7 +108,9 @@ const sections = [ For more details about how the tool works, visit the{" "} - Theme Generator documentation + + Theme Generator user guide + ), @@ -135,7 +125,7 @@ const ThemesPage = () => ( - + ); From dd127e02d6f487af5db1a3b3787526e5d4104b47 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Tue, 10 Mar 2026 16:11:00 +0100 Subject: [PATCH 6/7] Fix based on comments and add a paragraph about the Theme Generator in the HalstackProviderPage --- apps/website/screens/guidelines/themes/ThemesPage.tsx | 1 + .../utilities/halstack-provider/HalstackProviderPage.tsx | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/apps/website/screens/guidelines/themes/ThemesPage.tsx b/apps/website/screens/guidelines/themes/ThemesPage.tsx index 6255452c68..62014bc7be 100644 --- a/apps/website/screens/guidelines/themes/ThemesPage.tsx +++ b/apps/website/screens/guidelines/themes/ThemesPage.tsx @@ -111,6 +111,7 @@ const sections = [ Theme Generator user guide + . ), diff --git a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx index a2219ecb4d..90607ccf00 100644 --- a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx +++ b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx @@ -109,6 +109,14 @@ const sections = [ 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. + + Themes can be created with the{" "} + + Theme Generator + {" "} + tool, which allows you to define your brand colors and export a ready-to-use token structure to pass through + the opinionatedTheme prop. + ), }, From d05ab1d930cbf2a73ab1291b00edfee1115a9606 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Tue, 10 Mar 2026 16:54:12 +0100 Subject: [PATCH 7/7] Change "prop"to "property"to keep consistency --- .../utilities/halstack-provider/HalstackProviderPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx index 90607ccf00..7660e3603a 100644 --- a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx +++ b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx @@ -115,7 +115,7 @@ const sections = [ Theme Generator {" "} tool, which allows you to define your brand colors and export a ready-to-use token structure to pass through - the opinionatedTheme prop. + the opinionatedTheme property. ),