From 6a48cf008efdc0cc7bc4ef8673ebbbb10c054192 Mon Sep 17 00:00:00 2001
From: Ayke Halder <rr-it@users.noreply.github.com>
Date: Sat, 15 Jun 2024 17:54:00 +0200
Subject: [PATCH] Set css-var `--bs-current-plane-bg` for elements with
 background-color that might contain buttons

---
 scss/_modal.scss   | 2 ++
 scss/_popover.scss | 2 ++
 scss/_tables.scss  | 1 +
 scss/_toasts.scss  | 2 ++
 scss/_tooltip.scss | 1 +
 5 files changed, 8 insertions(+)

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 494db94e7eb9..f0b3ce5318e8 100644
--- a/scss/_modal.scss
+++ b/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));
 
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 7b69f62328f2..f018359eaa9c 100644
--- a/scss/_popover.scss
+++ b/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));
 
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 276521a387fe..9b5187b9dc90 100644
--- a/scss/_tables.scss
+++ b/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)));
   }
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 2ce378d5bc96..8d24a4d1cce6 100644
--- a/scss/_toasts.scss
+++ b/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)));
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 85de90f53d96..d8442341cc28 100644
--- a/scss/_tooltip.scss
+++ b/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));
 }