Migrate to Sass modules

fix function

package.json

@@ -42,11 +42,11 @@
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
     "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
-    "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
+    "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/bootstrap.scss:dist/css/bootstrap.css",
     "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
     "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
     "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
-    "css-lint-vars": "fusv scss/ site/src/scss/",
+    "css-dontlint-vars": "fusv scss/ site/assets/scss/",
     "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",

scss/_accordion.scss

@@ -1,3 +1,12 @@
+@use "config" as *;
+@use "variables" as *;
+@use "functions" as *;
+@use "vendor/rfs" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/transition" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/color-mode" as *;
+
 //
 // Base styles
 //

scss/_alert.scss

@@ -1,3 +1,8 @@
+@use "sass:map";
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+
 //
 // Base styles
 //
@@ -57,7 +62,7 @@
 
 // scss-docs-start alert-modifiers
 // Generate contextual modifier classes for colorizing the alert
-@each $state in map-keys($theme-colors) {
+@each $state in map.keys($theme-colors) {
   .alert-#{$state} {
     --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
     --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);

scss/_badge.scss

@@ -1,3 +1,9 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/gradients" as *;
+@use "vendor/rfs" as *;
+
 // Base class
 //
 // Requires one of the contextual, color modifier classes for `color` and

scss/_breadcrumb.scss

@@ -1,3 +1,8 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "vendor/rfs" as *;
+
 .breadcrumb {
   // scss-docs-start breadcrumb-css-vars
   --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};

scss/_button-group.scss

@@ -1,3 +1,8 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+
 // Make the div behave like a button
 .btn-group,
 .btn-group-vertical {

scss/_buttons.scss

@@ -1,3 +1,85 @@
+@use "config" as *;
+@use "colors" as *;
+@use "variables" as *;
+@use "functions" as *;
+@use "vendor/rfs" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/transition" as *;
+@use "mixins/gradients" 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(
+  $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};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$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};
+}
+// scss-docs-end btn-variant-mixin
+
+// scss-docs-start btn-outline-variant-mixin
+@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: #{$color-hover};
+  --#{$prefix}btn-hover-bg: #{$active-background};
+  --#{$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};
+  --#{$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-size-mixin
+@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+  --#{$prefix}btn-padding-y: #{$padding-y};
+  --#{$prefix}btn-padding-x: #{$padding-x};
+  @include rfs($font-size, --#{$prefix}btn-font-size);
+  --#{$prefix}btn-border-radius: #{$border-radius};
+}
+// scss-docs-end btn-size-mixin
+
+
 //
 // Base styles
 //

scss/_card.scss

@@ -1,3 +1,9 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "layout/breakpoints" as *;
+
 //
 // Base styles
 //

scss/_carousel.scss

@@ -1,3 +1,11 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/transition" as *;
+@use "mixins/clearfix" as *;
+@use "mixins/gradients" as *;
+@use "mixins/color-mode" as *;
+@use "vendor/rfs" as *;
+
 // Notes on the classes:
 //
 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)

scss/_close.scss

@@ -1,3 +1,8 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/color-mode" as *;
+
 // Transparent background and border properties included for button version.
 // iOS requires the button element instead of an anchor tag.
 // If you want the anchor version, it requires `href="#"`.

scss/_colors.scss

