#15: New z-indices.scss file

This will help organize and track the important `z-index` variables

assets/v2/material/material-app-bar.scss

@@ -4,6 +4,8 @@
 // Renders the Material app bar
 // See also: https://material.io/design/components/app-bar.html
 
+@import "z-indices";
+
 
 
 .app-bar,
@@ -13,7 +15,7 @@
     @include flex-justify-space-between();
     @include flex-align-stretch();
 
-    z-index: var(--app-bar-z-index);
+    z-index: var(--z-index-app-bar);
 
     height: var(--app-bar-height-auto);
 

assets/v2/material/material-sidebar-renderer.scss

@@ -8,13 +8,14 @@
 @import "material-sidebar-vars";
 @import "material-structure-vars";
 @import "css-vars";
+@import "z-indices";
 
 
 
 .sidebar {
 
     position: fixed;
-    z-index: var(--sidebar-z-index);
+    z-index: var(--z-index-sidebar);
 
     top: var(--app-bar-height-auto);
     left: calc(-46px - var(--sidebar-default-width));

assets/v2/material/material-structure-vars.scss

@@ -4,7 +4,8 @@
 // Variables defining the structure of a page that uses Material design
 
 
-@import 'material-shadows-vars';
+@import "material-shadows-vars";
+@import "z-indices";
 
 
 // MARK: - Breakpoints
@@ -311,17 +312,6 @@ $app-bar-horizontal-padding: $app-bar-padding-left + $app-bar-padding-right !def
 $app-bar-padding: $app-bar-padding-top $app-bar-padding-right $app-bar-padding-bottom $app-bar-padding-left !default;
 
 
-// MARK: Z Indices
-
-$app-bar-z-index: 4 !default;
-$sidebar-z-index: 16 !default;
-
-@include css-vars((
-    --app-bar-z-index: $app-bar-z-index,
-    --sidebar-z-index: $sidebar-z-index,
-));
-
-
 // MARK: Content
 
 $content-margin-horiz-phone-portrait: 16px !default;
@@ -355,8 +345,6 @@ $content-margin-right-tablet-and-desktop: $content-margin-horiz-tablet-and-deskt
     --app-bar-horizontal-padding: $app-bar-horizontal-padding,
     --app-bar-padding:            $app-bar-padding,
 
-    --app-bar-z-index: $app-bar-z-index,
-
 
     --content-margin-horiz-phone-portrait: $content-margin-horiz-phone-portrait,
     --content-margin-horiz-phone-landscape: $content-margin-horiz-phone-landscape,

assets/v2/structure/z-indices.scss

@@ -0,0 +1,23 @@
+
+// z-indices
+//
+// Keeps track of the important `z-index` variables
+
+
+
+$z-index-base: 0 !default;
+$z-index-tier-offset: 1000 !default;
+$z-index-app-bar-tier-multiplier: 4 !default;
+$z-index-sidebar-tier-multiplier: 16 !default;
+
+
+:root {
+    --z-index-base: $z-index-base;
+    --z-index-tier-offset: $z-index-tier-offset;
+
+    --z-index-app-bar-tier-multiplier: $z-index-app-bar-tier-multiplier;
+    --z-index-app-bar: calc(var(--z-index-base) + (var(--z-index-tier-offset) * var(--z-index-app-bar-tier-multiplier)));
+
+    --z-index-sidebar-tier-multiplier: $z-index-sidebar-tier-multiplier;
+    --z-index-sidebar: calc(var(--z-index-base) + (var(--z-index-tier-offset) * var(--z-index-sidebar-tier-multiplier)));
+}