Convert toasts to CSS variables (#35961)

* Convert toasts to CSS variables

* bundlewatch

3 files changed, 41 insertions, 17 deletions

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index c040d32389..477fa44869 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "26.65 kB"
+      "maxSize": "26.8 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "24.75 kB"
+      "maxSize": "24.85 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 889a936851..68f110b66e 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -1,14 +1,30 @@
 .toast {
-  width: $toast-max-width;
+  // scss-docs-start toast-css-vars
+  --#{$prefix}toast-padding-x: #{$toast-padding-x};
+  --#{$prefix}toast-padding-y: #{$toast-padding-y};
+  --#{$prefix}toast-max-width: #{$toast-max-width};
+  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
+  --#{$prefix}toast-color: #{$toast-color}; // stylelint-disable-line custom-property-empty-line-before
+  --#{$prefix}toast-bg: #{$toast-background-color};
+  --#{$prefix}toast-border-width: #{$toast-border-width};
+  --#{$prefix}toast-border-color: #{$toast-border-color};
+  --#{$prefix}toast-border-radius: #{$toast-border-radius};
+  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
+  --#{$prefix}toast-header-color: #{$toast-header-color};
+  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
+  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
+  // scss-docs-end toast-css-vars
+
+  width: var(--#{$prefix}toast-max-width);
   max-width: 100%;
   @include font-size($toast-font-size);
-  color: $toast-color;
+  color: var(--#{$prefix}toast-color);
   pointer-events: auto;
-  background-color: $toast-background-color;
+  background-color: var(--#{$prefix}toast-bg);
   background-clip: padding-box;
-  border: $toast-border-width solid $toast-border-color;
-  box-shadow: $toast-box-shadow;
-  @include border-radius($toast-border-radius);
+  border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
+  box-shadow: var(--#{$prefix}toast-box-shadow);
+  @include border-radius(var(--#{$prefix}toast-border-radius));
 
   &.showing {
     opacity: 0;
@@ -34,20 +50,20 @@
 .toast-header {
   display: flex;
   align-items: center;
-  padding: $toast-padding-y $toast-padding-x;
-  color: $toast-header-color;
-  background-color: $toast-header-background-color;
+  padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
+  color: var(--#{$prefix}toast-header-color);
+  background-color: var(--#{$prefix}toast-header-bg);
   background-clip: padding-box;
-  border-bottom: $toast-border-width solid $toast-header-border-color;
-  @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
+  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)));
 
   .btn-close {
-    margin-right: $toast-padding-x * -.5;
-    margin-left: $toast-padding-x;
+    margin-right: calc(var(--#{$prefix}toast-padding-x) * -.5); // stylelint-disable-line function-disallowed-list
+    margin-left: var(--#{$prefix}toast-padding-x);
   }
 }
 
 .toast-body {
-  padding: $toast-padding-x; // apply to both vertical and horizontal
+  padding: var(--#{$prefix}toast-padding-x);
   word-wrap: break-word;
 }
diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md
index a982c47db3..fdfd9caf7d 100644
--- a/site/content/docs/5.1/components/toasts.md
+++ b/site/content/docs/5.1/components/toasts.md
@@ -324,10 +324,18 @@ When using `autohide: false`, you must add a close button to allow users to dism
 
 While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long [`delay` timeout](#options), keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with `autohide: false`.
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, toasts now use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="toast-css-vars" file="scss/_toasts.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="toast-variables" file="scss/_variables.scss" >}}
 
 ## Usage