cacao-css 5.5.0 → 6.1.0

package/dist/margin/xs/start.css

@@ -0,0 +1,69 @@
+/* =========================================================================== *
+   Start margin utilities
+ * =========================================================================== */
+
+@media (--m-xs) {
+    .ms-0-xs {
+        margin-left: var(--margin-0);
+    }
+
+    .ms-1-xs {
+        margin-left: var(--margin-1);
+    }
+
+    .ms-2-xs {
+        margin-left: var(--margin-2);
+    }
+
+    .ms-3-xs {
+        margin-left: var(--margin-3);
+    }
+
+    .ms-4-xs {
+        margin-left: var(--margin-4);
+    }
+
+    .ms-5-xs {
+        margin-left: var(--margin-5);
+    }
+
+    .ms-6-xs {
+        margin-left: var(--margin-6);
+    }
+
+    .ms-7-xs {
+        margin-left: var(--margin-7);
+    }
+
+    .ms-8-xs {
+        margin-left: var(--margin-8);
+    }
+
+    .ms-9-xs {
+        margin-left: var(--margin-9);
+    }
+
+    .ms-10-xs {
+        margin-left: var(--margin-10);
+    }
+
+    .ms-11-xs {
+        margin-left: var(--margin-11);
+    }
+
+    .ms-12-xs {
+        margin-left: var(--margin-12);
+    }
+
+    .ms-13-xs {
+        margin-left: var(--margin-13);
+    }
+
+    .ms-14-xs {
+        margin-left: var(--margin-14);
+    }
+
+    .ms-15-xs {
+        margin-left: var(--margin-15);
+    }
+}

package/dist/margin/xs/top.css

@@ -0,0 +1,69 @@
+/* =========================================================================== *
+   Top margin utilities
+ * =========================================================================== */
+
+@media (--m-xs) {
+    .mt-0-xs {
+        margin-top: var(--margin-0);
+    }
+
+    .mt-1-xs {
+        margin-top: var(--margin-1);
+    }
+
+    .mt-2-xs {
+        margin-top: var(--margin-2);
+    }
+
+    .mt-3-xs {
+        margin-top: var(--margin-3);
+    }
+
+    .mt-4-xs {
+        margin-top: var(--margin-4);
+    }
+
+    .mt-5-xs {
+        margin-top: var(--margin-5);
+    }
+
+    .mt-6-xs {
+        margin-top: var(--margin-6);
+    }
+
+    .mt-7-xs {
+        margin-top: var(--margin-7);
+    }
+
+    .mt-8-xs {
+        margin-top: var(--margin-8);
+    }
+
+    .mt-9-xs {
+        margin-top: var(--margin-9);
+    }
+
+    .mt-10-xs {
+        margin-top: var(--margin-10);
+    }
+
+    .mt-11-xs {
+        margin-top: var(--margin-11);
+    }
+
+    .mt-12-xs {
+        margin-top: var(--margin-12);
+    }
+
+    .mt-13-xs {
+        margin-top: var(--margin-13);
+    }
+
+    .mt-14-xs {
+        margin-top: var(--margin-14);
+    }
+
+    .mt-15-xs {
+        margin-top: var(--margin-15);
+    }
+}

package/dist/margin/xs/vertical.css

@@ -0,0 +1,85 @@
+/* =========================================================================== *
+   Vertical margin utilities
+ * =========================================================================== */
+
+@media (--m-xs) {
+    .my-0-xs {
+        margin-bottom: var(--margin-0);
+        margin-top: var(--margin-0);
+    }
+
+    .my-1-xs {
+        margin-bottom: var(--margin-1);
+        margin-top: var(--margin-1);
+    }
+
+    .my-2-xs {
+        margin-bottom: var(--margin-2);
+        margin-top: var(--margin-2);
+    }
+
+    .my-3-xs {
+        margin-bottom: var(--margin-3);
+        margin-top: var(--margin-3);
+    }
+
+    .my-4-xs {
+        margin-bottom: var(--margin-4);
+        margin-top: var(--margin-4);
+    }
+
+    .my-5-xs {
+        margin-bottom: var(--margin-5);
+        margin-top: var(--margin-5);
+    }
+
+    .my-6-xs {
+        margin-bottom: var(--margin-6);
+        margin-top: var(--margin-6);
+    }
+
+    .my-7-xs {
+        margin-bottom: var(--margin-7);
+        margin-top: var(--margin-7);
+    }
+
+    .my-8-xs {
+        margin-bottom: var(--margin-8);
+        margin-top: var(--margin-8);
+    }
+
+    .my-9-xs {
+        margin-bottom: var(--margin-9);
+        margin-top: var(--margin-9);
+    }
+
+    .my-10-xs {
+        margin-bottom: var(--margin-10);
+        margin-top: var(--margin-10);
+    }
+
+    .my-11-xs {
+        margin-bottom: var(--margin-11);
+        margin-top: var(--margin-11);
+    }
+
+    .my-12-xs {
+        margin-bottom: var(--margin-12);
+        margin-top: var(--margin-12);
+    }
+
+    .my-13-xs {
+        margin-bottom: var(--margin-13);
+        margin-top: var(--margin-13);
+    }
+
+    .my-14-xs {
+        margin-bottom: var(--margin-14);
+        margin-top: var(--margin-14);
+    }
+
+    .my-15-xs {
+        margin-bottom: var(--margin-15);
+        margin-top: var(--margin-15);
+    }
+}

