Huge color addition, some WIP work, new color docs, rearrange color docs, incorporate new colors in some components

20 files changed, 694 insertions, 164 deletions

diff --git a/scss/_alert.scss b/scss/_alert.scss
index c8bc91b420..0afb295e34 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -54,18 +54,13 @@
 
 
 // scss-docs-start alert-modifiers
-// Generate contextual modifier classes for colorizing the alert.
-
+// Generate contextual modifier classes for colorizing the alert
 @each $state, $value in $theme-colors {
-  $alert-background: shift-color($value, $alert-bg-scale);
-  $alert-border: shift-color($value, $alert-border-scale);
-  $alert-color: shift-color($value, $alert-color-scale);
-
-  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
-    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
-  }
   .alert-#{$state} {
-    @include alert-variant($alert-background, $alert-border, $alert-color);
+    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
+    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text);
   }
 }
 // scss-docs-end alert-modifiers
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index c0ec16468d..1bddeed710 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -181,12 +181,19 @@
 // Organizationally, this must come after the `:hover` states.
 
 @each $state, $value in $theme-colors {
-  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
-  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
-  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
-    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
+  .list-group-item-#{$state} {
+    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text);
+    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
+    // --#{$prefix}list-group-action-hover-bg: #{$list-group-bg};
   }
 
-  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
+  // $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
+  // $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
+  // @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
+  //   $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
+  // }
+
+  // @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
 }
 // scss-docs-end list-group-modifiers
diff --git a/scss/_maps.scss b/scss/_maps.scss
index 2770a67615..f23efd68bb 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -25,6 +25,17 @@ $utilities-text: map-merge(
   )
 ) !default;
 $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+