@@ -123,160 +123,160 @@ $white: #fff !default;
 $black: #000 !default;
 
 $blues: (
-  'blue-100': $blue-100,
+  "blue-100": $blue-100,
-  'blue-200': $blue-200,
+  "blue-200": $blue-200,
-  'blue-300': $blue-300,
+  "blue-300": $blue-300,
-  'blue-400': $blue-400,
+  "blue-400": $blue-400,
-  'blue-500': $blue-500,
+  "blue-500": $blue-500,
-  'blue-600': $blue-600,
+  "blue-600": $blue-600,
-  'blue-700': $blue-700,
+  "blue-700": $blue-700,
-  'blue-800': $blue-800,
+  "blue-800": $blue-800,
-  'blue-900': $blue-900
+  "blue-900": $blue-900
 ) !default;
 
 $indigos: (
-  'indigo-100': $indigo-100,
+  "indigo-100": $indigo-100,
-  'indigo-200': $indigo-200,
+  "indigo-200": $indigo-200,
-  'indigo-300': $indigo-300,
+  "indigo-300": $indigo-300,
-  'indigo-400': $indigo-400,
+  "indigo-400": $indigo-400,
-  'indigo-500': $indigo,
+  "indigo-500": $indigo,
-  'indigo-600': $indigo-600,
+  "indigo-600": $indigo-600,
-  'indigo-700': $indigo-700,
+  "indigo-700": $indigo-700,
-  'indigo-800': $indigo-800,
+  "indigo-800": $indigo-800,
-  'indigo-900': $indigo-900
+  "indigo-900": $indigo-900
 ) !default;
 
 $purples: (
-  'purple-100': $purple-100,
+  "purple-100": $purple-100,
-  'purple-200': $purple-200,
+  "purple-200": $purple-200,
-  'purple-300': $purple-300,
+  "purple-300": $purple-300,
-  'purple-400': $purple-400,
+  "purple-400": $purple-400,
-  'purple-500': $purple,
+  "purple-500": $purple,
-  'purple-600': $purple-600,
+  "purple-600": $purple-600,
-  'purple-700': $purple-700,
+  "purple-700": $purple-700,
-  'purple-800': $purple-800,
+  "purple-800": $purple-800,
-  'purple-900': $purple-900
+  "purple-900": $purple-900
 ) !default;
 
 $pinks: (
-  'pink-100': $pink-100,
+  "pink-100": $pink-100,
-  'pink-200': $pink-200,
+  "pink-200": $pink-200,
-  'pink-300': $pink-300,
+  "pink-300": $pink-300,
-  'pink-400': $pink-400,
+  "pink-400": $pink-400,
-  'pink-500': $pink-500,
+  "pink-500": $pink-500,
-  'pink-600': $pink-600,
+  "pink-600": $pink-600,
-  'pink-700': $pink-700,
+  "pink-700": $pink-700,
-  'pink-800': $pink-800,
+  "pink-800": $pink-800,
-  'pink-900': $pink-900
+  "pink-900": $pink-900
 ) !default;
 
 $reds: (
-  'red-100': $red-100,
+  "red-100": $red-100,
-  'red-200': $red-200,
+  "red-200": $red-200,
-  'red-300': $red-300,
+  "red-300": $red-300,
-  'red-400': $red-400,
+  "red-400": $red-400,
-  'red-500': $red-500,
+  "red-500": $red-500,
-  'red-600': $red-600,
+  "red-600": $red-600,
-  'red-700': $red-700,
+  "red-700": $red-700,
-  'red-800': $red-800,
+  "red-800": $red-800,
-  'red-900': $red-900
+  "red-900": $red-900
 ) !default;
 
 $oranges: (
-  'orange-100': $orange-100,
+  "orange-100": $orange-100,
-  'orange-200': $orange-200,
+  "orange-200": $orange-200,
-  'orange-300': $orange-300,
+  "orange-300": $orange-300,
-  'orange-400': $orange-400,
+  "orange-400": $orange-400,
-  'orange-500': $orange-500,
+  "orange-500": $orange-500,
-  'orange-600': $orange-600,
+  "orange-600": $orange-600,
-  'orange-700': $orange-700,
+  "orange-700": $orange-700,
-  'orange-800': $orange-800,
+  "orange-800": $orange-800,
-  'orange-900': $orange-900
+  "orange-900": $orange-900
 ) !default;
 
 $yellows: (
-  'yellow-100': $yellow-100,
+  "yellow-100": $yellow-100,
-  'yellow-200': $yellow-200,
+  "yellow-200": $yellow-200,
-  'yellow-300': $yellow-300,
+  "yellow-300": $yellow-300,
-  'yellow-400': $yellow-400,
+  "yellow-400": $yellow-400,
-  'yellow-500': $yellow-500,
+  "yellow-500": $yellow-500,
-  'yellow-600': $yellow-600,
+  "yellow-600": $yellow-600,
-  'yellow-700': $yellow-700,
+  "yellow-700": $yellow-700,
-  'yellow-800': $yellow-800,
+  "yellow-800": $yellow-800,
-  'yellow-900': $yellow-900
+  "yellow-900": $yellow-900
 ) !default;
 
 $greens: (
-  'green-100': $green-100,
+  "green-100": $green-100,
-  'green-200': $green-200,
+  "green-200": $green-200,
-  'green-300': $green-300,
+  "green-300": $green-300,
-  'green-400': $green-400,
+  "green-400": $green-400,
-  'green-500': $green-500,
+  "green-500": $green-500,
-  'green-600': $green-600,
+  "green-600": $green-600,
-  'green-700': $green-700,
+  "green-700": $green-700,
-  'green-800': $green-800,
+  "green-800": $green-800,
-  'green-900': $green-900
+  "green-900": $green-900
 ) !default;
 
 $teals: (
-  'teal-100': $teal-100,
+  "teal-100": $teal-100,
-  'teal-200': $teal-200,
+  "teal-200": $teal-200,
-  'teal-300': $teal-300,
+  "teal-300": $teal-300,
-  'teal-400': $teal-400,
+  "teal-400": $teal-400,
-  'teal-500': $teal-500,
+  "teal-500": $teal-500,
-  'teal-600': $teal-600,
+  "teal-600": $teal-600,
-  'teal-700': $teal-700,
+  "teal-700": $teal-700,
-  'teal-800': $teal-800,
+  "teal-800": $teal-800,
-  'teal-900': $teal-900
+  "teal-900": $teal-900
 ) !default;
 
 $cyans: (
-  'cyan-100': $cyan-100,
+  "cyan-100": $cyan-100,
-  'cyan-200': $cyan-200,
+  "cyan-200": $cyan-200,
-  'cyan-300': $cyan-300,
+  "cyan-300": $cyan-300,
-  'cyan-400': $cyan-400,
+  "cyan-400": $cyan-400,
-  'cyan-500': $cyan-500,
+  "cyan-500": $cyan-500,
-  'cyan-600': $cyan-600,
+  "cyan-600": $cyan-600,
-  'cyan-700': $cyan-700,
+  "cyan-700": $cyan-700,
-  'cyan-800': $cyan-800,
+  "cyan-800": $cyan-800,
-  'cyan-900': $cyan-900
+  "cyan-900": $cyan-900
 ) !default;
 
 $grays: (
-  'gray-100': $gray-100,
+  "gray-100": $gray-100,
-  'gray-200': $gray-200,
+  "gray-200": $gray-200,
-  'gray-300': $gray-300,
+  "gray-300": $gray-300,
-  'gray-400': $gray-400,
+  "gray-400": $gray-400,
-  'gray-500': $gray-500,
+  "gray-500": $gray-500,
-  'gray-600': $gray-600,
+  "gray-600": $gray-600,
-  'gray-700': $gray-700,
+  "gray-700": $gray-700,
-  'gray-800': $gray-800,
+  "gray-800": $gray-800,
-  'gray-900': $gray-900
+  "gray-900": $gray-900
 ) !default;
 
 $colors: (
-  'blue': $blue,
+  "blue": $blue,
-  'indigo': $indigo,
+  "indigo": $indigo,
-  'purple': $purple,
+  "purple": $purple,
-  'pink': $pink,
+  "pink": $pink,
-  'red': $red,
+  "red": $red,
-  'orange': $orange,
+  "orange": $orange,
-  'yellow': $yellow,
+  "yellow": $yellow,
-  'green': $green,
+  "green": $green,
-  'teal': $teal,
+  "teal": $teal,
-  'cyan': $cyan
+  "cyan": $cyan
 ) !default;
 
 $all-colors: (
-  'grays': $grays,
+  "grays": $grays,
-  'blues': $blues,
+  "blues": $blues,
-  'indigos': $indigos,
+  "indigos": $indigos,
-  'purples': $purples,
+  "purples": $purples,
-  'pinks': $pinks,
+  "pinks": $pinks,
-  'reds': $reds,
+  "reds": $reds,
-  'oranges': $oranges,
+  "oranges": $oranges,
-  'yellows': $yellows,
+  "yellows": $yellows,
-  'greens': $greens,
+  "greens": $greens,
-  'teals': $teals,
+  "teals": $teals,
-  'cyans': $cyans
+  "cyans": $cyans
 ) !default;

scss/_config.scss

@@ -4,9 +4,33 @@
 
 $prefix: bs- !default;
 
+$enable-caret:                true !default;
+$enable-rounded:              true !default;
+$enable-shadows:              false !default;
+$enable-gradients:            false !default;
+$enable-transitions:          true !default;
+$enable-reduced-motion:       true !default;
+$enable-smooth-scroll:        true !default;
+$enable-grid-classes:         true !default;
 $enable-container-classes:    true !default;
+$enable-cssgrid:              false !default;
+$enable-button-pointers:      true !default;
+$enable-rfs:                  true !default;
+$enable-validation-icons:     true !default;
+$enable-negative-margins:     false !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities:  true !default;
+
+$enable-dark-mode:            true !default;
+$color-mode-type:             data !default; // `data` or `media-query`
+
 // more to come here…
 
+$color-mode-type:          "media-query" !default;
+$color-contrast-dark:      #000 !default;
+$color-contrast-light:     #fff !default;
+$min-contrast-ratio:         4.5 !default;
+
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,

scss/_dropdown.scss

@@ -1,3 +1,14 @@
+@use "sass:map";
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/caret" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/gradients" as *;
+@use "mixins/caret" as *;
+@use "vendor/rfs" as *;
+@use "layout/breakpoints" as *;
+
 // The dropdown wrapper (`<div>`)
 .dropup,
 .dropend,
@@ -85,7 +96,7 @@
 // We deliberately hardcode the `bs-` prefix because we check
 // this custom property in JS to determine Popper's positioning
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

scss/_forms.scss

@@ -1,9 +0,0 @@
-@import "forms/labels";
-@import "forms/form-text";
-@import "forms/form-control";
-@import "forms/form-select";
-@import "forms/form-check";
-@import "forms/form-range";
-@import "forms/floating-labels";
-@import "forms/input-group";
-@import "forms/validation";