package/dist/media.css

@@ -0,0 +1,114 @@
+/* =========================================================================== *\
+    Custom media queries.
+    Because @custom-media is not yet supported a PostCSS plugin is required.
+    https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media
+
+    Naming conventions:
+    - The prefix --m- is used to indicate that these are media queries.
+    - The variable must be all lowercase.
+\* =========================================================================== */
+
+/* Accessibility preferences */
+@custom-media --m-motion-ok (prefers-reduced-motion: no-preference);
+@custom-media --m-motion-not-ok (prefers-reduced-motion: reduce);
+@custom-media --m-opacity-ok (prefers-reduced-transparency: no-preference);
+@custom-media --m-opacity-not-ok (prefers-reduced-transparency: reduce);
+
+/* Data preferences */
+@custom-media --m-use-data-ok (prefers-reduced-data: no-preference);
+@custom-media --m-use-data-not-ok (prefers-reduced-data: reduce);
+
+/* Color preferences */
+@custom-media --m-dark (prefers-color-scheme: dark);
+@custom-media --m-light (prefers-color-scheme: light);
+@custom-media --m-high-contrast (prefers-contrast: more);
+@custom-media --m-low-contrast (prefers-contrast: less);
+@custom-media --m-inverted-colors (inverted-colors: inverted);
+@custom-media --m-forced-colors (forced-colors: active);
+
+/* Orientation */
+@custom-media --m-portrait (orientation: portrait);
+@custom-media --m-landscape (orientation: landscape);
+
+/* Pointer types */
+@custom-media --m-touch (hover: none) and (pointer: coarse);
+@custom-media --m-stylus (hover: none) and (pointer: fine);
+@custom-media --m-pointer (hover) and (pointer: coarse);
+@custom-media --m-mouse (hover) and (pointer: fine);
+
+/* Color capabilities */
+@custom-media --m-hd-color (dynamic-range: high) or (color-gamut: p3);
+
+/**
+ * Screen sizes
+ *
+ * These breakpoints are inspired by:
+ * - Pure.(https://purecss.io/grids/#:~:text=%3C/div%3E-,Default%20Media%20Queries,-When%20using%20Responsive)
+ * - Bootstrap (https://getbootstrap.com/docs/5.3/layout/breakpoints/#available-breakpoints)
+ * - Open Props (https://open-props.style/#media-queries)
+ * - https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide
+ * - https://www.browserstack.com/guide/common-screen-resolutions
+ * - 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.
+ * 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/
+ */
+
+/* 3xs */
+@custom-media --m-3xs (width >= 240px);
+@custom-media --m-3xs-below (width < 240px);
+@custom-media --m-3xs-only (0 <= width < 240px);
+
+/* 2xs */
+@custom-media --m-2xs (width >= 360px);
+@custom-media --m-2xs-below (width < 300px);
+@custom-media --m-2xs-only (0 <= width < 300px);
+
+/* xs */
+@custom-media --m-xs (width >= 420px);
+@custom-media --m-xs-below (width < 420px);
+@custom-media --m-xs-only (300px <= width < 420px);
+
+/* sm */
+@custom-media --m-sm (width >= 576px);
+@custom-media --m-sm-below (width < 576px);
+@custom-media --m-sm-only (360px <= width < 576px);
+
+/* md */
+@custom-media --m-md (width >= 768px);
+@custom-media --m-md-below (width < 768px);
+@custom-media --m-md-only (576px <= width < 768px);
+
+/* lg */
+@custom-media --m-lg (width >= 1024px);
+@custom-media --m-lg-below (width < 1024px);
+@custom-media --m-lg-only (768px <= width < 1024px);
+
+/* xl */
+@custom-media --m-xl (width >= 1280px);
+@custom-media --m-xl-below (width < 1280px);
+@custom-media --m-xl-only (1024px <= width < 1280px);
+
+/* 2xl */
+@custom-media --m-2xl (width >= 1440px);
+@custom-media --m-2xl-only (1280px <= width < 1440px);
+@custom-media --m-2xl-below (width < 1440px);
+
+/* 3xl */
+@custom-media --m-3xl (width >= 1600px);
+@custom-media --m-3xl-only (1440px <= width < 1600px);
+@custom-media --m-3xl-below (width < 1600px);
+
+/* 4xl */
+@custom-media --m-4xl (width >= 1920px);
+@custom-media --m-4xl-only (1600px <= width < 1920px);
+@custom-media --m-4xl-below (width < 1920px);
+
+/* 5xl */
+@custom-media --m-5xl (width >= 2560px);
+@custom-media --m-5xl-only (1920px <= width < 2560px);
+@custom-media --m-5xl-below (width < 2560px);

