@guebbit/css-toolkit 1.3.1 → 1.4.0

package/src/mixins/_build-scrollbar.scss

@@ -1,32 +1,37 @@
-/**
- *	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

@@ -1,19 +1,29 @@
-@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", "")}
-    }
-  }
-}
+@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: "-"
+) {
+  $important-suffix: "";
+  @if $important == true {
+    $important-suffix: " !important";
+  }
+  @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}#{$important-suffix};
+    }
+  }
+}

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

@@ -1,35 +1,31 @@
-@use "sass:list";
-@use "../functions/colors" as color-functions;
-
-/**
- *  Create the CSS VARS (like on root)
- *  WARNING: They will be translated in "RGB" instead of "HEX"
- *
- *  @param $color-list - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
- *  @param $prefix
- *  @param $branch-list:   - when filled: becomes a whitelist (aka: include only listed brands)
- */
-@mixin create-colors-vars($color-list: (), $prefix: "", $branch-list: ()) {
-  // for every branch
-  @each $branch-name, $branch in $color-list {
-    // check that there is no $branch-list or, if present, it's correctly whitelisted
-    @if list.length($branch-list) < 1 or list.index($branch-list, $branch-name) {
-      // for every color
-      @each $branch-name, $branch in $color-list {
-
-        @each $sname, $scolor in $branch {
-          // @if meta.type-of($scolor) == color {
-          --#{$prefix}#{$branch-name}-#{$sname}: #{color-functions.extract-colors($scolor)};
-          // _}
-        }
-
-        @each $sname, $scolor in $branch {
-          // @if meta.type-of($scolor) == color {
-          --#{$prefix}on-#{$branch-name}-#{$sname}: #{color-functions.extract-colors(color-functions.color-contrast($scolor))};
-          // _}
-        }
-
-      }
-    }
-  }
-}
+@use "sass:list";
+@use "../functions/colors" as color-functions;
+
+/**
+ *  Create the CSS VARS (like on root)
+ *  WARNING: They will be translated in "RGB" instead of "HEX"
+ *
+ *  @param $color-list - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
+ *  @param $prefix
+ */
+@mixin create-colors-vars($color-list: (), $prefix: "") {
+  // for every branch
+  @each $branch-name, $branch in $color-list {
+    // for every color
+    @each $color-name, $color-value in $branch {
+      // @if meta.type-of($scolor) == color {
+      --#{$prefix}#{$branch-name}-#{$color-name}: #{color-functions.extract-colors(
+          $color-value
+        )};
+      // _}
+    }
+
+    @each $color-name, $color-value in $branch {
+      // @if meta.type-of($scolor) == color {
+      --#{$prefix}on-#{$branch-name}-#{$color-name}: #{color-functions.extract-colors(
+          color-functions.color-contrast($color-value)
+        )};
+      // _}
+    }
+  }
+}

package/src/mixins/_create-colors.scss

