anuj-pal27 · Oct 18, 2026
diff --git a/apps/website/screens/common/DocFooter.tsx b/apps/website/screens/common/DocFooter.tsx
@@ -18,7 +18,7 @@ const DocFooter = ({ githubLink }: { githubLink: string }) => {
             Report an issue on GitHub
           </DxcLink>
         </DxcFlex>
-        <DxcDivider color="darkGrey" />
+        <DxcDivider colorWeight="dark" />
         <DxcFlex justifyContent="space-between">
           <DxcFlex direction="column" gap="var(--spacing-gap-ml)">
             {previousLink && (

diff --git a/apps/website/screens/components/divider/code/DividerCodePage.tsx b/apps/website/screens/components/divider/code/DividerCodePage.tsx
@@ -21,13 +21,13 @@ const sections = [
         </thead>
         <tbody>
           <tr>
-            <td>color</td>
+            <td>colorWeight</td>
             <td>
-              <TableCode>'lightGrey' | 'mediumGrey' | 'darkGrey'</TableCode>
+              <TableCode>'light' | 'medium' | 'dark'</TableCode>
             </td>
             <td>Modifies the color of the divider.</td>
             <td>
-              <TableCode>'mediumGrey'</TableCode>
+              <TableCode>'medium'</TableCode>
             </td>
           </tr>
           <tr>

diff --git a/apps/website/screens/theme-generator/components/LandingSteps.tsx b/apps/website/screens/theme-generator/components/LandingSteps.tsx
@@ -27,7 +27,7 @@ const LandingSteps = ({ steps }: { steps: { title: string; description: string }
             {index !== steps.length - 1 && (
               <DxcContainer width="48px">
                 <DxcFlex fullHeight alignItems="center" justifyContent="center">
-                  <DxcDivider color="lightGrey" />
+                  <DxcDivider colorWeight="light" />
                 </DxcFlex>
               </DxcContainer>
             )}

diff --git a/apps/website/screens/theme-generator/previews/examples/DashboardPreview.tsx b/apps/website/screens/theme-generator/previews/examples/DashboardPreview.tsx
@@ -74,7 +74,7 @@ const DashboardPreview = ({ logos }: { logos: Logos }) => {
                   </DxcFlex>
                   <DxcInset horizontal="var(--spacing-padding-xl)">
                     <DxcInset top="var(--spacing-padding-xl)">
-                      <DxcDivider orientation="horizontal" color="mediumGrey" />
+                      <DxcDivider orientation="horizontal" colorWeight="medium" />
                     </DxcInset>
                     <DxcInset space="var(--spacing-padding-xs)" top="var(--spacing-padding-xl)">
                       <DxcFlex direction="column" alignItems="center" gap="var(--spacing-gap-xs)" alignSelf="stretch">

diff --git a/packages/lib/src/base-menu/Section.tsx b/packages/lib/src/base-menu/Section.tsx
@@ -34,7 +34,7 @@ export default function Section({ index, length, section }: SectionProps) {
       </SubMenu>
       {index !== length - 1 && (
         <DxcInset top="var(--spacing-padding-xxs)" bottom="var(--spacing-padding-xxs)">
-          <DxcDivider color="lightGrey" />
+          <DxcDivider colorWeight="light" />
         </DxcInset>
       )}
     </SectionContainer>

diff --git a/packages/lib/src/divider/Divider.stories.tsx b/packages/lib/src/divider/Divider.stories.tsx
@@ -77,7 +77,7 @@ const Divider = () => (
           augue. In fermentum metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae.
           Commodo sagittis volutpat id lorem.
         </DxcParagraph>
-        <DxcDivider color="lightGrey" />
+        <DxcDivider colorWeight="light" />
         <DxcParagraph>
           Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
           arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
@@ -103,7 +103,7 @@ const Divider = () => (
           augue. In fermentum metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae.
           Commodo sagittis volutpat id lorem.
         </DxcParagraph>
-        <DxcDivider color="darkGrey" />
+        <DxcDivider colorWeight="dark" />
         <DxcParagraph>
           Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
           arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
@@ -181,7 +181,7 @@ const Divider = () => (
           augue. In fermentum metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae.
           Commodo sagittis volutpat id lorem.
         </DxcParagraph>
-        <DxcDivider orientation="vertical" color="lightGrey" />
+        <DxcDivider orientation="vertical" colorWeight="light" />
         <DxcParagraph>
           Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
           arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
@@ -207,7 +207,7 @@ const Divider = () => (
           augue. In fermentum metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae.
           Commodo sagittis volutpat id lorem.
         </DxcParagraph>
-        <DxcDivider orientation="vertical" color="darkGrey" />
+        <DxcDivider orientation="vertical" colorWeight="dark" />
         <DxcParagraph>
           Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
           arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra

diff --git a/packages/lib/src/divider/Divider.tsx b/packages/lib/src/divider/Divider.tsx
@@ -2,11 +2,11 @@ import styled from "@emotion/styled";
 import DividerPropsType from "./types";
 
 const StyledDivider = styled.hr<DividerPropsType>`
-  ${({ orientation, weight, color }) => `
+  ${({ orientation, weight, colorWeight }) => `
     border-color: ${
-      color === "lightGrey"
+      colorWeight === "light"
         ? "var(--border-color-neutral-lighter)"
-        : color === "mediumGrey"
+        : colorWeight === "medium"
           ? "var(--border-color-neutral-medium)"
           : "var(--border-color-neutral-strongest)"
     };
@@ -22,7 +22,7 @@ const StyledDivider = styled.hr<DividerPropsType>`
 `;
 
 export default function DxcDivider({
-  color = "mediumGrey",
+  colorWeight = "medium",
   decorative = true,
   orientation = "horizontal",
   weight = "regular",
@@ -31,7 +31,7 @@ export default function DxcDivider({
     <StyledDivider
       aria-hidden={decorative}
       aria-orientation={orientation}
-      color={color}
+      colorWeight={colorWeight}
       orientation={orientation}
       weight={weight}
     />

diff --git a/packages/lib/src/divider/types.ts b/packages/lib/src/divider/types.ts
@@ -10,7 +10,7 @@ type Props = {
   /**
    * Modifies the color of the divider.
    */
-  color?: "lightGrey" | "mediumGrey" | "darkGrey";
+  colorWeight?: "light" | "medium" | "dark";
   /**
    * Specifies whether the divider serves a purely decorative purpose
    * or functions as a semantic separator for content. Additionally, it

diff --git a/packages/lib/src/sidenav/Sidenav.tsx b/packages/lib/src/sidenav/Sidenav.tsx
@@ -214,7 +214,7 @@ const DxcSidenav = ({
             {bottomContent && (
               <>
                 <DxcInset horizontal="var(--spacing-padding-xs)">
-                  <DxcDivider color="lightGrey" />
+                  <DxcDivider colorWeight="light" />
                 </DxcInset>
                 <DxcFlex direction="column" gap="var(--spacing-gap-l)">
                   {bottomContent}

diff --git a/packages/lib/src/wizard/Wizard.tsx b/packages/lib/src/wizard/Wizard.tsx
@@ -223,7 +223,7 @@ export default function DxcWizard({
           </Step>
           {i !== steps.length - 1 && (
             <DividerContainer mode={mode}>
-              <DxcDivider color="darkGrey" orientation={mode} />
+              <DxcDivider colorWeight="dark" orientation={mode} />
             </DividerContainer>
           )}
         </StepContainer>