package/dist/padding/2xl/all.css

@@ -0,0 +1,69 @@
+/* =========================================================================== *
+   All sides padding utilities
+ * =========================================================================== */
+
+@media (--m-2xl) {
+    .p-0-2xl {
+        padding: var(--padding-0);
+    }
+
+    .p-1-2xl {
+        padding: var(--padding-1);
+    }
+
+    .p-2-2xl {
+        padding: var(--padding-2);
+    }
+
+    .p-3-2xl {
+        padding: var(--padding-3);
+    }
+
+    .p-4-2xl {
+        padding: var(--padding-4);
+    }
+
+    .p-5-2xl {
+        padding: var(--padding-5);
+    }
+
+    .p-6-2xl {
+        padding: var(--padding-6);
+    }
+
+    .p-7-2xl {
+        padding: var(--padding-7);
+    }
+
+    .p-8-2xl {
+        padding: var(--padding-8);
+    }
+
+    .p-9-2xl {
+        padding: var(--padding-9);
+    }
+
+    .p-10-2xl {
+        padding: var(--padding-10);
+    }
+
+    .p-11-2xl {
+        padding: var(--padding-11);
+    }
+
+    .p-12-2xl {
+        padding: var(--padding-12);
+    }
+
+    .p-13-2xl {
+        padding: var(--padding-13);
+    }
+
+    .p-14-2xl {
+        padding: var(--padding-14);
+    }
+
+    .p-15-2xl {
+        padding: var(--padding-15);
+    }
+}

package/dist/padding/2xl/bottom.css

@@ -0,0 +1,69 @@
+/* =========================================================================== *
+   Bottom padding utilities
+ * =========================================================================== */
+
+@media (--m-2xl) {
+    .pb-0-2xl {
+        padding-bottom: var(--padding-0);
+    }
+
+    .pb-1-2xl {
+        padding-bottom: var(--padding-1);
+    }
+
+    .pb-2-2xl {
+        padding-bottom: var(--padding-2);
+    }
+
+    .pb-3-2xl {
+        padding-bottom: var(--padding-3);
+    }
+
+    .pb-4-2xl {
+        padding-bottom: var(--padding-4);
+    }
+
+    .pb-5-2xl {
+        padding-bottom: var(--padding-5);
+    }
+
+    .pb-6-2xl {
+        padding-bottom: var(--padding-6);
+    }
+
+    .pb-7-2xl {
+        padding-bottom: var(--padding-7);
+    }
+
+    .pb-8-2xl {
+        padding-bottom: var(--padding-8);
+    }
+
+    .pb-9-2xl {
+        padding-bottom: var(--padding-9);
+    }
+
+    .pb-10-2xl {
+        padding-bottom: var(--padding-10);
+    }
+
+    .pb-11-2xl {
+        padding-bottom: var(--padding-11);
+    }
+
+    .pb-12-2xl {
+        padding-bottom: var(--padding-12);
+    }
+
+    .pb-13-2xl {
+        padding-bottom: var(--padding-13);
+    }
+
+    .pb-14-2xl {
+        padding-bottom: var(--padding-14);
+    }
+
+    .pb-15-2xl {
+        padding-bottom: var(--padding-15);
+    }
+}

package/dist/padding/2xl/end.css

@@ -0,0 +1,69 @@
+/* =========================================================================== *
+   End padding utilities
+ * =========================================================================== */
+
+@media (--m-2xl) {
+    .pe-0-2xl {
+        padding-right: var(--padding-0);
+    }
+
+    .pe-1-2xl {
+        padding-right: var(--padding-1);
+    }
+
+    .pe-2-2xl {
+        padding-right: var(--padding-2);
+    }
+
+    .pe-3-2xl {
+        padding-right: var(--padding-3);
+    }
+
+    .pe-4-2xl {
+        padding-right: var(--padding-4);
+    }
+
+    .pe-5-2xl {
+        padding-right: var(--padding-5);
+    }
+
+    .pe-6-2xl {
+        padding-right: var(--padding-6);
+    }
+
+    .pe-7-2xl {
+        padding-right: var(--padding-7);
+    }
+
+    .pe-8-2xl {
+        padding-right: var(--padding-8);
+    }
+
+    .pe-9-2xl {
+        padding-right: var(--padding-9);
+    }
+
+    .pe-10-2xl {
+        padding-right: var(--padding-10);
+    }
+
+    .pe-11-2xl {
+        padding-right: var(--padding-11);
+    }
+
+    .pe-12-2xl {
+        padding-right: var(--padding-12);
+    }
+
+    .pe-13-2xl {
+        padding-right: var(--padding-13);
+    }
+
+    .pe-14-2xl {
+        padding-right: var(--padding-14);
+    }
+
+    .pe-15-2xl {
+        padding-right: var(--padding-15);
+    }
+}

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

