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

Author: nataliepina

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

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                                                                                                                                     |

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   |

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"
+      }
     }
+  }
 }

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"