dxc-technology · Mil4n0r · Jul 14, 2025 · Jul 14, 2025 · Jul 15, 2025
diff --git a/packages/lib/src/alert/ModalAlertWrapper.tsx b/packages/lib/src/alert/ModalAlertWrapper.tsx
@@ -23,7 +23,7 @@ const Modal = styled.div`
   align-items: center;
   justify-content: center;
   height: 100%;
-  z-index: 2147483647;
+  z-index: var(--z-alert);
 `;
 
 const Overlay = styled.div`
@@ -38,7 +38,6 @@ const ModalAlertContainer = styled.div`
   box-sizing: border-box;
   max-width: 80%;
   min-width: 696px;
-  z-index: 2147483647;
 
   @media (max-width: ${responsiveSizes.medium}rem) {
     max-width: 92%;

diff --git a/packages/lib/src/date-input/DateInput.stories.tsx b/packages/lib/src/date-input/DateInput.stories.tsx
@@ -120,7 +120,7 @@ const YearPickerComponent = () => (
 const DatePickerButtonStates = () => (
   <>
     <ExampleContainer>
-      <Title title="Show date picker over another element with z-index 0" theme="light" level={4} />
+      <Title title="Show date picker over another element with a certain z-index" theme="light" level={4} />
       <div
         style={{
           display: "flex",
@@ -133,7 +133,7 @@ const DatePickerButtonStates = () => (
           border: "1px solid black",
           borderRadius: "4px",
           overflow: "auto",
-          zIndex: "1300",
+          zIndex: "130",
           position: "relative",
         }}
       >

diff --git a/packages/lib/src/date-input/DateInput.tsx b/packages/lib/src/date-input/DateInput.tsx
@@ -81,7 +81,7 @@ const HelperText = styled.span<{ disabled: DateInputPropsType["disabled"] }>`
 `;
 
 const StyledPopoverContent = styled(Popover.Content)`
-  z-index: 2147483647;
+  z-index: var(--z-date-input);
   &:focus-visible {
     outline: none;
   }

diff --git a/packages/lib/src/dialog/Dialog.tsx b/packages/lib/src/dialog/Dialog.tsx
@@ -25,7 +25,7 @@ const DialogContainer = styled.div`
   align-items: center;
   justify-content: center;
   height: 100%;
-  z-index: 2147483647;
+  z-index: var(--z-dialog);
 `;
 
 const Overlay = styled.div`
@@ -44,7 +44,6 @@ const Dialog = styled.div<{ closable: DialogPropsType["closable"] }>`
   background-color: var(--color-bg-neutral-lightest);
   ${(props) => props.closable && "min-height: 72px;"}
   box-shadow: var(--shadow-low-x-position) var(--shadow-low-y-position) var(--shadow-low-blur) var(--shadow-low-spread) var(--shadow-dark);
-  z-index: 2147483647;
 
   @media (max-width: ${responsiveSizes.medium}rem) {
     max-width: 92%;

diff --git a/packages/lib/src/dropdown/Dropdown.stories.tsx b/packages/lib/src/dropdown/Dropdown.stories.tsx
@@ -211,111 +211,102 @@ const Dropdown = () => (
   </>
 );
 
-const DropdownListStates = () => {
-  const colorsTheme: any = useContext(HalstackContext);
-
-  return (
-    <>
-      <Title title="Dropdown Menu" theme="light" level={2} />
-      <ExampleContainer>
-        <Title
-          title="List dialog uses a Radix Popover to appear over elements with a certain z-index"
-          theme="light"
-          level={3}
-        />
-        <div
-          style={{
-            position: "relative",
-            display: "flex",
-            flexDirection: "column",
-            gap: "20px",
-            height: "150px",
-            width: "min-content",
-            marginBottom: "100px",
-            padding: "20px",
-            border: "1px solid black",
-            borderRadius: "4px",
-            overflow: "auto",
-            zIndex: "1300",
-          }}
-        >
-          <DxcDropdown
-            label="Select a platform"
-            options={defaultOptions}
-            onSelectOption={(option) => {}}
-            size="medium"
-          />
-          <button style={{ zIndex: "1", width: "100px" }}>Submit</button>
-        </div>
-      </ExampleContainer>
-      <Title title="Option states" theme="light" level={3} />
-      <ExampleContainer pseudoState="pseudo-hover">
-        <Title title="Hovered option" theme="light" level={4} />
-        <DropdownMenu
-          id="x1"
-          dropdownTriggerId="dtx1"
-          iconsPosition="before"
-          visualFocusIndex={-1}
-          menuItemOnClick={() => {}}
-          onKeyDown={() => {}}
-          options={optionWithIcon}
-          styles={{ width: 240 }}
-        />
-      </ExampleContainer>
-      <ExampleContainer pseudoState="pseudo-active">
-        <Title title="Active option" theme="light" level={4} />
-        <DropdownMenu
-          id="x2"
-          dropdownTriggerId="dtx2"
-          iconsPosition="before"
-          visualFocusIndex={-1}
-          menuItemOnClick={() => {}}
-          onKeyDown={() => {}}
-          options={optionWithIcon}
-          styles={{ width: 240 }}
-        />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Focused option" theme="light" level={4} />
-        <DropdownMenu
-          id="x3"
-          dropdownTriggerId="dtx3"
-          iconsPosition="before"
-          visualFocusIndex={0}
-          menuItemOnClick={() => {}}
-          onKeyDown={() => {}}
-          options={options}
-          styles={{ width: 240 }}
-        />
-      </ExampleContainer>
-      <Title title="Icons" theme="light" level={3} />
-      <ExampleContainer>
-        <Title title="Before" theme="light" level={4} />
-        <DropdownMenu
-          id="x4"
-          dropdownTriggerId="dtx4"
-          iconsPosition="before"
-          visualFocusIndex={-1}
-          menuItemOnClick={() => {}}
-          onKeyDown={() => {}}
-          options={optionsIcon}
-          styles={{ width: 240 }}
-        />
-        <Title title="After" theme="light" level={4} />
-        <DropdownMenu
-          id="x5"
-          dropdownTriggerId="dtx5"
-          iconsPosition="after"
-          visualFocusIndex={-1}
-          menuItemOnClick={() => {}}
-          onKeyDown={() => {}}
-          options={optionsIcon}
-          styles={{ width: 240 }}
-        />
-      </ExampleContainer>
-    </>
-  );
-};
+const DropdownListStates = () => (
+  <>
+    <Title title="Dropdown Menu" theme="light" level={2} />
+    <ExampleContainer>
+      <Title
+        title="List dialog uses a Radix Popover to appear over elements with a certain z-index"
+        theme="light"
+        level={3}
+      />
+      <div
+        style={{
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          gap: "20px",
+          height: "150px",
+          width: "min-content",
+          marginBottom: "100px",
+          padding: "20px",
+          border: "1px solid black",
+          borderRadius: "4px",
+          overflow: "auto",
+          zIndex: "130",
+        }}
+      >
+        <DxcDropdown label="Select a platform" options={defaultOptions} onSelectOption={(option) => {}} size="medium" />
+        <button style={{ zIndex: "1", width: "100px" }}>Submit</button>
+      </div>
+    </ExampleContainer>
+    <Title title="Option states" theme="light" level={3} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered option" theme="light" level={4} />
+      <DropdownMenu
+        id="x1"
+        dropdownTriggerId="dtx1"
+        iconsPosition="before"
+        visualFocusIndex={-1}
+        menuItemOnClick={() => {}}
+        onKeyDown={() => {}}
+        options={optionWithIcon}
+        styles={{ width: 240 }}
+      />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Active option" theme="light" level={4} />
+      <DropdownMenu
+        id="x2"
+        dropdownTriggerId="dtx2"
+        iconsPosition="before"
+        visualFocusIndex={-1}
+        menuItemOnClick={() => {}}
+        onKeyDown={() => {}}
+        options={optionWithIcon}
+        styles={{ width: 240 }}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Focused option" theme="light" level={4} />
+      <DropdownMenu
+        id="x3"
+        dropdownTriggerId="dtx3"
+        iconsPosition="before"
+        visualFocusIndex={0}
+        menuItemOnClick={() => {}}
+        onKeyDown={() => {}}
+        options={options}
+        styles={{ width: 240 }}
+      />
+    </ExampleContainer>
+    <Title title="Icons" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Before" theme="light" level={4} />
+      <DropdownMenu
+        id="x4"
+        dropdownTriggerId="dtx4"
+        iconsPosition="before"
+        visualFocusIndex={-1}
+        menuItemOnClick={() => {}}
+        onKeyDown={() => {}}
+        options={optionsIcon}
+        styles={{ width: 240 }}
+      />
+      <Title title="After" theme="light" level={4} />
+      <DropdownMenu
+        id="x5"
+        dropdownTriggerId="dtx5"
+        iconsPosition="after"
+        visualFocusIndex={-1}
+        menuItemOnClick={() => {}}
+        onKeyDown={() => {}}
+        options={optionsIcon}
+        styles={{ width: 240 }}
+      />
+    </ExampleContainer>
+  </>
+);
 
 const TooltipTitle = () => (
   <ExampleContainer expanded>

diff --git a/packages/lib/src/dropdown/DropdownMenu.tsx b/packages/lib/src/dropdown/DropdownMenu.tsx
@@ -15,7 +15,7 @@ const DropdownMenuContainer = styled.ul`
     var(--shadow-dark);
   outline: none;
   overflow-y: auto;
-  z-index: 2147483647;
+  z-index: var(--z-dropdown);
   ${scrollbarStyles}
 `;
 

diff --git a/packages/lib/src/header/Header.tsx b/packages/lib/src/header/Header.tsx
@@ -107,7 +107,7 @@ const ResponsiveMenu = styled.div<{ hasVisibility: boolean }>`
   position: fixed;
   top: 0;
   right: 0;
-  z-index: 2000;
+  z-index: var(--z-header-menu);
 
   @media (max-width: ${responsiveSizes.large}rem) and (min-width: ${responsiveSizes.small}rem) {
     width: 60vw;
@@ -152,7 +152,7 @@ const Overlay = styled.div<{ hasVisibility: boolean }>`
     ${(props) => !props.hasVisibility && "display: none"};
   }
 
-  z-index: 1600;
+  z-index: var(--z-header-overlay);
 `;
 
 const Dropdown = (props: ComponentProps<typeof DxcDropdown>) => (

diff --git a/packages/lib/src/layout/ApplicationLayout.tsx b/packages/lib/src/layout/ApplicationLayout.tsx
@@ -32,7 +32,7 @@ const ApplicationLayoutContainer = styled.div<{
 const HeaderContainer = styled.div`
   width: 100%;
   height: fit-content;
-  z-index: 3;
+  z-index: var(--z-app-layout-header);
 `;
 
 const VisibilityToggle = styled.div`
@@ -43,7 +43,7 @@ const VisibilityToggle = styled.div`
   width: 100%;
   background-color: var(--color-bg-neutral-light);
   user-select: none;
-  z-index: 2;
+  z-index: 1;
 `;
 
 const HamburgerTrigger = styled.button`
@@ -84,7 +84,7 @@ const SidenavContainer = styled.div`
   width: fit-content;
   min-width: 280px;
   height: 100%;
-  z-index: 1;
+  z-index: var(--z-app-layout-sidenav);
   position: sticky;
   overflow: auto;
 

diff --git a/packages/lib/src/progress-bar/ProgressBar.tsx b/packages/lib/src/progress-bar/ProgressBar.tsx
@@ -21,7 +21,7 @@ const ProgressBarContainer = styled.div<{
       align-items: center;
       justify-content: center;
       height: 100%;
-      z-index: 1300;
+      z-index: var(--z-progressbar-overlay);
     `}
 `;
 
@@ -48,7 +48,7 @@ const MainContainer = styled.div<{
     props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
   display: flex;
   flex-direction: column;
-  z-index: ${(props) => (props.overlay ? "100" : "0")};
+  z-index: ${(props) => (props.overlay ? "1" : "0")};
   gap: var(--spacing-gap-s);
 `;
 

diff --git a/packages/lib/src/select/Select.stories.tsx b/packages/lib/src/select/Select.stories.tsx
@@ -381,7 +381,7 @@ const SelectListbox = () => (
           border: "1px solid black",
           borderRadius: "4px",
           overflow: "auto",
-          zIndex: "1300",
+          zIndex: "130",
         }}
       >
         <DxcSelect label="Label" options={single_options} optional placeholder="Choose an option" />

diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx
@@ -601,7 +601,7 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
                 event.preventDefault();
               }}
               sideOffset={4}
-              style={{ zIndex: "2147483647" }}
+              style={{ zIndex: "var(--z-dropdown)" }}
             >
               <Listbox
                 ariaLabelledBy={labelId}

diff --git a/packages/lib/src/spinner/Spinner.tsx b/packages/lib/src/spinner/Spinner.tsx
@@ -17,7 +17,7 @@ const SpinnerContainer = styled.div<{
       align-items: center;
       justify-content: center;
       height: 100%;
-      z-index: 2147483647;
+      z-index: var(--z-spinner-overlay);
     `};
 
   margin: ${(props) =>