cacao-css 6.0.0 → 6.1.0

package/dist/gutter/md/all.css

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

package/dist/gutter/md/gutter.css

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

package/dist/gutter/md/horizontal.css

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

package/dist/gutter/md/variables.css

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

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

package/dist/gutter/sm/all.css

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

package/dist/gutter/sm/gutter.css

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

package/dist/gutter/sm/horizontal.css

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

package/dist/gutter/sm/variables.css

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

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

package/dist/gutter/variables.css

@@ -0,0 +1,24 @@
+/* =========================================================================== *
+  Variables for the gutter sizes
+ * =========================================================================== */
+
+/* :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) {
+    --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;
+}