yummacss 2.1.0 → 3.0.0

package/src/utilities/_box-model.scss

@@ -1,107 +1,290 @@
 @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-box-model-utils: (
   "box-sizing": (
     "prefix": "bs",
+    "properties": (
+      "box-sizing",
+    ),
     "values": (
       "bb": border-box,
       "cb": content-box,
     ),
   ),
-);
 
-// base variants
-@each $property, $map in $yma-box-model-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;
-      }
-    }
-  }
+  "dimension": (
+    "prefix": "d",
+    "properties": (
+      "height",
+      "width",
+    ),
+    "values": maps.$yma-dimension-map,
+  ),
 
-  // hover variants
-  @each $k, $v in $values {
-    @if ($k == "default") {
-      .h\:#{$prefix}:hover {
-        #{$property}: $v;
-      }
-    } @else {
-      .h\:#{$prefix}-#{$k}:hover {
-        #{$property}: $v;
-      }
-    }
-  }
+  "max-dimension": (
+    "prefix": "max-d",
+    "properties": (
+      "max-height",
+      "max-width",
+    ),
+    "values": maps.$yma-dimension-map,
+  ),
 
-  // responsive variants
-  @each $bp, $bp-value in $yma-breakpoints {
-    @each $k, $v in $values {
-      .#{$bp}\:#{$prefix}-#{$k} {
-        @media (min-width: $bp-value) {
-          #{$property}: $v;
-        }
-      }
-    }
-  }
-}
+  "min-dimension": (
+    "prefix": "min-d",
+    "properties": (
+      "min-height",
+      "min-width",
+    ),
+    "values": maps.$yma-dimension-map,
+  ),
+
+  "height": (
+    "prefix": "h",
+    "properties": (
+      "height",
+    ),
+    "values": maps.$yma-height-map,
+  ),
+
+  "max-height": (
+    "prefix": "max-h",
+    "properties": (
+      "max-height",
+    ),
+    "values": maps.$yma-height-map,
+  ),
+
+  "min-height": (
+    "prefix": "min-h",
+    "properties": (
+      "min-height",
+    ),
+    "values": maps.$yma-height-map,
+  ),
+
+  "margin": (
+    "prefix": "m",
+    "properties": (
+      "margin",
+    ),
+    "values": maps.$yma-margin-map,
+  ),
+
+  "margin-block-end": (
+    "prefix": "mbe",
+    "properties": (
+      "margin-block-end",
+    ),
+    "values": maps.$yma-margin-map,
+  ),
+
+  "margin-block-start": (
+    "prefix": "mbs",
+    "properties": (
+      "margin-block-start",
+    ),
+    "values": maps.$yma-margin-map,
+  ),
+
+  "margin-bottom": (
+    "prefix": "mb",
+    "properties": (
+      "margin-bottom",
+    ),
+    "values": maps.$yma-margin-map,
+  ),
+
+  "margin-inline-end": (
+    "prefix": "mie",
+    "properties": (
+      "margin-inline-end",
+    ),
+    "values": maps.$yma-margin-map,
+  ),
+
+  "margin-inline-start": (
+    "prefix": "mis",
+    "properties": (
+      "margin-inline-start",
+    ),
+    "values": maps.$yma-margin-map,
+  ),
+
+  "margin-left": (
+    "prefix": "ml",
+    "properties": (
+      "margin-left",
+    ),
+    "values": maps.$yma-margin-map,
+  ),
+
+  "margin-right": (
+    "prefix": "mr",
+    "properties": (
+      "margin-right",
+    ),
+    "values": maps.$yma-margin-map,
+  ),
+
+  "margin-top": (
+    "prefix": "mt",
+    "properties": (
+      "margin-top",
+    ),
+    "values": maps.$yma-margin-map,
+  ),
+
+  "margin-x": (
+    "prefix": "mx",
+    "properties": (
+      "margin-left",
+      "margin-right",
+    ),
+    "values": maps.$yma-margin-map,
+  ),
 
