dxc-technology · Jialecl · Jul 23, 2025 · 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
@@ -233,7 +233,7 @@ const DropdownListStates = () => (
           border: "1px solid black",
           borderRadius: "4px",
           overflow: "auto",
-          zIndex: "1300",
+          zIndex: "130",
         }}
       >
         <DxcDropdown label="Select a platform" options={defaultOptions} onSelectOption={(option) => {}} size="medium" />

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) =>

diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css
@@ -1,5 +1,39 @@
 :root {
-  /* _Core */
+  /**************/
+  /** POSITION **/
+  /**************/
+
+  /* Application Layout */
+  --z-app-layout-header: 100;
+  --z-app-layout-sidenav: 110;
+
+  /* Header */
+  --z-header-overlay: 200;
+  --z-header-menu: 210;
+
+  /* UI components */
+  --z-date-input: 300;
+  --z-dropdown: 310;
+  --z-textinput: 320;
+  --z-select: 330;
+
+  /* Modals and overlays */
+  --z-spinner-overlay: 400;
+  --z-progressbar-overlay: 410;
+  --z-dialog: 420;
+  --z-alert: 430;
+
+  /* Notifications */
+  --z-toast: 500;
+
+  /* Tooltip (topmost) */
+  --z-tooltip: 600;
+
+  /************/
+  /** TOKENS **/
+  /************/
+
+  /* Core tokens */
   --color-absolutes-black: #000000;
   --color-absolutes-white: #ffffff;
   --color-alpha-100-a: #ebebeb1a;
@@ -122,7 +156,7 @@
   --line-style-dashed: dashed;
   --line-style-solid: solid;
 
-  /* Alias */
+  /* Alias tokens */
   --border-color-error-light: var(--color-red-300);
   --border-color-error-medium: var(--color-red-600);
   --border-color-error-strong: var(--color-red-700);
@@ -329,4 +363,4 @@
   --border-style-outline: var(--line-style-dashed);
   --typography-font-family: var(--font-family-sans);
   --typography-helper-text-italic: var(--font-style-lightitalic);
-}
+}
diff --git a/packages/lib/src/text-input/TextInput.stories.tsx b/packages/lib/src/text-input/TextInput.stories.tsx
@@ -242,7 +242,7 @@ const AutosuggestListbox = () => (
             border: "1px solid black",
             borderRadius: "4px",
             overflow: "auto",
-            zIndex: "1300",
+            zIndex: "130",
             position: "relative",
           }}
         >

diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx
@@ -470,7 +470,7 @@ const DxcTextInput = forwardRef<RefType, TextInputPropsType>(
                     event.preventDefault();
                   }}
                   sideOffset={4}
-                  style={{ zIndex: "2147483647" }}
+                  style={{ zIndex: "var(--z-textinput)" }}
                 >
                   <Suggestions
                     highlightedSuggestions={typeof suggestions !== "function"}

diff --git a/packages/lib/src/toast/Toast.stories.tsx b/packages/lib/src/toast/Toast.stories.tsx
@@ -8,6 +8,9 @@ import DxcToastsQueue from "./ToastsQueue";
 import useToast from "./useToast";
 import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 import { Meta, StoryObj } from "@storybook/react";
+import DxcDialog from "../dialog/Dialog";
+import DxcInset from "../inset/Inset";
+import { screen } from "@testing-library/react";
 
 export default {
   title: "Toast",
@@ -264,6 +267,64 @@ const playFunc = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   await userEvent.click(canvas.getByText("Show success toast"));
 };
 
+const ToastAboveDialog = () => {
+  const toast = useToast();
+
+  return (
+    <ExampleContainer>
+      <Title title="Screen placement" />
+      <DxcDialog>
+        <DxcInset space="var(--spacing-padding-l)">
+          <DxcFlex gap="var(--spacing-gap-ml)" direction="column">
+            <DxcButton
+              label="Show default toast"
+              onClick={() => {
+                toast.default({ message: "This is a simple placed toast." });
+              }}
+            />
+            <DxcButton
+              label="Show info toast"
+              onClick={() => {
+                toast.info({
+                  message:
+                    "This is a very long label for a Toast. Please, always try to avoid this king of messages, be brief and concise.",
+                  action: actionIcon,
+                });
+              }}
+            />
+            <DxcButton
+              label="Show success toast"
+              onClick={() => {
+                toast.success({
+                  message:
+                    "This is another very long label for a Toast. Please, always try to avoid this king of messages, be brief and concise.",
+                  action: action,
+                });
+              }}
+            />
+          </DxcFlex>
+        </DxcInset>
+      </DxcDialog>
+    </ExampleContainer>
+  );
+};
+
+const ToastsQueueAboveDialog = () => (
+  <DxcToastsQueue>
+    <ToastAboveDialog />
+  </DxcToastsQueue>
+);
+
+const playFuncDialog = async () => {
+  const showDefaultButton = await screen.findByText("Show default toast");
+  const showInfoButton = await screen.findByText("Show info toast");
+  const showSuccessButton = await screen.findByText("Show success toast");
+
+  await userEvent.click(showDefaultButton);
+  await userEvent.click(showInfoButton);
+  await userEvent.click(showSuccessButton);
+};
+
 type Story = StoryObj<typeof DxcToast>;
 
 export const Chromatic: Story = {
@@ -285,3 +346,8 @@ export const MobileScreenToast: Story = {
     },
   },
 };
+
+export const AboveDialogToast: Story = {
+  render: ToastsQueueAboveDialog,
+  play: playFuncDialog,
+};
diff --git a/packages/lib/src/toast/ToastsQueue.tsx b/packages/lib/src/toast/ToastsQueue.tsx
@@ -13,7 +13,7 @@ const ToastsQueue = styled.section`
   position: fixed;
   bottom: 0;
   right: 0;
-  z-index: 2147483647;
+  z-index: var(--z-toast);
   display: flex;
   flex-direction: column;
   align-items: flex-end;

diff --git a/packages/lib/src/tooltip/Tooltip.tsx b/packages/lib/src/tooltip/Tooltip.tsx
@@ -11,7 +11,7 @@ const TooltipTriggerContainer = styled.div`
 `;
 
 const StyledTooltipContent = styled(Content)`
-  z-index: 2147483647;
+  z-index: var(--z-tooltip);
 
   animation-duration: 0.2s;
   animation-timing-function: ease-out;