Increased the granularity of the z-index range and improved the order…

… implementation

build/index.css

@@ -796,6 +796,10 @@ html {
 	--spacing: 8rem;
 }
 
+.order-0 {
+	order: 0;
+}
+
 .order-1 {
 	order: 1;
 }
@@ -6459,6 +6463,42 @@ html {
 	z-index: 0;
 }
 
+.z-1 {
+	z-index: 1;
+}
+
+.z-2 {
+	z-index: 2;
+}
+
+.z-3 {
+	z-index: 3;
+}
+
+.z-4 {
+	z-index: 4;
+}
+
+.z-5 {
+	z-index: 5;
+}
+
+.z-6 {
+	z-index: 6;
+}
+
+.z-7 {
+	z-index: 7;
+}
+
+.z-8 {
+	z-index: 8;
+}
+
+.z-9 {
+	z-index: 9;
+}
+
 .z-10 {
 	z-index: 10;
 }
@@ -6599,6 +6639,9 @@ html {
 	.xs\:sp-128 {
 		--spacing: 8rem;
 	}
+	.xs\:order-0 {
+		order: 0;
+	}
 	.xs\:order-1 {
 		order: 1;
 	}
@@ -9362,6 +9405,33 @@ html {
 	.xs\:z-0 {
 		z-index: 0;
 	}
+	.xs\:z-1 {
+		z-index: 1;
+	}
+	.xs\:z-2 {
+		z-index: 2;
+	}
+	.xs\:z-3 {
+		z-index: 3;
+	}
+	.xs\:z-4 {
+		z-index: 4;
+	}
+	.xs\:z-5 {
+		z-index: 5;
+	}
+	.xs\:z-6 {
+		z-index: 6;
+	}
+	.xs\:z-7 {
+		z-index: 7;
+	}
+	.xs\:z-8 {
+		z-index: 8;
+	}
+	.xs\:z-9 {
+		z-index: 9;
+	}
 	.xs\:z-10 {
 		z-index: 10;
 	}
@@ -9497,6 +9567,9 @@ html {
 	.sm\:sp-128 {
 		--spacing: 8rem;
 	}
+	.sm\:order-0 {
+		order: 0;
+	}
 	.sm\:order-1 {
 		order: 1;
 	}
@@ -12260,6 +12333,33 @@ html {
 	.sm\:z-0 {
 		z-index: 0;
 	}
+	.sm\:z-1 {
+		z-index: 1;
+	}
+	.sm\:z-2 {
+		z-index: 2;
+	}
+	.sm\:z-3 {
+		z-index: 3;
+	}
+	.sm\:z-4 {
+		z-index: 4;
+	}
+	.sm\:z-5 {
+		z-index: 5;
+	}
+	.sm\:z-6 {
+		z-index: 6;
+	}
+	.sm\:z-7 {
+		z-index: 7;
+	}
+	.sm\:z-8 {
+		z-index: 8;
+	}
+	.sm\:z-9 {
+		z-index: 9;
+	}
 	.sm\:z-10 {
 		z-index: 10;
 	}
@@ -12395,6 +12495,9 @@ html {
 	.md\:sp-128 {
 		--spacing: 8rem;
 	}
+	.md\:order-0 {
+		order: 0;
+	}
 	.md\:order-1 {
 		order: 1;
 	}
@@ -15158,6 +15261,33 @@ html {
 	.md\:z-0 {
 		z-index: 0;
 	}
+	.md\:z-1 {
+		z-index: 1;
+	}
+	.md\:z-2 {
+		z-index: 2;
+	}
+	.md\:z-3 {
+		z-index: 3;
+	}
+	.md\:z-4 {
+		z-index: 4;
+	}
+	.md\:z-5 {
+		z-index: 5;
+	}
+	.md\:z-6 {
+		z-index: 6;
+	}
+	.md\:z-7 {
+		z-index: 7;
+	}
+	.md\:z-8 {
+		z-index: 8;
+	}
+	.md\:z-9 {
+		z-index: 9;
+	}
 	.md\:z-10 {
 		z-index: 10;
 	}
@@ -15293,6 +15423,9 @@ html {
 	.lg\:sp-128 {
 		--spacing: 8rem;
 	}
+	.lg\:order-0 {
+		order: 0;
+	}
 	.lg\:order-1 {
 		order: 1;
 	}
@@ -18056,6 +18189,33 @@ html {
 	.lg\:z-0 {
 		z-index: 0;
 	}
+	.lg\:z-1 {
+		z-index: 1;
+	}
+	.lg\:z-2 {
+		z-index: 2;
+	}
+	.lg\:z-3 {
+		z-index: 3;
+	}
+	.lg\:z-4 {
+		z-index: 4;
+	}
+	.lg\:z-5 {
+		z-index: 5;
+	}
+	.lg\:z-6 {
+		z-index: 6;
+	}
+	.lg\:z-7 {
+		z-index: 7;
+	}
+	.lg\:z-8 {
+		z-index: 8;
+	}
+	.lg\:z-9 {
+		z-index: 9;
+	}
 	.lg\:z-10 {
 		z-index: 10;
 	}
@@ -18191,6 +18351,9 @@ html {
 	.xl\:sp-128 {
 		--spacing: 8rem;
 	}
+	.xl\:order-0 {
+		order: 0;
+	}
 	.xl\:order-1 {
 		order: 1;
 	}
@@ -20954,6 +21117,33 @@ html {
 	.xl\:z-0 {
 		z-index: 0;
 	}
+	.xl\:z-1 {
+		z-index: 1;
+	}
+	.xl\:z-2 {
+		z-index: 2;
+	}
+	.xl\:z-3 {
+		z-index: 3;
+	}
+	.xl\:z-4 {
+		z-index: 4;
+	}
+	.xl\:z-5 {
+		z-index: 5;
+	}
+	.xl\:z-6 {
+		z-index: 6;
+	}
+	.xl\:z-7 {
+		z-index: 7;
+	}
+	.xl\:z-8 {
+		z-index: 8;
+	}
+	.xl\:z-9 {
+		z-index: 9;
+	}
 	.xl\:z-10 {
 		z-index: 10;
 	}

src/index.scss

@@ -53,7 +53,7 @@ $line-height-map: (
 	"2":      2,
 );
 
-$z-index-range: -1, auto, 0, 10, 20, 30, 40, 50;
+$z-index-range: -1, auto, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50;
 
 @mixin custom-props {
 	html {

src/mixins/_stacks.scss

@@ -43,45 +43,9 @@
 		}
 	}
 
-	// // TODO: Add no-order?
-	// #{$ampersand}no-order {
-	// 	order: 0;
-	// }
-
-	#{$ampersand}order-1 {
-		order: 1;
-	}
-	#{$ampersand}order-2 {
-		order: 2;
-	}
-	#{$ampersand}order-3 {
-		order: 3;
-	}
-	#{$ampersand}order-4 {
-		order: 4;
-	}
-	#{$ampersand}order-5 {
-		order: 5;
-	}
-	#{$ampersand}order-6 {
-		order: 6;
-	}
-	#{$ampersand}order-7 {
-		order: 7;
-	}
-	#{$ampersand}order-8 {
-		order: 8;
-	}
-	#{$ampersand}order-9 {
-		order: 9;
-	}
-	#{$ampersand}order-10 {
-		order: 10;
-	}
-	#{$ampersand}order-11 {
-		order: 11;
-	}
-	#{$ampersand}order-12 {
-		order: 12;
+	@for $x from 0 through 12 {
+		#{$ampersand}order-#{$x} {
+			order: $x;
+		}
 	}
 }