@guebbit/css-toolkit 1.2.2 → 1.3.1

package/src/mixins/_create-colors.scss

@@ -4,19 +4,21 @@
 
 /**
  *  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
+ *  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, color very rarely used)
+ *    - pseudo (bg only, text very rarely used)
  *    - hover
- *    $prefix: prefix that applies to classes
  */
-@mixin create-colors($color-list: (), $branch-list: (), $feature-list: (), $prefix: "") {
+@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
@@ -25,13 +27,22 @@
       // 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 {
+        @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 list.length($feature-list) < 1 or list.index($feature-list, "border") {
+        }
+
+        @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;
             }
@@ -39,31 +50,62 @@
         }
 
         @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
-          .#{$prefix}#{$branch-name}-#{$sname}-bg {
-            background: $scolor !important;
+          @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") {
-          .#{$prefix}#{$branch-name}-#{$sname}-pseudo-bg {
-            &::after,
-            &::before {
-              background: $scolor !important;
+          @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 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"){
+          @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 list.length($feature-list) < 1 or list.index($feature-list, "border"){
+          }
+
+          @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;
@@ -73,19 +115,39 @@
           }
 
           @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
-            .#{$prefix}#{$branch-name}-#{$sname}-hover-bg {
-              &:hover {
-                background: $scolor !important;
+            @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") {
-            .#{$prefix}#{$branch-name}-#{$sname}-hover-pseudo-bg {
-              &:hover{
-                &::after,
-                &::before {
-                  background: $scolor !important;
+            @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;
+                  }
                 }
               }
             }
@@ -94,26 +156,5 @@
       }
     }
   }
+}
 
-  /**
-   * 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 meta.type-of($scolor) == color {
-          --#{$prefix}on-#{$branch-name}-#{$sname}: #{color-functions.extract-colors(color-functions.color-contrast($scolor))};
-          // _}
-        }
-      }
-    }
-  }
-}

package/test/compile.test.js

@@ -35,11 +35,37 @@ describe("COMPILE", function() {
         expect(cssCompiled).to.contain('.blue-400-text {');
         expect(cssCompiled).to.contain('color: rgb(61.4, 139, 253.4) !important;');
         expect(cssCompiled).to.contain('.blue-400-bg {');
-        expect(cssCompiled).to.contain('background: rgb(61.4, 139, 253.4) !important;');
+        expect(cssCompiled).to.contain('background-color: rgb(61.4, 139, 253.4) !important;');
+        expect(cssCompiled).to.contain('.blue-400-border {');
+        expect(cssCompiled).to.contain('border-color: rgb(61.4, 139, 253.4) !important;');
+        expect(cssCompiled).to.contain('.blue-400-pseudo-bg::after, .blue-400-pseudo-bg::before {');
+        expect(cssCompiled).to.contain('background-color: rgb(61.4, 139, 253.4) !important;');
+        expect(cssCompiled).to.contain('.blue-400-hover-text:hover {');
+        expect(cssCompiled).to.contain('.blue-400-hover-bg:hover {');
+        expect(cssCompiled).to.contain('.blue-400-hover-border:hover {');
+        expect(cssCompiled).to.contain('.blue-400-hover-pseudo-bg:hover::after, .blue-400-hover-pseudo-bg:hover::before {');
         // --
+        expect(cssCompiled).to.contain('.primary-500-text {');
+        expect(cssCompiled).to.contain('color: var(--g-theme-primary-500) !important;');
+        expect(cssCompiled).to.contain('.primary-500-bg {');
+        expect(cssCompiled).to.contain('background-color: var(--g-theme-primary-500) !important;');
+        expect(cssCompiled).to.contain('.primary-500-border {');
+        expect(cssCompiled).to.contain('border-color: var(--g-theme-primary-500) !important;');
+        expect(cssCompiled).to.contain('.primary-500-pseudo-bg::after, .primary-500-pseudo-bg::before {');
+        expect(cssCompiled).to.contain('.primary-500-hover-text:hover {');
+        expect(cssCompiled).to.contain('.primary-500-hover-bg:hover {');
+        expect(cssCompiled).to.contain('.primary-500-hover-border:hover {');
+        expect(cssCompiled).to.contain('.primary-500-hover-pseudo-bg:hover::after, .primary-500-hover-pseudo-bg:hover::before {');
+        // --
+        expect(cssCompiled).to.contain('--g-theme-primary-500: 255 0 255;');
+        expect(cssCompiled).to.contain('--g-theme-on-primary-500: 255 255 255;');
         expect(cssCompiled).to.contain('--blue-400: 61.4 139 253.4;');
+        expect(cssCompiled).to.contain('--on-blue-400: 0 0 0;');
         expect(cssCompiled).to.contain('--manga-red-500: 212 24 22;');
-        expect(cssCompiled).to.contain('--advanced-brand-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);');
+        expect(cssCompiled).to.contain('--gradient-brand-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);');
+        expect(cssCompiled).to.contain('.text-align-right {');
+        expect(cssCompiled).to.contain('text-align: right !important;');
+
         expect(cssCompiled).to.contain('.mt-auto {');
         expect(cssCompiled).to.contain('margin-top: auto;');
         expect(cssCompiled).to.contain('.my-48 {');