@coreui/coreui 5.1.2 → 5.3.0

package/scss/mixins/_buttons.scss

@@ -1,90 +1,94 @@
+@use "sass:color";
+@use "../functions/color" as *;
+@use "../functions/color-contrast" as *;
+@use "../functions/to-rgb" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
 // Button variants
 //
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
 // scss-docs-start btn-variant-mixin
-@mixin button-variant($variant) {
-  $background: map-get($variant, "bg");
-  $border-color: map-get($variant, "border-color");
-  $color: map-get($variant, "color");
-  $hover-background: map-get($variant, "hover-bg");
-  $hover-border-color: map-get($variant, "hover-border-color");
-  $hover-color: map-get($variant, "hover-color");
-  $active-background: map-get($variant, "active-bg");
-  $active-border-color: map-get($variant, "active-border-color");
-  $active-color: map-get($variant, "active-color");
-  $disabled-background: map-get($variant, "disabled-bg");
-  $disabled-border-color: map-get($variant, "disabled-border-color");
-  $disabled-color: map-get($variant, "disabled-color");
-  $shadow: map-get($variant, "shadow");
-
+@mixin button-variant(
+  $background,
+  $border,
+  $color: color-contrast($background),
+  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+  $hover-color: color-contrast($hover-background),
+  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  $active-color: color-contrast($active-background),
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: color-contrast($disabled-background)
+) {
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-bg: #{$background};
-  --#{$prefix}btn-border-color: #{$border-color};
+  --#{$prefix}btn-border-color: #{$border};
   --#{$prefix}btn-hover-color: #{$hover-color};
   --#{$prefix}btn-hover-bg: #{$hover-background};
-  --#{$prefix}btn-hover-border-color: #{$hover-border-color};
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border-color, 15%))};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-active-border-color: #{$active-border};
   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
   --#{$prefix}btn-disabled-color: #{$disabled-color};
   --#{$prefix}btn-disabled-bg: #{$disabled-background};
-  --#{$prefix}btn-disabled-border-color: #{$disabled-border-color};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
 }
 // scss-docs-end btn-variant-mixin
 
 // scss-docs-start btn-outline-variant-mixin
