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/guidelines/themes.tsx b/apps/website/pages/guidelines/themes.tsx new file mode 100644 index 0000000000..500f50bb14 --- /dev/null +++ b/apps/website/pages/guidelines/themes.tsx @@ -0,0 +1,13 @@ +import Head from "next/head"; +import ThemesPage from "screens/guidelines/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..59a58c4ae1 100644 --- a/apps/website/screens/common/pagesList.tsx +++ b/apps/website/screens/common/pagesList.tsx @@ -36,9 +36,10 @@ 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" }, + { label: "Themes", path: "/guidelines/themes", icon: "colors" }, ]; const tokensLinks: LinkDetails[] = [ @@ -70,7 +71,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 }, 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/guidelines/themes/ThemesPage.tsx b/apps/website/screens/guidelines/themes/ThemesPage.tsx new file mode 100644 index 0000000000..62014bc7be --- /dev/null +++ b/apps/website/screens/guidelines/themes/ThemesPage.tsx @@ -0,0 +1,133 @@ +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 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, 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 + 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. 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. + + + ), + }, + { + 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 across the system. + + The main customizable aspects include: + + + Core brand colors such as primary, secondary, tertiary, and neutral + + + Semantic 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: ( + + 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. + + ), + }, + { + 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 user guide + + . + + + ), + }, +]; + +const ThemesPage = () => ( + + + + + + + + + +); + +export default ThemesPage; 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..7660e3603a 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. @@ -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 property. + ), },