Replace Less z-index (@zi-*) variables with CSS variables (#895)

dancormier · web-flow · commit 004305069ced · 2022-03-31T13:43:40.000-04:00
* Replace Less `@zi-*` vars with CSS vars * Hardcode zi-modals-background value Addresses #895
diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less
@@ -406,7 +406,7 @@
     &:after {
         content: "";
         position: absolute;
-        z-index: @zi-active;
+        z-index: var(--zi-active);
         top: calc(50% - 2px);
         right: @su12 - @su2;
         border-style: solid;
diff --git a/lib/css/atomic/_stacks-misc.less b/lib/css/atomic/_stacks-misc.less
@@ -250,18 +250,18 @@
 //  ============================================================================
 //  $  Z-INDEX
 //  ----------------------------------------------------------------------------
-.z-hide { z-index: @zi-hide !important; }
-.z-base { z-index: @zi-base !important; }
-.z-active { z-index: @zi-active !important; }
-.z-selected { z-index: @zi-selected !important; }
-.z-dropdown { z-index: @zi-dropdown !important; }
-.z-popover { z-index: @zi-popovers !important; }
-.z-tooltip { z-index: @zi-tooltips !important; }
-.z-banner { z-index: @zi-banners !important; }
-.z-nav { z-index: @zi-navigation !important; }
-.z-nav-fixed { z-index: @zi-navigation-fixed !important; }
-.z-modal { z-index: @zi-modals !important; }
-.z-modal-bg { z-index: @zi-modals-background !important; }
+.z-hide { z-index: var(--zi-hide) !important; }
+.z-base { z-index: var(--zi-base) !important; }
+.z-active { z-index: var(--zi-active) !important; }
+.z-selected { z-index: var(--zi-selected) !important; }
+.z-dropdown { z-index: var(--zi-dropdown) !important; }
+.z-popover { z-index: var(--zi-popovers) !important; }
+.z-tooltip { z-index: var(--zi-tooltips) !important; }
+.z-banner { z-index: var(--zi-banners) !important; }
+.z-nav { z-index: var(--zi-navigation) !important; }
+.z-nav-fixed { z-index: var(--zi-navigation-fixed) !important; }
+.z-modal { z-index: var(--zi-modals) !important; }
+.z-modal-bg { z-index: var(--zi-modals-background) !important; }
 
 //  ============================================================================
 //  $  OUTLINE
diff --git a/lib/css/components/_stacks-banners.less b/lib/css/components/_stacks-banners.less
@@ -29,7 +29,7 @@
 //  ----------------------------------------------------------------------------
 .s-banner {
     position: fixed;
-    z-index: @zi-navigation-fixed - 1; // Tuck below topbar
+    z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
     top: 0;
     right: 0;
     left: 0;
@@ -59,7 +59,7 @@
 
     //  If you want to put the banner above the topbar
     &.is-pinned {
-        z-index: @zi-navigation-fixed + 1;
+        z-index: calc(var(--zi-navigation-fixed) + 1);
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
diff --git a/lib/css/components/_stacks-button-groups.less b/lib/css/components/_stacks-button-groups.less
@@ -45,7 +45,7 @@
 
         // When the button is active or selected, it should pop above its siblings
         &.is-selected {
-            z-index: @zi-selected;
+            z-index: var(--zi-selected);
         }
 
         .highcontrast-mode({
@@ -60,7 +60,7 @@
         });
 
         &:active {
-            z-index: @zi-active;
+            z-index: var(--zi-active);
         }
 
         #stacks-internals #screen-sm({
diff --git a/lib/css/components/_stacks-buttons.less b/lib/css/components/_stacks-buttons.less
@@ -95,7 +95,7 @@
             &:after {
                 content: "";
                 position: absolute;
-                z-index: @zi-active;
+                z-index: var(--zi-active);
                 top: calc(50% - 2px);
                 right: 0.8em;
                 border-style: solid;
diff --git a/lib/css/components/_stacks-inputs.less b/lib/css/components/_stacks-inputs.less
@@ -265,7 +265,7 @@ fieldset {
     &:after {
         content: "";
         position: absolute;
-        z-index: @zi-selected;
+        z-index: var(--zi-selected);
         right: 13px;
         border-color: currentColor transparent;
         border-style: solid;
diff --git a/lib/css/components/_stacks-links.less b/lib/css/components/_stacks-links.less
@@ -102,7 +102,7 @@ a,
         &:after {
             content: "";
             position: absolute;
-            z-index: @zi-active;
+            z-index: var(--zi-active);
             top: calc(50% - 2px);
             right: 0;
             border-style: solid;
diff --git a/lib/css/components/_stacks-modals.less b/lib/css/components/_stacks-modals.less
@@ -17,7 +17,7 @@
     display: flex;
     visibility: hidden;
     position: fixed;
-    z-index: @zi-hide; // Make sure it's also below everything so we can't interact with it.
+    z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
 
     // This fills the entire viewport without having to worry about size.
     top: 0;
@@ -35,7 +35,7 @@
     &[aria-hidden="false"],
     &[aria-hidden="false"] .s-modal--dialog {
         visibility: visible;
-        z-index: @zi-modals;
+        z-index: var(--zi-modals);
         opacity: 1;
         transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
         transition: opacity 100ms @te-smooth 10ms, z-index 0s 0s, visibility 0s 0s, transform 100ms @te-smooth 10ms, transform 100ms @te-smooth 10ms; // Transition in
@@ -45,7 +45,7 @@
 .s-modal--dialog {
     overflow-y: auto;
     visibility: hidden;
-    z-index: @zi-hide; // Make sure it's also below everything so we can't interact with it.
+    z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
     max-width: 600px;
     max-height: 100%;
     padding: @su24;
diff --git a/lib/css/components/_stacks-navigation.less b/lib/css/components/_stacks-navigation.less
@@ -72,7 +72,7 @@
             &:after {
                 content: "";
                 position: absolute;
-                z-index: @zi-active;
+                z-index: var(--zi-active);
                 top: calc(50% - 2px);
                 right: 0.9em;
                 border-style: solid;
diff --git a/lib/css/components/_stacks-notices.less b/lib/css/components/_stacks-notices.less
@@ -215,7 +215,7 @@
     left: @su8;
     right: @su8;
     opacity: 0;
-    z-index: @zi-modals + 1; // Toasts should appear above modals
+    z-index: calc(var(--zi-modals) + 1); // Toasts should appear above modals
     transform: translate3d(0, -66px, 0);
     transition: transform 100ms @te-smooth-slow 0s, opacity 60ms @te-smooth-slow 0ms, visibility 0s 150ms;
     pointer-events: none;
diff --git a/lib/css/components/_stacks-popovers.less b/lib/css/components/_stacks-popovers.less
@@ -20,7 +20,7 @@
     position: absolute;
     max-width: 24rem;
     padding: @su12;
-    z-index: @zi-popovers;
+    z-index: var(--zi-popovers);
     border-radius: var(--br-md);
     border: 1px solid var(--bc-medium);
     background-color: var(--white);
diff --git a/lib/css/components/_stacks-progress-bars.less b/lib/css/components/_stacks-progress-bars.less
@@ -49,7 +49,7 @@
     font-size: @fs-caption;
     line-height: @lh-xs;
     color: var(--fc-dark);
-    z-index: @zi-base + 2;
+    z-index: calc(var(--zi-base) + 2);
 }
 
 //  ===========================================================================
@@ -210,7 +210,7 @@
         padding: @su12 @su6 0 @su6;
         text-align: center;
         color: var(--black-300);
-        z-index: @zi-base;
+        z-index: var(--zi-base);
     }
 
     .s-progress--stop {
@@ -222,7 +222,7 @@
         border-radius: 100%;
         width: @su24;
         height: @su24;
-        z-index: @zi-selected;
+        z-index: var(--zi-selected);
         color: @white;
 
         .highcontrast-mode({
@@ -235,7 +235,7 @@
         top: 9px;
         height: @su6;
         background: var(--black-300);
-        z-index: @zi-base;
+        z-index: var(--zi-base);
         border-radius: 0;
 
         &.s-progress--bar__left {
diff --git a/lib/css/components/_stacks-topbar.less b/lib/css/components/_stacks-topbar.less
@@ -13,7 +13,7 @@
     min-width: auto;
     box-shadow: var(--bs-sm);
     width: 100%;
-    z-index: @zi-navigation-fixed;
+    z-index: var(--zi-navigation-fixed);
     background-color: var(--theme-topbar-background-color);
     height: var(--theme-topbar-height);
     display: flex;
@@ -378,7 +378,7 @@
 
         &:before,
         &:after {
-            z-index: @zi-active; // Make sure our focus ring is above the search input
+            z-index: var(--zi-active); // Make sure our focus ring is above the search input
         }
     }
 
@@ -394,7 +394,7 @@
         &:focus {
             border-color: var(--theme-topbar-search-border-focus);
             box-shadow: var(--theme-topbar-search-shadow-focus);
-            z-index: @zi-selected;
+            z-index: var(--zi-selected);
         }
     }
 
diff --git a/lib/css/components/_stacks-uploader.less b/lib/css/components/_stacks-uploader.less
@@ -205,6 +205,6 @@
         position: absolute;
         right: @su8;
         top: @su8;
-        z-index: @zi-active;
+        z-index: var(--zi-active);
     }
 }
diff --git a/lib/css/exports/_stacks-constants-helpers.less b/lib/css/exports/_stacks-constants-helpers.less
@@ -21,18 +21,20 @@
 //      Used for a bird's eye view of components dependent on the z-axis.
 //      Try to avoid customizing these.
 //  ----------------------------------------------------------------------------
-@zi-hide:               -1;     //  Hide something all the elements
-@zi-base:               0;      //  Reset to 0
-@zi-selected:           25;     //  Pop above siblings
-@zi-active:             30;     //  Pop above selected siblings
-@zi-dropdown:           1000;   //  Dropdowns
-@zi-popovers:           2000;   //  Popovers, Popups, Autocompletes
-@zi-tooltips:           3000;   //  Tooltips
-@zi-banners:            4000;   //  Banners
-@zi-navigation:         5000;   //  Navigation Bars
-@zi-navigation-fixed:   5050;   //  Fixed navigation bars
-@zi-modals:             9000;   //  Modals
-@zi-modals-background:  @zi-modals - 50;
+body {
+    --zi-hide:               -1;     //  Hide something all the elements
+    --zi-base:               0;      //  Reset to 0
+    --zi-selected:           25;     //  Pop above siblings
+    --zi-active:             30;     //  Pop above selected siblings
+    --zi-dropdown:           1000;   //  Dropdowns
+    --zi-popovers:           2000;   //  Popovers, Popups, Autocompletes
+    --zi-tooltips:           3000;   //  Tooltips
+    --zi-banners:            4000;   //  Banners
+    --zi-navigation:         5000;   //  Navigation Bars
+    --zi-navigation-fixed:   5050;   //  Fixed navigation bars
+    --zi-modals-background:  8050;   //  Modals background
+    --zi-modals:             9000;   //  Modals
+}
 
 //  ============================================================================
 //  $   RESPONSIVE BREAKPOINTS

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@`
`45`	`45`
`46`	`46`	`// When the button is active or selected, it should pop above its siblings`
`47`	`47`	`&.is-selected {`
`48`		`- z-index: @zi-selected;`
	`48`	`+ z-index: var(--zi-selected);`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`.highcontrast-mode({`
`@@ -60,7 +60,7 @@`
`60`	`60`	`});`
`61`	`61`
`62`	`62`	`&:active {`
`63`		`- z-index: @zi-active;`
	`63`	`+ z-index: var(--zi-active);`
`64`	`64`	`}`
`65`	`65`
`66`	`66`	`#stacks-internals #screen-sm({`