1 files changed, 96 insertions, 15 deletions

diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index f2b5cfc54..811883b49 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -2,14 +2,14 @@
 // Bootstrap docs content theming
 //
 
-// Offset for the sticky header
-@include media-breakpoint-up(md) {
-  :root {
-    scroll-padding-top: 4rem;
+.bd-content {
+  > h2,
+  > h3,
+  > h4 {
+    --bs-heading-color: var(--bs-emphasis-color);
   }
-}
 
-.bd-content {
+  // Offset content from fixed navbar when jumping to headings
   > h2:not(:first-child) {
     margin-top: 3rem;
   }
@@ -31,20 +31,28 @@
   }
 
   // Override Bootstrap defaults
-  > .table {
+  > .table,
+  > .table-responsive .table {
+    --bs-table-border-color: var(--bs-border-color);
+
     max-width: 100%;
     margin-bottom: 1.5rem;
     @include font-size(.875rem);
 
     @include media-breakpoint-down(lg) {
-      display: block;
-      overflow-x: auto;
-
       &.table-bordered {
         border: 0;
       }
     }
 
+    thead {
+      border-bottom: 2px solid currentcolor;
+    }
+
+    tbody:not(:first-child) {
+      border-top: 2px solid currentcolor;
+    }
+
     th,
     td {
       &:first-child {
@@ -56,14 +64,45 @@
       }
     }
 
+    th {
+      color: var(--bs-emphasis-color);
+    }
+
+    strong {
+      color: var(--bs-emphasis-color);
+    }
+
     // Prevent breaking of code
-    td:first-child > code {
+    th,
+    td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
       white-space: nowrap;
     }
   }
 }
 
+.table-options {
+  td:nth-child(2) {
+    min-width: 160px;
+  }
+}
+
+.table-options td:last-child,
+.table-utilities td:last-child {
+  min-width: 280px;
+}
+
+.table-swatches {
+  th {
+    color: var(--bs-emphasis-color);
+  }
+
+  td code {
+    white-space: nowrap;
+  }
+}
+
 .bd-title {
+  --bs-heading-color: var(--bs-emphasis-color);
   @include font-size(3rem);
 }
 
@@ -72,10 +111,52 @@
   font-weight: 300;
 }
 
-.bd-text-purple-bright {
-  color: $bd-purple-bright;
+.bi {
+  width: 1em;
+  height: 1em;
+  vertical-align: -.125em;
+  fill: currentcolor;
+}
+
+.border-lg-start {
+  @include media-breakpoint-up(lg) {
+    border-left: var(--bs-border-width) solid var(--bs-border-color);
+  }
 }
 
-.bd-bg-purple-bright {
-  background-color: $bd-purple-bright;
+// stylelint-disable selector-no-qualifying-type
+.bd-summary-link {
+  color: var(--bs-link-color);
+
+  &:hover,
+  details[open] > & {
+    color: var(--bs-link-hover-color);
+  }
+}
+// stylelint-enable selector-no-qualifying-type
+
+// scss-docs-start custom-color-mode
+[data-bs-theme="blue"] {
+  --bs-body-color: var(--bs-white);
+  --bs-body-color-rgb: #{to-rgb($white)};
+  --bs-body-bg: var(--bs-blue);
+  --bs-body-bg-rgb: #{to-rgb($blue)};
+  --bs-tertiary-bg: #{$blue-600};
+
+  .dropdown-menu {
+    --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
+    --bs-dropdown-link-active-bg: #{$blue-700};
+  }
+
+  .btn-secondary {
+    --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
+    --bs-btn-border-color: #{rgba($white, .25)};
+    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
+    --bs-btn-hover-border-color: #{rgba($white, .25)};
+    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
+    --bs-btn-active-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
+  }
 }
+// scss-docs-end custom-color-mode