-@mixin button-outline-variant($variant) {
-  $color: map-get($variant, "color");
-  $hover-background: map-get($variant, "hover-bg");
-  $hover-border-color: map-get($variant, "hover-border-color");
-  $hover-color: map-get($variant, "hover-color");
-  $active-background: map-get($variant, "active-bg");
-  $active-border-color: map-get($variant, "active-border-color");
-  $active-color: map-get($variant, "active-color");
-  $disabled-color: map-get($variant, "disabled-color");
-  $shadow: map-get($variant, "shadow");
-
+@mixin button-outline-variant(
+  $color,
+  $color-hover: color-contrast($color),
+  $active-background: $color,
+  $active-border: $color,
+  $active-color: color-contrast($active-background)
+) {
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-border-color: #{$color};
-  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-color: #{$color-hover};
   --#{$prefix}btn-hover-bg: #{$active-background};
-  --#{$prefix}btn-hover-border-color: #{$active-border-color};
+  --#{$prefix}btn-hover-border-color: #{$active-border};
   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-active-border-color: #{$active-border};
   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
   --#{$prefix}btn-disabled-color: #{$color};
   --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-border-color: #{$color};
   --#{$prefix}gradient: none;
 }
 // scss-docs-end btn-outline-variant-mixin
 
 // scss-docs-start btn-ghost-variant-mixin
-@mixin button-ghost-variant($variant) {
-  $color: map-get($variant, "color");
-  $hover-background: map-get($variant, "hover-bg");
-  $hover-border-color: map-get($variant, "hover-border-color");
-  $hover-color: map-get($variant, "hover-color");
-  $active-background: map-get($variant, "active-bg");
-  $active-border-color: map-get($variant, "active-border-color");
-  $active-color: map-get($variant, "active-color");
-  $disabled-color: map-get($variant, "disabled-color");
-  $shadow: map-get($variant, "shadow");
-
+@mixin button-ghost-variant(
+  $color,
+  $color-hover: color-contrast($color),
+  $hover-background: $color,
+  $hover-border: $color,
+  $hover-color: color-contrast($color),
+  $active-background: $color,
+  $active-border: $color,
+  $active-color: color-contrast($color)
+) {
   --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-border-color: transparent;
   --#{$prefix}btn-hover-bg: #{$hover-background};
-  --#{$prefix}btn-hover-border-color: #{$hover-border-color};
-  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-hover-color: #{$color-hover};
   --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-active-border-color: #{$active-border};
   --#{$prefix}btn-active-color: #{$active-color};
-  --#{$prefix}btn-disabled-color: #{$disabled-color};
-  --#{$prefix}btn-shadow: #{$shadow};
+  --#{$prefix}btn-disabled-color: #{$color};
+  --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-border-color: transparent;
 }
 // scss-docs-end btn-ghost-variant-mixin
 

package/scss/mixins/_caret.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 // scss-docs-start caret-mixins
 @mixin caret-down($width: $caret-width) {
   border-top: $width solid;
@@ -35,7 +37,7 @@
   @if $enable-caret {
     &::after {
       display: inline-block;
-      @include ltr-rtl("margin-left", $spacing);
+      margin-inline-start: $spacing;
       vertical-align: $vertical-align;
       content: "";
       @if $direction == down {
@@ -54,7 +56,7 @@
 
       &::before {
         display: inline-block;
-        @include ltr-rtl("margin-right", $spacing);
+        margin-inline-end: $spacing;
         vertical-align: $vertical-align;
         content: "";
         @include caret-start($width);
@@ -62,7 +64,7 @@
     }
 
     &:empty::after {
-      @include ltr-rtl("margin-left", 0);
+      margin-inline-start: 0;
     }
   }
 }

package/scss/mixins/_color-mode.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 // scss-docs-start color-mode-mixin
 @mixin color-mode($mode: light, $root: false) {
   @if $color-mode-type == "media-query" {
@@ -13,7 +15,7 @@
       }
     }
   } @else {
-    [data-coreui-theme="#{$mode}"] {
+    [data#{$data-infix}theme="#{$mode}"] {
       @content;
     }
   }

package/scss/mixins/_container.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 // Container mixins
 
 @mixin make-container($gutter: $container-padding-x) {

package/scss/mixins/_deprecate.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 // Deprecate mixin
 //
 // This mixin can be used to deprecate mixins or functions.

package/scss/mixins/_forms.scss

@@ -1,3 +1,10 @@
+@use "../functions/escape-svg" as *;
+@use "../functions/math" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
 // This mixin uses an `if()` technique to be compatible with Dart Sass
 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
 
@@ -19,7 +26,7 @@
   $state,
   $color,
   $icon,
-  $tooltip-color: color-contrast($color),
+  $tooltip-color: color-contrast($color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
   $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
   $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
   $border-color: $color
@@ -60,7 +67,7 @@
       border-color: $border-color;
 
       @if $enable-validation-icons {
-        @include ltr-rtl("padding-right", $input-height-inner);
+        padding-inline-end: $input-height-inner;
         background-image: escape-svg($icon);
         background-repeat: no-repeat;
         @include ltr-rtl-value-only("background-position", right $input-height-inner-quarter center, left $input-height-inner-quarter center);
@@ -83,7 +90,7 @@
   textarea.form-control {
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
-        @include ltr-rtl("padding-right", $input-height-inner);
+        padding-inline-end: $input-height-inner;
         @include ltr-rtl-value-only("background-position", top $input-height-inner-quarter right $input-height-inner-quarter, top $input-height-inner-quarter left $input-height-inner-quarter);
       }
     }
@@ -97,7 +104,7 @@
         &:not([multiple]):not([size]),
         &:not([multiple])[size="1"] {
           --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
-          @include ltr-rtl("padding-right", $form-select-feedback-icon-padding-end);
+          padding-inline-end: $form-select-feedback-icon-padding-end;
           @include ltr-rtl-value-only("background-position", #{$form-select-bg-position, $form-select-feedback-icon-position});
           background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
@@ -142,7 +149,7 @@
   }
   .form-check-inline .form-check-input {
     ~ .#{$state}-feedback {
-      @include ltr-rtl("margin-left", .5em);
+      margin-inline-start: .5em;
     }
   }
 

package/scss/mixins/_gradients.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 // Gradients
 
 // scss-docs-start gradient-bg-mixin

package/scss/mixins/_grid.scss

@@ -1,3 +1,11 @@
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "breakpoints" as *;
+@use "../functions/math" as *;
+@use "../maps" as *;
+@use "../variables" as *;
+
 // Grid system
 //
 // Generate semantic grid columns with these mixins.
@@ -13,9 +21,9 @@
   margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
 }
 
-@mixin make-col-ready() {
+@mixin make-col-ready($include-column-box-sizing: false) {
   // Add box sizing if only the grid is loaded
-  box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
+  box-sizing: if(meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we set the width
   // later on to override this initial width.
@@ -30,7 +38,7 @@
 @mixin make-col($size: false, $columns: $grid-columns) {
   @if $size {
     flex: 0 0 auto;
-    width: percentage(divide($size, $columns));
+    width: math.percentage(divide($size, $columns));
 
   } @else {
     flex: 1 1 0;
@@ -45,7 +53,7 @@
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: divide($size, $columns);
-  @include ltr-rtl("margin-left", if($num == 0, 0, percentage($num)));
+  margin-inline-start: if($num == 0, 0, math.percentage($num));
 }
 
 // Row columns
@@ -56,7 +64,7 @@
 @mixin row-cols($count) {
   > * {
     flex: 0 0 auto;
-    width: percentage(divide(1, $count));
+    width: math.percentage(divide(1, $count));
   }
 }
 
@@ -66,13 +74,13 @@
 // any value of `$grid-columns`.
 
 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .col#{$infix} {
-        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+        flex: 1 0 0;
       }
 
       .row-cols#{$infix}-auto > * {
@@ -127,7 +135,7 @@
 }
 
 @mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
@@ -149,3 +157,64 @@
     }
   }
 }
+
+@mixin make-c-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include container-breakpoint-up($breakpoint, $breakpoints) {
+      // Provide basic `.cq-col-{bp}` classes for equal-width flexbox columns
+      .cq-col#{$infix} {
+        flex: 1 0 0;
+      }
+
+      .cq-row-cols#{$infix}-auto > * {
+        @include make-col-auto();
+      }
+
+      @if $grid-row-columns > 0 {
+        @for $i from 1 through $grid-row-columns {
+          .cq-row-cols#{$infix}-#{$i} {
+            @include row-cols($i);
+          }
+        }
+      }
+
+      .cq-col#{$infix}-auto {
+        @include make-col-auto();
+      }
+
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .cq-col#{$infix}-#{$i} {
+            @include make-col($i, $columns);
+          }
+        }
+
+        // `$columns - 1` because offsetting by the width of an entire row isn't possible
+        @for $i from 0 through ($columns - 1) {
+          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+            .cq-offset#{$infix}-#{$i} {
+              @include make-col-offset($i, $columns);
+            }
+          }
+        }
+      }
+
+      // Gutters
+      //
+      // Make use of `.cq-g-*`, `.cq-gx-*` or `.cq-gy-*` utilities to change spacing between the columns.
+      @each $key, $value in $gutters {
+        .cq-g#{$infix}-#{$key},
+        .cq-gx#{$infix}-#{$key} {
+          --#{$prefix}gutter-x: #{$value};
+        }
+
+        .cq-g#{$infix}-#{$key},
+        .cq-gy#{$infix}-#{$key} {
+          --#{$prefix}gutter-y: #{$value};
+        }
+      }
+    }
+  }
+}

