cacao-css 6.0.0 → 6.1.0

package/dist/gutter/vertical.css

@@ -1,29 +1,70 @@
-/* =========================================================================== *\
-    Vertical gutter utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   Vertical gutter utilities
+ * =========================================================================== */
+
 
 .gy-0 {
-    --row-gap: 0px;
+    --row-gap: var(--gutter-0);
 }
 
 .gy-1 {
-    --row-gap: 10px;
+    --row-gap: var(--gutter-1);
 }
 
 .gy-2 {
-    --row-gap: 20px;
+    --row-gap: var(--gutter-2);
 }
 
 .gy-3 {
-    --row-gap: 30px;
+    --row-gap: var(--gutter-3);
 }
 
 .gy-4 {
-    --row-gap: 40px;
+    --row-gap: var(--gutter-4);
 }
 
 .gy-5 {
-    --row-gap: 50px;
+    --row-gap: var(--gutter-5);
+}
+
+.gy-6 {
+    --row-gap: var(--gutter-6);
+}
+
+.gy-7 {
+    --row-gap: var(--gutter-7);
+}
+
+.gy-8 {
+    --row-gap: var(--gutter-8);
+}
+
+.gy-9 {
+    --row-gap: var(--gutter-9);
+}
+
+.gy-10 {
+    --row-gap: var(--gutter-10);
+}
+
+.gy-11 {
+    --row-gap: var(--gutter-11);
+}
+
+.gy-12 {
+    --row-gap: var(--gutter-12);
+}
+
+.gy-13 {
+    --row-gap: var(--gutter-13);
+}
+
+.gy-14 {
+    --row-gap: var(--gutter-14);
+}
+
+.gy-15 {
+    --row-gap: var(--gutter-15);
 }
 
 .gy-0,
@@ -31,6 +72,16 @@
 .gy-2,
 .gy-3,
 .gy-4,
-.gy-5 {
+.gy-5,
+.gy-6,
+.gy-7,
+.gy-8,
+.gy-9,
+.gy-10,
+.gy-11,
+.gy-12,
+.gy-13,
+.gy-14,
+.gy-15 {
     row-gap: var(--row-gap);
-}
+}

package/dist/gutter/xl/all.css

