diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 98de068484..fab27c7429 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -1,4 +1,11 @@
 @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
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 4c63f5c6c0..9793b4846a 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -1,4 +1,6 @@
 @use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
 
 //
 // Base styles
diff --git a/scss/_badge.scss b/scss/_badge.scss
index 161b0a5fef..0abaff6523 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -1,4 +1,8 @@
 @use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/gradients" as *;
+@use "vendor/rfs" as *;
 
 // Base class
 //
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 53b0b2cc87..27e1905305 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -1,4 +1,7 @@
 @use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "vendor/rfs" as *;
 
 .breadcrumb {
   // scss-docs-start breadcrumb-css-vars
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 91cc1065ac..04b4c68272 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -1,4 +1,7 @@
 @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,
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 382635d815..34f08cb55a 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -1,4 +1,84 @@
 @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
diff --git a/scss/_card.scss b/scss/_card.scss
index 459af6b2d6..fd937a5ede 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -1,4 +1,8 @@
 @use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "layout/breakpoints" as *;
 
 //
 // Base styles
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index e59e909b67..68f1e54f33 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -1,4 +1,10 @@
 @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:
 //
diff --git a/scss/_close.scss b/scss/_close.scss
index 54285c3aa1..98140fb02d 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -1,4 +1,7 @@
 @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.
diff --git a/scss/_config.scss b/scss/_config.scss
index 1be6564dc7..9f82a94002 100644
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -4,12 +4,26 @@
 
 $prefix: bs- !default;
 
-$enable-container-classes: true !default;
-$enable-rounded: true !default;
-$enable-shadows: true !default;
-$enable-gradients: false !default;
-$enable-transitions: true !default;
-$enable-reduced-motion: false !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;
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index b0f8a1146f..d51482513c 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -1,4 +1,12 @@
 @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,
diff --git a/scss/_images.scss b/scss/_images.scss
index 9d971f402f..f2858f6585 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -1,4 +1,9 @@
 @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)
 //
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index cf6e2e391e..7132b38e4a 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -1,5 +1,9 @@
 @use "config" as *;
 @use "colors" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "vendor/rfs" as *;
+@use "layout/breakpoints" as *;
 
 // Base class
 //
diff --git a/scss/_maps.scss b/scss/_maps.scss
index 81ac47475e..8deaa312e2 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -1,5 +1,7 @@
 @use "config" as *;
 @use "colors" as *;
