Docs: add CSS variables section in close button section

diff --git a/scss/_close.scss b/scss/_close.scss
index 503a105cca5801f18994eb5c60ab3b026a6859fb..4d6e73c13931f3cbfd856249b4d3150547ae9bce 100644 (file)
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -4,6 +4,7 @@
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
 .btn-close {
+  // scss-docs-start close-css-vars
   --#{$prefix}btn-close-color: #{$btn-close-color};
   --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
   --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
@@ -12,6 +13,7 @@
   --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
   --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
   --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
+  // scss-docs-end close-css-vars
 
   box-sizing: content-box;
   width: $btn-close-width;

diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md
index 39b80e1cd4e852375d63264f9a93e59ed0a12b78..033958dedaa95cbffc255dbd22a3a43cc56e740b 100644 (file)
--- a/site/content/docs/5.3/components/close-button.md
+++ b/site/content/docs/5.3/components/close-button.md
@@ -37,8 +37,16 @@ Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to inv
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.3.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="close-css-vars" file="scss/_close.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="close-variables" file="scss/_variables.scss" >}}