From acf6ea74a74328bcaa9f1c354f27e602cfbb8968 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Sun, 13 Mar 2022 10:13:09 -0700
Subject: [PATCH] Add additional root variables, rename `$variable-prefix` to
 `$prefix` (#35981)

* Add additional root variables, rename $variable-prefix to $prefix

- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout

* Bundlewatch
---
 .bundlewatch.config.json                      |   8 +-
 scss/_alert.scss                              |  28 ++--
 scss/_badge.scss                              |  22 +--
 scss/_breadcrumb.scss                         |  38 +++---
 scss/_buttons.scss                            | 104 +++++++-------
 scss/_dropdown.scss                           | 128 +++++++++---------
 scss/_functions.scss                          |   8 +-
 scss/_grid.scss                               |   6 +-
 scss/_navbar.scss                             | 104 +++++++-------
 scss/_pagination.scss                         |  78 +++++------
 scss/_popover.scss                            | 120 ++++++++--------
 scss/_reboot.scss                             |  26 ++--
 scss/_root.scss                               |  67 +++++----
 scss/_tables.scss                             |  44 +++---
 scss/_tooltip.scss                            |  78 +++++------
 scss/_utilities.scss                          |  36 ++---
 scss/_variables.scss                          |  98 +++++++-------
 scss/forms/_form-check.scss                   |   8 +-
 scss/helpers/_ratio.scss                      |   4 +-
 scss/mixins/_alert.scss                       |   8 +-
 scss/mixins/_buttons.scss                     |  62 ++++-----
 scss/mixins/_container.scss                   |   8 +-
 scss/mixins/_gradients.scss                   |   2 +-
 scss/mixins/_grid.scss                        |  20 +--
 scss/mixins/_pagination.scss                  |   8 +-
 scss/mixins/_table-variants.scss              |  22 +--
 scss/mixins/_utilities.scss                   |   6 +-
 site/assets/scss/_component-examples.scss     |   4 +-
 .../docs/5.1/customize/css-variables.md       |   2 +-
 29 files changed, 581 insertions(+), 566 deletions(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index c408f65811..eff437cee5 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -6,11 +6,11 @@
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "6.5 kB"
+      "maxSize": "6.55 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "2.5 kB"
+      "maxSize": "2.55 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "26.4 kB"
+      "maxSize": "26.6 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "24.5 kB"
+      "maxSize": "24.65 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 316f3c5ad0..0e7dbe60d1 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -4,23 +4,23 @@
 
 .alert {
   // scss-docs-start alert-css-vars
-  --#{$variable-prefix}alert-bg: transparent;
-  --#{$variable-prefix}alert-padding-x: #{$alert-padding-x};
-  --#{$variable-prefix}alert-padding-y: #{$alert-padding-y};
-  --#{$variable-prefix}alert-margin-bottom: #{$alert-margin-bottom};
-  --#{$variable-prefix}alert-color: inherit;
-  --#{$variable-prefix}alert-border-color: transparent;
-  --#{$variable-prefix}alert-border: #{$alert-border-width} solid var(--#{$variable-prefix}alert-border-color);
-  --#{$variable-prefix}alert-border-radius: #{$alert-border-radius};
+  --#{$prefix}alert-bg: transparent;
+  --#{$prefix}alert-padding-x: #{$alert-padding-x};
+  --#{$prefix}alert-padding-y: #{$alert-padding-y};
+  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
+  --#{$prefix}alert-color: inherit;
+  --#{$prefix}alert-border-color: transparent;
+  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
+  --#{$prefix}alert-border-radius: #{$alert-border-radius};
   // scss-docs-end alert-css-vars
 
   position: relative;
-  padding: var(--#{$variable-prefix}alert-padding-y) var(--#{$variable-prefix}alert-padding-x);
-  margin-bottom: var(--#{$variable-prefix}alert-margin-bottom);
-  color: var(--#{$variable-prefix}alert-color);
-  background-color: var(--#{$variable-prefix}alert-bg);
-  border: var(--#{$variable-prefix}alert-border);
-  border-radius: var(--#{$variable-prefix}alert-border-radius, 0); // stylelint-disable-line property-disallowed-list
+  padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
+  margin-bottom: var(--#{$prefix}alert-margin-bottom);
+  color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-bg);
+  border: var(--#{$prefix}alert-border);
+  border-radius: var(--#{$prefix}alert-border-radius, 0); // stylelint-disable-line property-disallowed-list
 }
 
 // Headings for larger alerts
diff --git a/scss/_badge.scss b/scss/_badge.scss
index 3e9fef14c7..33cfd99862 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -7,24 +7,24 @@
 
 .badge {
   // scss-docs-start badge-css-vars
-  --#{$variable-prefix}badge-padding-x: #{$badge-padding-x};
-  --#{$variable-prefix}badge-padding-y: #{$badge-padding-y};
-  @include rfs($badge-font-size, --#{$variable-prefix}badge-font-size);
-  --#{$variable-prefix}badge-font-weight: #{$badge-font-weight};
-  --#{$variable-prefix}badge-color: #{$badge-color};
-  --#{$variable-prefix}badge-border-radius: #{$badge-border-radius};
+  --#{$prefix}badge-padding-x: #{$badge-padding-x};
+  --#{$prefix}badge-padding-y: #{$badge-padding-y};
+  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
+  --#{$prefix}badge-font-weight: #{$badge-font-weight};
+  --#{$prefix}badge-color: #{$badge-color};
+  --#{$prefix}badge-border-radius: #{$badge-border-radius};
   // scss-docs-end badge-css-vars
 
   display: inline-block;
-  padding: var(--#{$variable-prefix}badge-padding-y) var(--#{$variable-prefix}badge-padding-x);
-  font-size: var(--#{$variable-prefix}badge-font-size);
-  font-weight: var(--#{$variable-prefix}badge-font-weight);
+  padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
+  font-size: var(--#{$prefix}badge-font-size);
+  font-weight: var(--#{$prefix}badge-font-weight);
   line-height: 1;
-  color: var(--#{$variable-prefix}badge-color);
+  color: var(--#{$prefix}badge-color);
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  border-radius: var(--#{$variable-prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list
+  border-radius: var(--#{$prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list
   @include gradient-bg();
 
   // Empty badges collapse automatically
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 86890dc61a..7168fdb565 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -2,42 +2,42 @@
 
 .breadcrumb {
   // scss-docs-start breadcrumb-css-vars
-  --#{$variable-prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
-  --#{$variable-prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
-  --#{$variable-prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
-  @include rfs($breadcrumb-font-size, --#{$variable-prefix}breadcrumb-font-size);
-  --#{$variable-prefix}breadcrumb-bg: #{$breadcrumb-bg};
-  --#{$variable-prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
-  --#{$variable-prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
-  --#{$variable-prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
-  --#{$variable-prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
+  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
+  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
+  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
+  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
+  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
+  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
+  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
+  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
+  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
   // scss-docs-end breadcrumb-css-vars
 
   display: flex;
   flex-wrap: wrap;
-  padding: var(--#{$variable-prefix}breadcrumb-padding-y) var(--#{$variable-prefix}breadcrumb-padding-x);
-  margin-bottom: var(--#{$variable-prefix}breadcrumb-margin-bottom);
+  padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
+  margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
   @include font-size($breadcrumb-font-size);
-  font-size: var(--#{$variable-prefix}breadcrumb-font-size);
+  font-size: var(--#{$prefix}breadcrumb-font-size);
   list-style: none;
-  background-color: var(--#{$variable-prefix}breadcrumb-bg);
-  @include border-radius(var(--#{$variable-prefix}breadcrumb-border-radius));
+  background-color: var(--#{$prefix}breadcrumb-bg);
+  @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
 }
 
 .breadcrumb-item {
   // The separator between breadcrumbs (by default, a forward-slash: "/")
   + .breadcrumb-item {
-    padding-left: var(--#{$variable-prefix}breadcrumb-item-padding-x);
+    padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
 
     &::before {
       float: left; // Suppress inline spacings and underlining of the separator
-      padding-right: var(--#{$variable-prefix}breadcrumb-item-padding-x);
-      color: var(--#{$variable-prefix}breadcrumb-divider-color);
-      content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+      padding-right: $breadcrumb-item-padding-x;
+      color: $breadcrumb-divider-color;
+      content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
     }
   }
 
   &.active {
-    color: var(--#{$variable-prefix}breadcrumb-item-active-color);
+    color: var(--#{$prefix}breadcrumb-item-active-color);
   }
 }
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 56c5b9f876..2caa36d5b3 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -6,59 +6,59 @@
 
 .btn {
   // scss-docs-start btn-css-vars
-  --#{$variable-prefix}btn-padding-x: #{$btn-padding-x};
-  --#{$variable-prefix}btn-padding-y: #{$btn-padding-y};
-  --#{$variable-prefix}btn-font-family: #{$btn-font-family};
-  @include rfs($btn-font-size, --#{$variable-prefix}btn-font-size);
-  --#{$variable-prefix}btn-font-weight: #{$btn-font-weight};
-  --#{$variable-prefix}btn-line-height: #{$btn-line-height};
-  --#{$variable-prefix}btn-color: #{$body-color};
-  --#{$variable-prefix}btn-bg: transparent;
-  --#{$variable-prefix}btn-border-width: #{$btn-border-width};
-  --#{$variable-prefix}btn-border-color: transparent;
-  --#{$variable-prefix}btn-border-radius: #{$btn-border-radius};
-  --#{$variable-prefix}btn-box-shadow: #{$btn-box-shadow};
-  --#{$variable-prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
-  --#{$variable-prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$variable-prefix}btn-focus-shadow-rgb), .5);
+  --#{$prefix}btn-padding-x: #{$btn-padding-x};
+  --#{$prefix}btn-padding-y: #{$btn-padding-y};
+  --#{$prefix}btn-font-family: #{$btn-font-family};
+  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
+  --#{$prefix}btn-font-weight: #{$btn-font-weight};
+  --#{$prefix}btn-line-height: #{$btn-line-height};
+  --#{$prefix}btn-color: #{$body-color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-width: #{$btn-border-width};
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-border-radius: #{$btn-border-radius};
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
   // scss-docs-end btn-css-vars
 
   display: inline-block;
-  padding: var(--#{$variable-prefix}btn-padding-y) var(--#{$variable-prefix}btn-padding-x);
-  font-family: var(--#{$variable-prefix}btn-font-family);
-  font-size: var(--#{$variable-prefix}btn-font-size);
-  font-weight: var(--#{$variable-prefix}btn-font-weight);
-  line-height: var(--#{$variable-prefix}btn-line-height);
-  color: var(--#{$variable-prefix}btn-color);
+  padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
+  font-family: var(--#{$prefix}btn-font-family);
+  font-size: var(--#{$prefix}btn-font-size);
+  font-weight: var(--#{$prefix}btn-font-weight);
+  line-height: var(--#{$prefix}btn-line-height);
+  color: var(--#{$prefix}btn-color);
   text-align: center;
   text-decoration: if($link-decoration == none, null, none);
   white-space: $btn-white-space;
   vertical-align: middle;
   cursor: if($enable-button-pointers, pointer, null);
   user-select: none;
-  border: var(--#{$variable-prefix}btn-border-width) solid var(--#{$variable-prefix}btn-border-color);
-  @include border-radius(var(--#{$variable-prefix}btn-border-radius));
-  @include gradient-bg(var(--#{$variable-prefix}btn-bg));
-  @include box-shadow(var(--#{$variable-prefix}btn-box-shadow));
+  border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
+  @include border-radius(var(--#{$prefix}btn-border-radius));
+  @include gradient-bg(var(--#{$prefix}btn-bg));
+  @include box-shadow(var(--#{$prefix}btn-box-shadow));
   @include transition($btn-transition);
 
   &:hover {
-    color: var(--#{$variable-prefix}btn-hover-color);
+    color: var(--#{$prefix}btn-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: var(--#{$variable-prefix}btn-hover-bg);
-    border-color: var(--#{$variable-prefix}btn-hover-border-color);
+    background-color: var(--#{$prefix}btn-hover-bg);
+    border-color: var(--#{$prefix}btn-hover-border-color);
   }
 
   .btn-check:focus + &,
   &:focus {
-    color: var(--#{$variable-prefix}btn-hover-color);
-    @include gradient-bg(var(--#{$variable-prefix}btn-hover-bg));
-    border-color: var(--#{$variable-prefix}btn-hover-border-color);
+    color: var(--#{$prefix}btn-hover-color);
+    @include gradient-bg(var(--#{$prefix}btn-hover-bg));
+    border-color: var(--#{$prefix}btn-hover-border-color);
     outline: 0;
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
-      box-shadow: var(--#{$variable-prefix}btn-box-shadow), var(--#{$variable-prefix}btn-focus-box-shadow);
+      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
     } @else {
-      box-shadow: var(--#{$variable-prefix}btn-focus-box-shadow);
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
   }
 
@@ -67,19 +67,19 @@
   &:active,
   &.active,
   &.show {
-    color: var(--#{$variable-prefix}btn-active-color);
-    background-color: var(--#{$variable-prefix}btn-active-bg);
+    color: var(--#{$prefix}btn-active-color);
+    background-color: var(--#{$prefix}btn-active-bg);
     // Remove CSS gradients if they're enabled
     background-image: if($enable-gradients, none, null);
-    border-color: var(--#{$variable-prefix}btn-active-border-color);
-    @include box-shadow(var(--#{$variable-prefix}btn-active-shadow));
+    border-color: var(--#{$prefix}btn-active-border-color);
+    @include box-shadow(var(--#{$prefix}btn-active-shadow));
 
     &:focus {
       // Avoid using mixin so we can pass custom focus shadow properly
       @if $enable-shadows {
-        box-shadow: var(--#{$variable-prefix}btn-active-shadow), var(--#{$variable-prefix}btn-focus-box-shadow);
+        box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
       } @else {
-        box-shadow: var(--#{$variable-prefix}btn-focus-box-shadow);
+        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
       }
     }
   }
@@ -87,12 +87,12 @@
   &:disabled,
   &.disabled,
   fieldset:disabled & {
-    color: var(--#{$variable-prefix}btn-disabled-color);
+    color: var(--#{$prefix}btn-disabled-color);
     pointer-events: none;
-    background-color: var(--#{$variable-prefix}btn-disabled-bg);
+    background-color: var(--#{$prefix}btn-disabled-bg);
     background-image: if($enable-gradients, none, null);
-    border-color: var(--#{$variable-prefix}btn-disabled-border-color);
-    opacity: var(--#{$variable-prefix}btn-disabled-opacity);
+    border-color: var(--#{$prefix}btn-disabled-border-color);
+    opacity: var(--#{$prefix}btn-disabled-opacity);
     @include box-shadow(none);
   }
 }
@@ -123,16 +123,16 @@
 
 // Make a button look and behave like a link
 .btn-link {
-  --#{$variable-prefix}btn-font-weight: #{$font-weight-normal};
-  --#{$variable-prefix}btn-color: #{$btn-link-color};
-  --#{$variable-prefix}btn-bg: transparent;
-  --#{$variable-prefix}btn-border-color: transparent;
-  --#{$variable-prefix}btn-hover-color: #{$btn-link-hover-color};
-  --#{$variable-prefix}btn-hover-border-color: transparent;
-  --#{$variable-prefix}btn-active-border-color: transparent;
-  --#{$variable-prefix}btn-disabled-color: #{$btn-link-disabled-color};
-  --#{$variable-prefix}btn-disabled-border-color: transparent;
-  --#{$variable-prefix}btn-box-shadow: none;
+  --#{$prefix}btn-font-weight: #{$font-weight-normal};
+  --#{$prefix}btn-color: #{$btn-link-color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-active-border-color: transparent;
+  --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
+  --#{$prefix}btn-disabled-border-color: transparent;
+  --#{$prefix}btn-box-shadow: none;
 
   text-decoration: $link-decoration;
 
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index cbbe78cb34..1b25a22001 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -18,53 +18,53 @@
 // The dropdown menu
 .dropdown-menu {
   // scss-docs-start dropdown-css-vars
-  --#{$variable-prefix}dropdown-min-width: #{$dropdown-min-width};
-  --#{$variable-prefix}dropdown-padding-x: #{$dropdown-padding-x};
-  --#{$variable-prefix}dropdown-padding-y: #{$dropdown-padding-y};
-  --#{$variable-prefix}dropdown-spacer: #{$dropdown-spacer};
-  @include rfs($dropdown-font-size, --#{$variable-prefix}dropdown-font-size);
-  --#{$variable-prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before
-  --#{$variable-prefix}dropdown-bg: #{$dropdown-bg};
-  --#{$variable-prefix}dropdown-border-color: #{$dropdown-border-color};
-  --#{$variable-prefix}dropdown-border-radius: #{$dropdown-border-radius};
-  --#{$variable-prefix}dropdown-border-width: #{$dropdown-border-width};
-  --#{$variable-prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
-  --#{$variable-prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
-  --#{$variable-prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
-  --#{$variable-prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
-  --#{$variable-prefix}dropdown-link-color: #{$dropdown-link-color};
-  --#{$variable-prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
-  --#{$variable-prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
-  --#{$variable-prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
-  --#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
-  --#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
-  --#{$variable-prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
-  --#{$variable-prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
-  --#{$variable-prefix}dropdown-header-color: #{$dropdown-header-color};
-  --#{$variable-prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
-  --#{$variable-prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
+  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
+  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
+  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
+  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
+  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
+  --#{$prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before
+  --#{$prefix}dropdown-bg: #{$dropdown-bg};
+  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
+  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
+  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
+  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
+  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
+  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
+  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
+  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
+  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
+  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
+  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
+  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
+  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
+  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
+  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
+  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
+  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
   // scss-docs-end dropdown-css-vars
 
   position: absolute;
   z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
-  min-width: var(--#{$variable-prefix}dropdown-min-width);
-  padding: var(--#{$variable-prefix}dropdown-padding-y) var(--#{$variable-prefix}dropdown-padding-x);
+  min-width: var(--#{$prefix}dropdown-min-width);
+  padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
   margin: 0; // Override default margin of ul
-  @include font-size(var(--#{$variable-prefix}dropdown-font-size));
-  color: var(--#{$variable-prefix}dropdown-color);
+  @include font-size(var(--#{$prefix}dropdown-font-size));
+  color: var(--#{$prefix}dropdown-color);
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;
-  background-color: var(--#{$variable-prefix}dropdown-bg);
+  background-color: var(--#{$prefix}dropdown-bg);
   background-clip: padding-box;
-  border: var(--#{$variable-prefix}dropdown-border-width) solid var(--#{$variable-prefix}dropdown-border-color);
-  @include border-radius(var(--#{$variable-prefix}dropdown-border-radius));
-  @include box-shadow(var(--#{$variable-prefix}dropdown-box-shadow));
+  border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
+  @include border-radius(var(--#{$prefix}dropdown-border-radius));
+  @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
 
   &[data-bs-popper] {
     top: 100%;
     left: 0;
-    margin-top: var(--#{$variable-prefix}dropdown-spacer);
+    margin-top: var(--#{$prefix}dropdown-spacer);
   }
 }
 
@@ -104,7 +104,7 @@
     top: auto;
     bottom: 100%;
     margin-top: 0;
-    margin-bottom: var(--#{$variable-prefix}dropdown-spacer);
+    margin-bottom: var(--#{$prefix}dropdown-spacer);
   }
 
   .dropdown-toggle {
@@ -118,7 +118,7 @@
     right: auto;
     left: 100%;
     margin-top: 0;
-    margin-left: var(--#{$variable-prefix}dropdown-spacer);
+    margin-left: var(--#{$prefix}dropdown-spacer);
   }
 
   .dropdown-toggle {
@@ -135,7 +135,7 @@
     right: 100%;
     left: auto;
     margin-top: 0;
-    margin-right: var(--#{$variable-prefix}dropdown-spacer);
+    margin-right: var(--#{$prefix}dropdown-spacer);
   }
 
   .dropdown-toggle {
@@ -150,9 +150,9 @@
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
   height: 0;
-  margin: var(--#{$variable-prefix}dropdown-divider-margin-y) 0;
+  margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
   overflow: hidden;
-  border-top: 1px solid var(--#{$variable-prefix}dropdown-divider-bg);
+  border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
   opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
 }
 
@@ -162,10 +162,10 @@
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
-  padding: var(--#{$variable-prefix}dropdown-item-padding-y) var(--#{$variable-prefix}dropdown-item-padding-x);
+  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
   clear: both;
   font-weight: $font-weight-normal;
-  color: var(--#{$variable-prefix}dropdown-link-color);
+  color: var(--#{$prefix}dropdown-link-color);
   text-align: inherit; // For `<button>`s
   text-decoration: if($link-decoration == none, null, none);
   white-space: nowrap; // prevent links from randomly breaking onto new lines
@@ -176,31 +176,31 @@
   // See https://github.com/twbs/bootstrap/pull/27703
   @if $dropdown-padding-y == 0 {
     &:first-child {
-      @include border-top-radius(var(--#{$variable-prefix}dropdown-inner-border-radius));
+      @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
     }
 
     &:last-child {
-      @include border-bottom-radius(var(--#{$variable-prefix}dropdown-inner-border-radius));
+      @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
     }
   }
 
   &:hover,
   &:focus {
-    color: var(--#{$variable-prefix}dropdown-link-hover-color);
+    color: var(--#{$prefix}dropdown-link-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
-    @include gradient-bg(var(--#{$variable-prefix}dropdown-link-hover-bg));
+    @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
   }
 
   &.active,
   &:active {
-    color: var(--#{$variable-prefix}dropdown-link-active-color);
+    color: var(--#{$prefix}dropdown-link-active-color);
     text-decoration: none;
-    @include gradient-bg(var(--#{$variable-prefix}dropdown-link-active-bg));
+    @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
   }
 
   &.disabled,
   &:disabled {
-    color: var(--#{$variable-prefix}dropdown-link-disabled-color);
+    color: var(--#{$prefix}dropdown-link-disabled-color);
     pointer-events: none;
     background-color: transparent;
     // Remove CSS gradients if they're enabled
@@ -215,34 +215,34 @@
 // Dropdown section headers
 .dropdown-header {
   display: block;
-  padding: var(--#{$variable-prefix}dropdown-header-padding-y) var(--#{$variable-prefix}dropdown-header-padding-x);
+  padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
   margin-bottom: 0; // for use with heading elements
   @include font-size($font-size-sm);
-  color: var(--#{$variable-prefix}dropdown-header-color);
+  color: var(--#{$prefix}dropdown-header-color);
   white-space: nowrap; // as with > li > a
 }
 
 // Dropdown text
 .dropdown-item-text {
   display: block;
-  padding: var(--#{$variable-prefix}dropdown-item-padding);
-  color: var(--#{$variable-prefix}dropdown-link-color);
+  padding: var(--#{$prefix}dropdown-item-padding);
+  color: var(--#{$prefix}dropdown-link-color);
 }
 
 // Dark dropdowns
 .dropdown-menu-dark {
   // scss-docs-start dropdown-dark-css-vars
-  --#{$variable-prefix}dropdown-color: #{$dropdown-dark-color};
-  --#{$variable-prefix}dropdown-bg: #{$dropdown-dark-bg};
-  --#{$variable-prefix}dropdown-border-color: #{$dropdown-dark-border-color};
-  --#{$variable-prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
-  --#{$variable-prefix}dropdown-link-color: #{$dropdown-dark-link-color};
-  --#{$variable-prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
-  --#{$variable-prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
-  --#{$variable-prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
-  --#{$variable-prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
-  --#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
-  --#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
-  --#{$variable-prefix}dropdown-header-color: #{$dropdown-dark-header-color};
+  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
+  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
+  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
+  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
+  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
+  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
+  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
+  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
+  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
+  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
+  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
+  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
   // scss-docs-end dropdown-dark-css-vars
 }
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 30539b3930..883375bf81 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -40,11 +40,11 @@
 // stylelint-disable scss/dollar-variable-pattern
 @function rgba-css-var($identifier, $target) {
   @if $identifier == "body" and $target == "bg" {
-    @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
   } @if $identifier == "body" and $target == "text" {
-    @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+    @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
   } @else {
-    @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+    @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
   }
 }
 
@@ -68,7 +68,7 @@
 @function varify($list) {
   $result: null;
   @each $entry in $list {
-    $result: append($result, var(--#{$variable-prefix}#{$entry}), space);
+    $result: append($result, var(--#{$prefix}#{$entry}), space);
   }
   @return $result;
 }
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 27fd558472..0e0ba210ab 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -15,9 +15,9 @@
 @if $enable-cssgrid {
   .grid {
     display: grid;
-    grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr);
-    grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr);
-    gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});
+    grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
+    grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
+    gap: var(--#{$prefix}gap, #{$grid-gutter-width});
 
     @include make-cssgrid();
   }
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 71711bf566..8fbdab71d6 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -5,26 +5,26 @@
 
 .navbar {
   // scss-docs-start navbar-css-vars
-  --#{$variable-prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
-  --#{$variable-prefix}navbar-padding-y: #{$navbar-padding-y};
-  --#{$variable-prefix}navbar-color: #{$navbar-light-color};
-  --#{$variable-prefix}navbar-hover-color: #{$navbar-light-hover-color};
-  --#{$variable-prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
-  --#{$variable-prefix}navbar-active-color: #{$navbar-light-active-color};
-  --#{$variable-prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
-  --#{$variable-prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
-  --#{$variable-prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
-  --#{$variable-prefix}navbar-brand-color: #{$navbar-light-brand-color};
-  --#{$variable-prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
-  --#{$variable-prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
-  --#{$variable-prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
-  --#{$variable-prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
-  --#{$variable-prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
-  --#{$variable-prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
-  --#{$variable-prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-  --#{$variable-prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
-  --#{$variable-prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
-  --#{$variable-prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
+  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
+  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
+  --#{$prefix}navbar-color: #{$navbar-light-color};
+  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
+  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
+  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
+  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
+  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
+  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
+  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
+  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
+  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
+  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
+  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
+  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
+  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
+  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
   // scss-docs-end navbar-css-vars
 
   position: relative;
@@ -32,7 +32,7 @@
   flex-wrap: wrap; // allow us to do the line break for collapsing content
   align-items: center;
   justify-content: space-between; // space out brand from logo
-  padding: var(--#{$variable-prefix}navbar-padding-y) var(--#{$variable-prefix}navbar-padding-x);
+  padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
   @include gradient-bg();
 
   // Because flex properties aren't inherited, we need to redeclare these first
@@ -63,17 +63,17 @@
 // Used for brand, project, or site names.
 
 .navbar-brand {
-  padding-top: var(--#{$variable-prefix}navbar-brand-padding-y);
-  padding-bottom: var(--#{$variable-prefix}navbar-brand-padding-y);
-  margin-right: var(--#{$variable-prefix}navbar-brand-margin-end);
-  @include font-size(var(--#{$variable-prefix}navbar-brand-font-size));
-  color: var(--#{$variable-prefix}navbar-brand-color);
+  padding-top: var(--#{$prefix}navbar-brand-padding-y);
+  padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
+  margin-right: var(--#{$prefix}navbar-brand-margin-end);
+  @include font-size(var(--#{$prefix}navbar-brand-font-size));
+  color: var(--#{$prefix}navbar-brand-color);
   text-decoration: if($link-decoration == none, null, none);
   white-space: nowrap;
 
   &:hover,
   &:focus {
-    color: var(--#{$variable-prefix}navbar-brand-hover-color);
+    color: var(--#{$prefix}navbar-brand-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 }
@@ -93,21 +93,21 @@
   .nav-link {
     padding-right: 0;
     padding-left: 0;
-    color: var(--#{$variable-prefix}navbar-color);
+    color: var(--#{$prefix}navbar-color);
 
     &:hover,
     &:focus {
-      color: var(--#{$variable-prefix}navbar-hover-color);
+      color: var(--#{$prefix}navbar-hover-color);
     }
 
     &.disabled {
-      color: var(--#{$variable-prefix}navbar-disabled-color);
+      color: var(--#{$prefix}navbar-disabled-color);
     }
   }
 
   .show > .nav-link,
   .nav-link.active {
-    color: var(--#{$variable-prefix}navbar-active-color);
+    color: var(--#{$prefix}navbar-active-color);
   }
 
   .dropdown-menu {
@@ -123,12 +123,12 @@
 .navbar-text {
   padding-top: $nav-link-padding-y;
   padding-bottom: $nav-link-padding-y;
-  color: var(--#{$variable-prefix}navbar-color);
+  color: var(--#{$prefix}navbar-color);
 
   a,
   a:hover,
   a:focus  {
-    color: var(--#{$variable-prefix}navbar-active-color);
+    color: var(--#{$prefix}navbar-active-color);
   }
 }
 
@@ -151,14 +151,14 @@
 
 // Button for toggling the navbar when in its collapsed state
 .navbar-toggler {
-  padding: var(--#{$variable-prefix}navbar-toggler-padding-y) var(--#{$variable-prefix}navbar-toggler-padding-x);
-  @include font-size(var(--#{$variable-prefix}navbar-toggler-font-size));
+  padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
+  @include font-size(var(--#{$prefix}navbar-toggler-font-size));
   line-height: 1;
-  color: var(--#{$variable-prefix}navbar-color);
+  color: var(--#{$prefix}navbar-color);
   background-color: transparent; // remove default button style
-  border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}navbar-toggler-border-color); // remove default button style
-  @include border-radius(var(--#{$variable-prefix}navbar-toggler-border-radius));
-  @include transition(var(--#{$variable-prefix}navbar-toggler-transition));
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
+  @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
+  @include transition(var(--#{$prefix}navbar-toggler-transition));
 
   &:hover {
     text-decoration: none;
@@ -167,7 +167,7 @@
   &:focus {
     text-decoration: none;
     outline: 0;
-    box-shadow: 0 0 0 var(--#{$variable-prefix}navbar-toggler-focus-width);
+    box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
   }
 }
 
@@ -178,14 +178,14 @@
   width: 1.5em;
   height: 1.5em;
   vertical-align: middle;
-  background-image: var(--#{$variable-prefix}navbar-toggler-icon-bg);
+  background-image: var(--#{$prefix}navbar-toggler-icon-bg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100%;
 }
 
 .navbar-nav-scroll {
-  max-height: var(--#{$variable-prefix}scroll-height, 75vh);
+  max-height: var(--#{$prefix}scroll-height, 75vh);
   overflow-y: auto;
 }
 
@@ -211,8 +211,8 @@
           }
 
           .nav-link {
-            padding-right: var(--#{$variable-prefix}navbar-nav-link-padding-x);
-            padding-left: var(--#{$variable-prefix}navbar-nav-link-padding-x);
+            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
+            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
           }
         }
 
@@ -280,12 +280,12 @@
 }
 
 .navbar-dark {
-  --#{$variable-prefix}navbar-color: #{$navbar-dark-color};
-  --#{$variable-prefix}navbar-hover-color: #{$navbar-dark-hover-color};
-  --#{$variable-prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
-  --#{$variable-prefix}navbar-active-color: #{$navbar-dark-active-color};
-  --#{$variable-prefix}navbar-brand-color: #{$navbar-dark-brand-color};
-  --#{$variable-prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
-  --#{$variable-prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
-  --#{$variable-prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+  --#{$prefix}navbar-color: #{$navbar-dark-color};
+  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
+  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
+  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
+  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
+  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
+  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
+  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
 }
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 7f182922a3..9d9ad89c2b 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -1,24 +1,24 @@
 .pagination {
   // scss-docs-start pagination-css-vars
-  --#{$variable-prefix}pagination-padding-x: #{$pagination-padding-x};
-  --#{$variable-prefix}pagination-padding-y: #{$pagination-padding-y};
-  --#{$variable-prefix}pagination-color: #{$pagination-color};
-  --#{$variable-prefix}pagination-bg: #{$pagination-bg};
-  --#{$variable-prefix}pagination-border-width: #{$pagination-border-width};
-  --#{$variable-prefix}pagination-border-color: #{$pagination-border-color};
-  --#{$variable-prefix}pagination-border-radius: #{$pagination-border-radius};
-  --#{$variable-prefix}pagination-hover-color: #{$pagination-hover-color};
-  --#{$variable-prefix}pagination-hover-bg: #{$pagination-hover-bg};
-  --#{$variable-prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
-  --#{$variable-prefix}pagination-focus-color: #{$pagination-focus-color};
-  --#{$variable-prefix}pagination-focus-bg: #{$pagination-focus-bg};
-  --#{$variable-prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
-  --#{$variable-prefix}pagination-active-color: #{$pagination-active-color};
-  --#{$variable-prefix}pagination-active-bg: #{$pagination-active-bg};
-  --#{$variable-prefix}pagination-active-border-color: #{$pagination-active-border-color};
-  --#{$variable-prefix}pagination-disabled-color: #{$pagination-disabled-color};
-  --#{$variable-prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
-  --#{$variable-prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
+  --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
+  --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
+  --#{$prefix}pagination-color: #{$pagination-color};
+  --#{$prefix}pagination-bg: #{$pagination-bg};
+  --#{$prefix}pagination-border-width: #{$pagination-border-width};
+  --#{$prefix}pagination-border-color: #{$pagination-border-color};
+  --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
+  --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
+  --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
+  --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
+  --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
+  --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
+  --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
+  --#{$prefix}pagination-active-color: #{$pagination-active-color};
+  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
+  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
+  --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
+  --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
+  --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
   // scss-docs-end pagination-css-vars
 
   display: flex;
@@ -28,44 +28,44 @@
 .page-link {
   position: relative;
   display: block;
-  padding: var(--#{$variable-prefix}pagination-padding-y) var(--#{$variable-prefix}pagination-padding-x);
-  font-size: var(--#{$variable-prefix}pagination-font-size);
-  color: var(--#{$variable-prefix}pagination-color);
+  padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
+  font-size: var(--#{$prefix}pagination-font-size);
+  color: var(--#{$prefix}pagination-color);
   text-decoration: if($link-decoration == none, null, none);
-  background-color: var(--#{$variable-prefix}pagination-bg);
-  border: var(--#{$variable-prefix}pagination-border-width) solid var(--#{$variable-prefix}pagination-border-color);
+  background-color: var(--#{$prefix}pagination-bg);
+  border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
   @include transition($pagination-transition);
 
   &:hover {
     z-index: 2;
-    color: var(--#{$variable-prefix}pagination-hover-color);
+    color: var(--#{$prefix}pagination-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: var(--#{$variable-prefix}pagination-hover-bg);
-    border-color: var(--#{$variable-prefix}pagination-hover-border-color);
+    background-color: var(--#{$prefix}pagination-hover-bg);
+    border-color: var(--#{$prefix}pagination-hover-border-color);
   }
 
   &:focus {
     z-index: 3;
-    color: var(--#{$variable-prefix}pagination-focus-color);
-    background-color: var(--#{$variable-prefix}pagination-focus-bg);
+    color: var(--#{$prefix}pagination-focus-color);
+    background-color: var(--#{$prefix}pagination-focus-bg);
     outline: $pagination-focus-outline;
-    box-shadow: var(--#{$variable-prefix}pagination-focus-box-shadow);
+    box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
   }
 
   &.active,
   .active > & {
     z-index: 3;
-    color: var(--#{$variable-prefix}pagination-active-color);
-    @include gradient-bg(var(--#{$variable-prefix}pagination-active-bg));
-    border-color: var(--#{$variable-prefix}pagination-active-border-color);
+    color: var(--#{$prefix}pagination-active-color);
+    @include gradient-bg(var(--#{$prefix}pagination-active-bg));
+    border-color: var(--#{$prefix}pagination-active-border-color);
   }
 
   &.disabled,
   .disabled > & {
-    color: var(--#{$variable-prefix}pagination-disabled-color);
+    color: var(--#{$prefix}pagination-disabled-color);
     pointer-events: none;
-    background-color: var(--#{$variable-prefix}pagination-disabled-bg);
-    border-color: var(--#{$variable-prefix}pagination-disabled-border-color);
+    background-color: var(--#{$prefix}pagination-disabled-bg);
+    border-color: var(--#{$prefix}pagination-disabled-border-color);
   }
 }
 
@@ -77,19 +77,19 @@
   @if $pagination-margin-start == (-$pagination-border-width) {
     &:first-child {
       .page-link {
-        @include border-start-radius(var(--#{$variable-prefix}pagination-border-radius));
+        @include border-start-radius(var(--#{$prefix}pagination-border-radius));
       }
     }
 
     &:last-child {
       .page-link {
-        @include border-end-radius(var(--#{$variable-prefix}pagination-border-radius));
+        @include border-end-radius(var(--#{$prefix}pagination-border-radius));
       }
     }
   } @else {
     // Add border-radius to all pageLinks in case they have left margin
     .page-link {
-      @include border-radius(var(--#{$variable-prefix}pagination-border-radius));
+      @include border-radius(var(--#{$prefix}pagination-border-radius));
     }
   }
 }
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 476a76816c..abe58d7b91 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -2,49 +2,49 @@
 
 .popover {
   // scss-docs-start popover-css-vars
-  --#{$variable-prefix}popover-zindex: #{$zindex-popover};
-  --#{$variable-prefix}popover-max-width: #{$popover-max-width};
-  @include rfs($popover-font-size, --#{$variable-prefix}popover-font-size);
-  --#{$variable-prefix}popover-bg: #{$popover-bg};
-  --#{$variable-prefix}popover-border-width: #{$popover-border-width};
-  --#{$variable-prefix}popover-border-color: #{$popover-border-color};
-  --#{$variable-prefix}popover-border-radius: #{$popover-border-radius};
-  --#{$variable-prefix}popover-box-shadow: #{$popover-box-shadow};
-  --#{$variable-prefix}popover-header-padding-x: #{$popover-header-padding-x};
-  --#{$variable-prefix}popover-header-padding-y: #{$popover-header-padding-y};
-  --#{$variable-prefix}popover-header-color: #{$popover-header-color};
-  --#{$variable-prefix}popover-header-bg: #{$popover-header-bg};
-  --#{$variable-prefix}popover-body-padding-x: #{$popover-body-padding-x};
-  --#{$variable-prefix}popover-body-padding-y: #{$popover-body-padding-y};
-  --#{$variable-prefix}popover-body-color: #{$popover-body-color};
-  --#{$variable-prefix}popover-arrow-width: #{$popover-arrow-width};
-  --#{$variable-prefix}popover-arrow-height: #{$popover-arrow-height};
-  --#{$variable-prefix}popover-arrow-border: var(--#{$variable-prefix}popover-border-color);
+  --#{$prefix}popover-zindex: #{$zindex-popover};
+  --#{$prefix}popover-max-width: #{$popover-max-width};
+  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
+  --#{$prefix}popover-bg: #{$popover-bg};
+  --#{$prefix}popover-border-width: #{$popover-border-width};
+  --#{$prefix}popover-border-color: #{$popover-border-color};
+  --#{$prefix}popover-border-radius: #{$popover-border-radius};
+  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
+  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
+  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
+  --#{$prefix}popover-header-color: #{$popover-header-color};
+  --#{$prefix}popover-header-bg: #{$popover-header-bg};
+  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
+  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
+  --#{$prefix}popover-body-color: #{$popover-body-color};
+  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
+  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
+  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
   // scss-docs-end popover-css-vars
 
   position: absolute;
   top: 0;
   left: 0 #{"/* rtl:ignore */"};
-  z-index: var(--#{$variable-prefix}popover-zindex);
+  z-index: var(--#{$prefix}popover-zindex);
   display: block;
-  max-width: var(--#{$variable-prefix}popover-max-width);
+  max-width: var(--#{$prefix}popover-max-width);
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
-  font-size: var(--#{$variable-prefix}popover-font-size);
+  font-size: var(--#{$prefix}popover-font-size);
   // Allow breaking very long words so they don't overflow the popover's bounds
   word-wrap: break-word;
-  background-color: var(--#{$variable-prefix}popover-bg);
+  background-color: var(--#{$prefix}popover-bg);
   background-clip: padding-box;
-  border: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-border-color);
-  @include border-radius(var(--#{$variable-prefix}popover-border-radius));
-  @include box-shadow(var(--#{$variable-prefix}popover-box-shadow));
+  border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+  @include border-radius(var(--#{$prefix}popover-border-radius));
+  @include box-shadow(var(--#{$prefix}popover-box-shadow));
 
   .popover-arrow {
     position: absolute;
     display: block;
-    width: var(--#{$variable-prefix}popover-arrow-width);
-    height: var(--#{$variable-prefix}popover-arrow-height);
+    width: var(--#{$prefix}popover-arrow-width);
+    height: var(--#{$prefix}popover-arrow-height);
 
     &::before,
     &::after {
@@ -60,21 +60,21 @@
 
 .bs-popover-top {
   > .popover-arrow {
-    bottom: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
+    bottom: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
 
     &::before,
     &::after {
-      border-width: var(--#{$variable-prefix}popover-arrow-height) calc(var(--#{$variable-prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
     }
 
     &::before {
       bottom: 0;
-      border-top-color: var(--#{$variable-prefix}popover-arrow-border);
+      border-top-color: var(--#{$prefix}popover-arrow-border);
     }
 
     &::after {
-      bottom: var(--#{$variable-prefix}popover-border-width);
-      border-top-color: var(--#{$variable-prefix}popover-bg);
+      bottom: var(--#{$prefix}popover-border-width);
+      border-top-color: var(--#{$prefix}popover-bg);
     }
   }
 }
@@ -82,23 +82,23 @@
 /* rtl:begin:ignore */
 .bs-popover-end {
   > .popover-arrow {
-    left: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
-    width: var(--#{$variable-prefix}popover-arrow-height);
-    height: var(--#{$variable-prefix}popover-arrow-width);
+    left: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
+    width: var(--#{$prefix}popover-arrow-height);
+    height: var(--#{$prefix}popover-arrow-width);
 
     &::before,
     &::after {
-      border-width: calc(var(--#{$variable-prefix}popover-arrow-width) * .5) var(--#{$variable-prefix}popover-arrow-height) calc(var(--#{$variable-prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
     }
 
     &::before {
       left: 0;
-      border-right-color: var(--#{$variable-prefix}popover-arrow-border);
+      border-right-color: var(--#{$prefix}popover-arrow-border);
     }
 
     &::after {
-      left: var(--#{$variable-prefix}popover-border-width);
-      border-right-color: var(--#{$variable-prefix}popover-bg);
+      left: var(--#{$prefix}popover-border-width);
+      border-right-color: var(--#{$prefix}popover-bg);
     }
   }
 }
@@ -107,21 +107,21 @@
 
 .bs-popover-bottom {
   > .popover-arrow {
-    top: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
+    top: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
 
     &::before,
     &::after {
-      border-width: 0 calc(var(--#{$variable-prefix}popover-arrow-width) * .5) var(--#{$variable-prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
     }
 
     &::before {
       top: 0;
-      border-bottom-color: var(--#{$variable-prefix}popover-arrow-border);
+      border-bottom-color: var(--#{$prefix}popover-arrow-border);
     }
 
     &::after {
-      top: var(--#{$variable-prefix}popover-border-width);
-      border-bottom-color: var(--#{$variable-prefix}popover-bg);
+      top: var(--#{$prefix}popover-border-width);
+      border-bottom-color: var(--#{$prefix}popover-bg);
     }
   }
 
@@ -131,33 +131,33 @@
     top: 0;
     left: 50%;
     display: block;
-    width: var(--#{$variable-prefix}popover-arrow-width);
-    margin-left: calc(var(--#{$variable-prefix}popover-arrow-width) * -.5); // stylelint-disable-line function-disallowed-list
+    width: var(--#{$prefix}popover-arrow-width);
+    margin-left: calc(var(--#{$prefix}popover-arrow-width) * -.5); // stylelint-disable-line function-disallowed-list
     content: "";
-    border-bottom: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-header-bg);
+    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
   }
 }
 
 /* rtl:begin:ignore */
 .bs-popover-start {
   > .popover-arrow {
-    right: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
-    width: var(--#{$variable-prefix}popover-arrow-height);
-    height: var(--#{$variable-prefix}popover-arrow-width);
+    right: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
+    width: var(--#{$prefix}popover-arrow-height);
+    height: var(--#{$prefix}popover-arrow-width);
 
     &::before,
     &::after {
-      border-width: calc(var(--#{$variable-prefix}popover-arrow-width) * .5) 0 calc(var(--#{$variable-prefix}popover-arrow-width) * .5) var(--#{$variable-prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
     }
 
     &::before {
       right: 0;
-      border-left-color: var(--#{$variable-prefix}popover-arrow-border);
+      border-left-color: var(--#{$prefix}popover-arrow-border);
     }
 
     &::after {
-      right: var(--#{$variable-prefix}popover-border-width);
-      border-left-color: var(--#{$variable-prefix}popover-bg);
+      right: var(--#{$prefix}popover-border-width);
+      border-left-color: var(--#{$prefix}popover-bg);
     }
   }
 }
@@ -181,12 +181,12 @@
 
 // Offset the popover to account for the popover arrow
 .popover-header {
-  padding: var(--#{$variable-prefix}popover-header-padding-y) var(--#{$variable-prefix}popover-header-padding-x);
+  padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
   margin-bottom: 0; // Reset the default from Reboot
   @include font-size($font-size-base);
-  color: var(--#{$variable-prefix}popover-header-color);
-  background-color: var(--#{$variable-prefix}popover-header-bg);
-  border-bottom: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-border-color);
+  color: var(--#{$prefix}popover-header-color);
+  background-color: var(--#{$prefix}popover-header-bg);
+  border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
   @include border-top-radius($popover-inner-border-radius);
 
   &:empty {
@@ -195,6 +195,6 @@
 }
 
 .popover-body {
-  padding: var(--#{$variable-prefix}popover-body-padding-y) var(--#{$variable-prefix}popover-body-padding-x);
-  color: var(--#{$variable-prefix}popover-body-color);
+  padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
+  color: var(--#{$prefix}popover-body-color);
 }
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 259f59eb45..0f05de7424 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -27,7 +27,7 @@
 
 :root {
   @if $font-size-root != null {
-    font-size: var(--#{$variable-prefix}root-font-size);
+    font-size: var(--#{$prefix}root-font-size);
   }
 
   @if $enable-smooth-scroll {
@@ -48,13 +48,13 @@
 // scss-docs-start reboot-body-rules
 body {
   margin: 0; // 1
-  font-family: var(--#{$variable-prefix}body-font-family);
-  font-size: var(--#{$variable-prefix}body-font-size);
-  font-weight: var(--#{$variable-prefix}body-font-weight);
-  line-height: var(--#{$variable-prefix}body-line-height);
-  color: var(--#{$variable-prefix}body-color);
-  text-align: var(--#{$variable-prefix}body-text-align);
-  background-color: var(--#{$variable-prefix}body-bg); // 2
+  font-family: var(--#{$prefix}body-font-family);
+  font-size: var(--#{$prefix}body-font-size);
+  font-weight: var(--#{$prefix}body-font-weight);
+  line-height: var(--#{$prefix}body-line-height);
+  color: var(--#{$prefix}body-color);
+  text-align: var(--#{$prefix}body-text-align);
+  background-color: var(--#{$prefix}body-bg); // 2
   -webkit-text-size-adjust: 100%; // 3
   -webkit-tap-highlight-color: rgba($black, 0); // 4
 }
@@ -87,7 +87,7 @@ hr {
   font-style: $headings-font-style;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
-  color: $headings-color;
+  color: var(--#{$prefix}heading-color);
 }
 
 h1 {
@@ -219,7 +219,7 @@ small {
 
 mark {
   padding: $mark-padding;
-  background-color: $mark-bg;
+  background-color: var(--#{$prefix}highlight-bg);
 }
 
 
@@ -243,11 +243,11 @@ sup { top: -.5em; }
 // Links
 
 a {
-  color: $link-color;
+  color: var(--#{$prefix}link-color);
   text-decoration: $link-decoration;
 
   &:hover {
-    color: $link-hover-color;
+    color: var(--#{$prefix}link-hover-color);
     text-decoration: $link-hover-decoration;
   }
 }
@@ -298,7 +298,7 @@ pre {
 
 code {
   @include font-size($code-font-size);
-  color: $code-color;
+  color: var(--#{$prefix}code-color);
   word-wrap: break-word;
 
   // Streamline the style when inside anchors to avoid broken underline and more
diff --git a/scss/_root.scss b/scss/_root.scss
index 4d5f3d198e..f0f89800f8 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,3 +1,5 @@
+// stylelint-disable custom-property-empty-line-before
+
 :root {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
@@ -6,57 +8,70 @@
   // Generate palettes for full colors, grays, and theme colors.
 
   @each $color, $value in $colors {
-    --#{$variable-prefix}#{$color}: #{$value};
+    --#{$prefix}#{$color}: #{$value};
   }
 
   @each $color, $value in $grays {
-    --#{$variable-prefix}gray-#{$color}: #{$value};
+    --#{$prefix}gray-#{$color}: #{$value};
   }
 
   @each $color, $value in $theme-colors {
-    --#{$variable-prefix}#{$color}: #{$value};
+    --#{$prefix}#{$color}: #{$value};
   }
 
   @each $color, $value in $theme-colors-rgb {
-    --#{$variable-prefix}#{$color}-rgb: #{$value};
+    --#{$prefix}#{$color}-rgb: #{$value};
   }
 
-  --#{$variable-prefix}white-rgb: #{to-rgb($white)};
-  --#{$variable-prefix}black-rgb: #{to-rgb($black)};
-  --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)};
-  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
+  --#{$prefix}white-rgb: #{to-rgb($white)};
+  --#{$prefix}black-rgb: #{to-rgb($black)};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
   // Fonts
 
   // Note: Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
-  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
-  --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
-  --#{$variable-prefix}gradient: #{$gradient};
+  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$prefix}gradient: #{$gradient};
 
   // Root and body
-  // stylelint-disable custom-property-empty-line-before
   // scss-docs-start root-body-variables
   @if $font-size-root != null {
-    --#{$variable-prefix}root-font-size: #{$font-size-root};
+    --#{$prefix}root-font-size: #{$font-size-root};
   }
-  --#{$variable-prefix}body-font-family: #{$font-family-base};
-  @include rfs($font-size-base, --#{$variable-prefix}body-font-size);
-  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
-  --#{$variable-prefix}body-line-height: #{$line-height-base};
-  --#{$variable-prefix}body-color: #{$body-color};
+  --#{$prefix}body-font-family: #{$font-family-base};
+  @include rfs($font-size-base, --#{$prefix}body-font-size);
+  --#{$prefix}body-font-weight: #{$font-weight-base};
+  --#{$prefix}body-line-height: #{$line-height-base};
+  --#{$prefix}body-color: #{$body-color};
   @if $body-text-align != null {
-    --#{$variable-prefix}body-text-align: #{$body-text-align};
+    --#{$prefix}body-text-align: #{$body-text-align};
   }
-  --#{$variable-prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg: #{$body-bg};
   // scss-docs-end root-body-variables
 
   // scss-docs-start root-border-var
-  --#{$variable-prefix}border-width: #{$border-width};
-  --#{$variable-prefix}border-style: solid;
-  --#{$variable-prefix}border-color: #{$border-color};
-  --#{$variable-prefix}border-radius: #{$border-radius};
-  --#{$variable-prefix}border-opacity: 1;
+  --#{$prefix}border-width: #{$border-width};
+  --#{$prefix}border-style: #{$border-style};
+  --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-radius: #{$border-radius};
+  --#{$prefix}border-opacity: 1;
+
+  --#{$prefix}border-radius: #{$border-radius};
+  --#{$prefix}border-radius-sm: #{$border-radius-sm};
+  --#{$prefix}border-radius-lg: #{$border-radius-lg};
+  --#{$prefix}border-radius-xl: #{$border-radius-xl};
+  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
+  --#{$prefix}border-radius-pill: #{$border-radius-pill};
   // scss-docs-end root-border-var
-  // stylelint-enable custom-property-empty-line-before
+
+  --#{$prefix}heading-color: #{$headings-color};
+  --#{$prefix}link-color: #{$link-color};
+  --#{$prefix}link-hover-color: #{$link-hover-color};
+
+  --#{$prefix}code-color: #{$code-color};
+
+  --#{$prefix}highlight-bg: #{$mark-bg};
 }
diff --git a/scss/_tables.scss b/scss/_tables.scss
index c523e6677f..601d86cc9f 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -3,22 +3,22 @@
 //
 
 .table {
-  --#{$variable-prefix}table-color: #{$table-color};
-  --#{$variable-prefix}table-bg: #{$table-bg};
-  --#{$variable-prefix}table-border-color: #{$table-border-color};
-  --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
-  --#{$variable-prefix}table-striped-color: #{$table-striped-color};
-  --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
-  --#{$variable-prefix}table-active-color: #{$table-active-color};
-  --#{$variable-prefix}table-active-bg: #{$table-active-bg};
-  --#{$variable-prefix}table-hover-color: #{$table-hover-color};
-  --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
+  --#{$prefix}table-color: #{$table-color};
+  --#{$prefix}table-bg: #{$table-bg};
+  --#{$prefix}table-border-color: #{$table-border-color};
+  --#{$prefix}table-accent-bg: #{$table-accent-bg};
+  --#{$prefix}table-striped-color: #{$table-striped-color};
+  --#{$prefix}table-striped-bg: #{$table-striped-bg};
+  --#{$prefix}table-active-color: #{$table-active-color};
+  --#{$prefix}table-active-bg: #{$table-active-bg};
+  --#{$prefix}table-hover-color: #{$table-hover-color};
+  --#{$prefix}table-hover-bg: #{$table-hover-bg};
 
   width: 100%;
   margin-bottom: $spacer;
-  color: var(--#{$variable-prefix}table-color);
+  color: var(--#{$prefix}table-color);
   vertical-align: $table-cell-vertical-align;
-  border-color: var(--#{$variable-prefix}table-border-color);
+  border-color: var(--#{$prefix}table-border-color);
 
   // Target th & td
   // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
@@ -27,9 +27,9 @@
   // stylelint-disable-next-line selector-max-universal
   > :not(caption) > * > * {
     padding: $table-cell-padding-y $table-cell-padding-x;
-    background-color: var(--#{$variable-prefix}table-bg);
+    background-color: var(--#{$prefix}table-bg);
     border-bottom-width: $table-border-width;
-    box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
+    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg);
   }
 
   > tbody {
@@ -104,16 +104,16 @@
 // For rows
 .table-striped {
   > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
-    color: var(--#{$variable-prefix}table-striped-color);
+    --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
+    color: var(--#{$prefix}table-striped-color);
   }
 }
 
 // For columns
 .table-striped-columns {
   > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
-    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
-    color: var(--#{$variable-prefix}table-striped-color);
+    --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
+    color: var(--#{$prefix}table-striped-color);
   }
 }
 
@@ -122,8 +122,8 @@
 // The `.table-active` class can be added to highlight rows or cells
 
 .table-active {
-  --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
-  color: var(--#{$variable-prefix}table-active-color);
+  --#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg);
+  color: var(--#{$prefix}table-active-color);
 }
 
 // Hover effect
@@ -132,8 +132,8 @@
 
 .table-hover {
   > tbody > tr:hover > * {
-    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
-    color: var(--#{$variable-prefix}table-hover-color);
+    --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
+    color: var(--#{$prefix}table-hover-color);
   }
 }
 
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 5c92b55496..a3343596b8 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -3,39 +3,39 @@
 // Base class
 .tooltip {
   // scss-docs-start tooltip-css-vars
-  --#{$variable-prefix}tooltip-zindex: #{$zindex-tooltip};
-  --#{$variable-prefix}tooltip-max-width: #{$tooltip-max-width};
-  --#{$variable-prefix}tooltip-padding-x: #{$tooltip-padding-x};
-  --#{$variable-prefix}tooltip-padding-y: #{$tooltip-padding-y};
-  --#{$variable-prefix}tooltip-margin: #{$tooltip-margin};
-  @include rfs($tooltip-font-size, --#{$variable-prefix}tooltip-font-size);
-  --#{$variable-prefix}tooltip-color: #{$tooltip-color};
-  --#{$variable-prefix}tooltip-bg: #{$tooltip-bg};
-  --#{$variable-prefix}tooltip-border-radius: #{$tooltip-border-radius};
-  --#{$variable-prefix}tooltip-opacity: #{$tooltip-opacity};
-  --#{$variable-prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
-  --#{$variable-prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
+  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
+  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+  --#{$prefix}tooltip-margin: #{$tooltip-margin};
+  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+  --#{$prefix}tooltip-color: #{$tooltip-color};
+  --#{$prefix}tooltip-bg: #{$tooltip-bg};
+  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
+  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
+  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
   // scss-docs-end tooltip-css-vars
 
   position: absolute;
-  z-index: var(--#{$variable-prefix}tooltip-zindex);
+  z-index: var(--#{$prefix}tooltip-zindex);
   display: block;
-  margin: var(--#{$variable-prefix}tooltip-margin);
+  margin: var(--#{$prefix}tooltip-margin);
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
-  @include font-size(var(--#{$variable-prefix}tooltip-font-size));
+  @include font-size(var(--#{$prefix}tooltip-font-size));
   // Allow breaking very long words so they don't overflow the tooltip's bounds
   word-wrap: break-word;
   opacity: 0;
 
-  &.show { opacity: var(--#{$variable-prefix}tooltip-opacity); }
+  &.show { opacity: var(--#{$prefix}tooltip-opacity); }
 
   .tooltip-arrow {
     position: absolute;
     display: block;
-    width: var(--#{$variable-prefix}tooltip-arrow-width);
-    height: var(--#{$variable-prefix}tooltip-arrow-height);
+    width: var(--#{$prefix}tooltip-arrow-width);
+    height: var(--#{$prefix}tooltip-arrow-height);
 
     &::before {
       position: absolute;
@@ -47,32 +47,32 @@
 }
 
 .bs-tooltip-top {
-  padding: var(--#{$variable-prefix}tooltip-arrow-height) 0;
+  padding: var(--#{$prefix}tooltip-arrow-height) 0;
 
   .tooltip-arrow {
     bottom: 0;
 
     &::before {
       top: -1px;
-      border-width: var(--#{$variable-prefix}tooltip-arrow-height) calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
-      border-top-color: var(--#{$variable-prefix}tooltip-bg);
+      border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      border-top-color: var(--#{$prefix}tooltip-bg);
     }
   }
 }
 
 /* rtl:begin:ignore */
 .bs-tooltip-end {
-  padding: 0 var(--#{$variable-prefix}tooltip-arrow-height);
+  padding: 0 var(--#{$prefix}tooltip-arrow-height);
 
   .tooltip-arrow {
     left: 0;
-    width: var(--#{$variable-prefix}tooltip-arrow-height);
-    height: var(--#{$variable-prefix}tooltip-arrow-width);
+    width: var(--#{$prefix}tooltip-arrow-height);
+    height: var(--#{$prefix}tooltip-arrow-width);
 
     &::before {
       right: -1px;
-      border-width: calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height) calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
-      border-right-color: var(--#{$variable-prefix}tooltip-bg);
+      border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      border-right-color: var(--#{$prefix}tooltip-bg);
     }
   }
 }
@@ -80,32 +80,32 @@
 /* rtl:end:ignore */
 
 .bs-tooltip-bottom {
-  padding: var(--#{$variable-prefix}tooltip-arrow-height) 0;
+  padding: var(--#{$prefix}tooltip-arrow-height) 0;
 
   .tooltip-arrow {
     top: 0;
 
     &::before {
       bottom: -1px;
-      border-width: 0 calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
-      border-bottom-color: var(--#{$variable-prefix}tooltip-bg);
+      border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+      border-bottom-color: var(--#{$prefix}tooltip-bg);
     }
   }
 }
 
 /* rtl:begin:ignore */
 .bs-tooltip-start {
-  padding: 0 var(--#{$variable-prefix}tooltip-arrow-height);
+  padding: 0 var(--#{$prefix}tooltip-arrow-height);
 
   .tooltip-arrow {
     right: 0;
-    width: var(--#{$variable-prefix}tooltip-arrow-height);
-    height: var(--#{$variable-prefix}tooltip-arrow-width);
+    width: var(--#{$prefix}tooltip-arrow-height);
+    height: var(--#{$prefix}tooltip-arrow-width);
 
     &::before {
       left: -1px;
-      border-width: calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
-      border-left-color: var(--#{$variable-prefix}tooltip-bg);
+      border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+      border-left-color: var(--#{$prefix}tooltip-bg);
     }
   }
 }
@@ -129,10 +129,10 @@
 
 // Wrapper for the tooltip content
 .tooltip-inner {
-  max-width: var(--#{$variable-prefix}tooltip-max-width);
-  padding: var(--#{$variable-prefix}tooltip-padding-y) var(--#{$variable-prefix}tooltip-padding-x);
-  color: var(--#{$variable-prefix}tooltip-color);
+  max-width: var(--#{$prefix}tooltip-max-width);
+  padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
+  color: var(--#{$prefix}tooltip-color);
   text-align: center;
-  background-color: var(--#{$variable-prefix}tooltip-bg);
-  border-radius: var(--#{$variable-prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list
+  background-color: var(--#{$prefix}tooltip-bg);
+  border-radius: var(--#{$prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list
 }
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 49fac65081..3705f92ab3 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -102,7 +102,7 @@ $utilities: map-merge(
         "border-opacity": 1
       ),
       values: (
-        null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color),
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
         0: 0,
       )
     ),
@@ -120,7 +120,7 @@ $utilities: map-merge(
     "border-top": (
       property: border-top,
       values: (
-        null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color),
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
         0: 0,
       )
     ),
@@ -128,14 +128,14 @@ $utilities: map-merge(
       property: border-right,
       class: border-end,
       values: (
-        null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color),
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
         0: 0,
       )
     ),
     "border-bottom": (
       property: border-bottom,
       values: (
-        null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color),
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
         0: 0,
       )
     ),
@@ -143,7 +143,7 @@ $utilities: map-merge(
       property: border-left,
       class: border-start,
       values: (
-        null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color),
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
         0: 0,
       )
     ),
@@ -457,7 +457,7 @@ $utilities: map-merge(
     "font-family": (
       property: font-family,
       class: font,
-      values: (monospace: var(--#{$variable-prefix}font-monospace))
+      values: (monospace: var(--#{$prefix}font-monospace))
     ),
     "font-size": (
       rfs: true,
@@ -583,7 +583,7 @@ $utilities: map-merge(
     "gradient": (
       property: background-image,
       class: bg,
-      values: (gradient: var(--#{$variable-prefix}gradient))
+      values: (gradient: var(--#{$prefix}gradient))
     ),
     // scss-docs-start utils-interaction
     "user-select": (
@@ -601,36 +601,36 @@ $utilities: map-merge(
       property: border-radius,
       class: rounded,
       values: (
-        null: $border-radius,
+        null: var(--#{$prefix}border-radius),
         0: 0,
-        1: $border-radius-sm,
-        2: $border-radius,
-        3: $border-radius-lg,
-        4: $border-radius-xl,
-        5: $border-radius-2xl,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-2xl),
         circle: 50%,
-        pill: $border-radius-pill
+        pill: var(--#{$prefix}border-radius-pill)
       )
     ),
     "rounded-top": (
       property: border-top-left-radius border-top-right-radius,
       class: rounded-top,
-      values: (null: $border-radius)
+      values: (null: var(--#{$prefix}border-radius))
     ),
     "rounded-end": (
       property: border-top-right-radius border-bottom-right-radius,
       class: rounded-end,
-      values: (null: $border-radius)
+      values: (null: var(--#{$prefix}border-radius))
     ),
     "rounded-bottom": (
       property: border-bottom-right-radius border-bottom-left-radius,
       class: rounded-bottom,
-      values: (null: $border-radius)
+      values: (null: var(--#{$prefix}border-radius))
     ),
     "rounded-start": (
       property: border-bottom-left-radius border-top-left-radius,
       class: rounded-start,
-      values: (null: $border-radius)
+      values: (null: var(--#{$prefix}border-radius))
     ),
     // scss-docs-end utils-border-radius
     // scss-docs-start utils-visibility
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 101905c22c..dc491087e4 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -352,7 +352,8 @@ $enable-important-utilities:  true !default;
 
 // Prefix for :root CSS variables
 
-$variable-prefix:             bs- !default;
+$variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
+$prefix:                      $variable-prefix !default;
 
 // Gradient
 //
@@ -484,6 +485,7 @@ $border-widths: (
   5: 5px
 ) !default;
 
+$border-style:                solid !default;
 $border-color:                rgba($black, .15) !default;
 // scss-docs-end border-variables
 
@@ -539,8 +541,8 @@ $aspect-ratios: (
 $font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
-$font-family-base:            var(--#{$variable-prefix}font-sans-serif) !default;
-$font-family-code:            var(--#{$variable-prefix}font-monospace) !default;
+$font-family-base:            var(--#{$prefix}font-sans-serif) !default;
+$font-family-code:            var(--#{$prefix}font-monospace) !default;
 
 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
 // $font-size-base affects the font size of the body text
@@ -612,7 +614,7 @@ $small-font-size:             .875em !default;
 
 $sub-sup-font-size:           .75em !default;
 
-$text-muted:                  rgba(var(--#{$variable-prefix}body-color-rgb), .75) !default;
+$text-muted:                  rgba(var(--#{$prefix}body-color-rgb), .75) !default;
 
 $initialism-font-size:        $small-font-size !default;
 
@@ -630,22 +632,19 @@ $hr-height:                   null !default; // Deprecated in v5.2.0
 // fusv-enable
 
 $hr-border-color:             null !default; // Allows for inherited colors
-$hr-border-width:             var(--#{$variable-prefix}border-width) !default;
+$hr-border-width:             var(--#{$prefix}border-width) !default;
 $hr-opacity:                  .25 !default;
 
 $legend-margin-bottom:        .5rem !default;
 $legend-font-size:            1.5rem !default;
 $legend-font-weight:          null !default;
 
-$mark-padding:                .2em !default;
-
 $dt-font-weight:              $font-weight-bold !default;
 
-$nested-kbd-font-weight:      $font-weight-bold !default;
-
 $list-inline-padding:         .5rem !default;
 
-$mark-bg:                     #fcf8e3 !default;
+$mark-padding:                .1875em !default;
+$mark-bg:                     $yellow-100 !default;
 // scss-docs-end type-variables
 
 
@@ -661,7 +660,7 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 $body-color !default;
+$table-color:                 var(--#{$prefix}body-color) !default;
 $table-bg:                    transparent !default;
 $table-accent-bg:             transparent !default;
 
@@ -680,8 +679,8 @@ $table-hover-bg-factor:       .075 !default;
 $table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
 
 $table-border-factor:         .1 !default;
-$table-border-width:          $border-width !default;
-$table-border-color:          $border-color !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;
@@ -1062,14 +1061,14 @@ $nav-link-transition:               color .15s ease-in-out, background-color .15
 $nav-link-disabled-color:           $gray-600 !default;
 
 $nav-tabs-border-color:             $gray-300 !default;
-$nav-tabs-border-radius:            $border-radius !default;
-$nav-tabs-border-width:             var(--#{$variable-prefix}border-width) !default;
+$nav-tabs-border-width:             var(--#{$prefix}border-width) !default;
+$nav-tabs-border-radius:            var(--#{$prefix}border-radius) !default;
 $nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
 $nav-tabs-link-active-color:        $gray-700 !default;
 $nav-tabs-link-active-bg:           $body-bg !default;
 $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
 
-$nav-pills-border-radius:           $border-radius !default;
+$nav-pills-border-radius:           var(--#{$prefix}border-radius) !default;
 $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 // scss-docs-end nav-variables
@@ -1133,8 +1132,8 @@ $dropdown-font-size:                $font-size-base !default;
 $dropdown-color:                    $body-color !default;
 $dropdown-bg:                       $white !default;
 $dropdown-border-color:             rgba($black, .15) !default;
-$dropdown-border-radius:            $border-radius !default;
-$dropdown-border-width:             var(--#{$variable-prefix}border-width) !default;
+$dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
+$dropdown-border-width:             var(--#{$prefix}border-width) !default;
 $dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
@@ -1189,7 +1188,7 @@ $pagination-padding-x-lg:           1.5rem !default;
 $pagination-color:                  $link-color !default;
 $pagination-bg:                     $white !default;
 $pagination-border-radius:          $border-radius !default;
-$pagination-border-width:           var(--#{$variable-prefix}border-width) !default;
+$pagination-border-width:           var(--#{$prefix}border-width) !default;
 $pagination-margin-start:           calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list
 $pagination-border-color:           $gray-300 !default;
 
@@ -1212,8 +1211,8 @@ $pagination-disabled-border-color:  $gray-300 !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:       $border-radius-sm !default;
-$pagination-border-radius-lg:       $border-radius-lg !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
 
 
@@ -1230,9 +1229,9 @@ $placeholder-opacity-min:           .2 !default;
 $card-spacer-y:                     $spacer !default;
 $card-spacer-x:                     $spacer !default;
 $card-title-spacer-y:               $spacer * .5 !default;
-$card-border-radius:                $border-radius !default;
-$card-border-width:                 var(--#{$variable-prefix}border-width) !default;
-$card-border-color:                 var(--#{$variable-prefix}border-color) !default;
+$card-border-width:                 var(--#{$prefix}border-width) !default;
+$card-border-color:                 var(--#{$prefix}border-color) !default;
+$card-border-radius:                var(--#{$prefix}border-radius) !default;
 $card-box-shadow:                   null !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
 $card-cap-padding-y:                $card-spacer-y * .5 !default;
@@ -1253,9 +1252,9 @@ $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
 $accordion-color:                         $body-color !default;
 $accordion-bg:                            $body-bg !default;
-$accordion-border-radius:                 $border-radius !default;
-$accordion-border-width:                  var(--#{$variable-prefix}border-width) !default;
-$accordion-border-color:                  var(--#{$variable-prefix}border-color) !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:           subtract($accordion-border-radius, $accordion-border-width) !default;
 
 $accordion-body-padding-y:                $accordion-padding-y !default;
@@ -1289,7 +1288,7 @@ $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-max-width:                 200px !default;
 $tooltip-color:                     $white !default;
 $tooltip-bg:                        $black !default;
-$tooltip-border-radius:             $border-radius !default;
+$tooltip-border-radius:             var(--#{$prefix}border-radius) !default;
 $tooltip-opacity:                   .9 !default;
 $tooltip-padding-y:                 $spacer * .25 !default;
 $tooltip-padding-x:                 $spacer * .5 !default;
@@ -1319,9 +1318,9 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
 $popover-font-size:                 $font-size-sm !default;
 $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
-$popover-border-width:              var(--#{$variable-prefix}border-width) !default;
+$popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              rgba($black, .2) !default;
-$popover-border-radius:             $border-radius-lg !default;
+$popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
 $popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
 $popover-box-shadow:                $box-shadow !default;
 
@@ -1354,9 +1353,9 @@ $toast-padding-y:                   .5rem !default;
 $toast-font-size:                   .875rem !default;
 $toast-color:                       null !default;
 $toast-background-color:            rgba($white, .85) !default;
-$toast-border-radius:               $border-radius !default;
-$toast-border-width:                var(--#{$variable-prefix}border-width) !default;
-$toast-border-color:                var(--#{$variable-prefix}border-color) !default;
+$toast-border-width:                var(--#{$prefix}border-width) !default;
+$toast-border-color:                var(--#{$prefix}border-color) !default;
+$toast-border-radius:               var(--#{$prefix}border-radius) !default;
 $toast-box-shadow:                  $box-shadow !default;
 $toast-spacing:                     $container-padding-x !default;
 
@@ -1374,7 +1373,7 @@ $badge-font-weight:                 $font-weight-bold !default;
 $badge-color:                       $white !default;
 $badge-padding-y:                   .35em !default;
 $badge-padding-x:                   .65em !default;
-$badge-border-radius:               $border-radius !default;
+$badge-border-radius:               var(--#{$prefix}border-radius) !default;
 // scss-docs-end badge-variables
 
 
@@ -1392,16 +1391,16 @@ $modal-title-line-height:           $line-height-base !default;
 
 $modal-content-color:               null !default;
 $modal-content-bg:                  $white !default;
-$modal-content-border-radius:       $border-radius-lg !default;
-$modal-content-border-color:        var(--#{$variable-prefix}border-color) !default;
-$modal-content-border-width:        var(--#{$variable-prefix}border-width) !default;
+$modal-content-border-color:        var(--#{$prefix}border-color) !default;
+$modal-content-border-width:        var(--#{$prefix}border-width) !default;
+$modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
 $modal-content-box-shadow-xs:       $box-shadow-sm !default;
 $modal-content-box-shadow-sm-up:    $box-shadow !default;
 
 $modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity:            .5 !default;
-$modal-header-border-color:         var(--#{$variable-prefix}border-color) !default;
+$modal-header-border-color:         var(--#{$prefix}border-color) !default;
 $modal-footer-border-color:         $modal-header-border-color !default;
 $modal-header-border-width:         $modal-content-border-width !default;
 $modal-footer-border-width:         $modal-header-border-width !default;
@@ -1430,7 +1429,7 @@ $modal-scale-transform:             scale(1.02) !default;
 $alert-padding-y:               $spacer !default;
 $alert-padding-x:               $spacer !default;
 $alert-margin-bottom:           1rem !default;
-$alert-border-radius:           $border-radius !default;
+$alert-border-radius:           var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight:        $font-weight-bold !default;
 $alert-border-width:            $border-width !default;
 $alert-bg-scale:                -80% !default;
@@ -1446,7 +1445,7 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt
 $progress-height:                   1rem !default;
 $progress-font-size:                $font-size-base * .75 !default;
 $progress-bg:                       $gray-200 !default;
-$progress-border-radius:            $border-radius !default;
+$progress-border-radius:            var(--#{$prefix}border-radius) !default;
 $progress-box-shadow:               $box-shadow-inset !default;
 $progress-bar-color:                $white !default;
 $progress-bar-bg:                   $primary !default;
@@ -1461,8 +1460,8 @@ $progress-bar-transition:           width .6s ease !default;
 $list-group-color:                  $gray-900 !default;
 $list-group-bg:                     $white !default;
 $list-group-border-color:           rgba($black, .125) !default;
-$list-group-border-radius:          $border-radius !default;
-$list-group-border-width:           var(--#{$variable-prefix}border-width) !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;
@@ -1490,9 +1489,9 @@ $list-group-action-active-bg:       $gray-200 !default;
 // scss-docs-start thumbnail-variables
 $thumbnail-padding:                 .25rem !default;
 $thumbnail-bg:                      $body-bg !default;
-$thumbnail-border-radius:           $border-radius !default;
-$thumbnail-border-width:            var(--#{$variable-prefix}border-width) !default;
-$thumbnail-border-color:            var(--#{$variable-prefix}border-color) !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:              $box-shadow-sm !default;
 // scss-docs-end thumbnail-variables
 
@@ -1614,10 +1613,11 @@ $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
 $code-font-size:                    $small-font-size !default;
 $code-color:                        $pink !default;
 
-$kbd-padding-y:                     .2rem !default;
-$kbd-padding-x:                     .4rem !default;
+$kbd-padding-y:                     .1875rem !default;
+$kbd-padding-x:                     .375rem !default;
 $kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         $white !default;
-$kbd-bg:                            $gray-900 !default;
+$kbd-color:                         var(--#{$prefix}body-bg) !default;
+$kbd-bg:                            var(--#{$prefix}body-color) !default;
+$nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, removing in v6
 
 $pre-color:                         null !default;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 8e7cbed43c..90bc561177 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -65,7 +65,7 @@
 
     &[type="checkbox"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
       } @else {
         background-image: escape-svg($form-check-input-checked-bg-image);
       }
@@ -73,7 +73,7 @@
 
     &[type="radio"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
       } @else {
         background-image: escape-svg($form-check-radio-checked-bg-image);
       }
@@ -85,7 +85,7 @@
     border-color: $form-check-input-indeterminate-border-color;
 
     @if $enable-gradients {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
+      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
     } @else {
       background-image: escape-svg($form-check-input-indeterminate-bg-image);
     }
@@ -136,7 +136,7 @@
       background-position: $form-switch-checked-bg-position;
 
       @if $enable-gradients {
-        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
       } @else {
         background-image: escape-svg($form-switch-checked-bg-image);
       }
diff --git a/scss/helpers/_ratio.scss b/scss/helpers/_ratio.scss
index 2390ee3394..b6a7654c52 100644
--- a/scss/helpers/_ratio.scss
+++ b/scss/helpers/_ratio.scss
@@ -6,7 +6,7 @@
 
   &::before {
     display: block;
-    padding-top: var(--#{$variable-prefix}aspect-ratio);
+    padding-top: var(--#{$prefix}aspect-ratio);
     content: "";
   }
 
@@ -21,6 +21,6 @@
 
 @each $key, $ratio in $aspect-ratios {
   .ratio-#{$key} {
-    --#{$variable-prefix}aspect-ratio: #{$ratio};
+    --#{$prefix}aspect-ratio: #{$ratio};
   }
 }
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
index eb84af1289..231f068ec4 100644
--- a/scss/mixins/_alert.scss
+++ b/scss/mixins/_alert.scss
@@ -1,11 +1,11 @@
 // scss-docs-start alert-variant-mixin
 @mixin alert-variant($background, $border, $color) {
-  --#{$variable-prefix}alert-color: #{$color};
-  --#{$variable-prefix}alert-bg: #{$background};
-  --#{$variable-prefix}alert-border-color: #{$border};
+  --#{$prefix}alert-color: #{$color};
+  --#{$prefix}alert-bg: #{$background};
+  --#{$prefix}alert-border-color: #{$border};
 
   @if $enable-gradients {
-    background-image: var(--#{$variable-prefix}gradient);
+    background-image: var(--#{$prefix}gradient);
   }
 
   .alert-link {
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 9a78dddad6..5da4d22324 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -20,20 +20,20 @@
   $disabled-border: $border,
   $disabled-color: color-contrast($disabled-background)
 ) {
-  --#{$variable-prefix}btn-color: #{$color};
-  --#{$variable-prefix}btn-bg: #{$background};
-  --#{$variable-prefix}btn-border-color: #{$border};
-  --#{$variable-prefix}btn-hover-color: #{$hover-color};
-  --#{$variable-prefix}btn-hover-bg: #{$hover-background};
-  --#{$variable-prefix}btn-hover-border-color: #{$hover-border};
-  --#{$variable-prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
-  --#{$variable-prefix}btn-active-color: #{$active-color};
-  --#{$variable-prefix}btn-active-bg: #{$active-background};
-  --#{$variable-prefix}btn-active-border-color: #{$active-border};
-  --#{$variable-prefix}btn-active-shadow: #{$btn-active-box-shadow};
-  --#{$variable-prefix}btn-disabled-color: #{$disabled-color};
-  --#{$variable-prefix}btn-disabled-bg: #{$disabled-background};
-  --#{$variable-prefix}btn-disabled-border-color: #{$disabled-border};
+  --#{$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
 
@@ -45,27 +45,27 @@
   $active-border: $color,
   $active-color: color-contrast($active-background)
 ) {
-  --#{$variable-prefix}btn-color: #{$color};
-  --#{$variable-prefix}btn-border-color: #{$color};
-  --#{$variable-prefix}btn-hover-color: #{$color-hover};
-  --#{$variable-prefix}btn-hover-bg: #{$active-background};
-  --#{$variable-prefix}btn-hover-border-color: #{$active-border};
-  --#{$variable-prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
-  --#{$variable-prefix}btn-active-color: #{$active-color};
-  --#{$variable-prefix}btn-active-bg: #{$active-background};
-  --#{$variable-prefix}btn-active-border-color: #{$active-border};
-  --#{$variable-prefix}btn-active-shadow: #{$btn-active-box-shadow};
-  --#{$variable-prefix}btn-disabled-color: #{$color};
-  --#{$variable-prefix}btn-disabled-bg: transparent;
-  --#{$variable-prefix}gradient: none;
+  --#{$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}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) {
-  --#{$variable-prefix}btn-padding-y: #{$padding-y};
-  --#{$variable-prefix}btn-padding-x: #{$padding-x};
-  @include rfs($font-size, --#{$variable-prefix}btn-font-size);
-  --#{$variable-prefix}btn-border-radius: #{$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/_container.scss b/scss/mixins/_container.scss
index 63fddfc1d0..b9f33519e2 100644
--- a/scss/mixins/_container.scss
+++ b/scss/mixins/_container.scss
@@ -1,11 +1,11 @@
 // Container mixins
 
 @mixin make-container($gutter: $container-padding-x) {
-  --#{$variable-prefix}gutter-x: #{$gutter};
-  --#{$variable-prefix}gutter-y: 0;
+  --#{$prefix}gutter-x: #{$gutter};
+  --#{$prefix}gutter-y: 0;
   width: 100%;
-  padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
   margin-right: auto;
   margin-left: auto;
 }
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index 44167d1b8b..608e18df2e 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -5,7 +5,7 @@
   background-color: $color;
 
   @if $enable-gradients {
-    background-image: var(--#{$variable-prefix}gradient);
+    background-image: var(--#{$prefix}gradient);
   }
 }
 // scss-docs-end gradient-bg-mixin
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index d6ac306b23..e4cebae7cc 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -3,14 +3,14 @@
 // Generate semantic grid columns with these mixins.
 
 @mixin make-row($gutter: $grid-gutter-width) {
-  --#{$variable-prefix}gutter-x: #{$gutter};
-  --#{$variable-prefix}gutter-y: 0;
+  --#{$prefix}gutter-x: #{$gutter};
+  --#{$prefix}gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
   // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
-  margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+  margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
 }
 
 @mixin make-col-ready() {
@@ -22,9 +22,9 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  margin-top: var(--#{$variable-prefix}gutter-y);
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  margin-top: var(--#{$prefix}gutter-y);
 }
 
 @mixin make-col($size: false, $columns: $grid-columns) {
@@ -114,12 +114,12 @@
       @each $key, $value in $gutters {
         .g#{$infix}-#{$key},
         .gx#{$infix}-#{$key} {
-          --#{$variable-prefix}gutter-x: #{$value};
+          --#{$prefix}gutter-x: #{$value};
         }
 
         .g#{$infix}-#{$key},
         .gy#{$infix}-#{$key} {
-          --#{$variable-prefix}gutter-y: #{$value};
+          --#{$prefix}gutter-y: #{$value};
         }
       }
     }
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index 6738dc2a8b..4c178ffad8 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -2,9 +2,9 @@
 
 // scss-docs-start pagination-mixin
 @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --#{$variable-prefix}pagination-padding-x: #{$padding-x};
-  --#{$variable-prefix}pagination-padding-y: #{$padding-y};
-  @include rfs($font-size, --#{$variable-prefix}pagination-font-size);
-  --#{$variable-prefix}pagination-border-radius: #{$border-radius}; // stylelint-disable-line custom-property-empty-line-before
+  --#{$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}; // stylelint-disable-line custom-property-empty-line-before
 }
 // scss-docs-end pagination-mixin
diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
index cad70a19b1..ae43ec63d9 100644
--- a/scss/mixins/_table-variants.scss
+++ b/scss/mixins/_table-variants.scss
@@ -7,18 +7,18 @@
     $active-bg: mix($color, $background, percentage($table-active-bg-factor));
     $border-color: mix($color, $background, percentage($table-border-factor));
 
-    --#{$variable-prefix}table-color: #{$color};
-    --#{$variable-prefix}table-bg: #{$background};
-    --#{$variable-prefix}table-border-color: #{$border-color};
-    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
-    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
-    --#{$variable-prefix}table-active-bg: #{$active-bg};
-    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
-    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
-    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
+    --#{$prefix}table-color: #{$color};
+    --#{$prefix}table-bg: #{$background};
+    --#{$prefix}table-border-color: #{$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(--#{$variable-prefix}table-color);
-    border-color: var(--#{$variable-prefix}table-border-color);
+    color: var(--#{$prefix}table-color);
+    border-color: var(--#{$prefix}table-border-color);
   }
 }
 // scss-docs-end table-variant
diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index b2c6683d7d..b02013709a 100644
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -55,12 +55,12 @@
 
       @if $is-css-var {
         .#{$property-class + $infix + $property-class-modifier} {
-          --#{$variable-prefix}#{$css-variable-name}: #{$value};
+          --#{$prefix}#{$css-variable-name}: #{$value};
         }
 
         @each $pseudo in $state {
           .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
-            --#{$variable-prefix}#{$css-variable-name}: #{$value};
+            --#{$prefix}#{$css-variable-name}: #{$value};
           }
         }
       } @else {
@@ -68,7 +68,7 @@
           @each $property in $properties {
             @if $is-local-vars {
               @each $local-var, $variable in $is-local-vars {
-                --#{$variable-prefix}#{$local-var}: #{$variable};
+                --#{$prefix}#{$local-var}: #{$variable};
               }
             }
             #{$property}: $value if($enable-important-utilities, !important, null);
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 31a5063a7c..1c789a8ff9 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -194,7 +194,7 @@
     width: 10rem;
     color: $gray-600;
     background-color: $gray-100;
-    border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color);
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
 
     > div {
       display: flex;
@@ -280,7 +280,7 @@
 
 .bd-example-border-utils-0 {
   [class^="border"] {
-    border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color);
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   }
 }
 
diff --git a/site/content/docs/5.1/customize/css-variables.md b/site/content/docs/5.1/customize/css-variables.md
index 06a4cbdb98..13142f6ad7 100644
--- a/site/content/docs/5.1/customize/css-variables.md
+++ b/site/content/docs/5.1/customize/css-variables.md
@@ -40,7 +40,7 @@ Whenever possible, we'll assign CSS variables at the base component level (e.g.,
 
 Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable.
 
-Customize the prefix via the `$variable-prefix` Sass variable. By default, it's set to `bs-` (note the trailing dash).
+Customize the prefix via the `$prefix` Sass variable. By default, it's set to `bs-` (note the trailing dash).
 
 ## Examples