cacao-css 6.0.0 → 6.1.0

package/dist/gutter/xs/vertical.css

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

package/dist/image/image.css

@@ -6,32 +6,31 @@
 .image-right {
     display: block;
     height: auto;
-    margin-bottom: 10px;
-    width: 100%;
+    margin-bottom: var(--image-bottom-margin);
+    max-width: var(--image-max-width);
 }
 
 @media (--m-sm) {
     .image-left,
     .image-right {
         display: inline;
-        max-width: 50%;
-        width: unset;
+        max-width: var(--image-max-width-sm);
     }
 
     .image-left {
         float: left;
-        margin-right: 20px;
+        margin-right: var(--image-right-margin);
     }
 
     .image-right {
         float: right;
-        margin-left: 20px;
+        margin-left: var(--image-left-margin);
     }
 }
 
 @media (--m-md) {
     .image-left,
     .image-right {
-        max-width: 40%;
+        max-width: var(--image-max-width-md);
     }
 }

package/dist/image/variables.css

@@ -0,0 +1,14 @@
+/* =========================================================================== *\
+    Image utility variables
+\* =========================================================================== */
+
+/* :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) {
+    --image-bottom-margin: 10px;
+    --image-left-margin: 20px;
+    --image-max-width: 100%;
+    --image-max-width-md: 40%;
+    --image-max-width-sm: 50%;
+    --image-right-margin: 20px;
+}