Merge branch 'twbs:main' into mainHEADmain

24 files changed, 1090 insertions, 638 deletions

diff --git a/site/assets/scss/_ads.scss b/site/assets/scss/_ads.scss
index 026d1a17a..cc5634096 100644
--- a/site/assets/scss/_ads.scss
+++ b/site/assets/scss/_ads.scss
@@ -14,16 +14,15 @@
   @include font-size(.8125rem);
   line-height: 1.4;
   text-align: left;
-  background-color: rgba(0, 0, 0, .05);
+  background-color: var(--bs-tertiary-bg);
 
   a {
-    color: $gray-800;
+    color: var(--bs-body-color);
     text-decoration: none;
   }
 
   @include media-breakpoint-up(sm) {
-    max-width: 330px;
-    @include border-radius(4px);
+    @include border-radius(.5rem);
   }
 }
 
@@ -35,5 +34,5 @@
 .carbon-poweredby {
   display: block;
   margin-top: .75rem;
-  color: $gray-700 !important;
+  color: var(--bs-body-color) !important;
 }
diff --git a/site/assets/scss/_algolia.scss b/site/assets/scss/_algolia.scss
deleted file mode 100644
index 097dbdd55..000000000
--- a/site/assets/scss/_algolia.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-// Docsearch theming
-
-.algolia-autocomplete {
-  width: 100%;
-}
-
-.ds-dropdown-menu {
-  width: 100%;
-  padding: $dropdown-padding-y 0;
-  margin: $dropdown-spacer 0 0;
-  @include font-size(.875rem);
-  background-color: $dropdown-bg;
-  border: $dropdown-border-width solid $dropdown-border-color;
-  @include border-radius($dropdown-border-radius);
-  @include box-shadow($dropdown-box-shadow);
-
-  @include media-breakpoint-up(md) {
-    width: 400px;
-  }
-}
-
-.algolia-docsearch-suggestion--category-header {
-  padding: .125rem 1rem;
-  font-weight: 600;
-  color: $bd-purple-bright;
-
-  // stylelint-disable-next-line selector-class-pattern
-  :not(.algolia-docsearch-suggestion__main) > & {
-    display: none;
-  }
-
-  .ds-suggestion:not(:first-child) & {
-    padding-top: .75rem;
-    margin-top: .75rem;
-    border-top: 1px solid rgba(0, 0, 0, .1);
-  }
-}
-
-.algolia-docsearch-suggestion--content {
-  padding: .25rem 1rem;
-
-  .ds-cursor & {
-    background-color: rgba($bd-purple-light, .2);
-  }
-}
-
-.algolia-docsearch-suggestion {
-  display: block;
-  text-decoration: none;
-}
-
-.algolia-docsearch-suggestion--subcategory-column {
-  display: none;
-}
-
-.algolia-docsearch-suggestion--subcategory-inline {
-  display: inline;
-  color: $gray-700;
-
-  &::after {
-    padding: 0 .25rem;
-    content: "/";
-  }
-}
-
-.algolia-docsearch-suggestion--title {
-  display: inline;
-  font-weight: 500;
-  color: $gray-800;
-}
-
-.algolia-docsearch-suggestion--text {
-  color: $gray-800;
-  @include font-size(.75rem);
-}
-
-.algolia-docsearch-suggestion--highlight {
-  color: $purple;
-  background-color: rgba($purple, .1);
-}
-
-.algolia-docsearch-footer {
-  padding: .5rem 1rem 0;
-  margin-top: .625rem;
-  @include font-size(.75rem);
-  color: $gray-600;
-  border-top: 1px solid rgba(0, 0, 0, .1);
-}
-
-.algolia-docsearch-footer--logo {
-  color: inherit;
-}
diff --git a/site/assets/scss/_anchor.scss b/site/assets/scss/_anchor.scss
index 96a7dbf9c..5bb39150b 100644
--- a/site/assets/scss/_anchor.scss
+++ b/site/assets/scss/_anchor.scss
@@ -1,11 +1,21 @@
-.anchorjs-link {
+.anchor-link {
+  padding: 0 .175rem;
   font-weight: 400;
   color: rgba($link-color, .5);
-  @include transition(color .15s ease-in-out);
+  text-decoration: none;
+  opacity: 0;
+  @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+
+  &::after {
+    content: "#";
+  }
 
   &:focus,
-  &:hover {
+  &:hover,
+  :hover > &,
+  :target > & {
     color: $link-color;
     text-decoration: none;
+    opacity: 1;
   }
 }
diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss
index 73db11e18..03fe2fe1f 100644
--- a/site/assets/scss/_brand.scss
+++ b/site/assets/scss/_brand.scss
@@ -4,24 +4,24 @@
 
 // Logo series wrapper
 .bd-brand-logos {
-  color: $bd-purple-bright;
+  color: $bd-violet;
 
   .inverse {
     color: $white;
-    background-color: $bd-purple-bright;
+    background-color: $bd-violet;
   }
 }
 
 // Individual items
 .bd-brand-item {
   + .bd-brand-item {
-    border-top: 1px solid $white;
+    border-top: 1px solid var(--bs-border-color);
   }
 
   @include media-breakpoint-up(md) {
     + .bd-brand-item {
       border-top: 0;
-      border-left: 1px solid $white;
+      border-left: 1px solid var(--bs-border-color);
     }
   }
 }
diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss
index b266d3e88..8e4c3838d 100644
--- a/site/assets/scss/_buttons.scss
+++ b/site/assets/scss/_buttons.scss
@@ -2,54 +2,51 @@
 //
 // Custom buttons for the docs.
 
+// scss-docs-start btn-css-vars-example
 .btn-bd-primary {
-  font-weight: 600;
-  color: $white;
-  background-color: $bd-purple-bright;
-  border-color: $bd-purple-bright;
-
-  &:hover,
-  &:active {
-    color: $white;
-    background-color: shade-color($bd-purple-bright, 20%);
-    border-color: shade-color($bd-purple-bright, 20%);
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-  }
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bs-white);
+  --bs-btn-bg: var(--bd-violet-bg);
+  --bs-btn-border-color: var(--bd-violet-bg);
+  --bs-btn-hover-color: var(--bs-white);
+  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
+  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
+  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
 }
-
-.btn-bd-download {
-  font-weight: 600;
-  color: $bd-download;
-  border-color: $bd-download;
-
-  &:hover,
-  &:active {
-    color: $bd-dark;
-    background-color: $bd-download;
-    border-color: $bd-download;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-download, .25);
-  }
+// scss-docs-end btn-css-vars-example
+
+.btn-bd-accent {
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bd-accent);
+  --bs-btn-border-color: var(--bd-accent);
+  --bs-btn-hover-color: var(--bd-dark);
+  --bs-btn-hover-bg: var(--bd-accent);
+  --bs-btn-hover-border-color: var(--bd-accent);
+  --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: var(--bs-btn-hover-bg);
+  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
 }
 
 .btn-bd-light {
-  color: $gray-600;
-  border-color: $gray-300;
+  --btn-custom-color: #{mix($bd-violet, $white, 75%)};
+
+  --bs-btn-color: var(--bs-gray-600);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-color: var(--btn-custom-color);
+  --bs-btn-hover-border-color: var(--btn-custom-color);
+  --bs-btn-active-color: var(--btn-custom-color);
+  --bs-btn-active-bg: var(--bs-white);
+  --bs-btn-active-border-color: var(--btn-custom-color);
+  --bs-btn-focus-border-color: var(--btn-custom-color);
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+}
 
