fix(ratio): missing variable prefix (#32501)

This is the only unprefixed custom property, and its name is very common so I think we'd better prefix it too.

4 files changed, 7 insertions, 6 deletions

diff --git a/scss/helpers/_ratio.scss b/scss/helpers/_ratio.scss
index 3c0ff330a7..2390ee3394 100644
--- a/scss/helpers/_ratio.scss
+++ b/scss/helpers/_ratio.scss
@@ -6,7 +6,7 @@
 
   &::before {
     display: block;
-    padding-top: var(--aspect-ratio);
+    padding-top: var(--#{$variable-prefix}aspect-ratio);
     content: "";
   }
 
@@ -21,6 +21,6 @@
 
 @each $key, $ratio in $aspect-ratios {
   .ratio-#{$key} {
-    --aspect-ratio: #{$ratio};
+    --#{$variable-prefix}aspect-ratio: #{$ratio};
   }
 }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index ce7ea75399..b997689ed1 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -187,7 +187,7 @@
     width: 16rem;
 
     @include media-breakpoint-up(md) {
-      --aspect-ratio: 50%; // 2x1
+      --bs-aspect-ratio: 50%; // 2x1
     }
   }
 }
diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md
index 62e173ff1f..771bc07cb9 100644
--- a/site/content/docs/5.0/helpers/ratio.md
+++ b/site/content/docs/5.0/helpers/ratio.md
@@ -49,10 +49,10 @@ Aspect ratios can be customized with modifier classes. By default the following
 
 Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part.
 
-For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ratio`.
+For example, to create a 2x1 aspect ratio, set `--bs-aspect-ratio: 50%` on the `.ratio`.
 
 {{< example class="bd-example-ratios" >}}
-<div class="ratio" style="--aspect-ratio: 50%;">
+<div class="ratio" style="--bs-aspect-ratio: 50%;">
   <div>2x1</div>
 </div>
 {{< /example >}}
@@ -62,7 +62,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T
 ```scss
 .ratio-4x3 {
   @include media-breakpoint-up(md) {
-    --aspect-ratio: 50%; // 2x1
+    --bs-aspect-ratio: 50%; // 2x1
   }
 }
 ```
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 551499e350..895b8c2755 100644
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -13,6 +13,7 @@ toc: true
 
 #### Utilities
 
+- Renamed `--aspect-ratio` to `--bs-aspect-ratio` to be consistent with other custom properties.
 - Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
 - `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore.
 - Extended form validation states customization capabilities. Added three new optional parameters to the `form-validation-state` mixin: `tooltip-color`, `tooltip-bg-color`, `focus-box-shadow`. These parameters can be set in the `$form-validation-states` map. [See #31757](https://github.com/twbs/bootstrap/pull/31757).