cacao-css 6.0.0 → 6.1.0

package/dist/gutter/2xs/vertical.css

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

package/dist/gutter/3xl/all.css

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

package/dist/gutter/3xl/gutter.css

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

package/dist/gutter/3xl/horizontal.css

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

package/dist/gutter/3xl/variables.css

@@ -0,0 +1,26 @@
+/* =========================================================================== *
+  Variables for the gutter sizes
+ * =========================================================================== */
+
+@media (--m-3xl) {
+    /* :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)-3xl {
+        --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/3xl/vertical.css

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

package/dist/gutter/3xs/all.css

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

package/dist/gutter/3xs/gutter.css

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

package/dist/gutter/3xs/horizontal.css

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

package/dist/gutter/3xs/variables.css

@@ -0,0 +1,26 @@
+/* =========================================================================== *
+  Variables for the gutter sizes
+ * =========================================================================== */
+
+@media (--m-3xs) {
+    /* :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)-3xs {
+        --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;
+    }
+}