@coreui/coreui 5.2.0 → 5.3.0

package/scss/mixins/_utilities.scss

@@ -1,37 +1,50 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "ltr-rtl" as *;
+
+// Generate selectors for theme variants
+@function theme-prefix($theme, $selector) {
+  @return #{"[data" + $data-infix + "theme="$theme + "] ." + $theme + "\\:" + $selector + ", [data" + $data-infix + "theme="$theme + "] ." + $theme + "\\:" + $selector + ":not([class*='#{$theme}:'])"};
+}
+
 // Utility generator
 // Used to generate utilities & print utilities
 @mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
-  $values: map-get($utility, values);
+  $values: map.get($utility, values);
 
   // If the values are a list or string, convert it into a map
-  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
-    $values: zip($values, $values);
+  @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
+    $values: list.zip($values, $values);
   }
 
   @each $key, $value in $values {
-    $properties: map-get($utility, property);
+    $properties: map.get($utility, property);
 
     // Multiple properties are possible, for example with vertical or horizontal margins or paddings
-    @if type-of($properties) == "string" {
-      $properties: append((), $properties);
+    @if meta.type-of($properties) == "string" {
+      $properties: list.append((), $properties);
     }
 
     // Use custom class if present
-    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+    $property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
     $property-class: if($property-class == null, "", $property-class);
 
     // Use custom CSS variable name if present, otherwise default to `class`
-    $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
+    $css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
 
     // State params to generate pseudo-classes
-    $state: if(map-has-key($utility, state), map-get($utility, state), ());
+    $state: if(map.has-key($utility, state), map.get($utility, state), ());
 
-    $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
+    $infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
 
     // Don't prefix if value key is null (e.g. with shadow class)
     $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
-    @if map-get($utility, rfs) {
+    @if map.get($utility, rfs) {
       // Inside the media query
       @if $is-rfs-media-query {
         $val: rfs-value($value);
@@ -44,10 +57,10 @@
       }
     }
 
-    $is-css-var: map-get($utility, css-var);
-    $is-dark-mode: map-get($utility, dark-mode);
-    $is-local-vars: map-get($utility, local-vars);
-    $is-rtl: map-get($utility, rtl);
+    $is-css-var: map.get($utility, css-var);
+    $is-dark-mode: map.get($utility, dark-mode);
+    $is-local-vars: map.get($utility, local-vars);
+    $is-rtl: map.get($utility, rtl);
 
     @if $value != null {
       @if $is-rtl == false {
@@ -93,8 +106,8 @@
                 }
               }
               @if $is-rtl == true {
-                @if (type-of($value) == "map") {
-                  @include ltr-rtl($property, map-get($value, "ltr"), null, map-get($value, "rtl"), if($enable-important-utilities, !important, null));
+                @if (meta.type-of($value) == "map") {
+                  @include ltr-rtl($property, map.get($value, "ltr"), null, map.get($value, "rtl"), if($enable-important-utilities, !important, null));
                 } @else {
                   @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
                 }

package/scss/sidebar/_sidebar-narrow.scss

@@ -1,3 +1,8 @@
+@use "../mixins/breakpoints" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../variables" as *;
+@use "sidebar" as *;
+
 .sidebar-narrow {
   // scss-docs-start sidebar-narrow-css-vars
   --#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};

package/scss/sidebar/_sidebar-nav.scss

@@ -1,4 +1,8 @@
 // Sidebar navigation
+@use "../functions/escape-svg" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/transition" as *;
+@use "../variables" as *;
 
 .sidebar-nav {
   // scss-docs-start sidebar-nav-css-vars
@@ -175,7 +179,7 @@
     align-items: center;
     justify-content: center;
     height: var(--#{$prefix}sidebar-nav-link-icon-height);
-    @include ltr-rtl("margin-right", var(--#{$prefix}sidebar-nav-link-icon-margin));
+    margin-inline-end: var(--#{$prefix}sidebar-nav-link-icon-margin);
     font-size: var(--#{$prefix}sidebar-nav-link-icon-font-size);
     color: var(--#{$prefix}sidebar-nav-link-icon-color);
     text-align: center;
@@ -238,7 +242,7 @@
       display: block;
       flex: 0 12px;
       height: 12px;
-      @include ltr-rtl("margin-left", auto);
+      margin-inline-start: auto;
       content: "";
       background-color: var(--#{$prefix}sidebar-nav-group-indicator-color);
       mask-image: var(--#{$prefix}sidebar-nav-group-indicator-icon);
@@ -251,11 +255,11 @@
     list-style: none;
 
     .nav-link {
-      @include ltr-rtl("padding-left", calc(var(--#{$prefix}sidebar-nav-link-padding-x) + var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)));
+      padding-inline-start: calc(var(--#{$prefix}sidebar-nav-link-padding-x) + var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)); // stylelint-disable-line function-disallowed-list
     }
 
     .nav-icon {
-      @include ltr-rtl("margin-left", calc((var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)) * -1));
+      margin-inline-start: calc((var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)) * -1); // stylelint-disable-line function-disallowed-list
     }
   }
 

package/scss/sidebar/_sidebar.scss

@@ -1,4 +1,13 @@
 // stylelint-disable function-disallowed-list
+@use "../functions/escape-svg" as *;
+@use "../mixins/backdrop" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/breakpoints" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../mixins/transition" as *;
+@use "../variables" as *;
+@use "../variables-dark" as *;
+
 .sidebar {
   // scss-docs-start sidebar-css-vars
   --#{$prefix}sidebar-zindex: #{$zindex-sidebar};
@@ -24,12 +33,12 @@
   @include transition($sidebar-transition);
 
   &:not(.sidebar-end){
-    @include ltr-rtl("margin-left", 0);
+    margin-inline-start: 0;
   }
 
   &.sidebar-end {
     order: 99;
-    @include ltr-rtl("margin-right", 0);
+    margin-inline-end: 0;
   }
 
   @include media-breakpoint-up($mobile-breakpoint) {
@@ -44,10 +53,10 @@
 
     &.hide {
       &:not(.sidebar-end) {
-        @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
+        margin-inline-start: calc(-1 * var(--#{$prefix}sidebar-width));
       }
       &.sidebar-end {
-        @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
+        margin-inline-end: calc(-1 * var(--#{$prefix}sidebar-width));
 
       }
     }
@@ -63,18 +72,18 @@
     z-index: var(--#{$prefix}sidebar-zindex);
 
     &:not(.sidebar-end) {
-      @include ltr-rtl("left", 0);
+      inset-inline-start: 0;
 
       &:not(.show) {
-        @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
+        margin-inline-start: calc(-1 * var(--#{$prefix}sidebar-width));
       }
     }
 
     &.sidebar-end {
-      @include ltr-rtl("right", 0);
+      inset-inline-end: 0;
 
       &:not(.show) {
-        @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
+        margin-inline-end: calc(-1 * var(--#{$prefix}sidebar-width));
       }
     }
   }
@@ -87,11 +96,11 @@
   z-index: var(--#{$prefix}sidebar-zindex);
 
   &:not(.sidebar-end) {
-    @include ltr-rtl("left", 0);
+    inset-inline-start: 0;
   }
 
   &.sidebar-end {
-    @include ltr-rtl("right", 0);
+    inset-inline-end: 0;
   }
 }
 
@@ -103,22 +112,22 @@
   @extend .sidebar-fixed;
 
   &:not(.sidebar-end){
-    @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
+    margin-inline-start: calc(-1 * var(--#{$prefix}sidebar-width));
   }
 
   &.sidebar-end {
-    @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
+    margin-inline-end: calc(-1 * var(--#{$prefix}sidebar-width));
   }
 
   &.show {
     box-shadow: var(--#{$prefix}sidebar-overlaid-box-shadow);
 
     &:not(.sidebar-end) {
-      @include ltr-rtl("margin-left", 0);
+      margin-inline-start: 0;
     }
 
     &.sidebar-end {
-      @include ltr-rtl("margin-right", 0);
+      margin-inline-end: 0;
     }
   }
 }
@@ -157,8 +166,8 @@
 
   .btn-close {
     padding: calc(var(--#{$prefix}sidebar-padding-y) * .5) calc(var(--#{$prefix}sidebar-padding-x) * .5);
+    margin-inline-end: calc(-.5 * var(--#{$prefix}sidebar-padding-x));
     margin-top: calc(-.5 * var(--#{$prefix}sidebar-padding-y));
-    @include ltr-rtl("margin-right", calc(-.5 * var(--#{$prefix}sidebar-padding-x)));
     margin-bottom: calc(-.5 * var(--#{$prefix}sidebar-padding-y));
   }
 }

package/scss/themes/bootstrap/bootstrap.rtl.scss

@@ -1,22 +1,4 @@
-$enable-ltr: false !default;
-$enable-rtl: true !default;
-
-@import "mixins/banner";
-@include bsBanner("");
-
-@import "../../../node_modules/bootstrap/scss/bootstrap";
-@import "../../variables";
-
-/* rtl:begin:ignore */
-@import "../../mixins/avatar";
-@import "../../mixins/icon";
-@import "../../mixins/ltr-rtl";
-
-@import "../../avatar";
-@import "../../callout";
-@import "../../footer";
-@import "../../header";
-@import "../../icon";
-@import "../../sidebar";
-
-/* rtl:end:ignore */
+@use "bootstrap" with (
+  $enable-ltr: false,
+  $enable-rtl: true
+);

package/scss/themes/bootstrap/bootstrap.scss

@@ -1,19 +1,125 @@
-@import "mixins/banner";
-@include bsBanner("");
+@use "sass:color";
+@use "../../banner" with (
+  $file: "Bootstrap Theme"
+);
+@use "../../functions/color" as *;
 
-@import "../../../node_modules/bootstrap/scss/bootstrap";
-@import "../../variables";
+// scss-docs-start gray-color-variables
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+// scss-docs-end gray-color-variables
 
-/* rtl:begin:ignore */
-@import "../../mixins/avatar";
-@import "../../mixins/icon";
-@import "../../mixins/ltr-rtl";
+// scss-docs-start color-variables
+$blue:    #0d6efd !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #d63384 !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #198754 !default;
+$teal:    #20c997 !default;
+$cyan:    #0dcaf0 !default;
+// scss-docs-end color-variables
 
-@import "../../avatar";
-@import "../../callout";
-@import "../../footer";
-@import "../../header";
-@import "../../icon";
-@import "../../sidebar";
+// scss-docs-start theme-color-variables
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-900 !default;
+// scss-docs-end theme-color-variables
 
-/* rtl:end:ignore */
+// scss-docs-start theme-text-dark-variables
+$primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
+$secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
+$success-text-emphasis-dark:        tint-color($success, 40%) !default;
+$info-text-emphasis-dark:           tint-color($info, 40%) !default;
+$warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+$primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark:            shade-color($success, 80%) !default;
+$info-bg-subtle-dark:               shade-color($info, 80%) !default;
+$warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+$primary-border-subtle-dark:        shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
+$success-border-subtle-dark:        shade-color($success, 40%) !default;
+$info-border-subtle-dark:           shade-color($info, 40%) !default;
+$warning-border-subtle-dark:        shade-color($warning, 40%) !default;
+$danger-border-subtle-dark:         shade-color($danger, 40%) !default;
+// scss-docs-end theme-border-subtle-dark-variables
+
+@forward "../../coreui" with (
+  $prefix:                        bs- !default,
+  $data-infix:                    -bs- !default,
+  $white:                         $white !default,
+  $gray-100:                      $gray-100 !default,
+  $gray-200:                      $gray-200 !default,
+  $gray-300:                      $gray-300 !default,
+  $gray-400:                      $gray-400 !default,
+  $gray-500:                      $gray-500 !default,
+  $gray-600:                      $gray-600 !default,
+  $gray-700:                      $gray-700 !default,
+  $gray-800:                      $gray-800 !default,
+  $gray-900:                      $gray-900 !default,
+  $black:                         $black !default,
+  $primary:                       $primary !default,
+  $secondary:                     $secondary !default,
+  $success:                       $success !default,
+  $info:                          $info !default,
+  $warning:                       $warning !default,
+  $danger:                        $danger !default,
+  $light:                         $light !default,
+  $dark:                          $dark !default,
+  $body-color:                    $gray-900 !default,
+  $body-secondary-color:          rgba($gray-900, .75) !default,
+  $body-tertiary-bg:              rgba($gray-900, .75) !default,
+  $component-active-color:        $white !default,
+  $component-active-bg:           $primary !default,
+  $body-color-dark:               $gray-300 !default,
+  $body-bg-dark:                  $gray-900 !default,
+  $body-secondary-color-dark:     rgba($gray-300, .75) !default,
+  $body-secondary-bg-dark:        $gray-800 !default,
+  $body-tertiary-color-dark:      rgba($gray-300, .5) !default,
+  $body-tertiary-bg-dark:         color.mix($gray-800, $gray-900, 50%) !default,
+  $primary-text-emphasis-dark:    $primary-text-emphasis-dark !default,
+  $secondary-text-emphasis-dark:  $secondary-text-emphasis-dark !default,
+  $success-text-emphasis-dark:    $success-text-emphasis-dark !default,
+  $info-text-emphasis-dark:       $info-text-emphasis-dark !default,
+  $warning-text-emphasis-dark:    $warning-text-emphasis-dark !default,
+  $danger-text-emphasis-dark:     $danger-text-emphasis-dark !default,
+  $primary-bg-subtle-dark:        $primary-bg-subtle-dark !default,
+  $secondary-bg-subtle-dark:      $secondary-bg-subtle-dark !default,
+  $success-bg-subtle-dark:        $success-bg-subtle-dark !default,
+  $info-bg-subtle-dark:           $info-bg-subtle-dark !default,
+  $warning-bg-subtle-dark:        $warning-bg-subtle-dark !default,
+  $danger-bg-subtle-dark:         $danger-bg-subtle-dark !default,
+  $primary-border-subtle-dark:    $primary-border-subtle-dark !default,
+  $secondary-border-subtle-dark:  $secondary-border-subtle-dark !default,
+  $success-border-subtle-dark:    $success-border-subtle-dark !default,
+  $info-border-subtle-dark:       $info-border-subtle-dark !default,
+  $warning-border-subtle-dark:    $warning-border-subtle-dark !default,
+  $danger-border-subtle-dark:     $danger-border-subtle-dark !default,
+  $theme-colors-dark:             () !default,
+  $grays-dark:                    () !default,
+);

package/scss/utilities/_api.import.scss

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

package/scss/utilities/_api.scss

@@ -1,5 +1,13 @@
+@use "sass:map";
+@use "sass:meta";
+@use "../utilities" as *;
+@use "../mixins/breakpoints" as *;
+@use "../mixins/utilities" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
 // Loop over each breakpoint
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
 
   // Generate media query if needed
   @include media-breakpoint-up($breakpoint) {
@@ -9,7 +17,7 @@
     @each $key, $utility in $utilities {
       // The utility can be disabled with `false`, thus check if the utility is a map first
       // Only proceed if responsive media queries are enabled or if it's the base media query
-      @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
+      @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
         @include generate-utility($utility, $infix);
       }
     }
@@ -18,15 +26,15 @@
 
 // RFS rescaling
 @media (min-width: $rfs-mq-value) {
-  @each $breakpoint in map-keys($grid-breakpoints) {
+  @each $breakpoint in map.keys($grid-breakpoints) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+    @if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
       // Loop over each utility property
       @each $key, $utility in $utilities {
         // The utility can be disabled with `false`, thus check if the utility is a map first
         // Only proceed if responsive media queries are enabled or if it's the base media query
-        @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
+        @if meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
           @include generate-utility($utility, $infix, true);
         }
       }
@@ -40,7 +48,7 @@
   @each $key, $utility in $utilities {
     // The utility can be disabled with `false`, thus check if the utility is a map first
     // Then check if the utility needs print styles
-    @if type-of($utility) == "map" and map-get($utility, print) == true {
+    @if meta.type-of($utility) == "map" and map.get($utility, print) == true {
       @include generate-utility($utility, "-print");
     }
   }

package/scss/vendor/_rfs.scss

@@ -1,4 +1,10 @@
 // stylelint-disable scss/dimension-no-non-numeric-values
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
+@use "../variables" as *;
 
 // SCSS RFS mixin
 //
@@ -30,7 +36,7 @@ $rfs-two-dimensional: false !default;
 // Factor of decrease
 $rfs-factor: 10 !default;
 
-@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
+@if meta.type-of($rfs-factor) != number or $rfs-factor <= 1 {
   @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
 }
 
@@ -47,12 +53,12 @@ $rfs-rem-value: 16 !default;
 $rfs-safari-iframe-resize-bug-fix: false !default;
 
 // Disable RFS by setting $enable-rfs to false
-$enable-rfs: true !default;
+$enable-rfs: $enable-rfs !default;
 
 // Cache $rfs-base-value unit
-$rfs-base-value-unit: unit($rfs-base-value);
+$rfs-base-value-unit: math.unit($rfs-base-value);
 
-@function divide($dividend, $divisor, $precision: 10) {
+@function rfs-divide($dividend, $divisor, $precision: 10) {
   $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
   $dividend: abs($dividend);
   $divisor: abs($divisor);
@@ -80,41 +86,41 @@ $rfs-base-value-unit: unit($rfs-base-value);
     }
   }
   $result: $result * $factor * $sign;
-  $dividend-unit: unit($dividend);
-  $divisor-unit: unit($divisor);
+  $dividend-unit: math.unit($dividend);
+  $divisor-unit: math.unit($divisor);
   $unit-map: (
     "px": 1px,
     "rem": 1rem,
     "em": 1em,
     "%": 1%
   );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
-    $result: $result * map-get($unit-map, $dividend-unit);
+  @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
+    $result: $result * map.get($unit-map, $dividend-unit);
   }
   @return $result;
 }
 
 // Remove px-unit from $rfs-base-value for calculations
 @if $rfs-base-value-unit == px {
-  $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
+  $rfs-base-value: rfs-divide($rfs-base-value, $rfs-base-value * 0 + 1);
 }
 @else if $rfs-base-value-unit == rem {
-  $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
+  $rfs-base-value: rfs-divide($rfs-base-value, rfs-divide($rfs-base-value * 0 + 1, $rfs-rem-value));
 }
 
 // Cache $rfs-breakpoint unit to prevent multiple calls
-$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
+$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
 
 // Remove unit from $rfs-breakpoint for calculations
 @if $rfs-breakpoint-unit-cache == px {
-  $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
+  $rfs-breakpoint: rfs-divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
 }
 @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
-  $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
+  $rfs-breakpoint: rfs-divide($rfs-breakpoint, rfs-divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
 }
 
 // Calculate the media query value
-$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
+$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{rfs-divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
 $rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
 $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
 
@@ -190,7 +196,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 // Helper function to get the formatted non-responsive value
 @function rfs-value($values) {
   // Convert to list
-  $values: if(type-of($values) != list, ($values,), $values);
+  $values: if(meta.type-of($values) != list, ($values,), $values);
 
   $val: "";
 
@@ -201,15 +207,15 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
     }
     @else {
       // Cache $value unit
-      $unit: if(type-of($value) == "number", unit($value), false);
+      $unit: if(meta.type-of($value) == "number", math.unit($value), false);
 
       @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, #{rfs-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);
+        $val: $val + " " + if($rfs-unit == px, #{rfs-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;
@@ -218,13 +224,13 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
   }
 
   // Remove first space
-  @return unquote(str-slice($val, 2));
+  @return string.unquote(string.slice($val, 2));
 }
 
 // Helper function to get the responsive value calculated by RFS
 @function rfs-fluid-value($values) {
   // Convert to list
-  $values: if(type-of($values) != list, ($values,), $values);
+  $values: if(meta.type-of($values) != list, ($values,), $values);
 
   $val: "";
 
@@ -234,28 +240,28 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
       $val: $val + " 0";
     } @else {
       // Cache $value unit
-      $unit: if(type-of($value) == "number", unit($value), false);
+      $unit: if(meta.type-of($value) == "number", math.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 {
         // Remove unit from $value for calculations
-        $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
+        $value: rfs-divide($value, $value * 0 + if($unit == px, 1, rfs-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, #{rfs-divide($value, $rfs-rem-value)}rem, #{$value}px);
         }
         @else {
           // Calculate the minimum value
-          $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
+          $value-min: $rfs-base-value + rfs-divide(abs($value) - $rfs-base-value, $rfs-factor);
 
           // Calculate difference between $value and the minimum value
           $value-diff: abs($value) - $value-min;
 
           // Base value formatting
-          $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
+          $min-width: if($rfs-unit == rem, #{rfs-divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
 
           // Use negative value if needed
           $min-width: if($value < 0, -$min-width, $min-width);
@@ -264,7 +270,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
           $variable-unit: if($rfs-two-dimensional, vmin, vw);
 
           // Calculate the variable width between 0 and $rfs-breakpoint
-          $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
+          $variable-width: #{rfs-divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
 
           // Return the calculated value
           $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
@@ -274,7 +280,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
   }
 
   // Remove first space
-  @return unquote(str-slice($val, 2));
+  @return string.unquote(string.slice($val, 2));
 }
 
 // RFS mixin

package/scss/mixins/_banner.scss

@@ -1,7 +0,0 @@
-@mixin bsBanner($file) {
-  /*!
-   * CoreUI #{$file} v5.2.0 (https://coreui.io)
-   * Copyright (c) 2024 creativeLabs Łukasz Holeczek
-   * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
-   */
-}