diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md
index 7f112ab3624..47374033e3e 100644
--- a/UNRELEASED-v8.md
+++ b/UNRELEASED-v8.md
@@ -22,6 +22,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Removed the `$duration-data` global variable ([#4699](https://github.com/Shopify/polaris-react/pull/4699))
 - Removed the `spacing()` scss function and replaced any instances with tokens ([#4691](https://github.com/Shopify/polaris-react/pull/4691/))
 - Removed the `px()` scss function ([#4751](https://github.com/Shopify/polaris-react/pull/4751))
+- Removed the `z-index()` scss function ([#4753](https://github.com/Shopify/polaris-react/pull/4753))
 
 ### New components
 
diff --git a/src/components/Backdrop/Backdrop.scss b/src/components/Backdrop/Backdrop.scss
index ce722b743df..c23883aab5e 100644
--- a/src/components/Backdrop/Backdrop.scss
+++ b/src/components/Backdrop/Backdrop.scss
@@ -4,7 +4,7 @@ $entry-iterations: 1;
 
 .Backdrop {
   position: fixed;
-  z-index: z-index(backdrop, $fixed-element-stacking-order);
+  z-index: var(--p-z-backdrop);
   top: 0;
   right: 0;
   bottom: 0;
@@ -21,7 +21,7 @@ $entry-iterations: 1;
 }
 
 .belowNavigation {
-  z-index: z-index(nav-backdrop, $fixed-element-stacking-order);
+  z-index: var(--p-z-nav-backdrop);
 }
 
 @keyframes fade-in {
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 9195a2164fd..7a2bfa7b9bf 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -11,12 +11,9 @@ $spinner-size: rem(20px);
 $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent,
   inset 0 1px 1px 0 rgba(22, 29, 37, 0.05), inset 0 0 3px 0;
 
-$stacking-order: (
-  segment: 10,
-  focused: 20,
-);
-
 .Button {
+  --pc-segment: 10;
+  --pc-focused: 20;
   @include button-base;
 
   &.disabled {
@@ -24,7 +21,7 @@ $stacking-order: (
   }
 
   &.connectedDisclosure {
-    z-index: z-index(segment, $stacking-order);
+    z-index: var(--pc-segment);
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 
@@ -34,7 +31,7 @@ $stacking-order: (
     }
 
     &:focus {
-      z-index: z-index(focused, $stacking-order);
+      z-index: var(--pc-focused);
     }
   }
 }
@@ -480,7 +477,7 @@ $stacking-order: (
 }
 
 .ConnectedDisclosure {
-  z-index: z-index(segment, $stacking-order);
+  z-index: var(--pc-segment);
   margin-left: -(border-width());
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -496,7 +493,7 @@ $stacking-order: (
 
   &:focus,
   &:active {
-    z-index: z-index(focused, $stacking-order);
+    z-index: var(--pc-focused);
   }
 
   &.primary,
diff --git a/src/components/ButtonGroup/ButtonGroup.scss b/src/components/ButtonGroup/ButtonGroup.scss
index a14ca287257..106650c33c4 100644
--- a/src/components/ButtonGroup/ButtonGroup.scss
+++ b/src/components/ButtonGroup/ButtonGroup.scss
@@ -1,34 +1,31 @@
 @import '../../styles/common';
 
-$stacking-order: (
-  item: 10,
-  focused: 20,
-);
-
 .ButtonGroup {
-  --p-plain-horizontal-spacing: var(--p-space-2);
-  --p-item-spacing: var(--p-space-2);
+  --pc-item: 10;
+  --pc-focused: 20;
+  --pc-plain-horizontal-spacing: var(--p-space-2);
+  --pc-item-spacing: var(--p-space-2);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: calc(-1 * var(--p-item-spacing));
-  margin-left: calc(-1 * var(--p-item-spacing));
+  margin-top: calc(-1 * var(--pc-item-spacing));
+  margin-left: calc(-1 * var(--pc-item-spacing));
 }
 
 .Item {
-  margin-top: var(--p-item-spacing);
-  margin-left: var(--p-item-spacing);
+  margin-top: var(--pc-item-spacing);
+  margin-left: var(--pc-item-spacing);
 }
 
 .Item-plain {
   &:not(:first-child) {
     margin-left: calc(
-      var(--p-item-spacing) + var(--p-plain-horizontal-spacing)
+      var(--pc-item-spacing) + var(--pc-plain-horizontal-spacing)
     );
   }
 
   &:not(:last-child) {
-    margin-right: var(--p-plain-horizontal-spacing);
+    margin-right: var(--pc-plain-horizontal-spacing);
   }
 }
 
@@ -40,7 +37,7 @@ $stacking-order: (
 
   .Item {
     position: relative;
-    z-index: z-index(item, $stacking-order);
+    z-index: var(--pc-item);
     margin-top: 0;
     margin-left: 0;
 
@@ -50,7 +47,7 @@ $stacking-order: (
   }
 
   .Item-focused {
-    z-index: z-index(focused, $stacking-order);
+    z-index: var(--pc-focused);
   }
 }
 
diff --git a/src/components/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss
index ec6458ab5ba..907b24f3329 100644
--- a/src/components/ColorPicker/ColorPicker.scss
+++ b/src/components/ColorPicker/ColorPicker.scss
@@ -4,12 +4,6 @@ $picker-size: rem(160px);
 $dragger-size: rem(18px);
 $inner-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.5);
 
-$stacking-order: (
-  color: 10,
-  adjustments: 20,
-  dragger: 30,
-);
-
 @mixin checkers {
   background: repeating-conic-gradient(
       var(--p-surface) 0% 25%,
@@ -19,6 +13,9 @@ $stacking-order: (
 }
 
 .ColorPicker {
+  --pc-color: 10;
+  --pc-adjustments: 20;
+  --pc-dragger: 30;
   user-select: none;
   display: flex;
 }
@@ -55,7 +52,7 @@ $stacking-order: (
   &::before {
     content: '';
     position: absolute;
-    z-index: z-index(adjustments, $stacking-order);
+    z-index: var(--pc-adjustments);
     top: 0;
     left: 0;
     display: block;
@@ -76,7 +73,7 @@ $stacking-order: (
 
 .Dragger {
   position: relative;
-  z-index: z-index(dragger, $stacking-order);
+  z-index: var(--pc-dragger);
   bottom: 0.5 * $dragger-size;
   transform: none;
   height: $dragger-size;
@@ -124,7 +121,7 @@ $huepicker-bottom-padding-start: $picker-size - $dragger-size;
 
 .ColorLayer {
   position: absolute;
-  z-index: z-index(color, $stacking-order);
+  z-index: var(--pc-color);
   top: 0;
   left: 0;
   height: 100%;
diff --git a/src/components/Connected/Connected.scss b/src/components/Connected/Connected.scss
index 3a575d30b3e..6df6258f589 100644
--- a/src/components/Connected/Connected.scss
+++ b/src/components/Connected/Connected.scss
@@ -1,19 +1,16 @@
 @import '../../styles/common';
 
-$stacking-order: (
-  item: 10,
-  primary: 20,
-  focused: 30,
-);
-
 .Connected {
+  --pc-item: 10;
+  --pc-primary: 20;
+  --pc-focused: 30;
   position: relative;
   display: flex;
 }
 
 .Item {
   position: relative;
-  z-index: z-index(item, $stacking-order);
+  z-index: var(--pc-item);
   flex: 0 0 auto;
 
   &:not(:first-child) {
@@ -26,12 +23,12 @@ $stacking-order: (
 // TextField.scss has a dependency due to this override.
 // stylelint-disable declaration-no-important
 .Item-primary {
-  z-index: z-index(primary, $stacking-order);
+  z-index: var(--pc-primary);
   flex: 1 1 auto;
 }
 
 // stylelint-enable declaration-no-important
 
 .Item-focused {
-  z-index: z-index(focused, $stacking-order);
+  z-index: var(--pc-focused);
 }
diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx
index f32e5350fd9..d8b54c39765 100644
--- a/src/components/CustomProperties/tests/CustomProperties.test.tsx
+++ b/src/components/CustomProperties/tests/CustomProperties.test.tsx
@@ -41,6 +41,7 @@ const mockTokens: Tokens = {
   legacyTokens: {},
   spacing: {},
   typography: {},
+  zIndex: {},
 };
 
 const expectedCustomProperties =
diff --git a/src/components/DropZone/DropZone.scss b/src/components/DropZone/DropZone.scss
index a3f42d29874..fcc47f62a43 100755
--- a/src/components/DropZone/DropZone.scss
+++ b/src/components/DropZone/DropZone.scss
@@ -6,11 +6,6 @@ $dropzone-min-height-large: rem(100px);
 $dropzone-min-height-medium: rem(100px);
 $dropzone-min-height-small: rem(50px);
 
-$dropzone-stacking-order: (
-  outline: 29,
-  overlay: 30,
-);
-
 @mixin reset-after {
   top: 0;
   left: 0;
@@ -28,6 +23,8 @@ $dropzone-stacking-order: (
 }
 
 .DropZone {
+  --pc-outline: 29;
+  --pc-overlay: 30;
   position: relative;
   display: flex;
   justify-content: center;
@@ -37,7 +34,7 @@ $dropzone-stacking-order: (
   &::after {
     content: '';
     position: absolute;
-    z-index: z-index(outline, $dropzone-stacking-order);
+    z-index: var(--pc-outline);
     top: 0;
     right: 0;
     bottom: 0;
@@ -131,7 +128,7 @@ $dropzone-stacking-order: (
 .Overlay {
   @include set-border-radius;
   position: absolute;
-  z-index: z-index(overlay, $dropzone-stacking-order);
+  z-index: var(--pc-overlay);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/src/components/Filters/Filters.scss b/src/components/Filters/Filters.scss
index e32a9d4ef1a..e9340a6a897 100644
--- a/src/components/Filters/Filters.scss
+++ b/src/components/Filters/Filters.scss
@@ -199,7 +199,7 @@ $list-filters-footer-height: rem(70px);
 
 .Backdrop {
   position: fixed;
-  z-index: z-index(backdrop, $fixed-element-stacking-order);
+  z-index: var(--p-z-backdrop);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss b/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss
index 6ac1220c7a2..d7890bc55f6 100644
--- a/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss
+++ b/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss
@@ -1,23 +1,35 @@
 @import '../../../../styles/common';
-
 // stylelint-disable selector-max-class
 // stylelint-disable selector-max-combinators
 // stylelint-disable selector-max-specificity
 // stylelint-disable selector-max-compound-selectors
 // stylelint-disable selector-max-type
-// 🐦🐀
-$stacking-order: (
-  item: 10,
-  focused: 20,
-);
+.ConnectedFilterControl {
+  --pc-item: 10;
+  --pc-focused: 20;
+  display: flex;
+  flex-grow: 1;
+
+  .CenterContainer {
+    flex: 1 1 auto;
+    min-width: rem(100px);
+  }
+
+  &.right {
+    .CenterContainer * {
+      border-top-right-radius: var(--p-border-radius-base);
+      border-bottom-right-radius: var(--p-border-radius-base);
+    }
+  }
+}
 
 .Item {
   position: relative;
-  z-index: z-index(item, $stacking-order);
+  z-index: var(--pc-item);
 }
 
 .Item-focused {
-  z-index: z-index(focused, $stacking-order);
+  z-index: var(--pc-focused);
 }
 
 .ProxyButtonContainer {
@@ -35,23 +47,6 @@ $stacking-order: (
   }
 }
 
-.ConnectedFilterControl {
-  display: flex;
-  flex-grow: 1;
-
-  .CenterContainer {
-    flex: 1 1 auto;
-    min-width: rem(100px);
-  }
-
-  &.right {
-    .CenterContainer * {
-      border-top-right-radius: var(--p-border-radius-base);
-      border-bottom-right-radius: var(--p-border-radius-base);
-    }
-  }
-}
-
 .CenterContainer + .RightContainer,
 .CenterContainer + .MoreFiltersButtonContainer {
   margin-left: var(--p-space-2);
diff --git a/src/components/Frame/Frame.scss b/src/components/Frame/Frame.scss
index 992c1bc238f..d88fedc42b1 100644
--- a/src/components/Frame/Frame.scss
+++ b/src/components/Frame/Frame.scss
@@ -22,7 +22,7 @@ $skip-vertical-offset: rem(10px);
 .Navigation {
   @include hidden-when-printing;
   position: fixed;
-  z-index: z-index(nav, $fixed-element-stacking-order);
+  z-index: var(--p-z-nav);
   top: 0;
   left: 0;
   display: none;
@@ -121,7 +121,7 @@ $skip-vertical-offset: rem(10px);
 .TopBar {
   @include hidden-when-printing;
   position: fixed;
-  z-index: z-index(top-bar, $fixed-element-stacking-order);
+  z-index: var(--p-z-top-bar);
   top: 0;
   left: 0;
   width: 100%;
@@ -135,7 +135,7 @@ $skip-vertical-offset: rem(10px);
 
 .ContextualSaveBar {
   position: fixed;
-  z-index: z-index(context-bar, $fixed-element-stacking-order);
+  z-index: var(--p-z-context-bar);
   top: 0;
   left: 0;
   width: 100%;
@@ -184,7 +184,7 @@ $skip-vertical-offset: rem(10px);
 
 .GlobalRibbonContainer {
   position: fixed;
-  z-index: z-index(global-ribbon, $fixed-element-stacking-order);
+  z-index: var(--p-z-global-ribbon);
   bottom: 0;
   width: 100%;
 
@@ -206,7 +206,7 @@ $skip-vertical-offset: rem(10px);
 .LoadingBar {
   @include hidden-when-printing;
   position: fixed;
-  z-index: z-index(small-screen-loading-bar, $fixed-element-stacking-order);
+  z-index: var(--p-z-small-screen-loading-bar);
   top: 0;
   right: 0;
   left: 0;
@@ -217,17 +217,14 @@ $skip-vertical-offset: rem(10px);
     }
 
     .hasTopBar & {
-      z-index: var(
-        --p-override-loading-z-index,
-        z-index(loading-bar, $fixed-element-stacking-order)
-      );
+      z-index: var(--p-z-small-screen-loading-bar);
     }
   }
 }
 
 .Skip {
   position: fixed;
-  z-index: z-index(skip-to-content, $fixed-element-stacking-order);
+  z-index: var(--p-z-skip-to-content);
   top: $skip-vertical-offset;
   left: calc(var(--p-space-2) + var(--p-frame-offset));
   opacity: 0;
diff --git a/src/components/Frame/components/ToastManager/ToastManager.scss b/src/components/Frame/components/ToastManager/ToastManager.scss
index 528e0100409..27eea908061 100644
--- a/src/components/Frame/components/ToastManager/ToastManager.scss
+++ b/src/components/Frame/components/ToastManager/ToastManager.scss
@@ -10,7 +10,7 @@
 
 .ToastManager {
   position: fixed;
-  z-index: z-index(toast, $fixed-element-stacking-order);
+  z-index: var(--p-z-toast);
   right: 0;
   left: 0;
   text-align: center;
diff --git a/src/components/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss
index 706756b3b60..0c942e2ce32 100644
--- a/src/components/IndexTable/IndexTable.scss
+++ b/src/components/IndexTable/IndexTable.scss
@@ -1,21 +1,18 @@
 @import '../../styles/common';
 
-$index-table-stacking-order: (
-  cell: 1,
-  sticky-cell: 31,
-  scroll-bar: 35,
-  bulk-actions: 36,
-  loading-panel: 37,
-);
-
 $breakpoint-small: 458px;
 $checkbox-offset-left: rem(14px);
 $checkbox-offset-right: rem(18px);
 $small-checkbox-offset: rem(2px);
 
 .IndexTable {
-  --translate-offset: calc(#{rem(50px)} - var(--p-space-4));
-  --table-header-offset: #{rem(52px)};
+  --pc-translate-offset: calc(#{rem(50px)} - var(--p-space-4));
+  --pc-table-header-offset: #{rem(52px)};
+  --pc-cell: 1;
+  --pc-sticky-cell: 31;
+  --pc-scroll-bar: 35;
+  --pc-bulk-actions: 36;
+  --pc-loading-panel: 37;
   position: relative;
   overflow: hidden;
   border-radius: inherit;
@@ -49,7 +46,7 @@ $loading-panel-height: rem(53px);
 
 .LoadingPanel {
   position: absolute;
-  z-index: z-index(loading-panel, $index-table-stacking-order);
+  z-index: var(-pc-loading-panel);
   top: 0;
   left: 0;
   display: flex;
@@ -220,7 +217,7 @@ $loading-panel-height: rem(53px);
 }
 
 .TableCell {
-  z-index: z-index(cell, $index-table-stacking-order);
+  z-index: var(-pc-cell);
   text-align: left;
   padding: var(--p-space-2) var(--p-space-4);
   white-space: nowrap;
@@ -233,7 +230,7 @@ $loading-panel-height: rem(53px);
 .TableCell-first {
   position: sticky;
   left: 0;
-  z-index: z-index(sticky-cell, $index-table-stacking-order);
+  z-index: var(-pc-sticky-cell);
   padding: 0;
 }
 
@@ -243,7 +240,7 @@ $loading-panel-height: rem(53px);
 
   @include breakpoint-after($breakpoint-small) {
     position: sticky;
-    z-index: z-index(sticky-cell, $index-table-stacking-order);
+    z-index: var(-pc-sticky-cell);
     padding: 0;
   }
 }
@@ -253,7 +250,7 @@ $loading-panel-height: rem(53px);
     left: 0;
     background-color: var(--p-surface);
     position: sticky;
-    z-index: z-index(sticky-cell, $index-table-stacking-order);
+    z-index: var(-pc-sticky-cell);
   }
 
   .statusSuccess {
@@ -293,7 +290,7 @@ $loading-panel-height: rem(53px);
       position: sticky;
       right: 0;
       background-color: var(--p-surface);
-      z-index: z-index(sticky-cell, $index-table-stacking-order);
+      z-index: var(-pc-sticky-cell);
     }
   }
 
@@ -338,7 +335,7 @@ $loading-panel-height: rem(53px);
   left: 0;
   right: 0;
   visibility: hidden;
-  z-index: z-index(loading-panel, $index-table-stacking-order);
+  z-index: var(-pc-loading-panel);
 }
 
 .StickyTableHeader {
@@ -411,7 +408,7 @@ $loading-panel-height: rem(53px);
 .BulkActionsWrapper {
   visibility: visible;
   position: relative;
-  z-index: z-index(bulk-actions, $index-table-stacking-order);
+  z-index: var(-pc-bulk-actions);
   top: 0;
   left: 0;
   right: 0;
@@ -424,7 +421,7 @@ $scroll-bar-border-radius: rem(4px);
 
 .ScrollBarContainer {
   position: sticky;
-  z-index: z-index(scroll-bar, $index-table-stacking-order);
+  z-index: var(-pc-scroll-bar);
   bottom: 0;
   padding: rem(2px);
   border-top: border('divider');
@@ -472,8 +469,8 @@ $scroll-bar-border-radius: rem(4px);
 }
 
 .selectMode {
-  transform: translateY(calc(-1 * var(--table-header-offset)));
-  margin-bottom: calc(-1 * var(--table-header-offset));
+  transform: translateY(calc(-1 * var(--pc-table-header-offset)));
+  margin-bottom: calc(-1 * var(--pc-table-header-offset));
 }
 
 .EmptySearchResultWrapper {
@@ -481,8 +478,8 @@ $scroll-bar-border-radius: rem(4px);
 }
 
 .condensedRow {
-  width: calc(100% + var(--translate-offset));
-  transform: translateX(calc(-1 * var(--translate-offset)));
+  width: calc(100% + var(--pc-translate-offset));
+  transform: translateX(calc(-1 * var(--pc-translate-offset)));
   transition: transform var(--p-ease) var(--p-duration-200);
   display: flex;
   border-top: border('divider');
diff --git a/src/components/MediaCard/MediaCard.scss b/src/components/MediaCard/MediaCard.scss
index 059c1c7038c..f021fa1394f 100644
--- a/src/components/MediaCard/MediaCard.scss
+++ b/src/components/MediaCard/MediaCard.scss
@@ -53,7 +53,7 @@ $portrait-breakpoint: 804px;
 
 .Popover {
   position: absolute;
-  z-index: z-index(overlay);
+  z-index: var(--p-z-overlay);
   top: var(--p-space-4);
   right: var(--p-space-4);
 }
diff --git a/src/components/Modal/components/Dialog/Dialog.scss b/src/components/Modal/components/Dialog/Dialog.scss
index fdb472a9f3a..66638ac598a 100644
--- a/src/components/Modal/components/Dialog/Dialog.scss
+++ b/src/components/Modal/components/Dialog/Dialog.scss
@@ -11,7 +11,7 @@ $dangerous-magic-space-16: rem(64px);
 
 .Container {
   position: fixed;
-  z-index: z-index(modal, $fixed-element-stacking-order);
+  z-index: var(--p-z-modal);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/src/components/PositionedOverlay/PositionedOverlay.scss b/src/components/PositionedOverlay/PositionedOverlay.scss
index 6b070fdfa90..54d2ac99d48 100644
--- a/src/components/PositionedOverlay/PositionedOverlay.scss
+++ b/src/components/PositionedOverlay/PositionedOverlay.scss
@@ -2,7 +2,7 @@
 
 .PositionedOverlay {
   position: absolute;
-  z-index: z-index(overlay);
+  z-index: var(--p-z-overlay);
 }
 
 .fixed {
diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss
index c70322b25cf..5e9193b807d 100644
--- a/src/components/RangeSlider/components/DualThumb/DualThumb.scss
+++ b/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -1,16 +1,13 @@
 @import '../../../../styles/common';
 @import '../../RangeSlider';
 
-$stacking-order: (
-  input: 10,
-  output: 20,
-);
-
 $range-wrapper: rem(28px);
 
 $range-thumb-border-error: rem(2px) solid var(--p-border-critical);
 
 .Wrapper {
+  --pc-input: 10;
+  --pc-output: 20;
   position: relative;
   width: 100%;
   display: flex;
@@ -71,7 +68,7 @@ $range-thumb-border-error: rem(2px) solid var(--p-border-critical);
 .Thumbs {
   @include focus-ring($size: 'wide', $border-width: border-width());
   position: absolute;
-  z-index: z-index('input', $stacking-order);
+  z-index: var(--pc-input);
   padding: 0;
   width: $range-thumb-size;
   height: $range-thumb-size;
@@ -123,7 +120,7 @@ $range-output-spacing: rem(16px);
 
 .Output {
   position: absolute;
-  z-index: z-index('output', $stacking-order);
+  z-index: var(--pc-output);
   bottom: var(--p-range-slider-thumb-size-active);
   opacity: 0;
   visibility: hidden;
diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
index bd681194f2b..ab9518d45d0 100644
--- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
+++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
@@ -1,12 +1,9 @@
 @import '../../../../styles/common';
 @import '../../RangeSlider';
 
-$stacking-order: (
-  input: 10,
-  output: 20,
-);
-
 .SingleThumb {
+  --pc-input: 10;
+  --pc-output: 20;
   display: flex;
   align-items: center;
 
@@ -75,7 +72,7 @@ $stacking-order: (
 
   @include unstyled-input;
   position: relative;
-  z-index: z-index('input', $stacking-order);
+  z-index: var(--pc-input);
   flex: 1 1 auto;
 
   @include range-track-selectors {
@@ -167,7 +164,7 @@ $range-output-spacing: rem(16px);
 
 .Output {
   position: absolute;
-  z-index: z-index('output', $stacking-order);
+  z-index: var(--pc-output);
   bottom: $range-thumb-size;
   left: var(--Polaris-RangeSlider-progress);
   transform: translateX($range-output-translate-x);
diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss
index 71c069ac9e3..7673668cbf3 100644
--- a/src/components/Select/Select.scss
+++ b/src/components/Select/Select.scss
@@ -1,12 +1,9 @@
 @import '../../styles/common';
 
-$stacking-order: (
-  backdrop: 10,
-  content: 20,
-  input: 30,
-);
-
 .Select {
+  --pc-backdrop: 10;
+  --pc-content: 20;
+  --pc-input: 30;
   position: relative;
 
   // IE 11 fix to remove default dropdown arrow
@@ -44,7 +41,7 @@ $stacking-order: (
 .Content {
   @include text-style-input;
   position: relative;
-  z-index: z-index(content, $stacking-order);
+  z-index: var(--pc-content);
   display: flex;
   align-items: center;
   width: 100%;
@@ -83,7 +80,7 @@ $stacking-order: (
   text-rendering: auto;
   top: 0;
   left: 0;
-  z-index: z-index(input, $stacking-order);
+  z-index: var(--pc-input);
   width: 100%;
   height: 100%;
   margin: 0;
@@ -93,7 +90,7 @@ $stacking-order: (
 }
 
 .Backdrop {
-  z-index: z-index(backdrop, $stacking-order);
+  z-index: var(--pc-backdrop);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/src/components/Sheet/Sheet.scss b/src/components/Sheet/Sheet.scss
index 3b3f5509821..596f2960946 100644
--- a/src/components/Sheet/Sheet.scss
+++ b/src/components/Sheet/Sheet.scss
@@ -26,7 +26,7 @@ $sheet-desktop-width: rem(380px);
 
 .Container {
   position: fixed;
-  z-index: z-index('modal', $fixed-element-stacking-order);
+  z-index: var(--p-z-modal);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss
index 4b972d6f87f..912c91abd77 100644
--- a/src/components/TextField/TextField.scss
+++ b/src/components/TextField/TextField.scss
@@ -6,12 +6,9 @@ $addon-horizontal-spacing: 0.25em;
 $spinner-icon-size: rem(12px);
 $prefix-horizontal-spacing: var(--p-space-2);
 
-$stacking-order: (
-  contents: 20,
-  backdrop: 10,
-);
-
 .TextField {
+  --pc-contents: 20;
+  --pc-backdrop: 10;
   @include text-style-input;
   position: relative;
   display: flex;
@@ -90,7 +87,7 @@ $stacking-order: (
 .Input {
   @include text-style-input;
   position: relative;
-  z-index: z-index(contents, $stacking-order);
+  z-index: var(--pc-contents);
   display: block;
   flex: 1 1 0%;
   width: 100%;
@@ -170,7 +167,7 @@ $stacking-order: (
 .Backdrop {
   @include focus-ring($border-width: border-width());
   position: absolute;
-  z-index: z-index(backdrop, $stacking-order);
+  z-index: var(--pc-backdrop);
   top: 0;
   right: 0;
   bottom: 0;
@@ -185,7 +182,7 @@ $stacking-order: (
 .Prefix,
 .Suffix {
   position: relative;
-  z-index: z-index(contents, $stacking-order);
+  z-index: var(--pc-contents);
   flex: 0 0 auto;
   color: var(--p-text-subdued);
   user-select: none;
@@ -203,7 +200,7 @@ $stacking-order: (
 
 .CharacterCount {
   @include text-emphasis-subdued;
-  z-index: z-index(contents, $stacking-order);
+  z-index: var(--pc-contents);
   margin: 0 $backdrop-horizontal-spacing 0 $addon-horizontal-spacing;
   pointer-events: none;
   text-align: right;
@@ -218,7 +215,7 @@ $stacking-order: (
 .ClearButton {
   @include focus-ring;
   @include unstyled-button;
-  z-index: z-index(contents, $stacking-order);
+  z-index: var(--pc-contents);
   margin: 0 $backdrop-horizontal-spacing 0 $addon-horizontal-spacing;
 
   &:focus:enabled {
@@ -234,7 +231,7 @@ $stacking-order: (
   --p-text-field-spinner-offset-large: calc(
     var(--p-text-field-spinner-offset) + #{border-width()}
   );
-  z-index: z-index(contents, $stacking-order);
+  z-index: var(--pc-contents);
   margin: var(--p-text-field-spinner-offset-large);
   color: var(--p-icon);
   display: flex;
diff --git a/src/components/TopBar/TopBar.scss b/src/components/TopBar/TopBar.scss
index ab9b05409bc..6ec54d49092 100644
--- a/src/components/TopBar/TopBar.scss
+++ b/src/components/TopBar/TopBar.scss
@@ -91,7 +91,7 @@ $context-control-expand-after: 1400px;
 }
 
 .Contents {
-  z-index: z-index(content, $stacking-order);
+  z-index: var(--p-z-content);
   display: flex;
   flex: 1 1 auto;
   align-items: center;
diff --git a/src/components/TopBar/components/Search/Search.scss b/src/components/TopBar/components/Search/Search.scss
index 67f0f1adb94..6a55543641f 100644
--- a/src/components/TopBar/components/Search/Search.scss
+++ b/src/components/TopBar/components/Search/Search.scss
@@ -4,7 +4,7 @@
 .Search {
   position: fixed;
   visibility: hidden;
-  z-index: z-index(nav, $fixed-element-stacking-order);
+  z-index: var(--p-z-nav);
   pointer-events: none;
   top: top-bar-height();
   left: 0;
diff --git a/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss b/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss
index af1d6f324cc..1135967eb5a 100644
--- a/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss
+++ b/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss
@@ -6,7 +6,7 @@
   top: 0;
   left: 0;
   right: 0;
-  z-index: z-index(nav-backdrop, $fixed-element-stacking-order);
+  z-index: var(--p-z-nav-backdrop);
   height: 100%;
 }
 
diff --git a/src/components/TopBar/components/SearchField/SearchField.scss b/src/components/TopBar/components/SearchField/SearchField.scss
index 0d71f873a89..59251cd3c3c 100644
--- a/src/components/TopBar/components/SearchField/SearchField.scss
+++ b/src/components/TopBar/components/SearchField/SearchField.scss
@@ -6,15 +6,12 @@ $input-height: rem(34px);
 $new-input-height: rem(36px);
 $search-icon-width: calc(#{$icon-size} + var(--p-space-4));
 
-$stacking-order: (
-  backdrop: 1,
-  input: 2,
-  icon: 3,
-  action: 3,
-);
-
 .SearchField {
-  z-index: z-index(modal, $fixed-element-stacking-order);
+  --pc-backdrop: 1;
+  --pc-input: 2;
+  --pc-icon: 3;
+  --pc-action: 3;
+  z-index: var(--p-z-modal);
   position: relative;
   display: flex;
   flex: 1 1 auto;
@@ -69,7 +66,7 @@ $stacking-order: (
 
 .Input {
   @include text-style-input;
-  z-index: z-index(input, $stacking-order);
+  z-index: var(--pc-input);
   height: $new-input-height;
   width: 100%;
   padding: 0 0 0 $search-icon-width;
@@ -96,7 +93,7 @@ $stacking-order: (
 .Icon {
   @include recolor-icon(var(--p-icon));
   position: absolute;
-  z-index: z-index(icon, $stacking-order);
+  z-index: var(--pc-icon);
   top: 50%;
   left: var(--p-space-2);
   display: flex;
@@ -113,7 +110,7 @@ $stacking-order: (
   @include recolor-icon(var(--p-icon));
   @include focus-ring($size: 'wide');
   position: relative;
-  z-index: z-index(action, $stacking-order);
+  z-index: var(--pc-action);
   border: none;
   appearance: none;
   background: transparent;
@@ -141,7 +138,7 @@ $stacking-order: (
 .Backdrop {
   @include focus-ring;
   position: absolute;
-  z-index: z-index(backdrop, $stacking-order);
+  z-index: var(--pc-backdrop);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/src/styles/_common.scss b/src/styles/_common.scss
index 435c3e234c6..9ef86230647 100644
--- a/src/styles/_common.scss
+++ b/src/styles/_common.scss
@@ -12,7 +12,6 @@
 @import './foundation/layout';
 @import './foundation/shadows';
 @import './foundation/typography';
-@import './foundation/z-index';
 @import './foundation/focus-ring';
 @import './foundation/accessibility';
 
diff --git a/src/styles/foundation/_z-index.scss b/src/styles/foundation/_z-index.scss
deleted file mode 100644
index dbdcf6bea02..00000000000
--- a/src/styles/foundation/_z-index.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$global-elements: (
-  content: 100,
-  overlay: 400,
-);
-
-// We're matching that here and relatively stacking other fixed components.
-$fixed-element-stacking-order: (
-  global-ribbon: 510,
-  loading-bar: 511,
-  top-bar: 512,
-  context-bar: 513,
-  small-screen-loading-bar: 514,
-  nav-backdrop: 515,
-  nav: 516,
-  skip-to-content: 517,
-  backdrop: 518,
-  modal: 519,
-  toast: 520,
-  dev-ui: 521,
-);
-
-/// Returns the z-index of the specified element.
-/// @param {String} $element - The key for the element.
-/// @param {Map} $context - The map in which to search for the element.
-/// @return {Number} The z-index for the element.
-
-@function z-index($element, $context: $global-elements) {
-  $index: map-get($context, $element);
-
-  @if $index {
-    @return $index;
-  } @else {
-    @error 'z-index `#{$element}` in `#{$context}` not found.';
-  }
-}
diff --git a/src/tokens/_z-index.ts b/src/tokens/_z-index.ts
new file mode 100644
index 00000000000..eca70c6eac8
--- /dev/null
+++ b/src/tokens/_z-index.ts
@@ -0,0 +1,17 @@
+import type {TokenGroup} from './tokens';
+
+export const zIndex: TokenGroup = {
+  'z-content': '100',
+  'z-overlay': '400',
+  'z-global-ribbon': '510',
+  'z-top-bar': '512',
+  'z-context-bar': '513',
+  'z-small-screen-loading-bar': '514',
+  'z-nav-backdrop': '515',
+  'z-nav': '516',
+  'z-skip-to-content': '517',
+  'z-backdrop': '518',
+  'z-modal': '519',
+  'z-toast': '520',
+  'z-devUi': '521',
+};
diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts
index 2d18ce13c78..05b7007655c 100644
--- a/src/tokens/tokens.ts
+++ b/src/tokens/tokens.ts
@@ -3,6 +3,7 @@ import {lightColorScheme, darkColorScheme} from './_color';
 import {motion} from './_motion';
 import {spacing} from './_spacing';
 import {typography} from './_typography';
+import {zIndex} from './_z-index';
 
 /**
  * Values to convert to CSS custom properties.
@@ -47,6 +48,7 @@ export interface Tokens {
   motion: TokenGroup;
   spacing: TokenGroup;
   typography: TokenGroup;
+  zIndex: TokenGroup;
 }
 
 export const tokens: Tokens = {
@@ -55,4 +57,5 @@ export const tokens: Tokens = {
   motion,
   spacing,
   typography,
+  zIndex,
 };