@@ -1,30 +1,70 @@
-/* =========================================================================== *\
-    All directions gutter utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   All directions gutter utilities
+ * =========================================================================== */
 
 @media (--m-xl) {
     .g-0-xl {
-        --gap: 0px;
+        --gap: var(--gutter-0);
     }
 
     .g-1-xl {
-        --gap: 10px;
+        --gap: var(--gutter-1);
     }
 
     .g-2-xl {
-        --gap: 20px;
+        --gap: var(--gutter-2);
     }
 
     .g-3-xl {
-        --gap: 30px;
+        --gap: var(--gutter-3);
     }
 
     .g-4-xl {
-        --gap: 40px;
+        --gap: var(--gutter-4);
     }
 
     .g-5-xl {
-        --gap: 50px;
+        --gap: var(--gutter-5);
+    }
+
+    .g-6-xl {
+        --gap: var(--gutter-6);
+    }
+
+    .g-7-xl {
+        --gap: var(--gutter-7);
+    }
+
+    .g-8-xl {
+        --gap: var(--gutter-8);
+    }
+
+    .g-9-xl {
+        --gap: var(--gutter-9);
+    }
+
+    .g-10-xl {
+        --gap: var(--gutter-10);
+    }
+
+    .g-11-xl {
+        --gap: var(--gutter-11);
+    }
+
+    .g-12-xl {
+        --gap: var(--gutter-12);
+    }
+
+    .g-13-xl {
+        --gap: var(--gutter-13);
+    }
+
+    .g-14-xl {
+        --gap: var(--gutter-14);
+    }
+
+    .g-15-xl {
+        --gap: var(--gutter-15);
     }
 
     .g-0-xl,
@@ -32,7 +72,17 @@
     .g-2-xl,
     .g-3-xl,
     .g-4-xl,
-    .g-5-xl {
+    .g-5-xl,
+    .g-6-xl,
+    .g-7-xl,
+    .g-8-xl,
+    .g-9-xl,
+    .g-10-xl,
+    .g-11-xl,
+    .g-12-xl,
+    .g-13-xl,
+    .g-14-xl,
+    .g-15-xl {
         gap: var(--gap);
     }
 }

package/dist/gutter/xl/gutter.css

@@ -0,0 +1,7 @@
+/* =========================================================================== *
+   Margin utilities - xl - imports all the xl margin utility files
+ * =========================================================================== */
+
+@import './all.css';
+@import './horizontal.css';
+@import './vertical.css';

package/dist/gutter/xl/horizontal.css

@@ -1,30 +1,70 @@
-/* =========================================================================== *\
-    Horizontal gutter utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   Horizontal gutter utilities
+ * =========================================================================== */
 
 @media (--m-xl) {
     .gx-0-xl {
-        --gap: 0px;
+        --gap: var(--gutter-0);
     }
 
     .gx-1-xl {
-        --gap: 10px;
+        --gap: var(--gutter-1);
     }
 
     .gx-2-xl {
-        --gap: 20px;
+        --gap: var(--gutter-2);
     }
 
     .gx-3-xl {
-        --gap: 30px;
+        --gap: var(--gutter-3);
     }
 
     .gx-4-xl {
-        --gap: 40px;
+        --gap: var(--gutter-4);
     }
 
     .gx-5-xl {
-        --gap: 50px;
+        --gap: var(--gutter-5);
+    }
+
+    .gx-6-xl {
+        --gap: var(--gutter-6);
+    }
+
+    .gx-7-xl {
+        --gap: var(--gutter-7);
+    }
+
+    .gx-8-xl {
+        --gap: var(--gutter-8);
+    }
+
+    .gx-9-xl {
+        --gap: var(--gutter-9);
+    }
+
+    .gx-10-xl {
+        --gap: var(--gutter-10);
+    }
+
+    .gx-11-xl {
+        --gap: var(--gutter-11);
+    }
+
+    .gx-12-xl {
+        --gap: var(--gutter-12);
+    }
+
+    .gx-13-xl {
+        --gap: var(--gutter-13);
+    }
+
+    .gx-14-xl {
+        --gap: var(--gutter-14);
+    }
+
+    .gx-15-xl {
+        --gap: var(--gutter-15);
     }
 
     .gx-0-xl,
@@ -32,7 +72,17 @@
     .gx-2-xl,
     .gx-3-xl,
     .gx-4-xl,
-    .gx-5-xl {
+    .gx-5-xl,
+    .gx-6-xl,
+    .gx-7-xl,
+    .gx-8-xl,
+    .gx-9-xl,
+    .gx-10-xl,
+    .gx-11-xl,
+    .gx-12-xl,
+    .gx-13-xl,
+    .gx-14-xl,
+    .gx-15-xl {
         column-gap: var(--gap);
     }
 }

package/dist/gutter/xl/variables.css

@@ -0,0 +1,26 @@
+/* =========================================================================== *
+  Variables for the gutter sizes
+ * =========================================================================== */
+
+@media (--m-xl) {
+    /* :where() is used to give the variables no specificity so that they are easily overriden. https://developer.mozilla.org/en-US/docs/Web/CSS/:where     */
+
+    :where(html)-xl {
+        --gutter-0: 0px;
+        --gutter-1: 10px;
+        --gutter-2: 20px;
+        --gutter-3: 30px;
+        --gutter-4: 40px;
+        --gutter-5: 50px;
+        --gutter-6: 60px;
+        --gutter-7: 70px;
+        --gutter-8: 80px;
+        --gutter-9: 90px;
+        --gutter-10: 100px;
+        --gutter-11: 120px;
+        --gutter-12: 160px;
+        --gutter-13: 240px;
+        --gutter-14: 320px;
+        --gutter-15: 480px;
+    }
+}

package/dist/gutter/xl/vertical.css

@@ -1,30 +1,70 @@
-/* =========================================================================== *\
-    Vertical gutter utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   Vertical gutter utilities
+ * =========================================================================== */
 
 @media (--m-xl) {
     .gy-0-xl {
-        --row-gap: 0px;
+        --row-gap: var(--gutter-0);
     }
 
     .gy-1-xl {
-        --row-gap: 10px;
+        --row-gap: var(--gutter-1);
     }
 
     .gy-2-xl {
-        --row-gap: 20px;
+        --row-gap: var(--gutter-2);
     }
 
     .gy-3-xl {
-        --row-gap: 30px;
+        --row-gap: var(--gutter-3);
     }
 
     .gy-4-xl {
-        --row-gap: 40px;
+        --row-gap: var(--gutter-4);
     }
 
     .gy-5-xl {
-        --row-gap: 50px;
+        --row-gap: var(--gutter-5);
+    }
+
+    .gy-6-xl {
+        --row-gap: var(--gutter-6);
+    }
+
+    .gy-7-xl {
+        --row-gap: var(--gutter-7);
+    }
+
+    .gy-8-xl {
+        --row-gap: var(--gutter-8);
+    }
+
+    .gy-9-xl {
+        --row-gap: var(--gutter-9);
+    }
+
+    .gy-10-xl {
+        --row-gap: var(--gutter-10);
+    }
+
+    .gy-11-xl {
+        --row-gap: var(--gutter-11);
+    }
+
+    .gy-12-xl {
+        --row-gap: var(--gutter-12);
+    }
+
+    .gy-13-xl {
+        --row-gap: var(--gutter-13);
+    }
+
+    .gy-14-xl {
+        --row-gap: var(--gutter-14);
+    }
+
+    .gy-15-xl {
+        --row-gap: var(--gutter-15);
     }
 
     .gy-0-xl,
@@ -32,7 +72,17 @@
     .gy-2-xl,
     .gy-3-xl,
     .gy-4-xl,
-    .gy-5-xl {
+    .gy-5-xl,
+    .gy-6-xl,
+    .gy-7-xl,
+    .gy-8-xl,
+    .gy-9-xl,
+    .gy-10-xl,
+    .gy-11-xl,
+    .gy-12-xl,
+    .gy-13-xl,
+    .gy-14-xl,
+    .gy-15-xl {
         row-gap: var(--row-gap);
     }
 }

package/dist/gutter/xs/all.css

@@ -1,30 +1,70 @@
-/* =========================================================================== *\
-    All directions gutter utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   All directions gutter utilities
+ * =========================================================================== */
 
 @media (--m-xs) {
     .g-0-xs {
-        --gap: 0px;
+        --gap: var(--gutter-0);
     }
 
     .g-1-xs {
-        --gap: 10px;
+        --gap: var(--gutter-1);
     }
 
     .g-2-xs {
-        --gap: 20px;
+        --gap: var(--gutter-2);
     }
 
     .g-3-xs {
-        --gap: 30px;
+        --gap: var(--gutter-3);
     }
 
     .g-4-xs {
-        --gap: 40px;
+        --gap: var(--gutter-4);
     }
 
     .g-5-xs {
-        --gap: 50px;
+        --gap: var(--gutter-5);
+    }
+
+    .g-6-xs {
+        --gap: var(--gutter-6);
+    }
+
+    .g-7-xs {
+        --gap: var(--gutter-7);
+    }
+
+    .g-8-xs {
+        --gap: var(--gutter-8);
+    }
+
+    .g-9-xs {
+        --gap: var(--gutter-9);
+    }
+
+    .g-10-xs {
+        --gap: var(--gutter-10);
+    }
+
+    .g-11-xs {
+        --gap: var(--gutter-11);
+    }
+
+    .g-12-xs {
+        --gap: var(--gutter-12);
+    }
+
+    .g-13-xs {
+        --gap: var(--gutter-13);
+    }
+
+    .g-14-xs {
+        --gap: var(--gutter-14);
+    }
+
+    .g-15-xs {
+        --gap: var(--gutter-15);
     }
 
     .g-0-xs,
@@ -32,7 +72,17 @@
     .g-2-xs,
     .g-3-xs,
     .g-4-xs,
-    .g-5-xs {
+    .g-5-xs,
+    .g-6-xs,
+    .g-7-xs,
+    .g-8-xs,
+    .g-9-xs,
+    .g-10-xs,
+    .g-11-xs,
+    .g-12-xs,
+    .g-13-xs,
+    .g-14-xs,
+    .g-15-xs {
         gap: var(--gap);
     }
 }

package/dist/gutter/xs/gutter.css

@@ -0,0 +1,7 @@
+/* =========================================================================== *
+   Margin utilities - xs - imports all the xs margin utility files
+ * =========================================================================== */
+
+@import './all.css';
+@import './horizontal.css';
+@import './vertical.css';

package/dist/gutter/xs/horizontal.css

@@ -1,30 +1,70 @@
-/* =========================================================================== *\
-    Horizontal gutter utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   Horizontal gutter utilities
+ * =========================================================================== */
 
 @media (--m-xs) {
     .gx-0-xs {
-        --gap: 0px;
+        --gap: var(--gutter-0);
     }
 
     .gx-1-xs {
-        --gap: 10px;
+        --gap: var(--gutter-1);
     }
 
     .gx-2-xs {
-        --gap: 20px;
+        --gap: var(--gutter-2);
     }
 
     .gx-3-xs {
-        --gap: 30px;
+        --gap: var(--gutter-3);
     }
 
     .gx-4-xs {
-        --gap: 40px;
+        --gap: var(--gutter-4);
     }
 
     .gx-5-xs {
-        --gap: 50px;
+        --gap: var(--gutter-5);
+    }
+
+    .gx-6-xs {
+        --gap: var(--gutter-6);
+    }
+
+    .gx-7-xs {
+        --gap: var(--gutter-7);
+    }
+
+    .gx-8-xs {
+        --gap: var(--gutter-8);
+    }
+
+    .gx-9-xs {
+        --gap: var(--gutter-9);
+    }
+
+    .gx-10-xs {
+        --gap: var(--gutter-10);
+    }
+
+    .gx-11-xs {
+        --gap: var(--gutter-11);
+    }
+
+    .gx-12-xs {
+        --gap: var(--gutter-12);
+    }
+
+    .gx-13-xs {
+        --gap: var(--gutter-13);
+    }
+
+    .gx-14-xs {
+        --gap: var(--gutter-14);
+    }
+
+    .gx-15-xs {
+        --gap: var(--gutter-15);
     }
 
     .gx-0-xs,
@@ -32,7 +72,17 @@
     .gx-2-xs,
     .gx-3-xs,
     .gx-4-xs,
-    .gx-5-xs {
+    .gx-5-xs,
+    .gx-6-xs,
+    .gx-7-xs,
+    .gx-8-xs,
+    .gx-9-xs,
+    .gx-10-xs,
+    .gx-11-xs,
+    .gx-12-xs,
+    .gx-13-xs,
+    .gx-14-xs,
+    .gx-15-xs {
         column-gap: var(--gap);
     }
 }

package/dist/gutter/xs/variables.css

@@ -0,0 +1,26 @@
+/* =========================================================================== *
+  Variables for the gutter sizes
+ * =========================================================================== */
+
+@media (--m-xs) {
+    /* :where() is used to give the variables no specificity so that they are easily overriden. https://developer.mozilla.org/en-US/docs/Web/CSS/:where     */
+
+    :where(html)-xs {
+        --gutter-0: 0px;
+        --gutter-1: 10px;
+        --gutter-2: 20px;
+        --gutter-3: 30px;
+        --gutter-4: 40px;
+        --gutter-5: 50px;
+        --gutter-6: 60px;
+        --gutter-7: 70px;
+        --gutter-8: 80px;
+        --gutter-9: 90px;
+        --gutter-10: 100px;
+        --gutter-11: 120px;
+        --gutter-12: 160px;
+        --gutter-13: 240px;
+        --gutter-14: 320px;
+        --gutter-15: 480px;
+    }
+}