cacao-css 6.0.0 → 6.1.0

package/dist/margin/xs/horizontal.css

@@ -1,35 +1,85 @@
-/* =========================================================================== *\
-    Horizontal margin utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   Horizontal margin utilities
+ * =========================================================================== */
 
 @media (--m-xs) {
     .mx-0-xs {
-        margin-left: 0;
-        margin-right: 0;
+        margin-left: var(--margin-0);
+        margin-right: var(--margin-0);
     }
 
     .mx-1-xs {
-        margin-left: 10px;
-        margin-right: 10px;
+        margin-left: var(--margin-1);
+        margin-right: var(--margin-1);
     }
 
     .mx-2-xs {
-        margin-left: 20px;
-        margin-right: 20px;
+        margin-left: var(--margin-2);
+        margin-right: var(--margin-2);
     }
 
     .mx-3-xs {
-        margin-left: 30px;
-        margin-right: 30px;
+        margin-left: var(--margin-3);
+        margin-right: var(--margin-3);
     }
 
     .mx-4-xs {
-        margin-left: 40px;
-        margin-right: 40px;
+        margin-left: var(--margin-4);
+        margin-right: var(--margin-4);
     }
 
     .mx-5-xs {
-        margin-left: 50px;
-        margin-right: 50px;
+        margin-left: var(--margin-5);
+        margin-right: var(--margin-5);
+    }
+
+    .mx-6-xs {
+        margin-left: var(--margin-6);
+        margin-right: var(--margin-6);
+    }
+
+    .mx-7-xs {
+        margin-left: var(--margin-7);
+        margin-right: var(--margin-7);
+    }
+
+    .mx-8-xs {
+        margin-left: var(--margin-8);
+        margin-right: var(--margin-8);
+    }
+
+    .mx-9-xs {
+        margin-left: var(--margin-9);
+        margin-right: var(--margin-9);
+    }
+
+    .mx-10-xs {
+        margin-left: var(--margin-10);
+        margin-right: var(--margin-10);
+    }
+
+    .mx-11-xs {
+        margin-left: var(--margin-11);
+        margin-right: var(--margin-11);
+    }
+
+    .mx-12-xs {
+        margin-left: var(--margin-12);
+        margin-right: var(--margin-12);
+    }
+
+    .mx-13-xs {
+        margin-left: var(--margin-13);
+        margin-right: var(--margin-13);
+    }
+
+    .mx-14-xs {
+        margin-left: var(--margin-14);
+        margin-right: var(--margin-14);
+    }
+
+    .mx-15-xs {
+        margin-left: var(--margin-15);
+        margin-right: var(--margin-15);
     }
 }

package/dist/margin/xs/margin.css

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

package/dist/margin/xs/start.css

@@ -1,29 +1,69 @@
-/* =========================================================================== *\
-    Start margin utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   Start margin utilities
+ * =========================================================================== */
 
 @media (--m-xs) {
     .ms-0-xs {
-        margin-left: 0;
+        margin-left: var(--margin-0);
     }
 
     .ms-1-xs {
-        margin-left: 10px;
+        margin-left: var(--margin-1);
     }
 
     .ms-2-xs {
-        margin-left: 20px;
+        margin-left: var(--margin-2);
     }
 
     .ms-3-xs {
-        margin-left: 30px;
+        margin-left: var(--margin-3);
     }
 
     .ms-4-xs {
-        margin-left: 40px;
+        margin-left: var(--margin-4);
     }
 
     .ms-5-xs {
-        margin-left: 50px;
+        margin-left: var(--margin-5);
+    }
+
+    .ms-6-xs {
+        margin-left: var(--margin-6);
+    }
+
+    .ms-7-xs {
+        margin-left: var(--margin-7);
+    }
+
+    .ms-8-xs {
+        margin-left: var(--margin-8);
+    }
+
+    .ms-9-xs {
+        margin-left: var(--margin-9);
+    }
+
+    .ms-10-xs {
+        margin-left: var(--margin-10);
+    }
+
+    .ms-11-xs {
+        margin-left: var(--margin-11);
+    }
+
+    .ms-12-xs {
+        margin-left: var(--margin-12);
+    }
+
+    .ms-13-xs {
+        margin-left: var(--margin-13);
+    }
+
+    .ms-14-xs {
+        margin-left: var(--margin-14);
+    }
+
+    .ms-15-xs {
+        margin-left: var(--margin-15);
     }
 }

package/dist/margin/xs/top.css

