From e60002b1fc9bb8a735b3161a3e5d29fbb6a0cbdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Mon, 2 Jan 2023 07:57:12 +0100
Subject: [PATCH] Docs: add CSS variables section in close button section

---
 scss/_close.scss                                 |  2 ++
 site/content/docs/5.3/components/close-button.md | 10 +++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/scss/_close.scss b/scss/_close.scss
index 503a105cca..4d6e73c139 100644
--- 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 39b80e1cd4..033958deda 100644
--- 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" >}}