dark mode plugin update to bootstrap v5.1.0

src/scss/bootstrap-dark/_breadcrumb.scss

@@ -5,12 +5,9 @@
 .breadcrumb-item {
   // The separator between breadcrumbs (by default, a forward-slash: "/")
   + .breadcrumb-item {
-    padding-left: $breadcrumb-item-padding-x;
 
     &::before {
       color: $breadcrumb-divider-color-alt;
-      // TODO: DO I NEED THIS?
-      // content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
     }
   }
 

src/scss/bootstrap-dark/_card.scss

@@ -3,6 +3,7 @@
 .card {
   background-color: $card-bg-alt;
   border: $card-border-width solid $card-border-color-alt;
+  @include box-shadow($card-box-shadow-alt);
 }
 
 .card-body {

src/scss/bootstrap-dark/_helpers.scss

@@ -2,6 +2,8 @@
 @import "helpers/colored-links";
 // @import "helpers/ratio";  // no colors here
 // @import "helpers/position";  // no colors here
+// @import "helpers/stacks";  // no colors here
 // @import "helpers/visually-hidden";  // no colors here
 // @import "helpers/stretched-link";  // no colors here
 // @import "helpers/text-truncation";  // no colors here
+@import "helpers/vr";

src/scss/bootstrap-dark/_mixins.scss

@@ -1,4 +1,5 @@
 @import "mixins/color-scheme";
+@import "mixins/backdrop";
 @import "mixins/buttons";
 @import "mixins/forms";
 @import "mixins/table-variants";

src/scss/bootstrap-dark/_modal.scss

@@ -9,11 +9,7 @@
 
 // Modal background
 .modal-backdrop {
-  background-color: $modal-backdrop-bg-alt;
-
-  // Fade for backdrop
-  &.fade { opacity: 0; }
-  &.show { opacity: $modal-backdrop-opacity-alt; }
+  @include overlay-backdrop-alt($modal-backdrop-bg-alt, $modal-backdrop-opacity-alt);
 }
 
 // Modal header

src/scss/bootstrap-dark/_navbar.scss

@@ -15,6 +15,25 @@
   // }
 }
 
+// Generate series of `.navbar-expand-*` responsive classes for configuring
+// where your navbar collapses.
+// TODO : NB!!!  THIS BREAKS THE MEDIA QUERY GENERATION
+// .navbar-expand {
+//   @each $breakpoint in map-keys($grid-breakpoints) {
+//     $next: breakpoint-next($breakpoint, $grid-breakpoints);
+//     $infix: breakpoint-infix($next, $grid-breakpoints);
+//
+//     // stylelint-disable-next-line scss/selector-no-union-class-name
+//     &#{$infix} {
+//       @include media-breakpoint-up($next) {
+//         .offcanvas {
+//           background-color: transparent;
+//         }
+//       }
+//     }
+//   }
+// }
+
 // Navbar themes
 .navbar-light {
   .navbar-brand {

src/scss/bootstrap-dark/_offcanvas.scss

@@ -5,6 +5,10 @@
   @include box-shadow($offcanvas-box-shadow-alt);
 }
 
+.offcanvas-backdrop {
+  @include overlay-backdrop-alt($offcanvas-backdrop-bg-alt, $offcanvas-backdrop-opacity-alt);
+}
+
 .offcanvas-start {
   border-right: $offcanvas-border-width solid $offcanvas-border-color-alt;
 }

src/scss/bootstrap-dark/_placeholders.scss

@@ -0,0 +1,14 @@
+.placeholder {
+  background-color: currentColor;
+  opacity: $placeholder-opacity-max-alt;
+}
+
+@keyframes placeholder-glow {
+  50% {
+    opacity: $placeholder-opacity-min-alt;
+  }
+}
+
+.placeholder-wave {
+  mask-image: linear-gradient(130deg, $white-alt 55%, rgba(255, 255, 255, (1 - $placeholder-opacity-min-alt)) 75%, $white-alt 95%);
+}

src/scss/bootstrap-dark/_popover.scss

@@ -74,7 +74,7 @@
 .popover-header {
   color: $popover-header-color-alt;
   background-color: $popover-header-bg-alt;
-  border-bottom: $popover-border-width solid shade-color($popover-header-bg-alt, 10%);
+  border-bottom: $popover-border-width solid $popover-border-color-alt;
 }
 
 .popover-body {

src/scss/bootstrap-dark/_reboot.scss

@@ -10,8 +10,8 @@
 // Body
 
 body {
-  color: $body-color-alt;
-  background-color: $body-bg-alt; // 2
+  color: var(--#{$variable-prefix}body-color-alt);
+  background-color: var(--#{$variable-prefix}body-bg-alt); // 2
 }
 
 

src/scss/bootstrap-dark/_root.scss

@@ -4,9 +4,28 @@
     --#{$variable-prefix}#{$color}: #{$value};
   }
 
+  @each $color, $value in $grays-alt {
+    --#{$variable-prefix}gray-#{$color}: #{$value};
+  }
+
   @each $color, $value in $theme-colors-alt {
     --#{$variable-prefix}#{$color}: #{$value};
   }
 
+  @each $color, $value in $theme-colors-rgb-alt {
+    --#{$variable-prefix}#{$color}-rgb: #{$value};
+  }
+
+  --#{$variable-prefix}white-rgb: #{to-rgb($white-alt)};
+  --#{$variable-prefix}black-rgb: #{to-rgb($black-alt)};
+  --#{$variable-prefix}body-rgb: #{to-rgb($body-color-alt)};
+
+  // root and body
+
+  --#{$variable-prefix}body-color: #{$body-color-alt};
+  --#{$variable-prefix}body-bg: #{$body-bg-alt};
+
+  // ?
+
   --#{$variable-prefix}gradient: #{$gradient-alt};
 }

src/scss/bootstrap-dark/_tables.scss

@@ -4,7 +4,7 @@
 
 .table {
   --#{$variable-prefix}table-bg: #{$table-bg-alt};
-  --#{$variable-prefix}table-accent-bg: #{$table-bg-alt};
+  --#{$variable-prefix}table-accent-bg: #{$table-accent-bg-alt};
   --#{$variable-prefix}table-striped-color: #{$table-striped-color-alt};
   --#{$variable-prefix}table-striped-bg: #{$table-striped-bg-alt};
   --#{$variable-prefix}table-active-color: #{$table-active-color-alt};
@@ -24,9 +24,9 @@
   // }
 
   // Highlight border color between thead, tbody and tfoot.
-  // > :not(:last-child) > :last-child > * {
-  //   border-bottom-color: $table-group-separator-color-alt;
-  // }
+  > :not(:last-child) > :last-child > * {
+    border-bottom-color: $table-group-separator-color-alt;
+  }
 }
 
 

src/scss/bootstrap-dark/_toasts.scss

@@ -4,8 +4,8 @@
   border: $toast-border-width solid $toast-border-color-alt;
   box-shadow: $toast-box-shadow-alt;
 
-  // DO I NEED THIS?
-  // &:not(.showing):not(.show) {
+  //// DO I NEED THIS?
+  // &.showing {
   //   opacity: 0;
   // }
 }

src/scss/bootstrap-dark/_utilities.scss

@@ -57,7 +57,7 @@ $utilities-alt: map-merge(
       )
     ),
     // Text
-    // DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
+    // DON'T NEED TO DARK, CSS VARS TAKES CARE OF THIS.
     // "gradient": (
     //   property: background-image,
     //   class: bg,
@@ -67,12 +67,9 @@ $utilities-alt: map-merge(
       property: color,
       class: text,
       values: map-merge(
-        $theme-colors-alt,
+        $utilities-text-colors-alt,
         (
-          "body": $body-color-alt,
           "muted": $text-muted-alt,
-          "white": $white-alt,
-          "black": $black-alt,
           "white-50": rgba($white-alt, .5),
           "black-50": rgba($black-alt, .5)
         )
@@ -82,10 +79,8 @@ $utilities-alt: map-merge(
       property: background-color,
       class: bg,
       values: map-merge(
-        $theme-colors-alt,
+        $utilities-bg-colors-alt,
         (
-          "body": $body-bg-alt,
-          "white": $white-alt,
           "black": $black-alt
         )
       )

src/scss/bootstrap-dark/_variables-alt.scss

@@ -13,17 +13,17 @@ $color-schemes: (
 // items marked //** from https://bootswatch.com/darkly/
 // items marked //~~ from https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
 
-$white-alt:    #f0f6fc !default;
-$gray-100-alt: #c9d1d9 !default;
-$gray-200-alt: #b1bac4 !default;
-$gray-300-alt: #8b949e !default;
-$gray-400-alt: #6e7681 !default;
-$gray-500-alt: #484f58 !default;
-$gray-600-alt: #30363d !default;
-$gray-700-alt: #21262d !default;
-$gray-800-alt: #161b22 !default;
-$gray-900-alt: #0d1117 !default;
-$black-alt:    #010409 !default;
+$white-alt:    #fafafa !default;
+$gray-100-alt: #e1e1e1 !default;  //~~
+$gray-200-alt: #cfcfcf !default;  //~~
+$gray-300-alt: #b1b1b1 !default;  //~~
+$gray-400-alt: #9e9e9e !default;  //~~
+$gray-500-alt: #7e7e7e !default;  //~~
+$gray-600-alt: #626262 !default;  //~~
+$gray-700-alt: #515151 !default;  //~~
+$gray-800-alt: #3b3b3b !default;  //~~
+$gray-900-alt: #222 !default;  //~~
+$black-alt:    #111 !default;  //~~
 
 // fusv-disable
 $grays-alt: (
@@ -39,7 +39,7 @@ $grays-alt: (
 ) !default;
 // fusv-enable
 
-$blue-alt:    #1f6feb !default;
+$blue-alt:    #375a7f !default;
 $indigo-alt:  #673ab7 !default;  //~~
 $purple-alt:  #654ea3 !default;  // Panatone CotY 2018
 $pink-alt:    #e83e8c !default;
@@ -63,8 +63,8 @@ $colors-alt: (
   "cyan":       $cyan-alt,
   "white":      $white-alt,
   "black":      $black-alt,
-  "gray":       $gray-600-alt,
-  "gray-dark":  $gray-800-alt
+  "gray":       #7e7e7e,  // $gray-600,
+  "gray-dark":  #121212  //$gray-800
 ) !default;
 
 $primary-alt:       $blue-alt !default;
@@ -73,7 +73,7 @@ $success-alt:       $green-alt !default;
 $info-alt:          $cyan-alt !default;
 $warning-alt:       $yellow-alt !default;
 $danger-alt:        $red-alt !default;
-$light-alt:         $gray-100-alt !default;
+$light-alt:         $gray-400-alt !default;
 $dark-alt:          $gray-800-alt !default;
 
 $theme-colors-alt: (
@@ -87,6 +87,8 @@ $theme-colors-alt: (
   "dark":       $dark-alt
 ) !default;
 
+$theme-colors-rgb-alt: map-loop($theme-colors-alt, to-rgb, "$value") !default;
+
 // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
 // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
 $min-contrast-ratio-alt:   2.5 !default;
@@ -94,6 +96,227 @@ $min-contrast-ratio-alt:   2.5 !default;
 $color-contrast-dark-alt:      $black-alt !default;
 $color-contrast-light-alt:     $white-alt !default;
 
+// fusv-disable
+$blue-100-alt: tint-color($blue-alt, 80%) !default;
+$blue-200-alt: tint-color($blue-alt, 60%) !default;
+$blue-300-alt: tint-color($blue-alt, 40%) !default;
+$blue-400-alt: tint-color($blue-alt, 20%) !default;
+$blue-500-alt: $blue-alt !default;
+$blue-600-alt: shade-color($blue-alt, 20%) !default;
+$blue-700-alt: shade-color($blue-alt, 40%) !default;
+$blue-800-alt: shade-color($blue-alt, 60%) !default;
+$blue-900-alt: shade-color($blue-alt, 80%) !default;
+
+$indigo-100-alt: tint-color($indigo-alt, 80%) !default;
+$indigo-200-alt: tint-color($indigo-alt, 60%) !default;
+$indigo-300-alt: tint-color($indigo-alt, 40%) !default;
+$indigo-400-alt: tint-color($indigo-alt, 20%) !default;
+$indigo-500-alt: $indigo-alt !default;
+$indigo-600-alt: shade-color($indigo-alt, 20%) !default;
+$indigo-700-alt: shade-color($indigo-alt, 40%) !default;
+$indigo-800-alt: shade-color($indigo-alt, 60%) !default;
+$indigo-900-alt: shade-color($indigo-alt, 80%) !default;
+
+$purple-100-alt: tint-color($purple-alt, 80%) !default;
+$purple-200-alt: tint-color($purple-alt, 60%) !default;
+$purple-300-alt: tint-color($purple-alt, 40%) !default;
+$purple-400-alt: tint-color($purple-alt, 20%) !default;
+$purple-500-alt: $purple-alt !default;
+$purple-600-alt: shade-color($purple-alt, 20%) !default;
+$purple-700-alt: shade-color($purple-alt, 40%) !default;
+$purple-800-alt: shade-color($purple-alt, 60%) !default;
+$purple-900-alt: shade-color($purple-alt, 80%) !default;
+
+$pink-100-alt: tint-color($pink-alt, 80%) !default;
+$pink-200-alt: tint-color($pink-alt, 60%) !default;
+$pink-300-alt: tint-color($pink-alt, 40%) !default;
+$pink-400-alt: tint-color($pink-alt, 20%) !default;
+$pink-500-alt: $pink-alt !default;
+$pink-600-alt: shade-color($pink-alt, 20%) !default;
+$pink-700-alt: shade-color($pink-alt, 40%) !default;
+$pink-800-alt: shade-color($pink-alt, 60%) !default;
+$pink-900-alt: shade-color($pink-alt, 80%) !default;
+
+$red-100-alt: tint-color($red-alt, 80%) !default;
+$red-200-alt: tint-color($red-alt, 60%) !default;
+$red-300-alt: tint-color($red-alt, 40%) !default;
+$red-400-alt: tint-color($red-alt, 20%) !default;
+$red-500-alt: $red-alt !default;
+$red-600-alt: shade-color($red-alt, 20%) !default;
+$red-700-alt: shade-color($red-alt, 40%) !default;
+$red-800-alt: shade-color($red-alt, 60%) !default;
+$red-900-alt: shade-color($red-alt, 80%) !default;
+
+$orange-100-alt: tint-color($orange-alt, 80%) !default;
+$orange-200-alt: tint-color($orange-alt, 60%) !default;
+$orange-300-alt: tint-color($orange-alt, 40%) !default;
+$orange-400-alt: tint-color($orange-alt, 20%) !default;
+$orange-500-alt: $orange-alt !default;
+$orange-600-alt: shade-color($orange-alt, 20%) !default;
+$orange-700-alt: shade-color($orange-alt, 40%) !default;
+$orange-800-alt: shade-color($orange-alt, 60%) !default;
+$orange-900-alt: shade-color($orange-alt, 80%) !default;
+
+$yellow-100-alt: tint-color($yellow-alt, 80%) !default;
+$yellow-200-alt: tint-color($yellow-alt, 60%) !default;
+$yellow-300-alt: tint-color($yellow-alt, 40%) !default;
+$yellow-400-alt: tint-color($yellow-alt, 20%) !default;
+$yellow-500-alt: $yellow-alt !default;
+$yellow-600-alt: shade-color($yellow-alt, 20%) !default;
+$yellow-700-alt: shade-color($yellow-alt, 40%) !default;
+$yellow-800-alt: shade-color($yellow-alt, 60%) !default;
+$yellow-900-alt: shade-color($yellow-alt, 80%) !default;
+
+$green-100-alt: tint-color($green-alt, 80%) !default;
+$green-200-alt: tint-color($green-alt, 60%) !default;
+$green-300-alt: tint-color($green-alt, 40%) !default;
+$green-400-alt: tint-color($green-alt, 20%) !default;
+$green-500-alt: $green-alt !default;
+$green-600-alt: shade-color($green-alt, 20%) !default;
+$green-700-alt: shade-color($green-alt, 40%) !default;
+$green-800-alt: shade-color($green-alt, 60%) !default;
+$green-900-alt: shade-color($green-alt, 80%) !default;
+
+$teal-100-alt: tint-color($teal-alt, 80%) !default;
+$teal-200-alt: tint-color($teal-alt, 60%) !default;
+$teal-300-alt: tint-color($teal-alt, 40%) !default;
+$teal-400-alt: tint-color($teal-alt, 20%) !default;
+$teal-500-alt: $teal-alt !default;
+$teal-600-alt: shade-color($teal-alt, 20%) !default;
+$teal-700-alt: shade-color($teal-alt, 40%) !default;
+$teal-800-alt: shade-color($teal-alt, 60%) !default;
+$teal-900-alt: shade-color($teal-alt, 80%) !default;
+
+$cyan-100-alt: tint-color($cyan-alt, 80%) !default;
+$cyan-200-alt: tint-color($cyan-alt, 60%) !default;
+$cyan-300-alt: tint-color($cyan-alt, 40%) !default;
+$cyan-400-alt: tint-color($cyan-alt, 20%) !default;
+$cyan-500-alt: $cyan-alt !default;
+$cyan-600-alt: shade-color($cyan-alt, 20%) !default;
+$cyan-700-alt: shade-color($cyan-alt, 40%) !default;
+$cyan-800-alt: shade-color($cyan-alt, 60%) !default;
+$cyan-900-alt: shade-color($cyan-alt, 80%) !default;
+
+$blues-alt: (
+  "blue-100": $blue-100-alt,
+  "blue-200": $blue-200-alt,
+  "blue-300": $blue-300-alt,
+  "blue-400": $blue-400-alt,
+  "blue-500": $blue-500-alt,
+  "blue-600": $blue-600-alt,
+  "blue-700": $blue-700-alt,
+  "blue-800": $blue-800-alt,
+  "blue-900": $blue-900-alt
+) !default;
+
+$indigos-alt: (
+  "indigo-100": $indigo-100-alt,
+  "indigo-200": $indigo-200-alt,
+  "indigo-300": $indigo-300-alt,
+  "indigo-400": $indigo-400-alt,
+  "indigo-500": $indigo-500-alt,
+  "indigo-600": $indigo-600-alt,
+  "indigo-700": $indigo-700-alt,
+  "indigo-800": $indigo-800-alt,
+  "indigo-900": $indigo-900-alt
+) !default;
+
+$purples-alt: (
+  "purple-100": $purple-200-alt,
+  "purple-200": $purple-100-alt,
+  "purple-300": $purple-300-alt,
+  "purple-400": $purple-400-alt,
+  "purple-500": $purple-500-alt,
+  "purple-600": $purple-600-alt,
+  "purple-700": $purple-700-alt,
+  "purple-800": $purple-800-alt,
+  "purple-900": $purple-900-alt
+) !default;
+
+$pinks-alt: (
+  "pink-100": $pink-100-alt,
+  "pink-200": $pink-200-alt,
+  "pink-300": $pink-300-alt,
+  "pink-400": $pink-400-alt,
+  "pink-500": $pink-500-alt,
+  "pink-600": $pink-600-alt,
+  "pink-700": $pink-700-alt,
+  "pink-800": $pink-800-alt,
+  "pink-900": $pink-900-alt
+) !default;
+
+$reds-alt: (
+  "red-100": $red-100-alt,
+  "red-200": $red-200-alt,
+  "red-300": $red-300-alt,
+  "red-400": $red-400-alt,
+  "red-500": $red-500-alt,
+  "red-600": $red-600-alt,
+  "red-700": $red-700-alt,
+  "red-800": $red-800-alt,
+  "red-900": $red-900-alt
+) !default;
+
+$oranges-alt: (
+  "orange-100": $orange-100-alt,
+  "orange-200": $orange-200-alt,
+  "orange-300": $orange-300-alt,
+  "orange-400": $orange-400-alt,
+  "orange-500": $orange-500-alt,
+  "orange-600": $orange-600-alt,
+  "orange-700": $orange-700-alt,
+  "orange-800": $orange-800-alt,
+  "orange-900": $orange-900-alt
+) !default;
+
+$yellows-alt: (
+  "yellow-100": $yellow-100-alt,
+  "yellow-200": $yellow-200-alt,
+  "yellow-300": $yellow-300-alt,
+  "yellow-400": $yellow-400-alt,
+  "yellow-500": $yellow-500-alt,
+  "yellow-600": $yellow-600-alt,
+  "yellow-700": $yellow-700-alt,
+  "yellow-800": $yellow-800-alt,
+  "yellow-900": $yellow-900-alt
+) !default;
+
+$greens-alt: (
+  "green-100": $green-100-alt,
+  "green-200": $green-200-alt,
+  "green-300": $green-300-alt,
+  "green-400": $green-400-alt,
+  "green-500": $green-500-alt,
+  "green-600": $green-600-alt,
+  "green-700": $green-700-alt,
+  "green-800": $green-800-alt,
+  "green-900": $green-900-alt
+) !default;
+
+$teals-alt: (
+  "teal-100": $teal-100-alt,
+  "teal-200": $teal-200-alt,
+  "teal-300": $teal-300-alt,
+  "teal-400": $teal-400-alt,
+  "teal-500": $teal-500-alt,
+  "teal-600": $teal-600-alt,
+  "teal-700": $teal-700-alt,
+  "teal-800": $teal-800-alt,
+  "teal-900": $teal-900-alt
+) !default;
+
+$cyans-alt: (
+  "cyan-100": $cyan-100-alt,
+  "cyan-200": $cyan-200-alt,
+  "cyan-300": $cyan-300-alt,
+  "cyan-400": $cyan-400-alt,
+  "cyan-500": $cyan-500-alt,
+  "cyan-600": $cyan-600-alt,
+  "cyan-700": $cyan-700-alt,
+  "cyan-800": $cyan-800-alt,
+  "cyan-900": $cyan-900-alt
+) !default;
+// fusv-enable
 
 // Gradient
 // ______________________________________
@@ -109,12 +332,28 @@ $gradient-alt: linear-gradient(180deg, rgba($black-alt, .15), rgba($black-alt, 0
 $body-bg-alt:                   $gray-900-alt !default;  // $white !default;
 $body-color-alt:                $gray-100-alt !default;  // $gray-900 !default;
 
+// Utilities maps
+// ______________________________________
+
+$utilities-colors-alt: map-merge(
+  $theme-colors-rgb-alt,
+  (
+    "black": to-rgb($black-alt),
+    "white": to-rgb($white-alt),
+    "body":  to-rgb($body-color-alt)
+  )
+) !default;
+
+$utilities-text-colors-alt: map-loop($utilities-colors-alt, rgba-css-var, "$key", "text") !default;
+
+$utilities-bg-colors-alt: map-loop($utilities-colors-alt, rgba-css-var, "$key", "bg") !default;
+
 
 // Links
 // ______________________________________
 // Style anchor elements.
 
-$link-color-alt:                              #58a6ff !default;
+$link-color-alt:                              shift-color($primary-alt, -15%) !default;
 $link-shade-percentage-alt:                   20% !default;  // TODO: should be -20%;
 $link-hover-color-alt:                        tint-color($link-color-alt, $link-shade-percentage-alt) !default;  // TODO: shift-color
 
@@ -157,18 +396,19 @@ $mark-bg-alt:                     rgba($yellow-alt, .5) !default;
 
 $table-color-alt:                 $body-color-alt !default;
 $table-bg-alt:                    transparent !default;
+$table-accent-bg-alt:             transparent !default;
 
 $table-striped-color-alt:         $table-color-alt !default;
 $table-striped-bg-factor-alt:     .05 !default;
-$table-striped-bg-alt:            rgba($black-alt, $table-striped-bg-factor-alt) !default;
+$table-striped-bg-alt:            rgba($white-alt, $table-striped-bg-factor-alt) !default;
 
 $table-active-color-alt:          $table-color-alt !default;
 $table-active-bg-factor-alt:      .1 !default;
-$table-active-bg-alt:             rgba($black-alt, $table-active-bg-factor-alt) !default;
+$table-active-bg-alt:             rgba($white-alt, $table-active-bg-factor-alt) !default;
 
 $table-hover-color-alt:           $table-color-alt !default;
 $table-hover-bg-factor-alt:       .075 !default;
-$table-hover-bg-alt:              rgba($black-alt, $table-hover-bg-factor-alt) !default;
+$table-hover-bg-alt:              rgba($white-alt, $table-hover-bg-factor-alt) !default;
 
 $table-border-factor-alt:         .1 !default;
 $table-border-color-alt:          $border-color-alt !default;
@@ -231,11 +471,11 @@ $form-text-color-alt:                       $text-muted-alt !default;
 
 $form-label-color-alt:                      null !default;
 
-$input-bg-alt:                              $gray-900-alt !default;
-$input-disabled-bg-alt:                     $gray-800-alt !default;
+$input-bg-alt:                              $body-bg-alt !default;
+$input-disabled-bg-alt:                     $gray-900-alt !default;
 $input-disabled-border-color-alt:           null !default;
 
-$input-color-alt:                           $body-color-alt !default;
+$input-color-alt:                           $gray-300-alt !default;
 $input-border-color-alt:                    $gray-700-alt !default;
 $input-box-shadow-alt:                      $box-shadow-inset-alt !default;
 
@@ -310,7 +550,7 @@ $form-range-thumb-disabled-bg-alt:             $gray-500-alt !default;
 
 $form-file-button-color-alt:          $input-color-alt !default;
 $form-file-button-bg-alt:             $input-group-addon-bg-alt !default;
-$form-file-button-hover-bg-alt:       tint-color($form-file-button-bg-alt, 5%) !default;
+$form-file-button-hover-bg-alt:       shade-color($form-file-button-bg-alt, 5%) !default;
 
 $form-floating-label-opacity-alt:     .65 !default;
 
@@ -383,7 +623,7 @@ $navbar-dark-brand-hover-color-alt:           $navbar-dark-active-color-alt !def
 // Dropdown menu container and contents.
 
 $dropdown-color-alt:                    $body-color-alt !default;
-$dropdown-bg-alt:                       $body-bg-alt !default;
+$dropdown-bg-alt:                       $black-alt !default;
 $dropdown-border-color-alt:             rgba($white-alt, .15) !default;
 $dropdown-divider-bg-alt:               $dropdown-border-color-alt !default;
 $dropdown-box-shadow-alt:               $box-shadow-alt !default;
@@ -438,6 +678,13 @@ $pagination-disabled-bg-alt:            $gray-900-alt !default;
 $pagination-disabled-border-color-alt:  $gray-700-alt !default;
 
 
+// Placeholders
+// ______________________________________
+
+$placeholder-opacity-max-alt:  .5 !default;
+$placeholder-opacity-min-alt:  .2 !default;
+
+
 // Cards
 // ______________________________________
 
@@ -445,6 +692,7 @@ $card-border-color-alt: rgba($white-alt, .125) !default;
 $card-cap-bg-alt:       rgba($white-alt, .03) !default;
 $card-cap-color-alt:    null !default;
 $card-color-alt:        null !default;
+$card-box-shadow-alt:   null !default;
 $card-bg-alt:           $gray-900-alt !default;
 
 
@@ -463,7 +711,7 @@ $accordion-button-active-color-alt:           tint-color($primary-alt, 40%) !def
 $accordion-button-focus-border-color-alt:     $input-focus-border-color-alt !default;
 $accordion-button-focus-box-shadow-alt:       $btn-focus-box-shadow-alt !default;
 
-$accordion-icon-color-alt:                    $accordion-color-alt !default;
+$accordion-icon-color-alt:                    $accordion-button-color-alt !default;
 $accordion-icon-active-color-alt:             $accordion-button-active-color-alt !default;
 
 $accordion-button-icon-alt:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-alt}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
@@ -593,7 +841,7 @@ $figure-caption-color-alt:              $gray-400-alt !default;
 // Breadcrumbs
 // ______________________________________
 
-$breadcrumb-bg-alt:                     null !default;  // null !default;
+$breadcrumb-bg-alt:                     null !default;
 $breadcrumb-divider-color-alt:          $gray-400-alt !default;
 $breadcrumb-active-color-alt:           $gray-400-alt !default;
 
@@ -644,6 +892,8 @@ $offcanvas-border-color-alt:            $modal-content-border-color-alt !default
 $offcanvas-bg-color-alt:                $modal-content-bg-alt !default;
 $offcanvas-color-alt:                   $modal-content-color-alt !default;
 $offcanvas-box-shadow-alt:              $modal-content-box-shadow-xs-alt !default;
+$offcanvas-backdrop-bg-alt:             $modal-backdrop-bg-alt !default;
+$offcanvas-backdrop-opacity-alt:        $modal-backdrop-opacity-alt !default;
 
 
 // Code

src/scss/bootstrap-dark/forms/_floating-labels.scss

@@ -5,9 +5,9 @@
   // }
 
   > .form-control {
-    // &::placeholder {
-    //   color: transparent;
-    // }
+    &::placeholder {
+      color: transparent;
+    }
   }
 
   > .form-control:focus,

src/scss/bootstrap-dark/helpers/_vr.scss

@@ -0,0 +1,6 @@
+// from commit [aee169d19](https://github.com/twbs/bootstrap/commit/aee169d19288d78330be2df0960ea8924353f84f)
+
+.vr {
+  background-color: currentColor;
+  opacity: $hr-opacity-alt;
+}

src/scss/bootstrap-dark/mixins/_backdrop.scss

@@ -0,0 +1,8 @@
+
+@mixin overlay-backdrop-alt($backdrop-bg-alt, $backdrop-opacity-alt) {
+  background-color: $backdrop-bg-alt;
+
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+  &.show { opacity: $backdrop-opacity-alt; }
+}