cacao-css 6.4.0 → 7.1.1

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

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

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

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

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

@@ -4,10 +4,10 @@
 
 @media (--m-xs) {
     .col-1-2-xs {
-        width: calc(50% - var(--gap));
+        width: calc(50% - var(--col-width-adjust));
     }
 
     .col-2-2-xs {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

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

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

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

@@ -4,18 +4,18 @@
 
 @media (--m-xs) {
     .col-1-4-xs {
-        width: calc(25% - var(--gap));
+        width: calc(25% - var(--col-width-adjust));
     }
 
     .col-2-4-xs {
-        width: calc(50% - var(--gap));
+        width: calc(50% - var(--col-width-adjust));
     }
 
     .col-3-4-xs {
-        width: calc(75% - var(--gap));
+        width: calc(75% - var(--col-width-adjust));
     }
 
     .col-4-4-xs {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

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';
 
 
 /* --------------------------------------------*
@@ -1817,6 +1829,8 @@
 /* or include individual files */
 @import 'cacao-css/dist/typography/align.css';
 @import 'cacao-css/dist/typography/break.css';
+@import 'cacao-css/dist/typography/size-variables.css';
+@import 'cacao-css/dist/typography/size.css';
 @import 'cacao-css/dist/typography/style.css';
 @import 'cacao-css/dist/typography/transform.css';
 @import 'cacao-css/dist/typography/weight.css';
@@ -1828,6 +1842,7 @@
 /* or include individual files */
 @import 'cacao-css/dist/typography/3xs/align.css';
 @import 'cacao-css/dist/typography/3xs/break.css';
+@import 'cacao-css/dist/typography/3xs/size.css';
 @import 'cacao-css/dist/typography/3xs/style.css';
 @import 'cacao-css/dist/typography/3xs/transform.css';
 @import 'cacao-css/dist/typography/3xs/weight.css';
@@ -1839,6 +1854,7 @@
 /* or include individual files */
 @import 'cacao-css/dist/typography/2xs/align.css';
 @import 'cacao-css/dist/typography/2xs/break.css';
+@import 'cacao-css/dist/typography/2xs/size.css';
 @import 'cacao-css/dist/typography/2xs/style.css';
 @import 'cacao-css/dist/typography/2xs/transform.css';
 @import 'cacao-css/dist/typography/2xs/weight.css';
@@ -1850,6 +1866,7 @@
 /* or include individual files */
 @import 'cacao-css/dist/typography/xs/align.css';
 @import 'cacao-css/dist/typography/xs/break.css';
+@import 'cacao-css/dist/typography/xs/size.css';
 @import 'cacao-css/dist/typography/xs/style.css';
 @import 'cacao-css/dist/typography/xs/transform.css';
 @import 'cacao-css/dist/typography/xs/weight.css';
@@ -1861,6 +1878,7 @@
 /* or include individual files */
 @import 'cacao-css/dist/typography/sm/align.css';
 @import 'cacao-css/dist/typography/sm/break.css';
+@import 'cacao-css/dist/typography/sm/size.css';
 @import 'cacao-css/dist/typography/sm/style.css';
 @import 'cacao-css/dist/typography/sm/transform.css';
 @import 'cacao-css/dist/typography/sm/weight.css';
@@ -1872,6 +1890,7 @@
 /* or include individual files */
 @import 'cacao-css/dist/typography/md/align.css';
 @import 'cacao-css/dist/typography/md/break.css';
+@import 'cacao-css/dist/typography/md/size.css';
 @import 'cacao-css/dist/typography/md/style.css';
 @import 'cacao-css/dist/typography/md/transform.css';
 @import 'cacao-css/dist/typography/md/weight.css';
@@ -1883,6 +1902,7 @@
 /* or include individual files */
 @import 'cacao-css/dist/typography/lg/align.css';
 @import 'cacao-css/dist/typography/lg/break.css';
+@import 'cacao-css/dist/typography/lg/size.css';
 @import 'cacao-css/dist/typography/lg/style.css';
 @import 'cacao-css/dist/typography/lg/transform.css';
 @import 'cacao-css/dist/typography/lg/weight.css';
@@ -1894,6 +1914,7 @@
 /* or include individual files */
 @import 'cacao-css/dist/typography/xl/align.css';
 @import 'cacao-css/dist/typography/xl/break.css';
+@import 'cacao-css/dist/typography/xl/size.css';
 @import 'cacao-css/dist/typography/xl/style.css';
 @import 'cacao-css/dist/typography/xl/transform.css';
 @import 'cacao-css/dist/typography/xl/weight.css';
@@ -1905,6 +1926,7 @@
 /* or include individual files */
 @import 'cacao-css/dist/typography/2xl/align.css';
 @import 'cacao-css/dist/typography/2xl/break.css';
+@import 'cacao-css/dist/typography/2xl/size.css';
 @import 'cacao-css/dist/typography/2xl/style.css';
 @import 'cacao-css/dist/typography/2xl/transform.css';
 @import 'cacao-css/dist/typography/2xl/weight.css';
@@ -1916,6 +1938,7 @@
 /* or include individual files */
 @import 'cacao-css/dist/typography/3xl/align.css';
 @import 'cacao-css/dist/typography/3xl/break.css';
+@import 'cacao-css/dist/typography/3xl/size.css';
 @import 'cacao-css/dist/typography/3xl/style.css';
 @import 'cacao-css/dist/typography/3xl/transform.css';
 @import 'cacao-css/dist/typography/3xl/weight.css';
@@ -1927,6 +1950,7 @@
 /* or include individual files */
 @import 'cacao-css/dist/typography/4xl/align.css';
 @import 'cacao-css/dist/typography/4xl/break.css';
+@import 'cacao-css/dist/typography/4xl/size.css';
 @import 'cacao-css/dist/typography/4xl/style.css';
 @import 'cacao-css/dist/typography/4xl/transform.css';
 @import 'cacao-css/dist/typography/4xl/weight.css';
@@ -1938,6 +1962,7 @@
 /* or include individual files */
 @import 'cacao-css/dist/typography/5xl/align.css';
 @import 'cacao-css/dist/typography/5xl/break.css';
+@import 'cacao-css/dist/typography/5xl/size.css';
 @import 'cacao-css/dist/typography/5xl/style.css';
 @import 'cacao-css/dist/typography/5xl/transform.css';
 @import 'cacao-css/dist/typography/5xl/weight.css';

package/dist/typography/2xl/combined-import.css

@@ -4,6 +4,7 @@
 
 @import './align.css';
 @import './break.css';
+@import './size.css';
 @import './style.css';
 @import './transform.css';
 @import './weight.css';

package/dist/typography/2xl/size.css

@@ -0,0 +1,97 @@
+/* =========================================================================== *\
+    Font size utilities
+\* =========================================================================== */
+
+@media (--m-2xl) {
+    .font-size-000-2xl {
+        font-size: var(--font-size-000);
+    }
+
+    .font-size-00-2xl {
+        font-size: var(--font-size-00);
+    }
+
+    .font-size-0-2xl {
+        font-size: var(--font-size-0);
+    }
+
+    .font-size-1-2xl {
+        font-size: var(--font-size-1);
+    }
+
+    .font-size-2-2xl {
+        font-size: var(--font-size-2);
+    }
+
+    .font-size-3-2xl {
+        font-size: var(--font-size-3);
+    }
+
+    .font-size-4-2xl {
+        font-size: var(--font-size-4);
+    }
+
+    .font-size-5-2xl {
+        font-size: var(--font-size-5);
+    }
+
+    .font-size-6-2xl {
+        font-size: var(--font-size-6);
+    }
+
+    .font-size-7-2xl {
+        font-size: var(--font-size-7);
+    }
+
+    .font-size-8-2xl {
+        font-size: var(--font-size-8);
+    }
+
+    .font-size-9-2xl {
+        font-size: var(--font-size-9);
+    }
+
+    .font-size-10-2xl {
+        font-size: var(--font-size-10);
+    }
+
+    .font-size-11-2xl {
+        font-size: var(--font-size-11);
+    }
+
+    .font-size-12-2xl {
+        font-size: var(--font-size-12);
+    }
+
+    .font-size-13-2xl {
+        font-size: var(--font-size-13);
+    }
+
+    .font-size-14-2xl {
+        font-size: var(--font-size-14);
+    }
+
+    .font-size-15-2xl {
+        font-size: var(--font-size-15);
+    }
+
+    .font-size-16-2xl {
+        font-size: var(--font-size-16);
+    }
+
+    .font-size-17-2xl {
+        font-size: var(--font-size-17);
+    }
+
+    .font-size-18-2xl {
+        font-size: var(--font-size-18);
+    }
+
+    .font-size-19-2xl {
+        font-size: var(--font-size-19);
+    }
+
+    .font-size-20-2xl {
+        font-size: var(--font-size-20);
+    }
+}

package/dist/typography/2xs/combined-import.css

@@ -4,6 +4,7 @@
 
 @import './align.css';
 @import './break.css';
+@import './size.css';
 @import './style.css';
 @import './transform.css';
 @import './weight.css';