+$utilities-text-emphasis-colors: (
+  "primary-emphasis": var(--#{$prefix}primary-text),
+  "secondary-emphasis": var(--#{$prefix}secondary-text),
+  "success-emphasis": var(--#{$prefix}success-text),
+  "info-emphasis": var(--#{$prefix}info-text),
+  "warning-emphasis": var(--#{$prefix}warning-text),
+  "danger-emphasis": var(--#{$prefix}danger-text),
+  "light-emphasis": var(--#{$prefix}light-text),
+  "dark-emphasis": var(--#{$prefix}dark-text)
+) !default;
 // scss-docs-end utilities-text-colors
 
 // scss-docs-start utilities-bg-colors
@@ -37,6 +48,18 @@ $utilities-bg: map-merge(
   )
 ) !default;
 $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+
+$utilities-bg-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-bg-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
+  "success-subtle": var(--#{$prefix}success-bg-subtle),
+  "info-subtle": var(--#{$prefix}info-bg-subtle),
+  "warning-subtle": var(--#{$prefix}warning-bg-subtle),
+  "danger-subtle": var(--#{$prefix}danger-bg-subtle),
+  "light-subtle": var(--#{$prefix}light-bg-subtle),
+  "dark-subtle": var(--#{$prefix}dark-bg-subtle)
+) !default;
+// $utilities-bg-subtle-colors: map-loop($utilities-bg-subtle, rgba-css-var, "$key", "bg") !default;
 // scss-docs-end utilities-bg-colors
 
 // scss-docs-start utilities-border-colors
@@ -47,6 +70,17 @@ $utilities-border: map-merge(
   )
 ) !default;
 $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+
+$utilities-border-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-border-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
+  "success-subtle": var(--#{$prefix}success-border-subtle),
+  "info-subtle": var(--#{$prefix}info-border-subtle),
+  "warning-subtle": var(--#{$prefix}warning-border-subtle),
+  "danger-subtle": var(--#{$prefix}danger-border-subtle),
+  "light-subtle": var(--#{$prefix}light-border-subtle),
+  "dark-subtle": var(--#{$prefix}dark-border-subtle)
+) !default;
 // scss-docs-end utilities-border-colors
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
diff --git a/scss/_root.scss b/scss/_root.scss
index f348ccb6bd..6af51251f8 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -27,6 +27,33 @@
   --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
   --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
+  --#{$prefix}primary-text: #{$primary-text};
+  --#{$prefix}secondary-text: #{$secondary-text};
+  --#{$prefix}success-text: #{$success-text};
+  --#{$prefix}info-text: #{$info-text};
+  --#{$prefix}warning-text: #{$warning-text};
+  --#{$prefix}danger-text: #{$danger-text};
+  --#{$prefix}light-text: #{$light-text};
+  --#{$prefix}dark-text: #{$dark-text};
+
+  --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle};
+  --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle};
+  --#{$prefix}success-bg-subtle: #{$success-bg-subtle};
+  --#{$prefix}info-bg-subtle: #{$info-bg-subtle};
+  --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle};
+  --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle};
+  --#{$prefix}light-bg-subtle: #{$light-bg-subtle};
+  --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle};
+
+  --#{$prefix}primary-border-subtle: #{$primary-border-subtle};
+  --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle};
+  --#{$prefix}success-border-subtle: #{$success-border-subtle};
+  --#{$prefix}info-border-subtle: #{$info-border-subtle};
+  --#{$prefix}warning-border-subtle: #{$warning-border-subtle};
+  --#{$prefix}danger-border-subtle: #{$danger-border-subtle};
+  --#{$prefix}light-border-subtle: #{$light-border-subtle};
+  --#{$prefix}dark-border-subtle: #{$dark-border-subtle};
+
   // Fonts
 
   // Note: Use `inspect` for lists so that quoted items keep the quotes.
@@ -45,9 +72,7 @@
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
   --#{$prefix}body-color: #{$body-color};
-  // --#{$prefix}body-accent-color: #{$body-accent-color};
 
-  // todo: replace body-accent-color with secondary-color
   --#{$prefix}emphasis-color: #{$body-emphasis-color};
   --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
 
@@ -92,13 +117,12 @@
   // scss-docs-end root-border-var
 
   --#{$prefix}emphasis-color: #{$emphasis-color};
-  --#{$prefix}accent-color: #{$accent-color};
-  --#{$prefix}accent-bg: #{$accent-bg};
-  --#{$prefix}accent-border: #{$accent-border};
 
   // TODO: move to form components? or make global?
   --#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
   --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg);
+  // --#{$prefix}form-valid-color: #{$form-feedback-valid-color};
+  // --#{$prefix}form-valid-bg: #{$form-feedback-valid-color};
 
   --#{$prefix}highlight-bg: #{$mark-bg};
 
@@ -108,18 +132,7 @@
 }
 
 [data-bs-theme="dark"] {
-  // --#{$prefix}primary: #{$blue-300};
-  // --#{$prefix}success: #{$green-300};
-  // --#{$prefix}danger: #{$red-300};
-  // --#{$prefix}warning: #{$yellow-300};
-  // --#{$prefix}info: #{$cyan-300};
-
-  // --#{$prefix}primary-rgb: #{to-rgb($blue-300)};
-  // --#{$prefix}success-rgb: #{to-rgb($green-300)};
-  // --#{$prefix}danger-rgb: #{to-rgb($red-300)};
-  // --#{$prefix}warning-rgb: #{to-rgb($yellow-300)};
-  // --#{$prefix}info-rgb: #{to-rgb($cyan-300)};
-
+  // scss-docs-start root-darkmode-colors
   --#{$prefix}body-color: #{$body-color-dark};
   --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
   --#{$prefix}body-bg: #{$body-bg-dark};
@@ -139,9 +152,33 @@
   --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
   --#{$prefix}emphasis-color: #{$emphasis-color-dark};
-  --#{$prefix}accent-color: #{$accent-color-dark};
-  --#{$prefix}accent-bg: #{$accent-bg-dark};
-  --#{$prefix}accent-border: #{$accent-border-dark};
+
+  --#{$prefix}primary-text: #{$primary-text-dark};
+  --#{$prefix}secondary-text: #{$secondary-text-dark};
+  --#{$prefix}success-text: #{$success-text-dark};
+  --#{$prefix}info-text: #{$info-text-dark};
+  --#{$prefix}warning-text: #{$warning-text-dark};
+  --#{$prefix}danger-text: #{$danger-text-dark};
+  --#{$prefix}light-text: #{$light-text-dark};
+  --#{$prefix}dark-text: #{$dark-text-dark};
+
+  --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
+  --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
+  --#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
+  --#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
+  --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
+  --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
+  --#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
+  --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};
+
+  --#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark};
+  --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark};
+  --#{$prefix}success-border-subtle: #{$success-border-subtle-dark};
+  --#{$prefix}info-border-subtle: #{$info-border-subtle-dark};
+  --#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark};
+  --#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark};
+  --#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
+  --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};
 
   --#{$prefix}heading-color: #{$headings-color-dark};
 
@@ -152,4 +189,5 @@
 
   --#{$prefix}border-color: #{$border-color-dark};
   --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+  // scss-docs-end root-darkmode-colors
 }
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 4f1c4c6166..9f2dc8d55e 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -163,6 +163,11 @@ $utilities: map-merge(
       ),
       values: $utilities-border-colors
     ),
+    "sublte-border-color": (
+      property: border-color,
+      class: border,
+      values: $utilities-border-subtle
+    ),
     "border-width": (
       css-var: true,
       css-variable-name: border-width,
@@ -578,6 +583,11 @@ $utilities: map-merge(
         100: 1
       )
     ),
+    "text-color": (
+      property: color,
+      class: text,
+      values: $utilities-text-emphasis-colors
+    ),
     // scss-docs-end utils-color
     // scss-docs-start utils-bg-color
     "background-color": (
@@ -607,6 +617,11 @@ $utilities: map-merge(
         100: 1
       )
     ),
+    "sublte-background-color": (
+      property: background-color,
+      class: bg,
+      values: $utilities-bg-subtle
+    ),
     // scss-docs-end utils-bg-color
     "gradient": (
       property: background-image,
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index cfdf378e2f..9ffbb4e663 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -2,6 +2,33 @@
 //
 // Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
 
+$primary-text-dark:                 $blue-300 !default;
+$secondary-text-dark:               $gray-300 !default;
+$success-text-dark:                 $green-300 !default;
+$info-text-dark:                    $cyan-300 !default;
+$warning-text-dark:                 $yellow-300 !default;
+$danger-text-dark:                  $red-300 !default;
+$light-text-dark:                   $gray-100 !default;
+$dark-text-dark:                    $gray-300 !default;
+
+$primary-bg-subtle-dark:            $blue-900 !default;
+$secondary-bg-subtle-dark:          $gray-900 !default;
+$success-bg-subtle-dark:            $green-900 !default;
+$info-bg-subtle-dark:               $cyan-900 !default;
+$warning-bg-subtle-dark:            $yellow-900 !default;
+$danger-bg-subtle-dark:             $red-900 !default;
+$light-bg-subtle-dark:              $gray-800 !default;
+$dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+
+$primary-border-subtle-dark:        $blue-800 !default;
+$secondary-border-subtle-dark:      $gray-800 !default;
+$success-border-subtle-dark:        $green-700 !default;
+$info-border-subtle-dark:           $cyan-800 !default;
+$warning-border-subtle-dark:        $yellow-800 !default;
+$danger-border-subtle-dark:         $red-800 !default;
+$light-border-subtle-dark:          $gray-700 !default;
+$dark-border-subtle-dark:           $gray-800 !default;
+
 $body-color-dark:                   $gray-500 !default;
 $body-bg-dark:                      $gray-900 !default;
 $body-emphasis-color-dark:          $gray-100 !default;
@@ -10,9 +37,6 @@ $body-secondary-bg-dark:            $gray-800 !default;
 $body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
 $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
 $emphasis-color-dark:               $white !default;
-$accent-bg-dark:                    $blue-300 !default;
-$accent-color-dark:                 color-contrast($accent-bg-dark) !default;
-$accent-border-dark:                $blue-400 !default;
 $border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
 $headings-color-dark:               #fff !default;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0eb1e21fbd..0b8f140a54 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -321,6 +321,33 @@ $theme-colors: (
 ) !default;
 // scss-docs-end theme-colors-map
 
+$primary-text:            $blue-600 !default;
+$secondary-text:          $gray-600 !default;
+$success-text:            $green-600 !default;
+$info-text:               $cyan-700 !default;
+$warning-text:            $yellow-700 !default;
+$danger-text:             $red-600 !default;
+$light-text:              $gray-600 !default;
+$dark-text:               $gray-700 !default;
+
+$primary-bg-subtle:       $blue-100 !default;
+$secondary-bg-subtle:     $gray-100 !default;
+$success-bg-subtle:       $green-100 !default;
+$info-bg-subtle:          $cyan-100 !default;
+$warning-bg-subtle:       $yellow-100 !default;
+$danger-bg-subtle:        $red-100 !default;
+$light-bg-subtle:         mix($gray-100, $white) !default;
+$dark-bg-subtle:          $gray-400 !default;
+
+$primary-border-subtle:   $blue-200 !default;
+$secondary-border-subtle: $gray-200 !default;
+$success-border-subtle:   $green-200 !default;
+$info-border-subtle:      $cyan-200 !default;
+$warning-border-subtle:   $yellow-200 !default;
+$danger-border-subtle:    $red-200 !default;
+$light-border-subtle:     $gray-200 !default;
+$dark-border-subtle:      $gray-500 !default;
+
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
   ("<", "%3c"),
@@ -413,9 +440,9 @@ $body-tertiary-bg:          $gray-100 !default;
 
 $emphasis-color:            $black !default;
 
-$accent-bg:                 $blue !default;
-$accent-color:              color-contrast($accent-bg) !default;
-$accent-border:             $blue-500 !default;
+// $accent-bg:                 $blue !default;
+// $accent-color:              color-contrast($accent-bg) !default;
+// $accent-border:             $blue-500 !default;
 
 // Links
 //
@@ -1040,12 +1067,20 @@ $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://w
 // scss-docs-start form-validation-states
 $form-validation-states: (
   "valid": (
-    "color": $form-feedback-valid-color,
-    "icon": $form-feedback-icon-valid
+    "color": var(--#{$prefix}success-text),
+    "icon": $form-feedback-icon-valid,
+    "tooltip-color": #fff,
+    "tooltip-bg-color": var(--#{$prefix}success),
+    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
+    "border-color": var(--#{$prefix}success),
   ),
   "invalid": (
-    "color": $form-feedback-invalid-color,
-    "icon": $form-feedback-icon-invalid
+    "color": var(--#{$prefix}danger-text),
+    "icon": $form-feedback-icon-invalid,
+    "tooltip-color": #fff,
+    "tooltip-bg-color": var(--#{$prefix}danger),
+    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
+    "border-color": var(--#{$prefix}danger),
   )
 ) !default;
 // scss-docs-end form-validation-states
@@ -1475,6 +1510,11 @@ $alert-color-scale:             40% !default;
 $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 // scss-docs-end alert-variables
 
+// fusv-disable
+$alert-bg-scale:                -80% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-border-scale:            -70% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-color-scale:             40% !default; // Deprecated in v5.2.0, to be removed in v6
+// fusv-enable
 
 // Progress bars
 
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 2a853a7894..95348dc5d3 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -21,7 +21,8 @@
   $icon,
   $tooltip-color: color-contrast($color),
   $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+  $border-color: $color
 ) {
   .#{$state}-feedback {
     display: none;
@@ -56,7 +57,7 @@
 
   .form-control {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
@@ -67,7 +68,7 @@
       }
 
       &:focus {
-        border-color: $color;
+        border-color: $border-color;
         box-shadow: $focus-box-shadow;
       }
     }
@@ -85,7 +86,7 @@
 
   .form-select {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       @if $enable-validation-icons {
         &:not([multiple]):not([size]),
@@ -98,7 +99,7 @@
       }
 
       &:focus {
-        border-color: $color;
+        border-color: $border-color;
         box-shadow: $focus-box-shadow;
       }
     }
@@ -114,7 +115,7 @@
 
   .form-check-input {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       &:checked {
         background-color: $color;
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index e55415f2b8..1b6e4263b4 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -1,7 +1,7 @@
 // List Groups
 
 // scss-docs-start list-group-mixin
-@mixin list-group-item-variant($state, $background, $color) {
+@mixin list-group-item-variant($state, $background, $color, $background-hover: shade-color($background, 10%)) {
   .list-group-item-#{$state} {
     color: $color;
     background-color: $background;
@@ -10,7 +10,7 @@
       &:hover,
       &:focus {
         color: $color;
-        background-color: shade-color($background, 10%);
+        background-color: $background-hover;
       }
 
       &.active {
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 8015eadcfb..15a8b8ebb7 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -63,6 +63,10 @@
       }
     }
 
+    strong {
+      color: var(--bs-emphasis-color);
+    }
+
     // Prevent breaking of code
     // stylelint-disable-next-line selector-max-compound-selectors
     th,
@@ -84,8 +88,15 @@
 }
 
 .table-swatches {
-  td:first-child { width: 340px; }
-  td:nth-child(2) { width: 200px; }
+  // td:first-child { width: 340px; }
+  // td:nth-child(2) { width: 200px; }
+
+  th {
+    color: var(--bs-emphasis-color);
+  }
+  td code {
+    white-space: nowrap;
+  }
 }
 
 .bd-title {
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 940ad929f8..cec737479c 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -1,13 +1,15 @@
 .bd-navbar {
   padding: .75rem 0;
   background-color: transparent;
-  background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
   box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
 
-  [data-bs-theme="dark"] & {
-    backdrop-filter: blur(.25rem);
-    background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .75));
-    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(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
   }
 
   .bd-navbar-toggle {
@@ -115,6 +117,18 @@
   }
 }
 
+[data-bs-theme="dark"] {
+  .bd-navbar {
+    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+
+    // &::after {
+    //   backdrop-filter: blur(.25rem);
+    //   background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .75));
+    // }
+  }
+}
+
+
 .bd-theme-toggle {
   width: 2rem;
   height: 2rem;
diff --git a/site/content/docs/5.2/components/alerts.md b/site/content/docs/5.2/components/alerts.md
index 523f525fe9..7ea5b9b428 100644
--- a/site/content/docs/5.2/components/alerts.md
+++ b/site/content/docs/5.2/components/alerts.md
@@ -10,6 +10,10 @@ toc: true
 
 Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
 
+{{< callout info >}}
+**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
+{{< /callout >}}
+
 {{< example >}}
 {{< alerts.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
@@ -177,6 +181,8 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS
 
 ### Sass mixin
 
+{{< deprecated-in "5.3.0" >}}
+
 Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.
 
 {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md
index e8841bb7c6..044a7147f8 100644
--- a/site/content/docs/5.2/content/tables.md
+++ b/site/content/docs/5.2/content/tables.md
@@ -18,6 +18,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
 
 Use contextual classes to color tables, table rows or individual cells.
 
+{{< callout info >}}
+**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won't see color mode adaptive styling until v6.
+{{< /callout >}}
+
 <div class="bd-example">
   <table class="table">
     <thead>
diff --git a/site/content/docs/5.2/customize/color.md b/site/content/docs/5.2/customize/color.md
index a7049e2ee6..1319a2eab4 100644
--- a/site/content/docs/5.2/customize/color.md
+++ b/site/content/docs/5.2/customize/color.md
@@ -6,6 +6,437 @@ group: customize
 toc: true
 ---
 
+## Colors
+
+{{< added-in "5.3.0" >}}
+
+Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
+
+Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
+
+{{< callout warning>}}
+**Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
+{{< /callout >}}
+
+<table class="table table-swatches">
+  <thead>
+    <tr>
+      <th style="width: 340px;">Description</th>
+      <th style="width: 200px;" class="ps-0">Swatch</th>
+      <th>Variables</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td rowspan="2">
+        <strong>Body —</strong> Default foreground (color) and background, including components.
+      </td>
+      <td class="ps-0">
+        <div class="p-3 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td rowspan="2">
+        <strong>Secondary —</strong> For disabled component states, dividers, and lighter text.
+      </td>
+      <td class="ps-0">
+        <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td rowspan="2">
+        <strong>Tertiary —</strong> For component hover colors, accents, wells, and text.
+      </td>
+      <td class="ps-0">
+        <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Emphasis —</strong> For higher contrast text. Not applicable for backgrounds.
+      </td>
+      <td class="ps-0">
+        <div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Border —</strong> {{< markdown >}}For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
+      </td>
+      <td class="ps-0">
+        <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td rowspan="4">
+        <strong>Primary —</strong> Main theme color, used for hyperlinks, focus styles, and component and form active states.
+      </td>
+      <td class="ps-0">
+        <div class="p-3 rounded-2 text-bg-primary">Primary</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-primary-bg-subtle); --bs-border-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text);">Background subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text);">Border subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-primary-text); color: var(--bs-body-bg);">Text</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-primary-text`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td rowspan="4">
+        <strong>Success —</strong> Theme color used for positive or successful actions and information.
+      </td>
+      <td class="ps-0">
+        <div class="p-3 rounded-2 text-bg-success">Success</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-success-bg-subtle); --bs-border-color: var(--bs-success-border-subtle); color: var(--bs-success-text);">Background subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-success-border-subtle); color: var(--bs-success-text);">Border subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-success-text); color: var(--bs-body-bg);">Text</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-success-text`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td rowspan="4">
+        <strong>Danger —</strong> Theme color used for errors and dangerous actions.
+      </td>
+      <td class="ps-0">
+        <div class="p-3 rounded-2 text-bg-danger">Danger</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-danger-bg-subtle); --bs-border-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text);">Background subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text);">Border subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-danger-text); color: var(--bs-body-bg);">Text</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-danger-text`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td rowspan="4">
+        <strong>Warning —</strong> Theme color used for non-destructive warning messages.
+      </td>
+      <td class="ps-0">
+        <div class="p-3 rounded-2 text-bg-warning">Warning</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-warning-bg-subtle); --bs-border-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text);">Background subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text);">Border subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-warning-text); color: var(--bs-body-bg);">Text</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-warning-text`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td rowspan="4">
+        <strong>Info —</strong> Theme color used for neutral and informative content.
+      </td>
+      <td class="ps-0">
+        <div class="p-3 rounded-2 text-bg-info">Info</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-info-bg-subtle); --bs-border-color: var(--bs-info-border-subtle); color: var(--bs-info-text);">Background subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-info-border-subtle); color: var(--bs-info-text);">Border subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-info-text); color: var(--bs-body-bg);">Text</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-info-text`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td rowspan="4">
+        <strong>Light —</strong> Additional theme option for less contrasting colors.
+      </td>
+      <td class="ps-0">
+        <div class="p-3 rounded-2 text-bg-light border">Light</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-light-bg-subtle); --bs-border-color: var(--bs-light-border-subtle); color: var(--bs-light-text);">Background subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-light-border-subtle); color: var(--bs-light-text);">Border subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-light-text); color: var(--bs-body-bg);">Text</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-light-text`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td rowspan="4">
+        <strong>Dark —</strong> Additional theme option for higher contrasting colors.
+      </td>
+      <td class="ps-0">
+        <div class="p-3 rounded-2 text-bg-dark border">Dark</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-dark-bg-subtle); --bs-border-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text);">Background subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text);">Border subtle</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-dark-text); color: var(--bs-body-bg);">Text</div>
+      </td>
+      <td>
+        {{< markdown >}}`--bs-dark-text`{{< /markdown >}}
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Using the new colors
+
+These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color's associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
+
+{{< example >}}
+<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
+  Example element with utilities
+</div>
+{{< /example >}}
+
+### Theme colors
+
+We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
+
+<div class="row">
+  {{< theme-colors.inline >}}
+  {{- range (index $.Site.Data "theme-colors") }}
+    <div class="col-md-4">
+      <div class="p-3 mb-3 text-bg-{{ .name }} rounded-3">{{ .name | title }}</div>
+    </div>
+  {{ end -}}
+  {{< /theme-colors.inline >}}
+</div>
+
+All these colors are available as a Sass map, `$theme-colors`.
+
+{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
+
+Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
+
+### All colors
+
+All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
+
+Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black.
+
+<div class="row font-monospace">
+  {{< theme-colors.inline >}}
+  {{- range $color := $.Site.Data.colors }}
+    {{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }}
+    <div class="col-md-4 mb-3">
+      <div class="p-3 mb-2 position-relative swatch-{{ $color.name }}">
+        <strong class="d-block">${{ $color.name }}</strong>
+        {{ $color.hex }}
+      </div>
+      {{ range (seq 100 100 900) }}
+      <div class="p-3 bd-{{ $color.name }}-{{ . }}">${{ $color.name }}-{{ . }}</div>
+      {{ end }}
+    </div>
+    {{ end -}}
+  {{ end -}}
+
+  <div class="col-md-4 mb-3">
+    <div class="p-3 mb-2 position-relative swatch-gray-500">
+      <strong class="d-block">$gray-500</strong>
+      #adb5bd
+    </div>
+  {{- range $.Site.Data.grays }}
+    <div class="p-3 bd-gray-{{ .name }}">$gray-{{ .name }}</div>
+  {{ end -}}
+  </div>
+  {{< /theme-colors.inline >}}
+
+  <div class="col-md-4 mb-3">
+    <div class="p-3 mb-2 bd-black text-white">
+      <strong class="d-block">$black</strong>
+      #000
+    </div>
+    <div class="p-3 mb-2 bd-white border">
+      <strong class="d-block">$white</strong>
+      #fff
+    </div>
+  </div>
+</div>
+
+### Notes on Sass
+
+Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass's `mix()` color function.
+
+Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB).
+
+Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code.
+
 ## Color modes
 
 {{< added-in "5.3.0" >}}
