@guebbit/css-toolkit 1.2.0 → 1.3.1

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

@@ -0,0 +1,35 @@
+@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))};
+          // _}
+        }
+
+      }
+    }
+  }
+}

package/src/mixins/_create-colors.scss

@@ -1,119 +1,160 @@
-@use "sass:list";
-@use "sass:string";
-@use "../functions/colors" as color-functions;
-
-/**
- *  Create all the needed classes for the requested colors
- *  $color-list     - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
- *  $branch-list:   - when filled: becomes a whitelist (aka: include only listed brands)
- *  $feature-list:  - when filled: becomes a whitelist. May become cumbersome and many are not needed. Use with care.
- *    - root
- *    - on-root (color's "best contrast" partner color)
- *    - color
- *    - background
- *    - border
- *    - pseudo (bg only, color very rarely used)
- *    - hover
- *    $prefix: prefix that applies to classes
- */
-@mixin create-colors($color-list: (), $branch-list: (), $feature-list: (), $prefix: "") {
-  // 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, "advanced"){
-          @if list.length($feature-list) < 1 or list.index($feature-list, "color") {
-            .#{$prefix}#{$branch-name}-#{$sname}-text {
-              color: $scolor !important;
-            }
-          }
-          @if list.length($feature-list) < 1 or list.index($feature-list, "border") {
-            .#{$prefix}#{$branch-name}-#{$sname}-border {
-              border-color: $scolor !important;
-            }
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
-          .#{$prefix}#{$branch-name}-#{$sname}-bg {
-            background: $scolor !important;
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
-          .#{$prefix}#{$branch-name}-#{$sname}-pseudo-bg {
-            &::after,
-            &::before {
-              background: $scolor !important;
-            }
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "hover"){
-
-          @if not list.index($branch-name, "advanced"){
-            @if list.length($feature-list) < 1 or list.index($feature-list, "color"){
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-text {
-                &:hover {
-                  color: $scolor !important;
-                }
-              }
-            }
-            @if list.length($feature-list) < 1 or list.index($feature-list, "border"){
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-border {
-                &:hover {
-                  border-color: $scolor !important;
-                }
-              }
-            }
-          }
-
-          @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
-            .#{$prefix}#{$branch-name}-#{$sname}-hover-bg {
-              &:hover {
-                background: $scolor !important;
-              }
-            }
-          }
-
-          @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
-            .#{$prefix}#{$branch-name}-#{$sname}-hover-pseudo-bg {
-              &:hover{
-                &::after,
-                &::before {
-                  background: $scolor !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  /**
-   * CSS VARS on root (they will be translated in "RGB" instead of "HEX"
-   */
-  :root{
-    @if list.length($feature-list) < 1 or list.index($feature-list, "root"){
-      @each $branch-name, $branch in $color-list {
-        @each $sname, $scolor in $branch {
-          --#{$prefix}#{$branch-name}-#{$sname}: #{color-functions.extract-colors($scolor)};
-        }
-      }
-    }
-    @if list.length($feature-list) < 1 or list.index($feature-list, "on-root"){
-      @each $branch-name, $branch in $color-list {
-        @each $sname, $scolor in $branch {
-          // @if type-of($scolor) == color {
-          --#{$prefix}on-#{$branch-name}-#{$sname}: #{color-functions.extract-colors(color-functions.color-contrast($scolor))};
-          // _}
-        }
-      }
-    }
-  }
-}
+@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;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+

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

@@ -1,39 +1,39 @@
-/**
- *
- * 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: "") {
+  @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", "")};
+    }
+  }
 }

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

@@ -1,40 +1,40 @@
-/**
- *
- * t - applies the spacing for padding-top
- * b - applies the spacing for padding-bottom
- * l - applies the spacing for padding-left
- * r - applies the spacing for padding-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-padding($measure-list: (), $important: false, $prefix: "") {
-
-  @each $name, $val in $measure-list {
-    .#{$prefix}pt-#{$name} {
-      padding-top: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}pb-#{$name} {
-      padding-bottom: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}pl-#{$name} {
-      padding-left: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}pr-#{$name} {
-      padding-right: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}px-#{$name} {
-      padding-right: #{$val} #{if($important == true, "!important", "")};
-      padding-left: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}py-#{$name} {
-      padding-top: #{$val} #{if($important == true, "!important", "")};
-      padding-bottom: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}pa-#{$name} {
-      padding: #{$val} #{if($important == true, "!important", "")};
-    }
-  }
-}
+/**
+ *
+ * t - applies the spacing for padding-top
+ * b - applies the spacing for padding-bottom
+ * l - applies the spacing for padding-left
+ * r - applies the spacing for padding-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-padding($measure-list: (), $important: false, $prefix: "") {
+
+  @each $name, $val in $measure-list {
+    .#{$prefix}pt-#{$name} {
+      padding-top: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}pb-#{$name} {
+      padding-bottom: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}pl-#{$name} {
+      padding-left: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}pr-#{$name} {
+      padding-right: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}px-#{$name} {
+      padding-right: #{$val} #{if($important == true, "!important", "")};
+      padding-left: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}py-#{$name} {
+      padding-top: #{$val} #{if($important == true, "!important", "")};
+      padding-bottom: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}pa-#{$name} {
+      padding: #{$val} #{if($important == true, "!important", "")};
+    }
+  }
+}