@coreui/coreui 5.0.0-alpha.0 → 5.0.0-alpha.2

package/scss/vendor/_rfs.scss

@@ -1,4 +1,4 @@
-// stylelint-disable property-blacklist, scss/dollar-variable-default
+// stylelint-disable scss/dimension-no-non-numeric-values
 
 // SCSS RFS mixin
 //
@@ -154,8 +154,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
     &.enable-rfs {
       @content;
     }
-  }
-  @else {
+  } @else {
     @content;
   }
 }
@@ -168,7 +167,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
       @content;
     }
 
-    @include _rfs-media-query {
+    @include _rfs-media-query () {
       .enable-rfs &,
       &.enable-rfs {
         @content;
@@ -182,7 +181,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
         @content;
       }
     }
-    @include _rfs-media-query {
+    @include _rfs-media-query () {
       @content;
     }
   }
@@ -193,12 +192,12 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
   // Convert to list
   $values: if(type-of($values) != list, ($values,), $values);
 
-  $val: '';
+  $val: "";
 
   // Loop over each value and calculate value
   @each $value in $values {
     @if $value == 0 {
-      $val: $val + ' 0';
+      $val: $val + " 0";
     }
     @else {
       // Cache $value unit
@@ -206,15 +205,14 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 
       @if $unit == px {
         // Convert to rem if needed
-        $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
+        $val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
       }
       @else if $unit == rem {
         // Convert to px if needed
-        $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
-      }
-      @else {
+        $val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
+      } @else {
         // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
-        $val: $val + ' ' + $value;
+        $val: $val + " " + $value;
       }
     }
   }
@@ -228,30 +226,26 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
   // Convert to list
   $values: if(type-of($values) != list, ($values,), $values);
 
-  $val: '';
+  $val: "";
 
   // Loop over each value and calculate value
   @each $value in $values {
     @if $value == 0 {
-      $val: $val + ' 0';
-    }
-
-    @else {
+      $val: $val + " 0";
+    } @else {
       // Cache $value unit
       $unit: if(type-of($value) == "number", unit($value), false);
 
       // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
       @if not $unit or $unit != px and $unit != rem {
-        $val: $val + ' ' + $value;
-      }
-
-      @else {
+        $val: $val + " " + $value;
+      } @else {
         // Remove unit from $value for calculations
         $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
 
         // Only add the media query if the value is greater than the minimum value
         @if abs($value) <= $rfs-base-value or not $enable-rfs {
-          $val: $val + ' ' +  if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
+          $val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
         }
         @else {
           // Calculate the minimum value
@@ -273,7 +267,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
           $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
 
           // Return the calculated value
-          $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
+          $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
         }
       }
     }
@@ -287,22 +281,22 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 @mixin rfs($values, $property: font-size) {
   @if $values != null {
     $val: rfs-value($values);
-    $fluidVal: rfs-fluid-value($values);
+    $fluid-val: rfs-fluid-value($values);
 
     // Do not print the media query if responsive & non-responsive values are the same
-    @if $val == $fluidVal {
+    @if $val == $fluid-val {
       #{$property}: $val;
     }
     @else {
-      @include _rfs-rule {
-        #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);
+      @include _rfs-rule () {
+        #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);
 
         // Include safari iframe resize fix if needed
         min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
       }
 
-      @include _rfs-media-query-rule {
-        #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
+      @include _rfs-media-query-rule () {
+        #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);
       }
     }
   }
@@ -351,4 +345,4 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 
 @mixin margin-left($value) {
   @include rfs($value, margin-left);
-}
+}

package/scss/tests/mixins/_color-modes.test.scss

@@ -1,69 +0,0 @@
-// stylelint-disable selector-attribute-quotes
-
-@import "../../functions";
-@import "../../variables";
-@import "../../variables-dark";
-@import "../../maps";
-@import "../../mixins";
-
-@include describe("global $color-mode-type: data") {
-  @include it("generates data attribute selectors for dark mode") {
-    @include assert() {
-      @include output() {
-        @include color-mode(dark) {
-          .element {
-            color: var(--cui-primary-text);
-            background-color: var(--cui-primary-bg-subtle);
-          }
-        }
-        @include color-mode(dark, true) {
-          --custom-color: #{mix($indigo, $blue, 50%)};
-        }
-      }
-      @include expect() {
-        [data-coreui-theme=dark] .element {
-          color: var(--cui-primary-text);
-          background-color: var(--cui-primary-bg-subtle);
-        }
-        [data-coreui-theme=dark] {
-          --custom-color: #3a3ff8;
-        }
-      }
-    }
-  }
-}
-
-@include describe("global $color-mode-type: media-query") {
-  @include it("generates media queries for dark mode") {
-    $color-mode-type: media-query !global;
-
-    @include assert() {
-      @include output() {
-        @include color-mode(dark) {
-          .element {
-            color: var(--cui-primary-text);
-            background-color: var(--cui-primary-bg-subtle);
-          }
-        }
-        @include color-mode(dark, true) {
-          --custom-color: #{mix($indigo, $blue, 50%)};
-        }
-      }
-      @include expect() {
-        @media (prefers-color-scheme: dark) {
-          .element {
-            color: var(--cui-primary-text);
-            background-color: var(--cui-primary-bg-subtle);
-          }
-        }
-        @media (prefers-color-scheme: dark) {
-          :root {
-            --custom-color: #3a3ff8;
-          }
-        }
-      }
-    }
-
-    $color-mode-type: data !global;
-  }
-}

package/scss/tests/mixins/_utilities.test.scss

@@ -1,393 +0,0 @@
-$prefix: bs-;
-$enable-important-utilities: false;
-
-// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
-@import "../../mixins/utilities";
-
-@mixin test-generate-utility($params...) {
-  @include assert() {
-    @include output() {
-      @include generate-utility($params...);
-    }
-
-    @include expect() {
-      @content;
-    }
-  }
-}
-
-@include describe(generate-utility) {
-  @include it("generates a utility class for each value") {
-    @include test-generate-utility(
-      (
-        property: "padding",
-        values: (small: .5rem, large: 2rem)
-      )
-    ) {
-      .padding-small {
-        padding: .5rem;
-      }
-
-      .padding-large {
-        padding: 2rem;
-      }
-    }
-  }
-
-  @include describe("global $enable-important-utilities: true") {
-    @include it("sets !important") {
-      $enable-important-utilities: true !global;
-
-      @include test-generate-utility(
-        (
-          property: "padding",
-          values: (small: .5rem, large: 2rem)
-        )
-      ) {
-        .padding-small {
-          padding: .5rem !important;
-        }
-
-        .padding-large {
-          padding: 2rem !important;
-        }
-      }
-
-      $enable-important-utilities: false !global;
-    }
-  }
-
-  @include describe("$utility") {
-    @include describe("values") {
-      @include it("supports null keys") {
-        @include test-generate-utility(
-          (
-            property: "padding",
-            values: (null: 1rem, small: .5rem, large: 2rem)
-          ),
-        ) {
-          .padding {
-            padding: 1rem;
-          }
-
-          .padding-small {
-            padding: .5rem;
-          }
-
-          .padding-large {
-            padding: 2rem;
-          }
-        }
-      }
-
-      @include it("ignores null values") {
-        @include test-generate-utility(
-          (
-            property: "padding",
-            values: (small: null, large: 2rem)
-          )
-        ) {
-          .padding-large {
-            padding: 2rem;
-          }
-        }
-      }
-
-      @include it("supports lists") {
-        @include test-generate-utility(
-          (
-            property: "padding",
-            values: 1rem 2rem
-          )
-        ) {
-          .padding-1rem {
-            padding: 1rem;
-          }
-
-          .padding-2rem {
-            padding: 2rem;
-          }
-        }
-      }
-
-      @include it("supports single values") {
-        @include test-generate-utility(
-          (
-            property: padding,
-            values: 1rem
-          )
-        ) {
-          .padding-1rem {
-            padding: 1rem;
-          }
-        }
-      }
-    }
-
-    @include describe("class & property") {
-      @include it("adds each property to the declaration") {
-        @include test-generate-utility(
-          (
-            class: padding-x,
-            property: padding-inline-start padding-inline-end,
-            values: 1rem
-          )
-        ) {
-          .padding-x-1rem {
-            padding-inline-start: 1rem;
-            padding-inline-end: 1rem;
-          }
-        }
-      }
-
-      @include it("uses the first property as class name") {
-        @include test-generate-utility(
-          (
-            property: padding-inline-start padding-inline-end,
-            values: 1rem
-          )
-        ) {
-          .padding-inline-start-1rem {
-            padding-inline-start: 1rem;
-            padding-inline-end: 1rem;
-          }
-        }
-      }
-
-      @include it("supports a null class to create classes straight from the values") {
-        @include test-generate-utility(
-          (
-            property: visibility,
-            class: null,
-            values: (
-              visible: visible,
-              invisible: hidden,
-            )
-          )
-        ) {
-          .visible {
-            visibility: visible;
-          }
-
-          .invisible {
-            visibility: hidden;
-          }
-        }
-      }
-    }
-
-    @include describe("state") {
-      @include it("Generates selectors for each states") {
-        @include test-generate-utility(
-          (
-            property: padding,
-            values: 1rem,
-            state: hover focus,
-          )
-        ) {
-          .padding-1rem {
-            padding: 1rem;
-          }
-
-          .padding-1rem-hover:hover {
-            padding: 1rem;
-          }
-
-          .padding-1rem-focus:focus {
-            padding: 1rem;
-          }
-        }
-      }
-    }
-
-    @include describe("css-var"){
-      @include it("sets a CSS variable instead of the property") {
-        @include test-generate-utility(
-          (
-            property: padding,
-            css-variable-name: padding,
-            css-var: true,
-            values: 1rem 2rem
-          )
-        ) {
-          .padding-1rem {
-            --cui-padding: 1rem;
-          }
-
-          .padding-2rem {
-            --cui-padding: 2rem;
-          }
-        }
-      }
-
-      @include it("defaults to class") {
-        @include test-generate-utility(
-          (
-            property: padding,
-            class: padding,
-            css-var: true,
-            values: 1rem 2rem
-          )
-        ) {
-          .padding-1rem {
-            --cui-padding: 1rem;
-          }
-
-          .padding-2rem {
-            --cui-padding: 2rem;
-          }
-        }
-      }
-    }
-
-    @include describe("local-vars") {
-      @include it("generates the listed variables") {
-        @include test-generate-utility(
-          (
-            property: color,
-            class: desaturated-color,
-            local-vars: (
-              color-opacity: 1,
-              color-saturation: .25
-            ),
-            values: (
-              blue: hsla(192deg, var(--cui-color-saturation), 0, var(--cui-color-opacity))
-            )
-          )
-        ) {
-          .desaturated-color-blue {
-            --cui-color-opacity: 1;
-            // Sass compilation will put a leading zero so we want to keep that one
-            // stylelint-disable-next-line number-leading-zero
-            --cui-color-saturation: 0.25;
-            color: hsla(192deg, var(--cui-color-saturation), 0, var(--cui-color-opacity));
-          }
-        }
-      }
-    }
-
-    @include describe("css-var & state") {
-      @include it("Generates a rule with for each state with a CSS variable") {
-        @include test-generate-utility(
-          (
-            property: padding,
-            css-var: true,
-            css-variable-name: padding,
-            values: 1rem,
-            state: hover focus,
-          )
-        ) {
-          .padding-1rem {
-            --cui-padding: 1rem;
-          }
-
-          .padding-1rem-hover:hover {
-            --cui-padding: 1rem;
-          }
-
-          .padding-1rem-focus:focus {
-            --cui-padding: 1rem;
-          }
-        }
-      }
-    }
-
-    @include describe("rtl") {
-      @include it("sets up RTLCSS for removal when false") {
-        @include test-generate-utility(
-          (
-            property: padding,
-            values: 1rem,
-            rtl: false
-          )
-        ) {
-          /* rtl:begin:remove */
-
-          .padding-1rem {
-            padding: 1rem;
-          }
-
-          /* rtl:end:remove */
-
-        }
-      }
-    }
-
-    @include describe("rfs") {
-      @include it("sets the fluid value when not inside media query") {
-        @include test-generate-utility(
-          (
-            property: padding,
-            values: 1rem,
-            rfs: true
-          )
-        ) {
-          .padding-1rem {
-            padding: rfs-fluid-value(1rem);
-          }
-        }
-      }
-
-      @include it("sets the value when inside the media query") {
-        @include test-generate-utility(
-          (
-            property: padding,
-            values: 1rem,
-            rfs: true
-          ),
-          $is-rfs-media-query: true
-        ) {
-          .padding-1rem {
-            padding: rfs-value(1rem);
-          }
-        }
-      }
-    }
-  }
-
-  @include describe("$infix") {
-    @include it("inserts the given infix") {
-      @include test-generate-utility(
-        (
-          property: "padding",
-          values: (null: 1rem, small: .5rem, large: 2rem)
-        ),
-        $infix: -sm
-      ) {
-        .padding-sm {
-          padding: 1rem;
-        }
-
-        .padding-sm-small {
-          padding: .5rem;
-        }
-
-        .padding-sm-large {
-          padding: 2rem;
-        }
-      }
-    }
-
-    @include it("strips leading - if class is null") {
-      @include test-generate-utility(
-        (
-          property: visibility,
-          class: null,
-          values: (
-            visible: visible,
-            invisible: hidden,
-          )
-        ),
-        -sm
-      ) {
-        .sm-visible {
-          visibility: visible;
-        }
-
-        .sm-invisible {
-          visibility: hidden;
-        }
-      }
-    }
-  }
-}

package/scss/tests/utilities/_api.test.scss

@@ -1,75 +0,0 @@
-@import "../../functions";
-@import "../../variables";
-@import "../../maps";
-@import "../../mixins";
-
-$utilities: ();
-
-@include describe("utilities/api") {
-  @include it("generates utilities for each breakpoints") {
-    $utilities: (
-      margin: (
-        property: margin,
-        values: auto
-      ),
-      padding: (
-        property: padding,
-        responsive: true,
-        values: 1rem
-      ),
-      font-size: (
-        property: font-size,
-        values: (large: 1.25rem),
-        print: true
-      )
-    ) !global;
-
-    $grid-breakpoints: (
-      xs: 0,
-      sm: 576px,
-      md: 768px
-    );
-
-
-    @include assert() {
-      @include output() {
-        @import "../../utilities/api";
-      }
-
-      @include expect() {
-        // margin is not set to responsive
-        .margin-auto {
-          margin: auto !important;
-        }
-
-        // padding is, though
-        .padding-1rem {
-          padding: 1rem !important;
-        }
-
-        .font-size-large {
-          font-size: 1.25rem !important;
-        }
-
-        @media (min-width: 576px) {
-          .padding-sm-1rem {
-            padding: 1rem !important;
-          }
-        }
-
-        @media (min-width: 768px) {
-          .padding-md-1rem {
-            padding: 1rem !important;
-          }
-        }
-
-        @media print {
-          .font-size-print-large {
-            font-size: 1.25rem !important;
-          }
-        }
-      }
-
-    }
-  }
-}