Move z-indexes to tokens

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
 

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 {

src/components/Button/Button.scss

@@ -11,20 +11,17 @@ $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 {
     @include base-button-disabled;
   }
 
   &.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,

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);
   }
 }
 

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%;

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);
 }

src/components/CustomProperties/tests/CustomProperties.test.tsx

@@ -41,6 +41,7 @@ const mockTokens: Tokens = {
   legacyTokens: {},
   spacing: {},
   typography: {},
+  zIndex: {},
 };
 
 const expectedCustomProperties =

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;

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;

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