gerillass 1.6.2 → 2.0.0

package/scss/utilities/_pixelify.scss

@@ -1,16 +1,20 @@
 @charset "UTF-8";
 
+@use "sass:math";
+@use "sass:meta";
+@use "../utilities/clear-unit" as *;
+
 // This function checks if the argument has a px unit. If not, it adds a px unit to the end of the argument.
 
-@function __pixelify($value) {
-  @if type-of($value) != "number" {
-    @error "`#{$value}` is not a valid $value for `__pixelify`. Pass a number, with or without a unit.";
+@function pixelify($value) {
+  @if meta.type-of($value) != "number" {
+    @error "`#{$value}` is not a valid $value for `pixelify`. Pass a number, with or without a unit.";
   }
-  @if unit($value) == "px" {
+  @if math.unit($value) == "px" {
     @return $value;
-  } @else if unit($value) != "px" {
-    @return __clearUnit($value) * 1px;
-  } @else if unitless($value) == true {
+  } @else if math.unit($value) != "px" {
+    @return clearUnit($value) * 1px;
+  } @else if math.is-unitless($value) == true {
     @return $value * 1px;
   }
 }

package/scss/utilities/_pseudo-selector.scss

@@ -1,10 +1,12 @@
 @charset "UTF-8";
 
-@function __pseudoSelector($elements, $pseudo: null) {
+@use "sass:list";
+
+@function pseudoSelector($elements, $pseudo: null) {
   $list: ();
   @each $element in $elements {
     $element: if($pseudo, $element + ":" + $pseudo, $element);
-    $list: append($list, $element, comma);
+    $list: list.append($list, $element, comma);
   }
   @return $list;
 }

package/scss/utilities/_remify.scss

@@ -1,6 +1,8 @@
 @charset "UTF-8";
 
-@function __remify($value) {
+@use "sass:math";
+
+@function remify($value) {
   $base-value: 16px;
   $rem-value: math.div($value, $base-value);
   @return $rem-value * 1rem;

package/scss/utilities/_shade.scss

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+@use "sass:color";
+@use "../utilities/is-color" as *;
+
+@function shade($color, $percentage) {
+  @if isColor($color) {
+    @return color.mix(black, $color, $percentage);
+  }
+}

package/scss/utilities/_shorthand-property.scss

@@ -1,15 +1,17 @@
 @charset "UTF-8";
 
-@function __shorthandProperty($value) {
-  @if length($value) == 1 {
-    @return nth($value, 1) nth($value, 1) nth($value, 1) nth($value, 1);
-  } @else if length($value) == 2 {
-    @return nth($value, 1) nth($value, 2) nth($value, 1) nth($value, 2);
-  } @else if length($value) == 3 {
-    @return nth($value, 1) nth($value, 2) nth($value, 3) nth($value, 2);
-  } @else if length($value) == 4 {
-    @return nth($value, 1) nth($value, 2) nth($value, 3) nth($value, 4);
-  } @else if length($value) > 4 {
-    @error "You've passed #{length($value)} arguments. Please do not pass more than 4.";
+@use "sass:list";
+
+@function shorthandProperty($value) {
+  @if list.length($value) == 1 {
+    @return list.nth($value, 1) list.nth($value, 1) list.nth($value, 1) list.nth($value, 1);
+  } @else if list.length($value) == 2 {
+    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1) list.nth($value, 2);
+  } @else if list.length($value) == 3 {
+    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3) list.nth($value, 2);
+  } @else if list.length($value) == 4 {
+    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3) list.nth($value, 4);
+  } @else if list.length($value) > 4 {
+    @error "You've passed #{list.length($value)} arguments. Please do not pass more than 4.";
   }
 }

package/scss/utilities/_tint.scss

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+@use "sass:color";
+@use "../utilities/is-color" as *;
+
+@function tint($color, $percentage) {
+  @if isColor($color) {
+    @return color.mix(white, $color, $percentage);
+  }
+}

package/scss/utilities/_validate-breakpoint.scss

@@ -1,11 +1,15 @@
 @charset "UTF-8";
 
-@function __validateBreakpoint($value) {
-  @for $i from 1 through length($value) {
-    @if map-has-key($map-for-breakpoints, $value) {
-      @return map-get($map-for-breakpoints, nth($value, $i));
+@use "sass:list";
+@use "sass:map";
+@use "../maps/map-for-breakpoints" as *;
+
+@function validateBreakpoint($value) {
+  @for $i from 1 through list.length($value) {
+    @if map.has-key($map-for-breakpoints, $value) {
+      @return map.get($map-for-breakpoints, list.nth($value, $i));
     } @else {
-      @return nth($value, $i);
+      @return list.nth($value, $i);
     }
   }
 }

package/scss/utilities/_validate-length.scss

@@ -1,22 +1,27 @@
 @charset "UTF-8";
 
-@function __validateLength($value) {
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
+@function validateLength($value) {
   $keywords: ("auto", "inherit", "initial", "unset", "revert", 0);
 
-  @if index($keywords, $value) {
+  @if list.index($keywords, $value) {
     @return $value;
   }
-  @if type-of($value) == "number" and not unitless($value) {
+  @if meta.type-of($value) == "number" and not math.is-unitless($value) {
     @return $value;
   }
   // calc(), clamp(), min() and max() arrive as Sass calculations; var() and
   // env() arrive as unquoted strings holding a parenthesis. Both are valid
   // lengths, and warning about them means warning about correct modern CSS,
   // which this function used to do.
-  @if type-of($value) == "calculation" {
+  @if meta.type-of($value) == "calculation" {
     @return $value;
   }
-  @if type-of($value) == "string" and str-index(quote($value), "(") {
+  @if meta.type-of($value) == "string" and string.index(string.quote($value), "(") {
     @return $value;
   }
 

package/scss/utilities/_validate-ratio.scss

@@ -1,42 +1,54 @@
 @charset "UTF-8";
 
-@function __validateRatio($ratio) {
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+@use "../utilities/convert-to-number" as *;
+
+// Returns a value for the CSS aspect-ratio property.
+//
+// Before 2.0.0 this returned the padding-top percentage the old ratio hack
+// needed -- 56.25% for 16/9. aspect-ratio is Baseline Widely Available, so the
+// hack is gone and this returns the ratio itself: `16 / 9`.
+@function validateRatio($ratio) {
   // No argument at all keeps the 16/9 default.
   @if $ratio == null {
-    @return 56.25%;
+    @return list.slash(16, 9);
   }
 
-  @if type-of($ratio) == "number" {
-    @if not unitless($ratio) {
+  @if meta.type-of($ratio) == "number" {
+    @if not math.is-unitless($ratio) {
       @error "`#{$ratio}` is not a valid ratio. A numeric ratio must be unitless, like `1.77`.";
     }
     @if $ratio <= 0 {
       @error "`#{$ratio}` is not a valid ratio. A numeric ratio must be greater than zero.";
     }
-    @return math.div(1, $ratio) * 100%;
+    // aspect-ratio takes a bare number, where 1.77 means 1.77 / 1.
+    @return $ratio;
   }
 
-  @if type-of($ratio) == "string" {
+  @if meta.type-of($ratio) == "string" {
     $separator: null;
-    @if str-index($ratio, "/") {
-      $separator: str-index($ratio, "/");
-    } @else if str-index($ratio, ":") {
-      $separator: str-index($ratio, ":");
+    @if string.index($ratio, "/") {
+      $separator: string.index($ratio, "/");
+    } @else if string.index($ratio, ":") {
+      $separator: string.index($ratio, ":");
     } @else {
       @error "`#{$ratio}` is not a valid ratio. A string ratio must separate width and height with `/` or `:`, like `\"16/9\"` or `\"16:9\"`.";
     }
 
-    $width: __convertToNumber(str-slice($ratio, 1, $separator - 1));
-    $height: __convertToNumber(str-slice($ratio, $separator + 1));
+    $width: convertToNumber(string.slice($ratio, 1, $separator - 1));
+    $height: convertToNumber(string.slice($ratio, $separator + 1));
 
     @if $width == 0 {
       @error "`#{$ratio}` is not a valid ratio. The width must be greater than zero.";
     }
-    @return math.div($height, $width) * 100%;
+    @return list.slash($width, $height);
   }
 
   // Anything else -- most commonly a list, which is what `16/9` becomes once
   // Dart Sass 2.0.0 removes slash division. Without this the mixin would emit
-  // no padding-top at all and silently produce a ratio box with no ratio.
-  @error "`#{$ratio}` is not a valid ratio. Pass a string like `\"16/9\"` or `\"16:9\"`, a unitless number like `1.77`, or no argument at all for the 16/9 default. You passed a #{type-of($ratio)}.";
+  // no aspect-ratio at all and silently produce a box with no ratio.
+  @error "`#{$ratio}` is not a valid ratio. Pass a string like `\"16/9\"` or `\"16:9\"`, a unitless number like `1.77`, or no argument at all for the 16/9 default. You passed a #{meta.type-of($ratio)}.";
 }

package/scss/utilities/_validate-scissors.scss

@@ -1,21 +1,26 @@
 @charset "UTF-8";
 
-@function __validateScissors($value) {
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "../utilities/pixelify" as *;
+
+@function validateScissors($value) {
   $list: ();
-  @for $i from 1 through length($value) {
-    $item: nth($value, $i);
-    // unitless() below throws on anything that is not a number, and its message
+  @for $i from 1 through list.length($value) {
+    $item: list.nth($value, $i);
+    // math.is-unitless() below throws on anything that is not a number, and its message
     // names its own parameter rather than the corner that was wrong.
-    @if $item != null and type-of($item) != "number" {
+    @if $item != null and meta.type-of($item) != "number" {
       @error "`#{$item}` is not a valid corner size. Pass a length such as `12px`, or a unitless number which is treated as pixels.";
     }
-    @if nth($value, $i) == null {
-      $list: append($list, 0px, comma);
-    } @else if unitless(nth($value, $i)) {
-      $pixelified: __pixelify(nth($value, $i));
-      $list: append($list, $pixelified, comma);
+    @if list.nth($value, $i) == null {
+      $list: list.append($list, 0px, comma);
+    } @else if math.is-unitless(list.nth($value, $i)) {
+      $pixelified: pixelify(list.nth($value, $i));
+      $list: list.append($list, $pixelified, comma);
     } @else {
-      $list: append($list, nth($value, $i), comma);
+      $list: list.append($list, list.nth($value, $i), comma);
     }
   }
   @return $list;