scss/_functions.scss

@@ -1,3 +1,5 @@
+@use "config" as *;
+
 // Bootstrap functions
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
@@ -151,7 +153,7 @@
 $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
 
 @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
-  $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+  $foregrounds: $color-contrast-light, $color-contrast-dark, #fff, #000;
   $max-ratio: 0;
   $max-ratio-color: null;
 

scss/_images.scss

@@ -1,3 +1,10 @@
+@use "config" as *;
+@use "variables" as *;
+@use "vendor/rfs" as *;
+@use "mixins/image" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+
 // Responsive images (ensure images don't scale beyond their parents)
 //
 // This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.

scss/_list-group.scss

@@ -1,3 +1,11 @@
+@use "sass:map";
+@use "config" as *;
+@use "colors" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "vendor/rfs" as *;
+@use "layout/breakpoints" as *;
+
 // Base class
 //
 // Easily usable on <ul>, <ol>, or <div>.
@@ -121,7 +129,7 @@
 //
 // Change the layout of list group items from vertical (default) to horizontal.
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
@@ -182,7 +190,7 @@
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
 
-@each $state in map-keys($theme-colors) {
+@each $state in map.keys($theme-colors) {
   .list-group-item-#{$state} {
     --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
     --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);

scss/_maps.scss

@@ -1,3 +1,9 @@
+@use "sass:map";
+@use "config" as *;
+@use "colors" as *;
+@use "functions" as *;
+@use "variables" as *;
+
 // Re-assigned maps
 //
 // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
@@ -100,7 +106,7 @@ $utilities-colors: $theme-colors-rgb !default;
 // scss-docs-end utilities-colors
 
 // scss-docs-start utilities-text-colors
-$utilities-text: map-merge(
+$utilities-text: map.merge(
   $utilities-colors,
   (
     "black": to-rgb($black),
@@ -123,7 +129,7 @@ $utilities-text-emphasis-colors: (
 // scss-docs-end utilities-text-colors
 
 // scss-docs-start utilities-bg-colors
-$utilities-bg: map-merge(
+$utilities-bg: map.merge(
   $utilities-colors,
   (
     "black": to-rgb($black),
@@ -146,7 +152,7 @@ $utilities-bg-subtle: (
 // scss-docs-end utilities-bg-colors
 
 // scss-docs-start utilities-border-colors
-$utilities-border: map-merge(
+$utilities-border: map.merge(
   $utilities-colors,
   (
     "black": to-rgb($black),

scss/_mixins.scss

@@ -1,42 +0,0 @@
-// Toggles
-//
-// Used in conjunction with global variables to enable certain theme features.
-
-// Vendor
-@import "vendor/rfs";
-
-// Deprecate
-@import "mixins/deprecate";
-
-// Helpers
-// @import "mixins/breakpoints";
-@import "mixins/color-mode";
-@import "mixins/color-scheme";
-@import "mixins/image";
-@import "mixins/resize";
-@import "mixins/visually-hidden";
-@import "mixins/reset-text";
-@import "mixins/text-truncate";
-
-// Utilities
-@import "mixins/utilities";
-
-// Components
-@import "mixins/backdrop";
-@import "mixins/buttons";
-@import "mixins/caret";
-@import "mixins/pagination";
-@import "mixins/lists";
-@import "mixins/forms";
-@import "mixins/table-variants";
-
-// Skins
-@import "mixins/border-radius";
-@import "mixins/box-shadow";
-@import "mixins/gradients";
-@import "mixins/transition";
-
-// Layout
-@import "mixins/clearfix";
-// @import "mixins/container";
-// @import "mixins/grid";

scss/_modal.scss

@@ -1,3 +1,14 @@
+@use "sass:map";
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/transition" as *;
+@use "mixins/gradients" as *;
+@use "mixins/backdrop" as *;
+@use "vendor/rfs" as *;
+@use "layout/breakpoints" as *;
+
 // stylelint-disable function-disallowed-list
 
 // .modal-open      - body class for killing the scroll
@@ -209,7 +220,7 @@
 }
 
 // scss-docs-start modal-fullscreen-loop
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
   $postfix: if($infix != "", $infix + "-down", "");
 

scss/_nav.scss

@@ -1,3 +1,10 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/transition" as *;
+@use "mixins/gradients" as *;
+@use "vendor/rfs" as *;
+
 // Base class
 //
 // Kickstart any navigation component with a set of style resets. Works with

scss/_navbar.scss

@@ -1,3 +1,15 @@
+@use "sass:map";
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/gradients" as *;
+@use "mixins/transition" as *;
+@use "mixins/color-mode" as *;
+@use "mixins/deprecate" as *;
+@use "vendor/rfs" as *;
+@use "layout/breakpoints" as *;
+
 // Navbar
 //
 // Provide a static navbar from which we expand to create full-width, fixed, and
@@ -190,7 +202,7 @@
 // Generate series of `.navbar-expand-*` responsive classes for configuring
 // where your navbar collapses.
 .navbar-expand {
-  @each $breakpoint in map-keys($grid-breakpoints) {
+  @each $breakpoint in map.keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
     $infix: breakpoint-infix($next, $grid-breakpoints);
 

scss/_offcanvas.scss

@@ -1,3 +1,11 @@
+@use "sass:map";
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/transition" as *;
+@use "mixins/backdrop" as *;
+@use "layout/breakpoints" as *;
+
 // stylelint-disable function-disallowed-list
 
 %offcanvas-css-vars {
@@ -17,7 +25,7 @@
   // scss-docs-end offcanvas-css-vars
 }
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   $next: breakpoint-next($breakpoint, $grid-breakpoints);
   $infix: breakpoint-infix($next, $grid-breakpoints);
 
@@ -26,7 +34,7 @@
   }
 }
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   $next: breakpoint-next($breakpoint, $grid-breakpoints);
   $infix: breakpoint-infix($next, $grid-breakpoints);
 

scss/_pagination.scss

@@ -1,3 +1,20 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/lists" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/transition" as *;
+@use "mixins/gradients" as *;
+@use "vendor/rfs" as *;
+
+// scss-docs-start pagination-mixin
+@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
+  --#{$prefix}pagination-padding-x: #{$padding-x};
+  --#{$prefix}pagination-padding-y: #{$padding-y};
+  @include rfs($font-size, --#{$prefix}pagination-font-size);
+  --#{$prefix}pagination-border-radius: #{$border-radius};
+}
+// scss-docs-end pagination-mixin
+
 .pagination {
   // scss-docs-start pagination-css-vars
   --#{$prefix}pagination-padding-x: #{$pagination-padding-x};

scss/_placeholders.scss

@@ -1,3 +1,7 @@
+@use "config" as *;
+@use "colors" as *;
+@use "variables" as *;
+
 .placeholder {
   display: inline-block;
   min-height: 1em;

scss/_popover.scss

@@ -1,3 +1,10 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "vendor/rfs" as *;
+@use "mixins/reset-text" as *;
+
 .popover {
   // scss-docs-start popover-css-vars
   --#{$prefix}popover-zindex: #{$zindex-popover};

scss/_progress.scss

@@ -1,3 +1,11 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/transition" as *;
+@use "mixins/gradients" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "vendor/rfs" as *;
+
 // Disable animation if transitions are disabled
 
 // scss-docs-start progress-keyframes

scss/_reboot.scss

@@ -1,3 +1,9 @@
+@use "config" as *;
+@use "colors" as *;
+@use "variables" as *;
+@use "vendor/rfs" as *;
+@use "mixins/border-radius" as *;
+
 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
 
 

scss/_root.scss

@@ -1,3 +1,10 @@
+@use "config" as *;
+@use "colors" as *;
+@use "variables" as *;
+@use "maps" as *;
+@use "vendor/rfs" as *;
+@use "mixins/color-mode" as *;
+
 :root,
 [data-bs-theme="light"] {
   // Note: Custom variable values only support SassScript inside `#{}`.

scss/_spinners.scss

@@ -1,3 +1,6 @@
+@use "config" as *;
+@use "variables" as *;
+
 //
 // Rotating border
 //

scss/_tables.scss

@@ -1,3 +1,35 @@
+@use "sass:map";
+@use "config" as *;
+@use "colors" as *;
+@use "variables" as *;
+@use "functions" as *;
+@use "layout/breakpoints" 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));
+
+    --#{$prefix}table-color: #{$color};
+    --#{$prefix}table-bg: #{$background};
+    --#{$prefix}table-border-color: #{$table-border-color};
+    --#{$prefix}table-striped-bg: #{$striped-bg};
+    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
+    --#{$prefix}table-active-bg: #{$active-bg};
+    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
+    --#{$prefix}table-hover-bg: #{$hover-bg};
+    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
+
+    color: var(--#{$prefix}table-color);
+    border-color: var(--#{$prefix}table-border-color);
+  }
+}
+// scss-docs-end table-variant
+
 //
 // Basic Bootstrap table
 //
@@ -159,7 +191,7 @@
 // Generate series of `.table-responsive-*` classes for configuring the screen
 // size of where your table will overflow.
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
   @include media-breakpoint-down($breakpoint) {

scss/_toasts.scss

@@ -1,3 +1,8 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "vendor/rfs" as *;
+
 .toast {
   // scss-docs-start toast-css-vars
   --#{$prefix}toast-zindex: #{$zindex-toast};

scss/_tooltip.scss

@@ -1,3 +1,10 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/deprecate" as *;
+@use "vendor/rfs" as *;
+@use "mixins/reset-text" as *;
+
 // Base class
 .tooltip {
   // scss-docs-start tooltip-css-vars

scss/_transitions.scss

@@ -1,3 +1,7 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/transition" as *;
+
 .fade {
   @include transition($transition-fade);
 

scss/_type.scss

@@ -1,29 +1,35 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/lists" as *;
+@use "vendor/rfs" as *;
+
 //
 // Headings
 //
-.h1 {
+// mdo-do: remove extend
-  @extend h1;
+// .h1 {
-}
+//   @extend h1;
+// }
 
-.h2 {
+// .h2 {
-  @extend h2;
+//   @extend h2;
-}
+// }
 
-.h3 {
+// .h3 {
-  @extend h3;
+//   @extend h3;
-}
+// }
 
-.h4 {
+// .h4 {
-  @extend h4;
+//   @extend h4;
-}
+// }
 
-.h5 {
+// .h5 {
-  @extend h5;
+//   @extend h5;
-}
+// }
 
-.h6 {
+// .h6 {
-  @extend h6;
+//   @extend h6;
-}
+// }
 
 
 .lead {
@@ -46,11 +52,11 @@
 // Emphasis
 //
 .small {
-  @extend small;
+  // @extend small;
 }
 
 .mark {
-  @extend mark;
+  // @extend mark;
 }
 
 //

scss/_utilities.scss

@@ -1,8 +1,15 @@
+@use "sass:map";
+@use "config" as *;
+@use "colors" as *;
+@use "variables" as *;
+@use "functions" as *;
+@use "maps" 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": (
@@ -353,43 +360,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,
       class: me,
-      values: map-merge($spacers, (auto: auto))
+      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,
       class: ms,
-      values: map-merge($spacers, (auto: auto))
+      values: map.merge($spacers, (auto: auto))
     ),
     // Negative margin utilities
     "negative-margin": (
@@ -579,7 +586,7 @@ $utilities: map-merge(
       local-vars: (
         "text-opacity": 1
       ),
-      values: map-merge(
+      values: map.merge(
         $utilities-text-colors,
         (
           "muted": var(--#{$prefix}secondary-color), // deprecated
@@ -637,7 +644,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)),
@@ -665,7 +672,7 @@ $utilities: map-merge(
       local-vars: (
         "bg-opacity": 1
       ),
-      values: map-merge(
+      values: map.merge(
         $utilities-bg-colors,
         (
           "transparent": transparent,

scss/_variables.scss

@@ -1,309 +1,19 @@
+@use "config" as *;
+@use "colors" as *;
+@use "functions" as *;
+
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
-// Color system
-
-// 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
-
-// fusv-disable
-// scss-docs-start gray-colors-map
-$grays: (
-  "100": $gray-100,
-  "200": $gray-200,
-  "300": $gray-300,
-  "400": $gray-400,
-  "500": $gray-500,
-  "600": $gray-600,
-  "700": $gray-700,
-  "800": $gray-800,
-  "900": $gray-900
-) !default;
-// scss-docs-end gray-colors-map
-// fusv-enable
-
-// 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
-
-// scss-docs-start colors-map
-$colors: (
-  "blue":       $blue,
-  "indigo":     $indigo,
-  "purple":     $purple,
-  "pink":       $pink,
-  "red":        $red,
-  "orange":     $orange,
-  "yellow":     $yellow,
-  "green":      $green,
-  "teal":       $teal,
-  "cyan":       $cyan,
-  "black":      $black,
-  "white":      $white,
-  "gray":       $gray-600,
-  "gray-dark":  $gray-800
-) !default;
-// scss-docs-end colors-map
-
-// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.2 are 3, 4.5 and 7.
-// See https://www.w3.org/TR/WCAG/#contrast-minimum
-$min-contrast-ratio:   4.5 !default;
-
-// Customize the light and dark text colors for use in our color contrast function.
-$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;
-$blue-300: tint-color($blue, 40%) !default;
-$blue-400: tint-color($blue, 20%) !default;
-$blue-500: $blue !default;
-$blue-600: shade-color($blue, 20%) !default;
-$blue-700: shade-color($blue, 40%) !default;
-$blue-800: shade-color($blue, 60%) !default;
-$blue-900: shade-color($blue, 80%) !default;
-
-$indigo-100: tint-color($indigo, 80%) !default;
-$indigo-200: tint-color($indigo, 60%) !default;
-$indigo-300: tint-color($indigo, 40%) !default;
-$indigo-400: tint-color($indigo, 20%) !default;
-$indigo-500: $indigo !default;
-$indigo-600: shade-color($indigo, 20%) !default;
-$indigo-700: shade-color($indigo, 40%) !default;
-$indigo-800: shade-color($indigo, 60%) !default;
-$indigo-900: shade-color($indigo, 80%) !default;
-
-$purple-100: tint-color($purple, 80%) !default;
-$purple-200: tint-color($purple, 60%) !default;
-$purple-300: tint-color($purple, 40%) !default;
-$purple-400: tint-color($purple, 20%) !default;
-$purple-500: $purple !default;
-$purple-600: shade-color($purple, 20%) !default;
-$purple-700: shade-color($purple, 40%) !default;
-$purple-800: shade-color($purple, 60%) !default;
-$purple-900: shade-color($purple, 80%) !default;
-
-$pink-100: tint-color($pink, 80%) !default;
-$pink-200: tint-color($pink, 60%) !default;
-$pink-300: tint-color($pink, 40%) !default;
-$pink-400: tint-color($pink, 20%) !default;
-$pink-500: $pink !default;
-$pink-600: shade-color($pink, 20%) !default;
-$pink-700: shade-color($pink, 40%) !default;
-$pink-800: shade-color($pink, 60%) !default;
-$pink-900: shade-color($pink, 80%) !default;
-
-$red-100: tint-color($red, 80%) !default;
-$red-200: tint-color($red, 60%) !default;
-$red-300: tint-color($red, 40%) !default;
-$red-400: tint-color($red, 20%) !default;
-$red-500: $red !default;
-$red-600: shade-color($red, 20%) !default;
-$red-700: shade-color($red, 40%) !default;
-$red-800: shade-color($red, 60%) !default;
-$red-900: shade-color($red, 80%) !default;
-
-$orange-100: tint-color($orange, 80%) !default;
-$orange-200: tint-color($orange, 60%) !default;
-$orange-300: tint-color($orange, 40%) !default;
-$orange-400: tint-color($orange, 20%) !default;
-$orange-500: $orange !default;
-$orange-600: shade-color($orange, 20%) !default;
-$orange-700: shade-color($orange, 40%) !default;
-$orange-800: shade-color($orange, 60%) !default;
-$orange-900: shade-color($orange, 80%) !default;
-
-$yellow-100: tint-color($yellow, 80%) !default;
-$yellow-200: tint-color($yellow, 60%) !default;
-$yellow-300: tint-color($yellow, 40%) !default;
-$yellow-400: tint-color($yellow, 20%) !default;
-$yellow-500: $yellow !default;
-$yellow-600: shade-color($yellow, 20%) !default;
-$yellow-700: shade-color($yellow, 40%) !default;
-$yellow-800: shade-color($yellow, 60%) !default;
-$yellow-900: shade-color($yellow, 80%) !default;
-
-$green-100: tint-color($green, 80%) !default;
-$green-200: tint-color($green, 60%) !default;
-$green-300: tint-color($green, 40%) !default;
-$green-400: tint-color($green, 20%) !default;
-$green-500: $green !default;
-$green-600: shade-color($green, 20%) !default;
-$green-700: shade-color($green, 40%) !default;
-$green-800: shade-color($green, 60%) !default;
-$green-900: shade-color($green, 80%) !default;
-
-$teal-100: tint-color($teal, 80%) !default;
-$teal-200: tint-color($teal, 60%) !default;
-$teal-300: tint-color($teal, 40%) !default;
-$teal-400: tint-color($teal, 20%) !default;
-$teal-500: $teal !default;
-$teal-600: shade-color($teal, 20%) !default;
-$teal-700: shade-color($teal, 40%) !default;
-$teal-800: shade-color($teal, 60%) !default;
-$teal-900: shade-color($teal, 80%) !default;
-
-$cyan-100: tint-color($cyan, 80%) !default;
-$cyan-200: tint-color($cyan, 60%) !default;
-$cyan-300: tint-color($cyan, 40%) !default;
-$cyan-400: tint-color($cyan, 20%) !default;
-$cyan-500: $cyan !default;
-$cyan-600: shade-color($cyan, 20%) !default;
-$cyan-700: shade-color($cyan, 40%) !default;
-$cyan-800: shade-color($cyan, 60%) !default;
-$cyan-900: shade-color($cyan, 80%) !default;
-
-$blues: (
-  "blue-100": $blue-100,
-  "blue-200": $blue-200,
-  "blue-300": $blue-300,
-  "blue-400": $blue-400,
-  "blue-500": $blue-500,
-  "blue-600": $blue-600,
-  "blue-700": $blue-700,
-  "blue-800": $blue-800,
-  "blue-900": $blue-900
-) !default;
-
-$indigos: (
-  "indigo-100": $indigo-100,
-  "indigo-200": $indigo-200,
-  "indigo-300": $indigo-300,
-  "indigo-400": $indigo-400,
-  "indigo-500": $indigo-500,
-  "indigo-600": $indigo-600,
-  "indigo-700": $indigo-700,
-  "indigo-800": $indigo-800,
-  "indigo-900": $indigo-900
-) !default;
-
-$purples: (
-  "purple-100": $purple-100,
-  "purple-200": $purple-200,
-  "purple-300": $purple-300,
-  "purple-400": $purple-400,
-  "purple-500": $purple-500,
-  "purple-600": $purple-600,
-  "purple-700": $purple-700,
-  "purple-800": $purple-800,
-  "purple-900": $purple-900
-) !default;
-
-$pinks: (
-  "pink-100": $pink-100,
-  "pink-200": $pink-200,
-  "pink-300": $pink-300,
-  "pink-400": $pink-400,
-  "pink-500": $pink-500,
-  "pink-600": $pink-600,
-  "pink-700": $pink-700,
-  "pink-800": $pink-800,
-  "pink-900": $pink-900
-) !default;
-
-$reds: (
-  "red-100": $red-100,
-  "red-200": $red-200,
-  "red-300": $red-300,
-  "red-400": $red-400,
-  "red-500": $red-500,
-  "red-600": $red-600,
-  "red-700": $red-700,
-  "red-800": $red-800,
-  "red-900": $red-900
-) !default;
-
-$oranges: (
-  "orange-100": $orange-100,
-  "orange-200": $orange-200,
-  "orange-300": $orange-300,
-  "orange-400": $orange-400,
-  "orange-500": $orange-500,
-  "orange-600": $orange-600,
-  "orange-700": $orange-700,
-  "orange-800": $orange-800,
-  "orange-900": $orange-900
-) !default;
-
-$yellows: (
-  "yellow-100": $yellow-100,
-  "yellow-200": $yellow-200,
-  "yellow-300": $yellow-300,
-  "yellow-400": $yellow-400,
-  "yellow-500": $yellow-500,
-  "yellow-600": $yellow-600,
-  "yellow-700": $yellow-700,
-  "yellow-800": $yellow-800,
-  "yellow-900": $yellow-900
-) !default;
-
-$greens: (
-  "green-100": $green-100,
-  "green-200": $green-200,
-  "green-300": $green-300,
-  "green-400": $green-400,
-  "green-500": $green-500,
-  "green-600": $green-600,
-  "green-700": $green-700,
-  "green-800": $green-800,
-  "green-900": $green-900
-) !default;
-
-$teals: (
-  "teal-100": $teal-100,
-  "teal-200": $teal-200,
-  "teal-300": $teal-300,
-  "teal-400": $teal-400,
-  "teal-500": $teal-500,
-  "teal-600": $teal-600,
-  "teal-700": $teal-700,
-  "teal-800": $teal-800,
-  "teal-900": $teal-900
-) !default;
-
-$cyans: (
-  "cyan-100": $cyan-100,
-  "cyan-200": $cyan-200,
-  "cyan-300": $cyan-300,
-  "cyan-400": $cyan-400,
-  "cyan-500": $cyan-500,
-  "cyan-600": $cyan-600,
-  "cyan-700": $cyan-700,
-  "cyan-800": $cyan-800,
-  "cyan-900": $cyan-900
-) !default;
-// fusv-enable
-
 // scss-docs-start theme-color-variables
-$primary:       $blue !default;
+$primary:       $purple-500 !default;
 $secondary:     $gray-600 !default;
-$success:       $green !default;
+$success:       $green-500 !default;
-$info:          $cyan !default;
+$info:          $cyan-500 !default;
-$warning:       $yellow !default;
+$warning:       $yellow-500 !default;
-$danger:        $red !default;
+$danger:        $red-500 !default;
 $light:         $gray-100 !default;
 $dark:          $gray-900 !default;
 // scss-docs-end theme-color-variables
@@ -367,25 +77,25 @@ $escaped-characters: (
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-caret:                true !default;
+// $enable-caret:                true !default;
-$enable-rounded:              true !default;
+// $enable-rounded:              true !default;
-$enable-shadows:              false !default;
+// $enable-shadows:              false !default;
-$enable-gradients:            false !default;
+// $enable-gradients:            false !default;
-$enable-transitions:          true !default;
+// $enable-transitions:          true !default;
-$enable-reduced-motion:       true !default;
+// $enable-reduced-motion:       true !default;
-$enable-smooth-scroll:        true !default;
+// $enable-smooth-scroll:        true !default;
-$enable-grid-classes:         true !default;
+// $enable-grid-classes:         true !default;
-$enable-container-classes:    true !default;
+// $enable-container-classes:    true !default;
-$enable-cssgrid:              false !default;
+// $enable-cssgrid:              false !default;
-$enable-button-pointers:      true !default;
+// $enable-button-pointers:      true !default;
-$enable-rfs:                  true !default;
+// $enable-rfs:                  true !default;
-$enable-validation-icons:     true !default;
+// $enable-validation-icons:     true !default;
-$enable-negative-margins:     false !default;
+// $enable-negative-margins:     false !default;
-$enable-deprecation-messages: true !default;
+// $enable-deprecation-messages: true !default;
-$enable-important-utilities:  true !default;
+// $enable-important-utilities:  true !default;
 
-$enable-dark-mode:            true !default;
+// $enable-dark-mode:            true !default;
-$color-mode-type:             data !default; // `data` or `media-query`
+// $color-mode-type:             data !default; // `data` or `media-query`
 
 // Prefix for :root CSS variables
 

scss/bootstrap.scss

@@ -4,53 +4,53 @@
 
 // scss-docs-start import-stack
 // Configuration
-@use "config" as *;
+// @use "config" as *;
 
-@import "functions";
+// @import "functions";
-@import "colors";
+// @import "colors";
-@import "variables";
+// @import "variables";
-@import "variables-dark";
+// @import "variables-dark";
-@import "maps";
+@use "maps";
-@import "mixins";
+@use "mixins";
-@import "utilities";
+// @use "utilities";
 
 // Layout & components
-@import "root";
+@use "root";
-@import "reboot";
+@use "reboot";
-@import "type";
+@use "type";
-@import "images";
+@use "images";
 // @import "containers";
 // @import "grid";
-@import "layout";
+@use "layout";
-@import "tables";
+@use "tables";
-@import "forms";
+@use "forms";
-@import "buttons";
+@use "buttons";
-@import "transitions";
+@use "transitions";
-@import "dropdown";
+@use "dropdown";
-@import "button-group";
+@use "button-group";
-@import "nav";
+@use "nav";
-@import "navbar";
+@use "navbar";
-@import "card";
+@use "card";
-@import "accordion";
+@use "accordion";
-@import "breadcrumb";
+@use "breadcrumb";
-@import "pagination";
+@use "pagination";
-@import "badge";
+@use "badge";
-@import "alert";
+@use "alert";
-@import "progress";
+@use "progress";
-@import "list-group";
+@use "list-group";
-@import "close";
+@use "close";
-@import "toasts";
+@use "toasts";
-@import "modal";
+@use "modal";
-@import "tooltip";
+@use "tooltip";
-@import "popover";
+@use "popover";
-@import "carousel";
+@use "carousel";
-@import "spinners";
+@use "spinners";
-@import "offcanvas";
+@use "offcanvas";
-@import "placeholders";
+@use "placeholders";
 
 // Helpers
-@import "helpers";
+@use "helpers";
 
 // Utilities
-@import "utilities/api";
+@use "utilities/api";
 // scss-docs-end import-stack

scss/forms/_floating-labels.scss

@@ -1,3 +1,8 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/transition" as *;
+
 .form-floating {
   position: relative;
 

scss/forms/_form-check.scss

@@ -1,3 +1,12 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../functions" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/transition" as *;
+@use "../mixins/color-mode" as *;
+
 //
 // Check/radio
 //

scss/forms/_form-control.scss

@@ -1,3 +1,10 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/transition" as *;
+@use "../mixins/gradients" as *;
 //
 // General form controls (plus a few specific high-level interventions)
 //

scss/forms/_form-range.scss

@@ -1,3 +1,10 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/transition" as *;
+@use "../mixins/gradients" as *;
+
 // Range
 //
 // Style range inputs the same across browsers. Vendor-specific rules for pseudo

scss/forms/_form-select.scss

@@ -1,3 +1,11 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/transition" as *;
+@use "../mixins/color-mode" as *;
+
 // Select
 //
 // Replaces the browser default select with a custom one, mostly pulled from

scss/forms/_form-text.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
 //
 // Form text
 //

scss/forms/_input-group.scss

@@ -1,3 +1,9 @@
+@use "sass:map";
+@use "../config" as *;
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/border-radius" as *;
+
 //
 // Base styles
 //
@@ -116,7 +122,7 @@
   }
 
   $validation-messages: "";
-  @each $state in map-keys($form-validation-states) {
+  @each $state in map.keys($form-validation-states) {
     $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
   }
 

scss/forms/_labels.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
 //
 // Labels
 //

scss/forms/_validation.scss

@@ -1,3 +1,9 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+
 // Form validation
 //
 // Provide feedback to users when form field values are valid or invalid. Works
@@ -5,6 +11,171 @@
 // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
 // server-side validation.
 
+// 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
+
+// scss-docs-start form-validation-mixins
+@mixin form-validation-state-selector($state) {
+  @if ($state == "valid" or $state == "invalid") {
+    .was-validated #{if(&, "&", "")}:#{$state},
+    #{if(&, "&", "")}.is-#{$state} {
+      @content;
+    }
+  } @else {
+    #{if(&, "&", "")}.is-#{$state} {
+      @content;
+    }
+  }
+}
+
+@mixin form-validation-state(
+  $state,
+  $color,
+  $icon,
+  $tooltip-color: color-contrast($color),
+  $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
+) {
+  .#{$state}-feedback {
+    display: none;
+    width: 100%;
+    margin-top: $form-feedback-margin-top;
+    @include font-size($form-feedback-font-size);
+    font-style: $form-feedback-font-style;
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+    margin-top: .1rem;
+    @include font-size($form-feedback-tooltip-font-size);
+    line-height: $form-feedback-tooltip-line-height;
+    color: $tooltip-color;
+    background-color: $tooltip-bg-color;
+    @include border-radius($form-feedback-tooltip-border-radius);
+  }
+
+  @include form-validation-state-selector($state) {
+    ~ .#{$state}-feedback,
+    ~ .#{$state}-tooltip {
+      display: block;
+    }
+  }
+
+  .form-control {
+    @include form-validation-state-selector($state) {
+      border-color: $border-color;
+
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-image: escape-svg($icon);
+        background-repeat: no-repeat;
+        background-position: right $input-height-inner-quarter center;
+        background-size: $input-height-inner-half $input-height-inner-half;
+      }
+
+      &:focus {
+        border-color: $border-color;
+        @if $enable-shadows {
+          @include box-shadow($input-box-shadow, $focus-box-shadow);
+        } @else {
+          // Avoid using mixin so we can pass custom focus shadow properly
+          box-shadow: $focus-box-shadow;
+        }
+      }
+    }
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  textarea.form-control {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+      }
+    }
+  }
+
+  .form-select {
+    @include form-validation-state-selector($state) {
+      border-color: $border-color;
+
+      @if $enable-validation-icons {
+        &:not([multiple]):not([size]),
+        &:not([multiple])[size="1"] {
+          --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
+          padding-right: $form-select-feedback-icon-padding-end;
+          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+        }
+      }
+
+      &:focus {
+        border-color: $border-color;
+        @if $enable-shadows {
+          @include box-shadow($form-select-box-shadow, $focus-box-shadow);
+        } @else {
+          // Avoid using mixin so we can pass custom focus shadow properly
+          box-shadow: $focus-box-shadow;
+        }
+      }
+    }
+  }
+
+  .form-control-color {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        width: add($form-color-width, $input-height-inner);
+      }
+    }
+  }
+
+  .form-check-input {
+    @include form-validation-state-selector($state) {
+      border-color: $border-color;
+
+      &:checked {
+        background-color: $color;
+      }
+
+      &:focus {
+        box-shadow: $focus-box-shadow;
+      }
+
+      ~ .form-check-label {
+        color: $color;
+      }
+    }
+  }
+  .form-check-inline .form-check-input {
+    ~ .#{$state}-feedback {
+      margin-left: .5em;
+    }
+  }
+
+  .input-group {
+    > .form-control:not(:focus),
+    > .form-select:not(:focus),
+    > .form-floating:not(:focus-within) {
+      @include form-validation-state-selector($state) {
+        @if $state == "valid" {
+          z-index: 3;
+        } @else if $state == "invalid" {
+          z-index: 4;
+        }
+      }
+    }
+  }
+}
+// scss-docs-end form-validation-mixins
+
+
 // scss-docs-start form-validation-states-loop
 @each $state, $data in $form-validation-states {
   @include form-validation-state($state, $data...);

scss/forms/index.scss

@@ -0,0 +1,9 @@
+@forward "labels";
+@forward "form-text";
+@forward "form-control";
+@forward "form-select";
+@forward "form-check";
+@forward "form-range";
+@forward "floating-labels";
+@forward "input-group";
+@forward "validation";

scss/helpers/_clearfix.scss

@@ -1,3 +1,5 @@
+@use "../mixins/clearfix" as *;
+
 .clearfix {
   @include clearfix();
 }

scss/helpers/_color-bg.scss

@@ -1,3 +1,7 @@
+@use "../config" as *;
+@use "../colors" as *;
+@use "../variables" as *;
+
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .text-bg-#{$color} {

scss/helpers/_colored-links.scss

@@ -1,3 +1,7 @@
+@use "../config" as *;
+@use "../colors" as *;
+@use "../variables" as *;
+
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .link-#{$color} {

scss/helpers/_focus-ring.scss

@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 .focus-ring:focus {
   outline: 0;
   // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values

scss/helpers/_icon-link.scss

@@ -1,3 +1,6 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../mixins/transition" as *;
 .icon-link {
   display: inline-flex;
   gap: $icon-link-gap;

scss/helpers/_position.scss

@@ -1,3 +1,8 @@
+@use "sass:map";
+@use "../config" as *;
+@use "../variables" as *;
+@use "../layout/breakpoints" as *;
+
 // Shorthand
 
 .fixed-top {
@@ -17,7 +22,7 @@
 }
 
 // Responsive sticky top and bottom
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

scss/helpers/_ratio.scss

@@ -1,3 +1,7 @@
+@use "../config" as *;
+@use "../variables" as *;
+// mdo-do: remve for utilities
+
 // Credit: Nicolas Gallagher and SUIT CSS.
 
 .ratio {

scss/helpers/_stretched-link.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 //
 // Stretched link
 //

scss/helpers/_text-truncation.scss

@@ -1,4 +1,4 @@
-//
+@use "../mixins/text-truncate" as *;
 // Text truncation
 //
 

scss/helpers/_visually-hidden.scss

@@ -1,3 +1,5 @@
+@use "../mixins/visually-hidden" as *;
+
 //
 // Visually hidden
 //

scss/helpers/_vr.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .vr {
   display: inline-block;
   align-self: stretch;

scss/layout/_breakpoints.scss

@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "../config" as *;
+
+
 // Breakpoint viewport sizes and media queries.
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
@@ -14,7 +18,7 @@
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
 //    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
   @if not $n {
     @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
@@ -27,7 +31,7 @@
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-  $min: map-get($breakpoints, $name);
+  $min: map.get($breakpoints, $name);
   @return if($min != 0, $min, null);
 }
 
@@ -41,7 +45,7 @@
 //    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-  $max: map-get($breakpoints, $name);
+  $max: map.get($breakpoints, $name);
   @return if($max and $max > 0, $max - .02, null);
 }
 

scss/mixins/_alert.scss

@@ -1,18 +0,0 @@
-@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
-
-// scss-docs-start alert-variant-mixin
-@mixin alert-variant($background, $border, $color) {
-  --#{$prefix}alert-color: #{$color};
-  --#{$prefix}alert-bg: #{$background};
-  --#{$prefix}alert-border-color: #{$border};
-  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
-
-  @if $enable-gradients {
-    background-image: var(--#{$prefix}gradient);
-  }
-
-  .alert-link {
-    color: var(--#{$prefix}alert-link-color);
-  }
-}
-// scss-docs-end alert-variant-mixin

scss/mixins/_border-radius.scss

@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 // stylelint-disable property-disallowed-list
 // Single side border-radius
 

scss/mixins/_box-shadow.scss

@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 @mixin box-shadow($shadow...) {
   @if $enable-shadows {
     $result: ();

scss/mixins/_buttons.scss

@@ -1,70 +0,0 @@
-// 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(
-  $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};
-  --#{$prefix}btn-hover-color: #{$hover-color};
-  --#{$prefix}btn-hover-bg: #{$hover-background};
-  --#{$prefix}btn-hover-border-color: #{$hover-border};
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
-  --#{$prefix}btn-active-color: #{$active-color};
-  --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$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};
-}
-// scss-docs-end btn-variant-mixin
-
-// scss-docs-start btn-outline-variant-mixin
-@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: #{$color-hover};
-  --#{$prefix}btn-hover-bg: #{$active-background};
-  --#{$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};
-  --#{$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-size-mixin
-@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --#{$prefix}btn-padding-y: #{$padding-y};
-  --#{$prefix}btn-padding-x: #{$padding-x};
-  @include rfs($font-size, --#{$prefix}btn-font-size);
-  --#{$prefix}btn-border-radius: #{$border-radius};
-}
-// scss-docs-end btn-size-mixin

scss/mixins/_caret.scss

@@ -1,3 +1,6 @@
+@use "../config" as *;
+@use "../variables" as *;
+
 // scss-docs-start caret-mixins
 @mixin caret-down($width: $caret-width) {
   border-top: $width solid;

scss/mixins/_color-mode.scss

@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 // scss-docs-start color-mode-mixin
 @mixin color-mode($mode: light, $root: false) {
   @if $color-mode-type == "media-query" {

scss/mixins/_deprecate.scss

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

scss/mixins/_gradients.scss

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

scss/mixins/_list-group.scss

@@ -1,26 +0,0 @@
-@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
-
-// List Groups
-
-// scss-docs-start list-group-mixin
-@mixin list-group-item-variant($state, $background, $color) {
-  .list-group-item-#{$state} {
-    color: $color;
-    background-color: $background;
-
-    &.list-group-item-action {
-      &:hover,
-      &:focus {
-        color: $color;
-        background-color: shade-color($background, 10%);
-      }
-
-      &.active {
-        color: $white;
-        background-color: $color;
-        border-color: $color;
-      }
-    }
-  }
-}
-// scss-docs-end list-group-mixin

scss/mixins/_pagination.scss

@@ -1,10 +0,0 @@
-// Pagination
-
-// scss-docs-start pagination-mixin
-@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --#{$prefix}pagination-padding-x: #{$padding-x};
-  --#{$prefix}pagination-padding-y: #{$padding-y};
-  @include rfs($font-size, --#{$prefix}pagination-font-size);
-  --#{$prefix}pagination-border-radius: #{$border-radius};
-}
-// scss-docs-end pagination-mixin

scss/mixins/_reset-text.scss

@@ -1,3 +1,6 @@
+@use "../config" as *;
+@use "../variables" as *;
+
 @mixin reset-text {
   font-family: $font-family-base;
   // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.

scss/mixins/_table-variants.scss

@@ -1,24 +0,0 @@
-// 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));
-
-    --#{$prefix}table-color: #{$color};
-    --#{$prefix}table-bg: #{$background};
-    --#{$prefix}table-border-color: #{$table-border-color};
-    --#{$prefix}table-striped-bg: #{$striped-bg};
-    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
-    --#{$prefix}table-active-bg: #{$active-bg};
-    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
-    --#{$prefix}table-hover-bg: #{$hover-bg};
-    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
-
-    color: var(--#{$prefix}table-color);
-    border-color: var(--#{$prefix}table-border-color);
-  }
-}
-// scss-docs-end table-variant

scss/mixins/_transition.scss

@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 // stylelint-disable property-disallowed-list
 @mixin transition($transition...) {
   @if length($transition) == 0 {

scss/mixins/_utilities.scss

@@ -1,7 +1,10 @@
+@use "sass:map";
+@use "../config" as *;
+
 // 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" {
@@ -9,7 +12,7 @@
   }
 
   @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" {
@@ -17,21 +20,21 @@
     }
 
     // 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), 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);
 
     // 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,9 +47,9 @@
       }
     }
 
-    $is-css-var: map-get($utility, css-var);
+    $is-css-var: map.get($utility, css-var);
-    $is-local-vars: map-get($utility, local-vars);
+    $is-local-vars: map.get($utility, local-vars);
-    $is-rtl: map-get($utility, rtl);
+    $is-rtl: map.get($utility, rtl);
 
     @if $value != null {
       @if $is-rtl == false {

scss/mixins/index.scss

@@ -0,0 +1,34 @@
+// Toggles
+//
+// Used in conjunction with global variables to enable certain theme features.
+
+// Vendor
+// @forward "vendor/rfs";
+
+// Deprecate
+@forward "deprecate";
+
+// Helpers
+@forward "color-mode";
+@forward "color-scheme";
+@forward "image";
+@forward "resize";
+@forward "visually-hidden";
+@forward "reset-text";
+@forward "text-truncate";
+
+// Utilities
+@forward "utilities";
+
+// Components
+@forward "backdrop";
+@forward "caret";
+
+// Skins
+@forward "border-radius";
+@forward "box-shadow";
+@forward "gradients";
+@forward "transition";
+
+// Layout
+@forward "clearfix";

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

@@ -1,5 +1,6 @@
 // stylelint-disable selector-attribute-quotes
 
+@import "../../colors";
 @import "../../functions";
 @import "../../variables";
 @import "../../variables-dark";

scss/utilities/_api.scss

@@ -1,5 +1,13 @@
+@use "sass:map";
+@use "../config" as *;
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "../layout/breakpoints" as *;
+@use "../mixins/utilities" as *;
+@use "../utilities" 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 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 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 type-of($utility) == "map" and map.get($utility, print) == true {
       @include generate-utility($utility, "-print");
     }
   }

scss/vendor/_rfs.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // stylelint-disable scss/dimension-no-non-numeric-values
 
 // SCSS RFS mixin
@@ -88,8 +90,8 @@ $rfs-base-value-unit: unit($rfs-base-value);
     "em": 1em,
     "%": 1%
   );
-  @if ($dividend-unit != $divisor-unit and map-has-key($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);
+    $result: $result * map.get($unit-map, $dividend-unit);
   }
   @return $result;
 }

site/src/scss/_colors.scss

@@ -1,8 +1,14 @@
+@use "sass:map";
+@use "../../../scss/config" as *;
+@use "../../../scss/colors" as *;
+@use "../../../scss/layout/breakpoints" as *;
+@use "../../../scss/functions" as *;
+
 //
 // Docs color palette classes
 //
 
-@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
+@each $color, $value in map.merge($colors, ("gray-500": $gray-500)) {
   .swatch-#{$color} {
     color: color-contrast($value);
     background-color: #{$value};

site/src/scss/_masthead.scss

@@ -1,3 +1,12 @@
+@use "../../../scss/config" as *;
+@use "../../../scss/colors" as *;
+@use "../../../scss/variables" as *;
+@use "../../../scss/vendor/rfs" as *;
+@use "../../../scss/layout/breakpoints" as *;
+@use "../../../scss/mixins/border-radius" as *;
+@use "../../../scss/mixins/transition" as *;
+@use "../../../scss/mixins/color-mode" as *;
+
 .bd-masthead {
   --bd-pink-rgb: #{to-rgb($pink)};
   padding: 3rem 0;