yummacss 3.0.3 → 3.1.0

package/src/abstracts/functions/_create-values.scss

@@ -1,16 +1,16 @@
-@use "sass:map";
-
-@function create-values($variable, $min: 0, $max: 100) {
-  $values: ();
-
-  @for $i from $min through $max {
-    $values: map.merge(
-      $values,
-      (
-        "#{$i}": $variable * $i,
-      )
-    );
-  }
-
-  @return $values;
-}
+@use "sass:map";
+
+@function create-values($variable, $min: 0, $max: 100) {
+  $values: ();
+
+  @for $i from $min through $max {
+    $values: map.merge(
+      $values,
+      (
+        "#{$i}": $variable * $i,
+      )
+    );
+  }
+
+  @return $values;
+}

package/src/abstracts/functions/_ignore-neutral.scss

@@ -1,9 +1,7 @@
-@use "../theme" as *;
-@use "sass:map";
-
-// prettier-ignore
-@function ignore-neutral($v, $yma-theme) {
-  @return $v != map.get($yma-theme, "black") 
-      and $v != map.get($yma-theme, "white") 
-      and $v != map.get($yma-theme, "transparent");
-}
+@use "../theme" as *;
+@use "sass:map";
+
+@function ignore-neutral($v, $yma-theme) {
+  @return $v != map.get($yma-theme, "black") and $v !=
+    map.get($yma-theme, "white") and $v != map.get($yma-theme, "transparent");
+}

package/src/abstracts/functions/_index.scss

@@ -1,2 +1,2 @@
-@forward "ignore-neutral";
-@forward "create-values";
+@forward "ignore-neutral";
+@forward "create-values";

package/src/abstracts/mixins/_create-colors.scss

@@ -1,41 +1,90 @@
-@use "sass:color";
-
-@mixin color-scaling($property, $prefix, $k, $v) {
-  .#{$prefix}-#{$k} {
-    #{$property}: $v;
-  }
-
-  .h\:#{$prefix}-#{$k} {
-    &:hover {
-      #{$property}: $v;
-    }
-  }
-}
-
-@mixin shade-scaling($property, $prefix, $k, $v, $percentage) {
-  @for $i from 1 through 13 {
-    @if $i <=6 {
-      .#{$prefix}-#{$k}-#{$i} {
-        #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
-      }
-
-      .h\:#{$prefix}-#{$k}-#{$i} {
-        &:hover {
-          #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
-        }
-      }
-    }
-
-    @else if $i >7 {
-      .#{$prefix}-#{$k}-#{$i - 1} {
-        #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
-      }
-
-      .h\:#{$prefix}-#{$k}-#{$i - 1} {
-        &:hover {
-          #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
-        }
-      }
-    }
-  }
-}
+@use "sass:color";
+
+@mixin color-scaling($property, $prefix, $k, $v) {
+
+  // base styles
+  .#{$prefix}-#{$k} {
+    #{$property}: $v;
+  }
+
+  // focus styles
+  .f\:#{$prefix}-#{$k} {
+    &:focus {
+      #{$property}: $v;
+    }
+  }
+
+  // active styles
+  .a\:#{$prefix}-#{$k} {
+    &:active {
+      #{$property}: $v;
+    }
+  }
+
+  // hover styles
+  .h\:#{$prefix}-#{$k} {
+    &:hover {
+      #{$property}: $v;
+    }
+  }
+}
+
+@mixin shade-scaling($property, $prefix, $k, $v, $percentage) {
+  @for $i from 1 through 13 {
+    @if $i <=6 {
+
+      // base styles
+      .#{$prefix}-#{$k}-#{$i} {
+        #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
+      }
+
+      // focus styles
+      .f\:#{$prefix}-#{$k}-#{$i} {
+        &:focus {
+          #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
+        }
+      }
+
+      // active styles
+      .a\:#{$prefix}-#{$k}-#{$i} {
+        &:active {
+          #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
+        }
+      }
+
+      // hover styles
+      .h\:#{$prefix}-#{$k}-#{$i} {
+        &:hover {
+          #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
+        }
+      }
+    } @else if $i >7 {
+
+      // base styles
+      .#{$prefix}-#{$k}-#{$i - 1} {
+        #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
+      }
+
+      // focus styles
+      .f\:#{$prefix}-#{$k}-#{$i - 1} {
+        &:focus {
+          #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
+        }
+      }
+
+      // active styles
+      .a\:#{$prefix}-#{$k}-#{$i - 1} {
+        &:active {
+          #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
+        }
+      }
+
+      // hover styles
+      .h\:#{$prefix}-#{$k}-#{$i - 1} {
+        &:hover {
+          #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
+        }
+      }
+    }
+  }
+}

package/src/abstracts/mixins/_create-utilities.scss

@@ -1,39 +1,53 @@
-@use "../breakpoints" as bp;
-@use "sass:map";
-
-@mixin create-utilities($map, $prefix, $properties) {
-  $function: if(
-    map.has-key($map, "property-function"),
-    map.get($map, "property-function"),
-    null
-  );
-
-  // base styles
-  @each $k, $v in map.get($map, "values") {
-    .#{$prefix}-#{$k} {
-      @each $property in $properties {
-        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
-      }
-    }
-
-    // hover styles
-    .h\:#{$prefix}-#{$k}:hover {
-      @each $property in $properties {
-        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
-      }
-    }
-  }
-
-  // responsive styles
-  @each $bp, $bp-value in bp.$yma-breakpoints {
-    @media (min-width: $bp-value) {
-      @each $k, $v in map.get($map, "values") {
-        .#{$bp}\:#{$prefix}-#{$k} {
-          @each $property in $properties {
-            #{$property}: if($function != null, $function + "(" + $v + ")", $v);
-          }
-        }
-      }
-    }
-  }
-}
+@use "../breakpoints" as bp;
+@use "sass:map";
+
+@mixin create-utilities($map, $prefix, $properties) {
+  $function: if(
+    map.has-key($map, "property-function"),
+    map.get($map, "property-function"),
+    null
+  );
+
+  // base styles
+  @each $k, $v in map.get($map, "values") {
+    .#{$prefix}-#{$k} {
+      @each $property in $properties {
+        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+      }
+    }
+
+    // active styles
+    .a\:#{$prefix}-#{$k}:active {
+      @each $property in $properties {
+        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+      }
+    }
+
+    // focus styles
+    .f\:#{$prefix}-#{$k}:focus {
+      @each $property in $properties {
+        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+      }
+    }
+
+    // hover styles
+    .h\:#{$prefix}-#{$k}:hover {
+      @each $property in $properties {
+        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+      }
+    }
+  }
+
+  // responsive styles
+  @each $bp, $bp-value in bp.$yma-breakpoints {
+    @media (min-width: $bp-value) {
+      @each $k, $v in map.get($map, "values") {
+        .#{$bp}\:#{$prefix}-#{$k} {
+          @each $property in $properties {
+            #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+          }
+        }
+      }
+    }
+  }
+}

package/src/abstracts/mixins/_index.scss

@@ -1,2 +1,2 @@
-@forward "create-colors";
-@forward "create-utilities";
+@forward "create-colors";
+@forward "create-utilities";