Remove z-index()

Author: kyledurand

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 {

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;
 

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: var(--p-backdrop);
+  z-index: var(--p-z-backdrop);
   top: 0;
   right: 0;
   bottom: 0;

src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss

@@ -1,23 +1,31 @@
 @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 +43,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);
@@ -110,8 +101,3 @@ $stacking-order: (
 .AuxiliaryContainer {
   flex-grow: 0;
 }
-// stylelint-enable selector-max-specificity
-// stylelint-enable selector-max-combinators
-// stylelint-enable selector-max-class
-// stylelint-enable selector-max-type
-// stylelint-enable selector-max-compound-selectors

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;

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;