@guebbit/css-toolkit 1.2.0 → 1.3.1

package/src/functions/_colors.scss

@@ -1,122 +1,135 @@
-@use "sass:color";
-@use "sass:math";
-@use "sass:string";
-@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 mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
-}
-
-
-/**
- * Tint a color: mix a color with white
- * function credited to https://getbootstrap.com/
- */
-@function color-tint($color, $weight) {
-  @return mix(#fff, $color, $weight);
-}
-
-
-/**
- * Shade a color: mix a color with black
- * function credited to https://getbootstrap.com/
- */
-@function color-shade($color, $weight) {
-  @return mix(#000, $color, $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)
-  );
-}
-
-
-/**
- * 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-brightness($color);
-  $light-text-brightness: color-brightness($light);
-  $dark-text-brightness: color-brightness($dark);
-
-  @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
-}
-
-
-
-// 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 color-brightness($color) {
-  // fallback
-  @if $color == transparent or meta.type-of($color) != color {
-    @return 100;
-  }
-  @return math.div(((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)), 255 * 100%);
-}
-
-/**
- * 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: alpha($color);
-  @if $mode == 1 or ($mode == 2 and $alpha == 1) {
-    @return red($color) + $delimiter + green($color) + $delimiter + blue($color);
-  }
-  // Regular RGBA compliant result ("number" notation)
-  @return red($color) + $delimiter + green($color) + $delimiter + blue($color) + $delimiter-alpha + alpha($color); // * 100%
-}
-
-/**
- * Create default collection
- */
-@function create-collection($color){
-  $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) {
+  @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
 }

package/src/functions/_helpers.scss

@@ -1,42 +1,44 @@
-/**
- * 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;
+}

package/src/functions/_strings.scss

@@ -1,31 +1,31 @@
-/**
-  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);
+/**
+  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);
 }

package/src/index.scss

@@ -1,13 +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-instructions";
-@forward "./mixins/create-helper-margin";
+@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,28 +1,39 @@
-/**
-*	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 TODO
-  // SAFARI TODO
+/**
+*	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;
+    }
+  }
 }

package/src/mixins/_build-scrollbar.scss

@@ -1,32 +1,32 @@
-/**
- *	Builder - scrollbars of element
- *	@param string $color
- *	@param pixels $size
- *	@param $background: if false, has default lighten 40%
- */
-@mixin build-scrollbar($size: "4px", $color: "#fff", $bg: "auto", $radius: "10px") {
-  $fallback-color: #fff;
-  $fallback-bg: transparent;
-
-  @if $bg == "auto" {
-    $bg: $fallback-bg;
-  }
-
-  &::-webkit-scrollbar {
-    width: $size;
-    height: $size;
-    background-color: $fallback-bg;
-    background-color: $bg;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: $radius;
-    background-color: $fallback-color;
-    background-color: $color;
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: $fallback-bg;
-    background-color: $bg;
-  }
+/**
+ *	Builder - scrollbars of element
+ *	@param string $color
+ *	@param pixels $size
+ *	@param $background: if false, has default lighten 40%
+ */
+@mixin build-scrollbar($size: "4px", $color: "#fff", $bg: "auto", $radius: "10px") {
+  $fallback-color: #fff;
+  $fallback-bg: transparent;
+
+  @if $bg == "auto" {
+    $bg: $fallback-bg;
+  }
+
+  &::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+    background-color: $fallback-bg;
+    background-color: $bg;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: $radius;
+    background-color: $fallback-color;
+    background-color: $color;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: $fallback-bg;
+    background-color: $bg;
+  }
 }

package/src/mixins/_create-class.scss

@@ -0,0 +1,19 @@
+@use "sass:list";
+
+/**
+ * CSS single instructions class generator
+ * @param measure-list - {Array<name,value>[]} postfix name and value OR just values[] (name and value will be the same)
+ */
+@mixin create-class($instruction, $measure-list: (), $important: false, $prefix: "", $delimiter: "-") {
+  @each $values in $measure-list {
+    $name: $values;
+    $val: $values;
+    @if list.length($values) > 1 {
+      $name: list.nth($values, 1);
+      $val: list.nth($values, 2);
+    }
+    .#{$prefix}#{$instruction}#{$delimiter}#{$name} {
+      #{$instruction}: #{$val} #{if($important == true, "!important", "")}
+    }
+  }
+}