yummacss 2.1.0 → 3.0.1

package/src/utilities/_color.scss

@@ -0,0 +1,85 @@
+@use "sass:color";
+@use "sass:map";
+@use "../abstracts/mixins" as mix;
+@use "../abstracts/functions" as fun;
+@use "../abstracts/_theme" as theme;
+
+$yma-color-utils: (
+  "accent-color": (
+    "prefix": "ac",
+    "property": "accent-color",
+  ),
+
+  "background-color": (
+    "prefix": "bg",
+    "property": "background-color",
+  ),
+
+  "border-color": (
+    "prefix": "bc",
+    "property": "border-color",
+  ),
+
+  "border-bottom-color": (
+    "prefix": "bc-b",
+    "property": "border-bottom-color",
+  ),
+
+  "border-left-color": (
+    "prefix": "bc-l",
+    "property": "border-left-color",
+  ),
+
+  "border-right-color": (
+    "prefix": "bc-r",
+    "property": "border-right-color",
+  ),
+
+  "border-top-color": (
+    "prefix": "bc-t",
+    "property": "border-top-color",
+  ),
+
+  "caret-color": (
+    "prefix": "cc",
+    "property": "caret-color",
+  ),
+
+  "color": (
+    "prefix": "tc",
+    "property": "color",
+  ),
+
+  "fill": (
+    "prefix": "f",
+    "property": "fill",
+  ),
+
+  "outline-color": (
+    "prefix": "oc",
+    "property": "outline-color",
+  ),
+
+  "stroke": (
+    "prefix": "s",
+    "property": "stroke",
+  ),
+
+  "text-decoration-color": (
+    "prefix": "tdc",
+    "property": "text-decoration-color",
+  ),
+);
+
+@each $utility, $map in $yma-color-utils {
+  $property: map.get($map, "property");
+  $prefix: map.get($map, "prefix");
+
+  @each $k, $v in theme.$yma-theme {
+    @include mix.mod-color-scaling($property, $prefix, $k, $v);
+
+    @if (fun.ignore-neutral($v, theme.$yma-theme)) {
+      @include mix.shade-scaling($property, $prefix, $k, $v, 14%);
+    }
+  }
+}

package/src/utilities/_effect.scss

@@ -0,0 +1,98 @@
+@use "sass:math";
+@use "sass:map";
+@use "../abstracts/variables" as vars;
+@use "../abstracts/mixins/" as mix;
+
+$yma-effect-utils: (
+  "backdrop-blur": (
+    "prefix": "bf-b",
+    "properties": (
+      "backdrop-filter",
+    ),
+    "values": (
+      "none": blur(vars.$yma-backdrop-blur * 0),
+      "xs": blur(vars.$yma-backdrop-blur),
+      "sm": blur(vars.$yma-backdrop-blur * 2),
+      "md": blur(vars.$yma-backdrop-blur * 4),
+      "lg": blur(vars.$yma-backdrop-blur * 8),
+      "xl": blur(vars.$yma-backdrop-blur * 16),
+    ),
+  ),
+
+  "blur": (
+    "prefix": "f-b",
+    "properties": (
+      "filter",
+    ),
+    "values": (
+      "none": blur(vars.$yma-blur * 0),
+      "xs": blur(vars.$yma-blur),
+      "sm": blur(vars.$yma-blur * 2),
+      "md": blur(vars.$yma-blur * 4),
+      "lg": blur(vars.$yma-blur * 8),
+      "xl": blur(vars.$yma-blur * 16),
+    ),
+  ),
+
+  "box-shadow": (
+    "prefix": "bs",
+    "properties": (
+      "box-shadow",
+    ),
+    "values": (
+      "none": none,
+      "xs": vars.$yma-box-shadow-xs,
+      "sm": vars.$yma-box-shadow-sm,
+      "md": vars.$yma-box-shadow-md,
+      "lg": vars.$yma-box-shadow-lg,
+      "xl": vars.$yma-box-shadow-xl,
+    ),
+  ),
+
+  "grayscale": (
+    "prefix": "f-g",
+    "properties": (
+      "filter",
+    ),
+    "values": (
+      "0": grayscale(vars.$yma-grayscale * 0),
+      "10": grayscale(vars.$yma-grayscale),
+      "20": grayscale(vars.$yma-grayscale * 2),
+      "30": grayscale(vars.$yma-grayscale * 3),
+      "40": grayscale(vars.$yma-grayscale * 4),
+      "50": grayscale(vars.$yma-grayscale * 5),
+      "60": grayscale(vars.$yma-grayscale * 6),
+      "70": grayscale(vars.$yma-grayscale * 7),
+      "80": grayscale(vars.$yma-grayscale * 8),
+      "90": grayscale(vars.$yma-grayscale * 9),
+      "100": grayscale(vars.$yma-grayscale * 10),
+    ),
+  ),
+
+  "opacity": (
+    "prefix": "o",
+    "properties": (
+      "opacity",
+    ),
+    "values": (
+      "0": 0,
+      "10": 0.1,
+      "20": 0.2,
+      "30": 0.3,
+      "40": 0.4,
+      "50": 0.5,
+      "60": 0.6,
+      "70": 0.7,
+      "80": 0.8,
+      "90": 0.9,
+      "100": 1,
+    ),
+  ),
+);
+
+@each $name, $map in $yma-effect-utils {
+  $prefix: map.get($map, "prefix");
+  $properties: map.get($map, "properties");
+
+  @include mix.create-utilities($map, $prefix, $properties);
+}

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);
 }