Docs: add CSS variables section in close button section

twbs · Jan 2, 2023 · e60002b · e60002b
1 parent 0d64dc6
commit e60002b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git 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
@@ -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" >}}