-  .show > &,
-  &:hover,
-  &:active {
-    color: $bd-purple-bright;
-    background-color: $white;
-    border-color: $bd-purple-bright;
-  }
+.bd-btn-lg {
+  --bs-btn-border-radius: .5rem;
 
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-  }
+  padding: .8125rem 2rem;
 }
diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
index aff91f18b..c3e5629a8 100644
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -3,39 +3,38 @@
 //
 
 .bd-callout {
+  --#{$prefix}link-color-rgb: var(--bd-callout-link);
+  --#{$prefix}code-color: var(--bd-callout-code-color);
+
   padding: 1.25rem;
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
-  border: 1px solid $gray-200;
-  border-left-width: .25rem;
-  @include border-radius();
+  color: var(--bd-callout-color, inherit);
+  background-color: var(--bd-callout-bg, var(--bs-gray-100));
+  border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
 
   h4 {
     margin-bottom: .25rem;
   }
 
-  p:last-child {
+  > :last-child {
     margin-bottom: 0;
   }
 
-  code {
-    @include border-radius();
-  }
-
   + .bd-callout {
     margin-top: -.25rem;
   }
-}
-
-// Variations
-.bd-callout-info {
-  border-left-color: $bd-info;
-}
 
-.bd-callout-warning {
-  border-left-color: $bd-warning;
+  .highlight {
+    background-color: rgba($black, .05);
+  }
 }
 
-.bd-callout-danger {
-  border-left-color: $bd-danger;
+// Variations
+@each $variant in $bd-callout-variants {
+  .bd-callout-#{$variant} {
+    --bd-callout-color: var(--bs-#{$variant}-text-emphasis);
+    --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
+    --bd-callout-border: var(--bs-#{$variant}-border-subtle);
+  }
 }
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 83b9a8b9e..de709d09b 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -2,7 +2,8 @@
 //
 // JS-based `Copy` buttons for code snippets.
 
-.bd-clipboard {
+.bd-clipboard,
+.bd-edit {
   position: relative;
   display: none;
   float: right;
@@ -16,22 +17,28 @@
   }
 }
 
-.btn-clipboard {
-  position: absolute;
-  top: .65rem;
-  right: .65rem;
-  z-index: 10;
+.btn-clipboard,
+.btn-edit {
   display: block;
-  padding: .25rem .5rem;
-  @include font-size(.65em);
-  color: $primary;
-  background-color: $white;
-  border: 1px solid;
-  @include border-radius();
+  padding: .5em;
+  line-height: 1;
+  color: var(--bs-body-color);
+  background-color: var(--bd-pre-bg);
+  border: 0;
+  @include border-radius(.25rem);
+
+  &:hover {
+    color: var(--bs-link-hover-color);
+  }
 
-  &:hover,
   &:focus {
-    color: $white;
-    background-color: $primary;
+    z-index: 3;
   }
 }
+
+.btn-clipboard {
+  position: relative;
+  z-index: 2;
+  margin-top: 1.25rem;
+  margin-right: .75rem;
+}
diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index a71a8973b..da4bbace1 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -41,7 +41,6 @@
 }
 
 // stylelint-disable declaration-block-single-line-max-declarations
-
 .bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
 .bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
 .bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index f93f1ee98..fde8b7f41 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -1,105 +1,37 @@
 //
-// Grid examples
+// Docs examples
 //
 
-.bd-example-row {
-  .row {
-    > .col,
-    > [class^="col-"] {
-      padding-top: .75rem;
-      padding-bottom: .75rem;
-      background-color: rgba(39, 41, 43, .03);
-      border: 1px solid rgba(39, 41, 43, .1);
-    }
-  }
-
-  .row + .row {
-    margin-top: 1rem;
-  }
-}
-
-.bd-example-row-flex-cols .row {
-  min-height: 10rem;
-  background-color: rgba(255, 0, 0, .1);
-}
-
-.bd-example-cssgrid {
-  text-align: center;
-
-  .grid + .grid {
-    margin-top: 1rem;
-  }
-
-  .grid > * {
-    padding-top: .75rem;
-    padding-bottom: .75rem;
-    background-color: rgba(255, 0, 255, .1);
-    border: 1px solid rgba(255, 0, 255, .25);
-  }
-}
-
-.bd-highlight {
-  background-color: rgba($bd-purple, .15);
-  border: 1px solid rgba($bd-purple, .15);
-}
-
-// Grid mixins
-.example-container {
-  width: 800px;
-  @include make-container();
-}
-
-.example-row {
-  @include make-row();
-}
-
-.example-content-main {
-  @include make-col-ready();
-
-  @include media-breakpoint-up(sm) {
-    @include make-col(6);
-  }
-
-  @include media-breakpoint-up(lg) {
-    @include make-col(8);
-  }
-}
-
-.example-content-secondary {
-  @include make-col-ready();
+.bd-code-snippet {
+  margin: 0 ($bd-gutter-x * -.5) 1rem;
+  border: solid var(--bs-border-color);
+  border-width: 1px 0;
 
-  @include media-breakpoint-up(sm) {
-    @include make-col(6);
-  }
-
-  @include media-breakpoint-up(lg) {
-    @include make-col(4);
+  @include media-breakpoint-up(md) {
+    margin-right: 0;
+    margin-left: 0;
+    border-width: 1px;
+    @include border-radius(var(--bs-border-radius));
   }
 }
 
-
-//
-// Docs examples
-//
-
 .bd-example {
+  --bd-example-padding: 1rem;
+
   position: relative;
-  padding: 1rem;
-  margin: 1rem (-$grid-gutter-width * .5) 0;
-  border: solid $gray-300;
-  border-width: 1px 0 0;
+  padding: var(--bd-example-padding);
+  margin: 0 ($bd-gutter-x * -.5) 1rem;
+  border: solid var(--bs-border-color);
+  border-width: 1px 0;
   @include clearfix();
 
-  @include media-breakpoint-up(sm) {
-    padding: 1.5rem;
+  @include media-breakpoint-up(md) {
+    --bd-example-padding: 1.5rem;
+
     margin-right: 0;
     margin-left: 0;
     border-width: 1px;
-    @include border-top-radius(.25rem);
-
-    + .bd-clipboard + .highlight {
-      @include border-bottom-radius(.25rem);
-    }
+    @include border-radius(var(--bs-border-radius));
   }
 
   + p {
@@ -116,7 +48,7 @@
   > .alert + .alert,
   > .navbar + .navbar,
   > .progress + .progress {
-    margin-top: 1rem;
+    margin-top: $spacer;
   }
 
   > .dropdown-menu {
@@ -124,10 +56,15 @@
     display: block;
   }
 
-  > :last-child {
+  > :last-child,
+  > nav:last-child .breadcrumb {
     margin-bottom: 0;
   }
 
+  > hr:last-child {
+    margin-bottom: $spacer;
+  }
+
   // Images
   > svg + svg,
   > img + img {
@@ -156,28 +93,81 @@
   .fixed-top,
   .sticky-top {
     position: static;
-    margin: -1rem -1rem 1rem;
+    margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
   }
 
-  .fixed-bottom {
+  .fixed-bottom,
+  .sticky-bottom {
     position: static;
-    margin: 1rem -1rem -1rem;
-  }
+    margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list
 
-  @include media-breakpoint-up(sm) {
-    .fixed-top,
-    .sticky-top {
-      margin: -1.5rem -1.5rem 1rem;
-    }
-    .fixed-bottom {
-      margin: 1rem -1.5rem -1.5rem;
-    }
   }
 
   // Pagination
   .pagination {
-    margin-top: .5rem;
-    margin-bottom: .5rem;
+    margin-bottom: 0;
+  }
+}
+
+//
+// Grid examples
+//
+
+.bd-example-row [class^="col"],
+.bd-example-cols [class^="col"] > *,
+.bd-example-cssgrid [class*="grid"] > * {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  background-color: rgba(var(--bd-violet-rgb), .15);
+  border: 1px solid rgba(var(--bd-violet-rgb), .3);
+}
+
+.bd-example-row .row + .row,
+.bd-example-cssgrid .grid + .grid {
+  margin-top: 1rem;
+}
+
+.bd-example-row-flex-cols .row {
+  min-height: 10rem;
+  background-color: rgba(var(--bd-violet-rgb), .15);
+}
+
+.bd-example-flex div:not(.vr) {
+  background-color: rgba(var(--bd-violet-rgb), .15);
+  border: 1px solid rgba(var(--bd-violet-rgb), .3);
+}
+
+// Grid mixins
+.example-container {
+  width: 800px;
+  @include make-container();
+}
+
+.example-row {
+  @include make-row();
+}
+
+.example-content-main {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(8);
+  }
+}
+
+.example-content-secondary {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(4);
   }
 }
 
@@ -186,9 +176,9 @@
   .ratio {
     display: inline-block;
     width: 10rem;
-    color: $gray-600;
-    background-color: $gray-100;
-    border: $border-width solid $border-color;
+    color: var(--bs-secondary-color);
+    background-color: var(--bs-tertiary-bg);
+    border: var(--bs-border-width) solid var(--bs-border-color);
 
     > div {
       display: flex;
@@ -207,18 +197,7 @@
   }
 }
 
-.bd-example-modal {
-  background-color: #fafafa;
-
-  .modal {
-    position: static;
-    display: block;
-  }
-}
-
 .bd-example-offcanvas {
-  @include border-start-radius(0);
-
   .offcanvas {
     position: static;
     display: block;
@@ -229,37 +208,59 @@
 }
 
 // Tooltips
-.tooltip-demo a {
-  white-space: nowrap;
+.tooltip-demo {
+  a {
+    white-space: nowrap;
+  }
+
+  .btn {
+    margin: .25rem .125rem;
+  }
 }
 
+// scss-docs-start custom-tooltip
+.custom-tooltip {
+  --bs-tooltip-bg: var(--bd-violet-bg);
+  --bs-tooltip-color: var(--bs-white);
+}
+// scss-docs-end custom-tooltip
+
+// scss-docs-start custom-popovers
+.custom-popover {
+  --bs-popover-max-width: 200px;
+  --bs-popover-border-color: var(--bd-violet-bg);
+  --bs-popover-header-bg: var(--bd-violet-bg);
+  --bs-popover-header-color: var(--bs-white);
+  --bs-popover-body-padding-x: 1rem;
+  --bs-popover-body-padding-y: .5rem;
+}
+// scss-docs-end custom-popovers
+
 // Scrollspy demo on fixed height div
 .scrollspy-example {
-  position: relative;
   height: 200px;
   margin-top: .5rem;
   overflow: auto;
 }
 
 .scrollspy-example-2 {
-  position: relative;
   height: 350px;
   overflow: auto;
 }
 
+.simple-list-example-scrollspy {
+  .active {
+    background-color: rgba(var(--bd-violet-rgb), .15);
+  }
+}
+
 .bd-example-border-utils {
   [class^="border"] {
     display: inline-block;
     width: 5rem;
     height: 5rem;
     margin: .25rem;
-    background-color: #f5f5f5;
-  }
-}
-
-.bd-example-border-utils-0 {
-  [class^="border"] {
-    border: 1px solid $border-color;
+    background-color: var(--bs-tertiary-bg);
   }
 }
 
@@ -271,17 +272,17 @@
 
 .bd-example-position-utils {
   position: relative;
-  padding: 3em;
+  padding: 2rem;
 
   .position-relative {
     height: 200px;
-    background-color: #f5f5f5;
+    background-color: var(--bs-tertiary-bg);
   }
 
   .position-absolute {
-    width: 2em;
-    height: 2em;
-    background-color: $dark;
+    width: 2rem;
+    height: 2rem;
+    background-color: var(--bs-body-color);
     @include border-radius();
   }
 }
@@ -308,23 +309,64 @@
   min-height: 240px;
 }
 
+.bd-example-zindex-levels {
+  min-height: 15rem;
+
+  > div {
+    color: var(--bs-body-bg);
+    background-color: var(--bd-violet);
+    border: 1px solid var(--bd-purple);
+
+    > span {
+      position: absolute;
+      right: 5px;
+      bottom: 0;
+    }
+  }
+
+  > :nth-child(2) {
+    top: 3rem;
+    left: 3rem;
+  }
+  > :nth-child(3) {
+    top: 4.5rem;
+    left: 4.5rem;
+  }
+  > :nth-child(4) {
+    top: 6rem;
+    left: 6rem;
+  }
+  > :nth-child(5) {
+    top: 7.5rem;
+    left: 7.5rem;
+  }
+}
+
 //
 // Code snippets
 //
 
 .highlight {
-  padding: 1rem;
-  margin-bottom: 1rem;
-  background-color: $gray-100;
+  position: relative;
+  padding: .75rem ($bd-gutter-x * .5);
+  background-color: var(--bd-pre-bg);
 
-  @include media-breakpoint-up(sm) {
-    padding: 1rem 1.5rem;
+  @include media-breakpoint-up(md) {
+    padding: .75rem 1.25rem;
+    @include border-radius(calc(var(--bs-border-radius) - 1px));
+  }
+
+  @include media-breakpoint-up(lg) {
+    pre {
+      margin-right: 1.875rem;
+    }
   }
 
   pre {
-    padding: 0;
-    margin-top: .65rem;
-    margin-bottom: .65rem;
+    padding: .25rem 0 .875rem;
+    margin-top: .8125rem;
+    margin-bottom: 0;
+    overflow: overlay;
     white-space: pre;
     background-color: transparent;
     border: 0;
@@ -332,17 +374,31 @@
 
   pre code {
     @include font-size(inherit);
-    color: $gray-900; // Effectively the base text color
+    color: var(--bs-body-color); // Effectively the base text color
     word-wrap: normal;
   }
 }
 
-.bd-content .highlight {
-  margin-right: (-$grid-gutter-width * .5);
-  margin-left: (-$grid-gutter-width * .5);
+.bd-example-snippet .highlight pre {
+  margin-right: 0;
+}
 
-  @include media-breakpoint-up(sm) {
-    margin-right: 0;
-    margin-left: 0;
+.highlight-toolbar {
+  background-color: var(--bd-pre-bg);
+
+  + .highlight {
+    @include border-top-radius(0);
+  }
+}
+
+.bd-file-ref {
+  .highlight-toolbar {
+    @include media-breakpoint-up(md) {
+      @include border-top-radius(calc(var(--bs-border-radius) - 1px));
+    }
   }
 }
+
+.bd-content .bd-code-snippet {
+  margin-bottom: 1rem;
+}
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index f2b5cfc54..811883b49 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -2,14 +2,14 @@
 // Bootstrap docs content theming
 //
 
-// Offset for the sticky header
-@include media-breakpoint-up(md) {
-  :root {
-    scroll-padding-top: 4rem;
+.bd-content {
+  > h2,
+  > h3,
+  > h4 {
+    --bs-heading-color: var(--bs-emphasis-color);
   }
-}
 
-.bd-content {
+  // Offset content from fixed navbar when jumping to headings
   > h2:not(:first-child) {
     margin-top: 3rem;
   }
@@ -31,20 +31,28 @@
   }
 
   // Override Bootstrap defaults
-  > .table {
+  > .table,
+  > .table-responsive .table {
+    --bs-table-border-color: var(--bs-border-color);
+
     max-width: 100%;
     margin-bottom: 1.5rem;
     @include font-size(.875rem);
 
     @include media-breakpoint-down(lg) {
-      display: block;
-      overflow-x: auto;
-
       &.table-bordered {
         border: 0;
       }
     }
 
+    thead {
+      border-bottom: 2px solid currentcolor;
+    }
+
+    tbody:not(:first-child) {
+      border-top: 2px solid currentcolor;
+    }
+
     th,
     td {
       &:first-child {
@@ -56,14 +64,45 @@
       }
     }
 
+    th {
+      color: var(--bs-emphasis-color);
+    }
+
+    strong {
+      color: var(--bs-emphasis-color);
+    }
+
     // Prevent breaking of code
-    td:first-child > code {
+    th,
+    td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
       white-space: nowrap;
     }
   }
 }
 
+.table-options {
+  td:nth-child(2) {
+    min-width: 160px;
+  }
+}
+
+.table-options td:last-child,
+.table-utilities td:last-child {
+  min-width: 280px;
+}
+
+.table-swatches {
+  th {
+    color: var(--bs-emphasis-color);
+  }
+
+  td code {
+    white-space: nowrap;
+  }
+}
+
 .bd-title {
+  --bs-heading-color: var(--bs-emphasis-color);
   @include font-size(3rem);
 }
 
@@ -72,10 +111,52 @@
   font-weight: 300;
 }
 
-.bd-text-purple-bright {
-  color: $bd-purple-bright;
+.bi {
+  width: 1em;
+  height: 1em;
+  vertical-align: -.125em;
+  fill: currentcolor;
+}
+
+.border-lg-start {
+  @include media-breakpoint-up(lg) {
+    border-left: var(--bs-border-width) solid var(--bs-border-color);
+  }
 }
 
-.bd-bg-purple-bright {
-  background-color: $bd-purple-bright;
+// stylelint-disable selector-no-qualifying-type
+.bd-summary-link {
+  color: var(--bs-link-color);
+
+  &:hover,
+  details[open] > & {
+    color: var(--bs-link-hover-color);
+  }
+}
+// stylelint-enable selector-no-qualifying-type
+
+// scss-docs-start custom-color-mode
+[data-bs-theme="blue"] {
+  --bs-body-color: var(--bs-white);
+  --bs-body-color-rgb: #{to-rgb($white)};
+  --bs-body-bg: var(--bs-blue);
+  --bs-body-bg-rgb: #{to-rgb($blue)};
+  --bs-tertiary-bg: #{$blue-600};
+
+  .dropdown-menu {
+    --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
+    --bs-dropdown-link-active-bg: #{$blue-700};
+  }
+
+  .btn-secondary {
+    --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
+    --bs-btn-border-color: #{rgba($white, .25)};
+    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
+    --bs-btn-hover-border-color: #{rgba($white, .25)};
+    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
+    --bs-btn-active-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
+  }
 }
+// scss-docs-end custom-color-mode
diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss
index 87cee6d2b..42e1ca051 100644
--- a/site/assets/scss/_footer.scss
+++ b/site/assets/scss/_footer.scss
@@ -4,12 +4,12 @@
 
 .bd-footer {
   a {
-    color: $gray-700;
+    color: var(--bs-body-color);
     text-decoration: none;
 
     &:hover,
     &:focus {
-      color: $link-color;
+      color: var(--bs-link-hover-color);
       text-decoration: underline;
     }
   }
diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss
index 707c4949d..d0482d9b7 100644
--- a/site/assets/scss/_layout.scss
+++ b/site/assets/scss/_layout.scss
@@ -1,13 +1,14 @@
+.bd-gutter {
+  --bs-gutter-x: #{$bd-gutter-x};
+}
+
 .bd-layout {
-  @include media-breakpoint-up(md) {
-    display: grid;
-    gap: $grid-gutter-width;
-    grid-template-areas: "sidebar main";
-    grid-template-columns: 1fr 3fr;
-  }
 
   @include media-breakpoint-up(lg) {
+    display: grid;
+    grid-template-areas: "sidebar main";
     grid-template-columns: 1fr 5fr;
+    gap: $grid-gutter-width;
   }
 }
 
@@ -18,22 +19,27 @@
 .bd-main {
   grid-area: main;
 
+  @include media-breakpoint-down(lg) {
+    max-width: 760px;
+    margin-inline: auto;
+  }
+
   @include media-breakpoint-up(md) {
     display: grid;
-    gap: inherit;
     grid-template-areas:
       "intro"
       "toc"
       "content";
     grid-template-rows: auto auto 1fr;
+    gap: inherit;
   }
 
   @include media-breakpoint-up(lg) {
     grid-template-areas:
       "intro   toc"
       "content toc";
-    grid-template-columns: 4fr 1fr;
     grid-template-rows: auto 1fr;
+    grid-template-columns: 4fr 1fr;
   }
 }
 
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 2e742e76d..d74d1ec24 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -1,38 +1,119 @@
 .bd-masthead {
+  --bd-pink-rgb: #{to-rgb($pink)};
   padding: 3rem 0;
-  background: linear-gradient(165deg, tint-color($bd-purple-light, 85%) 50%, $white 50%);
+  // stylelint-disable
+  background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), .01), rgba(var(--bs-body-bg-rgb), 1) 85%),
+                    radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), .5), transparent 50%),
+                    radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), .5), transparent 50%),
+                    radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), .5), transparent 50%),
+                    radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), .5), transparent 50%);
+  // stylelint-enable
 
   h1 {
+    --bs-heading-color: var(--bs-emphasis-color);
     @include font-size(4rem);
-    line-height: 1;
   }
 
-  p:not(.lead) {
-    color: $gray-700;
+  .lead {
+    @include font-size(1rem);
+    font-weight: 400;
+    color: var(--bs-secondary-color);
   }
 
-  .btn {
-    padding: .8rem 2rem;
-    font-weight: 600;
+  .bd-code-snippet {
+    margin: 0;
+    border-color: var(--bs-border-color-translucent);
+    border-width: 1px;
+    @include border-radius(.5rem);
   }
-  .lead {
-    @include font-size(1.5rem);
-    font-weight: 400;
-    color: $gray-700;
+
+  .highlight {
+    width: 100%;
+    padding: .5rem 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: rgba(var(--bs-body-color-rgb), .075);
+    @include border-radius(calc(.5rem - 1px));
+
+    @include media-breakpoint-up(lg) {
+      padding-right: 4rem;
+    }
+
+    pre {
+      padding: 0;
+      margin: .625rem 0;
+      overflow: hidden;
+    }
+  }
+  .btn-clipboard {
+    position: absolute;
+    top: -.625rem;
+    right: 0;
+    background-color: transparent;
+  }
+
+  #carbonads { // stylelint-disable-line selector-max-id
+    margin-inline: auto;
+  }
+
+  @include media-breakpoint-up(md) {
+    .lead {
+      @include font-size(1.5rem);
+    }
   }
 }
 
-@include media-breakpoint-up(md) {
-  .mw-md-75 { max-width: 75%; }
+.masthead-followup {
+  h2,
+  h3,
+  h4 {
+    --bs-heading-color: var(--bs-emphasis-color);
+  }
+
+  .lead {
+    @include font-size(1rem);
+  }
+
+  @include media-breakpoint-up(md) {
+    .lead {
+      @include font-size(1.25rem);
+    }
+  }
 }
 
 .masthead-followup-icon {
-  padding: .75rem;
-  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .01));
-  @include border-radius(.75rem);
-  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1);
+  padding: 1rem;
+  color: rgba(var(--bg-rgb), 1);
+  background-color: rgba(var(--bg-rgb), .1);
+  background-blend-mode: multiple;
+  @include border-radius(1rem);
+  mix-blend-mode: darken;
+
+  svg {
+    filter: drop-shadow(0 1px 1px var(--bs-body-bg));
+  }
+}
+
+.masthead-notice {
+  background-color: var(--bd-accent);
+  box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
 }
 
-.masthead-followup-svg {
-  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125));
+.animate-img {
+  > img {
+    @include transition(transform .2s ease-in-out);
+  }
+
+  &:hover > img {
+    transform: scale(1.1);
+  }
+}
+
+@if $enable-dark-mode {
+  [data-bs-theme="dark"] {
+    .masthead-followup-icon {
+      mix-blend-mode: lighten;
+    }
+  }
 }
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 053cadf2e..2b598bf67 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -1,32 +1,129 @@
 .bd-navbar {
   padding: .75rem 0;
-  background-color: $bd-purple-bright;
+  background-color: transparent;
+  box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    display: block;
+    content: "";
+    background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+  }
+
+  .bd-navbar-toggle {
+    @include media-breakpoint-down(lg) {
+      width: 4.25rem;
+    }
+  }
 
   .navbar-toggler {
     padding: 0;
+    margin-right: -.5rem;
     border: 0;
+
+    &:first-child {
+      margin-left: -.5rem;
+    }
+
+    .bi {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .navbar-brand {
+    color: $white;
+    @include transition(transform .2s ease-in-out);
+
+    &:hover {
+      transform: rotate(-5deg) scale(1.1);
+    }
+  }
+
+  .navbar-toggler,
+  .nav-link {
+    padding-right: $spacer * .25;
+    padding-left: $spacer * .25;
+    color: rgba($white, .85);
+
+    &:hover,
+    &:focus {
+      color: $white;
+    }
+
+    &.active {
+      font-weight: 600;
+      color: $white;
+    }
+  }
+
+  .navbar-nav-svg {
+    display: inline-block;
+    vertical-align: -.125rem;
+  }
+
+  .offcanvas-lg {
+    background-color: var(--bd-violet-bg);
+    border-left: 0;
+
+    @include media-breakpoint-down(lg) {
+      box-shadow: var(--bs-box-shadow-lg);
+    }
+  }
+
+  .dropdown-toggle {
+    &:focus:not(:focus-visible) {
+      outline: 0;
+    }
   }
 
-  .navbar-nav {
-    .nav-link {
-      padding-right: $spacer * .25;
-      padding-left: $spacer * .25;
-      color: rgba($white, .85);
+  .dropdown-menu {
+    --bs-dropdown-min-width: 12rem;
+    --bs-dropdown-padding-x: .25rem;
+    --bs-dropdown-padding-y: .25rem;
+    --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+    --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
+    @include rfs(.875rem, --bs-dropdown-font-size);
+    @include font-size(.875rem);
+    @include border-radius(.5rem);
+    box-shadow: $dropdown-box-shadow;
+
+    li + li {
+      margin-top: .125rem;
+    }
 
-      &:hover,
-      &:focus {
-        color: $white;
+    .dropdown-item {
+      @include border-radius(.25rem);
+
+      &:active {
+        .bi {
+          color: inherit !important; // stylelint-disable-line declaration-no-important
+        }
       }
+    }
 
-      &.active {
-        font-weight: 600;
-        color: $white;
+    .active {
+      font-weight: 600;
+
+      .bi {
+        display: block !important; // stylelint-disable-line declaration-no-important
       }
     }
   }
 
-  .navbar-nav-svg {
-    width: 1rem;
-    height: 1rem;
+  .dropdown-menu-end {
+    --bs-dropdown-min-width: 8rem;
+  }
+}
+
+@include color-mode(dark) {
+  .bd-navbar {
+    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
   }
 }
diff --git a/site/assets/scss/_placeholder-img.scss b/site/assets/scss/_placeholder-img.scss
index 90a29544e..6f5bbe418 100644
--- a/site/assets/scss/_placeholder-img.scss
+++ b/site/assets/scss/_placeholder-img.scss
@@ -6,8 +6,8 @@
 
 .bd-placeholder-img {
   @include font-size(1.125rem);
-  text-anchor: middle;
   user-select: none;
+  text-anchor: middle;
 }
 
 .bd-placeholder-img-lg {
diff --git a/site/assets/scss/_scrolling.scss b/site/assets/scss/_scrolling.scss
new file mode 100644
index 000000000..0aaf7444e
--- /dev/null
+++ b/site/assets/scss/_scrolling.scss
@@ -0,0 +1,16 @@
+// When navigating with the keyboard, prevent focus from landing behind the sticky header
+
+main {
+  a,
+  button,
+  input,
+  select,
+  textarea,
+  h2,
+  h3,
+  h4,
+  [tabindex="0"] {
+    scroll-margin-top: 80px;
+    scroll-margin-bottom: 100px;
+  }
+}
diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
new file mode 100644
index 000000000..592d65f98
--- /dev/null
+++ b/site/assets/scss/_search.scss
@@ -0,0 +1,173 @@
+// stylelint-disable selector-class-pattern
+
+:root {
+  --docsearch-primary-color: var(--bd-violet);
+  --docsearch-logo-color: var(--bd-violet);
+}
+
+@include color-mode(dark, true) {
+  // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
+  // in html[data-theme="dark"] selector
+  // and are slightly modified for formatting purpose
+  --docsearch-text-color: #f5f6f7;
+  --docsearch-container-background: rgba(9, 10, 17, .8);
+  --docsearch-modal-background: #15172a;
+  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  --docsearch-searchbox-background: #090a11;
+  --docsearch-searchbox-focus-background: #000;
+  --docsearch-hit-color: #bec3c9;
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-background: #090a11;
+  --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
+  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
+  --docsearch-footer-background: #1e2136;
+  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
+  --docsearch-muted-color: #7f8497;
+}
+
+.bd-search {
+  position: relative;
+
+  @include media-breakpoint-up(lg) {
+    position: absolute;
+    top: .875rem;
+    left: 50%;
+    width: 200px;
+    margin-left: -100px;
+  }
+
+  @include media-breakpoint-up(xl) {
+    width: 280px;
+    margin-left: -140px;
+  }
+
+}
+
+.DocSearch-Container {
+  --docsearch-muted-color: var(--bs-secondary-color);
+  --docsearch-hit-shadow: none;
+
+  position: fixed;
+  z-index: 2000; // Make sure to be over all components showcased in the documentation
+  cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
+
+  @include media-breakpoint-up(lg) {
+    padding-top: 4rem;
+  }
+}
+
+.DocSearch-Button {
+  --docsearch-searchbox-background: #{rgba($black, .1)};
+  --docsearch-searchbox-color: #{$white};
+  --docsearch-searchbox-focus-background: #{rgba($black, .25)};
+  --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
+  --docsearch-text-color: #{$white};
+  --docsearch-muted-color: #{rgba($white, .65)};
+
+  width: 100%;
+  height: 38px; // Match Bootstrap inputs
+  margin: 0;
+  border: 1px solid rgba($white, .4);
+  @include border-radius(.375rem);
+
+  .DocSearch-Search-Icon {
+    opacity: .65;
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    border-color: rgba($bd-accent, 1);
+
+    .DocSearch-Search-Icon {
+      opacity: 1;
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    &,
+    &:hover,
+    &:focus {
+      background: transparent;
+      border: 0;
+      box-shadow: none;
+    }
+    &:focus {
+      box-shadow: var(--docsearch-searchbox-shadow);
+    }
+  }
+}
+
+.DocSearch-Button-Keys,
+.DocSearch-Button-Placeholder {
+  @include media-breakpoint-down(lg) {
+    display: none;
+  }
+}
+
+.DocSearch-Button-Keys {
+  min-width: 0;
+  padding: .125rem .25rem;
+  background: rgba($black, .25);
+  @include border-radius(.25rem);
+}
+
+.DocSearch-Button-Key {
+  top: 0;
+  width: auto;
+  height: 1.25rem;
+  padding-right: .125rem;
+  padding-left: .125rem;
+  margin-right: 0;
+  font-size: .875rem;
+  background: none;
+  box-shadow: none;
+}
+
+.DocSearch-Commands-Key {
+  padding-left: 1px;
+  font-size: .875rem;
+  background-color: rgba($black, .1);
+  background-image: none;
+  box-shadow: none;
+}
+
+.DocSearch-Form {
+  @include border-radius(var(--bs-border-radius));
+}
+
+.DocSearch-Hits {
+  mark {
+    padding: 0;
+  }
+}
+
+.DocSearch-Hit {
+  padding-bottom: 0;
+  @include border-radius(0);
+
+  a {
+    @include border-radius(0);
+    border: solid var(--bs-border-color);
+    border-width: 0 1px 1px;
+  }
+
+  &:first-child a {
+    @include border-top-radius(var(--bs-border-radius));
+    border-top-width: 1px;
+  }
+  &:last-child a {
+    @include border-bottom-radius(var(--bs-border-radius));
+  }
+}
+
+.DocSearch-Hit-icon {
+  display: flex;
+  align-items: center;
+}
+
+// Fix --docsearch-logo-color that doesn't do anything
+.DocSearch-Logo svg .cls-1,
+.DocSearch-Logo svg .cls-2 {
+  fill: var(--docsearch-logo-color);
+}
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index d893ba9dc..598da3d5b 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -1,87 +1,64 @@
 .bd-sidebar {
-  @include media-breakpoint-down(md) {
-    margin: 0 -.75rem 1rem;
-  }
-}
-
-.bd-links {
-  overflow: auto;
-  font-weight: 600;
-
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     position: sticky;
     top: 5rem;
     // Override collapse behaviors
     // stylelint-disable-next-line declaration-no-important
     display: block !important;
-    height: subtract(100vh, 7rem);
+    height: subtract(100vh, 6rem);
     // Prevent focus styles to be cut off:
     padding-left: .25rem;
     margin-left: -.25rem;
     overflow-y: auto;
   }
 
-  > ul {
-    @include media-breakpoint-down(md) {
-      padding: 1.5rem .75rem;
-      background-color: $gray-100;
-      border-bottom: 1px solid $gray-200;
+  @include media-breakpoint-down(lg) {
+    .offcanvas-lg {
+      border-right-color: var(--bs-border-color);
+      box-shadow: var(--bs-box-shadow-lg);
     }
   }
+}
 
-  a {
-    padding: .1875rem .5rem;
-    margin-top: .125rem;
-    margin-left: 1.25rem;
-    color: rgba($black, .65);
-    text-decoration: if($link-decoration == none, null, none);
+.bd-links-heading {
+  color: var(--bs-emphasis-color);
+}
 
-    &:hover,
-    &:focus {
-      color: rgba($black, .85);
-      text-decoration: if($link-hover-decoration == underline, none, null);
-      background-color: rgba($bd-purple-bright, .1);
-    }
+.bd-links-nav {
+  @include media-breakpoint-down(lg) {
+    font-size: .875rem;
   }
 
-  .btn {
-    // Custom styles (as we don't have a completely neutral button style)
-    padding: .25rem .5rem;
-    font-weight: 600;
-    color: rgba($black, .65);
-    background-color: transparent;
-    border: 0;
-
-    &:hover,
-    &:focus {
-      color: rgba($black, .85);
-      background-color: rgba($bd-purple-bright, .1);
-    }
+  @include media-breakpoint-between(xs, lg) {
+    column-count: 2;
+    column-gap: 1.5rem;
 
-    &:focus {
-      box-shadow: 0 0 0 1px rgba($bd-purple-bright, .7);
+    .bd-links-group {
+      break-inside: avoid;
     }
 
-    // Add chevron if there's a submenu
-    &::before {
-      width: 1.25em;
-      line-height: 0; // Align in the middle
-      content: escape-svg($sidebar-collapse-icon);
-      @include transition(transform .35s ease);
-      transform-origin: .5em 50%;
+    .bd-links-span-all {
+      column-span: all;
     }
+  }
+}
 
-    &[aria-expanded="true"] {
-      color: rgba($black, .85);
+.bd-links-link {
+  padding: .1875rem .5rem;
+  margin-top: .125rem;
+  margin-left: 1.125rem;
+  color: var(--bs-body-color);
+  text-decoration: if($link-decoration == none, null, none);
 
-      &::before {
-        transform: rotate(90deg);
-      }
-    }
+  &:hover,
+  &:focus,
+  &.active {
+    color: var(--bs-emphasis-color);
+    text-decoration: if($link-hover-decoration == underline, none, null);
+    background-color: var(--bd-sidebar-link-bg);
   }
 
-  .active {
+  &.active {
     font-weight: 600;
-    color: rgba($black, .85);
   }
 }
diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
deleted file mode 100644
index 8377ff423..000000000
--- a/site/assets/scss/_subnav.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.bd-subnavbar {
-  // The position and z-index are needed for the dropdown to stay on top of the content
-  position: relative;
-  z-index: $zindex-sticky;
-  background-color: rgba($white, .95);
-  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15);
-
-  .dropdown-menu {
-    @include font-size(.875rem);
-    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05);
-  }
-
-  .dropdown-item.current {
-    font-weight: 600;
-    background-image: escape-svg($dropdown-active-icon);
-    background-repeat: no-repeat;
-    background-position: right $dropdown-item-padding-x top .6rem;
-    background-size: .75rem .75rem;
-  }
-
-  @include media-breakpoint-up(md) {
-    position: sticky;
-    top: 0;
-  }
-}
-
-.bd-search {
-  position: relative;
-
-  &::after {
-    position: absolute;
-    top: .4rem;
-    right: .4rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 1.5rem;
-    padding-right: .25rem;
-    padding-left: .25rem;
-    @include font-size(.75rem);
-    color: $gray-600;
-    content: "Ctrl + /";
-    border: $border-width solid $border-color;
-    @include border-radius(.125rem);
-  }
-
-  @include media-breakpoint-down(md) {
-    width: 100%;
-  }
-
-  .form-control {
-    padding-right: 3.75rem;
-
-    &:focus {
-      border-color: $bd-purple-bright;
-      box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-    }
-  }
-}
-
-.bd-sidebar-toggle {
-  color: $text-muted;
-
-  &:hover,
-  &:focus {
-    color: $bd-purple-bright;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-  }
-
-  .bi-collapse { display: none; }
-
-  &:not(.collapsed) {
-    .bi-expand { display: none; }
-    .bi-collapse { display: inline-block; }
-  }
-}
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 8120bbef2..38ac11fb8 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -1,101 +1,141 @@
-// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations, selector-class-pattern
+:root,
+[data-bs-theme="light"] {
+  // --base00: #fff;
+  // --base01: #f5f5f5;
+  --base02: #c8c8fa;
+  --base03: #565c64;
+  --base04: #666;
+  --base05: #333;
+  --base06: #fff;
+  --base07: #{$teal-700}; // #9a6700
+  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+  --base09: #{$cyan-700}; // #087990
+  --base0A: #{$purple-500}; // #795da3
+  --base0B: #{$blue-700}; // #183691
+  --base0C: #{$blue-700}; // #183691
+  --base0D: #{$purple-500}; // #795da3
+  --base0E: #{$pink-600}; // #a71d5d
+  --base0F: #333;
+}
+
+@include color-mode(dark, true) {
+  // --base00: #282c34;
+  // --base01: #353b45;
+  --base02: #3e4451;
+  --base03: #868e96;
+  --base04: #868e96;
+  --base05: #abb2bf;
+  --base06: #b6bdca;
+  --base07: #{$orange-300}; // #d19a66
+  --base08: #{$cyan-300};
+  --base09: #{$orange-300}; // #d19a66
+  --base0A: #{$yellow-200}; // #e5c07b
+  --base0B: #{$teal-300}; // #98c379
+  --base0C: #{$teal-300}; // #56b6c2
+  --base0D: #{$blue-300}; // #61afef
+  --base0E: #{$indigo-200}; // #c678dd
+  --base0F: #{$red-300}; // #be5046
+
+  .language-diff .gd {
+    color: $red-400;
+  }
+  .language-diff .gi {
+    color: $green-400;
+  }
+}
+
+.hl { background-color: var(--base02); }
+.c { color: var(--base03); }
+.err { color: var(--base08); }
+.k { color: var(--base0E); }
+.l { color: var(----base09); }
+.n { color: var(--base08); }
+.o { color: var(--base05); }
+.p { color: var(--base05); }
+.cm { color: var(--base04); }
+.cp { color: var(--base08); }
+.c1 { color: var(--base03); }
+.cs { color: var(--base04); }
+.gd { color: var(--base08); }
+.ge { font-style: italic; }
+.gh {
+  font-weight: 600;
+  color: var(--base0A);
+}
+.gi { color: var(--bs-success); }
+.gp {
+  font-weight: 600;
+  color: var(--base04);
+}
+.gs { font-weight: 600; }
+.gu {
+  font-weight: 600;
+  color: var(--base0C);
+}
+.kc { color: var(--base0E); }
+.kd { color: var(--base0E); }
+.kn { color: var(--base0C); }
+.kp { color: var(--base0E); }
+.kr { color: var(--base0E); }
+.kt { color: var(--base0A); }
+.ld { color: var(--base0C); }
+.m { color: var(--base09); }
+.s { color: var(--base0C); }
+.na { color: var(--base0A); }
+.nb { color: var(--base05); }
+.nc { color: var(--base07); }
+.no { color: var(--base08); }
+.nd { color: var(--base07); }
+.ni { color: var(--base08); }
+.ne { color: var(--base08); }
+.nf { color: var(--base0B); }
+.nl { color: var(--base05); }
+.nn { color: var(--base0A); }
+.nx { color: var(--base0A); }
+.py { color: var(--base08); }
+.nt { color: var(--base08); }
+.nv { color: var(--base08); }
+.ow { color: var(--base0C); }
+.w { color: #fff; }
+.mf { color: var(--base09); }
+.mh { color: var(--base09); }
+.mi { color: var(--base09); }
+.mo { color: var(--base09); }
+.sb { color: var(--base0C); }
+.sc { color: #fff; }
+.sd { color: var(--base04); }
+.s2 { color: var(--base0C); }
+.se { color: var(--base09); }
+.sh { color: var(--base0C); }
+.si { color: var(--base09); }
+.sx { color: var(--base0C); }
+.sr { color: var(--base0C); }
+.s1 { color: var(--base0C); }
+.ss { color: var(--base0C); }
+.bp { color: var(--base05); }
+.vc { color: var(--base08); }
+.vg { color: var(--base08); }
+.vi { color: var(--base08); }
+.il { color: var(--base09); }
 
-/* Background .chroma { background-color: #f0f0f0; } */
-/* Other .chroma .x { } */
-/* Error .chroma .err { } */
-/* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */
-/* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } */
-/* LineHighlight .chroma .hl { display: block; width: 100%; background-color: #ffffcc; } */
-/* LineNumbersTable .chroma .lnt { margin-right: .4em; padding: 0 .4em; } */
-/* LineNumbers .chroma .ln { margin-right: .4em; padding: 0 .4em; } */
+// Color commas in rgba() values
+.m + .o { color: var(--base03); }
 
-/* Comment */ .chroma .c { color: #727272; }
-/* CommentHashbang */ .chroma .ch { font-style: italic; color: #60a0b0; }
-/* CommentMultiline */ .chroma .cm { color: #727272; }
-/* CommentPreproc */ .chroma .cp { color: #008085; }
-/* CommentPreprocFile */ .chroma .cpf { color: #007020; }
-/* CommentSingle */ .chroma .c1 { color: #727272; }
-/* CommentSpecial */ .chroma .cs { color: #727272; }
-/* Generic .chroma .g { } */
-/* GenericDeleted */ .chroma .gd { background-color: #fcc; border: 1px solid #c00; }
-/* GenericEmph */ .chroma .ge { font-style: italic; }
-/* GenericError */ .chroma .gr { color: #f00; }
-/* GenericHeading */ .chroma .gh { color: #030; }
-/* GenericInserted */ .chroma .gi { background-color: #cfc; border: 1px solid #0c0; }
-/* GenericOutput */ .chroma .go { color: #aaa; }
-/* GenericPrompt */ .chroma .gp { color: #009; }
-/* GenericStrong */ .chroma .gs { font-weight: 700; }
-/* GenericSubheading */ .chroma .gu { color: #030; }
-/* GenericTraceback */ .chroma .gt { color: #9c6; }
-/* GenericUnderline */ .chroma .gl { text-decoration: underline; }
-/* Keyword */ .chroma .k { color: #069; }
-/* KeywordConstant */ .chroma .kc { color: #069; }
-/* KeywordDeclaration */ .chroma .kd { color: #069; }
-/* KeywordNamespace */ .chroma .kn { color: #069; }
-/* KeywordPseudo */ .chroma .kp { color: #069; }
-/* KeywordReserved */ .chroma .kr { color: #069; }
-/* KeywordType */ .chroma .kt { color: #078; }
-/* Literal .chroma .l { } */
-/* LiteralDate .chroma .ld { color: #c24f19 } */
-/* LiteralNumber */ .chroma .m { color: #c24f19; }
-/* LiteralNumberBin */ .chroma .mb { color: #40a070; }
-/* LiteralNumberFloat */ .chroma .mf { color: #c24f19; }
-/* LiteralNumberHex */ .chroma .mh { color: #c24f19; }
-/* LiteralNumberInteger */ .chroma .mi { color: #c24f19; }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #c24f19; }
-/* LiteralNumberOct */ .chroma .mo { color: #c24f19; }
-/* LiteralString */ .chroma .s { color: #d73038; }
-/* LiteralStringAffix */ .chroma .sa { color: #4070a0; }
-/* LiteralStringBacktick */ .chroma .sb { color: #c30; }
-/* LiteralStringChar */ .chroma .sc { color: #c30; }
-/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0; }
-/* LiteralStringDoc */ .chroma .sd { font-style: italic; color: #c30; }
-/* LiteralStringDouble */ .chroma .s2 { color: #c30; }
-/* LiteralStringEscape */ .chroma .se { color: #c30; }
-/* LiteralStringHeredoc */ .chroma .sh { color: #c30; }
-/* LiteralStringInterpol */ .chroma .si { color: #a00; }
-/* LiteralStringOther */ .chroma .sx { color: #c30; }
-/* LiteralStringRegex */ .chroma .sr { color: #337e7e; }
-/* LiteralStringSingle */ .chroma .s1 { color: #c30; }
-/* LiteralStringSymbol */ .chroma .ss { color: #fc3; }
-/* Name .chroma .n { } */
-/* NameAttribute */ .chroma .na { color: #006ee0; }
-/* NameBuiltin */ .chroma .nb { color: #366; }
-/* NameBuiltinPseudo .chroma .bp { } */
-/* NameClass */ .chroma .nc { color: #168174; }
-/* NameConstant */ .chroma .no { color: #360; }
-/* NameDecorator */ .chroma .nd { color: #6b62de; }
-/* NameEntity */ .chroma .ni { color: #727272; }
-/* NameException */ .chroma .ne { color: #c00; }
-/* NameFunction */ .chroma .nf { color: #b715f4; }
-/* NameFunctionMagic .chroma .fm { } */
-/* NameLabel */ .chroma .nl { color: #6b62de; }
-/* NameNamespace */ .chroma .nn { color: #007ca5; }
-/* NameOther .chroma .nx { } */
-/* NameProperty .chroma .py { } */
-/* NameTag */ .chroma .nt { color: #2f6f9f; }
-/* NameVariable */ .chroma .nv { color: #033; }
-/* NameVariableClass .chroma .vc { } */
-/* NameVariableGlobal .chroma .vg { } */
-/* NameVariableInstance .chroma .vi { } */
-/* NameVariableMagic .chroma .vm { } */
-/* Operator */ .chroma .o { color: #555; }
-/* OperatorWord */ .chroma .ow { color: #000; }
-/* Punctuation .chroma .p { } */
-/* TextWhitespace */ .chroma .w { color: #bbb; }
+// Fix bash
+.language-sh .c { color: var(--base03); }
 
 .chroma {
   .language-bash,
   .language-sh {
-    &::before {
-      color: #009;
+    .line::before {
+      color: var(--base03);
       content: "$ ";
       user-select: none;
     }
   }
 
   .language-powershell::before {
-    color: #009;
+    color: var(--base0C);
     content: "PM> ";
     user-select: none;
   }
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 596945628..32bf3cf62 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type
+// stylelint-disable selector-max-type, selector-no-qualifying-type
 
 .bd-toc {
   @include media-breakpoint-up(lg) {
@@ -15,23 +15,29 @@
 
     ul {
       padding-left: 0;
+      margin-bottom: 0;
       list-style: none;
 
       ul {
         padding-left: 1rem;
-        margin-top: .25rem;
       }
     }
 
-    li {
-      margin-bottom: .25rem;
-    }
-
     a {
+      display: block;
+      padding: .125rem 0 .125rem .75rem;
       color: inherit;
+      text-decoration: none;
+      border-left: .125rem solid transparent;
 
-      &:not(:hover) {
-        text-decoration: none;
+      &:hover,
+      &.active {
+        color: var(--bd-toc-color);
+        border-left-color: var(--bd-toc-color);
+      }
+
+      &.active {
+        font-weight: 500;
       }
 
       code {
@@ -40,3 +46,48 @@
     }
   }
 }
+
+.bd-toc-toggle {
+  display: flex;
+  align-items: center;
+
+  @include media-breakpoint-down(sm) {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  @include media-breakpoint-down(md) {
+    color: var(--bs-body-color);
+    border: 1px solid var(--bs-border-color);
+    @include border-radius(var(--bs-border-radius));
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[aria-expanded="true"] {
+      color: var(--bd-violet);
+      background-color: var(--bs-body-bg);
+      border-color: var(--bd-violet);
+    }
+
+    &:focus,
+    &[aria-expanded="true"] {
+      box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
+    }
+  }
+}
+
+.bd-toc-collapse {
+  @include media-breakpoint-down(md) {
+    nav {
+      padding: 1.25rem 1.25rem 1.25rem 1rem;
+      background-color: var(--bs-tertiary-bg);
+      border: 1px solid var(--bs-border-color);
+      @include border-radius(var(--bs-border-radius));
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    display: block !important; // stylelint-disable-line declaration-no-important
+  }
+}
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 110600260..5e8ab5d6c 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -1,13 +1,35 @@
-// stylelint-disable scss/dollar-variable-default
-
 // Local docs variables
-$bd-purple:        #563d7c;
-$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
+$bd-purple:        #4c0bce;
+$bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
 $bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
-$bd-dark:          #2a2730;
-$bd-download:      #ffe484;
-$bd-info:          #5bc0de;
-$bd-warning:       #f0ad4e;
-$bd-danger:        #d9534f;
-$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
-$sidebar-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
+$bd-accent:        #ffe484;
+
+$bd-gutter-x: 3rem;
+$bd-callout-variants: info, warning, danger !default;
+
+:root,
+[data-bs-theme="light"] {
+  --bd-purple: #{$bd-purple};
+  --bd-violet: #{$bd-violet};
+  --bd-accent: #{$bd-accent};
+  --bd-violet-rgb: #{to-rgb($bd-violet)};
+  --bd-accent-rgb: #{to-rgb($bd-accent)};
+  --bd-pink-rgb: #{to-rgb($pink-500)};
+  --bd-teal-rgb: #{to-rgb($teal-500)};
+  --bd-violet-bg: var(--bd-violet);
+  --bd-toc-color: var(--bd-violet);
+  --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
+  --bd-callout-link: #{to-rgb($blue-600)};
+  --bd-callout-code-color: #{$pink-600};
+  --bd-pre-bg: var(--bs-tertiary-bg);
+}
+
+@include color-mode(dark, true) {
+  --bd-violet: #{mix($bd-violet, $white, 75%)};
+  --bd-violet-bg: #{$bd-violet};
+  --bd-toc-color: var(--#{$prefix}emphasis-color);
+  --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
+  --bd-callout-link: #{to-rgb($blue-300)};
+  --bd-callout-code-color: #{$pink-300};
+  --bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
+}
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index 8b7bc99a1..af3817103 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -1,7 +1,6 @@
 /*!
  * Bootstrap Docs (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
@@ -29,15 +28,14 @@
 @import "../../../scss/mixins";
 
 // fusv-disable
-$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default
-$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
+$enable-grid-classes: false;
+$enable-cssgrid: true;
 // fusv-enable
 @import "../../../scss/grid";
 
 // Load docs components
 @import "variables";
 @import "navbar";
-@import "subnav";
 @import "masthead";
 @import "ads";
 @import "content";
@@ -53,8 +51,8 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
 @import "colors";
 @import "clipboard-js";
 @import "placeholder-img";
+@import "scrolling";
 
 // Load docs dependencies
 @import "syntax";
 @import "anchor";
-@import "algolia";
diff --git a/site/assets/scss/search.scss b/site/assets/scss/search.scss
new file mode 100644
index 000000000..149b23679
--- /dev/null
+++ b/site/assets/scss/search.scss
@@ -0,0 +1,14 @@
+/*!
+ * Bootstrap Docs (https://getbootstrap.com/)
+ * Copyright 2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+@import "../../../scss/functions";
+@import "../../../scss/variables";
+@import "../../../scss/mixins";
+@import "variables";
+
+@import "@docsearch/css/dist/style";
+@import "search";