package/scss/mixins/_list-group.scss

@@ -1,12 +1,15 @@
+@use "sass:map";
+@use "../mixins/deprecate" as *;
+
 @include deprecate("`list-group-item-variant()`", "v4.3.0", "v6.0.0");
 
 // List Groups
 
 // scss-docs-start list-group-mixin
 @mixin list-group-item-variant($state, $variant) {
-  $background: map-get($variant, "bg");
-  $background-hover: map-get($variant, "bg-hover");
-  $color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), $alert-color-scale, $state);
+  $background: map.get($variant, "bg");
+  $background-hover: map.get($variant, "bg-hover");
+  $color: contrast-ratio-correction(map.get($variant, "color"), map.get($variant, "bg"), $alert-color-scale, $state);
 
   --#{$prefix}list-group-color: #{$color};
   --#{$prefix}list-group-bg: #{$background};

package/scss/mixins/_lists.scss

@@ -2,6 +2,6 @@
 
 // Unstyled keeps list items block level, just removes default browser padding and list-style
 @mixin list-unstyled {
-  @include ltr-rtl("padding-left", 0);
+  padding-inline-start: 0;
   list-style: none;
 }

package/scss/mixins/_ltr-rtl.scss

@@ -1,3 +1,10 @@
+@use "sass:string";
+@use "../functions/str-replace" as *;
+@use "../variables" as *;
+
+// Applies styles only when LTR is enabled and the HTML does NOT have the "rtl"
+// attribute (i.e., left-to-right contexts).
+
 @mixin ltr {
   @if $enable-ltr {
     html:not([dir="rtl"]) & {
@@ -6,6 +13,9 @@
   }
 }
 
+// Applies styles only when RTL is enabled and the element is within an RTL
+// context (i.e., the element is a descendant of an element with dir="rtl").
+
 @mixin rtl {
   @if $enable-rtl {
     *[dir="rtl"] & {
@@ -14,74 +24,95 @@
   }
 }
 
+// This function takes an element (or string) and returns its "mirrored" version.
+// For example, it will replace "left" with "right" and vice versa.
+
 @function reflect($element) {
   $string: #{$element};
-  @if str-index($string, "left") {
+  @if string.index($string, "left") {
     @return str-replace($string, "left", "right");
   }
-  @if str-index($string, "right") {
+  @if string.index($string, "right") {
     @return str-replace($string, "right", "left");
   }
 
-  @return unquote($string);
+  @return string.unquote($string);
 }
 
-@mixin ltr-rtl($property, $value, $property-rtl: null, $value-rtl: null, $important: null) {
+// Generates CSS for a given property with different values for LTR and RTL
+// contexts. Allows an optional custom property name and value for RTL.
+//
+// @param {String} $property - The CSS property for LTR context (e.g., margin-left).
+// @param {String} $value - The value for the property in LTR context.
+// @param {String} $property-rtl - Optional custom property name for RTL context.
+// @param {String} $value-rtl - Optional custom value for RTL context.
+// @param {Boolean} $important - Optional "!important" flag.
+
+@mixin ltr-rtl($property, $value, $property-rtl: null, $value-rtl: null, $important: false) {
   $property-reflected: reflect($property);
   $value-reflected: reflect($value);
 
   @if $enable-ltr and $enable-rtl {
     @include ltr() {
-      #{$property}: $value $important;
+      #{$property}: $value if($important, !important, null);
     }
     @include rtl() {
       @if $value-rtl {
-        #{$property-reflected}: $value-rtl $important;
+        #{$property-reflected}: $value-rtl if($important, !important, null);
       }
       @else {
-        #{$property-reflected}: $value-reflected $important;
+        #{$property-reflected}: $value-reflected if($important, !important, null);
       }
     }
   }
   @else {
     @if $enable-rtl {
       @if $value-rtl {
-        #{$property-reflected}: $value-rtl $important;
+        #{$property-reflected}: $value-rtl if($important, !important, null);
       }
       @else {
-        #{$property-reflected}: $value-reflected $important;
+        #{$property-reflected}: $value-reflected if($important, !important, null);
       }
     }
     @else {
-      #{$property}: $value $important;
+      #{$property}: $value if($important, !important, null);
     }
   }
 }
 
-@mixin ltr-rtl-value-only($property, $value, $value-rtl: null, $important: null) {
+// Similar to ltr-rtl but assumes the property name is the same for both
+// contexts. It only mirrors the value for RTL if a custom RTL value is not
+// provided.
+//
+// @param {String} $property - The CSS property to apply.
+// @param {String} $value - The value for the property in LTR context.
+// @param {String} $value-rtl - Optional custom value for RTL context.
+// @param {Boolean} $important - Optional "!important" flag.
+
+@mixin ltr-rtl-value-only($property, $value, $value-rtl: null, $important: false) {
   $value-reflected: reflect($value);
 
   @if $enable-ltr and $enable-rtl {
     @include ltr() {
-      #{$property}: $value $important;
+      #{$property}: $value if($important, !important, null);
     }
     @include rtl() {
       @if $value-rtl {
-        #{$property}: $value-rtl $important;
+        #{$property}: $value-rtl if($important, !important, null);
       } @else {
-        #{$property}: $value-reflected $important;
+        #{$property}: $value-reflected if($important, !important, null);
       }
     }
   }
   @else {
     @if $enable-rtl {
       @if $value-rtl {
-        #{$property}: $value-rtl $important;
+        #{$property}: $value-rtl if($important, !important, null);
       } @else {
-        #{$property}: $value-reflected $important;
+        #{$property}: $value-reflected if($important, !important, null);
       }
     } @else {
-      #{$property}: $value $important;
+      #{$property}: $value if($important, !important, null);
     }
   }
 }

package/scss/mixins/_pagination.scss

@@ -1,3 +1,6 @@
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
 // Pagination
 
 // scss-docs-start pagination-mixin

package/scss/mixins/_reset-text.scss

@@ -1,10 +1,11 @@
+@use "../variables" as *;
+
 @mixin reset-text {
   font-family: $font-family-base;
   // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
   font-style: normal;
   font-weight: $font-weight-normal;
   line-height: $line-height-base;
-  @include ltr-rtl("text-align", left); // Fallback for where `start` is not supported
   text-align: start;
   text-decoration: none;
   text-shadow: none;

package/scss/mixins/_table-variants.scss

@@ -1,11 +1,17 @@
+@use "sass:color";
+@use "sass:math";
+@use "../functions/color-contrast" as *;
+@use "../functions/contrast-ratio" as *;
+@use "../variables" as *;
+
 // scss-docs-start table-variant
 @mixin table-variant($state, $background) {
   .table-#{$state} {
     $color: color-contrast(opaque($body-bg, $background));
-    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
-    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
-    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
-    $table-border-color: mix($color, $background, percentage($table-border-factor));
+    $hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
+    $striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
+    $active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
+    $table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
 
     --#{$prefix}table-color: #{$color};
     --#{$prefix}table-bg: #{$background};

package/scss/mixins/_transition.scss

@@ -1,10 +1,13 @@
 // stylelint-disable property-disallowed-list
+@use "sass:list";
+@use "../variables" as *;
+
 @mixin transition($transition...) {
-  @if length($transition) == 0 {
+  @if list.length($transition) == 0 {
     $transition: $transition-base;
   }
 
-  @if length($transition) > 1 {
+  @if list.length($transition) > 1 {
     @each $value in $transition {
       @if $value == null or $value == none {
         @warn "The keyword 'none' or 'null' must be used as a single argument.";
@@ -13,11 +16,11 @@
   }
 
   @if $enable-transitions {
-    @if nth($transition, 1) != null {
+    @if list.nth($transition, 1) != null {
       transition: $transition;
     }
 
-    @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
+    @if $enable-reduced-motion and list.nth($transition, 1) != null and list.nth($transition, 1) != none {
       @media (prefers-reduced-motion: reduce) {
         transition: none;
       }

package/scss/mixins/_utilities.import.scss

@@ -0,0 +1 @@
+@forward "utilities";