@@ -146,108 +577,6 @@ For example, you can create a "blue theme" with the selector `data-bs-theme="blu
 </div>
 ```
 
-## Colors
-
-### New theme colors
-
-{{< added-in "5.3.0" >}}
-
-Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0 with the addition of new `secondary` and `tertiary` text and background colors. Our new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark.
-
-Colors ending in `--rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
-
-{{< callout warning>}}
-**Heads up!** There's some potentially confusing things regarding new secondary and tertiary colors, and our secondary theme color. Expect this to be ironed out in v6.
-{{< /callout >}}
-
-{{< bs-table "table text-start table-swatches" >}}
-| Description | Swatch | Variables |
-| --- | --- | --- |
-| **Body —** Default foreground (color) and background, including components. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div> <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div> | `--bs-body-color`<br>`--bs-body-color-rgb`<br>`--bs-body-bg`<br>`--bs-body-bg-rgb` |
-| **Secondary —** For disabled states, dividers, and lighter text. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div> <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-bg);">&nbsp;</div> | `--bs-secondary-color`<br>`--bs-secondary-color-rgb`<br>`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb` |
-| **Tertiary —** For hovers, accents, wells, and text. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div> <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div> | `--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`<br>`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb` |
-| **Emphasis —** For higher contrast text. Not applicable for backgrounds. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div> | `--bs-emphasis-color`<br>`--bs-emphasis-color-rgb` |
-| **Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value. | <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">Border color</div> | `--bs-border-color`<br>`--bs-border-color-translucent` |
-| **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states. | <div class="p-3 text-bg-primary rounded-2">Primary</div> | `--bs-primary`<br>`--bs-primary-rgb` |
-| **Success —** Theme color used for positive or successful actions and information. | <div class="p-3 text-bg-success rounded-2">Success</div> | `--bs-success`<br>`--bs-success-rgb` |
-| **Danger —** Theme color used for errors and dangerous actions. | <div class="p-3 text-bg-danger rounded-2">Danger</div> | `--bs-danger`<br>`--bs-danger-rgb` |
-| **Warning —** Theme color used for warning messages. | <div class="p-3 text-bg-warning rounded-2">Warning</div> | `--bs-warning`<br>`--bs-warning-rgb` |
-| **Info —** Theme color used for neutral and informative content. | <div class="p-3 text-bg-info rounded-2">Info</div> | `--bs-info`<br>`--bs-info-rgb` |
-{{< /bs-table >}}
-
-### Theme colors
-
-We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
-
-<div class="row">
-  {{< theme-colors.inline >}}
-  {{- range (index $.Site.Data "theme-colors") }}
-    <div class="col-md-4">
-      <div class="p-3 mb-3 text-bg-{{ .name }} rounded-3">{{ .name | title }}</div>
-    </div>
-  {{ end -}}
-  {{< /theme-colors.inline >}}
-</div>
-
-All these colors are available as a Sass map, `$theme-colors`.
-
-{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
-
-Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
-
-### All colors
-
-All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
-
-Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black.
-
-<div class="row font-monospace">
-  {{< theme-colors.inline >}}
-  {{- range $color := $.Site.Data.colors }}
-    {{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }}
-    <div class="col-md-4 mb-3">
-      <div class="p-3 mb-2 position-relative swatch-{{ $color.name }}">
-        <strong class="d-block">${{ $color.name }}</strong>
-        {{ $color.hex }}
-      </div>
-      {{ range (seq 100 100 900) }}
-      <div class="p-3 bd-{{ $color.name }}-{{ . }}">${{ $color.name }}-{{ . }}</div>
-      {{ end }}
-    </div>
-    {{ end -}}
-  {{ end -}}
-
-  <div class="col-md-4 mb-3">
-    <div class="p-3 mb-2 position-relative swatch-gray-500">
-      <strong class="d-block">$gray-500</strong>
-      #adb5bd
-    </div>
-  {{- range $.Site.Data.grays }}
-    <div class="p-3 bd-gray-{{ .name }}">$gray-{{ .name }}</div>
-  {{ end -}}
-  </div>
-  {{< /theme-colors.inline >}}
-
-  <div class="col-md-4 mb-3">
-    <div class="p-3 mb-2 bd-black text-white">
-      <strong class="d-block">$black</strong>
-      #000
-    </div>
-    <div class="p-3 mb-2 bd-white border">
-      <strong class="d-block">$white</strong>
-      #fff
-    </div>
-  </div>
-</div>
-
-### Notes on Sass
-
-Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass's `mix()` color function.
-
-Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB).
-
-Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code.
-
 ## Color Sass maps
 
 Bootstrap's source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.
diff --git a/site/content/docs/5.2/customize/css-variables.md b/site/content/docs/5.2/customize/css-variables.md
index b76f2b7a77..b9f5d450fe 100644
--- a/site/content/docs/5.2/customize/css-variables.md
+++ b/site/content/docs/5.2/customize/css-variables.md
@@ -14,6 +14,10 @@ Bootstrap includes many [CSS custom properties (variables)](https://developer.mo
 
 Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files.
 
+### Default
+
+These CSS variables are available everywhere, regardless of color mode.
+
 ```css
 {{< root.inline >}}
 {{- $css := readFile "dist/css/bootstrap.css" -}}
