✨ feat(zindex.scss): Add z-index util classes

dist/cirrus.css

@@ -14436,4 +14436,73 @@ video.video-fullscreen {
   .u-sticky-xl {
     position: sticky !important;
   }
+}
+/*
+  Functions
+  TODO Refactor to different categories
+*/
+/*
+    Converts a given hex value to RGB.
+*/
+/*
+    Generates delimited class name prefix.
+*/
+/*
+    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
+*/
+/* Spacing */
+/* Breakpoints */
+/* Fonts */
+/* Grid Count (Columns + Grid) */
+/* Grid Percents */
+/* Media Queries */
+/* Smaller than the defined pixels are the dimensions for that range */
+/* Variant of mixin that takes in mapping of class name to value */
+/* Spacing */
+/* Breakpoints */
+/* Fonts */
+/* Grid Count (Columns + Grid) */
+/* Grid Percents */
+/* Media Queries */
+/* Smaller than the defined pixels are the dimensions for that range */
+/* Variant of mixin that takes in mapping of class name to value */
+/*
+  Functions
+  TODO Refactor to different categories
+*/
+/*
+    Converts a given hex value to RGB.
+*/
+/*
+    Generates delimited class name prefix.
+*/
+/*
+    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
+*/
+.u-z-0 {
+  z-index: 0 !important;
+}
+
+.u-z-10 {
+  z-index: 10 !important;
+}
+
+.u-z-20 {
+  z-index: 20 !important;
+}
+
+.u-z-30 {
+  z-index: 30 !important;
+}
+
+.u-z-40 {
+  z-index: 40 !important;
+}
+
+.u-z-50 {
+  z-index: 50 !important;
+}
+
+.u-z-auto {
+  z-index: auto !important;
 }

internal/_config.scss

@@ -167,6 +167,15 @@ $default-config: (
         100: 100%,
         auto: auto,
         screen: 100vw,
+    ),
+    z-index: (
+        0: 0,
+        10: 10,
+        20: 20,
+        30: 30,
+        40: 40,
+        50: 50,
+        auto: auto,
     )
 ) !default;
 
@@ -189,4 +198,5 @@ $tab-font-sizes: map.get($default-config, tab-sizes);
 $heights: map.get($default-config, heights);
 $widths: map.get($default-config, widths);
 
-$opacities: map.get($default-config, opacity);
+$opacities: map.get($default-config, opacity);
+$z-indexes: map.get($default-config, z-index);

internal/_flags.scss

@@ -12,4 +12,5 @@ $_VIEWPORT_CLASS_FLAGS: (
     'OPACITY': true,
     'WIDTHS': true,
     'HEIGHTS': true,
+    'ZINDEX': false,
 );