@@ -1,29 +1,69 @@
-/* =========================================================================== *\
-    Top margin utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   Top margin utilities
+ * =========================================================================== */
 
 @media (--m-xs) {
     .mt-0-xs {
-        margin-top: 0;
+        margin-top: var(--margin-0);
     }
 
     .mt-1-xs {
-        margin-top: 10px;
+        margin-top: var(--margin-1);
     }
 
     .mt-2-xs {
-        margin-top: 20px;
+        margin-top: var(--margin-2);
     }
 
     .mt-3-xs {
-        margin-top: 30px;
+        margin-top: var(--margin-3);
     }
 
     .mt-4-xs {
-        margin-top: 40px;
+        margin-top: var(--margin-4);
     }
 
     .mt-5-xs {
-        margin-top: 50px;
+        margin-top: var(--margin-5);
+    }
+
+    .mt-6-xs {
+        margin-top: var(--margin-6);
+    }
+
+    .mt-7-xs {
+        margin-top: var(--margin-7);
+    }
+
+    .mt-8-xs {
+        margin-top: var(--margin-8);
+    }
+
+    .mt-9-xs {
+        margin-top: var(--margin-9);
+    }
+
+    .mt-10-xs {
+        margin-top: var(--margin-10);
+    }
+
+    .mt-11-xs {
+        margin-top: var(--margin-11);
+    }
+
+    .mt-12-xs {
+        margin-top: var(--margin-12);
+    }
+
+    .mt-13-xs {
+        margin-top: var(--margin-13);
+    }
+
+    .mt-14-xs {
+        margin-top: var(--margin-14);
+    }
+
+    .mt-15-xs {
+        margin-top: var(--margin-15);
     }
 }

package/dist/margin/xs/vertical.css

@@ -1,35 +1,85 @@
-/* =========================================================================== *\
-    Vertical margin utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   Vertical margin utilities
+ * =========================================================================== */
 
 @media (--m-xs) {
     .my-0-xs {
-        margin-bottom: 0;
-        margin-top: 0;
+        margin-bottom: var(--margin-0);
+        margin-top: var(--margin-0);
     }
 
     .my-1-xs {
-        margin-bottom: 10px;
-        margin-top: 10px;
+        margin-bottom: var(--margin-1);
+        margin-top: var(--margin-1);
     }
 
     .my-2-xs {
-        margin-bottom: 20px;
-        margin-top: 20px;
+        margin-bottom: var(--margin-2);
+        margin-top: var(--margin-2);
     }
 
     .my-3-xs {
-        margin-bottom: 30px;
-        margin-top: 30px;
+        margin-bottom: var(--margin-3);
+        margin-top: var(--margin-3);
     }
 
     .my-4-xs {
-        margin-bottom: 40px;
-        margin-top: 40px;
+        margin-bottom: var(--margin-4);
+        margin-top: var(--margin-4);
     }
 
     .my-5-xs {
-        margin-bottom: 50px;
-        margin-top: 50px;
+        margin-bottom: var(--margin-5);
+        margin-top: var(--margin-5);
+    }
+
+    .my-6-xs {
+        margin-bottom: var(--margin-6);
+        margin-top: var(--margin-6);
+    }
+
+    .my-7-xs {
+        margin-bottom: var(--margin-7);
+        margin-top: var(--margin-7);
+    }
+
+    .my-8-xs {
+        margin-bottom: var(--margin-8);
+        margin-top: var(--margin-8);
+    }
+
+    .my-9-xs {
+        margin-bottom: var(--margin-9);
+        margin-top: var(--margin-9);
+    }
+
+    .my-10-xs {
+        margin-bottom: var(--margin-10);
+        margin-top: var(--margin-10);
+    }
+
+    .my-11-xs {
+        margin-bottom: var(--margin-11);
+        margin-top: var(--margin-11);
+    }
+
+    .my-12-xs {
+        margin-bottom: var(--margin-12);
+        margin-top: var(--margin-12);
+    }
+
+    .my-13-xs {
+        margin-bottom: var(--margin-13);
+        margin-top: var(--margin-13);
+    }
+
+    .my-14-xs {
+        margin-bottom: var(--margin-14);
+        margin-top: var(--margin-14);
+    }
+
+    .my-15-xs {
+        margin-bottom: var(--margin-15);
+        margin-top: var(--margin-15);
     }
 }

package/dist/media.css

@@ -8,12 +8,6 @@
     - The variable must be all lowercase.
 \* =========================================================================== */
 
-/**
- * These breakpoints are inspired by Pure. https://purecss.io/grids/#:~:text=%3C/div%3E-,Default%20Media%20Queries,-When%20using%20Responsive
- * and Open Props https://open-props.style/#media-queries
- *
- */
-
 /* Accessibility preferences */
 @custom-media --m-motion-ok (prefers-reduced-motion: no-preference);
 @custom-media --m-motion-not-ok (prefers-reduced-motion: reduce);

package/dist/padding/2xl/all.css

