yummacss 2.1.0 → 3.0.1

package/src/utilities/_border.scss

@@ -0,0 +1,313 @@
+@use "sass:math";
+@use "sass:map";
+@use "../abstracts/variables" as vars;
+@use "../abstracts/mixins/" as mix;
+@use "../utilities/maps/" as maps;
+
+$yma-border-utils: (
+  "border-collapse": (
+    "prefix": "bc",
+    "properties": (
+      "border-collapse",
+    ),
+    "values": (
+      "c": collapse,
+      "s": separate,
+    ),
+  ),
+
+  "border-radius": (
+    "prefix": "rad",
+    "properties": (
+      "border-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+      "full": 100%,
+      "half": 50%,
+    ),
+  ),
+
+  "border-bottom-radius": (
+    "prefix": "rad-b",
+    "properties": (
+      "border-bottom-left-radius",
+      "border-bottom-right-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-left-radius": (
+    "prefix": "rad-l",
+    "properties": (
+      "border-bottom-left-radius",
+      "border-top-left-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-right-radius": (
+    "prefix": "rad-r",
+    "properties": (
+      "border-bottom-right-radius",
+      "border-top-right-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-bottom-left-radius": (
+    "prefix": "rad-bl",
+    "properties": (
+      "border-bottom-left-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-bottom-right-radius": (
+    "prefix": "rad-br",
+    "properties": (
+      "border-bottom-right-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-top-radius": (
+    "prefix": "rad-t",
+    "properties": (
+      "border-top-left-radius",
+      "border-top-right-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-top-left-radius": (
+    "prefix": "rad-tl",
+    "properties": (
+      "border-top-left-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-top-right-radius": (
+    "prefix": "rad-tr",
+    "properties": (
+      "border-top-right-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-spacing": (
+    "prefix": "bs",
+    "properties": (
+      "border-spacing",
+    ),
+    "values": (
+      "0": vars.$yma-border-spacing * 0,
+      "1": vars.$yma-border-spacing,
+      "2": vars.$yma-border-spacing * 2,
+      "3": vars.$yma-border-spacing * 3,
+      "4": vars.$yma-border-spacing * 4,
+      "5": vars.$yma-border-spacing * 5,
+      "6": vars.$yma-border-spacing * 6,
+      "7": vars.$yma-border-spacing * 7,
+      "8": vars.$yma-border-spacing * 8,
+    ),
+  ),
+
+  "border-style": (
+    "prefix": "b",
+    "properties": (
+      "border-style",
+    ),
+    "values": (
+      "none": none,
+      "d": dashed,
+      "s": solid,
+    ),
+  ),
+
+  "border-width": (
+    "prefix": "b",
+    "properties": (
+      "border-width",
+    ),
+    "values": (
+      "0": vars.$yma-border * 0,
+      "1": vars.$yma-border,
+      "2": vars.$yma-border * 2,
+      "3": vars.$yma-border * 3,
+      "4": vars.$yma-border * 4,
+      "5": vars.$yma-border * 5,
+      "6": vars.$yma-border * 6,
+      "7": vars.$yma-border * 7,
+      "8": vars.$yma-border * 8,
+    ),
+  ),
+
+  "border-bottom-width": (
+    "prefix": "bb",
+    "properties": (
+      "border-bottom-width",
+    ),
+    "values": (
+      "0": vars.$yma-border * 0,
+      "1": vars.$yma-border,
+      "2": vars.$yma-border * 2,
+      "3": vars.$yma-border * 3,
+      "4": vars.$yma-border * 4,
+      "5": vars.$yma-border * 5,
+      "6": vars.$yma-border * 6,
+      "7": vars.$yma-border * 7,
+      "8": vars.$yma-border * 8,
+    ),
+  ),
+
+  "border-left-width": (
+    "prefix": "bl",
+    "properties": (
+      "border-left-width",
+    ),
+    "values": (
+      "0": vars.$yma-border * 0,
+      "1": vars.$yma-border,
+      "2": vars.$yma-border * 2,
+      "3": vars.$yma-border * 3,
+      "4": vars.$yma-border * 4,
+      "5": vars.$yma-border * 5,
+      "6": vars.$yma-border * 6,
+      "7": vars.$yma-border * 7,
+      "8": vars.$yma-border * 8,
+    ),
+  ),
+
+  "border-right-width": (
+    "prefix": "br",
+    "properties": (
+      "border-right-width",
+    ),
+    "values": (
+      "0": vars.$yma-border * 0,
+      "1": vars.$yma-border,
+      "2": vars.$yma-border * 2,
+      "3": vars.$yma-border * 3,
+      "4": vars.$yma-border * 4,
+      "5": vars.$yma-border * 5,
+      "6": vars.$yma-border * 6,
+      "7": vars.$yma-border * 7,
+      "8": vars.$yma-border * 8,
+    ),
+  ),
+
+  "border-top-width": (
+    "prefix": "bt",
+    "properties": (
+      "border-top-width",
+    ),
+    "values": (
+      "0": vars.$yma-border * 0,
+      "1": vars.$yma-border,
+      "2": vars.$yma-border * 2,
+      "3": vars.$yma-border * 3,
+      "4": vars.$yma-border * 4,
+      "5": vars.$yma-border * 5,
+      "6": vars.$yma-border * 6,
+      "7": vars.$yma-border * 7,
+      "8": vars.$yma-border * 8,
+    ),
+  ),
+);
+
+@each $properties, $map in $yma-border-utils {
+  $prefix: map.get($map, "prefix");
+  $properties: map.get($map, "properties");
+
+  @include mix.create-utilities($map, $prefix, $properties);
+}

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