cacao-css 5.5.0 → 6.0.0

package/README.md

@@ -15,3 +15,10 @@ Using the default imports, you get access to aspect ratios (used for embedded if
 ## Customization
 
 You can customize Cacao simply by overriding a class. You can also override the breakpoints by creating your own `@custom-media` directives as found in [config.css](src/config.css).
+
+## Resources
+
+- [Changelog](./CHANGELOG.md)
+- [Development](./DEVELOPMENT.md)
+- [Local Testing](./LOCAL_TESTING.md)
+- [Migrating from version 3](./Migrating-from-version3.md)

package/dist/aspect/2xl/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-2xl) {
+    .aspect-1-1-2xl {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-5-4-2xl {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-4-3-2xl {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-7-5-2xl {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-3-2-2xl {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-16-9-2xl {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-2-1-2xl {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-7-3-2xl,
+    .aspect-21-9-2xl {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-3-1-2xl {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/dist/aspect/2xl/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-2xl) {
+    .aspect-1-1-2xl {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-4-5-2xl {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-3-4-2xl {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-5-7-2xl {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-2-3-2xl {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-9-16-2xl {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-1-2-2xl {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-3-7-2xl,
+    .aspect-9-21-2xl {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-1-3-2xl {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/dist/aspect/2xs/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-2xs) {
+    .aspect-1-1-2xs {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-5-4-2xs {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-4-3-2xs {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-7-5-2xs {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-3-2-2xs {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-16-9-2xs {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-2-1-2xs {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-7-3-2xs,
+    .aspect-21-9-2xs {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-3-1-2xs {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/dist/aspect/2xs/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-2xs) {
+    .aspect-1-1-2xs {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-4-5-2xs {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-3-4-2xs {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-5-7-2xs {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-2-3-2xs {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-9-16-2xs {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-1-2-2xs {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-3-7-2xs,
+    .aspect-9-21-2xs {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-1-3-2xs {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/dist/aspect/3xl/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-3xl) {
+    .aspect-1-1-3xl {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-5-4-3xl {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-4-3-3xl {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-7-5-3xl {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-3-2-3xl {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-16-9-3xl {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-2-1-3xl {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-7-3-3xl,
+    .aspect-21-9-3xl {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-3-1-3xl {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/dist/aspect/3xl/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-3xl) {
+    .aspect-1-1-3xl {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-4-5-3xl {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-3-4-3xl {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-5-7-3xl {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-2-3-3xl {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-9-16-3xl {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-1-2-3xl {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-3-7-3xl,
+    .aspect-9-21-3xl {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-1-3-3xl {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/dist/aspect/3xs/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-3xs) {
+    .aspect-1-1-3xs {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-5-4-3xs {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-4-3-3xs {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-7-5-3xs {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-3-2-3xs {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-16-9-3xs {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-2-1-3xs {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-7-3-3xs,
+    .aspect-21-9-3xs {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-3-1-3xs {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/dist/aspect/3xs/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-3xs) {
+    .aspect-1-1-3xs {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-4-5-3xs {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-3-4-3xs {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-5-7-3xs {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-2-3-3xs {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-9-16-3xs {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-1-2-3xs {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-3-7-3xs,
+    .aspect-9-21-3xs {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-1-3-3xs {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/dist/aspect/4xl/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-4xl) {
+    .aspect-1-1-4xl {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-5-4-4xl {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-4-3-4xl {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-7-5-4xl {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-3-2-4xl {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-16-9-4xl {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-2-1-4xl {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-7-3-4xl,
+    .aspect-21-9-4xl {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-3-1-4xl {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/dist/aspect/4xl/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-4xl) {
+    .aspect-1-1-4xl {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-4-5-4xl {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-3-4-4xl {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-5-7-4xl {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-2-3-4xl {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-9-16-4xl {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-1-2-4xl {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-3-7-4xl,
+    .aspect-9-21-4xl {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-1-3-4xl {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/dist/aspect/5xl/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-5xl) {
+    .aspect-1-1-5xl {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-5-4-5xl {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-4-3-5xl {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-7-5-5xl {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-3-2-5xl {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-16-9-5xl {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-2-1-5xl {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-7-3-5xl,
+    .aspect-21-9-5xl {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-3-1-5xl {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/dist/aspect/5xl/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-5xl) {
+    .aspect-1-1-5xl {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-4-5-5xl {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-3-4-5xl {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-5-7-5xl {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-2-3-5xl {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-9-16-5xl {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-1-2-5xl {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-3-7-5xl,
+    .aspect-9-21-5xl {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-1-3-5xl {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/dist/aspect/lg/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-lg) {
+    .aspect-1-1-lg {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-5-4-lg {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-4-3-lg {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-7-5-lg {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-3-2-lg {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-16-9-lg {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-2-1-lg {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-7-3-lg,
+    .aspect-21-9-lg {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-3-1-lg {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/dist/aspect/lg/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-lg) {
+    .aspect-1-1-lg {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-4-5-lg {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-3-4-lg {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-5-7-lg {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-2-3-lg {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-9-16-lg {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-1-2-lg {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-3-7-lg,
+    .aspect-9-21-lg {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-1-3-lg {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/dist/aspect/md/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-md) {
+    .aspect-1-1-md {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-5-4-md {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-4-3-md {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-7-5-md {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-3-2-md {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-16-9-md {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-2-1-md {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-7-3-md,
+    .aspect-21-9-md {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-3-1-md {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/dist/aspect/md/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--m-md) {
+    .aspect-1-1-md {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-4-5-md {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-3-4-md {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-5-7-md {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-2-3-md {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-9-16-md {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-1-2-md {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-3-7-md,
+    .aspect-9-21-md {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-1-3-md {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}