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.

diff --git a/scss/helpers/_ratio.scss b/scss/helpers/_ratio.scss
index 3c0ff330a76ea7b18470dec3bae59d6578abbef6..2390ee339481729e13d0994351c2ad0f5b687ef5 100644 (file)
--- 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 ce7ea7539935a23944fac0b9f20197bd54ab9411..b997689ed1af5a9bf6891dbb9bd88ddea45d13ad 100644 (file)
--- 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 62e173ff1ffd7ddf9cb0cd2237dde6e37e403c08..771bc07cb9dd3f28c139ee07a7f5eb85ca3a9dc6 100644 (file)
--- 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 551499e3502bcb18c2ed925214042507e223b9c3..895b8c27556c7596d276dde668992013bd1ee6c7 100644 (file)
--- 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).