yummacss 2.1.0 → 3.0.0

package/src/utilities/_flexbox.scss

@@ -1,15 +1,22 @@
 @use "sass:math";
+@use "sass:map";
+@use "../abstracts/variables" as vars;
+@use "../abstracts/mixins/" as mix;
+@use "../utilities/maps/" as maps;
 
 $yma-flexbox-utils: (
   "align-content": (
     "prefix": "ac",
+    "properties": (
+      "align-content",
+    ),
     "values": (
       "b": baseline,
       "c": center,
       "fe": flex-end,
       "fs": flex-start,
       "n": normal,
-      "s": stretch,
+      "st": stretch,
       "sa": space-around,
       "sb": space-between,
       "se": space-evenly,
@@ -18,29 +25,46 @@ $yma-flexbox-utils: (
 
   "align-items": (
     "prefix": "ai",
+    "properties": (
+      "align-items",
+    ),
     "values": (
       "b": baseline,
       "c": center,
       "fe": flex-end,
       "fs": flex-start,
-      "s": stretch,
+      "st": stretch,
     ),
   ),
 
   "align-self": (
     "prefix": "as",
+    "properties": (
+      "align-self",
+    ),
     "values": (
       "auto": auto,
       "b": baseline,
       "c": center,
       "fe": flex-end,
       "fs": flex-start,
-      "s": stretch,
+      "st": stretch,
+    ),
+  ),
+
+  "flex-basis": (
+    "prefix": "fb",
+    "properties": (
+      "flex-basis",
     ),
+    "values": maps.$yma-flex-basis-map,
   ),
 
   "flex-direction": (
     "prefix": "fd",
+    "properties": (
+      "flex-direction",
+    ),
     "values": (
       "c": column,
       "cr": column-reverse,
@@ -51,6 +75,9 @@ $yma-flexbox-utils: (
 
   "flex-grow": (
     "prefix": "fg",
+    "properties": (
+      "flex-grow",
+    ),
     "values": (
       "0": 0,
       "1": 1,
@@ -66,6 +93,9 @@ $yma-flexbox-utils: (
 
   "flex-shrink": (
     "prefix": "fs",
+    "properties": (
+      "flex-shrink",
+    ),
     "values": (
       "0": 0,
       "1": 1,
@@ -81,6 +111,9 @@ $yma-flexbox-utils: (
 
   "flex-wrap": (
     "prefix": "fw",
+    "properties": (
+      "flex-wrap",
+    ),
     "values": (
       "nw": nowrap,
       "w": wrap,
@@ -90,6 +123,9 @@ $yma-flexbox-utils: (
 
   "flex": (
     "prefix": "f",
+    "properties": (
+      "flex",
+    ),
     "values": (
       "1": 1 1 0%,
       "2": 2 2 0%,
@@ -104,12 +140,15 @@ $yma-flexbox-utils: (
 
   "justify-content": (
     "prefix": "jc",
+    "properties": (
+      "justify-content",
+    ),
     "values": (
       "c": center,
       "fe": flex-end,
       "fs": flex-start,
       "n": normal,
-      "s": stretch,
+      "st": stretch,
       "sa": space-around,
       "sb": space-between,
       "se": space-evenly,
@@ -118,75 +157,102 @@ $yma-flexbox-utils: (
 
   "justify-items": (
     "prefix": "ji",
+    "properties": (
+      "justify-items",
+    ),
     "values": (
       "c": center,
       "e": end,
       "s": start,
-      "st": stretch
+      "st": stretch,
     ),
   ),
 
   "justify-self": (
     "prefix": "js",
+    "properties": (
+      "justify-self",
+    ),
     "values": (
       "auto": auto,
       "c": center,
       "e": end,
       "s": start,
-      "st": stretch
+      "st": stretch,
     ),
   ),
-);
 
-// base variants
-@each $property, $map in $yma-flexbox-utils {
-  $prefix: map-get($map, "prefix");
-  $values: map-get($map, "values");
-
-  @each $k, $v in $values {
-    @if ($k == "default") {
-      .#{$prefix} {
-        #{$property}: $v;
-      }
-    } @else {
-      .#{$prefix}-#{$k} {
-        #{$property}: $v;
-      }
-    }
-  }
-
-  // hover variants
-  @each $k, $v in $values {
-    @if ($k == "default") {
-      .h\:#{$prefix}:hover {
-        #{$property}: $v;
-      }
-    } @else {
-      .h\:#{$prefix}-#{$k}:hover {
-        #{$property}: $v;
-      }
-    }
-  }
-
-  // responsive variants
-  @each $bp, $bp-value in $yma-breakpoints {
-    @each $k, $v in $values {
-      .#{$bp}\:#{$prefix}-#{$k} {
-        @media (min-width: $bp-value) {
-          #{$property}: $v;
-        }
-      }
-    }
-  }
-}
+  "order": (
+    "prefix": "or",
+    "properties": (
+      "order",
+    ),
+    "values": (
+      "l": -9999,
+      "0": 0,
+      "1": 1,
+      "2": 2,
+      "3": 3,
+      "4": 4,
+      "5": 5,
+      "6": 6,
+      "7": 7,
+      "8": 8,
+      "9": 9,
+      "10": 1,
+      "f": 9999,
+    ),
+  ),
+
+  "place-content": (
+    "prefix": "pc",
+    "properties": (
+      "place-content",
+    ),
+    "values": (
+      "b": baseline,
+      "c": center,
+      "e": end,
+      "s": start,
+      "sa": space-around,
+      "sb": space-between,
+      "se": space-evenly,
+      "st": stretch,
+    ),
+  ),
 
-// variants
-@include variants("flex-basis", "fb", $yma-flex-basis);
+  "place-items": (
+    "prefix": "pi",
+    "properties": (
+      "place-items",
+    ),
+    "values": (
+      "b": baseline,
+      "c": center,
+      "e": end,
+      "s": start,
+      "st": stretch,
+    ),
+  ),
 
-// extensions
-@include extensions(
-  $yma-extension,
-  (
-    "fb": flex-basis,
-  )
+  "place-self": (
+    "prefix": "ps",
+    "properties": (
+      "place-self",
+    ),
+    "values": (
+      "auto": auto,
+      "c": center,
+      "e": end,
+      "s": start,
+      "st": stretch,
+    ),
+  ),
 );
+
+@each $name, $map in $yma-flexbox-utils {
+  $prefix: map.get($map, "prefix");
+  $properties: map.get($map, "properties");
+
+  @include mix.create-utilities($map, $prefix, $properties);
+}

package/src/utilities/_grid.scss

@@ -1,55 +1,32 @@
 @use "sass:math";
+@use "sass:map";
+@use "sass:meta";
+@use "../abstracts/variables" as vars;
+@use "../abstracts/mixins/" as mix;
+@use "../utilities/maps/" as maps;
 
 $yma-grid-utils: (
   "column-gap": (
     "prefix": "cg",
-    "values": (
-      "0": $yma-column-gap * 0,
-      "1": $yma-column-gap,
-      "2": $yma-column-gap * 2,
-      "3": $yma-column-gap * 3,
-      "4": $yma-column-gap * 4,
-      "5": $yma-column-gap * 5,
-      "6": $yma-column-gap * 6,
-      "7": $yma-column-gap * 7,
-      "8": $yma-column-gap * 8,
-      "9": $yma-column-gap * 9,
-      "10": $yma-column-gap * 10,
-      "11": $yma-column-gap * 11,
-      "12": $yma-column-gap * 12,
-      "13": $yma-column-gap * 13,
-      "14": $yma-column-gap * 14,
-      "15": $yma-column-gap * 15,
-      "16": $yma-column-gap * 16,
+    "properties": (
+      "column-gap",
     ),
+    "values": maps.$yma-gap-map,
   ),
 
   "gap": (
     "prefix": "g",
-    "values": (
-      "0": $yma-gap * 0,
-      "1": $yma-gap,
-      "2": $yma-gap * 2,
-      "3": $yma-gap * 3,
-      "4": $yma-gap * 4,
-      "5": $yma-gap * 5,
-      "6": $yma-gap * 6,
-      "7": $yma-gap * 7,
-      "8": $yma-gap * 8,
-      "9": $yma-gap * 9,
-      "10": $yma-gap * 10,
-      "11": $yma-gap * 11,
-      "12": $yma-gap * 12,
-      "13": $yma-gap * 13,
-      "14": $yma-gap * 14,
-      "15": $yma-gap * 15,
-      "16": $yma-gap * 16,
-      "none": none,
+    "properties": (
+      "gap",
     ),
+    "values": maps.$yma-gap-map,
   ),
 
   "grid-auto-columns": (
     "prefix": "gac",
+    "properties": (
+      "grid-auto-columns",
+    ),
     "values": (
       "auto": auto,
       "max": max-content,
@@ -59,10 +36,13 @@ $yma-grid-utils: (
 
   "grid-auto-flow": (
     "prefix": "gaf",
+    "properties": (
+      "grid-auto-flow",
+    ),
     "values": (
       "c": column,
+      "cd": column dense,
       "d": dense,
-      "dr": dense row,
       "r": row,
       "rd": row dense,
     ),
@@ -70,6 +50,9 @@ $yma-grid-utils: (
 
   "grid-auto-rows": (
     "prefix": "gar",
+    "properties": (
+      "grid-auto-rows",
+    ),
     "values": (
       "auto": auto,
       "max": max-content,
@@ -79,6 +62,9 @@ $yma-grid-utils: (
 
   "grid-column": (
     "prefix": "gc-s",
+    "properties": (
+      "grid-column",
+    ),
     "values": (
       "1": span 1 / span 1,
       "2": span 2 / span 2,
@@ -101,6 +87,9 @@ $yma-grid-utils: (
 
   "grid-column-end": (
     "prefix": "gce",
+    "properties": (
+      "grid-column-end",
+    ),
     "values": (
       "1": 1,
       "2": 2,
@@ -123,6 +112,9 @@ $yma-grid-utils: (
 
   "grid-column-start": (
     "prefix": "gcs",
+    "properties": (
+      "grid-column-start",
+    ),
     "values": (
       "1": 1,
       "2": 2,
@@ -145,6 +137,9 @@ $yma-grid-utils: (
 
   "grid-row": (
     "prefix": "gr-s",
+    "properties": (
+      "grid-row",
+    ),
     "values": (
       "1": span 1 / span 1,
       "2": span 2 / span 2,
@@ -167,6 +162,9 @@ $yma-grid-utils: (
 
   "grid-row-end": (
     "prefix": "gre",
+    "properties": (
+      "grid-row-end",
+    ),
     "values": (
       "1": 1,
       "2": 2,
@@ -189,6 +187,9 @@ $yma-grid-utils: (
 
   "grid-row-start": (
     "prefix": "grs",
+    "properties": (
+      "grid-row-start",
+    ),
     "values": (
       "1": 1,
       "2": 2,
@@ -211,6 +212,9 @@ $yma-grid-utils: (
 
   "grid-template-columns": (
     "prefix": "gtc",
+    "properties": (
+      "grid-template-columns",
+    ),
     "values": (
       "1": repeat(1, minmax(0, 1fr)),
       "2": repeat(2, minmax(0, 1fr)),
@@ -233,6 +237,9 @@ $yma-grid-utils: (
 
   "grid-template-rows": (
     "prefix": "gtr",
+    "properties": (
+      "grid-template-rows",
+    ),
     "values": (
       "1": repeat(1, minmax(0, 1fr)),
       "2": repeat(2, minmax(0, 1fr)),
@@ -255,66 +262,16 @@ $yma-grid-utils: (
 
   "row-gap": (
     "prefix": "rg",
-    "values": (
-      "0": $yma-row-gap * 0,
-      "1": $yma-row-gap,
-      "2": $yma-row-gap * 2,
-      "3": $yma-row-gap * 3,
-      "4": $yma-row-gap * 4,
-      "5": $yma-row-gap * 5,
-      "6": $yma-row-gap * 6,
-      "7": $yma-row-gap * 7,
-      "8": $yma-row-gap * 8,
-      "9": $yma-row-gap * 9,
-      "10": $yma-row-gap * 10,
-      "11": $yma-row-gap * 11,
-      "12": $yma-row-gap * 12,
-      "13": $yma-row-gap * 13,
-      "14": $yma-row-gap * 14,
-      "15": $yma-row-gap * 15,
-      "16": $yma-row-gap * 16,
+    "properties": (
+      "row-gap",
     ),
+    "values": maps.$yma-gap-map,
   ),
 );
 
-// base variants
-@each $property, $map in $yma-grid-utils {
-  $prefix: map-get($map, "prefix");
-  $values: map-get($map, "values");
-
-  @each $k, $v in $values {
-    @if ($k == "default") {
-      .#{$prefix} {
-        #{$property}: $v;
-      }
-    } @else {
-      .#{$prefix}-#{$k} {
-        #{$property}: $v;
-      }
-    }
-  }
-
-  // hover variants
-  @each $k, $v in $values {
-    @if ($k == "default") {
-      .h\:#{$prefix}:hover {
-        #{$property}: $v;
-      }
-    } @else {
-      .h\:#{$prefix}-#{$k}:hover {
-        #{$property}: $v;
-      }
-    }
-  }
+@each $name, $map in $yma-grid-utils {
+  $prefix: map.get($map, "prefix");
+  $properties: map.get($map, "properties");
 
-  // responsive variants
-  @each $bp, $bp-value in $yma-breakpoints {
-    @each $k, $v in $values {
-      .#{$bp}\:#{$prefix}-#{$k} {
-        @media (min-width: $bp-value) {
-          #{$property}: $v;
-        }
-      }
-    }
-  }
+  @include mix.create-utilities($map, $prefix, $properties);
 }

package/src/utilities/_index.scss

@@ -0,0 +1,14 @@
+@forward "background";
+@forward "border";
+@forward "box-model";
+@forward "color";
+@forward "effect";
+@forward "flexbox";
+@forward "grid";
+@forward "interactivity";
+@forward "positioning";
+@forward "outline";
+@forward "svg";
+@forward "table";
+@forward "transform";
+@forward "typography";