Start component changes

site/assets/scss/_component-examples.scss

@@ -3,7 +3,7 @@
 //
 
 .bd-example-snippet {
-  border: solid $border-color;
+  border: solid var(--bs-border-color);
   border-width: 1px 0;
 
   @include media-breakpoint-up(md) {
@@ -17,7 +17,7 @@
   position: relative;
   padding: var(--bd-example-padding);
   margin: 0 ($bd-gutter-x * -.5);
-  border: solid $border-color;
+  border: solid var(--bs-border-color);
   border-width: 1px 0;
   @include clearfix();
 

site/assets/scss/_content.scss

@@ -126,7 +126,7 @@
 
 .border-lg-start {
   @include media-breakpoint-up(lg) {
-    border-left: $border-width solid $border-color;
+    border-left: var(--bs-border-width) solid var(--bs-border-color);
   }
 }
 

site/assets/scss/_masthead.scss

@@ -75,10 +75,19 @@
   mix-blend-mode: darken;
 
   svg {
-    filter: drop-shadow(0 1px 1px #fff);
+    filter: drop-shadow(0 1px 1px var(--bs-body-bg));
   }
 }
 
+@if $enable-dark-mode {
+  [data-theme="dark"] {
+    .masthead-followup-icon {
+      mix-blend-mode: lighten;
+    }
+  }
+}
+
+
 .masthead-followup-svg {
   filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125));
 }

site/assets/scss/_navbar.scss

@@ -76,7 +76,8 @@
 
   .dropdown-menu {
     --bs-dropdown-min-width: 12rem;
-    --bs-dropdown-padding: .25rem;
+    --bs-dropdown-padding-x: .25rem;
+    --bs-dropdown-padding-y: .25rem;
     --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
     --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
     @include font-size(.875rem);