cacao-css 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.2.0 (Dec 19, 2023) - Breaking change
+
+- Fixed the order of import examples. The gutter styles have to come after grid styles.
+- Breaking Change - Changed the aspect ratio styles into two separate files. `aspect/horizontal.css` and `aspect/vertical.css`. Imports will need to be updated. Also added new aspect ratios.
+
 ## 4.1.0 (Nov 30, 2023)
 
 - Added typography word break and word wrap styles.

package/imports.css

@@ -21,7 +21,8 @@
 @import '../../node_modules/cacao-css/src/base/base.css';
 
 /* Aspect Ratios */
-@import '../../node_modules/cacao-css/src/aspect/aspect.css';
+@import '../../node_modules/cacao-css/src/aspect/horizontal.css';
+/* @import '../../node_modules/cacao-css/src/aspect/vertical.css'; */
 
 /* Embed */
 @import '../../node_modules/cacao-css/src/embed/embed.css';
@@ -62,31 +63,6 @@
 /* @import '../../node_modules/cacao-css/src/typography/transform.css'; */
 /* @import '../../node_modules/cacao-css/src/typography/weight.css'; */
 
-/* Gutter */
-@import '../../node_modules/cacao-css/src/gutter/core/all.css';
-@import '../../node_modules/cacao-css/src/gutter/core/horizontal.css';
-@import '../../node_modules/cacao-css/src/gutter/core/vertical.css';
-
-/* Gutter (sm) */
-/* @import '../../node_modules/cacao-css/src/gutter/sm/all.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/sm/horizontal.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/sm/vertical.css'; */
-
-/* Gutter (md) */
-/* @import '../../node_modules/cacao-css/src/gutter/md/all.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/md/horizontal.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/md/vertical.css'; */
-
-/* Gutter (lg) */
-/* @import '../../node_modules/cacao-css/src/gutter/lg/all.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/lg/horizontal.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/lg/vertical.css'; */
-
-/* Gutter (xl) */
-/* @import '../../node_modules/cacao-css/src/gutter/xl/all.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/xl/horizontal.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/xl/vertical.css'; */
-
 /* Display */
 /* @import '../../node_modules/cacao-css/src/display/core/align.css'; */
 @import '../../node_modules/cacao-css/src/display/core/display.css';
@@ -193,6 +169,31 @@
 /* @import '../../node_modules/cacao-css/src/grid/xl/col-11.css'; */
 /* @import '../../node_modules/cacao-css/src/grid/xl/col-12.css'; */
 
+/* Gutter */
+@import '../../node_modules/cacao-css/src/gutter/core/all.css';
+@import '../../node_modules/cacao-css/src/gutter/core/horizontal.css';
+@import '../../node_modules/cacao-css/src/gutter/core/vertical.css';
+
+/* Gutter (sm) */
+/* @import '../../node_modules/cacao-css/src/gutter/sm/all.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/sm/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/sm/vertical.css'; */
+
+/* Gutter (md) */
+/* @import '../../node_modules/cacao-css/src/gutter/md/all.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/md/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/md/vertical.css'; */
+
+/* Gutter (lg) */
+/* @import '../../node_modules/cacao-css/src/gutter/lg/all.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/lg/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/lg/vertical.css'; */
+
+/* Gutter (xl) */
+/* @import '../../node_modules/cacao-css/src/gutter/xl/all.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/xl/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/xl/vertical.css'; */
+
 /* Margin */
 /* @import '../../node_modules/cacao-css/src/margin/core/all.css'; */
 @import '../../node_modules/cacao-css/src/margin/core/bottom.css';

package/package.json

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

package/src/aspect/horizontal.css

@@ -0,0 +1,40 @@
+/* =========================================================================== *\
+    Horizontal Aspect Ratio Utilities
+\* =========================================================================== */
+
+.aspect-1-1 {
+    aspect-ratio: 1 / 1; /* 1.0:1 */
+}
+
+.aspect-5-4 {
+    aspect-ratio: 5 / 4; /* 1.25:1 */
+}
+
+.aspect-4-3 {
+    aspect-ratio: 4 / 3; /* 1.3:1 */
+}
+
+.aspect-7-5 {
+    aspect-ratio: 7 / 5; /* 1.4:1 */
+}
+
+.aspect-3-2 {
+    aspect-ratio: 3 / 2; /* 1.5:1 */
+}
+
+.aspect-16-9 {
+    aspect-ratio: 16 / 9; /* 1.7:1 */
+}
+
+.aspect-2-1 {
+    aspect-ratio: 2 / 1; /* 2:1 */
+}
+
+.aspect-7-3,
+.aspect-21-9 {
+    aspect-ratio: 7 / 3; /* 2.3:1 */
+}
+
+.aspect-3-1 {
+    aspect-ratio: 3 / 1; /* 3.0:1 */
+}

package/src/aspect/vertical.css

@@ -0,0 +1,40 @@
+/* =========================================================================== *\
+    Vertical Aspect Ratio Utilities
+\* =========================================================================== */
+
+.aspect-1-1 {
+    aspect-ratio: 1 / 1; /* 1.0:1 */
+}
+
+.aspect-4-5 {
+    aspect-ratio: 4 / 5; /* 1:1.25 */
+}
+
+.aspect-3-4 {
+    aspect-ratio: 3 / 4; /* 1:1.3 */
+}
+
+.aspect-5-7 {
+    aspect-ratio: 5 / 7; /* 1:1.4 */
+}
+
+.aspect-2-3 {
+    aspect-ratio: 2 / 3; /* 1:1.5 */
+}
+
+.aspect-9-16 {
+    aspect-ratio: 9 / 16; /* 1:1.7 */
+}
+
+.aspect-1-2 {
+    aspect-ratio: 1 / 2; /* 1:2 */
+}
+
+.aspect-3-7,
+.aspect-9-21 {
+    aspect-ratio: 3 / 7; /* 1:2.3 */
+}
+
+.aspect-1-3 {
+    aspect-ratio: 1 / 3; /* 1:3.0 */
+}

package/src/gutter/core/all.css

@@ -26,6 +26,11 @@
     --gap: 50px;
 }
 
-.g-0, .g-1, .g-2, .g-3, .g-4, .g-5 {
+.g-0,
+.g-1,
+.g-2,
+.g-3,
+.g-4,
+.g-5 {
     gap: var(--gap);
 }

package/src/aspect/aspect.css

@@ -1,23 +0,0 @@
-/* =========================================================================== *\
-    Aspect Ratio Utilities
-\* =========================================================================== */
-
-.aspect-1-1 {
-    aspect-ratio: 1 / 1;
-}
-
-.aspect-2-1 {
-    aspect-ratio: 2 / 1;
-}
-
-.aspect-4-3 {
-    aspect-ratio: 4 / 3;
-}
-
-.aspect-16-9 {
-    aspect-ratio: 16 / 9;
-}
-
-.aspect-21-9 {
-    aspect-ratio: 21 / 9;
-}