From 8055c9abcf03e5d2a8bdd574f635e4666ac6064e Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Mon, 29 Nov 2021 14:26:15 -0500
Subject: [PATCH 1/7] Clean up z-indexes

---
 src/components/Backdrop/Backdrop.scss       |  4 +-
 src/components/Button/Button.scss           | 15 ++---
 src/components/ButtonGroup/ButtonGroup.scss | 27 ++++----
 src/components/Filters/Filters.scss         |  2 +-
 src/components/Frame/Frame.scss             | 17 +++---
 src/utilities/theme/tokens.ts               | 68 +++++++++++++++++++++
 6 files changed, 96 insertions(+), 37 deletions(-)
 create mode 100644 src/utilities/theme/tokens.ts

diff --git a/src/components/Backdrop/Backdrop.scss b/src/components/Backdrop/Backdrop.scss
index ce722b743df..06d15bc0bfa 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-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-nav-backdrop);
 }
 
 @keyframes fade-in {
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 9195a2164fd..e7d21695e37 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(--p-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/Filters/Filters.scss b/src/components/Filters/Filters.scss
index e32a9d4ef1a..d0a3084ccdb 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-backdrop);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/src/components/Frame/Frame.scss b/src/components/Frame/Frame.scss
index 992c1bc238f..7bbb004fda1 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-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-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-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-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-small-screen-loading-bar, $fixed-element-stacking-order);
   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-small-screen-loading-bar);
     }
   }
 }
 
 .Skip {
   position: fixed;
-  z-index: z-index(skip-to-content, $fixed-element-stacking-order);
+  z-index: var(--p-skip-to-content);
   top: $skip-vertical-offset;
   left: calc(var(--p-space-2) + var(--p-frame-offset));
   opacity: 0;
diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts
new file mode 100644
index 00000000000..51a668c9979
--- /dev/null
+++ b/src/utilities/theme/tokens.ts
@@ -0,0 +1,68 @@
+export const Tokens = {
+  // Border Radiuses
+  borderRadiusSlim: '0.2rem',
+  borderRadiusBase: '0.4rem',
+  borderRadiusWide: '0.8rem',
+  borderRadiusFull: '50%',
+
+  // Shadows
+  cardShadow:
+    '0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)',
+  popoverShadow:
+    '-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)',
+  modalShadow:
+    '0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)',
+  topBarShadow: '0 2px 2px -1px var(--p-shadow-from-direct-light)',
+  buttonDropShadow: '0 1px 0 rgba(0, 0, 0, 0.05)',
+  buttonInnerShadow: 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)',
+  buttonPressedInnerShadow: 'inset 0 1px 0 rgba(0, 0, 0, 0.15)',
+
+  // Overrides
+  overrideNone: 'none',
+  overrideTransparent: 'transparent',
+  overrideOne: '1',
+  overrideVisible: 'visible',
+  overrideZero: '0',
+  buttonFontWeight: '500',
+  nonNullContent: "''",
+  choiceSize: '2rem',
+  iconSize: '1rem',
+  choiceMargin: '0.1rem',
+  controlBorderWidth: '0.2rem',
+  bannerBorderDefault: buildBannerBorder('--p-border-neutral-subdued'),
+  bannerBorderSuccess: buildBannerBorder('--p-border-success-subdued'),
+  bannerBorderHighlight: buildBannerBorder('--p-border-highlight-subdued'),
+  bannerBorderWarning: buildBannerBorder('--p-border-warning-subdued'),
+  bannerBorderCritical: buildBannerBorder('--p-border-critical-subdued'),
+  badgeMixBlendMode: 'luminosity',
+  thinBorderSubdued: '0.1rem solid var(--p-border-subdued)',
+  textFieldSpinnerOffset: '0.2rem',
+  textFieldFocusRingOffset: '-0.4rem',
+  textFieldFocusRingBorderRadius: '0.7rem',
+  buttonGroupItemSpacing: '-0.1rem',
+  duration100: '100ms',
+  duration150: '150ms',
+  easeIn: 'cubic-bezier(0.5, 0.1, 1, 1)',
+  ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)',
+  rangeSliderThumbSizeBase: '1.6rem',
+  rangeSliderThumbSizeActive: '2.4rem',
+  rangeSliderThumbScale: '1.5',
+  badgeFontWeight: '400',
+
+  // Global z-index
+  globalRibbon: 510,
+  toBbar: 512,
+  contextBar: 513,
+  smallScreenLoadingBar: 514,
+  navBackdrop: 515,
+  nav: 516,
+  skipToContent: 517,
+  backdrop: 518,
+  modal: 519,
+  toast: 520,
+  devUi: 521,
+};
+
+function buildBannerBorder(cssVar: string) {
+  return `inset 0 0.1rem 0 0 var(${cssVar}), inset 0 0 0 0.1rem var(${cssVar})`;
+}

