Skip to content

Fixed font styles for certain components #2289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jialecl merged 5 commits into from
Sep 23, 2025
Merged

Fixed font styles for certain components #2289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
92562cc
Fixed examples and missing styles
Mil4n0r Sep 22, 2025
917e8ed
Merge branch 'master' into Mil4n0r/fix_default_text_styles
Mil4n0r Sep 22, 2025
c88caa0
Updated browserslist-db
Mil4n0r Sep 22, 2025
8f5da0b
Merge branch 'Mil4n0r/fix_default_text_styles' of github.com:dxc-tech…
Mil4n0r Sep 22, 2025
237cced
Added missing font-styles
Mil4n0r Sep 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/website/global-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions apps/website/screens/common/QuickNavContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
2 changes: 2 additions & 0 deletions apps/website/screens/common/sidenav/SidenavLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down
11 changes: 6 additions & 5 deletions apps/website/screens/components/accordion/code/examples/accordions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `() => {
Expand All @@ -11,7 +11,7 @@ const code = `() => {
statusLight={<DxcStatusLight label="Active" mode="success" />}
>
<DxcInset space="var(--spacing-padding-l)">
Person information
<DxcParagraph>Person information</DxcParagraph>
</DxcInset>
</DxcAccordion.AccordionItem>
<DxcAccordion.AccordionItem
Expand All @@ -21,7 +21,7 @@ const code = `() => {
defaultIsExpanded
>
<DxcInset space="var(--spacing-padding-l)">
Person creation information
<DxcParagraph>Person creation information</DxcParagraph>
</DxcInset>
</DxcAccordion.AccordionItem>
<DxcAccordion.AccordionItem
Expand All @@ -31,7 +31,7 @@ const code = `() => {
defaultIsExpanded
>
<DxcInset space="var(--spacing-padding-l)">
Interactions information
<DxcParagraph>Interactions information</DxcParagraph>
</DxcInset>
</DxcAccordion.AccordionItem>
<DxcAccordion.AccordionItem
Expand All @@ -41,7 +41,7 @@ const code = `() => {
badge={{ position: "before", element: <DxcBadge label="DELETE" /> }}
>
<DxcInset space="var(--spacing-padding-l)">
Deletion information
<DxcParagraph>Deletion information</DxcParagraph>
</DxcInset>
</DxcAccordion.AccordionItem>
</DxcAccordion>
Expand All @@ -54,6 +54,7 @@ const scope = {
DxcInset,
DxcBadge,
DxcStatusLight,
DxcParagraph,
useState,
};

Expand Down
5 changes: 3 additions & 2 deletions apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -11,7 +11,7 @@ const code = `() => {
statusLight={<DxcStatusLight label="Active" mode="success" />}
>
<DxcInset space="var(--spacing-padding-l)">
To edit your profile you need to go to Settings and click on Profile.
<DxcParagraph>To edit your profile you need to go to Settings and click on Profile.</DxcParagraph>
</DxcInset>
</DxcAccordion.AccordionItem>
</DxcAccordion>
Expand All @@ -24,6 +24,7 @@ const scope = {
DxcAccordion,
DxcBadge,
DxcStatusLight,
DxcParagraph,
};

export default { code, scope };
5 changes: 3 additions & 2 deletions apps/website/screens/components/accordion/code/examples/basicUsage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { DxcAccordion, DxcInset } from "@dxc-technology/halstack-react";
import { DxcAccordion, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";

const code = `() => {
return (
Expand All @@ -7,7 +7,7 @@ const code = `() => {
<DxcAccordion.AccordionItem
label="How to edit your profile?">
<DxcInset space="var(--spacing-padding-l)">
To edit your profile you need to go to Settings and click on Profile.
<DxcParagraph>To edit your profile you need to go to Settings and click on Profile.</DxcParagraph>
</DxcInset>
</DxcAccordion.AccordionItem>
</DxcAccordion>
Expand All @@ -17,6 +17,7 @@ const code = `() => {

const scope = {
DxcAccordion,
DxcParagraph,
DxcInset,
};

Expand Down
5 changes: 3 additions & 2 deletions apps/website/screens/components/accordion/code/examples/controlled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `() => {
Expand All @@ -15,7 +15,7 @@ const code = `() => {
label="How to edit your profile?"
>
<DxcInset space="var(--spacing-padding-l)">
To edit your profile you need to go to Settings and click on Profile.
<DxcParagraph>To edit your profile you need to go to Settings and click on Profile.</DxcParagraph>
</DxcInset>
</DxcAccordion.AccordionItem>
</DxcAccordion>
Expand All @@ -26,6 +26,7 @@ const code = `() => {
const scope = {
DxcAccordion,
DxcInset,
DxcParagraph,
useState,
};

Expand Down
7 changes: 4 additions & 3 deletions apps/website/screens/components/accordion/code/examples/icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `() => {
Expand All @@ -8,8 +8,8 @@ const code = `() => {
<DxcAccordion.AccordionItem label="How to edit your profile?" icon="filled_info"
assistiveText="Ref — 123645" subLabel="Jan, 23 2025">
<DxcInset space="var(--spacing-padding-l)">
To edit your profile you need to go to Settings and click on
Profile.
<DxcParagraph>To edit your profile you need to go to Settings and click on
Profile.</DxcParagraph>
</DxcInset>
</DxcAccordion.AccordionItem>
</DxcAccordion>
Expand All @@ -21,6 +21,7 @@ const scope = {
DxcAccordion,
DxcInset,
DxcFlex,
DxcParagraph,
useState,
};

Expand Down
5 changes: 3 additions & 2 deletions apps/website/screens/components/accordion/code/examples/uncontrolled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `() => {
Expand All @@ -7,7 +7,7 @@ const code = `() => {
<DxcAccordion defaultIndexActive={0} independent>
<DxcAccordion.AccordionItem label="How to edit your profile?">
<DxcInset space="var(--spacing-padding-l)">
To edit your profile you need to go to Settings and click on Profile.
<DxcParagraph>To edit your profile you need to go to Settings and click on Profile.</DxcParagraph>
</DxcInset>
</DxcAccordion.AccordionItem>
</DxcAccordion>
Expand All @@ -18,6 +18,7 @@ const code = `() => {
const scope = {
DxcAccordion,
DxcInset,
DxcParagraph,
useState,
};

Expand Down
5 changes: 3 additions & 2 deletions apps/website/screens/components/card/code/examples/basicUsage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { DxcInset, DxcCard } from "@dxc-technology/halstack-react";
import { DxcInset, DxcCard, DxcParagraph } from "@dxc-technology/halstack-react";

const code = `() => {
return (
<DxcInset space="var(--spacing-padding-xl)">
<DxcCard imageSrc="https://picsum.photos/id/1022/200/300">
<DxcInset space="var(--spacing-padding-m)">
Personal information
<DxcParagraph>Personal information</DxcParagraph>
</DxcInset>
</DxcCard>
</DxcInset>
Expand All @@ -15,6 +15,7 @@ const code = `() => {
const scope = {
DxcCard,
DxcInset,
DxcParagraph,
};

export default { code, scope };
5 changes: 3 additions & 2 deletions apps/website/screens/components/container/code/examples/basicUsage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { DxcContainer, DxcInset } from "@dxc-technology/halstack-react";
import { DxcContainer, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";

const code = `() => {
return (
Expand All @@ -13,7 +13,7 @@ const code = `() => {
padding="var(--spacing-padding-xs)"
width="fit-content"
>
Example text
<DxcParagraph>Example text</DxcParagraph>
</DxcContainer>
</DxcInset>
);
Expand All @@ -22,6 +22,7 @@ const code = `() => {
const scope = {
DxcContainer,
DxcInset,
DxcParagraph,
};

export default { code, scope };
5 changes: 3 additions & 2 deletions apps/website/screens/components/dialog/code/examples/backgroundClick.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `() => {
Expand All @@ -13,7 +13,7 @@ const code = `() => {
{isDialogVisible && (
<DxcDialog onBackgroundClick={handleClick} closable={false}>
<DxcInset space="var(--spacing-padding-l)">
Please enter your personal information.
<DxcParagraph>Please enter your personal information.</DxcParagraph>
</DxcInset>
</DxcDialog>
)}
Expand All @@ -26,6 +26,7 @@ const scope = {
DxcButton,
DxcDialog,
DxcInset,
DxcParagraph,
};

export default { code, scope };
5 changes: 3 additions & 2 deletions apps/website/screens/components/dialog/code/examples/basicUsage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `() => {
Expand All @@ -13,7 +13,7 @@ const code = `() => {
{isDialogVisible && (
<DxcDialog onCloseClick={handleClick}>
<DxcInset space="var(--spacing-padding-l)">
Please enter your personal information.
<DxcParagraph>Please enter your personal information.</DxcParagraph>
</DxcInset>
</DxcDialog>
)}
Expand All @@ -26,6 +26,7 @@ const scope = {
DxcButton,
DxcDialog,
DxcInset,
DxcParagraph
};

export default { code, scope };
5 changes: 3 additions & 2 deletions apps/website/screens/components/slider/code/examples/complex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `() => {
Expand All @@ -21,14 +21,15 @@ const code = `() => {
step={0.1}
value={value}
/>
<span>Current value: {value}</span>
<DxcParagraph>Current value: {value}</DxcParagraph>
</DxcInset>
);
}`;

const scope = {
DxcSlider,
DxcInset,
DxcParagraph,
useState,
};

Expand Down
5 changes: 3 additions & 2 deletions apps/website/screens/components/slider/overview/examples/continuous.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `() => {
Expand All @@ -18,7 +18,7 @@ const code = `() => {
showLimitsValues
value={value}
/>
<span>Current value: {value}</span>
<DxcParagraph>Current value: {value}</DxcParagraph>
</DxcFlex>
</DxcInset>
);
Expand All @@ -28,6 +28,7 @@ const scope = {
DxcSlider,
DxcInset,
DxcFlex,
DxcParagraph,
useState,
};

Expand Down
5 changes: 3 additions & 2 deletions apps/website/screens/components/slider/overview/examples/discrete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `() => {
Expand All @@ -19,7 +19,7 @@ const code = `() => {
step={10}
value={value}
/>
<span>Current value: {value}</span>
<DxcParagraph>Current value: {value}</DxcParagraph>
</DxcInset>
);
}`;
Expand All @@ -28,6 +28,7 @@ const scope = {
DxcSlider,
DxcInset,
DxcFlex,
DxcParagraph,
useState,
};

Expand Down
6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/lib/src/heading/Heading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions packages/lib/src/select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions packages/lib/src/styles/forms/ErrorMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down