From: Mark Otto <markdotto@gmail.com>
Date: Sat, 31 May 2025 05:20:50 +0000 (-0700)
Subject: Migrate some Sass vars to be local to specific stylesheets
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=e929e0cdcf819007a71d70aa137f5f89558ba97c;p=thirdparty%2Fbootstrap.git

Migrate some Sass vars to be local to specific stylesheets

- Update ScssDocs tags where appropriate
- Removed a null Sass variable, $table-th-font-weight
- Removed $table-caption-color because we put table Sass vars in the _tables.scss file away from the _reboot.scss file
- Fix docs styles as needed
---

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 4f1a190e1a..eccbd4610e 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -7,9 +7,46 @@
 @use "mixins/box-shadow" as *;
 @use "mixins/color-mode" as *;
 
+// scss-docs-start accordion-variables
+$accordion-padding-y:                     1rem !default;
+$accordion-padding-x:                     1.25rem !default;
+$accordion-color:                         var(--#{$prefix}body-color) !default;
+$accordion-bg:                            var(--#{$prefix}body-bg) !default;
+$accordion-border-width:                  var(--#{$prefix}border-width) !default;
+$accordion-border-color:                  var(--#{$prefix}border-color) !default;
+$accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
+$accordion-inner-border-radius:           calc($accordion-border-radius - $accordion-border-width) !default;
+
+$accordion-body-padding-y:                $accordion-padding-y !default;
+$accordion-body-padding-x:                $accordion-padding-x !default;
+
+$accordion-button-padding-y:              $accordion-padding-y !default;
+$accordion-button-padding-x:              $accordion-padding-x !default;
+$accordion-button-color:                  var(--#{$prefix}body-color) !default;
+$accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
+$accordion-transition:                    $btn-transition, border-radius .15s ease !default;
+$accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle) !default;
+$accordion-button-active-color:           var(--#{$prefix}primary-text) !default;
+
+// fusv-disable
+$accordion-button-focus-border-color:     $input-focus-border-color !default; // Deprecated in v5.3.3
+// fusv-enable
+$accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
+
+$accordion-icon-width:                    1.25rem !default;
+$accordion-icon-color:                    var(--#{$prefix}body-color) !default;
+$accordion-icon-active-color:             var(--#{$prefix}primary-text-emphasis) !default;
+$accordion-icon-transition:               transform .2s ease-in-out !default;
+$accordion-icon-transform:                rotate(-180deg) !default;
+
+$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
+$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
+// scss-docs-end accordion-variables
+
 //
 // Base styles
 //
+
 @layer components {
   .accordion {
     // scss-docs-start accordion-css-vars
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 68d57fa9a6..65ce136a87 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -4,6 +4,16 @@
 @use "theme" as *;
 @use "mixins/border-radius" as *;
 
+// scss-docs-start alert-variables
+$alert-padding-y:               $spacer !default;
+$alert-padding-x:               $spacer !default;
+$alert-margin-bottom:           1rem !default;
+$alert-border-radius:           var(--#{$prefix}border-radius) !default;
+$alert-link-font-weight:        $font-weight-bold !default;
+$alert-border-width:            var(--#{$prefix}border-width) !default;
+$alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+// scss-docs-end alert-variables
+
 //
 // Base styles
 //
diff --git a/scss/_badge.scss b/scss/_badge.scss
index 0f7f55c8c9..d1a5cfb67b 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -1,9 +1,20 @@
 @use "config" as *;
 @use "variables" as *;
+@use "colors" as *;
 @use "mixins/border-radius" as *;
 @use "mixins/gradients" as *;
 @use "vendor/rfs" as *;
 
+// scss-docs-start badge-variables
+$badge-font-size:                   .75em !default;
+$badge-font-weight:                 $font-weight-bold !default;
+$badge-color:                       $white !default;
+$badge-padding-y:                   .35em !default;
+$badge-padding-x:                   .65em !default;
+$badge-border-radius:               var(--#{$prefix}border-radius) !default;
+// scss-docs-end badge-variables
+
+
 // Base class
 //
 // Requires one of the contextual, color modifier classes for `color` and
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index be8e4623f0..b773213515 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -3,6 +3,20 @@
 @use "mixins/border-radius" as *;
 @use "vendor/rfs" as *;
 
+// scss-docs-start breadcrumb-variables
+$breadcrumb-font-size:              null !default;
+$breadcrumb-padding-y:              0 !default;
+$breadcrumb-padding-x:              0 !default;
+$breadcrumb-item-padding-x:         .5rem !default;
+$breadcrumb-margin-bottom:          1rem !default;
+$breadcrumb-bg:                     null !default;
+$breadcrumb-divider-color:          var(--#{$prefix}secondary-color) !default;
+$breadcrumb-active-color:           var(--#{$prefix}secondary-color) !default;
+$breadcrumb-divider:                quote("/") !default;
+$breadcrumb-divider-flipped:        $breadcrumb-divider !default;
+$breadcrumb-border-radius:          null !default;
+// scss-docs-end breadcrumb-variables
+
 @layer components {
   .breadcrumb {
     // scss-docs-start breadcrumb-css-vars
diff --git a/scss/_card.scss b/scss/_card.scss
index 1519502d61..386c23c8a5 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -4,6 +4,28 @@
 @use "mixins/box-shadow" as *;
 @use "layout/breakpoints" as *;
 
+// scss-docs-start card-variables
+$card-spacer-y:                     $spacer !default;
+$card-spacer-x:                     $spacer !default;
+$card-title-spacer-y:               $spacer * .5 !default;
+$card-title-color:                  null !default;
+$card-subtitle-color:               null !default;
+$card-border-width:                 var(--#{$prefix}border-width) !default;
+$card-border-color:                 var(--#{$prefix}border-color-translucent) !default;
+$card-border-radius:                var(--#{$prefix}border-radius) !default;
+$card-box-shadow:                   null !default;
+$card-inner-border-radius:          calc($card-border-radius - $card-border-width) !default;
+$card-cap-padding-y:                $card-spacer-y * .5 !default;
+$card-cap-padding-x:                $card-spacer-x !default;
+$card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03) !default;
+$card-cap-color:                    null !default;
+$card-height:                       null !default;
+$card-color:                        null !default;
+$card-bg:                           var(--#{$prefix}body-bg) !default;
+$card-img-overlay-padding:          $spacer !default;
+$card-group-margin:                 $grid-gutter-width * .5 !default;
+// scss-docs-end card-variables
+
 //
 // Base styles
 //
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index be70911447..81e9c3f577 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -1,11 +1,53 @@
 @use "config" as *;
 @use "variables" as *;
+@use "colors" as *;
 @use "mixins/transition" as *;
 @use "mixins/clearfix" as *;
 @use "mixins/gradients" as *;
 @use "mixins/color-mode" as *;
 @use "vendor/rfs" as *;
 
+// scss-docs-start carousel-variables
+$carousel-control-color:             $white !default;
+$carousel-control-width:             15% !default;
+$carousel-control-opacity:           .5 !default;
+$carousel-control-hover-opacity:     .9 !default;
+$carousel-control-transition:        opacity .15s ease !default;
+$carousel-control-icon-filter:       null !default;
+
+$carousel-indicator-width:           30px !default;
+$carousel-indicator-height:          3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer:          3px !default;
+$carousel-indicator-opacity:         .5 !default;
+$carousel-indicator-active-bg:       $white !default;
+$carousel-indicator-active-opacity:  1 !default;
+$carousel-indicator-transition:      opacity .6s ease !default;
+
+$carousel-caption-width:             70% !default;
+$carousel-caption-color:             $white !default;
+$carousel-caption-padding-y:         1.25rem !default;
+$carousel-caption-spacer:            1.25rem !default;
+
+$carousel-control-icon-width:        2rem !default;
+
+$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
+$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !default;
+
+$carousel-transition-duration:       .6s !default;
+$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+// scss-docs-end carousel-variables
+
+// scss-docs-start carousel-dark-variables
+$carousel-dark-indicator-active-bg:  $black !default; // Deprecated in v5.3.4
+$carousel-dark-caption-color:        $black !default; // Deprecated in v5.3.4
+$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default; // Deprecated in v5.3.4
+
+$carousel-indicator-active-bg-dark:   $carousel-dark-indicator-active-bg !default;
+$carousel-caption-color-dark:         $carousel-dark-caption-color !default;
+$carousel-control-icon-filter-dark:   $carousel-dark-control-icon-filter !default;
+// scss-docs-end carousel-dark-variables
+
 // Notes on the classes:
 //
 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
diff --git a/scss/_close.scss b/scss/_close.scss
index d42018a61a..c378c75fa4 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -1,8 +1,27 @@
 @use "config" as *;
 @use "variables" as *;
+@use "colors" as *;
 @use "mixins/border-radius" as *;
 @use "mixins/color-mode" as *;
 
+// scss-docs-start close-variables
+$btn-close-width:            1em !default;
+$btn-close-height:           $btn-close-width !default;
+$btn-close-padding-x:        .25em !default;
+$btn-close-padding-y:        $btn-close-padding-x !default;
+$btn-close-color:            $black !default;
+$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
+$btn-close-focus-shadow:     $focus-ring-box-shadow !default;
+$btn-close-opacity:          .5 !default;
+$btn-close-hover-opacity:    .75 !default;
+$btn-close-focus-opacity:    1 !default;
+$btn-close-disabled-opacity: .25 !default;
+$btn-close-filter:           null !default;
+$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
+$btn-close-filter-dark:      $btn-close-white-filter !default;
+// scss-docs-end close-variables
+
+
 // 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="#"`.
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 3ef55891e9..8e9c2c7122 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "config" as *;
 @use "variables" as *;
+@use "colors" as *;
 @use "mixins/caret" as *;
 @use "mixins/border-radius" as *;
 @use "mixins/box-shadow" as *;
@@ -9,6 +10,57 @@
 @use "vendor/rfs" as *;
 @use "layout/breakpoints" as *;
 
+// scss-docs-start dropdown-variables
+$dropdown-min-width:                10rem !default;
+$dropdown-padding-x:                0 !default;
+$dropdown-padding-y:                .5rem !default;
+$dropdown-spacer:                   .125rem !default;
+$dropdown-font-size:                $font-size-base !default;
+$dropdown-color:                    var(--#{$prefix}body-color) !default;
+$dropdown-bg:                       var(--#{$prefix}body-bg) !default;
+$dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
+$dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
+$dropdown-border-width:             var(--#{$prefix}border-width) !default;
+$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
+$dropdown-divider-bg:               $dropdown-border-color !default;
+$dropdown-divider-margin-y:         $spacer * .5 !default;
+$dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
+
+$dropdown-link-color:               var(--#{$prefix}body-color) !default;
+$dropdown-link-hover-color:         $dropdown-link-color !default;
+$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg) !default;
+
+$dropdown-link-active-color:        $component-active-color !default;
+$dropdown-link-active-bg:           $component-active-bg !default;
+
+$dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color) !default;
+
+$dropdown-item-padding-y:           $spacer * .25 !default;
+$dropdown-item-padding-x:           $spacer !default;
+
+$dropdown-header-color:             $gray-600 !default;
+$dropdown-header-padding-x:         $dropdown-item-padding-x !default;
+$dropdown-header-padding-y:         $dropdown-padding-y !default;
+// fusv-disable
+$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
+// fusv-enable
+// scss-docs-end dropdown-variables
+
+// scss-docs-start dropdown-dark-variables
+$dropdown-dark-color:               $gray-300 !default;
+$dropdown-dark-bg:                  $gray-800 !default;
+$dropdown-dark-border-color:        $dropdown-border-color !default;
+$dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow:          null !default;
+$dropdown-dark-link-color:          $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color:    $white !default;
+$dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
+$dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
+$dropdown-dark-link-disabled-color: $gray-500 !default;
+$dropdown-dark-header-color:        $gray-500 !default;
+// scss-docs-end dropdown-dark-variables
+
 @layer components {
   // The dropdown wrapper (`<div>`)
   .dropup,
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 33cf2c3d4a..f9a557cd30 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -6,6 +6,35 @@
 @use "vendor/rfs" as *;
 @use "layout/breakpoints" as *;
 
+// scss-docs-start list-group-variables
+$list-group-color:                  var(--#{$prefix}body-color) !default;
+$list-group-bg:                     var(--#{$prefix}body-bg) !default;
+$list-group-border-color:           var(--#{$prefix}border-color) !default;
+$list-group-border-width:           var(--#{$prefix}border-width) !default;
+$list-group-border-radius:          var(--#{$prefix}border-radius) !default;
+
+$list-group-item-padding-y:         $spacer * .5 !default;
+$list-group-item-padding-x:         $spacer !default;
+// fusv-disable
+$list-group-item-bg-scale:          -80% !default; // Deprecated in v5.3.0
+$list-group-item-color-scale:       40% !default; // Deprecated in v5.3.0
+// fusv-enable
+
+$list-group-hover-bg:               var(--#{$prefix}tertiary-bg) !default;
+$list-group-active-color:           $component-active-color !default;
+$list-group-active-bg:              $component-active-bg !default;
+$list-group-active-border-color:    $list-group-active-bg !default;
+
+$list-group-disabled-color:         var(--#{$prefix}secondary-color) !default;
+$list-group-disabled-bg:            $list-group-bg !default;
+
+$list-group-action-color:           var(--#{$prefix}secondary-color) !default;
+$list-group-action-hover-color:     var(--#{$prefix}emphasis-color) !default;
+
+$list-group-action-active-color:    var(--#{$prefix}body-color) !default;
+$list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
+// scss-docs-end list-group-variables
+
 // Base class
 //
 // Easily usable on <ul>, <ol>, or <div>.
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 7785a48a93..0499a52571 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -6,6 +6,46 @@
 @use "mixins/gradients" as *;
 @use "vendor/rfs" as *;
 
+// scss-docs-start pagination-variables
+$pagination-padding-y:              .375rem !default;
+$pagination-padding-x:              .75rem !default;
+$pagination-padding-y-sm:           .25rem !default;
+$pagination-padding-x-sm:           .5rem !default;
+$pagination-padding-y-lg:           .75rem !default;
+$pagination-padding-x-lg:           1.5rem !default;
+
+$pagination-font-size:              $font-size-base !default;
+
+$pagination-color:                  var(--#{$prefix}link-color) !default;
+$pagination-bg:                     var(--#{$prefix}body-bg) !default;
+$pagination-border-radius:          var(--#{$prefix}border-radius) !default;
+$pagination-border-width:           var(--#{$prefix}border-width) !default;
+$pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default;
+$pagination-border-color:           var(--#{$prefix}border-color) !default;
+
+$pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
+$pagination-focus-bg:               var(--#{$prefix}secondary-bg) !default;
+$pagination-focus-box-shadow:       $focus-ring-box-shadow !default;
+$pagination-focus-outline:          0 !default;
+
+$pagination-hover-color:            var(--#{$prefix}link-hover-color) !default;
+$pagination-hover-bg:               var(--#{$prefix}tertiary-bg) !default;
+$pagination-hover-border-color:     var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
+
+$pagination-active-color:           $component-active-color !default;
+$pagination-active-bg:              $component-active-bg !default;
+$pagination-active-border-color:    $component-active-bg !default;
+
+$pagination-disabled-color:         var(--#{$prefix}secondary-color) !default;
+$pagination-disabled-bg:            var(--#{$prefix}secondary-bg) !default;
+$pagination-disabled-border-color:  var(--#{$prefix}border-color) !default;
+
+$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$pagination-border-radius-sm:       var(--#{$prefix}border-radius-sm) !default;
+$pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
+// scss-docs-end pagination-variables
+
 // scss-docs-start pagination-mixin
 @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
   --#{$prefix}pagination-padding-x: #{$padding-x};
diff --git a/scss/_progress.scss b/scss/_progress.scss
index 36950883ee..880aa59506 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -1,11 +1,24 @@
 @use "config" as *;
 @use "variables" as *;
+@use "colors" as *;
 @use "mixins/transition" as *;
 @use "mixins/gradients" as *;
 @use "mixins/border-radius" as *;
 @use "mixins/box-shadow" as *;
 @use "vendor/rfs" as *;
 
+// scss-docs-start progress-variables
+$progress-height:                   1rem !default;
+$progress-font-size:                $font-size-base * .75 !default;
+$progress-bg:                       var(--#{$prefix}secondary-bg) !default;
+$progress-border-radius:            var(--#{$prefix}border-radius) !default;
+$progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;
+$progress-bar-color:                $white !default;
+$progress-bar-bg:                   $primary !default;
+$progress-bar-animation-timing:     1s linear infinite !default;
+$progress-bar-transition:           width .6s ease !default;
+// scss-docs-end progress-variables
+
 @layer components {
   // Disable animation if transitions are disabled
   // scss-docs-start progress-keyframes
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index d7b638a4fd..5f914347b6 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -1,6 +1,18 @@
 @use "config" as *;
 @use "variables" as *;
 
+// scss-docs-start spinner-variables
+$spinner-width:           2rem !default;
+$spinner-height:          $spinner-width !default;
+$spinner-vertical-align:  -.125em !default;
+$spinner-border-width:    .25em !default;
+$spinner-animation-speed: .75s !default;
+
+$spinner-width-sm:        1rem !default;
+$spinner-height-sm:       $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;
+// scss-docs-end spinner-variables
+
 @layer components {
   //
   // Rotating border
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index dc79b2c0ba..2c4c32509c 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -3,6 +3,24 @@
 @use "mixins/border-radius" as *;
 @use "vendor/rfs" as *;
 
+// scss-docs-start toast-variables
+$toast-max-width:                   350px !default;
+$toast-padding-x:                   .75rem !default;
+$toast-padding-y:                   .5rem !default;
+$toast-font-size:                   .875rem !default;
+$toast-color:                       null !default;
+$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-border-width:                var(--#{$prefix}border-width) !default;
+$toast-border-color:                var(--#{$prefix}border-color-translucent) !default;
+$toast-border-radius:               var(--#{$prefix}border-radius) !default;
+$toast-box-shadow:                  var(--#{$prefix}box-shadow) !default;
+$toast-spacing:                     $container-padding-x !default;
+
+$toast-header-color:                var(--#{$prefix}secondary-color) !default;
+$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-header-border-color:         $toast-border-color !default;
+// scss-docs-end toast-variables
+
 @layer components {
   .toast {
     // scss-docs-start toast-css-vars
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 1dcc45e227..a146e7d27f 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -93,12 +93,12 @@ $accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://
 // Carousel
 //
 
-$carousel-indicator-active-bg-dark:   $carousel-dark-indicator-active-bg !default;
-$carousel-caption-color-dark:         $carousel-dark-caption-color !default;
-$carousel-control-icon-filter-dark:   $carousel-dark-control-icon-filter !default;
+// $carousel-indicator-active-bg-dark:   $carousel-dark-indicator-active-bg !default;
+// $carousel-caption-color-dark:         $carousel-dark-caption-color !default;
+// $carousel-control-icon-filter-dark:   $carousel-dark-control-icon-filter !default;
 
 //
 // Close button
 //
 
-$btn-close-filter-dark:             $btn-close-white-filter !default;
+// $btn-close-filter-dark:             $btn-close-white-filter !default;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2490fffefb..7537a495d7 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -440,64 +440,6 @@ $mark-bg:                     light-dark($yellow-100, $yellow-900) !default;
 // scss-docs-end type-variables
 
 
-// Tables
-//
-// Customizes the `.table` component with basic values, each used across all table variations.
-
-// scss-docs-start table-variables
-$table-cell-padding-y:        .5rem !default;
-$table-cell-padding-x:        .5rem !default;
-$table-cell-padding-y-sm:     .25rem !default;
-$table-cell-padding-x-sm:     .25rem !default;
-
-$table-cell-vertical-align:   top !default;
-
-$table-color:                 var(--#{$prefix}emphasis-color) !default;
-$table-bg:                    var(--#{$prefix}body-bg) !default;
-$table-accent-bg:             transparent !default;
-
-$table-th-font-weight:        null !default;
-
-$table-striped-color:         $table-color !default;
-$table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
-
-$table-active-color:          $table-color !default;
-$table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
-
-$table-hover-color:           $table-color !default;
-$table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
-
-$table-border-factor:         .2 !default;
-$table-border-width:          var(--#{$prefix}border-width) !default;
-$table-border-color:          var(--#{$prefix}border-color) !default;
-
-$table-striped-order:         odd !default;
-$table-striped-columns-order: even !default;
-
-$table-group-separator-color: currentcolor !default;
-
-$table-caption-color:         var(--#{$prefix}secondary-color) !default;
-
-$table-bg-scale:              -80% !default;
-// scss-docs-end table-variables
-
-// scss-docs-start table-loop
-$table-variants: (
-  "primary":    shift-color($primary, $table-bg-scale),
-  "secondary":  shift-color($secondary, $table-bg-scale),
-  "success":    shift-color($success, $table-bg-scale),
-  "info":       shift-color($info, $table-bg-scale),
-  "warning":    shift-color($warning, $table-bg-scale),
-  "danger":     shift-color($danger, $table-bg-scale),
-  "light":      $light,
-  "dark":       $dark,
-) !default;
-// scss-docs-end table-loop
-
-
 // Buttons + Forms
 //
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
@@ -625,10 +567,6 @@ $input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
 
-$input-border-radius:                   var(--#{$prefix}border-radius) !default;
-$input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
-$input-border-radius-lg:                var(--#{$prefix}border-radius-lg) !default;
-
 $input-focus-bg:                        $input-bg !default;
 $input-focus-border-color:              tint-color($component-active-bg, 50%) !default;
 $input-focus-color:                     $input-color !default;
@@ -738,7 +676,6 @@ $form-select-feedback-icon-size:        $input-height-inner-half $input-height-i
 
 $form-select-border-width:        $input-border-width !default;
 $form-select-border-color:        $input-border-color !default;
-$form-select-border-radius:       $input-border-radius !default;
 $form-select-box-shadow:          var(--#{$prefix}box-shadow-inset) !default;
 
 $form-select-focus-border-color:  $input-focus-border-color !default;
@@ -748,12 +685,10 @@ $form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focu
 $form-select-padding-y-sm:        $input-padding-y-sm !default;
 $form-select-padding-x-sm:        $input-padding-x-sm !default;
 $form-select-font-size-sm:        $input-font-size-sm !default;
-$form-select-border-radius-sm:    $input-border-radius-sm !default;
 
 $form-select-padding-y-lg:        $input-padding-y-lg !default;
 $form-select-padding-x-lg:        $input-padding-x-lg !default;
 $form-select-font-size-lg:        $input-font-size-lg !default;
-$form-select-border-radius-lg:    $input-border-radius-lg !default;
 
 $form-select-transition:          $input-transition !default;
 // scss-docs-end form-select-variables
@@ -948,105 +883,6 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
 // scss-docs-end navbar-dark-variables
 
 
-// Dropdowns
-//
-// Dropdown menu container and contents.
-
-// scss-docs-start dropdown-variables
-$dropdown-min-width:                10rem !default;
-$dropdown-padding-x:                0 !default;
-$dropdown-padding-y:                .5rem !default;
-$dropdown-spacer:                   .125rem !default;
-$dropdown-font-size:                $font-size-base !default;
-$dropdown-color:                    var(--#{$prefix}body-color) !default;
-$dropdown-bg:                       var(--#{$prefix}body-bg) !default;
-$dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
-$dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
-$dropdown-border-width:             var(--#{$prefix}border-width) !default;
-$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
-$dropdown-divider-bg:               $dropdown-border-color !default;
-$dropdown-divider-margin-y:         $spacer * .5 !default;
-$dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
-
-$dropdown-link-color:               var(--#{$prefix}body-color) !default;
-$dropdown-link-hover-color:         $dropdown-link-color !default;
-$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg) !default;
-
-$dropdown-link-active-color:        $component-active-color !default;
-$dropdown-link-active-bg:           $component-active-bg !default;
-
-$dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color) !default;
-
-$dropdown-item-padding-y:           $spacer * .25 !default;
-$dropdown-item-padding-x:           $spacer !default;
-
-$dropdown-header-color:             $gray-600 !default;
-$dropdown-header-padding-x:         $dropdown-item-padding-x !default;
-$dropdown-header-padding-y:         $dropdown-padding-y !default;
-// fusv-disable
-$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
-// fusv-enable
-// scss-docs-end dropdown-variables
-
-// scss-docs-start dropdown-dark-variables
-$dropdown-dark-color:               $gray-300 !default;
-$dropdown-dark-bg:                  $gray-800 !default;
-$dropdown-dark-border-color:        $dropdown-border-color !default;
-$dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
-$dropdown-dark-box-shadow:          null !default;
-$dropdown-dark-link-color:          $dropdown-dark-color !default;
-$dropdown-dark-link-hover-color:    $white !default;
-$dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
-$dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
-$dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
-$dropdown-dark-link-disabled-color: $gray-500 !default;
-$dropdown-dark-header-color:        $gray-500 !default;
-// scss-docs-end dropdown-dark-variables
-
-
-// Pagination
-
-// scss-docs-start pagination-variables
-$pagination-padding-y:              .375rem !default;
-$pagination-padding-x:              .75rem !default;
-$pagination-padding-y-sm:           .25rem !default;
-$pagination-padding-x-sm:           .5rem !default;
-$pagination-padding-y-lg:           .75rem !default;
-$pagination-padding-x-lg:           1.5rem !default;
-
-$pagination-font-size:              $font-size-base !default;
-
-$pagination-color:                  var(--#{$prefix}link-color) !default;
-$pagination-bg:                     var(--#{$prefix}body-bg) !default;
-$pagination-border-radius:          var(--#{$prefix}border-radius) !default;
-$pagination-border-width:           var(--#{$prefix}border-width) !default;
-$pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default;
-$pagination-border-color:           var(--#{$prefix}border-color) !default;
-
-$pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
-$pagination-focus-bg:               var(--#{$prefix}secondary-bg) !default;
-$pagination-focus-box-shadow:       $focus-ring-box-shadow !default;
-$pagination-focus-outline:          0 !default;
-
-$pagination-hover-color:            var(--#{$prefix}link-hover-color) !default;
-$pagination-hover-bg:               var(--#{$prefix}tertiary-bg) !default;
-$pagination-hover-border-color:     var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
-
-$pagination-active-color:           $component-active-color !default;
-$pagination-active-bg:              $component-active-bg !default;
-$pagination-active-border-color:    $component-active-bg !default;
-
-$pagination-disabled-color:         var(--#{$prefix}secondary-color) !default;
-$pagination-disabled-bg:            var(--#{$prefix}secondary-bg) !default;
-$pagination-disabled-border-color:  var(--#{$prefix}border-color) !default;
-
-$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$pagination-border-radius-sm:       var(--#{$prefix}border-radius-sm) !default;
-$pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
-// scss-docs-end pagination-variables
-
-
 // Placeholders
 
 // scss-docs-start placeholders
@@ -1054,67 +890,9 @@ $placeholder-opacity-max:           .5 !default;
 $placeholder-opacity-min:           .2 !default;
 // scss-docs-end placeholders
 
-// Cards
-
-// scss-docs-start card-variables
-$card-spacer-y:                     $spacer !default;
-$card-spacer-x:                     $spacer !default;
-$card-title-spacer-y:               $spacer * .5 !default;
-$card-title-color:                  null !default;
-$card-subtitle-color:               null !default;
-$card-border-width:                 var(--#{$prefix}border-width) !default;
-$card-border-color:                 var(--#{$prefix}border-color-translucent) !default;
-$card-border-radius:                var(--#{$prefix}border-radius) !default;
-$card-box-shadow:                   null !default;
-$card-inner-border-radius:          calc($card-border-radius - $card-border-width) !default;
-$card-cap-padding-y:                $card-spacer-y * .5 !default;
-$card-cap-padding-x:                $card-spacer-x !default;
-$card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03) !default;
-$card-cap-color:                    null !default;
-$card-height:                       null !default;
-$card-color:                        null !default;
-$card-bg:                           var(--#{$prefix}body-bg) !default;
-$card-img-overlay-padding:          $spacer !default;
-$card-group-margin:                 $grid-gutter-width * .5 !default;
-// scss-docs-end card-variables
 
 // Accordion
 
-// scss-docs-start accordion-variables
-$accordion-padding-y:                     1rem !default;
-$accordion-padding-x:                     1.25rem !default;
-$accordion-color:                         var(--#{$prefix}body-color) !default;
-$accordion-bg:                            var(--#{$prefix}body-bg) !default;
-$accordion-border-width:                  var(--#{$prefix}border-width) !default;
-$accordion-border-color:                  var(--#{$prefix}border-color) !default;
-$accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
-$accordion-inner-border-radius:           calc($accordion-border-radius - $accordion-border-width) !default;
-
-$accordion-body-padding-y:                $accordion-padding-y !default;
-$accordion-body-padding-x:                $accordion-padding-x !default;
-
-$accordion-button-padding-y:              $accordion-padding-y !default;
-$accordion-button-padding-x:              $accordion-padding-x !default;
-$accordion-button-color:                  var(--#{$prefix}body-color) !default;
-$accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
-$accordion-transition:                    $btn-transition, border-radius .15s ease !default;
-$accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle) !default;
-$accordion-button-active-color:           var(--#{$prefix}primary-text) !default;
-
-// fusv-disable
-$accordion-button-focus-border-color:     $input-focus-border-color !default; // Deprecated in v5.3.3
-// fusv-enable
-$accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
-
-$accordion-icon-width:                    1.25rem !default;
-$accordion-icon-color:                    var(--#{$prefix}body-color) !default;
-$accordion-icon-active-color:             var(--#{$prefix}primary-text-emphasis) !default;
-$accordion-icon-transition:               transform .2s ease-in-out !default;
-$accordion-icon-transform:                rotate(-180deg) !default;
-
-$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
-$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
-// scss-docs-end accordion-variables
 
 // Tooltips
 
@@ -1180,39 +958,6 @@ $popover-arrow-outer-color:         var(--#{$prefix}border-color-translucent) !d
 // fusv-enable
 
 
-// Toasts
-
-// scss-docs-start toast-variables
-$toast-max-width:                   350px !default;
-$toast-padding-x:                   .75rem !default;
-$toast-padding-y:                   .5rem !default;
-$toast-font-size:                   .875rem !default;
-$toast-color:                       null !default;
-$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
-$toast-border-width:                var(--#{$prefix}border-width) !default;
-$toast-border-color:                var(--#{$prefix}border-color-translucent) !default;
-$toast-border-radius:               var(--#{$prefix}border-radius) !default;
-$toast-box-shadow:                  var(--#{$prefix}box-shadow) !default;
-$toast-spacing:                     $container-padding-x !default;
-
-$toast-header-color:                var(--#{$prefix}secondary-color) !default;
-$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
-$toast-header-border-color:         $toast-border-color !default;
-// scss-docs-end toast-variables
-
-
-// Badges
-
-// scss-docs-start badge-variables
-$badge-font-size:                   .75em !default;
-$badge-font-weight:                 $font-weight-bold !default;
-$badge-color:                       $white !default;
-$badge-padding-y:                   .35em !default;
-$badge-padding-x:                   .65em !default;
-$badge-border-radius:               var(--#{$prefix}border-radius) !default;
-// scss-docs-end badge-variables
-
-
 // Modals
 
 // scss-docs-start modal-variables
@@ -1259,183 +1004,6 @@ $modal-scale-transform:             scale(1.02) !default;
 // scss-docs-end modal-variables
 
 
-// Alerts
-//
-// Define alert colors, border radius, and padding.
-
-// scss-docs-start alert-variables
-$alert-padding-y:               $spacer !default;
-$alert-padding-x:               $spacer !default;
-$alert-margin-bottom:           1rem !default;
-$alert-border-radius:           var(--#{$prefix}border-radius) !default;
-$alert-link-font-weight:        $font-weight-bold !default;
-$alert-border-width:            var(--#{$prefix}border-width) !default;
-$alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
-// scss-docs-end alert-variables
-
-// fusv-disable
-$alert-bg-scale:                -80% !default; // Deprecated in v5.2.0, to be removed in v6
-$alert-border-scale:            -70% !default; // Deprecated in v5.2.0, to be removed in v6
-$alert-color-scale:             40% !default; // Deprecated in v5.2.0, to be removed in v6
-// fusv-enable
-
-// Progress bars
-
-// scss-docs-start progress-variables
-$progress-height:                   1rem !default;
-$progress-font-size:                $font-size-base * .75 !default;
-$progress-bg:                       var(--#{$prefix}secondary-bg) !default;
-$progress-border-radius:            var(--#{$prefix}border-radius) !default;
-$progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;
-$progress-bar-color:                $white !default;
-$progress-bar-bg:                   $primary !default;
-$progress-bar-animation-timing:     1s linear infinite !default;
-$progress-bar-transition:           width .6s ease !default;
-// scss-docs-end progress-variables
-
-
-// List group
-
-// scss-docs-start list-group-variables
-$list-group-color:                  var(--#{$prefix}body-color) !default;
-$list-group-bg:                     var(--#{$prefix}body-bg) !default;
-$list-group-border-color:           var(--#{$prefix}border-color) !default;
-$list-group-border-width:           var(--#{$prefix}border-width) !default;
-$list-group-border-radius:          var(--#{$prefix}border-radius) !default;
-
-$list-group-item-padding-y:         $spacer * .5 !default;
-$list-group-item-padding-x:         $spacer !default;
-// fusv-disable
-$list-group-item-bg-scale:          -80% !default; // Deprecated in v5.3.0
-$list-group-item-color-scale:       40% !default; // Deprecated in v5.3.0
-// fusv-enable
-
-$list-group-hover-bg:               var(--#{$prefix}tertiary-bg) !default;
-$list-group-active-color:           $component-active-color !default;
-$list-group-active-bg:              $component-active-bg !default;
-$list-group-active-border-color:    $list-group-active-bg !default;
-
-$list-group-disabled-color:         var(--#{$prefix}secondary-color) !default;
-$list-group-disabled-bg:            $list-group-bg !default;
-
-$list-group-action-color:           var(--#{$prefix}secondary-color) !default;
-$list-group-action-hover-color:     var(--#{$prefix}emphasis-color) !default;
-
-$list-group-action-active-color:    var(--#{$prefix}body-color) !default;
-$list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
-// scss-docs-end list-group-variables
-
-
-// Image thumbnails
-
-// scss-docs-start thumbnail-variables
-$thumbnail-padding:                 .25rem !default;
-$thumbnail-bg:                      var(--#{$prefix}body-bg) !default;
-$thumbnail-border-width:            var(--#{$prefix}border-width) !default;
-$thumbnail-border-color:            var(--#{$prefix}border-color) !default;
-$thumbnail-border-radius:           var(--#{$prefix}border-radius) !default;
-$thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm) !default;
-// scss-docs-end thumbnail-variables
-
-
-// Figures
-
-// scss-docs-start figure-variables
-$figure-caption-font-size:          $small-font-size !default;
-$figure-caption-color:              var(--#{$prefix}secondary-color) !default;
-// scss-docs-end figure-variables
-
-
-// Breadcrumbs
-
-// scss-docs-start breadcrumb-variables
-$breadcrumb-font-size:              null !default;
-$breadcrumb-padding-y:              0 !default;
-$breadcrumb-padding-x:              0 !default;
-$breadcrumb-item-padding-x:         .5rem !default;
-$breadcrumb-margin-bottom:          1rem !default;
-$breadcrumb-bg:                     null !default;
-$breadcrumb-divider-color:          var(--#{$prefix}secondary-color) !default;
-$breadcrumb-active-color:           var(--#{$prefix}secondary-color) !default;
-$breadcrumb-divider:                quote("/") !default;
-$breadcrumb-divider-flipped:        $breadcrumb-divider !default;
-$breadcrumb-border-radius:          null !default;
-// scss-docs-end breadcrumb-variables
-
-// Carousel
-
-// scss-docs-start carousel-variables
-$carousel-control-color:             $white !default;
-$carousel-control-width:             15% !default;
-$carousel-control-opacity:           .5 !default;
-$carousel-control-hover-opacity:     .9 !default;
-$carousel-control-transition:        opacity .15s ease !default;
-$carousel-control-icon-filter:       null !default;
-
-$carousel-indicator-width:           30px !default;
-$carousel-indicator-height:          3px !default;
-$carousel-indicator-hit-area-height: 10px !default;
-$carousel-indicator-spacer:          3px !default;
-$carousel-indicator-opacity:         .5 !default;
-$carousel-indicator-active-bg:       $white !default;
-$carousel-indicator-active-opacity:  1 !default;
-$carousel-indicator-transition:      opacity .6s ease !default;
-
-$carousel-caption-width:             70% !default;
-$carousel-caption-color:             $white !default;
-$carousel-caption-padding-y:         1.25rem !default;
-$carousel-caption-spacer:            1.25rem !default;
-
-$carousel-control-icon-width:        2rem !default;
-
-$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
-$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !default;
-
-$carousel-transition-duration:       .6s !default;
-$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
-// scss-docs-end carousel-variables
-
-// scss-docs-start carousel-dark-variables
-$carousel-dark-indicator-active-bg:  $black !default; // Deprecated in v5.3.4
-$carousel-dark-caption-color:        $black !default; // Deprecated in v5.3.4
-$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default; // Deprecated in v5.3.4
-// scss-docs-end carousel-dark-variables
-
-
-// Spinners
-
-// scss-docs-start spinner-variables
-$spinner-width:           2rem !default;
-$spinner-height:          $spinner-width !default;
-$spinner-vertical-align:  -.125em !default;
-$spinner-border-width:    .25em !default;
-$spinner-animation-speed: .75s !default;
-
-$spinner-width-sm:        1rem !default;
-$spinner-height-sm:       $spinner-width-sm !default;
-$spinner-border-width-sm: .2em !default;
-// scss-docs-end spinner-variables
-
-
-// Close
-
-// scss-docs-start close-variables
-$btn-close-width:            1em !default;
-$btn-close-height:           $btn-close-width !default;
-$btn-close-padding-x:        .25em !default;
-$btn-close-padding-y:        $btn-close-padding-x !default;
-$btn-close-color:            $black !default;
-$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
-$btn-close-focus-shadow:     $focus-ring-box-shadow !default;
-$btn-close-opacity:          .5 !default;
-$btn-close-hover-opacity:    .75 !default;
-$btn-close-focus-opacity:    1 !default;
-$btn-close-disabled-opacity: .25 !default;
-$btn-close-filter:           null !default;
-$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
-// scss-docs-end close-variables
-
-
 // Offcanvas
 
 // scss-docs-start offcanvas-variables
diff --git a/scss/content/_images.scss b/scss/content/_images.scss
index dab52cbf58..9c7142b2fc 100644
--- a/scss/content/_images.scss
+++ b/scss/content/_images.scss
@@ -5,6 +5,20 @@
 @use "../mixins/border-radius" as *;
 @use "../mixins/box-shadow" as *;
 
+// scss-docs-start thumbnail-variables
+$thumbnail-padding:                 .25rem !default;
+$thumbnail-bg:                      var(--#{$prefix}body-bg) !default;
+$thumbnail-border-width:            var(--#{$prefix}border-width) !default;
+$thumbnail-border-color:            var(--#{$prefix}border-color) !default;
+$thumbnail-border-radius:           var(--#{$prefix}border-radius) !default;
+$thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm) !default;
+// scss-docs-end thumbnail-variables
+
+// scss-docs-start figure-variables
+$figure-caption-font-size:          $small-font-size !default;
+$figure-caption-color:              var(--#{$prefix}secondary-color) !default;
+// scss-docs-end figure-variables
+
 @layer content {
   // Responsive images (ensure images don't scale beyond their parents)
   //
diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss
index dcea124290..f8c0965330 100644
--- a/scss/content/_reboot.scss
+++ b/scss/content/_reboot.scss
@@ -362,20 +362,18 @@
   }
 
   caption {
-    padding-top: $table-cell-padding-y;
-    padding-bottom: $table-cell-padding-y;
-    color: $table-caption-color;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    color: var(--#{$prefix}secondary-color);
     text-align: left;
   }
 
-  // 1. Removes font-weight bold by inheriting
-  // 2. Matches default `<td>` alignment by inheriting `text-align`.
-  // 3. Fix alignment for Safari
+  // 1. Matches default `<td>` alignment by inheriting `text-align`.
+  // 2. Fix alignment for Safari
 
   th {
-    font-weight: $table-th-font-weight; // 1
-    text-align: inherit; // 2
-    text-align: -webkit-match-parent; // 3
+    text-align: inherit; // 1
+    text-align: -webkit-match-parent; // 2
   }
 
   thead,
diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss
index 469a03b4eb..57e751d333 100644
--- a/scss/content/_tables.scss
+++ b/scss/content/_tables.scss
@@ -5,6 +5,55 @@
 @use "../functions" as *;
 @use "../layout/breakpoints" as *;
 
+// scss-docs-start table-variables
+$table-cell-padding-y:        .5rem !default;
+$table-cell-padding-x:        .5rem !default;
+$table-cell-padding-y-sm:     .25rem !default;
+$table-cell-padding-x-sm:     .25rem !default;
+
+$table-cell-vertical-align:   top !default;
+
+$table-color:                 var(--#{$prefix}emphasis-color) !default;
+$table-bg:                    var(--#{$prefix}body-bg) !default;
+$table-accent-bg:             transparent !default;
+
+$table-striped-color:         $table-color !default;
+$table-striped-bg-factor:     .05 !default;
+$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
+
+$table-active-color:          $table-color !default;
+$table-active-bg-factor:      .1 !default;
+$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
+
+$table-hover-color:           $table-color !default;
+$table-hover-bg-factor:       .075 !default;
+$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
+
+$table-border-factor:         .2 !default;
+$table-border-width:          var(--#{$prefix}border-width) !default;
+$table-border-color:          var(--#{$prefix}border-color) !default;
+
+$table-striped-order:         odd !default;
+$table-striped-columns-order: even !default;
+
+$table-group-separator-color: currentcolor !default;
+
+$table-bg-scale:              -80% !default;
+// scss-docs-end table-variables
+
+// scss-docs-start table-loop
+$table-variants: (
+  "primary":    shift-color($primary, $table-bg-scale),
+  "secondary":  shift-color($secondary, $table-bg-scale),
+  "success":    shift-color($success, $table-bg-scale),
+  "info":       shift-color($info, $table-bg-scale),
+  "warning":    shift-color($warning, $table-bg-scale),
+  "danger":     shift-color($danger, $table-bg-scale),
+  "light":      $light,
+  "dark":       $dark,
+) !default;
+// scss-docs-end table-loop
+
 @layer content {
   // scss-docs-start table-variant
   @mixin table-variant($state, $background) {
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 26edd7d868..baa3189edb 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -83,7 +83,7 @@
         height: $form-floating-label-height;
         content: "";
         background-color: $input-bg;
-        @include border-radius($input-border-radius);
+        @include border-radius(var(--#{$prefix}border-radius));
       }
     }
     > textarea:disabled ~ label::after {
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index e1c1d9493e..d28cfc1381 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -28,7 +28,7 @@
     border: $input-border-width solid $input-border-color;
 
     // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-    @include border-radius($input-border-radius, 0);
+    @include border-radius(var(--#{$prefix}border-radius), 0);
 
     @include box-shadow($input-box-shadow);
     @include transition($input-transition);
@@ -155,7 +155,7 @@
     min-height: $input-height-sm;
     padding: $input-padding-y-sm $input-padding-x-sm;
     @include font-size($input-font-size-sm);
-    @include border-radius($input-border-radius-sm);
+    @include border-radius(var(--#{$prefix}border-radius-sm));
 
     &::file-selector-button {
       padding: $input-padding-y-sm $input-padding-x-sm;
@@ -168,7 +168,7 @@
     min-height: $input-height-lg;
     padding: $input-padding-y-lg $input-padding-x-lg;
     @include font-size($input-font-size-lg);
-    @include border-radius($input-border-radius-lg);
+    @include border-radius(var(--#{$prefix}border-radius-lg));
 
     &::file-selector-button {
       padding: $input-padding-y-lg $input-padding-x-lg;
@@ -206,12 +206,12 @@
 
     &::-moz-color-swatch {
       border: 0 !important; // stylelint-disable-line declaration-no-important
-      @include border-radius($input-border-radius);
+      @include border-radius(var(--#{$prefix}border-radius));
     }
 
     &::-webkit-color-swatch {
       border: 0 !important; // stylelint-disable-line declaration-no-important
-      @include border-radius($input-border-radius);
+      @include border-radius(var(--#{$prefix}border-radius));
     }
 
     &.form-control-sm { height: $input-height-sm; }
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 9ec6438dd4..731e130d33 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -31,7 +31,7 @@
     background-position: $form-select-bg-position;
     background-size: $form-select-bg-size;
     border: $form-select-border-width solid $form-select-border-color;
-    @include border-radius($form-select-border-radius, 0);
+    @include border-radius(var(--#{$prefix}border-radius), 0);
     @include box-shadow($form-select-box-shadow);
     @include transition($form-select-transition);
 
@@ -64,7 +64,7 @@
     padding-bottom: $form-select-padding-y-sm;
     padding-left: $form-select-padding-x-sm;
     @include font-size($form-select-font-size-sm);
-    @include border-radius($form-select-border-radius-sm);
+    @include border-radius(var(--#{$prefix}border-radius-sm));
   }
 
   .form-select-lg {
@@ -72,7 +72,7 @@
     padding-bottom: $form-select-padding-y-lg;
     padding-left: $form-select-padding-x-lg;
     @include font-size($form-select-font-size-lg);
-    @include border-radius($form-select-border-radius-lg);
+    @include border-radius(var(--#{$prefix}border-radius-lg));
   }
 
   @if $enable-dark-mode {
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index c3b43d0516..b3417da823 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -63,7 +63,7 @@
     white-space: nowrap;
     background-color: $input-group-addon-bg;
     border: $input-border-width solid $input-group-addon-border-color;
-    @include border-radius($input-border-radius);
+    @include border-radius(var(--#{$prefix}border-radius));
   }
 
 
@@ -78,7 +78,7 @@
   .input-group-lg > .btn {
     padding: $input-padding-y-lg $input-padding-x-lg;
     @include font-size($input-font-size-lg);
-    @include border-radius($input-border-radius-lg);
+    @include border-radius(var(--#{$prefix}border-radius-lg));
   }
 
   .input-group-sm > .form-control,
@@ -87,7 +87,7 @@
   .input-group-sm > .btn {
     padding: $input-padding-y-sm $input-padding-x-sm;
     @include font-size($input-font-size-sm);
-    @include border-radius($input-border-radius-sm);
+    @include border-radius(var(--#{$prefix}border-radius-sm));
   }
 
   .input-group-lg > .form-select,
diff --git a/site/src/content/docs/components/accordion.mdx b/site/src/content/docs/components/accordion.mdx
index e8df6d88b6..b4bb4f6131 100644
--- a/site/src/content/docs/components/accordion.mdx
+++ b/site/src/content/docs/components/accordion.mdx
@@ -156,7 +156,7 @@ As part of Bootstrap’s evolving CSS variables approach, accordions now use loc
 
 ### Sass variables
 
-<ScssDocs name="accordion-variables" file="scss/_variables.scss" />
+<ScssDocs name="accordion-variables" file="scss/_accordion.scss" />
 
 ## Usage
 
diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx
index 3503eddb46..15af585c95 100644
--- a/site/src/content/docs/components/alerts.mdx
+++ b/site/src/content/docs/components/alerts.mdx
@@ -130,7 +130,7 @@ As part of Bootstrap’s evolving CSS variables approach, alerts now use local C
 
 ### Sass variables
 
-<ScssDocs name="alert-variables" file="scss/_variables.scss" />
+<ScssDocs name="alert-variables" file="scss/_alert.scss" />
 
 ### Sass loop
 
diff --git a/site/src/content/docs/components/badge.mdx b/site/src/content/docs/components/badge.mdx
index b3e574b6d8..58c86ca541 100644
--- a/site/src/content/docs/components/badge.mdx
+++ b/site/src/content/docs/components/badge.mdx
@@ -80,4 +80,4 @@ As part of Bootstrap’s evolving CSS variables approach, badges now use local C
 
 ### Sass variables
 
-<ScssDocs name="badge-variables" file="scss/_variables.scss" />
+<ScssDocs name="badge-variables" file="scss/_badge.scss" />
diff --git a/site/src/content/docs/components/breadcrumb.mdx b/site/src/content/docs/components/breadcrumb.mdx
index b30aaa560d..2b6f8c1a84 100644
--- a/site/src/content/docs/components/breadcrumb.mdx
+++ b/site/src/content/docs/components/breadcrumb.mdx
@@ -94,4 +94,4 @@ As part of Bootstrap’s evolving CSS variables approach, breadcrumbs now use lo
 
 ### Sass variables
 
-<ScssDocs name="breadcrumb-variables" file="scss/_variables.scss" />
+<ScssDocs name="breadcrumb-variables" file="scss/_breadcrumb.scss" />
diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx
index 1cf25220cf..fb5d39bd60 100644
--- a/site/src/content/docs/components/card.mdx
+++ b/site/src/content/docs/components/card.mdx
@@ -670,4 +670,4 @@ As part of Bootstrap’s evolving CSS variables approach, cards now use local CS
 
 ### Sass variables
 
-<ScssDocs name="card-variables" file="scss/_variables.scss" />
+<ScssDocs name="card-variables" file="scss/_card.scss" />
diff --git a/site/src/content/docs/components/carousel.mdx b/site/src/content/docs/components/carousel.mdx
index 397f7da876..180e712616 100644
--- a/site/src/content/docs/components/carousel.mdx
+++ b/site/src/content/docs/components/carousel.mdx
@@ -329,11 +329,11 @@ The transition duration of `.carousel-item` can be changed with the `$carousel-t
 
 Variables for all carousels:
 
-<ScssDocs name="carousel-variables" file="scss/_variables.scss" />
+<ScssDocs name="carousel-variables" file="scss/_carousel.scss" />
 
 Variables for the [dark carousel](#dark-variant):
 
-<ScssDocs name="carousel-dark-variables" file="scss/_variables.scss" />
+<ScssDocs name="carousel-dark-variables" file="scss/_carousel.scss" />
 
 ## Usage
 
diff --git a/site/src/content/docs/components/close-button.mdx b/site/src/content/docs/components/close-button.mdx
index c68c1ea38b..fe3ca497c4 100644
--- a/site/src/content/docs/components/close-button.mdx
+++ b/site/src/content/docs/components/close-button.mdx
@@ -43,4 +43,4 @@ As part of Bootstrap’s evolving CSS variables approach, close button now uses
 
 ### Sass variables
 
-<ScssDocs name="close-variables" file="scss/_variables.scss" />
+<ScssDocs name="close-variables" file="scss/_close.scss" />
diff --git a/site/src/content/docs/components/dropdowns.mdx b/site/src/content/docs/components/dropdowns.mdx
index 321d2f5142..ab887b569d 100644
--- a/site/src/content/docs/components/dropdowns.mdx
+++ b/site/src/content/docs/components/dropdowns.mdx
@@ -951,11 +951,11 @@ Customization through CSS variables can be seen on the `.dropdown-menu-dark` cla
 
 Variables for all dropdowns:
 
-<ScssDocs name="dropdown-variables" file="scss/_variables.scss" />
+<ScssDocs name="dropdown-variables" file="scss/_dropdown.scss" />
 
 Variables for the [dark dropdown](#dark-dropdowns):
 
-<ScssDocs name="dropdown-dark-variables" file="scss/_variables.scss" />
+<ScssDocs name="dropdown-dark-variables" file="scss/_dropdown.scss" />
 
 Variables for the CSS-based carets that indicate a dropdown’s interactivity:
 
diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx
index 1a634070ca..e65844549e 100644
--- a/site/src/content/docs/components/list-group.mdx
+++ b/site/src/content/docs/components/list-group.mdx
@@ -265,13 +265,7 @@ As part of Bootstrap’s evolving CSS variables approach, list groups now use lo
 
 ### Sass variables
 
-<ScssDocs name="list-group-variables" file="scss/_variables.scss" />
-
-### Sass mixins
-
-<DeprecatedIn version="5.3.0" />
-
-<ScssDocs name="list-group-mixin" file="scss/mixins/_list-group.scss" />
+<ScssDocs name="list-group-variables" file="scss/_list-group.scss" />
 
 ### Sass loops
 
diff --git a/site/src/content/docs/components/pagination.mdx b/site/src/content/docs/components/pagination.mdx
index 063c14eef7..e98bdea181 100644
--- a/site/src/content/docs/components/pagination.mdx
+++ b/site/src/content/docs/components/pagination.mdx
@@ -164,8 +164,8 @@ As part of Bootstrap’s evolving CSS variables approach, pagination now uses lo
 
 ### Sass variables
 
-<ScssDocs name="pagination-variables" file="scss/_variables.scss" />
+<ScssDocs name="pagination-variables" file="scss/_pagination.scss" />
 
 ### Sass mixins
 
-<ScssDocs name="pagination-mixin" file="scss/mixins/_pagination.scss" />
+<ScssDocs name="pagination-mixin" file="scss/_pagination.scss" />
diff --git a/site/src/content/docs/components/progress.mdx b/site/src/content/docs/components/progress.mdx
index 89fa322249..6fa84b63d6 100644
--- a/site/src/content/docs/components/progress.mdx
+++ b/site/src/content/docs/components/progress.mdx
@@ -165,7 +165,7 @@ As part of Bootstrap’s evolving CSS variables approach, progress bars now use
 
 ### Sass variables
 
-<ScssDocs name="progress-variables" file="scss/_variables.scss" />
+<ScssDocs name="progress-variables" file="scss/_progress.scss" />
 
 ### Keyframes
 
diff --git a/site/src/content/docs/components/spinners.mdx b/site/src/content/docs/components/spinners.mdx
index c02d0e9d75..8b136eb693 100644
--- a/site/src/content/docs/components/spinners.mdx
+++ b/site/src/content/docs/components/spinners.mdx
@@ -157,7 +157,7 @@ For both spinners, small spinner modifier classes are used to update the values
 
 ### Sass variables
 
-<ScssDocs name="spinner-variables" file="scss/_variables.scss" />
+<ScssDocs name="spinner-variables" file="scss/_spinners.scss" />
 
 ### Keyframes
 
diff --git a/site/src/content/docs/components/toasts.mdx b/site/src/content/docs/components/toasts.mdx
index 38b7863c60..102b32977d 100644
--- a/site/src/content/docs/components/toasts.mdx
+++ b/site/src/content/docs/components/toasts.mdx
@@ -302,7 +302,7 @@ As part of Bootstrap’s evolving CSS variables approach, toasts now use local C
 
 ### Sass variables
 
-<ScssDocs name="toast-variables" file="scss/_variables.scss" />
+<ScssDocs name="toast-variables" file="scss/_toasts.scss" />
 
 ## Usage
 
diff --git a/site/src/content/docs/content/figures.mdx b/site/src/content/docs/content/figures.mdx
index 31cb30f42f..dbd428a17c 100644
--- a/site/src/content/docs/content/figures.mdx
+++ b/site/src/content/docs/content/figures.mdx
@@ -24,4 +24,4 @@ Aligning the figure’s caption is easy with our [text utilities]([[docsref:/uti
 
 ### Sass variables
 
-<ScssDocs name="figure-variables" file="scss/_variables.scss" />
+<ScssDocs name="figure-variables" file="scss/content/_images.scss" />
diff --git a/site/src/content/docs/content/images.mdx b/site/src/content/docs/content/images.mdx
index a3d162fb5d..a697d21fa7 100644
--- a/site/src/content/docs/content/images.mdx
+++ b/site/src/content/docs/content/images.mdx
@@ -46,4 +46,4 @@ If you are using the `<picture>` element to specify multiple `<source>` elements
 
 Variables are available for image thumbnails.
 
-<ScssDocs name="thumbnail-variables" file="scss/_variables.scss" />
+<ScssDocs name="thumbnail-variables" file="scss/content/_images.scss" />
diff --git a/site/src/content/docs/content/tables.mdx b/site/src/content/docs/content/tables.mdx
index 453beba80f..bce7a0e17e 100644
--- a/site/src/content/docs/content/tables.mdx
+++ b/site/src/content/docs/content/tables.mdx
@@ -808,11 +808,11 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` as needed to create responsive tab
 
 ### Sass variables
 
-<ScssDocs name="table-variables" file="scss/_variables.scss" />
+<ScssDocs name="table-variables" file="scss/content/_tables.scss" />
 
 ### Sass loops
 
-<ScssDocs name="table-loop" file="scss/_variables.scss" />
+<ScssDocs name="table-loop" file="scss/content/_tables.scss" />
 
 ### Customizing
 
diff --git a/site/src/scss/_navbar.scss b/site/src/scss/_navbar.scss
index fb4882a939..589a538d99 100644
--- a/site/src/scss/_navbar.scss
+++ b/site/src/scss/_navbar.scss
@@ -87,7 +87,7 @@
       border-left: 0;
 
       @include media-breakpoint-down(lg) {
-        box-shadow: $box-shadow-lg;
+        box-shadow: var(--#{$prefix}box-shadow-lg);
       }
     }
 
@@ -106,7 +106,7 @@
       @include rfs(.875rem, --bs-dropdown-font-size);
       @include font-size(.875rem);
       @include border-radius(.5rem);
-      box-shadow: $dropdown-box-shadow;
+      box-shadow: var(--#{$prefix}dropdown-box-shadow);
 
       li + li {
         margin-top: .125rem;