From 4c9c6e93238f039731d7099f38d17631585cbd7c Mon Sep 17 00:00:00 2001
From: Natalie Pina <34781875+nataliepina@users.noreply.github.com>
Date: Thu, 27 Jul 2023 03:11:08 -0500
Subject: [PATCH] feat: new z-index design tokens (#982)

Introduces new z-index tokens and adjustments for pre-existing tokens.

BREAKING CHANGE:
The z-index values for zIndexModal and zIndexDropdownable have increased.

Closes D2IQ-92067
---
 design-guidelines/design-tokens/color.md      |  2 +-
 design-guidelines/design-tokens/font.md       |  2 +-
 design-guidelines/design-tokens/layout.md     |  9 +++--
 .../properties/layout/zIndex.json             | 33 ++++++++++++-------
 .../__snapshots__/DropdownMenu.test.tsx.snap  |  4 +--
 5 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/design-guidelines/design-tokens/color.md b/design-guidelines/design-tokens/color.md
index ddf6376e8..39bc361ed 100644
--- a/design-guidelines/design-tokens/color.md
+++ b/design-guidelines/design-tokens/color.md
@@ -1,7 +1,7 @@
 <!--
 
    Do not edit directly
-   Generated by style-dictionary on Fri Mar 03 2023 15:32:54 GMT-0600 (Central Standard Time)
+   Generated by style-dictionary on Mon Jul 24 2023 15:22:29 GMT-0500 (Central Daylight Time)
 
 -->
 ## All Colors
diff --git a/design-guidelines/design-tokens/font.md b/design-guidelines/design-tokens/font.md
index fde397e33..a300ca8a7 100644
--- a/design-guidelines/design-tokens/font.md
+++ b/design-guidelines/design-tokens/font.md
@@ -1,7 +1,7 @@
 <!--
 
    Do not edit directly
-   Generated by style-dictionary on Fri Mar 03 2023 15:32:54 GMT-0600 (Central Standard Time)
+   Generated by style-dictionary on Mon Jul 24 2023 15:22:29 GMT-0500 (Central Daylight Time)
 
 -->
 | Js variable name      | Value                                                                                                                                     |
diff --git a/design-guidelines/design-tokens/layout.md b/design-guidelines/design-tokens/layout.md
index 1f69f6776..5a23ee948 100644
--- a/design-guidelines/design-tokens/layout.md
+++ b/design-guidelines/design-tokens/layout.md
@@ -1,7 +1,7 @@
 <!--
 
    Do not edit directly
-   Generated by style-dictionary on Fri Mar 03 2023 15:32:54 GMT-0600 (Central Standard Time)
+   Generated by style-dictionary on Mon Jul 24 2023 15:22:29 GMT-0500 (Central Daylight Time)
 
 -->
 ## Breakpoints
@@ -63,6 +63,9 @@
 | borderRadiusLarge   | 8px   |
 | borderRadiusCircle  | 50%   |
 | textBlockWidth      | 65ch  |
+| zIndexDeep          | -1    |
 | zIndexContent       | 0     |
-| zIndexModal         | 1     |
-| zIndexDropdownable  | 2     |
+| zIndexSticky        | 100   |
+| zIndexOverlay       | 200   |
+| zIndexModal         | 300   |
+| zIndexDropdownable  | 400   |
diff --git a/packages/design-tokens/properties/layout/zIndex.json b/packages/design-tokens/properties/layout/zIndex.json
index ffc5f1298..6745a38b6 100644
--- a/packages/design-tokens/properties/layout/zIndex.json
+++ b/packages/design-tokens/properties/layout/zIndex.json
@@ -1,15 +1,24 @@
 {
-	"layout": {
-        "zIndex": {
-            "content": {
-                "value": "0"
-            },
-            "modal": {
-                "value": "1"
-            },
-            "dropdownable": {
-                "value": "2"
-            }
-        }
+  "layout": {
+    "zIndex": {
+      "deep": {
+        "value": "-1"
+      },
+      "content": {
+        "value": "0"
+      },
+      "sticky": {
+        "value": "100"
+      },
+      "overlay": {
+        "value": "200"
+      },
+      "modal": {
+        "value": "300"
+      },
+      "dropdownable": {
+        "value": "400"
+      }
     }
+  }
 }
diff --git a/packages/dropdownMenu/tests/__snapshots__/DropdownMenu.test.tsx.snap b/packages/dropdownMenu/tests/__snapshots__/DropdownMenu.test.tsx.snap
index 464086e88..d8433b759 100644
--- a/packages/dropdownMenu/tests/__snapshots__/DropdownMenu.test.tsx.snap
+++ b/packages/dropdownMenu/tests/__snapshots__/DropdownMenu.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`Dropdown renders an open dropdown 1`] = `
   </div>
   <div>
     <div
-      style="z-index: 2; position: absolute; left: 0px; top: 0px;"
+      style="z-index: 400; position: absolute; left: 0px; top: 0px;"
     >
       <div
         aria-labelledby="downshift-1-label"
@@ -165,7 +165,7 @@ exports[`Dropdown renders an open dropdown with multiple sections 1`] = `
   </div>
   <div>
     <div
-      style="z-index: 2; position: absolute; left: 0px; top: 0px;"
+      style="z-index: 400; position: absolute; left: 0px; top: 0px;"
     >
       <div
         aria-labelledby="downshift-3-label"