cacao-css 5.4.0 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 5.5.0 (August 14, 2024)
+
+- Fixed the vertical gutter styling to only affect the row-gap. Previously it was setting the `—gap` variable. This would affect the margin on an element if it also used the “grid” class because that used `—gap` to set the margin. That was not supposed to happen.
+  
 ## 5.4.0 (August 2, 2024)
 
 - Removed aspect-ratio style from `embed`. Because this is set and the embed styles are typically loaded after the aspect ratio styles, this aspect-ratio style overrode the aspect-ratio class.

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "cacao-css",
     "description": "A set of composable CSS utilities that provide a solid foundation for website projects.",
-    "version": "5.4.0",
+    "version": "5.5.0",
     "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
     "license": "MIT",
     "repository": {

package/src/gutter/core/vertical.css

@@ -3,27 +3,27 @@
 \* =========================================================================== */
 
 .gy-0 {
-    --gap: 0px;
+    --row-gap: 0px;
 }
 
 .gy-1 {
-    --gap: 10px;
+    --row-gap: 10px;
 }
 
 .gy-2 {
-    --gap: 20px;
+    --row-gap: 20px;
 }
 
 .gy-3 {
-    --gap: 30px;
+    --row-gap: 30px;
 }
 
 .gy-4 {
-    --gap: 40px;
+    --row-gap: 40px;
 }
 
 .gy-5 {
-    --gap: 50px;
+    --row-gap: 50px;
 }
 
 .gy-0,
@@ -32,5 +32,5 @@
 .gy-3,
 .gy-4,
 .gy-5 {
-    row-gap: var(--gap);
+    row-gap: var(--row-gap);
 }

package/src/gutter/lg/vertical.css

@@ -4,27 +4,27 @@
 
 @media (--c-bp-lg) {
     .gy-lg-0 {
-        --gap: 0px;
+        --row-gap: 0px;
     }
 
     .gy-lg-1 {
-        --gap: 10px;
+        --row-gap: 10px;
     }
 
     .gy-lg-2 {
-        --gap: 20px;
+        --row-gap: 20px;
     }
 
     .gy-lg-3 {
-        --gap: 30px;
+        --row-gap: 30px;
     }
 
     .gy-lg-4 {
-        --gap: 40px;
+        --row-gap: 40px;
     }
 
     .gy-lg-5 {
-        --gap: 50px;
+        --row-gap: 50px;
     }
 
     .gy-lg-0,
@@ -33,6 +33,6 @@
     .gy-lg-3,
     .gy-lg-4,
     .gy-lg-5 {
-        row-gap: var(--gap);
+        row-gap: var(--row-gap);
     }
 }

package/src/gutter/md/vertical.css

@@ -4,27 +4,27 @@
 
 @media (--c-bp-md) {
     .gy-md-0 {
-        --gap: 0px;
+        --row-gap: 0px;
     }
 
     .gy-md-1 {
-        --gap: 10px;
+        --row-gap: 10px;
     }
 
     .gy-md-2 {
-        --gap: 20px;
+        --row-gap: 20px;
     }
 
     .gy-md-3 {
-        --gap: 30px;
+        --row-gap: 30px;
     }
 
     .gy-md-4 {
-        --gap: 40px;
+        --row-gap: 40px;
     }
 
     .gy-md-5 {
-        --gap: 50px;
+        --row-gap: 50px;
     }
 
     .gy-md-0,
@@ -33,6 +33,6 @@
     .gy-md-3,
     .gy-md-4,
     .gy-md-5 {
-        row-gap: var(--gap);
+        row-gap: var(--row-gap);
     }
 }

package/src/gutter/sm/vertical.css

@@ -4,27 +4,27 @@
 
 @media (--c-bp-sm) {
     .gy-sm-0 {
-        --gap: 0px;
+        --row-gap: 0px;
     }
 
     .gy-sm-1 {
-        --gap: 10px;
+        --row-gap: 10px;
     }
 
     .gy-sm-2 {
-        --gap: 20px;
+        --row-gap: 20px;
     }
 
     .gy-sm-3 {
-        --gap: 30px;
+        --row-gap: 30px;
     }
 
     .gy-sm-4 {
-        --gap: 40px;
+        --row-gap: 40px;
     }
 
     .gy-sm-5 {
-        --gap: 50px;
+        --row-gap: 50px;
     }
 
     .gy-sm-0,
@@ -33,6 +33,6 @@
     .gy-sm-3,
     .gy-sm-4,
     .gy-sm-5 {
-        row-gap: var(--gap);
+        row-gap: var(--row-gap);
     }
 }

package/src/gutter/xl/vertical.css

@@ -4,27 +4,27 @@
 
 @media (--c-bp-xl) {
     .gy-xl-0 {
-        --gap: 0px;
+        --row-gap: 0px;
     }
 
     .gy-xl-1 {
-        --gap: 10px;
+        --row-gap: 10px;
     }
 
     .gy-xl-2 {
-        --gap: 20px;
+        --row-gap: 20px;
     }
 
     .gy-xl-3 {
-        --gap: 30px;
+        --row-gap: 30px;
     }
 
     .gy-xl-4 {
-        --gap: 40px;
+        --row-gap: 40px;
     }
 
     .gy-xl-5 {
-        --gap: 50px;
+        --row-gap: 50px;
     }
 
     .gy-xl-0,
@@ -33,6 +33,6 @@
     .gy-xl-3,
     .gy-xl-4,
     .gy-xl-5 {
-        row-gap: var(--gap);
+        row-gap: var(--row-gap);
     }
 }

package/src/gutter/xs/vertical.css

@@ -4,27 +4,27 @@
 
 @media (--c-bp-xs) {
     .gy-xs-0 {
-        --gap: 0px;
+        --row-gap: 0px;
     }
 
     .gy-xs-1 {
-        --gap: 10px;
+        --row-gap: 10px;
     }
 
     .gy-xs-2 {
-        --gap: 20px;
+        --row-gap: 20px;
     }
 
     .gy-xs-3 {
-        --gap: 30px;
+        --row-gap: 30px;
     }
 
     .gy-xs-4 {
-        --gap: 40px;
+        --row-gap: 40px;
     }
 
     .gy-xs-5 {
-        --gap: 50px;
+        --row-gap: 50px;
     }
 
     .gy-xs-0,
@@ -33,6 +33,6 @@
     .gy-xs-3,
     .gy-xs-4,
     .gy-xs-5 {
-        row-gap: var(--gap);
+        row-gap: var(--row-gap);
     }
 }

package/src/gutter/xxl/vertical.css

@@ -4,27 +4,27 @@
 
 @media (--c-bp-xxl) {
     .gy-xxl-0 {
-        --gap: 0px;
+        --row-gap: 0px;
     }
 
     .gy-xxl-1 {
-        --gap: 10px;
+        --row-gap: 10px;
     }
 
     .gy-xxl-2 {
-        --gap: 20px;
+        --row-gap: 20px;
     }
 
     .gy-xxl-3 {
-        --gap: 30px;
+        --row-gap: 30px;
     }
 
     .gy-xxl-4 {
-        --gap: 40px;
+        --row-gap: 40px;
     }
 
     .gy-xxl-5 {
-        --gap: 50px;
+        --row-gap: 50px;
     }
 
     .gy-xxl-0,
@@ -33,6 +33,6 @@
     .gy-xxl-3,
     .gy-xxl-4,
     .gy-xxl-5 {
-        row-gap: var(--gap);
+        row-gap: var(--row-gap);
     }
 }