Set css-var --bs-current-plane-bg for elements with background-colo…

…r that might contain buttons

scss/_modal.scss

@@ -101,6 +101,7 @@
   color: var(--#{$prefix}modal-color);
   pointer-events: auto;
   background-color: var(--#{$prefix}modal-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}modal-bg);
   background-clip: padding-box;
   border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
   @include border-radius(var(--#{$prefix}modal-border-radius));
@@ -161,6 +162,7 @@
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
   padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
   background-color: var(--#{$prefix}modal-footer-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}modal-footer-bg);
   border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
   @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
 

scss/_popover.scss

@@ -32,6 +32,7 @@
   // Allow breaking very long words so they don't overflow the popover's bounds
   word-wrap: break-word;
   background-color: var(--#{$prefix}popover-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}popover-bg);
   background-clip: padding-box;
   border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
   @include border-radius(var(--#{$prefix}popover-border-radius));
@@ -182,6 +183,7 @@
   @include font-size(var(--#{$prefix}popover-header-font-size));
   color: var(--#{$prefix}popover-header-color);
   background-color: var(--#{$prefix}popover-header-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}popover-header-bg);
   border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
   @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
 

scss/_tables.scss

@@ -35,6 +35,7 @@
     // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
     color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
     background-color: var(--#{$prefix}table-bg);
+    --#{$prefix}current-plane-bg: var(--#{$prefix}table-bg);
     border-bottom-width: $table-border-width;
     box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
   }

scss/_toasts.scss

@@ -23,6 +23,7 @@
   color: var(--#{$prefix}toast-color);
   pointer-events: auto;
   background-color: var(--#{$prefix}toast-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}toast-bg);
   background-clip: padding-box;
   border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
   box-shadow: var(--#{$prefix}toast-box-shadow);
@@ -57,6 +58,7 @@
   padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
   color: var(--#{$prefix}toast-header-color);
   background-color: var(--#{$prefix}toast-header-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}toast-header-bg);
   background-clip: padding-box;
   border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
   @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));

scss/_tooltip.scss

@@ -115,5 +115,6 @@
   color: var(--#{$prefix}tooltip-color);
   text-align: center;
   background-color: var(--#{$prefix}tooltip-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}tooltip-bg);
   @include border-radius(var(--#{$prefix}tooltip-border-radius));
 }