Convert toasts to CSS variables (#35961)

* Convert toasts to CSS variables

* bundlewatch

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index c040d323892672e9b7de5e21c400cb37a61fff1e..477fa4486990f8c5590324d0a5e16d95bcc36557 100644 (file)
--- 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 889a936851a1886fb0ed817d7b9a049cebf848e4..68f110b66eb220d842d2b1581cfa5a10d1a032ca 100644 (file)
--- 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 a982c47db3e633cdec2ed7007be8ddd602388016..fdfd9caf7dd9a5c68dc65c1d2af798248dc74969 100644 (file)
--- 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