Train PR: CSS variables for accordion, cards, navs, and modals (#36071)

* Convert accordion to CSS vars

* Update accordion.md

* Convert navs to CSS variables

* Split up CSS vars

* bundlewatch

* fix vars

* Convert cards to CSS vars

* Convert modals to CSS variables

* Bundlewatch

Co-authored-by: Geremia Taglialatela <tagliala.dev@gmail.com>

4 files changed, 48 insertions, 4 deletions

diff --git a/site/content/docs/5.1/components/accordion.md b/site/content/docs/5.1/components/accordion.md
index 535ae46b5a..ee906f686a 100644
--- a/site/content/docs/5.1/components/accordion.md
+++ b/site/content/docs/5.1/components/accordion.md
@@ -150,8 +150,16 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord
 
 Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information.
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="accordion-css-vars" file="scss/_accordion.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/components/card.md b/site/content/docs/5.1/components/card.md
index 3effb21d00..22b413325c 100644
--- a/site/content/docs/5.1/components/card.md
+++ b/site/content/docs/5.1/components/card.md
@@ -722,8 +722,16 @@ Just like with card groups, card footers will automatically line up.
 
 In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, cards now use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="card-css-vars" file="scss/_card.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="card-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md
index 6facc239c5..d3e64a96ad 100644
--- a/site/content/docs/5.1/components/modal.md
+++ b/site/content/docs/5.1/components/modal.md
@@ -766,10 +766,20 @@ Another override is the option to pop up a modal that covers the user viewport,
   </div>
 </div>
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="modal-css-vars" file="scss/_modal.scss" >}}
+
+{{< scss-docs name="modal-backdrop-css-vars" file="scss/_modal.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="modal-variables" file="scss/_variables.scss" >}}
 
 ### Loop
diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md
index 7e2a20d7ac..81591013d3 100644
--- a/site/content/docs/5.1/components/navs-tabs.md
+++ b/site/content/docs/5.1/components/navs-tabs.md
@@ -304,10 +304,28 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 </ul>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+On the `.nav` base class:
+
+{{< scss-docs name="nav-css-vars" file="scss/_nav.scss" >}}
+
+On the `.nav-tabs` modifier class:
+
+{{< scss-docs name="nav-tabs-css-vars" file="scss/_nav.scss" >}}
+
+On the `.nav-pills` modifier class:
+
+{{< scss-docs name="nav-pills-css-vars" file="scss/_nav.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="nav-variables" file="scss/_variables.scss" >}}
 
 ## JavaScript behavior