@guebbit/css-toolkit 1.3.1 → 1.3.2

package/docs/.vitepress/dist/mixins/create-helper-margin.html

@@ -9,9 +9,9 @@
     <link rel="preload stylesheet" href="/assets/style.BsKZwvOR.css" as="style">
     <link rel="preload stylesheet" href="/vp-icons.css" as="style">
     
-    <script type="module" src="/assets/app.CE7x4Dlp.js"></script>
+    <script type="module" src="/assets/app.CBPosL5d.js"></script>
     <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
-    <link rel="modulepreload" href="/assets/chunks/theme.BWSHCtHe.js">
+    <link rel="modulepreload" href="/assets/chunks/theme.BeEqdqye.js">
     <link rel="modulepreload" href="/assets/chunks/framework.BZemHgQ6.js">
     <link rel="modulepreload" href="/assets/mixins_create-helper-margin.md.DqwBKQ0G.lean.js">
     <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>

package/docs/.vitepress/dist/mixins/create-helper-padding.html

@@ -9,9 +9,9 @@
     <link rel="preload stylesheet" href="/assets/style.BsKZwvOR.css" as="style">
     <link rel="preload stylesheet" href="/vp-icons.css" as="style">
     
-    <script type="module" src="/assets/app.CE7x4Dlp.js"></script>
+    <script type="module" src="/assets/app.CBPosL5d.js"></script>
     <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
-    <link rel="modulepreload" href="/assets/chunks/theme.BWSHCtHe.js">
+    <link rel="modulepreload" href="/assets/chunks/theme.BeEqdqye.js">
     <link rel="modulepreload" href="/assets/chunks/framework.BZemHgQ6.js">
     <link rel="modulepreload" href="/assets/mixins_create-helper-padding.md.Br9TOGl1.lean.js">
     <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>

package/docs/.vitepress/dist/mixins/create-instruction.html

@@ -9,9 +9,9 @@
     <link rel="preload stylesheet" href="/assets/style.BsKZwvOR.css" as="style">
     <link rel="preload stylesheet" href="/vp-icons.css" as="style">
     
-    <script type="module" src="/assets/app.CE7x4Dlp.js"></script>
+    <script type="module" src="/assets/app.CBPosL5d.js"></script>
     <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
-    <link rel="modulepreload" href="/assets/chunks/theme.BWSHCtHe.js">
+    <link rel="modulepreload" href="/assets/chunks/theme.BeEqdqye.js">
     <link rel="modulepreload" href="/assets/chunks/framework.BZemHgQ6.js">
     <link rel="modulepreload" href="/assets/mixins_create-instruction.md.BeAIoeQx.lean.js">
     <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guebbit/css-toolkit",
   "type": "module",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A repository containing helpful SCSS functions, mixins, and utilities for streamlining and standardizing CSS development",
   "main": "vite.config.js",
   "files": [
@@ -24,7 +24,7 @@
     "publish:public": "npm publish --access public"
   },
   "devDependencies": {
-    "@types/node": "^22.13.5",
+    "@types/node": "^22.13.8",
     "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
     "breakpoint-sass": "^3.0.0",
@@ -35,13 +35,13 @@
     "postcss": "^8.5.3",
     "postcss-loader": "^8.1.1",
     "postcss-prefix-selector": "^2.1.0",
-    "sass": "^1.85.0",
+    "sass": "^1.85.1",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.14.1",
+    "stylelint": "^16.15.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-scss": "^6.11.1",
-    "vite": "^6.1.1",
+    "vite": "^6.2.0",
     "vitepress": "^1.6.3"
   },
   "repository": {

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

@@ -7,29 +7,21 @@
  *
  *  @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: ()) {
+@mixin create-colors-vars($color-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 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))};
-          // _}
-        }
+    // 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

@@ -10,7 +10,6 @@
  *  @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
@@ -18,136 +17,132 @@
  *    - pseudo (bg only, text very rarely used)
  *    - hover
  */
-@mixin create-colors($color-list: (), $vars: false, $prefix: "", $prefixV: "", $branch-list: (), $feature-list: ()) {
+@mixin create-colors($color-list: (), $vars: false, $prefix: "", $prefixV: "", $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 $color-name, $color-value in $branch {
 
-      // 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}-#{$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, "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}-#{$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 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}-#{$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, "background") {
-          @if $vars {
-            .#{$prefix}#{$branch-name}-#{$sname}-bg {
-              background-color: var(--#{$prefixV}#{$branch-name}-#{$sname}) !important;
-              color: var(--#{$prefixV}on-#{$branch-name}-#{$sname}) !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}-#{$sname}-bg {
-              background-color: $scolor !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, "pseudo") {
+      @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}-pseudo-bg {
-              &::after,
-              &::before {
-                background-color: var(--#{$prefixV}#{$branch-name}-#{$sname}) !important;
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-text {
+              &:hover {
+                color: var(--#{$prefixV}#{$branch-name}-#{$color-name}) !important;
               }
             }
           } @else {
-            .#{$prefix}#{$branch-name}-#{$sname}-pseudo-bg {
-              &::after,
-              &::before {
-                background-color: $scolor !important;
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-text {
+              &:hover {
+                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}-#{$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}-#{$color-name}-hover-border {
+              &:hover {
+                border-color: var(--#{$prefixV}#{$branch-name}-#{$color-name}) !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;
-                }
+          } @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}-#{$sname}-hover-bg {
-                &:hover {
-                  background-color: var(--#{$prefixV}#{$branch-name}-#{$sname}) !important;
-                  color: var(--#{$prefixV}on-#{$branch-name}-#{$sname}) !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}-#{$sname}-hover-bg {
-                &:hover {
-                  background-color: $scolor !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}-#{$sname}-hover-pseudo-bg {
-                &:hover {
-                  &::after,
-                  &::before {
-                    background-color: var(--#{$prefixV}#{$branch-name}-#{$sname}) !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}-#{$sname}-hover-pseudo-bg {
-                &:hover {
-                  &::after,
-                  &::before {
-                    background-color: $scolor !important;
-                  }
+            }
+          } @else {
+            .#{$prefix}#{$branch-name}-#{$color-name}-hover-pseudo-bg {
+              &:hover {
+                &::after,
+                &::before {
+                  background-color: $color-value !important;
                 }
               }
             }