From 7df31015499448a7ca3d689597a20b0b9a378639 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Tue, 30 Nov 2021 10:35:32 -0500
Subject: [PATCH 2/7] Remove z-index()

---
 UNRELEASED-v8.md                              |  1 +
 src/components/Backdrop/Backdrop.scss         |  4 +-
 src/components/Button/Button.scss             |  2 +-
 src/components/ColorPicker/ColorPicker.scss   | 15 +++----
 src/components/Connected/Connected.scss       | 15 +++----
 .../tests/CustomProperties.test.tsx           |  1 +
 src/components/DropZone/DropZone.scss         | 11 ++---
 src/components/Filters/Filters.scss           |  2 +-
 .../ConnectedFilterControl.scss               | 45 +++++++++----------
 src/components/Frame/Frame.scss               | 14 +++---
 .../components/ToastManager/ToastManager.scss |  2 +-
 src/components/IndexTable/IndexTable.scss     | 43 +++++++++---------
 src/components/MediaCard/MediaCard.scss       |  2 +-
 .../Modal/components/Dialog/Dialog.scss       |  2 +-
 .../PositionedOverlay/PositionedOverlay.scss  |  2 +-
 .../components/DualThumb/DualThumb.scss       | 11 ++---
 .../components/SingleThumb/SingleThumb.scss   | 11 ++---
 src/components/Select/Select.scss             | 15 +++----
 src/components/Sheet/Sheet.scss               |  2 +-
 src/components/TextField/TextField.scss       | 19 ++++----
 src/components/TopBar/TopBar.scss             |  2 +-
 .../TopBar/components/Search/Search.scss      |  2 +-
 .../SearchDismissOverlay.scss                 |  2 +-
 .../components/SearchField/SearchField.scss   | 21 ++++-----
 src/styles/_common.scss                       |  1 -
 src/styles/foundation/_z-index.scss           | 35 ---------------
 src/tokens/_z-index.ts                        | 17 +++++++
 src/tokens/tokens.ts                          |  3 ++
 src/utilities/theme/tokens.ts                 | 13 ------
 29 files changed, 128 insertions(+), 187 deletions(-)
 delete mode 100644 src/styles/foundation/_z-index.scss
 create mode 100644 src/tokens/_z-index.ts

diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md
index 7f112ab3624..690d89b57dd 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 `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 06d15bc0bfa..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: var(--p-backdrop);
+  z-index: var(--p-z-backdrop);
   top: 0;
   right: 0;
   bottom: 0;
@@ -21,7 +21,7 @@ $entry-iterations: 1;
 }
 
 .belowNavigation {
-  z-index: var(--p-nav-backdrop);
+  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 e7d21695e37..7a2bfa7b9bf 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -21,7 +21,7 @@ $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent,
   }
 
   &.connectedDisclosure {
-    z-index: var(--p-segment);
+    z-index: var(--pc-segment);
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 
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 d0a3084ccdb..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: var(--p-backdrop);
+  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 7bbb004fda1..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: var(--p-nav);
+  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: var(--p-top-bar);
+  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: var(--p-context-bar);
+  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: var(--p-global-ribbon);
+  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: var(--p-small-screen-loading-bar, $fixed-element-stacking-order);
+  z-index: var(--p-z-small-screen-loading-bar);
   top: 0;
   right: 0;
   left: 0;
@@ -217,14 +217,14 @@ $skip-vertical-offset: rem(10px);
     }
 
     .hasTopBar & {
-      z-index: var(--p-small-screen-loading-bar);
+      z-index: var(--p-z-small-screen-loading-bar);
     }
   }
 }
 
 .Skip {
   position: fixed;
-  z-index: var(--p-skip-to-content);
+  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..63a1ec5099a 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(--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..ec461faa4f1 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(--pc-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..f17cd591284
--- /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-globalRibbon': '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,
 };
diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts
index 51a668c9979..27b315a4155 100644
--- a/src/utilities/theme/tokens.ts
+++ b/src/utilities/theme/tokens.ts
@@ -48,19 +48,6 @@ export const Tokens = {
   rangeSliderThumbSizeActive: '2.4rem',
   rangeSliderThumbScale: '1.5',
   badgeFontWeight: '400',
-
-  // Global z-index
-  globalRibbon: 510,
-  toBbar: 512,
-  contextBar: 513,
-  smallScreenLoadingBar: 514,
-  navBackdrop: 515,
-  nav: 516,
-  skipToContent: 517,
-  backdrop: 518,
-  modal: 519,
-  toast: 520,
-  devUi: 521,
 };
 
 function buildBannerBorder(cssVar: string) {

From 43542da2685593800905458870f45d7434dd4b12 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Tue, 30 Nov 2021 12:48:55 -0500
Subject: [PATCH 3/7] Update UNRELEASED-v8.md

---
 UNRELEASED-v8.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md
index 690d89b57dd..47374033e3e 100644
--- a/UNRELEASED-v8.md
+++ b/UNRELEASED-v8.md
@@ -22,7 +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 `z-index()` scss function ([#4753](https://github.com/Shopify/polaris-react/pull/4753))
+- Removed the `z-index()` scss function ([#4753](https://github.com/Shopify/polaris-react/pull/4753))
 
 ### New components
 

From c4748638c8430f19f43c42e199f635d52077f53b Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Tue, 30 Nov 2021 12:51:28 -0500
Subject: [PATCH 4/7] Update
 src/components/Frame/components/ToastManager/ToastManager.scss

---
 src/components/Frame/components/ToastManager/ToastManager.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Frame/components/ToastManager/ToastManager.scss b/src/components/Frame/components/ToastManager/ToastManager.scss
index 63a1ec5099a..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: var(--z-toast);
+  z-index: var(--p-z-toast);
   right: 0;
   left: 0;
   text-align: center;

From 6dd7b436cda9c717b10474477f7dba9824e83671 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Tue, 30 Nov 2021 12:54:08 -0500
Subject: [PATCH 5/7] Update
 src/components/TopBar/components/SearchField/SearchField.scss

---
 src/components/TopBar/components/SearchField/SearchField.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TopBar/components/SearchField/SearchField.scss b/src/components/TopBar/components/SearchField/SearchField.scss
index ec461faa4f1..59251cd3c3c 100644
--- a/src/components/TopBar/components/SearchField/SearchField.scss
+++ b/src/components/TopBar/components/SearchField/SearchField.scss
@@ -11,7 +11,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-4));
   --pc-input: 2;
   --pc-icon: 3;
   --pc-action: 3;
-  z-index: var(--pc-modal);
+  z-index: var(--p-z-modal);
   position: relative;
   display: flex;
   flex: 1 1 auto;

From 3e7553fc4056444ca6350edb2647830db1e90c8f Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Tue, 30 Nov 2021 12:54:44 -0500
Subject: [PATCH 6/7] Update src/tokens/_z-index.ts

---
 src/tokens/_z-index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tokens/_z-index.ts b/src/tokens/_z-index.ts
index f17cd591284..eca70c6eac8 100644
--- a/src/tokens/_z-index.ts
+++ b/src/tokens/_z-index.ts
@@ -3,7 +3,7 @@ import type {TokenGroup} from './tokens';
 export const zIndex: TokenGroup = {
   'z-content': '100',
   'z-overlay': '400',
-  'z-globalRibbon': '510',
+  'z-global-ribbon': '510',
   'z-top-bar': '512',
   'z-context-bar': '513',
   'z-small-screen-loading-bar': '514',

From 27562c67b7d29227c2a72d39f6b86e7c72327fa4 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Tue, 30 Nov 2021 12:58:36 -0500
Subject: [PATCH 7/7] Remove legacy tokens

---
 src/utilities/theme/tokens.ts | 55 -----------------------------------
 1 file changed, 55 deletions(-)
 delete mode 100644 src/utilities/theme/tokens.ts

diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts
deleted file mode 100644
index 27b315a4155..00000000000
--- a/src/utilities/theme/tokens.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-export const Tokens = {
-  // Border Radiuses
-  borderRadiusSlim: '0.2rem',
-  borderRadiusBase: '0.4rem',
-  borderRadiusWide: '0.8rem',
-  borderRadiusFull: '50%',
-
-  // Shadows
-  cardShadow:
-    '0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)',
-  popoverShadow:
-    '-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)',
-  modalShadow:
-    '0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)',
-  topBarShadow: '0 2px 2px -1px var(--p-shadow-from-direct-light)',
-  buttonDropShadow: '0 1px 0 rgba(0, 0, 0, 0.05)',
-  buttonInnerShadow: 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)',
-  buttonPressedInnerShadow: 'inset 0 1px 0 rgba(0, 0, 0, 0.15)',
-
-  // Overrides
-  overrideNone: 'none',
-  overrideTransparent: 'transparent',
-  overrideOne: '1',
-  overrideVisible: 'visible',
-  overrideZero: '0',
-  buttonFontWeight: '500',
-  nonNullContent: "''",
-  choiceSize: '2rem',
-  iconSize: '1rem',
-  choiceMargin: '0.1rem',
-  controlBorderWidth: '0.2rem',
-  bannerBorderDefault: buildBannerBorder('--p-border-neutral-subdued'),
-  bannerBorderSuccess: buildBannerBorder('--p-border-success-subdued'),
-  bannerBorderHighlight: buildBannerBorder('--p-border-highlight-subdued'),
-  bannerBorderWarning: buildBannerBorder('--p-border-warning-subdued'),
-  bannerBorderCritical: buildBannerBorder('--p-border-critical-subdued'),
-  badgeMixBlendMode: 'luminosity',
-  thinBorderSubdued: '0.1rem solid var(--p-border-subdued)',
-  textFieldSpinnerOffset: '0.2rem',
-  textFieldFocusRingOffset: '-0.4rem',
-  textFieldFocusRingBorderRadius: '0.7rem',
-  buttonGroupItemSpacing: '-0.1rem',
-  duration100: '100ms',
-  duration150: '150ms',
-  easeIn: 'cubic-bezier(0.5, 0.1, 1, 1)',
-  ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)',
-  rangeSliderThumbSizeBase: '1.6rem',
-  rangeSliderThumbSizeActive: '2.4rem',
-  rangeSliderThumbScale: '1.5',
-  badgeFontWeight: '400',
-};
-
-function buildBannerBorder(cssVar: string) {
-  return `inset 0 0.1rem 0 0 var(${cssVar}), inset 0 0 0 0.1rem var(${cssVar})`;
-}