cacao-css 6.0.0 → 6.2.0

package/dist/padding/sm/end.css

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

package/dist/padding/sm/horizontal.css

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

package/dist/padding/sm/start.css

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

package/dist/padding/sm/top.css

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

package/dist/padding/sm/vertical.css

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

package/dist/padding/start.css

@@ -1,27 +1,68 @@
-/* =========================================================================== *\
-    Start padding utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   Start padding utilities
+ * =========================================================================== */
+
 
 .ps-0 {
-    padding-left: 0;
+    padding-left: var(--padding-0);
 }
 
 .ps-1 {
-    padding-left: 10px;
+    padding-left: var(--padding-1);
 }
 
 .ps-2 {
-    padding-left: 20px;
+    padding-left: var(--padding-2);
 }
 
 .ps-3 {
-    padding-left: 30px;
+    padding-left: var(--padding-3);
 }
 
 .ps-4 {
-    padding-left: 40px;
+    padding-left: var(--padding-4);
 }
 
 .ps-5 {
-    padding-left: 50px;
+    padding-left: var(--padding-5);
+}
+
+.ps-6 {
+    padding-left: var(--padding-6);
+}
+
+.ps-7 {
+    padding-left: var(--padding-7);
+}
+
+.ps-8 {
+    padding-left: var(--padding-8);
+}
+
+.ps-9 {
+    padding-left: var(--padding-9);
+}
+
+.ps-10 {
+    padding-left: var(--padding-10);
+}
+
+.ps-11 {
+    padding-left: var(--padding-11);
+}
+
+.ps-12 {
+    padding-left: var(--padding-12);
+}
+
+.ps-13 {
+    padding-left: var(--padding-13);
+}
+
+.ps-14 {
+    padding-left: var(--padding-14);
+}
+
+.ps-15 {
+    padding-left: var(--padding-15);
 }

package/dist/padding/top.css

@@ -1,27 +1,68 @@
-/* =========================================================================== *\
-    Top padding utilities
-\* =========================================================================== */
+/* =========================================================================== *
+   Top padding utilities
+ * =========================================================================== */
+
 
 .pt-0 {
-    padding-top: 0;
+    padding-top: var(--padding-0);
 }
 
 .pt-1 {
-    padding-top: 10px;
+    padding-top: var(--padding-1);
 }
 
 .pt-2 {
-    padding-top: 20px;
+    padding-top: var(--padding-2);
 }
 
 .pt-3 {
-    padding-top: 30px;
+    padding-top: var(--padding-3);
 }
 
 .pt-4 {
-    padding-top: 40px;
+    padding-top: var(--padding-4);
 }
 
 .pt-5 {
-    padding-top: 50px;
+    padding-top: var(--padding-5);
+}
+
+.pt-6 {
+    padding-top: var(--padding-6);
+}
+
+.pt-7 {
+    padding-top: var(--padding-7);
+}
+
+.pt-8 {
+    padding-top: var(--padding-8);
+}
+
+.pt-9 {
+    padding-top: var(--padding-9);
+}
+
+.pt-10 {
+    padding-top: var(--padding-10);
+}
+
+.pt-11 {
+    padding-top: var(--padding-11);
+}
+
+.pt-12 {
+    padding-top: var(--padding-12);
+}
+
+.pt-13 {
+    padding-top: var(--padding-13);
+}
+
+.pt-14 {
+    padding-top: var(--padding-14);
+}
+
+.pt-15 {
+    padding-top: var(--padding-15);
 }

package/dist/padding/variables.css

@@ -0,0 +1,24 @@
+/* =========================================================================== *
+  Variables for the padding 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) {
+    --padding-0: 0px;
+    --padding-1: 10px;
+    --padding-2: 20px;
+    --padding-3: 30px;
+    --padding-4: 40px;
+    --padding-5: 50px;
+    --padding-6: 60px;
+    --padding-7: 70px;
+    --padding-8: 80px;
+    --padding-9: 90px;
+    --padding-10: 100px;
+    --padding-11: 120px;
+    --padding-12: 160px;
+    --padding-13: 240px;
+    --padding-14: 320px;
+    --padding-15: 480px;
+}