@coreui/coreui 4.2.5 → 5.0.0-alpha.0

package/scss/sidebar/_sidebar.scss

@@ -70,12 +70,12 @@
   padding: var(--#{$prefix}sidebar-padding-y) var(--#{$prefix}sidebar-padding-x);
   color: var(--#{$prefix}sidebar-color);
   background: var(--#{$prefix}sidebar-bg);
-  @include ltr-rtl("border-right", var(--#{$prefix}sidebar-border-width) solid var(--#{$prefix}sidebar-border-color));
   box-shadow: none;
   @include transition($sidebar-transition);
 
   &:not(.sidebar-end){
-    @include ltr-rtl("margin-left", 0);
+    margin-left: 0;
+    border-right: var(--#{$prefix}sidebar-border-width) solid var(--#{$prefix}sidebar-border-color);
     ~ * {
       --#{$prefix}sidebar-occupy-start: #{$sidebar-width};
     }
@@ -83,7 +83,8 @@
 
   &.sidebar-end {
     order: 99;
-    @include ltr-rtl("margin-right", 0);
+    margin-right: 0;
+    border-left: var(--#{$prefix}sidebar-border-width) solid var(--#{$prefix}sidebar-border-color);
     ~ * {
       --#{$prefix}sidebar-occupy-end: #{$sidebar-width};
     }
@@ -114,13 +115,13 @@
   @include media-breakpoint-up($mobile-breakpoint) {
     &.hide {
       &:not(.sidebar-end){
-        @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
+        margin-left: calc(-1 * var(--#{$prefix}sidebar-width)); // stylelint-disable-line function-disallowed-list
         ~ * {
           --#{$prefix}sidebar-occupy-start: 0;
         }
       }
       &.sidebar-end {
-        @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
+        margin-right: calc(-1 * var(--#{$prefix}sidebar-width)); // stylelint-disable-line function-disallowed-list
         ~ * {
           --#{$prefix}sidebar-occupy-end: 0;
         }
@@ -136,11 +137,11 @@
       z-index: $zindex-fixed;
 
       &:not(.sidebar-end) {
-        @include ltr-rtl("left", 0);
+        left: 0;
       }
 
       &.sidebar-end {
-        @include ltr-rtl("right", 0);
+        right: 0;
       }
     }
   }
@@ -160,14 +161,14 @@
     z-index: $zindex-fixed + 2;
 
     &:not(.sidebar-end) {
-      @include ltr-rtl("left", 0);
+      left: 0;
       ~ * {
         --#{$prefix}sidebar-occupy-start: 0;
       }
     }
 
     &.sidebar-end {
-      @include ltr-rtl("right", 0);
+      right: 0;
       ~ * {
         --#{$prefix}sidebar-occupy-end: 0;
       }
@@ -183,23 +184,23 @@
     z-index: $zindex-fixed + 1;
 
     &:not(.sidebar-end) {
-      @include ltr-rtl("left", 0);
+      left: 0;
       ~ * {
         --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line
       }
 
       &:not(.show) {
-        @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
+        margin-left: calc(-1 * var(--#{$prefix}sidebar-width)); // stylelint-disable-line function-disallowed-list
       }
     }
     &.sidebar-end {
-      @include ltr-rtl("right", 0);
+      right: 0;
       ~ * {
         --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line
       }
 
       &:not(.show) {
-        @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
+        margin-right: calc(-1 * var(--#{$prefix}sidebar-width)); // stylelint-disable-line function-disallowed-list
       }
     }
   }
@@ -208,7 +209,7 @@
 .sidebar-close {
   position: absolute;
   top: 0;
-  @include ltr-rtl("right", 0);
+  right: 0;
   width: var(--#{$prefix}sidebar-width);
   height: var(--#{$prefix}sidebar-header-height);
   color: var(--#{$prefix}sidebar-color);
@@ -227,8 +228,6 @@
 .sidebar-brand {
   display: flex;
   flex: 0 0 var(--#{$prefix}sidebar-brand-height);
-  align-items: center;
-  justify-content: center;
   color: var(--#{$prefix}sidebar-brand-color);
   background: var(--#{$prefix}sidebar-brand-bg);
 
@@ -282,9 +281,10 @@
     background-position: center;
     background-size: calc(var(--#{$prefix}sidebar-toggler-indicator-height) * .25); // stylelint-disable-line function-disallowed-list
     @include transition($sidebar-toggler-transition);
-    @include rtl() {
-      transform: rotate(-180deg);
-    }
+
+    /* rtl:raw:
+    transform: rotate(-180deg);
+    */
   }
 
   &:focus {
@@ -301,7 +301,7 @@
   .sidebar-end & {
     justify-content: flex-start;
     &::before {
-      transform: rotate(-180deg);
+      transform: rotate(-180deg) #{"/* rtl:rotate(0deg) */"};
     }
   }
 }

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

@@ -0,0 +1,69 @@
+// 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

@@ -0,0 +1,393 @@
+$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

@@ -0,0 +1,75 @@
+@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;
+          }
+        }
+      }
+
+    }
+  }
+}