Skip to content

Reimplement badge using semantic token #2302

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
PelayoFelgueroso merged 6 commits into from
Oct 3, 2025
Merged

Reimplement badge using semantic token #2302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3f749e5
Changed badge API to allow new semantic colors
Mil4n0r Oct 3, 2025
bedca48
Updated badges color to meet new API
Mil4n0r Oct 3, 2025
ff15072
Added 'new' badge for code page
Mil4n0r Oct 3, 2025
f28cb1d
Fixed AccordionItem color
Mil4n0r Oct 3, 2025
0a90cda
Merge branch 'master' into Mil4n0r/fix_badge_semantic
Mil4n0r Oct 3, 2025
11551d3
Merge branch 'master' into Mil4n0r/fix_badge_semantic
PelayoFelgueroso Oct 3, 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
12 changes: 6 additions & 6 deletions apps/website/screens/common/StatusBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ type StatusBadgeProps = {
const getBadgeColor = (status: StatusBadgeProps["status"]) => {
switch (status) {
case "required":
return "orange";
return "warning";
case "experimental":
return "blue";
return "secondary";
case "new":
return "purple";
return "primary";
case "stable":
return "green";
return "success";
case "legacy":
return "yellow";
return "tertiary";
default:
return "grey";
return "neutral";
}
};

Expand Down
2 changes: 1 addition & 1 deletion apps/website/screens/common/sidenav/SidenavLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const SidenavLogo = ({ subtitle = "Design System" }: { subtitle?: string }) => {
<Subtitle>{subtitle}</Subtitle>
</LogoContainer>
<DxcBadge
color="purple"
color="primary"
label={isDev ? "dev" : pathVersion === "next" ? pathVersion : `v${pathVersion}`}
size="small"
/>
Expand Down
6 changes: 3 additions & 3 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
Expand Up @@ -7,7 +7,7 @@ const code = `() => {
<DxcAccordion independent={false} defaultIndexActive={[0, 2]}>
<DxcAccordion.AccordionItem
label="Find a person"
badge={{ position: "before", element: <DxcBadge label="GET" color="green" /> }}
badge={{ position: "before", element: <DxcBadge label="GET" color="success" /> }}
statusLight={<DxcStatusLight label="Active" mode="success" />}
>
<DxcInset space="var(--spacing-padding-l)">
Expand All @@ -17,7 +17,7 @@ const code = `() => {
<DxcAccordion.AccordionItem
label="Create a person"
assistiveText="Provide all required info"
badge={{ position: "before", element: <DxcBadge label="POST" color="blue" /> }}
badge={{ position: "before", element: <DxcBadge label="POST" color="secondary" /> }}
defaultIsExpanded
>
<DxcInset space="var(--spacing-padding-l)">
Expand All @@ -26,7 +26,7 @@ const code = `() => {
</DxcAccordion.AccordionItem>
<DxcAccordion.AccordionItem
label="Find interactions"
badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="yellow" /> }}
badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="tertiary" /> }}
statusLight={<DxcStatusLight label="Active" mode="warning" />}
defaultIsExpanded
>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const code = `() => {
<DxcAccordion.AccordionItem
label="GET request"
subLabel="Jan, 20 2025"
badge={{ position: "before", element: <DxcBadge label="GET" color="green" /> }}
badge={{ position: "before", element: <DxcBadge label="GET" color="success" /> }}
statusLight={<DxcStatusLight label="Active" mode="success" />}
>
<DxcInset space="var(--spacing-padding-l)">
Expand Down
4 changes: 2 additions & 2 deletions apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,8 +256,8 @@ const sections = [
Always prioritize the visibility of mandatory elements like the title over optional elements.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
If both a badge and a status light are present, avoid applying semantic colors (e.g., red, green) to the
badge to prevent visual conflict with the status indicator.
If both a badge and a status light are present, avoid applying semantic colors to the badge to prevent
visual conflict with the status indicator.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Maintain consistency in layout and alignment to support content scanning, especially when multiple
Expand Down
2 changes: 1 addition & 1 deletion apps/website/screens/components/accordion/overview/examples/basicExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const code = `() => {
</DxcAccordion>
<DxcAccordion>
<DxcAccordion.AccordionItem
badge={{ position: "after", element: <DxcBadge label="Enterprise" icon="filled_stars" color="yellow" /> }}
badge={{ position: "after", element: <DxcBadge label="Enterprise" icon="filled_stars" color="tertiary" /> }}
label="Life Policy"
subLabel="Ref — 1236554546"
>
Expand Down
14 changes: 11 additions & 3 deletions apps/website/screens/components/badge/code/BadgeCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Example from "@/common/example/Example";
import contextual from "./examples/contextual";
import notification from "./examples/notification";
import icons from "./examples/icons";
import StatusBadge from "@/common/StatusBadge";

const sections = [
{
Expand All @@ -22,13 +23,20 @@ const sections = [
</thead>
<tbody>
<tr>
<td>color</td>
<td>
<TableCode>'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow' | 'purple'</TableCode>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="new" />
color
</DxcFlex>
</td>
<td>
<TableCode>
'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'neutral' | 'warning' | 'error'
</TableCode>
</td>
<td>Affects the visual style of the badge. It can be used following semantic purposes or not.</td>
<td>
<TableCode>'grey'</TableCode>
<TableCode>'neutral'</TableCode>
</td>
</tr>
<tr>
Expand Down
12 changes: 6 additions & 6 deletions apps/website/screens/components/badge/code/examples/contextual.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ const code = `() => {
<DxcInset space="var(--spacing-padding-xl)">
<DxcFlex gap="var(--spacing-gap-xl)" wrap="wrap">
<DxcBadge label="Authorized" />
<DxcBadge label="Reserved" color="blue" />
<DxcBadge label="Ready" color="green" />
<DxcBadge label="Pending" color="orange" />
<DxcBadge label="Unfulfilled" color="red" />
<DxcBadge label="Paid" color="yellow" />
<DxcBadge label="Restocked" color="purple" />
<DxcBadge label="Reserved" color="secondary" />
<DxcBadge label="Ready" color="success" />
<DxcBadge label="Pending" color="warning" />
<DxcBadge label="Unfulfilled" color="error" />
<DxcBadge label="Paid" color="tertiary" />
<DxcBadge label="Restocked" color="primary" />
</DxcFlex>
</DxcInset>
);
Expand Down
12 changes: 6 additions & 6 deletions apps/website/screens/components/badge/code/examples/icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@ const code = `() => {
<DxcInset space="var(--spacing-padding-xl)">
<DxcFlex gap="var(--spacing-gap-xl)" wrap="wrap">
<DxcBadge label="Authorized" icon={icon} />
<DxcBadge label="Reserved" color="blue" icon={icon} />
<DxcBadge label="Ready" color="green" icon={icon} />
<DxcBadge label="Pending" color="orange" icon={icon} />
<DxcBadge label="Unfulfilled" color="red" icon="error" />
<DxcBadge label="Paid" color="yellow" icon="euro" />
<DxcBadge label="Restocked" color="purple" icon="refresh" />
<DxcBadge label="Reserved" color="secondary" icon={icon} />
<DxcBadge label="Ready" color="success" icon={icon} />
<DxcBadge label="Pending" color="warning" icon={icon} />
<DxcBadge label="Unfulfilled" color="error" icon="error" />
<DxcBadge label="Paid" color="tertiary" icon="euro" />
<DxcBadge label="Restocked" color="primary" icon="refresh" />
</DxcFlex>
</DxcInset>
);
Expand Down
11 changes: 6 additions & 5 deletions apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@ const sections = [
have been made to a certain section of the interface.
</DxcParagraph>
<DxcParagraph>
Only one color is allowed for this badge, which is red, and cannot be changed by any means.
Only one color is allowed for this badge, which is the semantic error (generally red), and cannot be
changed by any means.
</DxcParagraph>
</>
),
Expand Down Expand Up @@ -94,14 +95,14 @@ const sections = [
colors are available:
<DxcBulletedList type="circle">
<DxcBulletedList.Item>
Green: positive actions, such as approved, completed, success...
Success: positive actions, such as approved, completed, success...
</DxcBulletedList.Item>
<DxcBulletedList.Item>Blue: informative actions, such as published, in use...</DxcBulletedList.Item>
<DxcBulletedList.Item>Info: informative actions, such as published, in use...</DxcBulletedList.Item>
<DxcBulletedList.Item>
Red: negative actions, such as error, rejection, incomplete...
Warning: alert actions, such as pending or paused actions...
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Orange: alert actions, such as pending or paused actions...
Error: negative actions, such as error, rejection, incomplete...
</DxcBulletedList.Item>
</DxcBulletedList>
</DxcBulletedList.Item>
Expand Down
24 changes: 12 additions & 12 deletions apps/website/screens/components/badge/overview/examples/contextual.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,21 @@ const code = `() => {
<DxcInset space="var(--spacing-padding-xl)">
<DxcFlex gap="var(--spacing-gap-xl)" direction="column">
<DxcFlex gap="var(--spacing-gap-xl)" justifyContent="space-evenly">
<DxcBadge label="Label" color="green" icon="info" />
<DxcBadge label="Label" color="blue" icon="info" />
<DxcBadge label="Label" color="red" icon="info" />
<DxcBadge label="Label" color="orange" icon="info" />
<DxcBadge label="Label" color="yellow" icon="info" />
<DxcBadge label="Label" color="purple" icon="info" />
<DxcBadge label="Label" color="success" icon="info" />
<DxcBadge label="Label" color="info" icon="info" />
<DxcBadge label="Label" color="error" icon="info" />
<DxcBadge label="Label" color="warning" icon="info" />
<DxcBadge label="Label" color="tertiary" icon="info" />
<DxcBadge label="Label" color="primary" icon="info" />
<DxcBadge label="Label" icon="info" />
</DxcFlex>
<DxcFlex gap="var(--spacing-gap-xl)" justifyContent="space-evenly">
<DxcBadge label="Label" color="green" />
<DxcBadge label="Label" color="blue" />
<DxcBadge label="Label" color="red" />
<DxcBadge label="Label" color="orange" />
<DxcBadge label="Label" color="yellow" />
<DxcBadge label="Label" color="purple" />
<DxcBadge label="Label" color="success" />
<DxcBadge label="Label" color="info" />
<DxcBadge label="Label" color="error" />
<DxcBadge label="Label" color="warning" />
<DxcBadge label="Label" color="tertiary" />
<DxcBadge label="Label" color="primary" />
<DxcBadge label="Label" />
</DxcFlex>
</DxcFlex>
Expand Down
16 changes: 8 additions & 8 deletions apps/website/screens/components/button/overview/ButtonOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,8 @@ const sections = [
</DxcTypography>
</td>
<td>
Indicates a destructive action or highlights a critical issue. Styled in red. Use for actions like
"Delete", "Remove" or "Cancel Subscription.".
Indicates a destructive action or highlights a critical issue. Use for actions like "Delete", "Remove"
or "Cancel Subscription.".
</td>
</tr>
<tr>
Expand All @@ -179,8 +179,8 @@ const sections = [
</DxcTypography>
</td>
<td>
Provides additional information or context. Shown in blue, the brand's secondary color. Use for actions
like "More Info", "Details" or "Learn More.".
Provides additional information or context. Use for actions like "More Info", "Details" or "Learn
More.".
</td>
</tr>
<tr>
Expand All @@ -190,8 +190,8 @@ const sections = [
</DxcTypography>
</td>
<td>
Represents a positive action or confirms the completion of a task. Styled in green. Use for actions like
"Confirm", "Complete" or "Approve.".
Represents a positive action or confirms the completion of a task. Use for actions like "Confirm",
"Complete" or "Approve.".
</td>
</tr>
<tr>
Expand All @@ -201,8 +201,8 @@ const sections = [
</DxcTypography>
</td>
<td>
Alerts the user to potential issues or actions that need caution. Styled in orange. Use for actions like
"Warning" or "Attention Needed.".
Alerts the user to potential issues or actions that need caution. Use for actions like "Warning" or
"Attention Needed.".
</td>
</tr>
</tbody>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/screens/components/contextual-menu/code/examples/navigationMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const code = `() => {
items: [
{
label: "Sales data module",
badge: <DxcBadge color="purple" label="Experimental" />,
badge: <DxcBadge color="primary" label="Experimental" />,
},
{ label: "Central platform" },
],
Expand Down
2 changes: 1 addition & 1 deletion apps/website/screens/components/radio-group/overview/examples/stacking.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const code = `() => {
const options = [
{ label: "Red", value: "red" },
{ label: "Blue", value: "blue" },
{ label: "Green", value: "gree" },
{ label: "Green", value: "green" },
];

return (
Expand Down
14 changes: 9 additions & 5 deletions apps/website/screens/foundations/color/ColorPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,16 +184,20 @@ const sections = [
</DxcParagraph>
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Green — Success</strong>: Communicates successful operations, confirmations, or valid states. It
<strong>Success</strong>: Communicates successful operations, confirmations, or valid states. It
reassures users and reinforces positive outcomes.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Orange — Warning</strong>: Used for cautionary messages or potential risks that don't block
progress but may require attention.
<strong>Info</strong>: Provides additional information, guidance, or context that helps users understand
the current state or available options.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Red — Error</strong>: Indicates destructive actions, form validation errors, or system failures.
It draws immediate attention and signals that something needs user correction or caution.
<strong>Warning</strong>: Used for cautionary messages or potential risks that don't block progress but
may require attention.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Error</strong>: Indicates destructive actions, form validation errors, or system failures. It
draws immediate attention and signals that something needs user correction or caution.
</DxcBulletedList.Item>
</DxcBulletedList>
<DxcParagraph>
Expand Down
18 changes: 9 additions & 9 deletions packages/lib/src/accordion/Accordion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ const Accordion = () => (
<DxcAccordion independent defaultIndexActive={0}>
<DxcAccordion.AccordionItem
label="Find a person"
badge={{ position: "before", element: <DxcBadge label="GET" color="green" /> }}
badge={{ position: "before", element: <DxcBadge label="GET" color="success" /> }}
statusLight={<DxcStatusLight label="Active" mode="success" />}
>
<DxcInset space="var(--spacing-padding-l)">
Expand All @@ -249,7 +249,7 @@ const Accordion = () => (
<DxcAccordion.AccordionItem
label="Create a person"
assistiveText="Provide all required info"
badge={{ position: "before", element: <DxcBadge label="POST" color="blue" /> }}
badge={{ position: "before", element: <DxcBadge label="POST" color="secondary" /> }}
>
<DxcInset space="var(--spacing-padding-l)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
Expand All @@ -258,7 +258,7 @@ const Accordion = () => (
</DxcAccordion.AccordionItem>
<DxcAccordion.AccordionItem
label="Find interactions"
badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="yellow" /> }}
badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="tertiary" /> }}
statusLight={<DxcStatusLight label="Active" mode="warning" />}
>
<DxcInset space="var(--spacing-padding-l)">
Expand Down Expand Up @@ -337,7 +337,7 @@ const Accordion = () => (
<DxcAccordion.AccordionItem
label="Bounce Rate"
subLabel="Mon, May 19, 3:17 PM"
badge={{ position: "after", element: <DxcBadge label="Resolved" icon="check_circle" color="green" /> }}
badge={{ position: "after", element: <DxcBadge label="Resolved" icon="check_circle" color="success" /> }}
>
<DxcInset space="var(--spacing-padding-l)">
To edit your profile you need to go to Settings and click on Profile.
Expand Down Expand Up @@ -416,7 +416,7 @@ const Accordion = () => (
label="Assure Claims"
subLabel="Jan, 09 2025"
disabled
badge={{ position: "before", element: <DxcBadge label="Enterprise" color="green" /> }}
badge={{ position: "before", element: <DxcBadge label="Enterprise" color="success" /> }}
statusLight={<DxcStatusLight label="Active" mode="success" />}
>
<DxcInset space="var(--spacing-padding-l)">
Expand All @@ -431,7 +431,7 @@ const Accordion = () => (
subLabel="Jan, 09 2025"
icon="heart_plus"
disabled
badge={{ position: "after", element: <DxcBadge label="Enterprise" color="green" /> }}
badge={{ position: "after", element: <DxcBadge label="Enterprise" color="success" /> }}
>
<DxcInset space="var(--spacing-padding-l)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
Expand All @@ -445,7 +445,7 @@ const Accordion = () => (
<DxcAccordion>
<DxcAccordion.AccordionItem
label="Find a person"
badge={{ position: "before", element: <DxcBadge label="GET" color="green" /> }}
badge={{ position: "before", element: <DxcBadge label="GET" color="success" /> }}
statusLight={<DxcStatusLight label="Active" mode="success" />}
>
<DxcInset space="var(--spacing-padding-l)">
Expand All @@ -456,7 +456,7 @@ const Accordion = () => (
<DxcAccordion.AccordionItem
label="Create a person"
assistiveText="Provide all required info"
badge={{ position: "before", element: <DxcBadge label="POST" color="blue" /> }}
badge={{ position: "before", element: <DxcBadge label="POST" color="secondary" /> }}
>
<DxcInset space="var(--spacing-padding-l)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
Expand All @@ -465,7 +465,7 @@ const Accordion = () => (
</DxcAccordion.AccordionItem>
<DxcAccordion.AccordionItem
label="Find interactions"
badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="yellow" /> }}
badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="tertiary" /> }}
statusLight={<DxcStatusLight label="Active" mode="warning" />}
>
<DxcInset space="var(--spacing-padding-l)">
Expand Down
Loading