@@ -28,6 +32,11 @@ Here are the variables we include (note that the `:root` is required) that can b
 {{< /root.inline >}}
 ```
 
+### Dark mode
+
+These variables are scoped to our built-in dark mode.
+
+
 ## Component variables
 
 Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.
diff --git a/site/content/docs/5.2/utilities/background.md b/site/content/docs/5.2/utilities/background.md
index fe0bf573b8..11d961dc59 100644
--- a/site/content/docs/5.2/utilities/background.md
+++ b/site/content/docs/5.2/utilities/background.md
@@ -14,6 +14,7 @@ Similar to the contextual text color classes, set the background of an element t
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
+<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
 {{- end -}}
 {{< /colors.inline >}}
 <div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
diff --git a/site/content/docs/5.2/utilities/borders.md b/site/content/docs/5.2/utilities/borders.md
index 631df172ae..50df793f2e 100644
--- a/site/content/docs/5.2/utilities/borders.md
+++ b/site/content/docs/5.2/utilities/borders.md
@@ -42,6 +42,7 @@ Change the border color using utilities built on our theme colors.
 {{< border.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <span class="border border-{{ .name }}"></span>
+<span class="border border-{{ .name }}-subtle"></span>
 {{- end -}}
 {{< /border.inline >}}
 <span class="border border-white"></span>
diff --git a/site/content/docs/5.2/utilities/colors.md b/site/content/docs/5.2/utilities/colors.md
index 8e92875e18..80aa4db746 100644
--- a/site/content/docs/5.2/utilities/colors.md
+++ b/site/content/docs/5.2/utilities/colors.md
@@ -14,6 +14,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p>
+<p class="text-{{ .name }}-emphasis">.text-{{ .name }}-emphasis</p>
 {{- end -}}
 {{< /colors.inline >}}
 <p class="text-body">.text-body</p>
diff --git a/site/layouts/shortcodes/added-in.html b/site/layouts/shortcodes/added-in.html
index ca461c2e68..abd8dc4f34 100644
--- a/site/layouts/shortcodes/added-in.html
+++ b/site/layouts/shortcodes/added-in.html
@@ -2,4 +2,4 @@
 
 {{- $version := .Get 0 -}}
 
-<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v{{ $version }}</small>
+<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2">Added in v{{ $version }}</small>
diff --git a/site/layouts/shortcodes/deprecated-in.html b/site/layouts/shortcodes/deprecated-in.html
index 7280c11cc2..f8ff79af1f 100644
--- a/site/layouts/shortcodes/deprecated-in.html
+++ b/site/layouts/shortcodes/deprecated-in.html
@@ -2,4 +2,4 @@
 
 {{- $version := .Get 0 -}}
 
-<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-emphasis bg-warning bg-opacity-10 border border-warning border-opacity-10 rounded-2">Deprecated in v{{ $version }}</small>
+<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2">Deprecated in v{{ $version }}</small>