@@ -1,29 +1,69 @@
-/* =========================================================================== *\
-    All sides padding utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   All sides padding utilities
+ * =========================================================================== */
 
 @media (--m-2xl) {
     .p-0-2xl {
-        padding: 0;
+        padding: var(--padding-0);
     }
 
     .p-1-2xl {
-        padding: 10px;
+        padding: var(--padding-1);
     }
 
     .p-2-2xl {
-        padding: 20px;
+        padding: var(--padding-2);
     }
 
     .p-3-2xl {
-        padding: 30px;
+        padding: var(--padding-3);
     }
 
     .p-4-2xl {
-        padding: 40px;
+        padding: var(--padding-4);
     }
 
     .p-5-2xl {
-        padding: 50px;
+        padding: var(--padding-5);
+    }
+
+    .p-6-2xl {
+        padding: var(--padding-6);
+    }
+
+    .p-7-2xl {
+        padding: var(--padding-7);
+    }
+
+    .p-8-2xl {
+        padding: var(--padding-8);
+    }
+
+    .p-9-2xl {
+        padding: var(--padding-9);
+    }
+
+    .p-10-2xl {
+        padding: var(--padding-10);
+    }
+
+    .p-11-2xl {
+        padding: var(--padding-11);
+    }
+
+    .p-12-2xl {
+        padding: var(--padding-12);
+    }
+
+    .p-13-2xl {
+        padding: var(--padding-13);
+    }
+
+    .p-14-2xl {
+        padding: var(--padding-14);
+    }
+
+    .p-15-2xl {
+        padding: var(--padding-15);
     }
 }

package/dist/padding/2xl/bottom.css

@@ -1,29 +1,69 @@
-/* =========================================================================== *\
-    Bottom padding utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   Bottom padding utilities
+ * =========================================================================== */
 
 @media (--m-2xl) {
     .pb-0-2xl {
-        padding-bottom: 0;
+        padding-bottom: var(--padding-0);
     }
 
     .pb-1-2xl {
-        padding-bottom: 10px;
+        padding-bottom: var(--padding-1);
     }
 
     .pb-2-2xl {
-        padding-bottom: 20px;
+        padding-bottom: var(--padding-2);
     }
 
     .pb-3-2xl {
-        padding-bottom: 30px;
+        padding-bottom: var(--padding-3);
     }
 
     .pb-4-2xl {
-        padding-bottom: 40px;
+        padding-bottom: var(--padding-4);
     }
 
     .pb-5-2xl {
-        padding-bottom: 50px;
+        padding-bottom: var(--padding-5);
+    }
+
+    .pb-6-2xl {
+        padding-bottom: var(--padding-6);
+    }
+
+    .pb-7-2xl {
+        padding-bottom: var(--padding-7);
+    }
+
+    .pb-8-2xl {
+        padding-bottom: var(--padding-8);
+    }
+
+    .pb-9-2xl {
+        padding-bottom: var(--padding-9);
+    }
+
+    .pb-10-2xl {
+        padding-bottom: var(--padding-10);
+    }
+
+    .pb-11-2xl {
+        padding-bottom: var(--padding-11);
+    }
+
+    .pb-12-2xl {
+        padding-bottom: var(--padding-12);
+    }
+
+    .pb-13-2xl {
+        padding-bottom: var(--padding-13);
+    }
+
+    .pb-14-2xl {
+        padding-bottom: var(--padding-14);
+    }
+
+    .pb-15-2xl {
+        padding-bottom: var(--padding-15);
     }
 }

package/dist/padding/2xl/end.css

@@ -1,29 +1,69 @@
-/* =========================================================================== *\
-    End padding utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   End padding utilities
+ * =========================================================================== */
 
 @media (--m-2xl) {
     .pe-0-2xl {
-        padding-right: 0;
+        padding-right: var(--padding-0);
     }
 
     .pe-1-2xl {
-        padding-right: 10px;
+        padding-right: var(--padding-1);
     }
 
     .pe-2-2xl {
-        padding-right: 20px;
+        padding-right: var(--padding-2);
     }
 
     .pe-3-2xl {
-        padding-right: 30px;
+        padding-right: var(--padding-3);
     }
 
     .pe-4-2xl {
-        padding-right: 40px;
+        padding-right: var(--padding-4);
     }
 
     .pe-5-2xl {
-        padding-right: 50px;
+        padding-right: var(--padding-5);
+    }
+
+    .pe-6-2xl {
+        padding-right: var(--padding-6);
+    }
+
+    .pe-7-2xl {
+        padding-right: var(--padding-7);
+    }
+
+    .pe-8-2xl {
+        padding-right: var(--padding-8);
+    }
+
+    .pe-9-2xl {
+        padding-right: var(--padding-9);
+    }
+
+    .pe-10-2xl {
+        padding-right: var(--padding-10);
+    }
+
+    .pe-11-2xl {
+        padding-right: var(--padding-11);
+    }
+
+    .pe-12-2xl {
+        padding-right: var(--padding-12);
+    }
+
+    .pe-13-2xl {
+        padding-right: var(--padding-13);
+    }
+
+    .pe-14-2xl {
+        padding-right: var(--padding-14);
+    }
+
+    .pe-15-2xl {
+        padding-right: var(--padding-15);
     }
 }