@coreui/coreui 5.2.0 → 5.3.1

package/scss/_type.scss

@@ -1,3 +1,8 @@
+@use "mixins/lists" as *;
+@use "vendor/rfs" as *;
+@use "reboot" as *;
+@use "variables" as *;
+
 //
 // Headings
 //
@@ -69,7 +74,7 @@
   display: inline-block;
 
   &:not(:last-child) {
-    @include ltr-rtl("margin-right", $list-inline-padding);
+    margin-inline-end: $list-inline-padding;
   }
 }
 

package/scss/_utilities.import.scss

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

package/scss/_utilities.scss

@@ -1,8 +1,13 @@
+@use "sass:map";
+@use "functions/maps" as *;
+@use "maps" as *;
+@use "variables" as *;
+
 // Utilities
 
 $utilities: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$utilities: map-merge(
+$utilities: map.merge(
   (
     // scss-docs-start utils-vertical-align
     "align": (
@@ -16,11 +21,10 @@ $utilities: map-merge(
       responsive: true,
       property: float,
       values: (
-        start: left,
-        end: right,
+        start: inline-start,
+        end: inline-end,
         none: none,
       ),
-      rtl: true
     ),
     // scss-docs-end utils-float
     // Object Fit utilities
@@ -90,7 +94,7 @@ $utilities: map-merge(
       css-var: true,
       css-variable-name: focus-ring-color,
       class: focus-ring,
-      values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
+      values: map-loop($theme-colors-rgb, rgba-css-var, "$prefix", "$key", "focus-ring")
     ),
     // scss-docs-end utils-focus-ring
     // scss-docs-start utils-position
@@ -107,16 +111,14 @@ $utilities: map-merge(
       values: $position-values
     ),
     "start": (
-      property: left,
+      property: inset-inline-start,
       class: start,
-      values: $position-values,
-      rtl: true
+      values: $position-values
     ),
     "end": (
-      property: right,
+      property: inset-inline-end,
       class: end,
-      values: $position-values,
-      rtl: true
+      values: $position-values
     ),
     "translate-middle": (
       property: transform,
@@ -145,13 +147,12 @@ $utilities: map-merge(
       )
     ),
     "border-end": (
-      property: border-right,
+      property: border-inline-end,
       class: border-end,
       values: (
         null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
         0: 0,
       ),
-      rtl: true
     ),
     "border-bottom": (
       property: border-bottom,
@@ -161,13 +162,12 @@ $utilities: map-merge(
       )
     ),
     "border-start": (
-      property: border-left,
+      property: border-inline-start,
       class: border-start,
       values: (
         null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
         0: 0,
       ),
-      rtl: true
     ),
     "border-color": (
       property: border-color,
@@ -180,28 +180,26 @@ $utilities: map-merge(
     "border-top-color": (
       property: border-top-color,
       class: border-top,
-      values: map-merge($theme-colors, ("white": $white)),
+      values: map.merge($theme-colors, ("white": $white)),
       vars: true
     ),
     "border-end-color": (
-      property: border-right-color,
+      property: border-inline-end-color,
       class: border-end,
-      values: map-merge($theme-colors, ("white": $white)),
+      values: map.merge($theme-colors, ("white": $white)),
       vars: true,
-      rtl: true
     ),
     "border-bottom-color": (
       property: border-bottom-color,
       class: border-bottom,
-      values: map-merge($theme-colors, ("white": $white)),
+      values: map.merge($theme-colors, ("white": $white)),
       vars: true
     ),
     "border-start-color": (
-      property: border-left-color,
+      property: border-inline-start-color,
       class: border-start,
-      values: map-merge($theme-colors, ("white": $white)),
+      values: map.merge($theme-colors, ("white": $white)),
       vars: true,
-      rtl: true
     ),
     "border-width": (
       property: border-width,
@@ -214,10 +212,9 @@ $utilities: map-merge(
       values: $border-widths
     ),
     "border-end-width": (
-      property: border-right-width,
+      property: border-inline-end-width,
       class: border-end,
       values: $border-widths,
-      rtl: true
     ),
     "border-bottom-width": (
       property: border-bottom-width,
@@ -225,10 +222,9 @@ $utilities: map-merge(
       values: $border-widths
     ),
     "border-start-width": (
-      property: border-left-width,
+      property: border-inline-start-width,
       class: border-start,
       values: $border-widths,
-      rtl: true
     ),
     "subtle-border-color": (
       property: border-color,
@@ -407,45 +403,43 @@ $utilities: map-merge(
       responsive: true,
       property: margin,
       class: m,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     "margin-x": (
       responsive: true,
       property: margin-right margin-left,
       class: mx,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     "margin-y": (
       responsive: true,
       property: margin-top margin-bottom,
       class: my,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     "margin-top": (
       responsive: true,
       property: margin-top,
       class: mt,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     "margin-end": (
       responsive: true,
-      property: margin-right,
+      property: margin-inline-end,
       class: me,
-      values: map-merge($spacers, (auto: auto)),
-      rtl: true
+      values: map.merge($spacers, (auto: auto)),
     ),
     "margin-bottom": (
       responsive: true,
       property: margin-bottom,
       class: mb,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     "margin-start": (
       responsive: true,
-      property: margin-left,
+      property: margin-inline-start,
       class: ms,
-      values: map-merge($spacers, (auto: auto)),
-      rtl: true
+      values: map.merge($spacers, (auto: auto)),
     ),
     // Negative margin utilities
     "negative-margin": (
@@ -474,10 +468,9 @@ $utilities: map-merge(
     ),
     "negative-margin-end": (
       responsive: true,
-      property: margin-right,
+      property: margin-inline-end,
       class: me,
-      values: $negative-spacers,
-      rtl: true
+      values: $negative-spacers
     ),
     "negative-margin-bottom": (
       responsive: true,
@@ -487,10 +480,9 @@ $utilities: map-merge(
     ),
     "negative-margin-start": (
       responsive: true,
-      property: margin-left,
+      property: margin-inline-start,
       class: ms,
-      values: $negative-spacers,
-      rtl: true
+      values: $negative-spacers
     ),
     // Padding utilities
     "padding": (
@@ -519,10 +511,9 @@ $utilities: map-merge(
     ),
     "padding-end": (
       responsive: true,
-      property: padding-right,
+      property: padding-inline-end,
       class: pe,
-      values: $spacers,
-      rtl: true
+      values: $spacers
     ),
     "padding-bottom": (
       responsive: true,
@@ -532,10 +523,9 @@ $utilities: map-merge(
     ),
     "padding-start": (
       responsive: true,
-      property: padding-left,
+      property: padding-inline-start,
       class: ps,
-      values: $spacers,
-      rtl: true
+      values: $spacers
     ),
     // Gap utility
     "gap": (
@@ -603,11 +593,10 @@ $utilities: map-merge(
       property: text-align,
       class: text,
       values: (
-        start: left,
-        end: right,
+        start: start,
+        end: end,
         center: center,
-      ),
-      rtl: true
+      )
     ),
     "text-decoration": (
       property: text-decoration,
@@ -641,7 +630,7 @@ $utilities: map-merge(
       local-vars: (
         "text-opacity": 1
       ),
-      values: map-merge(
+      values: map.merge(
         $utilities-text-colors,
         (
           "muted": var(--#{$prefix}secondary-color), // deprecated
@@ -705,7 +694,7 @@ $utilities: map-merge(
       local-vars: (
         "link-underline-opacity": 1
       ),
-      values: map-merge(
+      values: map.merge(
         $utilities-links-underline,
         (
           null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
@@ -734,7 +723,7 @@ $utilities: map-merge(
       local-vars: (
         "bg-opacity": 1
       ),
-      values: map-merge(
+      values: map.merge(
         $utilities-bg-colors,
         (
           "transparent": transparent,
@@ -809,7 +798,7 @@ $utilities: map-merge(
       )
     ),
     "rounded-end": (
-      property: border-top-right-radius border-bottom-right-radius,
+      property: border-start-end-radius border-end-end-radius,
       class: rounded-end,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -821,8 +810,7 @@ $utilities: map-merge(
         5: var(--#{$prefix}border-radius-xxl),
         circle: 50%,
         pill: var(--#{$prefix}border-radius-pill)
-      ),
-      rtl: true
+      )
     ),
     "rounded-bottom": (
       property: border-bottom-right-radius border-bottom-left-radius,
@@ -840,7 +828,7 @@ $utilities: map-merge(
       )
     ),
     "rounded-start": (
-      property: border-bottom-left-radius border-top-left-radius,
+      property: border-end-start-radius border-start-start-radius,
       class: rounded-start,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -852,8 +840,7 @@ $utilities: map-merge(
         5: var(--#{$prefix}border-radius-xxl),
         circle: 50%,
         pill: var(--#{$prefix}border-radius-pill)
-      ),
-      rtl: true
+      )
     ),
     // scss-docs-end utils-border-radius
     // scss-docs-start utils-visibility

package/scss/_variables-dark.import.scss

@@ -0,0 +1 @@
+@forward "variables-dark";

package/scss/_variables-dark.scss

@@ -1,6 +1,10 @@
+@use "sass:color";
+@use "functions/color" as *;
+@use "variables" as *;
+
 // Dark color mode variables
 //
-// Custom variables for the `[data-coreui-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+// Custom variables for the `[data#{$data-infix}theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
 
 //
 // Global colors
@@ -42,12 +46,12 @@ $disabled-dark:         rgba($white, .38) !default; // Deprecated in v5.0.0
 // fusv-enable
 
 // scss-docs-start theme-color-dark-variables
-$primary-dark:       desaturate($primary, 10%) !default;
+$primary-dark:       color.scale($primary, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
 $secondary-dark:     $secondary !default;
-$success-dark:       desaturate($success, 10%) !default;
-$info-dark:          desaturate($info, 10%) !default;
-$warning-dark:       desaturate($warning, 10%) !default;
-$danger-dark:        desaturate($danger, 10%) !default;
+$success-dark:       color.scale($success, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
+$info-dark:          color.scale($info, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
+$warning-dark:       color.scale($warning, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
+$danger-dark:        color.scale($danger, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
 $light-dark:         $light !default;
 $dark-dark:          $dark !default;
 // scss-docs-end theme-color-dark-variables
@@ -66,12 +70,12 @@ $theme-colors-dark: (
 // scss-docs-end theme-colors-dark-map
 
 // scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark:        desaturate($primary-text-emphasis, 10%) !default;
+$primary-text-emphasis-dark:        color.scale($primary-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
 $secondary-text-emphasis-dark:      $secondary-text-emphasis !default;
-$success-text-emphasis-dark:        desaturate($success-text-emphasis, 10%) !default;
-$info-text-emphasis-dark:           desaturate($info-text-emphasis, 10%) !default;
-$warning-text-emphasis-dark:        desaturate($warning-text-emphasis, 10%) !default;
-$danger-text-emphasis-dark:         desaturate($danger-text-emphasis, 10%) !default;
+$success-text-emphasis-dark:        color.scale($success-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
+$info-text-emphasis-dark:           color.scale($info-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
+$warning-text-emphasis-dark:        color.scale($warning-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
+$danger-text-emphasis-dark:         color.scale($danger-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
 $light-text-emphasis-dark:          $gray-100-dark !default;
 $dark-text-emphasis-dark:           $gray-300-dark !default;
 // scss-docs-end theme-text-dark-variables
@@ -84,7 +88,7 @@ $info-bg-subtle-dark:               $info-bg-subtle !default;
 $warning-bg-subtle-dark:            $warning-bg-subtle !default;
 $danger-bg-subtle-dark:             $danger-bg-subtle !default;
 $light-bg-subtle-dark:              $gray-800-dark !default;
-$dark-bg-subtle-dark:               mix($gray-800-dark, $black) !default;
+$dark-bg-subtle-dark:               color.mix($gray-800-dark, $black) !default;
 // scss-docs-end theme-bg-subtle-dark-variables
 
 // scss-docs-start theme-border-subtle-dark-variables
@@ -103,7 +107,7 @@ $body-bg-dark:                      $gray-900-dark !default;
 $body-secondary-color-dark:         rgba($white, .6) !default;
 $body-secondary-bg-dark:            $gray-800-dark !default;
 $body-tertiary-color-dark:          rgba($white, .38) !default;
-$body-tertiary-bg-dark:             mix($gray-800-dark, #212631, 50%) !default;
+$body-tertiary-bg-dark:             color.mix($gray-800-dark, #212631, 50%) !default;
 $body-emphasis-color-dark:          $white !default;
 $border-color-dark:                 $gray-800-dark !default;
 $border-color-translucent-dark:     rgba($white, .1) !default;
@@ -142,27 +146,4 @@ $accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;
 
 $accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
 $accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
-
-
-//
-// Buttons
-//
-
-$button-variants-dark: (
-  "primary":    btn-color-map($primary-dark, $primary-dark),
-  "secondary":  btn-color-map($secondary-dark, $secondary-dark),
-  "success":    btn-color-map($success-dark, $success-dark),
-  "danger":     btn-color-map($danger-dark, $danger-dark),
-  "warning":    btn-color-map($warning-dark, $warning-dark),
-  "info":       btn-color-map($info-dark, $info-dark)
-) !default;
-
-$button-outline-ghost-variants-dark: (
-  "primary":    btn-outline-color-map($primary-dark),
-  "secondary":  btn-outline-color-map($secondary-dark),
-  "success":    btn-outline-color-map($success-dark),
-  "danger":     btn-outline-color-map($danger-dark),
-  "warning":    btn-outline-color-map($warning-dark),
-  "info":       btn-outline-color-map($info-dark)
-) !default;
 // scss-docs-end sass-dark-mode-vars

package/scss/_variables.import.scss

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

package/scss/_variables.scss

@@ -1,3 +1,12 @@
+@use "sass:color";
+@use "sass:string";
+@use "functions/assert-ascending" as *;
+@use "functions/assert-starts-at-zero" as *;
+@use "functions/color" as *;
+@use "functions/color-contrast-variables" as *;
+@use "functions/math" as *;
+@use "functions/to-rgb" as *;
+
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for
@@ -86,6 +95,7 @@ $min-contrast-ratio:   4.5 !default;
 $color-contrast-dark:      $black !default;
 $color-contrast-light:     $white !default;
 
+
 // fusv-disable
 $blue-100: tint-color($blue, 80%) !default;
 $blue-200: tint-color($blue, 60%) !default;
@@ -350,7 +360,7 @@ $success-bg-subtle:    #cbedd6 !default;
 $info-bg-subtle:       #c0e6ff !default;
 $warning-bg-subtle:    #feecc5 !default;
 $danger-bg-subtle:     #f9d4d4 !default;
-$light-bg-subtle:      mix($gray-100, $white) !default;
+$light-bg-subtle:      color.mix($gray-100, $white) !default;
 $dark-bg-subtle:       $gray-400 !default;
 // scss-docs-end theme-bg-subtle-variables
 
@@ -396,6 +406,7 @@ $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
 $enable-ltr:                  true !default;
 $enable-rtl:                  false !default;
+$enable-container-queries:    false !default;
 
 $enable-dark-mode:            true !default;
 $color-mode-type:             data !default; // `data` or `media-query`
@@ -405,6 +416,10 @@ $color-mode-type:             data !default; // `data` or `media-query`
 $variable-prefix:             cui- !default; // Deprecated in v4.2.6 for the shorter `$prefix`
 $prefix:                      $variable-prefix !default;
 
+// Prefix for data attributes
+
+$data-infix:                  -coreui- !default;
+
 // Set mobile breakpoint
 
 $mobile-breakpoint:           lg !default;
@@ -508,9 +523,22 @@ $grid-breakpoints: (
 ) !default;
 // scss-docs-end grid-breakpoints
 
-@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+@include assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
 
+// scss-docs-start cq-grid-breakpoints
+$cq-grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;
+
+@include assert-ascending($cq-grid-breakpoints, "$cq-grid-breakpoints");
+@include assert-starts-at-zero($cq-grid-breakpoints, "$cq-grid-breakpoints");
+// scss-docs-end cq-grid-breakpoints
 
 // Grid containers
 //
@@ -526,7 +554,7 @@ $container-max-widths: (
 ) !default;
 // scss-docs-end container-max-widths
 
-@include _assert-ascending($container-max-widths, "$container-max-widths");
+@include assert-ascending($container-max-widths, "$container-max-widths");
 
 
 // Grid columns
@@ -868,7 +896,7 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color:     $gray-600 !default;
-$btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
+$btn-link-focus-shadow-rgb:   to-rgb(color.mix(color-contrast-variables($link-color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio), $link-color, 15%)) !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -885,30 +913,6 @@ $btn-active-bg-shade-amount:      20% !default;
 $btn-active-bg-tint-amount:       20% !default;
 $btn-active-border-shade-amount:  25% !default;
 $btn-active-border-tint-amount:   10% !default;
-
-// scss-docs-start button-variants
-$button-variants: (
-  "primary": btn-color-map($primary, $primary),
-  "secondary": btn-color-map($secondary, $secondary),
-  "success": btn-color-map($success, $success),
-  "danger": btn-color-map($danger, $danger),
-  "warning": btn-color-map($warning, $warning),
-  "info": btn-color-map($info, $info),
-  "light": btn-color-map($light, $light),
-  "dark": btn-color-map($dark, $dark)
-) !default;
-
-$button-outline-ghost-variants: (
-  "primary": btn-outline-color-map($primary),
-  "secondary": btn-outline-color-map($secondary),
-  "success": btn-outline-color-map($success),
-  "danger": btn-outline-color-map($danger),
-  "warning": btn-outline-color-map($warning),
-  "info": btn-outline-color-map($info),
-  "light": btn-outline-color-map($light),
-  "dark": btn-outline-color-map($dark)
-) !default;
-// scss-docs-end button-variants
 // scss-docs-end btn-variables
 
 
@@ -1037,11 +1041,11 @@ $form-switch-checked-bg-position: right center !default;
 
 $form-switch-widths: (
   lg: (
-    width: 1.75em,
+    width: 2.5em,
     height: 1.25em
   ),
   xl: (
-    width: 2em,
+    width: 3em,
     height: 1.5em
   )
 ) !default;
@@ -1837,7 +1841,7 @@ $breadcrumb-margin-bottom:          1rem !default;
 $breadcrumb-bg:                     null !default;
 $breadcrumb-divider-color:          var(--#{$prefix}secondary-color) !default;
 $breadcrumb-active-color:           var(--#{$prefix}secondary-color) !default;
-$breadcrumb-divider:                quote("/") !default;
+$breadcrumb-divider:                string.quote("/") !default;
 $breadcrumb-divider-flipped:        $breadcrumb-divider !default;
 $breadcrumb-border-radius:          null !default;
 // scss-docs-end breadcrumb-variables
@@ -2062,5 +2066,3 @@ $kbd-bg:                            var(--#{$prefix}body-color) !default;
 $nested-kbd-font-weight:            null !default; // Deprecated in v4.2.6, removing in v6
 
 $pre-color:                         null !default;
-
-@import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5

package/scss/coreui-grid.rtl.scss

@@ -1,4 +1,4 @@
-$enable-ltr: false !default;
-$enable-rtl: true !default;
-
-@import "coreui-grid";
+@use "coreui-grid" with (
+  $enable-ltr: false,
+  $enable-rtl: true
+);

package/scss/coreui-grid.scss

@@ -1,25 +1,16 @@
-@import "mixins/banner";
-@include bsBanner(Grid);
-
-$include-column-box-sizing: true !default;
-
-@import "functions";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-
-@import "mixins/ltr-rtl";
-@import "mixins/breakpoints";
-@import "mixins/container";
-@import "mixins/grid";
-@import "mixins/utilities";
-
-@import "vendor/rfs";
+@forward "banner" with (
+  $file: "Grid"
+);
 
-@import "containers";
-@import "grid";
+@forward "variables";
+@forward "variables-dark";
+@forward "containers";
+@forward "grid" with (
+  $include-column-box-sizing: true !default,
+);
+@use "utilities" as *;
+@use "functions/maps" as *;
 
-@import "utilities";
 // Only use the utilities we need
 // stylelint-disable-next-line scss/dollar-variable-default
 $utilities: map-get-multiple(
@@ -60,4 +51,4 @@ $utilities: map-get-multiple(
   )
 );
 
-@import "utilities/api";
+@use "utilities/api";

package/scss/coreui-reboot.rtl.scss

@@ -1,4 +1,4 @@
-$enable-ltr: false !default;
-$enable-rtl: true !default;
-
-@import "coreui-reboot";
+@use "coreui-reboot" with (
+  $enable-ltr: false,
+  $enable-rtl: true
+);

package/scss/coreui-reboot.scss

@@ -1,10 +1,9 @@
-@import "mixins/banner";
-@include bsBanner(Reboot);
+@use "banner" with (
+  $file: "Reboot"
+);
 
-@import "functions";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-@import "mixins";
-@import "root";
-@import "reboot";
+@forward "variables";
+@forward "variables-dark";
+
+@forward "root";
+@forward "reboot";