@@ -0,0 +1,85 @@
+/* =========================================================================== *
+   Horizontal padding utilities
+ * =========================================================================== */
+
+@media (--m-2xl) {
+    .px-0-2xl {
+        padding-left: var(--padding-0);
+        padding-right: var(--padding-0);
+    }
+
+    .px-1-2xl {
+        padding-left: var(--padding-1);
+        padding-right: var(--padding-1);
+    }
+
+    .px-2-2xl {
+        padding-left: var(--padding-2);
+        padding-right: var(--padding-2);
+    }
+
+    .px-3-2xl {
+        padding-left: var(--padding-3);
+        padding-right: var(--padding-3);
+    }
+
+    .px-4-2xl {
+        padding-left: var(--padding-4);
+        padding-right: var(--padding-4);
+    }
+
+    .px-5-2xl {
+        padding-left: var(--padding-5);
+        padding-right: var(--padding-5);
+    }
+
+    .px-6-2xl {
+        padding-left: var(--padding-6);
+        padding-right: var(--padding-6);
+    }
+
+    .px-7-2xl {
+        padding-left: var(--padding-7);
+        padding-right: var(--padding-7);
+    }
+
+    .px-8-2xl {
+        padding-left: var(--padding-8);
+        padding-right: var(--padding-8);
+    }
+
+    .px-9-2xl {
+        padding-left: var(--padding-9);
+        padding-right: var(--padding-9);
+    }
+
+    .px-10-2xl {
+        padding-left: var(--padding-10);
+        padding-right: var(--padding-10);
+    }
+
+    .px-11-2xl {
+        padding-left: var(--padding-11);
+        padding-right: var(--padding-11);
+    }
+
+    .px-12-2xl {
+        padding-left: var(--padding-12);
+        padding-right: var(--padding-12);
+    }
+
+    .px-13-2xl {
+        padding-left: var(--padding-13);
+        padding-right: var(--padding-13);
+    }
+
+    .px-14-2xl {
+        padding-left: var(--padding-14);
+        padding-right: var(--padding-14);
+    }
+
+    .px-15-2xl {
+        padding-left: var(--padding-15);
+        padding-right: var(--padding-15);
+    }
+}

package/dist/padding/2xl/padding.css

@@ -0,0 +1,11 @@
+/* =========================================================================== *
+   Margin utilities - 2xl - imports all the 2xl margin utility files
+ * =========================================================================== */
+
+@import './all.css';
+@import './bottom.css';
+@import './end.css';
+@import './horizontal.css';
+@import './start.css';
+@import './top.css';
+@import './vertical.css';

package/dist/padding/2xl/start.css

@@ -0,0 +1,69 @@
+/* =========================================================================== *
+   Start padding utilities
+ * =========================================================================== */
+
+@media (--m-2xl) {
+    .ps-0-2xl {
+        padding-left: var(--padding-0);
+    }
+
+    .ps-1-2xl {
+        padding-left: var(--padding-1);
+    }
+
+    .ps-2-2xl {
+        padding-left: var(--padding-2);
+    }
+
+    .ps-3-2xl {
+        padding-left: var(--padding-3);
+    }
+
+    .ps-4-2xl {
+        padding-left: var(--padding-4);
+    }
+
+    .ps-5-2xl {
+        padding-left: var(--padding-5);
+    }
+
+    .ps-6-2xl {
+        padding-left: var(--padding-6);
+    }
+
+    .ps-7-2xl {
+        padding-left: var(--padding-7);
+    }
+
+    .ps-8-2xl {
+        padding-left: var(--padding-8);
+    }
+
+    .ps-9-2xl {
+        padding-left: var(--padding-9);
+    }
+
+    .ps-10-2xl {
+        padding-left: var(--padding-10);
+    }
+
+    .ps-11-2xl {
+        padding-left: var(--padding-11);
+    }
+
+    .ps-12-2xl {
+        padding-left: var(--padding-12);
+    }
+
+    .ps-13-2xl {
+        padding-left: var(--padding-13);
+    }
+
+    .ps-14-2xl {
+        padding-left: var(--padding-14);
+    }
+
+    .ps-15-2xl {
+        padding-left: var(--padding-15);
+    }
+}