cacao-css 6.3.0 → 7.0.0

package/dist/grid-column/xs/col-5.css

@@ -4,22 +4,22 @@
 
 @media (--m-xs) {
     .col-1-5-xs {
-        width: calc(20% - var(--gap));
+        width: calc(20% - var(--col-width-adjust));
     }
 
     .col-2-5-xs {
-        width: calc(40% - var(--gap));
+        width: calc(40% - var(--col-width-adjust));
     }
 
     .col-3-5-xs {
-        width: calc(60% - var(--gap));
+        width: calc(60% - var(--col-width-adjust));
     }
 
     .col-4-5-xs {
-        width: calc(80% - var(--gap));
+        width: calc(80% - var(--col-width-adjust));
     }
 
     .col-5-5-xs {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/xs/col-6.css

@@ -4,26 +4,26 @@
 
 @media (--m-xs) {
     .col-1-6-xs {
-        width: calc(100% / 6 - var(--gap));
+        width: calc(100% / 6 - var(--col-width-adjust));
     }
 
     .col-2-6-xs {
-        width: calc(100% / 6 * 2 - var(--gap));
+        width: calc(100% / 6 * 2 - var(--col-width-adjust));
     }
 
     .col-3-6-xs {
-        width: calc(50% - var(--gap));
+        width: calc(50% - var(--col-width-adjust));
     }
 
     .col-4-6-xs {
-        width: calc(100% / 6 * 4 - var(--gap));
+        width: calc(100% / 6 * 4 - var(--col-width-adjust));
     }
 
     .col-5-6-xs {
-        width: calc(100% / 6 * 5 - var(--gap));
+        width: calc(100% / 6 * 5 - var(--col-width-adjust));
     }
 
     .col-6-6-xs {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/xs/col-7.css

@@ -4,30 +4,30 @@
 
 @media (--m-xs) {
     .col-1-7-xs {
-        width: calc(100% / 7 - var(--gap));
+        width: calc(100% / 7 - var(--col-width-adjust));
     }
 
     .col-2-7-xs {
-        width: calc(100% / 7 * 2 - var(--gap));
+        width: calc(100% / 7 * 2 - var(--col-width-adjust));
     }
 
     .col-3-7-xs {
-        width: calc(100% / 7 * 3 - var(--gap));
+        width: calc(100% / 7 * 3 - var(--col-width-adjust));
     }
 
     .col-4-7-xs {
-        width: calc(100% / 7 * 4 - var(--gap));
+        width: calc(100% / 7 * 4 - var(--col-width-adjust));
     }
 
     .col-5-7-xs {
-        width: calc(100% / 7 * 5 - var(--gap));
+        width: calc(100% / 7 * 5 - var(--col-width-adjust));
     }
 
     .col-6-7-xs {
-        width: calc(100% / 7 * 6 - var(--gap));
+        width: calc(100% / 7 * 6 - var(--col-width-adjust));
     }
 
     .col-7-7-xs {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/xs/col-8.css

@@ -4,34 +4,34 @@
 
 @media (--m-xs) {
     .col-1-8-xs {
-        width: calc(100% / 8 - var(--gap));
+        width: calc(100% / 8 - var(--col-width-adjust));
     }
 
     .col-2-8-xs {
-        width: calc(25% - var(--gap));
+        width: calc(25% - var(--col-width-adjust));
     }
 
     .col-3-8-xs {
-        width: calc(100% / 8 * 3 - var(--gap));
+        width: calc(100% / 8 * 3 - var(--col-width-adjust));
     }
 
     .col-4-8-xs {
-        width: calc(50% - var(--gap));
+        width: calc(50% - var(--col-width-adjust));
     }
 
     .col-5-8-xs {
-        width: calc(100% / 8 * 5 - var(--gap));
+        width: calc(100% / 8 * 5 - var(--col-width-adjust));
     }
 
     .col-6-8-xs {
-        width: calc(75% - var(--gap));
+        width: calc(75% - var(--col-width-adjust));
     }
 
     .col-7-8-xs {
-        width: calc(100% / 8 * 7 - var(--gap));
+        width: calc(100% / 8 * 7 - var(--col-width-adjust));
     }
 
     .col-8-8-xs {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/xs/col-9.css

@@ -4,38 +4,38 @@
 
 @media (--m-xs) {
     .col-1-9-xs {
-        width: calc(100% / 9 - var(--gap));
+        width: calc(100% / 9 - var(--col-width-adjust));
     }
 
     .col-2-9-xs {
-        width: calc(100% / 9 * 2 - var(--gap));
+        width: calc(100% / 9 * 2 - var(--col-width-adjust));
     }
 
     .col-3-9-xs {
-        width: calc(100% / 9 * 3 - var(--gap));
+        width: calc(100% / 9 * 3 - var(--col-width-adjust));
     }
 
     .col-4-9-xs {
-        width: calc(100% / 9 * 4 - var(--gap));
+        width: calc(100% / 9 * 4 - var(--col-width-adjust));
     }
 
     .col-5-9-xs {
-        width: calc(100% / 9 * 5 - var(--gap));
+        width: calc(100% / 9 * 5 - var(--col-width-adjust));
     }
 
     .col-6-9-xs {
-        width: calc(100% / 9 * 6 - var(--gap));
+        width: calc(100% / 9 * 6 - var(--col-width-adjust));
     }
 
     .col-7-9-xs {
-        width: calc(100% / 9 * 7 - var(--gap));
+        width: calc(100% / 9 * 7 - var(--col-width-adjust));
     }
 
     .col-8-9-xs {
-        width: calc(100% / 9 * 8 - var(--gap));
+        width: calc(100% / 9 * 8 - var(--col-width-adjust));
     }
 
     .col-9-9-xs {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/imports.css

@@ -333,39 +333,51 @@
  * ------------------------------------------- */
 
 @import 'cacao-css/dist/grid/grid.css';
+@import 'cacao-css/dist/grid/num-columns.css';
 
 /* Grid (3xs) */
 @import 'cacao-css/dist/grid/3xs/grid.css';
+@import 'cacao-css/dist/grid/3xs/num-columns.css';
 
 /* Grid (2xs) */
 @import 'cacao-css/dist/grid/2xs/grid.css';
+@import 'cacao-css/dist/grid/2xs/num-columns.css';
 
 /* Grid (xs) */
 @import 'cacao-css/dist/grid/xs/grid.css';
+@import 'cacao-css/dist/grid/xs/num-columns.css';
 
 /* Grid (sm) */
 @import 'cacao-css/dist/grid/sm/grid.css';
+@import 'cacao-css/dist/grid/sm/num-columns.css';
 
 /* Grid (md) */
 @import 'cacao-css/dist/grid/md/grid.css';
+@import 'cacao-css/dist/grid/md/num-columns.css';
 
 /* Grid (lg) */
 @import 'cacao-css/dist/grid/lg/grid.css';
+@import 'cacao-css/dist/grid/lg/num-columns.css';
 
 /* Grid (xl) */
 @import 'cacao-css/dist/grid/xl/grid.css';
+@import 'cacao-css/dist/grid/xl/num-columns.css';
 
 /* Grid (2xl) */
 @import 'cacao-css/dist/grid/2xl/grid.css';
+@import 'cacao-css/dist/grid/2xl/num-columns.css';
 
 /* Grid (3xl) */
 @import 'cacao-css/dist/grid/3xl/grid.css';
+@import 'cacao-css/dist/grid/3xl/num-columns.css';
 
 /* Grid (4xl) */
 @import 'cacao-css/dist/grid/4xl/grid.css';
+@import 'cacao-css/dist/grid/4xl/num-columns.css';
 
 /* Grid (5xl) */
 @import 'cacao-css/dist/grid/5xl/grid.css';
+@import 'cacao-css/dist/grid/5xl/num-columns.css';
 
 
 /* --------------------------------------------*

package/dist/media.css

@@ -51,11 +51,14 @@
  * - And our own usage in building websites
  *
  * Cacao is a mobile-first system.
- * We don't use min-width or max-width because we follow Stylelint's media-feature-rante-notation rule.
+ * We don't use min-width or max-width because we follow Stylelint's media-feature-range-notation rule.
  * https://stylelint.io/user-guide/rules/media-feature-range-notation/
  *
  * We use pixels instead of ems because that is the convention and it helps prevent a Safari bug with how they calculate ems (i.e. they use font-size + zoom level)
  * https://cgamesplay.com/post/2023/05/19/stop-using-em-in-media-queries/
+ *
+ * https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ is another viewpoint on this and considers users increacing the default
+ * font size in their browser settings. Need to explore this more. 10/26/2024
  */
 
 /* 3xs */

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": "6.3.0",
+    "version": "7.0.0",
     "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
     "license": "MIT",
     "repository": {