From 92562cc2e5818af108e939fc3b1a9a5773e67026 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Mon, 22 Sep 2025 17:01:26 +0200 Subject: [PATCH 1/3] Fixed examples and missing styles --- apps/website/global-styles.css | 2 +- .../components/accordion/code/examples/accordions.tsx | 11 ++++++----- .../accordion/code/examples/badgeStatusLight.tsx | 5 +++-- .../components/accordion/code/examples/basicUsage.tsx | 5 +++-- .../components/accordion/code/examples/controlled.tsx | 5 +++-- .../components/accordion/code/examples/icons.tsx | 7 ++++--- .../accordion/code/examples/uncontrolled.tsx | 5 +++-- .../components/card/code/examples/basicUsage.ts | 5 +++-- .../components/container/code/examples/basicUsage.tsx | 5 +++-- .../dialog/code/examples/backgroundClick.tsx | 5 +++-- .../components/dialog/code/examples/basicUsage.tsx | 5 +++-- .../components/slider/code/examples/complex.tsx | 5 +++-- .../slider/overview/examples/continuous.tsx | 5 +++-- .../components/slider/overview/examples/discrete.tsx | 5 +++-- packages/lib/src/heading/Heading.tsx | 2 +- packages/lib/src/select/Select.tsx | 1 + packages/lib/src/styles/forms/ErrorMessage.tsx | 1 + 17 files changed, 47 insertions(+), 32 deletions(-) diff --git a/apps/website/global-styles.css b/apps/website/global-styles.css index 50e5f48eeb..85ab1d5744 100644 --- a/apps/website/global-styles.css +++ b/apps/website/global-styles.css @@ -9,7 +9,7 @@ --content-mobile-margin-bottom: 3rem; --content-width: 800px; } - +/* TODO: Remove global styles completely from the website */ body { margin: 0; font-family: Open Sans, sans-serif; diff --git a/apps/website/screens/components/accordion/code/examples/accordions.tsx b/apps/website/screens/components/accordion/code/examples/accordions.tsx index 23daf828e1..ff6402a32b 100644 --- a/apps/website/screens/components/accordion/code/examples/accordions.tsx +++ b/apps/website/screens/components/accordion/code/examples/accordions.tsx @@ -1,4 +1,4 @@ -import { DxcAccordion, DxcInset, DxcBadge, DxcStatusLight } from "@dxc-technology/halstack-react"; +import { DxcAccordion, DxcInset, DxcBadge, DxcStatusLight, DxcParagraph } from "@dxc-technology/halstack-react"; import { useState } from "react"; const code = `() => { @@ -11,7 +11,7 @@ const code = `() => { statusLight={} > - Person information + Person information { defaultIsExpanded > - Person creation information + Person creation information { defaultIsExpanded > - Interactions information + Interactions information { badge={{ position: "before", element: }} > - Deletion information + Deletion information @@ -54,6 +54,7 @@ const scope = { DxcInset, DxcBadge, DxcStatusLight, + DxcParagraph, useState, }; diff --git a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx index e49c13650e..ca034c1f25 100644 --- a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx +++ b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx @@ -1,4 +1,4 @@ -import { DxcInset, DxcAccordion, DxcBadge, DxcStatusLight } from "@dxc-technology/halstack-react"; +import { DxcInset, DxcAccordion, DxcBadge, DxcStatusLight, DxcParagraph } from "@dxc-technology/halstack-react"; const code = `() => { return ( @@ -11,7 +11,7 @@ const code = `() => { statusLight={} > - To edit your profile you need to go to Settings and click on Profile. + To edit your profile you need to go to Settings and click on Profile. @@ -24,6 +24,7 @@ const scope = { DxcAccordion, DxcBadge, DxcStatusLight, + DxcParagraph, }; export default { code, scope }; diff --git a/apps/website/screens/components/accordion/code/examples/basicUsage.tsx b/apps/website/screens/components/accordion/code/examples/basicUsage.tsx index c072d2e9c3..5f9f11bb9b 100644 --- a/apps/website/screens/components/accordion/code/examples/basicUsage.tsx +++ b/apps/website/screens/components/accordion/code/examples/basicUsage.tsx @@ -1,4 +1,4 @@ -import { DxcAccordion, DxcInset } from "@dxc-technology/halstack-react"; +import { DxcAccordion, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; const code = `() => { return ( @@ -7,7 +7,7 @@ const code = `() => { - To edit your profile you need to go to Settings and click on Profile. + To edit your profile you need to go to Settings and click on Profile. @@ -17,6 +17,7 @@ const code = `() => { const scope = { DxcAccordion, + DxcParagraph, DxcInset, }; diff --git a/apps/website/screens/components/accordion/code/examples/controlled.tsx b/apps/website/screens/components/accordion/code/examples/controlled.tsx index 3d05d160d7..669c2a319c 100644 --- a/apps/website/screens/components/accordion/code/examples/controlled.tsx +++ b/apps/website/screens/components/accordion/code/examples/controlled.tsx @@ -1,4 +1,4 @@ -import { DxcAccordion, DxcInset } from "@dxc-technology/halstack-react"; +import { DxcAccordion, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; import { useState } from "react"; const code = `() => { @@ -15,7 +15,7 @@ const code = `() => { label="How to edit your profile?" > - To edit your profile you need to go to Settings and click on Profile. + To edit your profile you need to go to Settings and click on Profile. @@ -26,6 +26,7 @@ const code = `() => { const scope = { DxcAccordion, DxcInset, + DxcParagraph, useState, }; diff --git a/apps/website/screens/components/accordion/code/examples/icons.tsx b/apps/website/screens/components/accordion/code/examples/icons.tsx index 2b16cca831..31e3424c19 100644 --- a/apps/website/screens/components/accordion/code/examples/icons.tsx +++ b/apps/website/screens/components/accordion/code/examples/icons.tsx @@ -1,4 +1,4 @@ -import { DxcAccordion, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; +import { DxcAccordion, DxcFlex, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; import { useState } from "react"; const code = `() => { @@ -8,8 +8,8 @@ const code = `() => { - To edit your profile you need to go to Settings and click on - Profile. + To edit your profile you need to go to Settings and click on + Profile. @@ -21,6 +21,7 @@ const scope = { DxcAccordion, DxcInset, DxcFlex, + DxcParagraph, useState, }; diff --git a/apps/website/screens/components/accordion/code/examples/uncontrolled.tsx b/apps/website/screens/components/accordion/code/examples/uncontrolled.tsx index fe26fcc597..a7d3073df9 100644 --- a/apps/website/screens/components/accordion/code/examples/uncontrolled.tsx +++ b/apps/website/screens/components/accordion/code/examples/uncontrolled.tsx @@ -1,4 +1,4 @@ -import { DxcAccordion, DxcInset } from "@dxc-technology/halstack-react"; +import { DxcAccordion, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; import { useState } from "react"; const code = `() => { @@ -7,7 +7,7 @@ const code = `() => { - To edit your profile you need to go to Settings and click on Profile. + To edit your profile you need to go to Settings and click on Profile. @@ -18,6 +18,7 @@ const code = `() => { const scope = { DxcAccordion, DxcInset, + DxcParagraph, useState, }; diff --git a/apps/website/screens/components/card/code/examples/basicUsage.ts b/apps/website/screens/components/card/code/examples/basicUsage.ts index ecc5e22188..534d09bb13 100644 --- a/apps/website/screens/components/card/code/examples/basicUsage.ts +++ b/apps/website/screens/components/card/code/examples/basicUsage.ts @@ -1,11 +1,11 @@ -import { DxcInset, DxcCard } from "@dxc-technology/halstack-react"; +import { DxcInset, DxcCard, DxcParagraph } from "@dxc-technology/halstack-react"; const code = `() => { return ( - Personal information + Personal information @@ -15,6 +15,7 @@ const code = `() => { const scope = { DxcCard, DxcInset, + DxcParagraph, }; export default { code, scope }; diff --git a/apps/website/screens/components/container/code/examples/basicUsage.tsx b/apps/website/screens/components/container/code/examples/basicUsage.tsx index b4b6ab9dad..cd80fea8cd 100644 --- a/apps/website/screens/components/container/code/examples/basicUsage.tsx +++ b/apps/website/screens/components/container/code/examples/basicUsage.tsx @@ -1,4 +1,4 @@ -import { DxcContainer, DxcInset } from "@dxc-technology/halstack-react"; +import { DxcContainer, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; const code = `() => { return ( @@ -13,7 +13,7 @@ const code = `() => { padding="var(--spacing-padding-xs)" width="fit-content" > - Example text + Example text ); @@ -22,6 +22,7 @@ const code = `() => { const scope = { DxcContainer, DxcInset, + DxcParagraph, }; export default { code, scope }; diff --git a/apps/website/screens/components/dialog/code/examples/backgroundClick.tsx b/apps/website/screens/components/dialog/code/examples/backgroundClick.tsx index 0004ef5865..c425125163 100644 --- a/apps/website/screens/components/dialog/code/examples/backgroundClick.tsx +++ b/apps/website/screens/components/dialog/code/examples/backgroundClick.tsx @@ -1,4 +1,4 @@ -import { DxcDialog, DxcButton, DxcInset } from "@dxc-technology/halstack-react"; +import { DxcDialog, DxcButton, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; import { useState } from "react"; const code = `() => { @@ -13,7 +13,7 @@ const code = `() => { {isDialogVisible && ( - Please enter your personal information. + Please enter your personal information. )} @@ -26,6 +26,7 @@ const scope = { DxcButton, DxcDialog, DxcInset, + DxcParagraph, }; export default { code, scope }; diff --git a/apps/website/screens/components/dialog/code/examples/basicUsage.tsx b/apps/website/screens/components/dialog/code/examples/basicUsage.tsx index b1a4056c9a..f321b17013 100644 --- a/apps/website/screens/components/dialog/code/examples/basicUsage.tsx +++ b/apps/website/screens/components/dialog/code/examples/basicUsage.tsx @@ -1,4 +1,4 @@ -import { DxcDialog, DxcButton, DxcInset } from "@dxc-technology/halstack-react"; +import { DxcDialog, DxcButton, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; import { useState } from "react"; const code = `() => { @@ -13,7 +13,7 @@ const code = `() => { {isDialogVisible && ( - Please enter your personal information. + Please enter your personal information. )} @@ -26,6 +26,7 @@ const scope = { DxcButton, DxcDialog, DxcInset, + DxcParagraph }; export default { code, scope }; diff --git a/apps/website/screens/components/slider/code/examples/complex.tsx b/apps/website/screens/components/slider/code/examples/complex.tsx index 23e1e68879..c96e8dd833 100644 --- a/apps/website/screens/components/slider/code/examples/complex.tsx +++ b/apps/website/screens/components/slider/code/examples/complex.tsx @@ -1,4 +1,4 @@ -import { DxcSlider, DxcInset } from "@dxc-technology/halstack-react"; +import { DxcSlider, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; import { useState } from "react"; const code = `() => { @@ -21,7 +21,7 @@ const code = `() => { step={0.1} value={value} /> - Current value: {value} + Current value: {value} ); }`; @@ -29,6 +29,7 @@ const code = `() => { const scope = { DxcSlider, DxcInset, + DxcParagraph, useState, }; diff --git a/apps/website/screens/components/slider/overview/examples/continuous.tsx b/apps/website/screens/components/slider/overview/examples/continuous.tsx index 63c3fcf7f2..df192910c0 100644 --- a/apps/website/screens/components/slider/overview/examples/continuous.tsx +++ b/apps/website/screens/components/slider/overview/examples/continuous.tsx @@ -1,4 +1,4 @@ -import { DxcSlider, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; +import { DxcSlider, DxcInset, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; import { useState } from "react"; const code = `() => { @@ -18,7 +18,7 @@ const code = `() => { showLimitsValues value={value} /> - Current value: {value} + Current value: {value} ); @@ -28,6 +28,7 @@ const scope = { DxcSlider, DxcInset, DxcFlex, + DxcParagraph, useState, }; diff --git a/apps/website/screens/components/slider/overview/examples/discrete.tsx b/apps/website/screens/components/slider/overview/examples/discrete.tsx index d6eb3a0756..551adf71b4 100644 --- a/apps/website/screens/components/slider/overview/examples/discrete.tsx +++ b/apps/website/screens/components/slider/overview/examples/discrete.tsx @@ -1,4 +1,4 @@ -import { DxcSlider, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; +import { DxcSlider, DxcInset, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; import { useState } from "react"; const code = `() => { @@ -19,7 +19,7 @@ const code = `() => { step={10} value={value} /> - Current value: {value} + Current value: {value} ); }`; @@ -28,6 +28,7 @@ const scope = { DxcSlider, DxcInset, DxcFlex, + DxcParagraph, useState, }; diff --git a/packages/lib/src/heading/Heading.tsx b/packages/lib/src/heading/Heading.tsx index 3812c8a184..303d47e5d4 100644 --- a/packages/lib/src/heading/Heading.tsx +++ b/packages/lib/src/heading/Heading.tsx @@ -17,7 +17,7 @@ const Heading = styled.h1<{ $weight: HeadingPropsType["weight"]; }>` color: var(--color-fg-neutral-dark); - font-family: var(--font-family-sans); + font-family: var(--typography-font-family); font-size: ${({ $level }) => getHeadingSize($level)}; font-weight: ${({ $weight }) => getHeadingWeight($weight)}; margin: 0; diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx index afce7df427..491b591887 100644 --- a/packages/lib/src/select/Select.tsx +++ b/packages/lib/src/select/Select.tsx @@ -153,6 +153,7 @@ const SelectedOption = styled.span<{ ); font-size: var(--typography-label-m); font-weight: var(--typography-label-regular); + font-family: var(--typography-font-family); user-select: none; overflow: hidden; text-overflow: ellipsis; diff --git a/packages/lib/src/styles/forms/ErrorMessage.tsx b/packages/lib/src/styles/forms/ErrorMessage.tsx index b98076f39c..3bdcc711fb 100644 --- a/packages/lib/src/styles/forms/ErrorMessage.tsx +++ b/packages/lib/src/styles/forms/ErrorMessage.tsx @@ -8,6 +8,7 @@ const ErrorMessageContainer = styled.div` color: var(--color-fg-error-medium); font-size: var(--typography-helper-text-s); font-weight: var(--typography-helper-text-regular); + font-family: var(--typography-font-family); margin-top: var(--spacing-gap-xs); /* Error icon */ From c88caa0628346c558995cfc7b86280f087cca476 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Mon, 22 Sep 2025 17:07:40 +0200 Subject: [PATCH 2/3] Updated browserslist-db --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1ee291e722..e807c2728a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9069,9 +9069,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001741", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001741.tgz", - "integrity": "sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==", + "version": "1.0.30001743", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001743.tgz", + "integrity": "sha512-e6Ojr7RV14Un7dz6ASD0aZDmQPT/A+eZU+nuTNfjqmRrmkmQlnTNWH0SKmqagx9PeW87UVqapSurtAXifmtdmw==", "funding": [ { "type": "opencollective", From 237ccedeac2cd2a1873b3622d16e570a49f8f697 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Tue, 23 Sep 2025 16:16:46 +0200 Subject: [PATCH 3/3] Added missing font-styles --- apps/website/screens/common/QuickNavContainer.tsx | 1 + apps/website/screens/common/sidenav/SidenavLogo.tsx | 2 ++ 2 files changed, 3 insertions(+) diff --git a/apps/website/screens/common/QuickNavContainer.tsx b/apps/website/screens/common/QuickNavContainer.tsx index 75cbf87e0b..348ad06f60 100644 --- a/apps/website/screens/common/QuickNavContainer.tsx +++ b/apps/website/screens/common/QuickNavContainer.tsx @@ -39,6 +39,7 @@ const MainContainer = styled.div` @media (max-width: ${responsiveSizes.tablet}px) { grid-template-columns: minmax(0, 1fr); } + font-family: var(--typography-font-family); `; const QuickNavContainer = styled.div` diff --git a/apps/website/screens/common/sidenav/SidenavLogo.tsx b/apps/website/screens/common/sidenav/SidenavLogo.tsx index 04d381e6f4..48fc90f2c5 100644 --- a/apps/website/screens/common/sidenav/SidenavLogo.tsx +++ b/apps/website/screens/common/sidenav/SidenavLogo.tsx @@ -12,12 +12,14 @@ const LogoContainer = styled.div` const Title = styled.div` color: var(--color-fg-primary-strong); font-size: var(--typography-title-l); + font-family: var(--typography-font-family); `; const Subtitle = styled.div` color: var(--color-fg-neutral-strongest); font-size: var(--typography-title-m); margin-left: var(--spacing-padding-s); + font-family: var(--typography-font-family); `; const SidenavLogo = ({ subtitle = "Design System" }: { subtitle?: string }) => {