@guebbit/css-toolkit 1.3.2 → 1.4.0

package/src/functions/_colors.scss

@@ -1,135 +1,143 @@
-@use "sass:color";
-@use "sass:math";
-@use "sass:meta";
-
-/**
- * Return opaque color
- * color-opaque(#fff, rgba(0, 0, 0, .5)) => #808080
- * function credited to https://getbootstrap.com/
- */
-@function color-opaque($background, $foreground) {
-  @return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
-}
-
-/**
- * Tint a color
- */
-@function color-tint($color, $weight) {
-  // Creates a physical mixture with white color
-  @return color.mix(#fff, $color, $weight);
-  // Adjusts properties (like lightness) relative to the color's current values.
-  // @return color.scale($color, $lightness: $weight);
-}
-
-
-/**
- * Shade a color
- */
-@function color-shade($color, $weight) {
-  @return color.mix(#000, $color, $weight);
-  // @return color.scale($color, $lightness: -$weight);
-}
-
-
-/**
- * Shade the color if the weight is positive, else tint it
- * function credited to https://getbootstrap.com/
- */
-@function color-shift($color, $weight) {
-  @return if($weight > 0,
-          color-shade($color, $weight),
-          color-tint($color, -$weight)
-  );
-}
-
-
-/**
- * Return WCAG2.1 relative luminance
- * See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
- * See https://en.wikipedia.org/wiki/Relative_luminance
- * Gives %, less than 50 darker is better, less than 50, lighter.
- * Function like color.channel($color, "lightness", $space: hsl) gives a different %
- */
-@function color-luminance($color) {
-  // fallback
-  @if $color == transparent or meta.type-of($color) != color {
-    @return 100;
-  }
-  @return math.div((
-          (color.channel($color, "red", $space: rgb) * .299) +
-          (color.channel($color, "green", $space: rgb) * .587) +
-          (color.channel($color, "blue", $space: rgb) * .114)
-  ), 255) * 100%;
-}
-
-
-/**
- * Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
- */
-@function color-contrast($color: #fff, $dark: #000, $light: #fff) {
-  @if meta.type-of($color) != color or $color == transparent {
-    @return inherit;
-  }
-  $color-brightness: color-luminance($color);
-  $light-text-brightness: color-luminance($light);
-  $dark-text-brightness: color-luminance($dark);
-
-  @return if(math.abs($color-brightness - $light-text-brightness) > math.abs($color-brightness - $dark-text-brightness), $light, $dark);
-}
-
-
-/**
- * NEW numeric annotation
- * Hex to RGB (only numbers, transparentize would add rgba(*))
- * $color
- * $alpha:
- *    - 0: never 4° digit
- *    - 1: always 4° digit
- *    - 2: 4° digit only when needed
- * $classic: false = new number annotation
- */
-@function extract-colors($color: #fff, $mode: 2, $classic: false){
-  // colors only
-  @if $color == transparent or meta.type-of($color) != color {
-    @return $color;
-  }
-  // new annotation
-  $delimiter: " ";
-  $delimiter-alpha: " / ";
-  // old annotation
-  @if $classic{
-    $delimiter: ", ";
-    $delimiter-alpha: ", ";
-  }
-  $alpha: color.alpha($color);
-  @if $mode == 1 or ($mode == 2 and $alpha == 1) {
-    @return color.channel($color, "red", $space: rgb) +
-        $delimiter + color.channel($color, "green", $space: rgb) +
-        $delimiter + color.channel($color, "blue", $space: rgb);
-  }
-  // Regular RGBA compliant result ("number" notation)
-  @return color.channel($color, "red", $space: rgb) +
-        $delimiter + color.channel($color, "green", $space: rgb) +
-        $delimiter + color.channel($color, "blue", $space: rgb) +
-        $delimiter-alpha + color.channel($color, "alpha"); // * 100%
-}
-
-/**
- * Create default collection
- * @param $color
- */
-@function create-collection($color: #fff) {
-  $list: (
-          "100": color-tint($color, 80%),
-          "200": color-tint($color, 60%),
-          "300": color-tint($color, 40%),
-          "400": color-tint($color, 20%),
-          "500": $color,
-          "600": color-shade($color, 20%),
-          "700": color-shade($color, 40%),
-          "800": color-shade($color, 60%),
-          "900": color-shade($color, 80%)
-  );
-
-  @return $list
-}
+@use "sass:color";
+@use "sass:math";
+@use "sass:meta";
+
+/**
+ * Return opaque color
+ * color-opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+ * function credited to https://getbootstrap.com/
+ */
+@function color-opaque($background, $foreground) {
+  @return color.mix(
+    rgba($foreground, 1),
+    $background,
+    color.opacity($foreground) * 100%
+  );
+}
+
+/**
+ * Tint a color
+ */
+@function color-tint($color, $weight) {
+  // Creates a physical mixture with white color
+  @return color.mix(#fff, $color, $weight);
+  // Adjusts properties (like lightness) relative to the color's current values.
+  // @return color.scale($color, $lightness: $weight);
+}
+
+/**
+ * Shade a color
+ */
+@function color-shade($color, $weight) {
+  @return color.mix(#000, $color, $weight);
+  // @return color.scale($color, $lightness: -$weight);
+}
+
+/**
+ * Shade the color if the weight is positive, else tint it
+ * function credited to https://getbootstrap.com/
+ */
+@function color-shift($color, $weight) {
+  @if $weight > 0 {
+    @return color-shade($color, $weight);
+  }
+  @return color-tint($color, -$weight);
+}
+
+/**
+ * Return WCAG2.1 relative luminance
+ * See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+ * See https://en.wikipedia.org/wiki/Relative_luminance
+ * Gives %, less than 50 darker is better, less than 50, lighter.
+ * Function like color.channel($color, "lightness", $space: hsl) gives a different %
+ */
+@function color-luminance($color) {
+  // fallback
+  @if $color == transparent or meta.type-of($color) != color {
+    @return 100;
+  }
+  @return math.div(
+      (
+        (color.channel($color, "red", $space: rgb) * 0.299) +
+          (color.channel($color, "green", $space: rgb) * 0.587) +
+          (color.channel($color, "blue", $space: rgb) * 0.114)
+      ),
+      255
+    ) *
+    100%;
+}
+
+/**
+ * Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
+ */
+@function color-contrast($color: #fff, $dark: #000, $light: #fff) {
+  @if meta.type-of($color) != color or $color == transparent {
+    @return inherit;
+  }
+  $color-brightness: color-luminance($color);
+  $light-text-brightness: color-luminance($light);
+  $dark-text-brightness: color-luminance($dark);
+
+  @if math.abs($color-brightness - $light-text-brightness) >
+    math.abs($color-brightness - $dark-text-brightness)
+  {
+    @return $light;
+  }
+  @return $dark;
+}
+
+/**
+ * NEW numeric annotation
+ * Hex to RGB (only numbers, transparentize would add rgba(*))
+ * $color
+ * $alpha:
+ *    - 0: never 4° digit
+ *    - 1: always 4° digit
+ *    - 2: 4° digit only when needed
+ * $classic: false = new number annotation
+ */
+@function extract-colors($color: #fff, $mode: 2, $classic: false) {
+  // colors only
+  @if $color == transparent or meta.type-of($color) != color {
+    @return $color;
+  }
+  // new annotation
+  $delimiter: " ";
+  $delimiter-alpha: " / ";
+  // old annotation
+  @if $classic {
+    $delimiter: ", ";
+    $delimiter-alpha: ", ";
+  }
+  $alpha: color.alpha($color);
+  @if $mode == 1 or ($mode == 2 and $alpha == 1) {
+    @return color.channel($color, "red", $space: rgb) + $delimiter +
+      color.channel($color, "green", $space: rgb) + $delimiter +
+      color.channel($color, "blue", $space: rgb);
+  }
+  // Regular RGBA compliant result ("number" notation)
+  @return color.channel($color, "red", $space: rgb) + $delimiter +
+    color.channel($color, "green", $space: rgb) + $delimiter +
+    color.channel($color, "blue", $space: rgb) + $delimiter-alpha +
+    color.channel($color, "alpha"); // * 100%
+}
+
+/**
+ * Create default collection
+ * @param $color
+ */
+@function create-collection($color: #fff) {
+  $list: (
+    "100": color-tint($color, 80%),
+    "200": color-tint($color, 60%),
+    "300": color-tint($color, 40%),
+    "400": color-tint($color, 20%),
+    "500": $color,
+    "600": color-shade($color, 20%),
+    "700": color-shade($color, 40%),
+    "800": color-shade($color, 60%),
+    "900": color-shade($color, 80%),
+  );
+
+  @return $list;
+}

package/src/functions/_helpers.scss

@@ -1,44 +1,51 @@
-@use "sass:map" as map;
-
-/**
- * Giving a list of variables and values,
- * from start to end, try all the values until a non-null is found
- */
-@function no-null-var($list: ()){
-  @each $value in $list {
-    // stylelint-disable-next-line scss/at-if-no-null
-    @if $value != null and $value != undefined {
-      @return $value;
-    }
-  }
-  @return null;
-}
-
-/**
- * If the color is the checked one, return inherit
- */
-@function no-target-var($check: transparent, $color: transparent){
-  @if $color == $check {
-    @return inherit;
-  }
-  @return $color;
-}
-
-
-/**
- * This function is to be used to return nested key values within a nested map
- * @parameter {Variable} $map [null] - pass in map to be evaluated
- * @parameter {Variable} $keys [null] - pass in keys to be evaluated
- */
-//   $map: (
-//     'size': (
-//       'sml': 10px
-//     )
-//   );
-//   $var: map-deep-get($map, 'size', 'sml'); // => 10px
-@function map-deep-get($map, $keys...) {
-  @each $key in $keys {
-    $map: map.get($map, $key);
-  }
-  @return $map;
-}
+@use "sass:map" as map;
+
+/**
+ * Giving a list of variables and values,
+ * from start to end, try all the values until a non-null is found
+ */
+@function no-null-var($list: ()) {
+  @each $value in $list {
+    // stylelint-disable-next-line scss/at-if-no-null
+    @if $value != null and $value != undefined {
+      @return $value;
+    }
+  }
+  @return null;
+}
+
+/**
+ * If the color is the checked one, return inherit
+ */
+@function no-target-var($check: transparent, $color: transparent) {
+  @if $color == $check {
+    @return inherit;
+  }
+  @return $color;
+}
+
+/**
+ * This function is to be used to return nested key values within a nested map
+ * @parameter {Variable} $map [null] - pass in map to be evaluated
+ * @parameter {Variable} $keys [null] - pass in keys to be evaluated
+ */
+//   $map: (
+//     'size': (
+//       'sml': 10px
+//     )
+//   );
+//   $var: map-deep-get($map, 'size', 'sml'); // => 10px
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+  }
+  @return $map;
+}
+
+/**
+ * Read a color value from a 2-level color map collection
+ * Example: color-get($colors-collection, "blue", "500")
+ */
+@function color-get($collection, $group, $shade) {
+  @return map.get(map.get($collection, $group), $shade);
+}

package/src/functions/_strings.scss

@@ -1,31 +1,38 @@
-/**
-  Split string into lists
- */
-@function string-split($string, $separator: "-") {
-  // empty array/list
-  $split-arr: ();
-  // first index of separator in string
-  $index : str-index($string, $separator);
-  // loop through string
-  @while $index != null {
-    // get the substring from the first character to the separator
-    $item: str-slice($string, 1, $index - 1);
-    // push item to array
-    $split-arr: append($split-arr, $item);
-    // remove item and separator from string
-    $string: str-slice($string, $index + 1);
-    // find new index of separator
-    $index : str-index($string, $separator);
-  }
-  // add the remaining string to list (the last item)
-  $split-arr: append($split-arr, $string);
-
-  @return $split-arr;
-}
-
-/**
-  Check if $string ends with $find
- */
-@function string-ends-with($string, $find) {
-  @return (str-length($string) >= str-length($find)) and (str-slice($string, (str-length($string) - str-length($find) + 1)) == $find);
-}
+@use "sass:list";
+@use "sass:string";
+
+/**
+  Split string into lists
+ */
+@function string-split($string, $separator: "-") {
+  // empty array/list
+  $split-arr: ();
+  // first index of separator in string
+  $index: string.index($string, $separator);
+  // loop through string
+  @while $index != null {
+    // get the substring from the first character to the separator
+    $item: string.slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: list.append($split-arr, $item);
+    // remove item and separator from string
+    $string: string.slice($string, $index + 1);
+    // find new index of separator
+    $index: string.index($string, $separator);
+  }
+  // add the remaining string to list (the last item)
+  $split-arr: list.append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+/**
+  Check if $string ends with $find
+ */
+@function string-ends-with($string, $find) {
+  @return (string.length($string) >= string.length($find)) and
+    (
+      string.slice($string, (string.length($string) - string.length($find) + 1))
+        == $find
+    );
+}

package/src/index.scss

@@ -1,14 +1,14 @@
-@forward "./colors";
-
-@forward "./functions/colors";
-@forward "./functions/helpers";
-@forward "./functions/strings";
-
-@forward "./mixins/build-aspect-ratio";
-@forward "./mixins/build-compatibility";
-@forward "./mixins/build-scrollbar";
-@forward "./mixins/create-colors";
-@forward "./mixins/create-colors-vars";
-@forward "./mixins/create-class";
-@forward "./mixins/create-helper-margin";
-@forward "./mixins/create-helper-padding";
+@forward "./colors";
+
+@forward "./functions/colors";
+@forward "./functions/helpers";
+@forward "./functions/strings";
+
+@forward "./mixins/build-aspect-ratio";
+@forward "./mixins/build-compatibility";
+@forward "./mixins/build-scrollbar";
+@forward "./mixins/create-colors";
+@forward "./mixins/create-colors-vars";
+@forward "./mixins/create-class";
+@forward "./mixins/create-helper-margin";
+@forward "./mixins/create-helper-padding";

package/src/mixins/_build-aspect-ratio.scss

@@ -1,37 +1,37 @@
-@use "../functions/strings" as guebbit;
-
-/**
- * Use in the parent\container, to be coupled with {build-aspect-ratio-anchor}
- */
-@mixin build-aspect-ratio-container($ratio: 100%){
-  position: relative;
-  // aspect-ratio: #{$height} / #{$width};
-
-  &::before{
-    content: "";
-    display: block;
-    padding-top: #{$ratio};
-  }
-}
-
-/**
- * Use in the child that "gives" form to the parent that has the respective {build-aspect-ratio-container}
- */
-@mixin build-aspect-ratio-anchor{
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-/**
- *  aspect ratio shortcut
- */
-@mixin build-aspect-ratio($ratio: 100%){
-  @include build-aspect-ratio-container($ratio);
-
-  & > * {
-    @include build-aspect-ratio-anchor;
-  }
-}
+@use "../functions/strings" as guebbit;
+
+/**
+ * Use in the parent\container, to be coupled with {build-aspect-ratio-anchor}
+ */
+@mixin build-aspect-ratio-container($ratio: 100%) {
+  position: relative;
+  // aspect-ratio: #{$height} / #{$width};
+
+  &::before {
+    content: "";
+    display: block;
+    padding-top: #{$ratio};
+  }
+}
+
+/**
+ * Use in the child that "gives" form to the parent that has the respective {build-aspect-ratio-container}
+ */
+@mixin build-aspect-ratio-anchor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/**
+ *  aspect ratio shortcut
+ */
+@mixin build-aspect-ratio($ratio: 100%) {
+  @include build-aspect-ratio-container($ratio);
+
+  & > * {
+    @include build-aspect-ratio-anchor;
+  }
+}

package/src/mixins/_build-compatibility.scss

@@ -1,39 +1,40 @@
-/**
-*	Compatibility mode for browsers
-*	@param string $browser: target browser
-*	@content
-**/
-@mixin build-compatibility($browser) {
-  // INTERNET EXPLORER
-  @if $browser == "ie" {
-    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-      @content;
-    }
-  }
-  // MICROSOFT EDGE
-  @if $browser == "edge" {
-    @supports (-ms-ime-align:auto) {
-      @content;
-    }
-  }
-  // FIREFOX
-  @if $browser == "firefox" {
-    @supports (-moz-appearance:none) {
-      @content;
-    }
-  }
-
-  // OPERA
-  @if $browser == "opera" {
-    @supports (-o-object-fit: fill) {
-      @content;
-    }
-  }
-
-  // SAFARI
-  @if $browser == "safari" {
-    @supports (background: -webkit-named-image(i)) and (not (-webkit-touch-callout: none)) {
-      @content;
-    }
-  }
-}
+/**
+*	Compatibility mode for browsers
+*	@param string $browser: target browser
+*	@content
+**/
+@mixin build-compatibility($browser) {
+  // INTERNET EXPLORER
+  @if $browser == "ie" {
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      @content;
+    }
+  }
+  // MICROSOFT EDGE
+  @if $browser == "edge" {
+    @supports (-ms-ime-align: auto) {
+      @content;
+    }
+  }
+  // FIREFOX
+  @if $browser == "firefox" {
+    @supports (-moz-appearance: none) {
+      @content;
+    }
+  }
+
+  // OPERA
+  @if $browser == "opera" {
+    @supports (-o-object-fit: fill) {
+      @content;
+    }
+  }
+
+  // SAFARI
+  @if $browser == "safari" {
+    @supports (background: -webkit-named-image(i)) and
+      (not (-webkit-touch-callout: none)) {
+      @content;
+    }
+  }
+}