+@use "functions" as *;
+@use "variables" as *;
 
 // Re-assigned maps
 //
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
deleted file mode 100644
index c89a397456..0000000000
--- a/scss/_mixins.scss
+++ /dev/null
@@ -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";
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 1eef9aead2..4de96aec9a 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -1,4 +1,12 @@
 @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
 
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 737b36c8a4..a8b05b7697 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -1,4 +1,9 @@
 @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
 //
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 479f89c334..058f205278 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -1,4 +1,13 @@
 @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
 //
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 0c814537d2..efffc14a7d 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -1,4 +1,9 @@
 @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
 
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index b43d7798e0..a06f1b60c9 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -1,4 +1,10 @@
 @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) {
diff --git a/scss/_placeholders.scss b/scss/_placeholders.scss
index 2fa6d90c51..f615f0a180 100644
--- a/scss/_placeholders.scss
+++ b/scss/_placeholders.scss
@@ -1,5 +1,6 @@
 @use "config" as *;
 @use "colors" as *;
+@use "variables" as *;
 
 .placeholder {
   display: inline-block;
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 9c4e7838ab..517d5f3acb 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -1,4 +1,9 @@
 @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
diff --git a/scss/_progress.scss b/scss/_progress.scss
index 622e2a0e62..f577f7074d 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -1,5 +1,10 @@
 @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
 
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 4bab6641a3..35a789354f 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -1,5 +1,8 @@
 @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
 
diff --git a/scss/_root.scss b/scss/_root.scss
index f51f6c3e62..2c15cdd1d6 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,5 +1,9 @@
 @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"] {
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index b940f600d7..c13caee16b 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -1,4 +1,5 @@
 @use "config" as *;
+@use "variables" as *;
 
 //
 // Rotating border
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 19cde433f4..bb1fa82392 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -1,5 +1,8 @@
 @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) {
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index cc1b785e55..b248f2d828 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -1,4 +1,7 @@
 @use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "vendor/rfs" as *;
 
 .toast {
   // scss-docs-start toast-css-vars
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 0682661cbe..9a30c75742 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -1,4 +1,9 @@
 @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 {
diff --git a/scss/_transitions.scss b/scss/_transitions.scss
index 989f590b2a..de779ea6b2 100644
--- a/scss/_transitions.scss
+++ b/scss/_transitions.scss
@@ -1,4 +1,6 @@
 @use "config" as *;
+@use "variables" as *;
+@use "mixins/transition" as *;
 
 .fade {
   @include transition($transition-fade);
diff --git a/scss/_type.scss b/scss/_type.scss
index e7716cb470..f13ea3863c 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -1,31 +1,35 @@
 @use "config" as *;
+@use "variables" as *;
+@use "mixins/lists" as *;
+@use "vendor/rfs" as *;
 
 //
 // Headings
 //
-.h1 {
-  @extend h1;
-}
+// mdo-do: remove extend
+// .h1 {
+//   @extend h1;
+// }
 
-.h2 {
-  @extend h2;
-}
+// .h2 {
+//   @extend h2;
+// }
 
-.h3 {
-  @extend h3;
-}
+// .h3 {
+//   @extend h3;
+// }
 
-.h4 {
-  @extend h4;
-}
+// .h4 {
+//   @extend h4;
+// }
 
-.h5 {
-  @extend h5;
-}
+// .h5 {
+//   @extend h5;
+// }
 
-.h6 {
-  @extend h6;
-}
+// .h6 {
+//   @extend h6;
+// }
 
 
 .lead {
@@ -48,11 +52,11 @@
 // Emphasis
 //
 .small {
-  @extend small;
+  // @extend small;
 }
 
 .mark {
-  @extend mark;
+  // @extend mark;
 }
 
 //
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index bef10b822d..602085e527 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -1,5 +1,8 @@
 @use "config" as *;
 @use "colors" as *;
+@use "variables" as *;
+@use "functions" as *;
+@use "maps" as *;
 
 // Utilities
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6c6655f20a..bfce0c4dce 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -77,25 +77,25 @@ $escaped-characters: (
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$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-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`
+// $enable-dark-mode:            true !default;
+// $color-mode-type:             data !default; // `data` or `media-query`
 
 // Prefix for :root CSS variables
 
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 742aa3bb69..5b4d9e98fa 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -6,51 +6,51 @@
 // Configuration
 // @use "config" as *;
 
-@import "functions";
+// @import "functions";
 // @import "colors";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-@import "mixins";
-@import "utilities";
+// @import "variables";
+// @import "variables-dark";
+@use "maps";
+@use "mixins";
+// @use "utilities";
 
 // Layout & components
-@import "root";
-@import "reboot";
-@import "type";
-@import "images";
+@use "root";
+@use "reboot";
+@use "type";
+@use "images";
 // @import "containers";
 // @import "grid";
-@import "layout";
-@import "tables";
-@import "forms";
-@import "buttons";
-@import "transitions";
-@import "dropdown";
-@import "button-group";
-@import "nav";
-@import "navbar";
-@import "card";
-@import "accordion";
-@import "breadcrumb";
-@import "pagination";
-@import "badge";
-@import "alert";
-@import "progress";
-@import "list-group";
-@import "close";
-@import "toasts";
-@import "modal";
-@import "tooltip";
-@import "popover";
-@import "carousel";
-@import "spinners";
-@import "offcanvas";
-@import "placeholders";
+@use "layout";
+@use "tables";
+@use "forms";
+@use "buttons";
+@use "transitions";
+@use "dropdown";
+@use "button-group";
+@use "nav";
+@use "navbar";
+@use "card";
+@use "accordion";
+@use "breadcrumb";
+@use "pagination";
+@use "badge";
+@use "alert";
+@use "progress";
+@use "list-group";
+@use "close";
+@use "toasts";
+@use "modal";
+@use "tooltip";
+@use "popover";
+@use "carousel";
+@use "spinners";
+@use "offcanvas";
+@use "placeholders";
 
 // Helpers
-@import "helpers";
+@use "helpers";
 
 // Utilities
-@import "utilities/api";
+@use "utilities/api";
 // scss-docs-end import-stack
diff --git a/scss/helpers/_clearfix.scss b/scss/helpers/_clearfix.scss
index e92522a94d..e2d9a81f32 100644
--- a/scss/helpers/_clearfix.scss
+++ b/scss/helpers/_clearfix.scss
@@ -1,3 +1,5 @@
+@use "../mixins/clearfix" as *;
+
 .clearfix {
   @include clearfix();
 }
diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss
index 8c64fcb55f..763c96ff7b 100644
--- a/scss/helpers/_color-bg.scss
+++ b/scss/helpers/_color-bg.scss
@@ -1,5 +1,6 @@
 @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 {
diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index ee0cbb550b..e1af109bde 100644
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -1,5 +1,6 @@
 @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 {
diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss
index 32db53207e..c028a3b1cb 100644
--- a/scss/helpers/_icon-link.scss
+++ b/scss/helpers/_icon-link.scss
@@ -1,5 +1,6 @@
 @use "../config" as *;
-
+@use "../variables" as *;
+@use "../mixins/transition" as *;
 .icon-link {
   display: inline-flex;
   gap: $icon-link-gap;
diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss
index 99c1c8c108..f744bbbfaf 100644
--- a/scss/helpers/_position.scss
+++ b/scss/helpers/_position.scss
@@ -1,4 +1,6 @@
 @use "../config" as *;
+@use "../variables" as *;
+@use "../layout/breakpoints" as *;
 
 // Shorthand
 
diff --git a/scss/helpers/_ratio.scss b/scss/helpers/_ratio.scss
index 444b41af4f..ba13752d7a 100644
--- a/scss/helpers/_ratio.scss
+++ b/scss/helpers/_ratio.scss
@@ -1,5 +1,5 @@
 @use "../config" as *;
-
+@use "../variables" as *;
 // mdo-do: remve for utilities
 
 // Credit: Nicolas Gallagher and SUIT CSS.
diff --git a/scss/helpers/_stretched-link.scss b/scss/helpers/_stretched-link.scss
index 71a1c755af..ec283094d0 100644
--- a/scss/helpers/_stretched-link.scss
+++ b/scss/helpers/_stretched-link.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 //
 // Stretched link
 //
diff --git a/scss/helpers/_text-truncation.scss b/scss/helpers/_text-truncation.scss
index 6421dac9a8..082fa0cdac 100644
--- a/scss/helpers/_text-truncation.scss
+++ b/scss/helpers/_text-truncation.scss
@@ -1,4 +1,4 @@
-//
+@use "../mixins/text-truncate" as *;
 // Text truncation
 //
 
diff --git a/scss/helpers/_visually-hidden.scss b/scss/helpers/_visually-hidden.scss
index 4760ff03d1..ad6bf08845 100644
--- a/scss/helpers/_visually-hidden.scss
+++ b/scss/helpers/_visually-hidden.scss
@@ -1,3 +1,5 @@
+@use "../mixins/visually-hidden" as *;
+
 //
 // Visually hidden
 //
diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss
index b6f9d42cb1..15744ab8f4 100644
--- a/scss/helpers/_vr.scss
+++ b/scss/helpers/_vr.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .vr {
   display: inline-block;
   align-self: stretch;
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
deleted file mode 100644
index fb524af1c2..0000000000
--- a/scss/mixins/_alert.scss
+++ /dev/null
@@ -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
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
deleted file mode 100644
index 7bffd4486f..0000000000
--- a/scss/mixins/_buttons.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-@use "../config" as *;
-@use "../colors" 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
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
index be731165bd..802a95ea8d 100644
--- a/scss/mixins/_caret.scss
+++ b/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;
diff --git a/scss/mixins/_deprecate.scss b/scss/mixins/_deprecate.scss
index df070bc596..77fef52c8d 100644
--- a/scss/mixins/_deprecate.scss
+++ b/scss/mixins/_deprecate.scss
@@ -1,3 +1,4 @@
+@use "../config" as *;
 // Deprecate mixin
 //
 // This mixin can be used to deprecate mixins or functions.
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
deleted file mode 100644
index 7274dd0637..0000000000
--- a/scss/mixins/_list-group.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@use "../config" as *;
-@use "../colors" as *;
-
-@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
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
deleted file mode 100644
index 0d657964fb..0000000000
--- a/scss/mixins/_pagination.scss
+++ /dev/null
@@ -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
diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss
index f5bd1afec2..8c43cce081 100644
--- a/scss/mixins/_reset-text.scss
+++ b/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.
diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
deleted file mode 100644
index 5fe1b9b20d..0000000000
--- a/scss/mixins/_table-variants.scss
+++ /dev/null
@@ -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
diff --git a/scss/mixins/index.scss b/scss/mixins/index.scss
new file mode 100644
index 0000000000..b34adbd63c
--- /dev/null
+++ b/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";
diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss
index d246fe937e..dd81196cec 100644
--- a/scss/utilities/_api.scss
+++ b/scss/utilities/_api.scss
@@ -1,4 +1,9 @@
 @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) {
diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss
index 7ceab46f2b..01fd5e2e3a 100644
--- a/site/src/scss/_masthead.scss
+++ b/site/src/scss/_masthead.scss
@@ -1,3 +1,4 @@
+@use "../../../scss/config" as *;
 @use "../../../scss/colors" as *;
 @use "../../../scss/variables" as *;
 @use "../../../scss/vendor/rfs" as *;