-// variants
-@include dimension-variants("dim", $yma-height, $yma-width);
-@include dimension-variants("max-dim", $yma-height, $yma-width);
-@include dimension-variants("min-dim", $yma-height, $yma-width);
-@include spacing-x("s-x", $yma-spacing);
-@include spacing-y("s-y", $yma-spacing);
-@include variants("height", "h", $yma-height);
-@include variants("margin-bottom", "mb", $yma-margin);
-@include variants("margin-left", "ml", $yma-margin);
-@include variants("margin-right", "mr", $yma-margin);
-@include variants("margin-top", "mt", $yma-margin);
-@include variants("margin", "m", $yma-margin);
-@include variants("max-height", "max-h", $yma-height);
-@include variants("max-width", "max-w", $yma-width);
-@include variants("min-height", "min-h", $yma-height);
-@include variants("min-width", "min-w", $yma-width);
-@include variants("padding-bottom", "pb", $yma-padding);
-@include variants("padding-left", "pl", $yma-padding);
-@include variants("padding-right", "pr", $yma-padding);
-@include variants("padding-top", "pt", $yma-padding);
-@include variants("padding", "p", $yma-padding);
-@include variants("width", "w", $yma-width);
-@include x-axis-variants("margin", "mx", $yma-margin);
-@include x-axis-variants("padding", "px", $yma-padding);
-@include y-axis-variants("margin", "my", $yma-margin);
-@include y-axis-variants("padding", "py", $yma-padding);
-
-// extensions
-@include extensions(
-  $yma-extension,
-  (
-    "h": height,
-    "max-h": max-height,
-    "max-w": max-width,
-    "min-h": min-height,
-    "min-w": min-width,
-    "w": width,
-  )
+  "margin-y": (
+    "prefix": "my",
+    "properties": (
+      "margin-bottom",
+      "margin-top",
+    ),
+    "values": maps.$yma-margin-map,
+  ),
+
+  "padding": (
+    "prefix": "p",
+    "properties": (
+      "padding",
+    ),
+    "values": maps.$yma-padding-map,
+  ),
+
+  "padding-block-end": (
+    "prefix": "pbe",
+    "properties": (
+      "padding-block-end",
+    ),
+    "values": maps.$yma-padding-map,
+  ),
+
+  "padding-block-start": (
+    "prefix": "pbs",
+    "properties": (
+      "padding-block-start",
+    ),
+    "values": maps.$yma-padding-map,
+  ),
+
+  "padding-bottom": (
+    "prefix": "pb",
+    "properties": (
+      "padding-bottom",
+    ),
+    "values": maps.$yma-padding-map,
+  ),
+
+  "padding-inline-end": (
+    "prefix": "pie",
+    "properties": (
+      "padding-inline-end",
+    ),
+    "values": maps.$yma-padding-map,
+  ),
+
+  "padding-inline-start": (
+    "prefix": "pis",
+    "properties": (
+      "padding-inline-start",
+    ),
+    "values": maps.$yma-padding-map,
+  ),
+
+  "padding-left": (
+    "prefix": "pl",
+    "properties": (
+      "padding-left",
+    ),
+    "values": maps.$yma-padding-map,
+  ),
+
+  "padding-right": (
+    "prefix": "pr",
+    "properties": (
+      "padding-right",
+    ),
+    "values": maps.$yma-padding-map,
+  ),
+
+  "padding-top": (
+    "prefix": "pt",
+    "properties": (
+      "padding-top",
+    ),
+    "values": maps.$yma-padding-map,
+  ),
+
+  "padding-x": (
+    "prefix": "px",
+    "properties": (
+      "padding-left",
+      "padding-right",
+    ),
+    "values": maps.$yma-padding-map,
+  ),
+
+  "padding-y": (
+    "prefix": "py",
+    "properties": (
+      "padding-bottom",
+      "padding-top",
+    ),
+    "values": maps.$yma-padding-map,
+  ),
+
+  "width": (
+    "prefix": "w",
+    "properties": (
+      "width",
+    ),
+    "values": maps.$yma-width-map,
+  ),
+
+  "max-width": (
+    "prefix": "max-w",
+    "properties": (
+      "max-width",
+    ),
+    "values": maps.$yma-width-map,
+  ),
+
+  "min-width": (
+    "prefix": "min-w",
+    "properties": (
+      "min-width",
+    ),
+    "values": maps.$yma-width-map,
+  ),
 );
 
-@include dimension-extensions($yma-extension);
-@include height-extensions($yma-height-extension);
-@include box-model-extensions($yma-extension, ("m"), "margin");
-@include box-model-extensions($yma-extension, ("mb"), "margin-bottom");
-@include box-model-extensions($yma-extension, ("ml"), "margin-left");
-@include box-model-extensions($yma-extension, ("mr"), "margin-right");
-@include box-model-extensions($yma-extension, ("mt"), "margin-top");
-@include box-model-extensions($yma-extension, ("p"), "padding");
-@include box-model-extensions($yma-extension, ("pb"), "padding-bottom");
-@include box-model-extensions($yma-extension, ("pl"), "padding-left");
-@include box-model-extensions($yma-extension, ("pr"), "padding-right");
-@include box-model-extensions($yma-extension, ("pt"), "padding-top");
-@include width-extensions($yma-width-extension);
+@each $name, $map in $yma-box-model-utils {
+  $prefix: map.get($map, "prefix");
+  $properties: map.get($map, "properties");
+  $values: map.get($map, "values");
+
+  @if meta.type-of($values) == "map" and map.get($values, "custom") {
+    @include mix.create-spacing-utilities(
+      $prefix,
+      map.get($values, "map"),
+      $properties
+    );
+  } @else {
+    @include mix.create-utilities($map, $prefix, $properties);
+  }
+}

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