@@ -1,160 +1,202 @@
-@use "sass:list";
-@use "sass:string";
-@use "../functions/colors" as color-functions;
-
-/**
- *  Create all the needed classes for the requested colors
- *  WARNING: $gradient-* are not meant to be used in color and border classes (because they have gradients)
- *
- *  @param $color-list     - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
- *  @param $vars: if true, use css vars instead of rgb
- *  @param $prefix: prefix that applies to classes
- *  @param $prefixV: prefix that applies to vars (if true)
- *  @param $branch-list:   - when filled: becomes a whitelist (aka: include only listed brands)
- *  @param $feature-list:  - when filled: becomes a whitelist. May become cumbersome and many are not needed. Use with care.
- *    - text
- *    - background
- *    - border
- *    - pseudo (bg only, text very rarely used)
- *    - hover
- */
-@mixin create-colors($color-list: (), $vars: false, $prefix: "", $prefixV: "", $branch-list: (), $feature-list: ()) {
-  // for every branch
-  @each $branch-name, $branch in $color-list {
-    // check that there is no $branch-list or, if present, it's correctly whitelisted
-    @if list.length($branch-list) < 1 or list.index($branch-list, $branch-name) {
-
-      // for every leaf
-      @each $sname, $scolor in $branch {
-
-        @if not list.index($branch-name, "gradient") and (list.length($feature-list) < 1 or list.index($feature-list, "text")) {
-          .#{$prefix}#{$branch-name}-#{$sname}-text {
-            @if $vars {
-              color: var(--#{$prefixV}#{$branch-name}-#{$sname}) !important;
-            } @else {
-              color: $scolor !important;
-            }
-          }
-        }
-
-        @if not list.index($branch-name, "gradient") and (list.length($feature-list) < 1 or list.index($feature-list, "border")) {
-          @if $vars {
-            .#{$prefix}#{$branch-name}-#{$sname}-border {
-              border-color: var(--#{$prefixV}#{$branch-name}-#{$sname}) !important;
-            }
-          } @else {
-            .#{$prefix}#{$branch-name}-#{$sname}-border {
-              border-color: $scolor !important;
-            }
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
-          @if $vars {
-            .#{$prefix}#{$branch-name}-#{$sname}-bg {
-              background-color: var(--#{$prefixV}#{$branch-name}-#{$sname}) !important;
-              color: var(--#{$prefixV}on-#{$branch-name}-#{$sname}) !important;
-            }
-          } @else {
-            .#{$prefix}#{$branch-name}-#{$sname}-bg {
-              background-color: $scolor !important;
-            }
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
-          @if $vars {
-            .#{$prefix}#{$branch-name}-#{$sname}-pseudo-bg {
-              &::after,
-              &::before {
-                background-color: var(--#{$prefixV}#{$branch-name}-#{$sname}) !important;
-              }
-            }
-          } @else {
-            .#{$prefix}#{$branch-name}-#{$sname}-pseudo-bg {
-              &::after,
-              &::before {
-                background-color: $scolor !important;
-              }
-            }
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "hover") {
-
-          @if not list.index($branch-name, "gradient") and (list.length($feature-list) < 1 or list.index($feature-list, "text")) {
-            @if $vars {
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-text {
-                &:hover {
-                  color: var(--#{$prefixV}#{$branch-name}-#{$sname}) !important;
-                }
-              }
-            } @else {
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-text {
-                &:hover {
-                  color: $scolor !important;
-                }
-              }
-            }
-          }
-
-          @if not list.index($branch-name, "gradient") and (list.length($feature-list) < 1 or list.index($feature-list, "border")) {
-            @if $vars {
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-border {
-                &:hover {
-                  border-color: var(--#{$prefixV}#{$branch-name}-#{$sname}) !important;
-                }
-              }
-            } @else {
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-border {
-                &:hover {
-                  border-color: $scolor !important;
-                }
-              }
-            }
-          }
-
-          @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
-            @if $vars {
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-bg {
-                &:hover {
-                  background-color: var(--#{$prefixV}#{$branch-name}-#{$sname}) !important;
-                  color: var(--#{$prefixV}on-#{$branch-name}-#{$sname}) !important;
-                }
-              }
-            } @else {
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-bg {
-                &:hover {
-                  background-color: $scolor !important;
-                }
-              }
-            }
-          }
-
-          @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
-            @if $vars {
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-pseudo-bg {
-                &:hover {
-                  &::after,
-                  &::before {
-                    background-color: var(--#{$prefixV}#{$branch-name}-#{$sname}) !important;
-                  }
-                }
-              }
-            } @else {
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-pseudo-bg {
-                &:hover {
-                  &::after,
-                  &::before {
-                    background-color: $scolor !important;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
+@use "sass:list";
+@use "sass:string";
+@use "../functions/colors" as color-functions;
+
+/**
+ *  Create all the needed classes for the requested colors
+ *  WARNING: $gradient-* are not meant to be used in color and border classes (because they have gradients)
+ *
+ *  @param $color-list     - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
+ *  @param $vars: if true, use css vars instead of rgb
+ *  @param $prefix: prefix that applies to classes
+ *  @param $prefixV: prefix that applies to vars (if true)
+ *  @param $feature-list:  - when filled: becomes a whitelist. May become cumbersome and many are not needed. Use with care.
+ *    - text
+ *    - background
+ *    - border
+ *    - pseudo (bg only, text very rarely used)
+ *    - hover
+ */
+@mixin create-colors(
+  $color-list: (),
+  $vars: false,
+  $prefix: "",
+  $prefixV: "",
+  $feature-list: ()
+) {
+  // for every branch
+  @each $branch-name, $branch in $color-list {
+    // for every leaf
+    @each $color-name, $color-value in $branch {
+      @if not
+        list.index($branch-name, "gradient") and
+        (list.length($feature-list) < 1 or list.index($feature-list, "text"))
+      {
+        .#{$prefix}#{$branch-name}-#{$color-name}-text {
+          @if $vars {
+            color: var(--#{$prefixV}#{$branch-name}-#{$color-name}) !important;
+          } @else {
+            color: $color-value !important;
+          }
+        }
+      }
+
+      @if not
+        list.index($branch-name, "gradient") and
+        (list.length($feature-list) < 1 or list.index($feature-list, "border"))
+      {
+        @if $vars {
+          .#{$prefix}#{$branch-name}-#{$color-name}-border {
+            border-color: var(
+              --#{$prefixV}#{$branch-name}-#{$color-name}
+            ) !important;
+          }
+        } @else {
+          .#{$prefix}#{$branch-name}-#{$color-name}-border {
+            border-color: $color-value !important;
+          }
+        }
+      }
+
+      @if list.length($feature-list) <
+        1 or
+        list.index($feature-list, "background")
+      {
+        @if $vars {
+          .#{$prefix}#{$branch-name}-#{$color-name}-bg {
+            background-color: var(
+              --#{$prefixV}#{$branch-name}-#{$color-name}
+            ) !important;
+            color: var(
+              --#{$prefixV}on-#{$branch-name}-#{$color-name}
+            ) !important;
+          }
+        } @else {
+          .#{$prefix}#{$branch-name}-#{$color-name}-bg {
+            background-color: $color-value !important;
+          }
+        }
+      }
+
+      @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo")
+      {
+        @if $vars {
+          .#{$prefix}#{$branch-name}-#{$color-name}-pseudo-bg {
+            &::after,
+            &::before {
+              background-color: var(
+                --#{$prefixV}#{$branch-name}-#{$color-name}
+              ) !important;
+            }
+          }
+        } @else {
+          .#{$prefix}#{$branch-name}-#{$color-name}-pseudo-bg {
+            &::after,
+            &::before {
+              background-color: $color-value !important;
+            }
+          }
+        }
+      }
+
+      @if list.length($feature-list) < 1 or list.index($feature-list, "hover") {
+        @if not
+          list.index($branch-name, "gradient") and
+          (list.length($feature-list) < 1 or list.index($feature-list, "text"))
+        {
+          @if $vars {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-text {
+              &:hover {
+                color: var(
+                  --#{$prefixV}#{$branch-name}-#{$color-name}
+                ) !important;
+              }
+            }
+          } @else {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-text {
+              &:hover {
+                color: $color-value !important;
+              }
+            }
+          }
+        }
+
+        @if not
+          list.index($branch-name, "gradient") and
+          (
+            list.length($feature-list) <
+              1 or
+              list.index($feature-list, "border")
+          )
+        {
+          @if $vars {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-border {
+              &:hover {
+                border-color: var(
+                  --#{$prefixV}#{$branch-name}-#{$color-name}
+                ) !important;
+              }
+            }
+          } @else {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-border {
+              &:hover {
+                border-color: $color-value !important;
+              }
+            }
+          }
+        }
+
+        @if list.length($feature-list) <
+          1 or
+          list.index($feature-list, "background")
+        {
+          @if $vars {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-bg {
+              &:hover {
+                background-color: var(
+                  --#{$prefixV}#{$branch-name}-#{$color-name}
+                ) !important;
+                color: var(
+                  --#{$prefixV}on-#{$branch-name}-#{$color-name}
+                ) !important;
+              }
+            }
+          } @else {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-bg {
+              &:hover {
+                background-color: $color-value !important;
+              }
+            }
+          }
+        }
+
+        @if list.length($feature-list) <
+          1 or
+          list.index($feature-list, "pseudo")
+        {
+          @if $vars {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-pseudo-bg {
+              &:hover {
+                &::after,
+                &::before {
+                  background-color: var(
+                    --#{$prefixV}#{$branch-name}-#{$color-name}
+                  ) !important;
+                }
+              }
+            }
+          } @else {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-pseudo-bg {
+              &:hover {
+                &::after,
+                &::before {
+                  background-color: $color-value !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/mixins/_create-helper-margin.scss

@@ -1,39 +1,43 @@
-/**
- *
- * t - applies the spacing for margin-top
- * b - applies the spacing for margin-bottom
- * l - applies the spacing for margin-left
- * r - applies the spacing for margin-right
- * x - applies the spacing for both *-left and *-right
- * y - applies the spacing for both *-top and *-bottom
- * a - applies the spacing for the property in all directions
- *
- * @param {Array<name,value>[]} measure-list - postfix name and value
- */
-@mixin create-helper-margin($measure-list: (), $important: false, $prefix: "") {
-  @each $name, $val in $measure-list {
-    .#{$prefix}mt-#{$name} {
-      margin-top: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}mb-#{$name} {
-      margin-bottom: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}ml-#{$name} {
-      margin-left: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}mr-#{$name} {
-      margin-right: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}mx-#{$name} {
-      margin-right: #{$val} #{if($important == true, "!important", "")};
-      margin-left: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}my-#{$name} {
-      margin-top: #{$val} #{if($important == true, "!important", "")};
-      margin-bottom: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}ma-#{$name} {
-      margin: #{$val} #{if($important == true, "!important", "")};
-    }
-  }
-}
+/**
+ *
+ * t - applies the spacing for margin-top
+ * b - applies the spacing for margin-bottom
+ * l - applies the spacing for margin-left
+ * r - applies the spacing for margin-right
+ * x - applies the spacing for both *-left and *-right
+ * y - applies the spacing for both *-top and *-bottom
+ * a - applies the spacing for the property in all directions
+ *
+ * @param {Array<name,value>[]} measure-list - postfix name and value
+ */
+@mixin create-helper-margin($measure-list: (), $important: false, $prefix: "") {
+  $important-suffix: "";
+  @if $important == true {
+    $important-suffix: " !important";
+  }
+  @each $name, $val in $measure-list {
+    .#{$prefix}mt-#{$name} {
+      margin-top: #{$val}#{$important-suffix};
+    }
+    .#{$prefix}mb-#{$name} {
+      margin-bottom: #{$val}#{$important-suffix};
+    }
+    .#{$prefix}ml-#{$name} {
+      margin-left: #{$val}#{$important-suffix};
+    }
+    .#{$prefix}mr-#{$name} {
+      margin-right: #{$val}#{$important-suffix};
+    }
+    .#{$prefix}mx-#{$name} {
+      margin-right: #{$val}#{$important-suffix};
+      margin-left: #{$val}#{$important-suffix};
+    }
+    .#{$prefix}my-#{$name} {
+      margin-top: #{$val}#{$important-suffix};
+      margin-bottom: #{$val}#{$important-suffix};
+    }
+    .#{$prefix}ma-#{$name} {
+      margin: #{$val}#{$important-suffix};
+    }
+  }
+}