diff --git a/apps/website/global-styles.css b/apps/website/global-styles.css index 50e5f48ee..85ab1d574 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/common/QuickNavContainer.tsx b/apps/website/screens/common/QuickNavContainer.tsx index 75cbf87e0..348ad06f6 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 04d381e6f..48fc90f2c 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 }) => { diff --git a/apps/website/screens/components/accordion/code/examples/accordions.tsx b/apps/website/screens/components/accordion/code/examples/accordions.tsx index 23daf828e..ff6402a32 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 e49c13650..ca034c1f2 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 c072d2e9c..5f9f11bb9 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 3d05d160d..669c2a319 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 2b16cca83..31e3424c1 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 fe26fcc59..a7d3073df 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 ecc5e2218..534d09bb1 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 b4b6ab9da..cd80fea8c 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 0004ef586..c42512516 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 b1a4056c9..f321b1701 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 23e1e6887..c96e8dd83 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 63c3fcf7f..df192910c 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 d6eb3a075..551adf71b 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/package-lock.json b/package-lock.json index 1ee291e72..e807c2728 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", diff --git a/packages/lib/src/heading/Heading.tsx b/packages/lib/src/heading/Heading.tsx index 3812c8a18..303d47e5d 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 afce7df42..491b59188 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 b98076f39..3bdcc711f 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 */