From: Mark Otto <markd.otto@gmail.com>
Date: Tue, 30 Sep 2025 03:32:12 +0000 (-0700)
Subject: v6: Update colors and theme (#41763)
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=a4af8c3fcfb34352449d10e479dcd1ac9892a312;p=thirdparty%2Fbootstrap.git

v6: Update colors and theme (#41763)

* new colors

* WIP: Redo some theming

* Fix sass warnings on unquoted map keys

* Revamp colors, update docs, couple new utils

* Remove key attributes

* Bump bundlewatch

* Bundlewatch

* Fix some things up

* Clean up tables, more color changes

* Fix more table color generation, simplify markup with new Table component prop

* More docs improvements, including utilities API, and checkbox and radio theme variants
---

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index baf9c68e1f..359e9ed23e 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -2,15 +2,15 @@
   "files": [
     {
       "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "7.75 kB"
+      "maxSize": "9.00 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "7.00 kB"
+      "maxSize": "8.25 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "4.5 kB"
+      "maxSize": "5.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
@@ -18,7 +18,7 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "13.0 kB"
+      "maxSize": "13.5 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "36.0 kB"
+      "maxSize": "36.5 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "32.0 kB"
+      "maxSize": "33.0 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 6efa14d040..a4b88a1a46 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "config" as *;
+@use "theme" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
 
@@ -69,9 +70,9 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt
 
   // scss-docs-start alert-modifiers
   // Generate contextual modifier classes for colorizing the alert
-  @each $state in map.keys($theme-colors) {
+  @each $state in map.keys($new-theme-colors) {
     .alert-#{$state} {
-      --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+      --#{$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-emphasis);
diff --git a/scss/_colors.scss b/scss/_colors.scss
index 651ebefa05..2030a71946 100644
--- a/scss/_colors.scss
+++ b/scss/_colors.scss
@@ -1,282 +1,61 @@
-$blue: #0d6efd !default;
-$blue-100: #cfe2ff !default;
-$blue-200: #9ec5fe !default;
-$blue-300: #6ea8fe !default;
-$blue-400: #3d8bfd !default;
-$blue-500: $blue !default;
-$blue-600: #0a58ca !default;
-$blue-700: #084298 !default;
-$blue-800: #052c65 !default;
-$blue-900: #031633 !default;
-
-$indigo: #6610f2 !default;
-$indigo-100: #e0cffc !default;
-$indigo-200: #c29ffa !default;
-$indigo-300: #a370f7 !default;
-$indigo-400: #8540f5 !default;
-$indigo-500: $indigo !default;
-$indigo-600: #520dc2 !default;
-$indigo-700: #3d0a91 !default;
-$indigo-800: #290661 !default;
-$indigo-900: #140330 !default;
-
-$purple: #6f42c1 !default;
-$purple-100: #e2d9f3 !default;
-$purple-200: #c5b3e6 !default;
-$purple-300: #a98eda !default;
-$purple-400: #8c68cd !default;
-$purple-500: $purple !default;
-$purple-600: #59359a !default;
-$purple-700: #432874 !default;
-$purple-800: #2c1a4d !default;
-$purple-900: #160d27 !default;
-
-$pink: #d63384 !default;
-$pink-100: #f7d6e6 !default;
-$pink-200: #efadce !default;
-$pink-300: #e685b5 !default;
-$pink-400: #de5c9d !default;
-$pink-500: $pink !default;
-$pink-600: #ab296a !default;
-$pink-700: #801f4f !default;
-$pink-800: #561435 !default;
-$pink-900: #2b0a1a !default;
-
-$red: #dc3545 !default;
-$red-100: #f8d7da !default;
-$red-200: #f1aeb5 !default;
-$red-300: #ea868f !default;
-$red-400: #e35d6a !default;
-$red-500: $red !default;
-$red-600: #b02a37 !default;
-$red-700: #842029 !default;
-$red-800: #58151c !default;
-$red-900: #2c0b0e !default;
-
-$orange: #fd7e14 !default;
-$orange-100: #ffe5d0 !default;
-$orange-200: #fecba1 !default;
-$orange-300: #feb272 !default;
-$orange-400: #fd9843 !default;
-$orange-500: $orange !default;
-$orange-600: #ca6510 !default;
-$orange-700: #984c0c !default;
-$orange-800: #653208 !default;
-$orange-900: #331904 !default;
-
-$yellow: #ffc107 !default;
-$yellow-100: #fff3cd !default;
-$yellow-200: #ffe69c !default;
-$yellow-300: #ffda6a !default;
-$yellow-400: #ffcd39 !default;
-$yellow-500: $yellow !default;
-$yellow-600: #cc9a06 !default;
-$yellow-700: #997404 !default;
-$yellow-800: #664d03 !default;
-$yellow-900: #332701 !default;
-
-$green: #198754 !default;
-$green-100: #d1e7dd !default;
-$green-200: #a3cfbb !default;
-$green-300: #75b798 !default;
-$green-400: #479f76 !default;
-$green-500: $green !default;
-$green-600: #146c43 !default;
-$green-700: #0f5132 !default;
-$green-800: #0a3622 !default;
-$green-900: #051b11 !default;
-
-$teal: #20c997 !default;
-$teal-100: #d2f4ea !default;
-$teal-200: #a6e9d5 !default;
-$teal-300: #79dfc1 !default;
-$teal-400: #4dd4ac !default;
-$teal-500: $teal !default;
-$teal-600: #1aa179 !default;
-$teal-700: #13795b !default;
-$teal-800: #0d503c !default;
-$teal-900: #06281e !default;
-
-$cyan: #0dcaf0 !default;
-$cyan-100: #cff4fc !default;
-$cyan-200: #9eeaf9 !default;
-$cyan-300: #6edff6 !default;
-$cyan-400: #3dd5f3 !default;
-$cyan-500: $cyan !default;
-$cyan-600: #0aa2c0 !default;
-$cyan-700: #087990 !default;
-$cyan-800: #055160 !default;
-$cyan-900: #032830 !default;
-
-$gray: #adb5bd !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: $gray !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
+@use "config" as *;
+
+// stylelint-disable hue-degree-notation, @stylistic/number-leading-zero
+
+// Easily convert colors to oklch() with https://oklch.com/
+$new-blue: oklch(60% 0.24 258) !default;
+$new-indigo: oklch(56% 0.26 288) !default;
+$new-violet: oklch(56% 0.24 300) !default;
+$new-purple: oklch(56% 0.24 320) !default;
+$new-pink: oklch(60% 0.22 4) !default;
+$new-red: oklch(60% 0.22 20) !default;
+$new-orange: oklch(70% 0.22 52) !default;
+$new-amber: oklch(79% 0.2 78) !default;
+$new-yellow: oklch(88% 0.24 88) !default;
+$new-lime: oklch(65% 0.24 135) !default;
+$new-green: oklch(64% 0.22 160) !default;
+$new-teal: oklch(68% 0.22 190) !default;
+$new-cyan: oklch(69% 0.22 220) !default;
+$new-brown: oklch(60% 0.12 54) !default;
+$new-gray: oklch(60% 0.02 245) !default;
+$new-pewter: oklch(65% 0.01 290) !default;
+
+$hues: (
+  "blue": $new-blue,
+  "indigo": $new-indigo,
+  "violet": $new-violet,
+  "purple": $new-purple,
+  "pink": $new-pink,
+  "red": $new-red,
+  "orange": $new-orange,
+  "amber": $new-amber,
+  "yellow": $new-yellow,
+  "lime": $new-lime,
+  "green": $new-green,
+  "teal": $new-teal,
+  "cyan": $new-cyan,
+  "brown": $new-brown,
+  "gray": $new-gray,
+  "pewter": $new-pewter
+) !default;
+
+:root {
+  @each $color, $hue in $hues {
+    --#{$prefix}#{$color}-025: color-mix(in srgb, #fff 94%, #{$hue});
+    --#{$prefix}#{$color}-050: color-mix(in srgb, #fff 90%, #{$hue});
+    --#{$prefix}#{$color}-100: color-mix(in srgb, #fff 80%, #{$hue});
+    --#{$prefix}#{$color}-200: color-mix(in srgb, #fff 60%, #{$hue});
+    --#{$prefix}#{$color}-300: color-mix(in srgb, #fff 40%, #{$hue});
+    --#{$prefix}#{$color}-400: color-mix(in srgb, #fff 20%, #{$hue});
+    --#{$prefix}#{$color}-500: #{$hue};
+    --#{$prefix}#{$color}-600: color-mix(in srgb, #000 16%, #{$hue});
+    --#{$prefix}#{$color}-700: color-mix(in srgb, #000 32%, #{$hue});
+    --#{$prefix}#{$color}-800: color-mix(in srgb, #000 48%, #{$hue});
+    --#{$prefix}#{$color}-900: color-mix(in srgb, #000 64%, #{$hue});
+    --#{$prefix}#{$color}-950: color-mix(in srgb, #000 76%, #{$hue});
+    --#{$prefix}#{$color}-975: color-mix(in srgb, #000 88%, #{$hue});
+  }
+}
 
 $white: #fff !default;
 $black: #000 !default;
-
-$blues: (
-  "blue-100": $blue-100,
-  "blue-200": $blue-200,
-  "blue-300": $blue-300,
-  "blue-400": $blue-400,
-  "blue-500": $blue-500,
-  "blue-600": $blue-600,
-  "blue-700": $blue-700,
-  "blue-800": $blue-800,
-  "blue-900": $blue-900
-) !default;
-
-$indigos: (
-  "indigo-100": $indigo-100,
-  "indigo-200": $indigo-200,
-  "indigo-300": $indigo-300,
-  "indigo-400": $indigo-400,
-  "indigo-500": $indigo-500,
-  "indigo-600": $indigo-600,
-  "indigo-700": $indigo-700,
-  "indigo-800": $indigo-800,
-  "indigo-900": $indigo-900
-) !default;
-
-$purples: (
-  "purple-100": $purple-100,
-  "purple-200": $purple-200,
-  "purple-300": $purple-300,
-  "purple-400": $purple-400,
-  "purple-500": $purple-500,
-  "purple-600": $purple-600,
-  "purple-700": $purple-700,
-  "purple-800": $purple-800,
-  "purple-900": $purple-900
-) !default;
-
-$pinks: (
-  "pink-100": $pink-100,
-  "pink-200": $pink-200,
-  "pink-300": $pink-300,
-  "pink-400": $pink-400,
-  "pink-500": $pink-500,
-  "pink-600": $pink-600,
-  "pink-700": $pink-700,
-  "pink-800": $pink-800,
-  "pink-900": $pink-900
-) !default;
-
-$reds: (
-  "red-100": $red-100,
-  "red-200": $red-200,
-  "red-300": $red-300,
-  "red-400": $red-400,
-  "red-500": $red-500,
-  "red-600": $red-600,
-  "red-700": $red-700,
-  "red-800": $red-800,
-  "red-900": $red-900
-) !default;
-
-$oranges: (
-  "orange-100": $orange-100,
-  "orange-200": $orange-200,
-  "orange-300": $orange-300,
-  "orange-400": $orange-400,
-  "orange-500": $orange-500,
-  "orange-600": $orange-600,
-  "orange-700": $orange-700,
-  "orange-800": $orange-800,
-  "orange-900": $orange-900
-) !default;
-
-$yellows: (
-  "yellow-100": $yellow-100,
-  "yellow-200": $yellow-200,
-  "yellow-300": $yellow-300,
-  "yellow-400": $yellow-400,
-  "yellow-500": $yellow-500,
-  "yellow-600": $yellow-600,
-  "yellow-700": $yellow-700,
-  "yellow-800": $yellow-800,
-  "yellow-900": $yellow-900
-) !default;
-
-$greens: (
-  "green-100": $green-100,
-  "green-200": $green-200,
-  "green-300": $green-300,
-  "green-400": $green-400,
-  "green-500": $green-500,
-  "green-600": $green-600,
-  "green-700": $green-700,
-  "green-800": $green-800,
-  "green-900": $green-900
-) !default;
-
-$teals: (
-  "teal-100": $teal-100,
-  "teal-200": $teal-200,
-  "teal-300": $teal-300,
-  "teal-400": $teal-400,
-  "teal-500": $teal-500,
-  "teal-600": $teal-600,
-  "teal-700": $teal-700,
-  "teal-800": $teal-800,
-  "teal-900": $teal-900
-) !default;
-
-$cyans: (
-  "cyan-100": $cyan-100,
-  "cyan-200": $cyan-200,
-  "cyan-300": $cyan-300,
-  "cyan-400": $cyan-400,
-  "cyan-500": $cyan-500,
-  "cyan-600": $cyan-600,
-  "cyan-700": $cyan-700,
-  "cyan-800": $cyan-800,
-  "cyan-900": $cyan-900
-) !default;
-
-$grays: (
-  "gray-100": $gray-100,
-  "gray-200": $gray-200,
-  "gray-300": $gray-300,
-  "gray-400": $gray-400,
-  "gray-500": $gray-500,
-  "gray-600": $gray-600,
-  "gray-700": $gray-700,
-  "gray-800": $gray-800,
-  "gray-900": $gray-900
-) !default;
-
-$colors: (
-  "blue": $blue,
-  "indigo": $indigo,
-  "purple": $purple,
-  "pink": $pink,
-  "red": $red,
-  "orange": $orange,
-  "yellow": $yellow,
-  "green": $green,
-  "teal": $teal,
-  "cyan": $cyan
-) !default;
-
-$all-colors: (
-  "grays": $grays,
-  "blues": $blues,
-  "indigos": $indigos,
-  "purples": $purples,
-  "pinks": $pinks,
-  "reds": $reds,
-  "oranges": $oranges,
-  "yellows": $yellows,
-  "greens": $greens,
-  "teals": $teals,
-  "cyans": $cyans
-) !default;
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 2de07ffae3..1f212b2bcf 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -38,14 +38,14 @@ $dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color) !default;
 $dropdown-item-padding-y:           $spacer * .25 !default;
 $dropdown-item-padding-x:           $spacer !default;
 
-$dropdown-header-color:             $gray-600 !default;
+$dropdown-header-color:             var(--#{$prefix}gray-600) !default;
 $dropdown-header-padding-x:         $dropdown-item-padding-x !default;
 $dropdown-header-padding-y:         $dropdown-padding-y !default;
 // scss-docs-end dropdown-variables
 
 // scss-docs-start dropdown-dark-variables
-$dropdown-dark-color:               $gray-300 !default;
-$dropdown-dark-bg:                  $gray-800 !default;
+$dropdown-dark-color:               var(--#{$prefix}gray-300) !default;
+$dropdown-dark-bg:                  var(--#{$prefix}gray-800) !default;
 $dropdown-dark-border-color:        $dropdown-border-color !default;
 $dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
 $dropdown-dark-box-shadow:          null !default;
@@ -54,8 +54,8 @@ $dropdown-dark-link-hover-color:    $white !default;
 $dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
 $dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
 $dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
-$dropdown-dark-link-disabled-color: $gray-500 !default;
-$dropdown-dark-header-color:        $gray-500 !default;
+$dropdown-dark-link-disabled-color: var(--#{$prefix}gray-500) !default;
+$dropdown-dark-header-color:        var(--#{$prefix}gray-500) !default;
 // scss-docs-end dropdown-dark-variables
 
 @layer components {
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 77187e503d..9ac7138831 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -207,7 +207,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
 @function opaque($background, $foreground) {
-  @return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
+  @return color-mix(in srgb, rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
 }
 
 // scss-docs-start color-functions
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 16a6a98681..f414157a23 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "colors" as *;
+@use "theme" as *;
 @use "config" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
@@ -212,7 +213,7 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
   // Add modifier classes to change text and background color on individual items.
   // Organizationally, this must come after the `:hover` states.
 
-  @each $state in map.keys($theme-colors) {
+  @each $state in map.keys($new-theme-colors) {
     .list-group-item-#{$state} {
       --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
       --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
diff --git a/scss/_maps.scss b/scss/_maps.scss
deleted file mode 100644
index ca537bbc9b..0000000000
--- a/scss/_maps.scss
+++ /dev/null
@@ -1,180 +0,0 @@
-// @use "sass:map";
-// @use "colors" as *;
-// @use "functions" as *;
-// @use "config" as *;
-// @use "variables" as *;
-
-// // Re-assigned maps
-// //
-// // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
-
-// // scss-docs-start theme-colors-rgb
-// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
-// // scss-docs-end theme-colors-rgb
-
-// // scss-docs-start theme-text-map
-// $theme-colors-text: (
-//   "primary": $primary-text-emphasis,
-//   "secondary": $secondary-text-emphasis,
-//   "success": $success-text-emphasis,
-//   "info": $info-text-emphasis,
-//   "warning": $warning-text-emphasis,
-//   "danger": $danger-text-emphasis,
-//   "light": $light-text-emphasis,
-//   "dark": $dark-text-emphasis,
-// ) !default;
-// // scss-docs-end theme-text-map
-
-// // scss-docs-start theme-bg-subtle-map
-// $theme-colors-bg-subtle: (
-//   "primary": $primary-bg-subtle,
-//   "secondary": $secondary-bg-subtle,
-//   "success": $success-bg-subtle,
-//   "info": $info-bg-subtle,
-//   "warning": $warning-bg-subtle,
-//   "danger": $danger-bg-subtle,
-//   "light": $light-bg-subtle,
-//   "dark": $dark-bg-subtle,
-// ) !default;
-// // scss-docs-end theme-bg-subtle-map
-
-// // scss-docs-start theme-border-subtle-map
-// $theme-colors-border-subtle: (
-//   "primary": $primary-border-subtle,
-//   "secondary": $secondary-border-subtle,
-//   "success": $success-border-subtle,
-//   "info": $info-border-subtle,
-//   "warning": $warning-border-subtle,
-//   "danger": $danger-border-subtle,
-//   "light": $light-border-subtle,
-//   "dark": $dark-border-subtle,
-// ) !default;
-// // scss-docs-end theme-border-subtle-map
-
-// $theme-colors-text-dark: null !default;
-// $theme-colors-bg-subtle-dark: null !default;
-// $theme-colors-border-subtle-dark: null !default;
-
-// @if $enable-dark-mode {
-//   // scss-docs-start theme-text-dark-map
-//   $theme-colors-text-dark: (
-//     "primary": $primary-text-emphasis-dark,
-//     "secondary": $secondary-text-emphasis-dark,
-//     "success": $success-text-emphasis-dark,
-//     "info": $info-text-emphasis-dark,
-//     "warning": $warning-text-emphasis-dark,
-//     "danger": $danger-text-emphasis-dark,
-//     "light": $light-text-emphasis-dark,
-//     "dark": $dark-text-emphasis-dark,
-//   ) !default;
-//   // scss-docs-end theme-text-dark-map
-
-//   // scss-docs-start theme-bg-subtle-dark-map
-//   $theme-colors-bg-subtle-dark: (
-//     "primary": $primary-bg-subtle-dark,
-//     "secondary": $secondary-bg-subtle-dark,
-//     "success": $success-bg-subtle-dark,
-//     "info": $info-bg-subtle-dark,
-//     "warning": $warning-bg-subtle-dark,
-//     "danger": $danger-bg-subtle-dark,
-//     "light": $light-bg-subtle-dark,
-//     "dark": $dark-bg-subtle-dark,
-//   ) !default;
-//   // scss-docs-end theme-bg-subtle-dark-map
-
-//   // scss-docs-start theme-border-subtle-dark-map
-//   $theme-colors-border-subtle-dark: (
-//     "primary": $primary-border-subtle-dark,
-//     "secondary": $secondary-border-subtle-dark,
-//     "success": $success-border-subtle-dark,
-//     "info": $info-border-subtle-dark,
-//     "warning": $warning-border-subtle-dark,
-//     "danger": $danger-border-subtle-dark,
-//     "light": $light-border-subtle-dark,
-//     "dark": $dark-border-subtle-dark,
-//   ) !default;
-//   // scss-docs-end theme-border-subtle-dark-map
-// }
-
-// // Utilities maps
-// //
-// // Extends the default `$theme-colors` maps to help create our utilities.
-
-// // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
-// // scss-docs-start utilities-colors
-// $utilities-colors: $theme-colors-rgb !default;
-// // scss-docs-end utilities-colors
-
-// // scss-docs-start utilities-text-colors
-// $utilities-text: map.merge(
-//   $utilities-colors,
-//   (
-//     "black": to-rgb($black),
-//     "white": to-rgb($white),
-//     "body": to-rgb($body-color)
-//   )
-// ) !default;
-// $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
-
-// $utilities-text-emphasis-colors: (
-//   "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
-//   "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
-//   "success-emphasis": var(--#{$prefix}success-text-emphasis),
-//   "info-emphasis": var(--#{$prefix}info-text-emphasis),
-//   "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
-//   "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
-//   "light-emphasis": var(--#{$prefix}light-text-emphasis),
-//   "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
-// ) !default;
-// // scss-docs-end utilities-text-colors
-
-// // scss-docs-start utilities-bg-colors
-// $utilities-bg: map.merge(
-//   $utilities-colors,
-//   (
-//     "black": to-rgb($black),
-//     "white": to-rgb($white),
-//     "body": to-rgb($body-bg)
-//   )
-// ) !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;
-// // scss-docs-end utilities-bg-colors
-
-// // scss-docs-start utilities-border-colors
-// $utilities-border: map.merge(
-//   $utilities-colors,
-//   (
-//     "black": to-rgb($black),
-//     "white": to-rgb($white)
-//   )
-// ) !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
-
-// $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
-
-// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
-
-// $gutters: $spacers !default;
diff --git a/scss/_progress.scss b/scss/_progress.scss
index 233a00c222..ec80ed4fd6 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -14,7 +14,7 @@ $progress-bg:                       var(--#{$prefix}secondary-bg) !default;
 $progress-border-radius:            var(--#{$prefix}border-radius) !default;
 $progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;
 $progress-bar-color:                $white !default;
-$progress-bar-bg:                   $primary !default;
+$progress-bar-bg:                   var(--#{$prefix}primary-bg) !default;
 $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;
 // scss-docs-end progress-variables
diff --git a/scss/_root.scss b/scss/_root.scss
index c4de25d0b5..6484f50412 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -14,66 +14,35 @@
 :root {
   color-scheme: light dark;
 
-  @each $color-group-name, $color-group in $all-colors {
-    @if meta.type-of($color-group) == "map" {
-      @each $color-name, $color-value in $color-group {
-        --#{$prefix}#{$color-name}: #{$color-value};
-      }
-    } @else {
-      --#{$prefix}#{$color-group-name}: #{$color-group};
+  // scss-docs-start root-theme-variables
+  // Generate semantic theme colors
+  @each $color-name, $color-map in $new-theme-colors {
+    @each $key, $value in $color-map {
+      --#{$prefix}#{$color-name}-#{$key}: #{$value};
     }
   }
 
-  @each $color, $value in $theme-colors {
+  @each $color, $value in $theme-bgs {
     --#{$prefix}#{$color}: #{$value};
   }
 
-  @each $color-name, $color-map in $new-theme-colors {
-    @each $key, $value in $color-map {
-      --#{$prefix}#{$color-name}-#{$key}: #{$value};
-    }
+  @each $color, $value in $theme-fgs {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-borders {
+    --#{$prefix}#{$color}: #{$value};
   }
 
   --#{$prefix}black: #{$black};
   --#{$prefix}white: #{$white};
+  // scss-docs-end root-theme-variables
 }
 
 :root,
 [data-bs-theme="light"] {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
-  // Colors
-  //
-  // Generate palettes for full colors, grays, and theme colors.
-
-  // @each $color, $value in $colors {
-  //   --#{$prefix}#{$color}: #{$value};
-  // }
-
-  // @each $color, $value in $grays {
-  //   --#{$prefix}gray-#{$color}: #{$value};
-  // }
-
-  // @each $color, $value in $theme-colors {
-  //   --#{$prefix}#{$color}: #{$value};
-  // }
-
-  // @each $color, $value in $theme-colors-rgb {
-  //   --#{$prefix}#{$color}-rgb: #{$value};
-  // }
-
-  // @each $color, $value in $theme-colors-text {
-  //   --#{$prefix}#{$color}-text-emphasis: #{$value};
-  // }
-
-  // @each $color, $value in $theme-colors-bg-subtle {
-  //   --#{$prefix}#{$color}-bg-subtle: #{$value};
-  // }
-
-  // @each $color, $value in $theme-colors-border-subtle {
-  //   --#{$prefix}#{$color}-border-subtle: #{$value};
-  // }
-
   --#{$prefix}white-rgb: #{to-rgb($white)};
   --#{$prefix}black-rgb: #{to-rgb($black)};
 
@@ -223,24 +192,12 @@
     --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
     --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
-    // @each $color, $value in $theme-colors-text-dark {
-    //   --#{$prefix}#{$color}-text-emphasis: #{$value};
-    // }
-
-    // @each $color, $value in $theme-colors-bg-subtle-dark {
-    //   --#{$prefix}#{$color}-bg-subtle: #{$value};
-    // }
-
-    // @each $color, $value in $theme-colors-border-subtle-dark {
-    //   --#{$prefix}#{$color}-border-subtle: #{$value};
-    // }
-
     --#{$prefix}heading-color: #{$headings-color-dark};
 
-    --#{$prefix}link-color: #{$link-color-dark};
-    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
-    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
-    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+    // --#{$prefix}link-color: #{$link-color-dark};
+    // --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+    // --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+    // --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
 
     // --#{$prefix}code-color: #{$code-color-dark}; // removed in v6
     --#{$prefix}highlight-color: #{$mark-color-dark};
diff --git a/scss/_theme.scss b/scss/_theme.scss
index 0b7daa273e..a3b83e2d37 100644
--- a/scss/_theme.scss
+++ b/scss/_theme.scss
@@ -36,9 +36,8 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
     "bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
     "bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
-    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
     "border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
-    "focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "accent": (
@@ -47,9 +46,8 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
     "bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
     "bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
-    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-300)), var(--#{$prefix}indigo-700)),
     "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
-    "focus-ring": color-mix(in oklch, var(--#{$prefix}indigo-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "danger": (
@@ -58,9 +56,8 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
     "bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
     "bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
-    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}red-200), var(--#{$prefix}red-300)), var(--#{$prefix}red-700)),
     "border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
-    "focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "warning": (
@@ -69,9 +66,8 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
     "bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
     "bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
-    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-300)), var(--#{$prefix}yellow-700)),
     "border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
-    "focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}gray-900)
   ),
   "success": (
@@ -80,9 +76,8 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-500)),
     "bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
     "bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
-    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}green-200), var(--#{$prefix}green-300)), var(--#{$prefix}green-700)),
     "border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
-    "focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "info": (
@@ -91,9 +86,8 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)),
     "bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)),
     "bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
-    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-300)), var(--#{$prefix}cyan-700)),
     "border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
-    "focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}gray-900)
   ),
   "secondary": (
@@ -102,9 +96,8 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
     "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
     "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
-    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in oklch, var(--#{$prefix}gray-600), var(--#{$prefix}gray-700))),
     "border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
-    "focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-300)) 50%, var(--#{$prefix}bg)),
     "contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
   )
 ) !default;
@@ -112,10 +105,10 @@ $new-theme-colors: (
 
 // mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
 $theme-bgs: (
-  null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)),
-  "1": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-900), var(--#{$prefix}gray-800))),
-  "2": light-dark(color-mix(in srgb, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-700))),
-  "3": light-dark(color-mix(in srgb, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in srgb, var(--#{$prefix}gray-700), var(--#{$prefix}gray-600))),
+  null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-975)),
+  "1": light-dark(var(--#{$prefix}gray-025), var(--#{$prefix}gray-950)),
+  "2": light-dark(var(--#{$prefix}gray-050), var(--#{$prefix}gray-900)),
+  "3": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "transparent": transparent,
@@ -123,10 +116,10 @@ $theme-bgs: (
 ) !default;
 
 $theme-fgs: (
-  null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
-  "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
-  "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
-  "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
+  null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-050)),
+  "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-100)),
+  "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-200)),
+  "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-300)),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "inherit": inherit,
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 12339704ad..1dc33672d8 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -9,7 +9,7 @@
 $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-max-width:                 200px !default;
 $tooltip-color:                     var(--#{$prefix}body-bg) !default;
-$tooltip-bg:                        var(--#{$prefix}emphasis-color) !default;
+$tooltip-bg:                        var(--#{$prefix}body-color) !default;
 $tooltip-border-radius:             var(--#{$prefix}border-radius) !default;
 $tooltip-opacity:                   .9 !default;
 $tooltip-padding-y:                 $spacer * .25 !default;
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 63c818b328..d25c870655 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -95,7 +95,8 @@ $utilities: map.merge(
       print: true,
       property: display,
       class: d,
-      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
+      important: true,
+      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex contents flow-root none
     ),
     // scss-docs-end utils-display
     // scss-docs-start utils-shadow
@@ -892,8 +893,15 @@ $utilities: map.merge(
       property: z-index,
       class: z,
       values: $zindex-levels,
-    )
+    ),
     // scss-docs-end utils-zindex
+    // scss-docs-start utils-check-colors
+    "check-color": (
+      property: --#{$prefix}check-checked-bg --#{$prefix}check-checked-border-color --#{$prefix}radio-checked-bg --#{$prefix}radio-checked-border-color,
+      class: checked,
+      values: theme-color-values("bg")
+    )
+    // scss-docs-end utils-check-colors
   ),
   $utilities
 );
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 4297fea52a..cc0f30e82a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -10,62 +10,29 @@
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
 // scss-docs-start theme-color-variables
-$primary:       $blue-500 !default;
-$secondary:     $gray-600 !default;
-$success:       $green-500 !default;
-$info:          $cyan-500 !default;
-$warning:       $yellow-500 !default;
-$danger:        $red-500 !default;
-$light:         $gray-100 !default;
-$dark:          $gray-900 !default;
+// $primary:       $blue-500 !default;
+// $secondary:     var(--#{$prefix}gray-600) !default;
+// $success:       $green-500 !default;
+// $info:          $cyan-500 !default;
+// $warning:       $yellow-500 !default;
+// $danger:        $red-500 !default;
+// $light:         var(--#{$prefix}gray-100) !default;
+// $dark:          var(--#{$prefix}gray-900) !default;
 // scss-docs-end theme-color-variables
 
 // scss-docs-start theme-colors-map
-$theme-colors: (
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger,
-  "light":      $light,
-  "dark":       $dark
-) !default;
+// $theme-colors: (
+//   "primary":    $primary,
+//   "secondary":  $secondary,
+//   "success":    $success,
+//   "info":       $info,
+//   "warning":    $warning,
+//   "danger":     $danger,
+//   "light":      $light,
+//   "dark":       $dark
+// ) !default;
 // scss-docs-end theme-colors-map
 
-// // scss-docs-start theme-text-variables
-// $primary-text-emphasis:   shade-color($primary, 60%) !default;
-// $secondary-text-emphasis: shade-color($secondary, 60%) !default;
-// $success-text-emphasis:   shade-color($success, 60%) !default;
-// $info-text-emphasis:      shade-color($info, 60%) !default;
-// $warning-text-emphasis:   shade-color($warning, 60%) !default;
-// $danger-text-emphasis:    shade-color($danger, 60%) !default;
-// $light-text-emphasis:     $gray-700 !default;
-// $dark-text-emphasis:      $gray-700 !default;
-// // scss-docs-end theme-text-variables
-
-// // scss-docs-start theme-bg-subtle-variables
-// $primary-bg-subtle:       tint-color($primary, 80%) !default;
-// $secondary-bg-subtle:     tint-color($secondary, 80%) !default;
-// $success-bg-subtle:       tint-color($success, 80%) !default;
-// $info-bg-subtle:          tint-color($info, 80%) !default;
-// $warning-bg-subtle:       tint-color($warning, 80%) !default;
-// $danger-bg-subtle:        tint-color($danger, 80%) !default;
-// $light-bg-subtle:         color.mix($gray-100, $white) !default;
-// $dark-bg-subtle:          $gray-400 !default;
-// // scss-docs-end theme-bg-subtle-variables
-
-// // scss-docs-start theme-border-subtle-variables
-// $primary-border-subtle:   tint-color($primary, 60%) !default;
-// $secondary-border-subtle: tint-color($secondary, 60%) !default;
-// $success-border-subtle:   tint-color($success, 60%) !default;
-// $info-border-subtle:      tint-color($info, 60%) !default;
-// $warning-border-subtle:   tint-color($warning, 60%) !default;
-// $danger-border-subtle:    tint-color($danger, 60%) !default;
-// $light-border-subtle:     $gray-200 !default;
-// $dark-border-subtle:      $gray-500 !default;
-// // scss-docs-end theme-border-subtle-variables
-
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
   ("<", "%3c"),
@@ -150,14 +117,14 @@ $position-values: (
 // Settings for the `<body>` element.
 
 $body-text-align:           null !default;
-$body-color:                $gray-900 !default;
+$body-color:                var(--#{$prefix}gray-900) !default;
 $body-bg:                   $white !default;
 
 $body-secondary-color:      rgba($body-color, .75) !default;
-$body-secondary-bg:         $gray-200 !default;
+$body-secondary-bg:         var(--#{$prefix}gray-200) !default;
 
 $body-tertiary-color:       rgba($body-color, .5) !default;
-$body-tertiary-bg:          $gray-100 !default;
+$body-tertiary-bg:          var(--#{$prefix}gray-100) !default;
 
 $body-emphasis-color:       $black !default;
 
@@ -165,11 +132,11 @@ $body-emphasis-color:       $black !default;
 //
 // Style anchor elements.
 
-$link-color:                              $primary !default;
+// $link-color:                              var !default;
 $link-decoration:                         underline !default;
 $link-underline-offset:                   .2em !default;
 $link-shade-percentage:                   20% !default;
-$link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
+// $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
 $link-hover-decoration:                   null !default;
 
 $stretched-link-pseudo-element:           after !default;
@@ -205,7 +172,7 @@ $border-widths: (
   5: 5px
 ) !default;
 $border-style:                solid !default;
-$border-color:                color.mix($gray-300, $gray-400) !default;
+$border-color:                var(--#{$prefix}gray-200) !default;
 $border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 
@@ -225,17 +192,17 @@ $box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
 $box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
 // scss-docs-end box-shadow-variables
 
-$component-active-color:      $white !default;
-$component-active-bg:         $primary !default;
-
 // scss-docs-start focus-ring-variables
 $focus-ring-width:      .25rem !default;
 $focus-ring-opacity:    .25 !default;
-$focus-ring-color:      rgba($primary, $focus-ring-opacity) !default;
+$focus-ring-color:      var(--#{$prefix}primary-focus-ring) !default;
 $focus-ring-blur:       0 !default;
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 // scss-docs-end focus-ring-variables
 
+$component-active-color:      var(--#{$prefix}primary-contrast) !default;
+$component-active-bg:         var(--#{$prefix}primary-bg) !default;
+
 $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 // scss-docs-start collapse-transition
@@ -342,7 +309,7 @@ $initialism-font-size:        $small-font-size !default;
 
 $blockquote-margin-y:         $spacer !default;
 $blockquote-font-size:        $font-size-base * 1.25 !default;
-$blockquote-footer-color:     $gray-600 !default;
+$blockquote-footer-color:     var(--#{$prefix}gray-600) !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
 $hr-margin-y:                 $spacer !default;
@@ -366,7 +333,7 @@ $list-inline-padding:         .5rem !default;
 
 $mark-padding:                .1875em !default;
 $mark-color:                  $body-color !default;
-$mark-bg:                     $yellow-100 !default;
+$mark-bg:                     var(--#{$prefix}yellow-100) !default;
 // scss-docs-end type-variables
 
 
@@ -381,7 +348,7 @@ $input-btn-font-family:       null !default;
 $input-btn-font-size:         $font-size-base !default;
 $input-btn-line-height:       $line-height-base !default;
 
-$input-btn-focus-width:         $focus-ring-width !default;
+$input-btn-focus-width:         .25em !default;
 $input-btn-focus-color-opacity: $focus-ring-opacity !default;
 $input-btn-focus-color:         $focus-ring-color !default;
 $input-btn-focus-blur:          $focus-ring-blur !default;
@@ -431,9 +398,9 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color:     $gray-600 !default;
-$btn-link-color-contrast:     color-contrast($link-color) !default;
-$btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
+$btn-link-disabled-color:     var(--#{$prefix}gray-600) !default;
+// $btn-link-color-contrast:     color-contrast($link-color) !default;
+// $btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -567,21 +534,18 @@ $pre-color:                         null !default;
 //
 
 // scss-docs-start sass-dark-mode-vars
-$body-color-dark:                   $gray-300 !default;
-$body-bg-dark:                      $gray-900 !default;
+$body-color-dark:                   var(--#{$prefix}gray-200) !default;
+$body-bg-dark:                      var(--#{$prefix}gray-975) !default;
 $body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
-$body-secondary-bg-dark:            $gray-800 !default;
+$body-secondary-bg-dark:            var(--#{$prefix}gray-800) !default;
 $body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark:             color.mix($gray-800, $gray-900, 50%) !default;
+$body-tertiary-bg-dark:             color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900)) !default;
 $body-emphasis-color-dark:          $white !default;
-$border-color-dark:                 $gray-700 !default;
+$border-color-dark:                 var(--#{$prefix}gray-700) !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
 $headings-color-dark:               inherit !default;
-$link-color-dark:                   tint-color($primary, 40%) !default;
-$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
-// $code-color-dark:                   tint-color($code-color, 40%) !default;
 $mark-color-dark:                   $body-color-dark !default;
-$mark-bg-dark:                      $yellow-800 !default;
+$mark-bg-dark:                      var(--#{$prefix}yellow-800) !default;
 
 
 //
@@ -589,9 +553,9 @@ $mark-bg-dark:                      $yellow-800 !default;
 //
 
 // scss-docs-start form-validation-colors-dark
-$form-valid-color-dark:             $green-300 !default;
-$form-valid-border-color-dark:      $green-300 !default;
-$form-invalid-color-dark:           $red-300 !default;
-$form-invalid-border-color-dark:    $red-300 !default;
+$form-valid-color-dark:             var(--#{$prefix}green-300) !default;
+$form-valid-border-color-dark:      var(--#{$prefix}green-300) !default;
+$form-invalid-color-dark:           var(--#{$prefix}red-300) !default;
+$form-invalid-border-color-dark:    var(--#{$prefix}red-300) !default;
 // scss-docs-end form-validation-colors-dark
 // scss-docs-end sass-dark-mode-vars
diff --git a/scss/buttons/_button-variables.scss b/scss/buttons/_button-variables.scss
index bd1005fafb..2dfa3b3d06 100644
--- a/scss/buttons/_button-variables.scss
+++ b/scss/buttons/_button-variables.scss
@@ -33,9 +33,9 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color:     $gray-600 !default;
-$btn-link-color-contrast:     color-contrast($link-color) !default;
-$btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
+$btn-link-disabled-color:     var(--#{$prefix}gray-600) !default;
+// $btn-link-color-contrast:     color-contrast($link-color) !default;
+// $btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;
diff --git a/scss/buttons/_button.scss b/scss/buttons/_button.scss
index c5f2da5597..15b2c7d8da 100644
--- a/scss/buttons/_button.scss
+++ b/scss/buttons/_button.scss
@@ -2,6 +2,7 @@
 @use "../colors" as *;
 @use "../config" as *;
 @use "../variables" as *;
+@use "../theme" as *;
 @use "../functions" as *;
 @use "../vendor/rfs" as *;
 @use "../mixins/border-radius" as *;
@@ -17,60 +18,60 @@
 // and disabled options for all buttons
 
 // scss-docs-start btn-variant-mixin
-@mixin button-variant(
-  $background,
-  $border,
-  $color: color-contrast($background),
-  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
-  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
-  $hover-color: color-contrast($hover-background),
-  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
-  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
-  $active-color: color-contrast($active-background),
-  $disabled-background: $background,
-  $disabled-border: $border,
-  $disabled-color: color-contrast($disabled-background)
-) {
-  --#{$prefix}btn-color: #{$color};
-  --#{$prefix}btn-bg: #{$background};
-  --#{$prefix}btn-border-color: #{$border};
-  --#{$prefix}btn-hover-color: #{$hover-color};
-  --#{$prefix}btn-hover-bg: #{$hover-background};
-  --#{$prefix}btn-hover-border-color: #{$hover-border};
-  // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
-  --#{$prefix}btn-active-color: #{$active-color};
-  --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border};
-  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-  --#{$prefix}btn-disabled-color: #{$disabled-color};
-  --#{$prefix}btn-disabled-bg: #{$disabled-background};
-  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
-}
+// @mixin button-variant(
+//   $background,
+//   $border,
+//   $color: color-contrast($background),
+//   $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+//   $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+//   $hover-color: color-contrast($hover-background),
+//   $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+//   $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+//   $active-color: color-contrast($active-background),
+//   $disabled-background: $background,
+//   $disabled-border: $border,
+//   $disabled-color: color-contrast($disabled-background)
+// ) {
+//   --#{$prefix}btn-color: #{$color};
+//   --#{$prefix}btn-bg: #{$background};
+//   --#{$prefix}btn-border-color: #{$border};
+//   --#{$prefix}btn-hover-color: #{$hover-color};
+//   --#{$prefix}btn-hover-bg: #{$hover-background};
+//   --#{$prefix}btn-hover-border-color: #{$hover-border};
+//   // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
+//   --#{$prefix}btn-active-color: #{$active-color};
+//   --#{$prefix}btn-active-bg: #{$active-background};
+//   --#{$prefix}btn-active-border-color: #{$active-border};
+//   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+//   --#{$prefix}btn-disabled-color: #{$disabled-color};
+//   --#{$prefix}btn-disabled-bg: #{$disabled-background};
+//   --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+// }
 // scss-docs-end btn-variant-mixin
 
 // scss-docs-start btn-outline-variant-mixin
-@mixin button-outline-variant(
-  $color,
-  $color-hover: color-contrast($color),
-  $active-background: $color,
-  $active-border: $color,
-  $active-color: color-contrast($active-background)
-) {
-  --#{$prefix}btn-color: #{$color};
-  --#{$prefix}btn-border-color: #{$color};
-  --#{$prefix}btn-hover-color: #{$color-hover};
-  --#{$prefix}btn-hover-bg: #{$active-background};
-  --#{$prefix}btn-hover-border-color: #{$active-border};
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
-  --#{$prefix}btn-active-color: #{$active-color};
-  --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border};
-  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-  --#{$prefix}btn-disabled-color: #{$color};
-  --#{$prefix}btn-disabled-bg: transparent;
-  --#{$prefix}btn-disabled-border-color: #{$color};
-  --#{$prefix}gradient: none;
-}
+// @mixin button-outline-variant(
+//   $color,
+//   $color-hover: color-contrast($color),
+//   $active-background: $color,
+//   $active-border: $color,
+//   $active-color: color-contrast($active-background)
+// ) {
+//   --#{$prefix}btn-color: #{$color};
+//   --#{$prefix}btn-border-color: #{$color};
+//   --#{$prefix}btn-hover-color: #{$color-hover};
+//   --#{$prefix}btn-hover-bg: #{$active-background};
+//   --#{$prefix}btn-hover-border-color: #{$active-border};
+//   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+//   --#{$prefix}btn-active-color: #{$active-color};
+//   --#{$prefix}btn-active-bg: #{$active-background};
+//   --#{$prefix}btn-active-border-color: #{$active-border};
+//   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+//   --#{$prefix}btn-disabled-color: #{$color};
+//   --#{$prefix}btn-disabled-bg: transparent;
+//   --#{$prefix}btn-disabled-border-color: #{$color};
+//   --#{$prefix}gradient: none;
+// }
 // scss-docs-end btn-outline-variant-mixin
 
 // scss-docs-start btn-size-mixin
@@ -193,37 +194,37 @@
   //
 
   // scss-docs-start btn-variant-loops
-  @each $color, $value in $theme-colors {
-    .btn-#{$color} {
-      @if $color == "light" {
-        @include button-variant(
-          $value,
-          $value,
-          $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
-          $hover-border: shade-color($value, $btn-hover-border-shade-amount),
-          $active-background: shade-color($value, $btn-active-bg-shade-amount),
-          $active-border: shade-color($value, $btn-active-border-shade-amount)
-        );
-      } @else if $color == "dark" {
-        @include button-variant(
-          $value,
-          $value,
-          $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
-          $hover-border: tint-color($value, $btn-hover-border-tint-amount),
-          $active-background: tint-color($value, $btn-active-bg-tint-amount),
-          $active-border: tint-color($value, $btn-active-border-tint-amount)
-        );
-      } @else {
-        @include button-variant($value, $value);
-      }
-    }
-  }
-
-  @each $color, $value in $theme-colors {
-    .btn-outline-#{$color} {
-      @include button-outline-variant($value);
-    }
-  }
+  // @each $color, $value in $new-theme-colors {
+  //   .btn-#{$color} {
+  //     @if $color == "light" {
+  //       @include button-variant(
+  //         $value,
+  //         $value,
+  //         $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+  //         $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+  //         $active-background: shade-color($value, $btn-active-bg-shade-amount),
+  //         $active-border: shade-color($value, $btn-active-border-shade-amount)
+  //       );
+  //     } @else if $color == "dark" {
+  //       @include button-variant(
+  //         $value,
+  //         $value,
+  //         $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+  //         $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+  //         $active-background: tint-color($value, $btn-active-bg-tint-amount),
+  //         $active-border: tint-color($value, $btn-active-border-tint-amount)
+  //       );
+  //     } @else {
+  //       @include button-variant($value, $value);
+  //     }
+  //   }
+  // }
+
+  // @each $color, $value in $new-theme-colors {
+  //   .btn-outline-#{$color} {
+  //     @include button-outline-variant($value);
+  //   }
+  // }
   // scss-docs-end btn-variant-loops
 
 
diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss
index 5acfa27fe9..41ff84f506 100644
--- a/scss/content/_tables.scss
+++ b/scss/content/_tables.scss
@@ -3,6 +3,7 @@
 @use "sass:math";
 @use "../config" as *;
 @use "../colors" as *;
+@use "../theme" as *;
 @use "../variables" as *;
 @use "../functions" as *;
 @use "../layout/breakpoints" as *;
@@ -15,7 +16,7 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--#{$prefix}emphasis-color) !default;
+$table-color:                 var(--#{$prefix}body-color) !default;
 $table-bg:                    var(--#{$prefix}body-bg) !default;
 $table-accent-bg:             transparent !default;
 
@@ -23,15 +24,15 @@ $table-accent-bg:             transparent !default;
 
 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
+$table-striped-bg:            color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)}, transparent) !default;
 
 $table-active-color:          $table-color !default;
 $table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
+$table-active-bg:             color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)}, transparent) !default;
 
 $table-hover-color:           $table-color !default;
 $table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
+$table-hover-bg:              color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default;
 
 $table-border-factor:         .2 !default;
 $table-border-width:          var(--#{$prefix}border-width) !default;
@@ -44,26 +45,17 @@ $table-group-separator-color: currentcolor !default;
 
 // $table-caption-color:         var(--#{$prefix}secondary-color) !default;
 
-$table-bg-scale:              -80% !default;
 // scss-docs-end table-variables
 
 // scss-docs-start table-loop
-$table-variants: (
-  "primary":    shift-color($primary, $table-bg-scale),
-  "secondary":  shift-color($secondary, $table-bg-scale),
-  "success":    shift-color($success, $table-bg-scale),
-  "info":       shift-color($info, $table-bg-scale),
-  "warning":    shift-color($warning, $table-bg-scale),
-  "danger":     shift-color($danger, $table-bg-scale),
-  "light":      $light,
-  "dark":       $dark,
-) !default;
+$table-variants: $new-theme-colors !default;
 // scss-docs-end table-loop
 
 // scss-docs-start table-variant
 @mixin table-variant($state, $background) {
   .table-#{$state} {
-    $color: color-contrast(opaque($body-bg, $background));
+    // $color: color-contrast(opaque($body-bg, $background));
+    $color: var(--#{$prefix}#{$state}-text);
     $hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
     $striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
     $active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
@@ -238,9 +230,24 @@ $table-variants: (
   // Table variants set the table cell backgrounds, border colors
   // and the colors of the striped, hovered & active tables
 
-  @each $color, $value in $table-variants {
-    @include table-variant($color, $value);
+  // scss-docs-start table-variants-loop
+  @each $color in map.keys($table-variants) {
+    .table-#{$color} {
+      --#{$prefix}table-color: var(--#{$prefix}#{$color}-text);
+      --#{$prefix}table-bg: var(--#{$prefix}#{$color}-bg-subtle);
+      --#{$prefix}table-border-color: var(--#{$prefix}#{$color}-border);
+      --#{$prefix}table-striped-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)});
+      --#{$prefix}table-striped-color: var(--#{$prefix}table-color);
+      --#{$prefix}table-active-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)});
+      --#{$prefix}table-active-color: var(--#{$prefix}table-color);
+      --#{$prefix}table-hover-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)});
+      --#{$prefix}table-hover-color: var(--#{$prefix}table-color);
+
+      color: var(--#{$prefix}table-color);
+      border-color: var(--#{$prefix}table-border-color);
+    }
   }
+  // scss-docs-end table-variants-loop
 
   // Responsive tables
   //
diff --git a/scss/forms/_check.scss b/scss/forms/_check.scss
index bc88beaf38..3d92c3b1e2 100644
--- a/scss/forms/_check.scss
+++ b/scss/forms/_check.scss
@@ -16,8 +16,7 @@ $check-checked-bg: var(--#{$prefix}primary-base) !default;
 $check-checked-border-color: $check-checked-bg !default;
 $check-indeterminate-bg: var(--#{$prefix}primary-base) !default;
 $check-indeterminate-border-color: $check-indeterminate-bg !default;
-$check-disabled-bg: var(--#{$prefix}secondary-bg) !default;
-$check-disabled-border-color: $check-disabled-bg !default;
+$check-disabled-bg: var(--#{$prefix}bg-3) !default;
 $check-disabled-opacity: .65 !default;
 // scss-docs-end check-variables
 
@@ -41,7 +40,6 @@ $check-disabled-opacity: .65 !default;
     --#{$prefix}check-indeterminate-bg: #{$check-indeterminate-bg};
     --#{$prefix}check-indeterminate-border-color: #{$check-indeterminate-border-color};
     --#{$prefix}check-disabled-bg: #{$check-disabled-bg};
-    --#{$prefix}check-disabled-border-color: #{$check-disabled-border-color};
     --#{$prefix}check-disabled-opacity: #{$check-disabled-opacity};
     // scss-docs-end check-css-variables
 
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 6a0e12b521..4e8c4e939b 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -15,7 +15,7 @@ $form-floating-input-padding-b:         .625rem !default;
 $form-floating-label-height:            1.5em !default;
 $form-floating-label-opacity:           .65 !default;
 $form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;
-$form-floating-label-disabled-color:    $gray-600 !default;
+$form-floating-label-disabled-color:    var(--#{$prefix}gray-600) !default;
 $form-floating-transition:              opacity .1s ease-in-out, transform .1s ease-in-out !default;
 // scss-docs-end form-floating-variables
 
diff --git a/scss/forms/_form-variables.scss b/scss/forms/_form-variables.scss
index f7a002ddeb..d507cfd220 100644
--- a/scss/forms/_form-variables.scss
+++ b/scss/forms/_form-variables.scss
@@ -27,7 +27,7 @@ $control-font-size-lg: $font-size-lg !default;
 $control-line-height-lg: $line-height-lg !default;
 $control-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
 
-$control-select-indicator-color:       $gray-600 !default;
+$control-select-indicator-color:       var(--#{$prefix}gray-600) !default;
 $control-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$control-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
 $control-select-bg-position:           right $control-padding-x center !default;
 $control-select-bg-size:               16px 12px !default;
diff --git a/scss/forms/_radio.scss b/scss/forms/_radio.scss
index af63fb188e..5e08a6d77e 100644
--- a/scss/forms/_radio.scss
+++ b/scss/forms/_radio.scss
@@ -14,8 +14,7 @@
 $radio-border-color: var(--#{$prefix}border-color) !default;
 $radio-checked-bg: var(--#{$prefix}primary-base) !default;
 $radio-checked-border-color: $radio-checked-bg !default;
-$radio-disabled-bg: var(--#{$prefix}secondary-bg) !default;
-$radio-disabled-border-color: $radio-disabled-bg !default;
+$radio-disabled-bg: var(--#{$prefix}bg-3) !default;
 $radio-disabled-opacity: .65 !default;
 // scss-docs-end radio-variables
 
@@ -37,7 +36,6 @@ $radio-disabled-opacity: .65 !default;
     --#{$prefix}radio-checked-bg: #{$radio-checked-bg};
     --#{$prefix}radio-checked-border-color: #{$radio-checked-border-color};
     --#{$prefix}radio-disabled-bg: #{$radio-disabled-bg};
-    --#{$prefix}radio-disabled-border-color: #{$radio-disabled-border-color};
     --#{$prefix}radio-disabled-opacity: #{$radio-disabled-opacity};
     // scss-docs-end radio-css-variables
 
diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss
index d9b1c56e89..4c06d70cb3 100644
--- a/scss/helpers/_color-bg.scss
+++ b/scss/helpers/_color-bg.scss
@@ -1,13 +1,16 @@
-@use "../colors" as *;
 @use "../config" as *;
 @use "../variables" as *;
+@use "../colors" as *;
+@use "../theme" as *;
 
 @layer helpers {
   // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
-  @each $color, $value in $theme-colors {
+  @each $color, $value in $new-theme-colors {
     .text-bg-#{$color} {
-      color: color-contrast($value);
-      background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1));
+      color: var(--#{$prefix}#{$color}-text);
+      background-color: var(--#{$prefix}#{$color}-bg-subtle);
+      // color: color-contrast($value);
+      // background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1));
     }
   }
 }
diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index f9a6739986..8268902847 100644
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -1,20 +1,22 @@
 @use "../config" as *;
 @use "../colors" as *;
+@use "../theme" as *;
 @use "../variables" as *;
 
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @layer helpers {
-  @each $color, $value in $theme-colors {
+  @each $color, $value in $new-theme-colors {
     .link-#{$color} {
-      color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
-      text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
+      color: var(--#{$prefix}#{$color}-text);
+      // color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
+      text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity));
 
       @if $link-shade-percentage != 0 {
         &:hover,
         &:focus {
-          $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-          color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
-          text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
+          // $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+          // color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
+          text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity));
         }
       }
     }
diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss
index df077a5c1f..3d1fdbdedf 100644
--- a/scss/layout/_grid.scss
+++ b/scss/layout/_grid.scss
@@ -70,4 +70,8 @@
   .grid-cols-6 {
     --#{$prefix}columns: 6;
   }
+
+  .grid-full {
+    grid-column: 1 / -1;
+  }
 }
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index 28e0221611..d50b4b8aab 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -17,18 +17,18 @@
 // Horizontal gradient, from left to right
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-x($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
 }
 
 // Vertical gradient, from top to bottom
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
+@mixin gradient-y($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $start-percent: null, $end-percent: null) {
   background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
 }
 
-@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
+@mixin gradient-directional($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $deg: 45deg) {
   background-image: linear-gradient($deg, $start-color, $end-color);
 }
 
@@ -40,7 +40,7 @@
   background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
 }
 
-@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
+@mixin gradient-radial($inner-color: var(--#{$prefix}gray-700), $outer-color: var(--#{$prefix}gray-800)) {
   background-image: radial-gradient(circle, $inner-color, $outer-color);
 }
 
diff --git a/site/data/colors.yml b/site/data/colors.yml
index 09c13167a5..dee45e50d7 100644
--- a/site/data/colors.yml
+++ b/site/data/colors.yml
@@ -1,26 +1,16 @@
 - name: blue
-  hex: '#0d6efd'
 - name: indigo
-  hex: '#6610f2'
+- name: violet
 - name: purple
-  hex: '#6f42c1'
 - name: pink
-  hex: '#d63384'
 - name: red
-  hex: '#dc3545'
 - name: orange
-  hex: '#fd7e14'
+- name: amber
 - name: yellow
-  hex: '#ffc107'
+- name: lime
 - name: green
-  hex: '#198754'
 - name: teal
-  hex: '#20c997'
 - name: cyan
-  hex: '#0dcaf0'
-- name: white
-  hex: '#fff'
+- name: brown
 - name: gray
-  hex: '#6c757d'
-- name: gray-dark
-  hex: '#343a40'
+- name: pewter
diff --git a/site/data/grays.yml b/site/data/grays.yml
deleted file mode 100644
index 0915acf1bf..0000000000
--- a/site/data/grays.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-- name: 100
-  hex: '#f8f9fa'
-- name: 200
-  hex: '#e9ecef'
-- name: 300
-  hex: '#dee2e6'
-- name: 400
-  hex: '#ced4da'
-- name: 500
-  hex: '#adb5bd'
-- name: 600
-  hex: '#868e96'
-- name: 700
-  hex: '#495057'
-- name: 800
-  hex: '#343a40'
-- name: 900
-  hex: '#212529'
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index c6078956db..c9857989f0 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -26,6 +26,7 @@
     - title: Sass
     - title: Options
     - title: Color
+    - title: Theme
     - title: Color modes
     - title: Components
     - title: CSS variables
diff --git a/site/data/theme-colors.yml b/site/data/theme-colors.yml
index b950237685..c5a7a6fa02 100644
--- a/site/data/theme-colors.yml
+++ b/site/data/theme-colors.yml
@@ -1,20 +1,7 @@
 - name: primary
-  hex: '#0d6efd'
-- name: secondary
-  hex: '#6c757d'
+- name: accent
 - name: success
-  hex: '#28a745'
 - name: danger
-  hex: '#dc3545'
 - name: warning
-  hex: '#ffc107'
-  contrast_color: dark
 - name: info
-  hex: '#17a2b8'
-  contrast_color: dark
-- name: light
-  hex: '#f8f9fa'
-  contrast_color: dark
-- name: dark
-  hex: '#343a40'
-  contrast_color: white
+- name: secondary
diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro
index 044e1af4d4..a85f10337d 100644
--- a/site/src/components/shortcodes/Example.astro
+++ b/site/src/components/shortcodes/Example.astro
@@ -13,6 +13,11 @@ interface Props {
    * If an array is passed, elements will be joined with a new line.
    */
   code: string | string[]
+  /**
+   * Custom markup to display in the source code section, different from the preview code.
+   * If provided, this will be used instead of the `code` prop for the source display.
+   */
+  customMarkup?: string | string[]
   /**
    * The CSS class(es) to be added to the preview wrapping `div` element.
    */
@@ -41,6 +46,7 @@ interface Props {
 const {
   addStackblitzJs = false,
   code,
+  customMarkup,
   class: className,
   id,
   lang = 'html',
@@ -51,7 +57,12 @@ const {
 let markup = Array.isArray(code) ? code.join('\n') : code
 markup = replacePlaceholdersInHtml(markup)
 
-const simplifiedMarkup = markup
+// Use customMarkup for source code display if provided, otherwise use the processed markup
+let sourceMarkup = customMarkup
+  ? (Array.isArray(customMarkup) ? customMarkup.join('\n') : customMarkup)
+  : markup
+
+const simplifiedMarkup = sourceMarkup
   .replace(
     /<svg.*class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>/g,
     (match, classes) => `<img src="..."${classes ? ` class="${classes}"` : ''} alt="...">`
diff --git a/site/src/components/shortcodes/Swatch.astro b/site/src/components/shortcodes/Swatch.astro
new file mode 100644
index 0000000000..bca1db31cd
--- /dev/null
+++ b/site/src/components/shortcodes/Swatch.astro
@@ -0,0 +1,95 @@
+---
+export interface Props {
+  bg: string
+  fg?: string
+  size?: 'inline' | 'medium' | 'large'
+  contrast?: string
+  contrastDark?: string
+}
+
+const { bg, fg, size = 'inline', contrast, contrastDark } = Astro.props
+
+// Styles for different sizes
+const baseStyles = {
+  display: 'inline-flex',
+  color: `var(--bs-${fg})`,
+  backgroundColor: `var(--bs-${bg})`,
+  boxShadow: 'inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1))'
+}
+
+const sizeStyles = {
+  inline: {
+    verticalAlign: 'text-bottom',
+    width: '1rem',
+    height: '1rem',
+    borderRadius: 'var(--bs-border-radius-sm)'
+  },
+  medium: {
+    width: '100%',
+    paddingBlock: '1.5rem',
+    borderRadius: 'var(--bs-border-radius)'
+  },
+  large: {
+    width: '100%',
+    paddingBlock: '.5rem',
+    paddingInline: '1rem',
+    borderRadius: 'var(--bs-border-radius-lg)'
+  }
+}
+
+// Parse contrast ratios and determine if they're below 4.5
+const contrastRatio = contrast ? parseFloat(contrast) : null
+const contrastDarkRatio = contrastDark ? parseFloat(contrastDark) : null
+const isLowContrast = contrastRatio !== null && contrastRatio < 4.5
+const isLowContrastDark = contrastDarkRatio !== null && contrastDarkRatio < 4.5
+
+const contrastStyles = {
+  marginLeft: 'auto',
+  opacity: .5,
+  fontSize: '.75rem',
+  fontFamily: 'var(--bs-font-monospace)',
+  color: isLowContrast ? 'red' : 'inherit'
+}
+
+const combinedStyles = { ...baseStyles, ...sizeStyles[size] }
+---
+
+<style>
+  /* Show light contrast by default and in light mode */
+  .contrast-light {
+    display: inline;
+  }
+
+  .contrast-dark {
+    display: none;
+  }
+
+  /* Show dark contrast in dark mode */
+  :global([data-bs-theme="dark"]) .contrast-light {
+    display: none;
+  }
+
+  :global([data-bs-theme="dark"]) .contrast-dark {
+    display: inline;
+  }
+</style>
+
+{size === 'inline' ? (
+  <span style={combinedStyles}>
+    <slot />
+    {contrast && <span style={contrastStyles} class="contrast-light">{contrast}</span>}
+    {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
+  </span>
+) : size === 'large' ? (
+  <span style={combinedStyles}>
+    <slot />
+    {contrast && <span style={contrastStyles} class="contrast-light">{contrast}</span>}
+    {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
+  </span>
+) : (
+  <div style={combinedStyles}>
+    <slot />
+    {contrast && <span style={contrastStyles} class="contrast-light">{contrast}</span>}
+    {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
+  </div>
+)}
diff --git a/site/src/components/shortcodes/Table.astro b/site/src/components/shortcodes/Table.astro
index 622aff9c88..035c28aff9 100644
--- a/site/src/components/shortcodes/Table.astro
+++ b/site/src/components/shortcodes/Table.astro
@@ -14,19 +14,26 @@ interface Props {
    * @default true
    */
   simplified?: boolean
+  /**
+   * Optional theme for the table.
+   */
+  theme?: 'light' | 'dark'
 }
 
-const { class: className, simplified = true } = Astro.props
+const { class: className, simplified = true, theme } = Astro.props
 
-const tableCode = `<table${className ? ` class="${className}"` : ''}>
+// Build the attributes
+const classAttr = className ? ` class="${className}"` : ''
+const themeAttr = theme ? ` data-bs-theme="${theme}"` : ''
+const allAttrs = `${classAttr}${themeAttr}`
+
+const tableCode = `<table${allAttrs}>
 ${simplified ? '  ...' : await tableContent.compiledContent()}
 </table>`
 
-const exampleCode = `<table${className ? ` class="${className}"` : ''}>
+const exampleCode = `<table${allAttrs}>
 ${await tableContent.compiledContent()}
 </table>`
 ---
 
-<Example showMarkup={false} code={exampleCode} />
-
-<Code code={tableCode} lang="html" />
+<Example code={exampleCode} customMarkup={tableCode} />
diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx
index c1af4c11b3..0211dbd2bc 100644
--- a/site/src/content/docs/components/card.mdx
+++ b/site/src/content/docs/components/card.mdx
@@ -397,7 +397,7 @@ Use [border utilities]([[docsref:/utilities/border]]) to change just the `border
 
 <Example code={getData('theme-colors').map((themeColor) => `<div class="card border-${themeColor.name} mb-3" style="max-width: 18rem;">
     <div class="card-header">Header</div>
-    <div class="card-body${themeColor.contrast_color ? '' : ` text-${themeColor.name}`}">
+    <div class="card-body text-${themeColor.name}">
       <h5 class="card-title">${themeColor.title} card title</h5>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
     </div>
diff --git a/site/src/content/docs/content/tables.mdx b/site/src/content/docs/content/tables.mdx
index a1cf58750d..eb07ea1ffe 100644
--- a/site/src/content/docs/content/tables.mdx
+++ b/site/src/content/docs/content/tables.mdx
@@ -16,11 +16,7 @@ Using the most basic table markup, here’s how `.table`-based tables look in Bo
 
 ## Variants
 
-Use contextual classes to color tables, table rows or individual cells.
-
-<Callout>
-**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>
+Use theme-specific color classes to style tables, table rows, or individual cells. These adapt to color modes as well.
 
 <div class="bd-example">
   <table class="table">
@@ -81,9 +77,9 @@ Use `.table-striped-columns` to add zebra-striping to any table column.
 
 These classes can also be added to table variants:
 
-<Table class="table table-dark table-striped" />
+<Table class="table table-striped" theme="dark" />
 
-<Table class="table table-dark table-striped-columns" />
+<Table class="table table-striped-columns" theme="dark" />
 
 <Table class="table table-success table-striped" />
 
@@ -105,7 +101,7 @@ These hoverable rows can also be combined with the striped rows variant:
 
 Highlight a table row or cell by adding a `.table-active` class.
 
-<Example showMarkup={false} code={`
+<Example code={`
 <table class="table">
   <thead>
     <tr>
@@ -136,9 +132,7 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-`} />
-
-```html
+`} customMarkup={`
 <table class="table">
   <thead>
     ...
@@ -158,9 +152,9 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-```
+`} />
 
-<Example showMarkup={false} code={`
+<Example code={`
 <table class="table table-dark">
   <thead>
     <tr>
@@ -191,9 +185,7 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-`} />
-
-```html
+`} customMarkup={`
 <table class="table table-dark">
   <thead>
     ...
@@ -213,21 +205,25 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-```
+`} />
 
 ## How do the variants and accented tables work?
 
 For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
 
 - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don’t get into trouble if semi-transparent colors are used as table backgrounds.
+
 - Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` by default, we don’t have a default box shadow.
+
 - When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg-type` or `--bs-table-bg-state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`.
+
 - For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
+
 - Text and border colors are generated the same way, and their colors are inherited by default.
 
 Behind the scenes it looks like this:
 
-<ScssDocs name="table-variant" file="scss/content/_tables.scss" />
+<ScssDocs name="table-variants-loop" file="scss/content/_tables.scss" />
 
 ## Table borders
 
@@ -296,7 +292,7 @@ Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<
 
 Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]([[docsref:/utilities/vertical-align]]) classes to re-align where needed.
 
-<Example showMarkup={false} code={`
+<Example code={`
 <div class="table-responsive">
   <table class="table align-middle">
     <thead>
@@ -329,9 +325,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
     </tbody>
   </table>
 </div>
-`} />
-
-```html
+`} customMarkup={`
 <div class="table-responsive">
   <table class="table align-middle">
     <thead>
@@ -355,13 +349,13 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
     </tbody>
   </table>
 </div>
-```
+`} />
 
 ## Nesting
 
 Border styles, active styles, and table variants are not inherited by nested tables.
 
-<Example showMarkup={false} code={`
+<Example code={`
 <table class="table table-striped table-bordered">
   <thead>
     <tr>
@@ -416,9 +410,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
     </tr>
   </tbody>
 </table>
-`} />
-
-```html
+`} customMarkup={`
 <table class="table table-striped table-bordered">
   <thead>
     ...
@@ -435,7 +427,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
     ...
   </tbody>
 </table>
-```
+`} />
 
 ## How nesting works
 
@@ -443,101 +435,7 @@ To prevent *any* styles from leaking to nested tables, we use the child combinat
 
 Note that if you add `<tr>`s as direct children of a table, those `<tr>` will be wrapped in a `<tbody>` by default, thus making our selectors work as intended.
 
-## Anatomy
-
-### Table head
-
-Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make `<thead>`s appear light or dark gray.
-
-<Example showMarkup={false} code={`
-<table class="table">
-  <thead class="table-light">
-    <tr>
-      <th scope="col">#</th>
-      <th scope="col">First</th>
-      <th scope="col">Last</th>
-      <th scope="col">Handle</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>John</td>
-      <td>Doe</td>
-      <td>@social</td>
-    </tr>
-  </tbody>
-</table>
-`} />
-
-```html
-<table class="table">
-  <thead class="table-light">
-    ...
-  </thead>
-  <tbody>
-    ...
-  </tbody>
-</table>
-```
-
-<Example showMarkup={false} code={`
-<table class="table">
-  <thead class="table-dark">
-    <tr>
-      <th scope="col">#</th>
-      <th scope="col">First</th>
-      <th scope="col">Last</th>
-      <th scope="col">Handle</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>John</td>
-      <td>Doe</td>
-      <td>@social</td>
-    </tr>
-  </tbody>
-</table>
-`} />
-
-```html
-<table class="table">
-  <thead class="table-dark">
-    ...
-  </thead>
-  <tbody>
-    ...
-  </tbody>
-</table>
-```
-
-### Table foot
+## Footer
 
 <Example showMarkup={false} code={`
 <table class="table">
@@ -594,7 +492,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
 </table>
 ```
 
-### Captions
+## Caption
 
 A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
 
@@ -665,7 +563,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
 
 Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
 
-<Example showMarkup={false} code={`
+<Example code={`
 <div class="table-responsive">
   <table class="table">
     <thead>
@@ -722,15 +620,13 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
     </tbody>
   </table>
 </div>
-`} />
-
-```html
+`} customMarkup={`
 <div class="table-responsive">
   <table class="table">
     ...
   </table>
 </div>
-```
+`} />
 
 ### Breakpoint specific
 
diff --git a/site/src/content/docs/customize/color.mdx b/site/src/content/docs/customize/color.mdx
index e6dbb85185..ceb6a29010 100644
--- a/site/src/content/docs/customize/color.mdx
+++ b/site/src/content/docs/customize/color.mdx
@@ -1,360 +1,60 @@
 ---
 title: Color
-description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
+description: Bootstrap is supported by an extensive color system that powers our revamped theme, components, and color modes. This enables more comprehensive customization and extension for any project.
 toc: true
 ---
 
 import { getData } from '@libs/data'
 import { getSequence } from '@libs/utils'
 
+export const additionalColors = [
+  'white',
+  'black',
+]
+
 ## Colors
 
-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-emphasis` 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.
+There are 13 shades of 16 colors in Bootstrap's new color system, meaning we have 208 colors to work with when using Bootstrap.
 
-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)`.
+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).
 
-<Callout type="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>
+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="table-responsive">
-  <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">
-          **Body —** 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>
-          `--bs-body-color`<br/>`--bs-body-color-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-body-bg`<br/>`--bs-body-bg-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="2">
-          **Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-secondary-color`<br/>`--bs-secondary-color-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-secondary-bg`<br/>`--bs-secondary-bg-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="2">
-          **Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-tertiary-color`<br/>`--bs-tertiary-color-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-tertiary-bg`<br/>`--bs-tertiary-bg-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          **Emphasis —** 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>
-          `--bs-emphasis-color`<br/>`--bs-emphasis-color-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          **Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-border-color`<br/>`--bs-border-color-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Primary —** 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 bg-primary">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-primary`<br/>`--bs-primary-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-primary-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-primary-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-primary-text-emphasis`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Success —** Theme color used for positive or successful actions and information.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-success">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-success`<br/>`--bs-success-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-success-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-success-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-success-text-emphasis`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Danger —** Theme color used for errors and dangerous actions.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-danger">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-danger`<br/>`--bs-danger-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-danger-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-danger-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-danger-text-emphasis`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Warning —** Theme color used for non-destructive warning messages.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-warning">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-warning`<br/>`--bs-warning-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-warning-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-warning-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-warning-text-emphasis`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Info —** Theme color used for neutral and informative content.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-info">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-info`<br/>`--bs-info-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-info-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-info-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-info-text-emphasis`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Light —** Additional theme option for less contrasting colors.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-light">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-light`<br/>`--bs-light-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-light-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-light-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-light-text-emphasis`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Dark —** Additional theme option for higher contrasting colors.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-dark">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-dark`<br/>`--bs-dark-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-dark-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-dark-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-dark-text-emphasis`
-        </td>
-      </tr>
-    </tbody>
-  </table>
+<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(13, 1fr)', gap: '4px', minWidth: '0'}}>
+  {getData('colors').map((color) => {
+     return (
+       <div class="d-contents grid-full">
+         <h5 class="d-block text-capitalize grid-full">{color.name.replace('-', ' ')}</h5>
+
+         {["025", "050", ...getSequence(100, 900, 100), 950, 975].map((value) => {
+           return (
+             <div class="mb-3 font-monospace small">
+               <Swatch bg={`${color.name}-${value}`} size="medium" />
+               <div class="text-center color-3">{value}</div>
+             </div>
+           )
+         })}
+       </div>
+     )
+   })}
+
+   <div class="d-contents grid-full">
+    <h5 class="d-block text-capitalize grid-full">Additional</h5>
+    {additionalColors.map((color) => {
+      return (
+        <div class="mb-3 font-monospace small">
+          <Swatch bg={`${color}`} size="medium" />
+          <div class="text-center color-3">{color}</div>
+        </div>
+      )
+    })}
+   </div>
 </div>
 
+<Callout>
+  @mdo-do: Move this content to Theme page most likely. Replace with how to modify color variables.
+</Callout>
+
 ### 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.
@@ -383,53 +83,6 @@ All these colors are available as a Sass map, `$theme-colors`.
 
 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">
-  {getData('colors').map((color) => {
-    if ((color.name !== "white") && (color.name !== "gray") && (color.name !== "gray-dark")) {
-      return (
-        <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>
-
-          {getSequence(100, 900, 100).map((value) => {
-            return (
-              <div class={`p-3 bd-${color.name}-${value}`}>${color.name}-{value}</div>
-            )
-          })}
-        </div>
-      )
-    }
-  })}
-
-  <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>
-    {getData('grays').map((gray) => {
-      return (
-        <div class={`p-3 bd-gray-${gray.name}`}>$gray-{gray.name}</div>
-      )
-    })}
-  </div>
-
-  <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.
@@ -444,7 +97,6 @@ Bootstrap’s source Sass files include three maps to help you quickly and easil
 
 - `$colors` lists all our available base (`500`) colors
 - `$theme-colors` lists all semantically named theme colors (shown below)
-- `$grays` lists all tints and shades of gray
 
 Within `scss/_variables.scss`, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the `$colors` Sass map:
 
diff --git a/site/src/content/docs/customize/overview.mdx b/site/src/content/docs/customize/overview.mdx
index a90cc7c9d7..5ae98cb797 100644
--- a/site/src/content/docs/customize/overview.mdx
+++ b/site/src/content/docs/customize/overview.mdx
@@ -1,6 +1,6 @@
 ---
 title: Customize
-description: Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
+description: Learn how Bootstrap's colors power our design system theme. Customize and extend Bootstrap with Sass, a boatload of global options, and plenty of global and component-specific CSS variables.
 toc: false
 aliases: "/docs/[[config:docs_version]]/customize/"
 sections:
@@ -9,9 +9,11 @@ sections:
   - title: Options
     description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences.
   - title: Color
-    description: Learn about and customize the color systems that support the entire toolkit.
+    description: Bootstrap includes 11 shades of 14 colors in our color system that can be used to power our theme.
+  - title: Theme
+    description: Semantic colors, typography, settings, and more that can be customized to fit your brand.
   - title: Color modes
-    description: Explore our default light mode and the new dark mode, or create custom color modes yourself.
+    description: Build in light mode, dark mode, or both.
   - title: Components
     description: Learn how we build nearly all our components responsively and with base and modifier classes.
   - title: CSS variables
@@ -35,6 +37,18 @@ For those who want to use the distribution files, review the [getting started pa
 
 As you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap.
 
+## Sass vs CSS
+
+When Bootstrap 5 first introduced CSS variables, the Sass vs CSS variables setup was a little confusing and somewhat limited. As such, the relationship between Sass and CSS variables was very unclear. In Bootstrap 6, we've clarified that—here's how the two interact.
+
+- At a high level, Sass is a way to manage [global configuration options]([[docsref:/customize/options]]) and generate CSS for our utilities, components, typography, custom properties (aka CSS variables) and more.
+- We consider CSS variables to be the **first-class customization layer** for our users.
+- Sass variables are available for nearly every component—like the new `$check-*` variables for checkboxes. These Sass variables are then consumed by CSS variables on the relevant selector (e.g., `.check` with `--bs-check-bg: #{$check-bg}`) and applied through various properties.
+- CSS variables get their values from Sass variables, or CSS variables, depending on the context.
+- Sass helps us generate CSS variables, too. Think theme and config values, but across components, Sass is consuming CSS variables. This gives you two, clearer avenues for customization.
+
+With that in mind, you can customize Bootstrap 6 via CSS or Sass, both of which are easier than ever thanks to a revamped color system and theme configuration.
+
 ## CSPs and embedded SVGs
 
 Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict <abbr title="Content Security Policy">CSP</abbr> configurations**, we’ve documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options.
diff --git a/site/src/content/docs/customize/theme.mdx b/site/src/content/docs/customize/theme.mdx
new file mode 100644
index 0000000000..03f47c84bd
--- /dev/null
+++ b/site/src/content/docs/customize/theme.mdx
@@ -0,0 +1,194 @@
+---
+title: Theme
+description: The Bootstrap theme is a set of semantically named colors that are used to style our components, utilities, and more. The theme is configurable, responds to color modes, and can be consumed via Sass or CSS.
+toc: true
+---
+
+import { getData } from '@libs/data'
+
+export const themeTokens = [
+  'base',
+  'text',
+  'bg',
+  'bg-subtle',
+  'bg-muted',
+  'border',
+  'focus-ring',
+  'contrast'
+]
+
+export const themeBgs = [
+  'null',
+  '1',
+  '2',
+  '3',
+  'white',
+  'black',
+  'transparent',
+  'inherit',
+]
+
+export const themeFgs = [
+  'null',
+  '1',
+  '2',
+  '3',
+  'white',
+  'black',
+  'transparent',
+  'inherit',
+]
+
+## How it works
+
+Theme colors are defined in the `$new-theme-colors` Sass map. This map is used to generate our theme color values. You'll find these values in the `_theme.scss` file. These are where we define our design tokens for Bootstrap, across both light and dark color modes.
+
+Theme colors include the following semantic colors:
+
+<BsTable>
+| Theme color | Default value | Description |
+| --- | --- | --- |
+| `primary` | <Swatch size="inline" bg="blue-500" /> `var(--bs-blue-500)`| Main brand color for primary actions |
+| `accent` | <Swatch size="inline" bg="indigo-500" /> `var(--bs-indigo-500)` | Secondary brand color (new in v6) |
+| `success` | <Swatch size="inline" bg="green-500" /> `var(--bs-green-500)` | Positive actions and successful states |
+| `danger` | <Swatch size="inline" bg="red-500" /> `var(--bs-red-500)` | Destructive actions and error states |
+| `warning` | <Swatch size="inline" bg="yellow-500" /> `var(--bs-yellow-500)` | Cautionary messages and warning states |
+| `info` | <Swatch size="inline" bg="cyan-500" /> `var(--bs-cyan-500)` | Informational messages and neutral states |
+| `secondary` | <Swatch size="inline" bg="gray-300" /> `var(--bs-gray-300)` | Less prominent secondary actions |
+</BsTable>
+
+And within each semantic theme color, you'll find the following keys, most of which are color-mode adaptive:
+
+<BsTable>
+| Theme token | Description |
+| --- | --- |
+| `base` | The default color value for the semantic color |
+| `text` | Accessible text color (against body, plus `subtle` and `muted` color tokens) |
+| `bg` | For solid colored backgrounds with high contrast |
+| `bg-subtle` | Lowest contrast backgrounds, usually paired with `text` key for text color |
+| `bg-muted` | Lower contrast backgrounds, often used for disabled states |
+| `border` | Borders and dividers |
+| `focus-ring` | For visible focus indicators and outline styles |
+| `contrast` | Text color that needs to be readable on the `base` and `bg` colors |
+</BsTable>
+
+## Theme colors
+
+Every token is available as a CSS variable, and most are then consumed by our utilities and components. So for the `primary` color, you have the following colors:
+
+<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(8, 1fr)', gap: '8px', minWidth: '0'}}>
+  {getData('theme-colors').map((color) => {
+    return (
+      <div class="d-contents grid-full">
+        <h6 class="d-block text-capitalize grid-full">{color.title}</h6>
+        {themeTokens.map((token) => (
+          <div class="mb-3 font-monospace">
+            <Swatch bg={`${color.name}-${token}`} size="medium" />
+            <div class="text-center small color-3">{token}</div>
+          </div>
+        ))}
+      </div>
+    )
+  })}
+</div>
+
+## Theme `fg` and `bg`
+
+Theme foreground and background tokens are defined in their respective `$theme-fgs` and `$theme-bgs` Sass maps. These maps are used to generate color mode adaptive `color` and `background-color` values that are then consumed by our utilities and components. You'll find these values in the `_theme.scss` file.
+
+Theme backgrounds include the following semantic colors:
+
+<BsTable>
+| Background | Default value | Description |
+| --- | --- | --- |
+| `null` | <Swatch bg="bg" size="inline" /> `var(--bs-white)` | Default background color |
+| `1` | <Swatch bg="bg-1" size="inline" /> `var(--bs-gray-025)` | Lowest contrast background color |
+| `2` | <Swatch bg="bg-2" size="inline" /> `var(--bs-gray-050)` | Lower contrast background color |
+| `3` | <Swatch bg="bg-3" size="inline" /> `var(--bs-gray-100)` | Medium contrast background color, typically used for disabled states |
+| `white` | <Swatch bg="bg-white" size="inline" /> `var(--bs-white)` | Pure white background color |
+| `black` | <Swatch bg="bg-black" size="inline" /> `var(--bs-black)` | Pure black background color |
+| `transparent` | <Swatch bg="bg-transparent" size="inline" /> `transparent` | Transparent background color |
+| `inherit` |`inherit` | Inherited background color |
+</BsTable>
+
+<BsTable>
+| Foreground | Default value | Description |
+| --- | --- | --- |
+| `null` | <Swatch bg="fg" size="inline" /> `var(--bs-gray-900)` | Default foreground color |
+| `1` | <Swatch bg="fg-1" size="inline" /> `var(--bs-gray-800)` | Lowest contrast foreground color |
+| `2` | <Swatch bg="fg-2" size="inline" /> `var(--bs-gray-700)` | Lower contrast foreground color |
+| `3` | <Swatch bg="fg-3" size="inline" /> `var(--bs-gray-600)` | Medium contrast foreground color |
+| `white` | <Swatch bg="fg-white" size="inline" /> `var(--bs-white)` | Pure white foreground color |
+| `black` | <Swatch bg="fg-black" size="inline" /> `var(--bs-black)` | Pure black foreground color |
+| `transparent` | <Swatch bg="fg-transparent" size="inline" /> `transparent` | Transparent foreground color |
+| `inherit` | `inherit` | Inherited foreground color |
+</BsTable>
+
+### Suggested pairings
+
+Not all foreground colors are appropriate for all background colors. To maintain color contrast for accessibility, here are some recommended pairings.
+
+<div class="d-flex gap-3 w-100">
+  <div class="d-flex flex-column gap-2 w-100">
+    <Swatch bg="bg" fg="fg" size="large" contrast="15.71" contrastDark="14.59">fg on bg</Swatch>
+    <Swatch bg="bg" fg="fg-1" size="large" contrast="12.50" contrastDark="10.77">fg-1 on bg</Swatch>
+    <Swatch bg="bg" fg="fg-2" size="large" contrast="9.54" contrastDark="7.76">fg-2 on bg</Swatch>
+    <Swatch bg="bg" fg="fg-3" size="large" contrast="7.01" contrastDark="6.32">fg-3 on bg</Swatch>
+  </div>
+  <div class="d-flex flex-column gap-2 w-100">
+    <Swatch bg="bg-1" fg="fg" size="large">fg on bg-1</Swatch>
+    <Swatch bg="bg-1" fg="fg-1" size="large">fg-1 on bg-1</Swatch>
+    <Swatch bg="bg-1" fg="fg-2" size="large">fg-2 on bg-1</Swatch>
+    <Swatch bg="bg-1" fg="fg-3" size="large">fg-3 on bg-1</Swatch>
+  </div>
+  <div class="d-flex flex-column gap-2 w-100">
+    <Swatch bg="bg-2" fg="fg" size="large">fg on bg-2</Swatch>
+    <Swatch bg="bg-2" fg="fg-1" size="large">fg-1 on bg-2</Swatch>
+    <Swatch bg="bg-2" fg="fg-2" size="large">fg-2 on bg-2</Swatch>
+    <Swatch bg="bg-2" fg="fg-3" size="large">fg-3 on bg-2</Swatch>
+  </div>
+  <div class="d-flex flex-column gap-2 w-100">
+    <Swatch bg="bg-3" fg="fg" size="large">fg on bg-3</Swatch>
+    <Swatch bg="bg-3" fg="fg-1" size="large">fg-1 on bg-3</Swatch>
+    <Swatch bg="bg-3" fg="fg-2" size="large">fg-2 on bg-3</Swatch>
+    <Swatch bg="bg-3" fg="fg-3" size="large">fg-3 on bg-3</Swatch>
+  </div>
+</div>
+
+## Theme foregrounds
+
+Theme foregrounds are defined in the `$theme-fgs` Sass map. This map is used to generate our theme foreground values. You'll find these values in the `_theme.scss` file. These are where we define our design tokens for Bootstrap, across both light and dark color modes.
+
+Theme foregrounds include the following semantic colors:
+
+<BsTable>
+| Foreground | Default value | Description |
+| --- | --- | --- |
+| `null` | `var(--bs-gray-900)` | Default foreground color |
+| `1` | `var(--bs-gray-800)` | Lowest contrast foreground color |
+| `2` | `var(--bs-gray-700)` | Lower contrast foreground color |
+| `3` | `var(--bs-gray-600)` | Medium contrast foreground color |
+</BsTable>
+
+<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(8, 1fr)', gap: '8px', minWidth: '0'}}>
+  {themeFgs.map((color) => {
+    return (
+      <div>
+        <Swatch color={`fg-${color}`} size="large" />
+        <div class="text-center color-3">{color}</div>
+      </div>
+    )
+  })}
+</div>
+
+## Theme Sass map
+
+We use a large, nested Sass map to generate our theme color values.
+
+<ScssDocs name="theme-colors" file="scss/_theme.scss" />
+
+## CSS variables
+
+CSS variables are generated from the `$new-theme-colors` Sass map at the `:root` level inside `_root.scss` using a Sass loop.
+
+<ScssDocs name="root-theme-variables" file="scss/_root.scss" />
diff --git a/site/src/content/docs/forms/checkbox.mdx b/site/src/content/docs/forms/checkbox.mdx
index 409fed5195..a23bb2a8db 100644
--- a/site/src/content/docs/forms/checkbox.mdx
+++ b/site/src/content/docs/forms/checkbox.mdx
@@ -4,6 +4,8 @@ description: Highly customizable, native checkbox `<input>` elements for present
 toc: true
 ---
 
+import { getData } from '@libs/data'
+
 **Trialing new components with the following rules:**
 
 - New components are purely components, they don't assume layout of any kind.
@@ -60,6 +62,21 @@ Consider margin utilities for additional spacing, and flex utilities for alignme
     <label for="checkLabel">Example new checkbox</label>
   </b-checkgroup>`} />
 
+## Theme colors
+
+Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.check` element. This will set the checked background and border color to the theme color.
+
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<b-checkgroup>
+    <div class="check checked-${themeColor.name}">
+      <input type="checkbox" id="check${themeColor.name}" checked />
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      </svg>
+    </div>
+    <label for="check${themeColor.name}">Example ${themeColor.name} checkbox</label>
+  </b-checkgroup>`)} />
+
 ## Description
 
 With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, `<b-vstack>`, to stack the label and description.
diff --git a/site/src/content/docs/forms/radio.mdx b/site/src/content/docs/forms/radio.mdx
index 7cec34b80a..e47686bfb1 100644
--- a/site/src/content/docs/forms/radio.mdx
+++ b/site/src/content/docs/forms/radio.mdx
@@ -4,6 +4,8 @@ description: Highly customizable, native radio `<input>` elements for choosing o
 toc: true
 ---
 
+import { getData } from '@libs/data'
+
 ## Basic radio
 
 Similar to checkboxes, radios are styled with the `.radio` class. However, there's no custom SVG as we use a Unicode character for the checked state.
@@ -17,8 +19,16 @@ Wrap the `.radio` in a `<b-radiogroup>` layout component and add your label. We
 <Example code={`<b-radiogroup>
     <input type="radio" id="radioLabel" class="radio" />
     <label for="radioLabel">Example new radio</label>
-  </b-radiogroup>
-  `} />
+  </b-radiogroup>`} />
+
+## Theme colors
+
+Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.radio` element. This will set the checked background and border color to the theme color.
+
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<b-radiogroup>
+    <input type="radio" id="radio${themeColor.name}" class="radio checked-${themeColor.name}" checked />
+    <label for="radio${themeColor.name}">Example ${themeColor.name} radio</label>
+  </b-radiogroup>`)} />
 
 ## Description
 
diff --git a/site/src/content/docs/utilities/api.mdx b/site/src/content/docs/utilities/api.mdx
index 6a77a60623..1604a91d97 100644
--- a/site/src/content/docs/utilities/api.mdx
+++ b/site/src/content/docs/utilities/api.mdx
@@ -14,6 +14,7 @@ The `$utilities` map contains all our utilities and is later merged with your cu
 | --- | --- | --- | --- |
 | [`property`](#property) | **Required** | – | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). |
 | [`values`](#values) | **Required** | – | List of values, or a map if you don't want the class name to be the same as the value. If `null` is used as map key, `class` is not prepended to the class name. |
+| [`selector`](#selector) | Optional | `class` | Type of CSS selector in the generated CSS ruleset. Can be `class`, `attr-starts`, or `attr-includes`. |
 | [`class`](#class) | Optional | null | Name of the generated class. If not provided and `property` is an array of strings, `class` will default to the first element of the `property` array. If not provided and `property` is a string, the `values` keys are used for the `class` names. |
 | [`css-var`](#css-variable-utilities) | Optional | `false` | Boolean to generate CSS variables instead of CSS rules. |
 | [`css-variable-name`](#css-variable-utilities) | Optional | null | Custom un-prefixed name for the CSS variable inside the ruleset. |
@@ -28,7 +29,7 @@ The `$utilities` map contains all our utilities and is later merged with your cu
 
 ## API explained
 
-All utility variables are added to the `$utilities` variable within our `_utilities.scss` stylesheet. Each group of utilities looks something like this:
+All utility variables are added to the `$utilities` variable within our `_utilities.scss` stylesheet, which is a giant, nested Sass map. Each group of utility classes are generated from a block that looks something like this:
 
 ```scss
 $utilities: (
@@ -55,9 +56,11 @@ Which outputs the following:
 .opacity-100 { opacity: 1; }
 ```
 
-### Property
+### `property`
 
-The required `property` key must be set for any utility, and it must contain a valid CSS property. This property is used in the generated utility’s ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
+<div class="badge fs-6 bg-accent mb-3">Required</div>
+
+The `property` key must be set for any utility, and it must contain a valid CSS property. This property is used in the generated utility’s ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
 
 ```scss
 $utilities: (
@@ -76,7 +79,9 @@ Output:
 .text-decoration-line-through { text-decoration: line-through; }
 ```
 
-### Values
+### `values`
+
+<div class="badge fs-6 bg-accent mb-3">Required</div>
 
 Use the `values` key to specify which values for the specified `property` should be used in the generated class names and rules. Can be a list or map (set in the utilities or in a Sass variable).
 
@@ -104,7 +109,53 @@ As a Sass variable that sets the list or map, as in our [`position` utilities]([
 values: $position-values
 ```
 
-### Class
+### `selector`
+
+<BsTable>
+| Option | Description |
+| --- | --- |
+| No selector | Defaults to `"class"` |
+| `"class"` | Matches elements with a class that matches the specified value |
+| `"attr-starts"` | Matches elements with a class that starts with a string |
+| `"attr-includes"` | Matches elements with a class that includes a string |
+</BsTable>
+
+Use the `selector` option to change the CSS selector used in the generated CSS ruleset. The default option is to generate a class selector. When using an attribute selector—either `attr-starts` or `attr-includes`—**the `class` option is required**. We use these internally to simplify the construction of other utilities.
+
+For attribute selectors, you'll most likely want the `attr-includes` as the starting attribute selector in CSS applies to the entire string of classes in an attribute's value. For example, `[class^="name"]` would not match `class="example name"`.
+
+As an example, to change from `.ratio-*` to `[class*="ratio-"]`:
+
+```scss
+$utilities: (
+  // Create an attribute selector utility
+  "aspect-ratio-attr": (
+    selector: "attr-includes",
+    class: "ratio-",
+    property: aspect-ratio,
+    values: var(--#{$prefix}ratio),
+  ),
+  // Create a CSS variable utility that matches the attribute selector utility
+  "aspect-ratio": (
+    property: --#{$prefix}ratio,
+    class: ratio,
+    values: $aspect-ratios
+  ),
+);
+```
+
+Which outputs the following:
+
+```css
+[class*="ratio-"] { aspect-ratio: var(--bs-ratio); }
+.ratio-auto { --bs-ratio: auto; }
+.ratio-1x1 { --bs-ratio: 1 / 1; }
+.ratio-4x3 { --bs-ratio: 4 / 3; }
+.ratio-16x9 { --bs-ratio: 16 / 9; }
+.ratio-21x9 { --bs-ratio: 21 / 9; }
+```
+
+### `class`
 
 Use the `class` option to change the class prefix used in the compiled CSS. For example, to change from `.opacity-*` to `.o-*`:
 
diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx
index 82b938696b..9e7bfc7acf 100644
--- a/site/src/content/docs/utilities/background.mdx
+++ b/site/src/content/docs/utilities/background.mdx
@@ -18,7 +18,7 @@ Background utilities like `.bg-*` that generated from our original `$theme-color
 </Callout>
 
 <Example code={[
-  ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} ${themeColor.contrast_color ? `text-${themeColor.contrast_color}` : `text-white`}">.bg-${themeColor.name}</div>
+  ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} text-white">.bg-${themeColor.name}</div>
 <div class="p-3 mb-2 bg-${themeColor.name}-subtle text-${themeColor.name}-emphasis">.bg-${themeColor.name}-subtle</div>`),
   `<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
 <div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
@@ -36,7 +36,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 
 {getData('theme-colors').map((themeColor) => {
   return (
-    <div class={`p-3 mb-2 bg-${themeColor.name} bg-gradient${themeColor.contrast_color ? (' text-' + themeColor.contrast_color) : ' text-white'}`}>.bg-{themeColor.name}.bg-gradient</div>
+    <div class={`p-3 mb-2 bg-${themeColor.name} bg-gradient text-white`}>.bg-{themeColor.name}.bg-gradient</div>
   )
 })}
 <div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
@@ -107,20 +107,6 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen
 
 {/*<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />*/}
 
-RGB colors are generated from a separate Sass map:
-
-<ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" />
-
-Background color opacities build on that with their own map that’s consumed by the utilities API:
-
-<ScssDocs name="utilities-bg-colors" file="scss/_maps.scss" />
-
-Color mode background colors are also available as a Sass map:
-
-<ScssDocs name="theme-bg-subtle-map" file="scss/_maps.scss" />
-
-<ScssDocs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" />
-
 ### Sass mixins
 
 **No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you’d like to create your own gradients.
diff --git a/site/src/content/docs/utilities/border.mdx b/site/src/content/docs/utilities/border.mdx
index d8a31fbca6..0d71754d85 100644
--- a/site/src/content/docs/utilities/border.mdx
+++ b/site/src/content/docs/utilities/border.mdx
@@ -220,14 +220,6 @@ Variables for setting `border-color` in `.border-*-subtle` utilities in light an
 
 {/* <ScssDocs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" /> */}
 
-### Sass maps
-
-Color mode adaptive border colors are also available as a Sass map:
-
-<ScssDocs name="theme-border-subtle-map" file="scss/_maps.scss" />
-
-<ScssDocs name="theme-border-subtle-dark-map" file="scss/_maps.scss" />
-
 ### Sass mixins
 
 <ScssDocs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" />
diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx
index b2dc26470d..9c7a03c1dc 100644
--- a/site/src/content/docs/utilities/colors.mdx
+++ b/site/src/content/docs/utilities/colors.mdx
@@ -17,7 +17,7 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
 </Callout>
 
 <Example code={[
-  ...getData('theme-colors').map((themeColor) => `<p class="text-${themeColor.name}${themeColor.contrast_color ? ` bg-${themeColor.contrast_color}` : ``}">.text-${themeColor.name}</p>
+  ...getData('theme-colors').map((themeColor) => `<p class="text-${themeColor.name}">.text-${themeColor.name}</p>
 <p class="text-${themeColor.name}-emphasis">.text-${themeColor.name}-emphasis</p>`),
   `
 <p class="text-body">.text-body</p>
@@ -72,22 +72,10 @@ In addition to the following Sass functionality, consider reading about our incl
 
 Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
 
-{/*<ScssDocs name="color-variables" file="scss/_variables.scss" />*/}
-
 <ScssDocs name="theme-color-variables" file="scss/_variables.scss" />
 
 Grayscale colors are also available, but only a subset are used to generate any utilities.
 
-{/*<ScssDocs name="gray-color-variables" file="scss/_variables.scss" />*/}
-
-<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
-
-Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
-
-{/* <ScssDocs name="theme-text-variables" file="scss/_variables.scss" /> */}
-
-{/* <ScssDocs name="theme-text-dark-variables" file="scss/_variables-dark.scss" /> */}
-
 ### Sass maps
 
 Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
@@ -98,20 +86,6 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen
 
 {/*<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />*/}
 
-RGB colors are generated from a separate Sass map:
-
-<ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" />
-
-Color opacities build on that with their own map that’s consumed by the utilities API:
-
-<ScssDocs name="utilities-text-colors" file="scss/_maps.scss" />
-
-Color mode adaptive text colors are also available as a Sass map:
-
-<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
-
-<ScssDocs name="theme-text-dark-map" file="scss/_maps.scss" />
-
 ### Sass utilities API
 
 Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
diff --git a/site/src/content/docs/utilities/text.mdx b/site/src/content/docs/utilities/text.mdx
index 2fb0241ff6..ea6f04fe0e 100644
--- a/site/src/content/docs/utilities/text.mdx
+++ b/site/src/content/docs/utilities/text.mdx
@@ -226,8 +226,6 @@ Font-size utilities are generated from this map, in combination with our utiliti
 
 <ScssDocs name="font-sizes" file="scss/_variables.scss" />
 
-<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
-
 ### Sass utilities API
 
 Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index 67b4dfbe3a..c459a46f08 100644
--- a/site/src/layouts/DocsLayout.astro
+++ b/site/src/layouts/DocsLayout.astro
@@ -180,19 +180,17 @@ if (currentPageIndex < allPages.length - 1) {
       <div class="bd-content ps-lg-2">
         {
           frontmatter.sections && (
-            <div class="grid mb-5">
+            <div class="grid grid-cols-3 mb-5">
               {frontmatter.sections.map((section) => (
-                <div class="col-md-6">
-                  <a
-                    class="d-block text-decoration-none"
-                    href={getVersionedDocsPath(
-                      `${parentDirectory ? parentDirectory + '/' : ''}${getSlug(section.title)}/`
-                    )}
-                  >
-                    <strong class="d-block h5 mb-0">{section.title}</strong>
-                    <span class="text-secondary">{section.description}</span>
-                  </a>
-                </div>
+                <a
+                  class="d-block text-decoration-none"
+                  href={getVersionedDocsPath(
+                    `${parentDirectory ? parentDirectory + '/' : ''}${getSlug(section.title)}/`
+                  )}
+                >
+                  <strong class="d-block h5 mb-0">{section.title}</strong>
+                  <span class="text-secondary">{section.description}</span>
+                </a>
               ))}
             </div>
           )
diff --git a/site/src/libs/data.ts b/site/src/libs/data.ts
index d388ffcd02..fb75fb938b 100644
--- a/site/src/libs/data.ts
+++ b/site/src/libs/data.ts
@@ -1,14 +1,7 @@
 import fs from 'node:fs'
 import yaml from 'js-yaml'
 import { z } from 'zod'
-import {
-  zHexColor,
-  zLanguageCode,
-  zNamedHexColors,
-  zPxSizeOrEmpty,
-  zVersionMajorMinor,
-  zVersionSemver
-} from './validation'
+import { zLanguageCode, zPxSizeOrEmpty, zVersionMajorMinor, zVersionSemver } from './validation'
 import { capitalizeFirstLetter } from './utils'
 
 // An object containing all the data types and their associated schema. The key should match the name of the data file
@@ -23,7 +16,11 @@ const dataDefinitions = {
       container: zPxSizeOrEmpty
     })
     .array(),
-  colors: zNamedHexColors(13),
+  colors: z
+    .object({
+      name: z.string()
+    })
+    .array(),
   'core-team': z
     .object({
       name: z.string(),
@@ -53,7 +50,6 @@ const dataDefinitions = {
         .array()
     })
     .array(),
-  grays: zNamedHexColors(9),
   icons: z.object({
     preferred: z
       .object({
@@ -97,9 +93,7 @@ const dataDefinitions = {
     .array(),
   'theme-colors': z
     .object({
-      name: z.string(),
-      hex: zHexColor,
-      contrast_color: z.union([z.literal('dark'), z.literal('white')]).optional()
+      name: z.string()
     })
     .array()
     .transform((val) => {
diff --git a/site/src/libs/placeholder.ts b/site/src/libs/placeholder.ts
index 2096ac9870..2bae6e1cad 100644
--- a/site/src/libs/placeholder.ts
+++ b/site/src/libs/placeholder.ts
@@ -125,8 +125,8 @@ function getOptionsWithDefaults(options: Partial<PlaceholderOptions>) {
   const optionsWithDefaults = Object.assign(
     {},
     {
-      background: getData('grays')[5].hex,
-      color: getData('grays')[2].hex,
+      background: '#adb5bd',
+      color: '#e9ecef',
       height: '180',
       markup: 'svg',
       title: 'Placeholder',
diff --git a/site/src/scss/_anchor.scss b/site/src/scss/_anchor.scss
index e44fc91de1..7415b30941 100644
--- a/site/src/scss/_anchor.scss
+++ b/site/src/scss/_anchor.scss
@@ -1,10 +1,11 @@
+@use "../../../scss/config" as *;
 @use "../../../scss/variables" as *;
 @use "../../../scss/mixins/transition" as *;
 
 .anchor-link {
   padding: 0 .175rem;
   font-weight: 400;
-  color: rgba($link-color, .5);
+  color: color-mix(in srgb, var(--#{$prefix}link-color), transparent .5);
   text-decoration: none;
   opacity: 0;
   @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
@@ -17,7 +18,7 @@
   &:hover,
   :hover > &,
   :target > & {
-    color: $link-color;
+    color: var(--#{$prefix}link-color);
     text-decoration: none;
     opacity: 1;
   }
diff --git a/site/src/scss/_colors.scss b/site/src/scss/_colors.scss
index 9dcd942f26..a16ba00780 100644
--- a/site/src/scss/_colors.scss
+++ b/site/src/scss/_colors.scss
@@ -9,171 +9,133 @@
 // Docs color palette classes
 //
 
-@each $color, $value in map.merge($colors, ("gray-500": $gray-500)) {
-  .swatch-#{$color} {
-    color: color-contrast($value);
-    background-color: #{$value};
-
-    &::after {
-      $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
-      $against-white: "#{contrast-ratio($value, $white)}";
-      $against-black: "#{contrast-ratio($value, $black)}";
-      position: absolute;
-      top: 1rem;
-      right: 1rem;
-      padding-left: 1rem;
-      font-size: .75rem;
-      line-height: 1.35;
-      white-space: pre;
-      content:
-        string.slice($contrast-ratio, 1, 4) "\A"
-        string.slice($against-white, 1, 4) "\A"
-        string.slice($against-black, 1, 4);
-      background-color: $value;
-      background-image:
-        linear-gradient(
-          to bottom,
-          transparent .25rem,
-          color-contrast($value) .25rem .75rem,
-          transparent .75rem 1.25rem,
-          $white 1.25rem 1.75rem,
-          transparent 1.75rem 2.25rem,
-          $black 2.25rem 2.75rem,
-          transparent 2.75rem
-        );
-      background-repeat: no-repeat;
-      background-size: .5rem 100%;
-    }
-  }
-}
-
-// 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; }
-.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
-.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
-.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
-.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
-.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
-.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
-
-.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
-.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
-.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
-.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
-.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
-.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
-.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
-.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
-.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
-
-.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
-.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
-.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
-.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
-.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
-.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
-.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
-.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
-.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
-
-.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
-.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
-.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
-.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
-.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
-.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
-.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
-.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
-.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
-
-.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
-.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
-.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
-.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
-.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
-.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
-.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
-.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
-.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
-
-.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
-.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
-.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
-.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
-.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
-.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
-.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
-.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
-.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
-
-.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
-.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
-.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
-.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
-.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
-.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
-.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
-.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
-.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
-
-.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
-.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
-.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
-.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
-.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
-.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
-.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
-.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
-.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
-
-.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
-.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
-.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
-.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
-.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
-.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
-.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
-.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
-.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
-
-.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
-.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
-.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
-.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
-.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
-.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
-.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
-.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
-.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
-
-.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
-.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
-.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
-.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
-.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
-.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
-.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
-.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
-.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
-
-.bd-white {
-  color: color-contrast($white);
-  background-color: $white;
-
-  // Astro HTML parser adds extra <p> tags to the content
-  p {
-    margin: 0;
-  }
-}
-
-.bd-black {
-  color: color-contrast($black);
-  background-color: $black;
-
-  // Astro HTML parser adds extra <p> tags to the content
-  p {
-    margin: 0;
-  }
-}
+// // 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; }
+// .bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
+// .bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
+// .bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
+// .bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
+// .bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
+// .bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
+
+// .bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
+// .bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
+// .bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
+// .bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
+// .bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
+// .bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
+// .bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
+// .bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
+// .bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
+
+// .bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
+// .bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
+// .bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
+// .bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
+// .bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
+// .bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
+// .bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
+// .bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
+// .bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
+
+// .bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
+// .bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
+// .bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
+// .bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
+// .bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
+// .bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
+// .bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
+// .bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
+// .bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
+
+// .bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
+// .bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
+// .bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
+// .bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
+// .bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
+// .bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
+// .bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
+// .bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
+// .bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
+
+// .bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
+// .bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
+// .bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
+// .bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
+// .bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
+// .bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
+// .bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
+// .bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
+// .bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
+
+// .bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
+// .bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
+// .bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
+// .bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
+// .bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
+// .bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
+// .bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
+// .bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
+// .bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
+
+// .bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
+// .bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
+// .bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
+// .bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
+// .bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
+// .bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
+// .bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
+// .bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
+// .bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
+
+// .bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
+// .bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
+// .bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
+// .bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
+// .bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
+// .bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
+// .bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
+// .bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
+// .bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
+
+// .bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
+// .bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
+// .bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
+// .bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
+// .bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
+// .bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
+// .bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
+// .bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
+// .bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
+
+// .bd-gray-100 { color: color-contrast(var(--#{$prefix}gray-100)); background-color: var(--#{$prefix}gray-100); }
+// .bd-gray-200 { color: color-contrast(var(--#{$prefix}gray-200)); background-color: var(--#{$prefix}gray-200); }
+// .bd-gray-300 { color: color-contrast(var(--#{$prefix}gray-300)); background-color: var(--#{$prefix}gray-300); }
+// .bd-gray-400 { color: color-contrast(var(--#{$prefix}gray-400)); background-color: var(--#{$prefix}gray-400); }
+// .bd-gray-500 { color: color-contrast(var(--#{$prefix}gray-500)); background-color: var(--#{$prefix}gray-500); }
+// .bd-gray-600 { color: color-contrast(var(--#{$prefix}gray-600)); background-color: var(--#{$prefix}gray-600); }
+// .bd-gray-700 { color: color-contrast(var(--#{$prefix}gray-700)); background-color: var(--#{$prefix}gray-700); }
+// .bd-gray-800 { color: color-contrast(var(--#{$prefix}gray-800)); background-color: var(--#{$prefix}gray-800); }
+// .bd-gray-900 { color: color-contrast(var(--#{$prefix}gray-900)); background-color: var(--#{$prefix}gray-900); }
+
+// .bd-white {
+//   color: color-contrast($white);
+//   background-color: $white;
+
+//   // Astro HTML parser adds extra <p> tags to the content
+//   p {
+//     margin: 0;
+//   }
+// }
+
+// .bd-black {
+//   color: color-contrast($black);
+//   background-color: $black;
+
+//   // Astro HTML parser adds extra <p> tags to the content
+//   p {
+//     margin: 0;
+//   }
+// }
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index 4c42abc4de..18175fc5b5 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -346,10 +346,10 @@
   .highlight {
     position: relative;
     padding: .75rem ($bd-gutter-x * .5);
-    background-color: var(--bd-pre-bg);
+    background-color: var(--bs-bg-1);
 
     @include media-breakpoint-up(md) {
-      padding: .75rem 1.25rem;
+      padding: 1rem;
       @include border-radius(calc(var(--bs-border-radius) - 1px));
     }
 
@@ -360,8 +360,8 @@
     }
 
     pre {
-      padding: .25rem 0 .875rem;
-      margin-top: .8125rem;
+      // padding: .25rem 0 .875rem;
+      // margin-top: .8125rem;
       margin-bottom: 0;
       overflow: overlay;
       white-space: pre;
diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss
index 9e2476318b..5563d513a3 100644
--- a/site/src/scss/_content.scss
+++ b/site/src/scss/_content.scss
@@ -12,7 +12,7 @@
   > h2,
   > h3,
   > h4 {
-    --bs-heading-color: var(--bs-emphasis-color);
+    --bs-heading-color: var(--bs-fg);
   }
 
   // Offset content from fixed navbar when jumping to headings
@@ -22,8 +22,14 @@
 
   > h3 {
     margin-top: 2rem;
+
+    code {
+      font-weight: 600;
+      color: inherit;
+    }
   }
 
+
   > ul li,
   > ol li {
     margin-bottom: .25rem;
@@ -93,6 +99,7 @@
 
     th {
       color: var(--bs-emphasis-color);
+      border-bottom-color: currentcolor;
     }
 
     &:not(.bd-callout) > strong { // Keep callout correct color when used within tables
@@ -113,6 +120,10 @@
   }
 }
 
+.table-utilities td:first-child {
+  white-space: nowrap;
+}
+
 .table-options td:last-child,
 .table-utilities td:last-child {
   min-width: 280px;
@@ -168,27 +179,27 @@
 // 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: #{color.mix($blue-500, $blue-600)};
-    --bs-dropdown-link-active-bg: #{$blue-700};
-  }
-
-  .btn-secondary {
-    --bs-btn-bg: #{color.mix($gray-600, $blue-400)};
-    --bs-btn-border-color: #{rgba($white, .25)};
-    --bs-btn-hover-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -5%)}; // stylelint-disable-line scss/at-function-named-arguments
-    --bs-btn-hover-border-color: #{rgba($white, .25)};
-    --bs-btn-active-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -10%)}; // stylelint-disable-line scss/at-function-named-arguments
-    --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);
-  }
-}
+// [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: #{color.mix($blue-500, $blue-600)};
+//     --bs-dropdown-link-active-bg: #{$blue-700};
+//   }
+
+//   .btn-secondary {
+//     --bs-btn-bg: #{color.mix(var(--#{$prefix}gray-600), $blue-400)};
+//     --bs-btn-border-color: #{rgba($white, .25)};
+//     --bs-btn-hover-bg: #{color.scale(color.mix(var(--#{$prefix}gray-600), $blue-400), $lightness: -5%)}; // stylelint-disable-line scss/at-function-named-arguments
+//     --bs-btn-hover-border-color: #{rgba($white, .25)};
+//     --bs-btn-active-bg: #{color.scale(color.mix(var(--#{$prefix}gray-600), $blue-400), $lightness: -10%)}; // stylelint-disable-line scss/at-function-named-arguments
+//     --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/src/scss/_masthead.scss b/site/src/scss/_masthead.scss
index 0ad312f77d..355c12d4e9 100644
--- a/site/src/scss/_masthead.scss
+++ b/site/src/scss/_masthead.scss
@@ -8,7 +8,6 @@
 @use "../../../scss/mixins/color-mode" as *;
 
 .bd-masthead {
-  --bd-pink-rgb: #{to-rgb($pink)};
   padding: 3rem 0;
   // stylelint-disable
   background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), var(--bs-body-bg) 85%),
diff --git a/site/src/scss/_syntax.scss b/site/src/scss/_syntax.scss
index 8a3476f46a..ca92886eb0 100644
--- a/site/src/scss/_syntax.scss
+++ b/site/src/scss/_syntax.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "../../../scss/config" as *;
 @use "../../../scss/colors" as *;
 @use "../../../scss/variables" as *;
 @use "../../../scss/mixins/color-mode" as *;
@@ -12,14 +13,14 @@
   --base04: #666;
   --base05: #333;
   --base06: #fff;
-  --base07: #{$teal-700}; // #9a6700
-  --base08: #{color.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
+  --base07: var(--#{$prefix}teal-700); // #9a6700
+  --base08: color-mix(in srgb, var(--#{$prefix}red-500), var(--#{$prefix}red-600)); // #bc4c00
+  --base09: var(--#{$prefix}  cyan-700); // #087990
+  --base0A: var(--#{$prefix}purple-500); // #795da3
+  --base0B: var(--#{$prefix}blue-700); // #183691
+  --base0C: var(--#{$prefix}blue-700); // #183691
+  --base0D: var(--#{$prefix}purple-500); // #795da3
+  --base0E: var(--#{$prefix}pink-600); // #a71d5d
   --base0F: #333;
 }
 
@@ -31,15 +32,15 @@
   --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
+  --base07: var(--#{$prefix}orange-300); // #d19a66
+  --base08: var(--#{$prefix}cyan-300);
+  --base09: var(--#{$prefix}orange-300); // #d19a66
+  --base0A: var(--#{$prefix}yellow-200); // #e5c07b
+  --base0B: var(--#{$prefix}teal-300); // #98c379
+  --base0C: var(--#{$prefix}teal-300); // #56b6c2
+  --base0D: var(--#{$prefix}blue-300); // #61afef
+  --base0E: var(--#{$prefix}indigo-200); // #c678dd
+  --base0F: var(--#{$prefix}red-300); // #be5046
 }
 
 // Shell prompts
@@ -145,11 +146,11 @@
 .language-diff {
   .token {
     &.deleted {
-      color: $red-400;
+      color: var(--#{$prefix}red-400);
       background-color: transparent;
     }
     &.inserted {
-      color: $green-400;
+      color: var(--#{$prefix}green-400);
       background-color: transparent;
     }
   }
diff --git a/site/src/scss/_variables.scss b/site/src/scss/_variables.scss
index 3f278e07c4..0920a1d636 100644
--- a/site/src/scss/_variables.scss
+++ b/site/src/scss/_variables.scss
@@ -25,9 +25,9 @@ $bd-callout-variants: info, warning, danger !default;
     --bd-violet-bg: var(--bd-violet);
     --bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300));
     --bd-sidebar-link-bg: light-dark(color-mix(in srgb, var(--bd-violet), transparent 90%), color-mix(in srgb, var(--bd-violet), transparent 70%));
-    --bd-callout-link: #{$blue-600};
+    --bd-callout-link: var(--#{$prefix}blue-600);
     --bd-callout-code-color: light-dark(var(--bs-pink-600), var(--bs-pink-300));
-    --bd-pre-bg: light-dark(var(--bs-gray-100), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%));
+    --bd-pre-bg: light-dark(var(--bs-gray-025), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%));
     --bd-swatch-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1));
   }
 
@@ -38,6 +38,6 @@ $bd-callout-variants: info, warning, danger !default;
   //   --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: #{color.adjust($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
+  //   --bd-pre-bg: #{color.adjust(var(--#{$prefix}gray-900), $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
   // }
 }
diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts
index 0f834ce7bf..86a2203525 100644
--- a/site/src/types/auto-import.d.ts
+++ b/site/src/types/auto-import.d.ts
@@ -17,5 +17,6 @@ export declare global {
   export const JsDocs: typeof import('@shortcodes/JsDocs.astro').default
   export const Placeholder: typeof import('@shortcodes/Placeholder.astro').default
   export const ScssDocs: typeof import('@shortcodes/ScssDocs.astro').default
+  export const Swatch: typeof import('@shortcodes/Swatch.astro').default
   export const Table: typeof import('@shortcodes/Table.astro').default
 }