Updated .rounded utilities (#31687)

* Updated rounded utilities to fix scale, but not rename anything else

* Rename rounded-pill to border-radius-pill to match

Also reorder some variables while I'm here to make more sense

* Updated rounded utilities to fix scale, but not rename anything else

* Rename rounded-pill to border-radius-pill to match

Also reorder some variables while I'm here to make more sense

* Small copy addition

* Add example modifier class for spacing

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 21ff560665990d69c0f39421bb848cd05e9684e4..481eaa82f8a8645bde3199163b5c18a915c215ee 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -497,11 +497,12 @@ $utilities: map-merge(
       class: rounded,
       values: (
         null: $border-radius,
-        sm: $border-radius-sm,
-        lg: $border-radius-lg,
-        circle: 50%,
-        pill: $rounded-pill,
         0: 0,
+        1: $border-radius-sm,
+        2: $border-radius,
+        3: $border-radius-lg,
+        circle: 50%,
+        pill: $border-radius-pill
       )
     ),
     "rounded-top": (

diff --git a/scss/_variables.scss b/scss/_variables.scss
index c98c500a2038cd109c1547a7d2c495e0381df155..4c6c4dd21d139ac6885cb35fa4a105158395d46f 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -345,11 +345,6 @@ $container-padding-x: $grid-gutter-width !default;
 // Define common padding and border radius sizes and more.
 
 $border-width:                1px !default;
-$border-color:                $gray-300 !default;
-
-$border-radius:               .25rem !default;
-$border-radius-sm:            .2rem !default;
-$border-radius-lg:            .3rem !default;
 $border-widths: (
   0: 0,
   1: 1px,
@@ -359,7 +354,12 @@ $border-widths: (
   5: 5px
 ) !default;
 
-$rounded-pill:                50rem !default;
+$border-color:                $gray-300 !default;
+
+$border-radius:               .25rem !default;
+$border-radius-sm:            .2rem !default;
+$border-radius-lg:            .3rem !default;
+$border-radius-pill:          50rem !default;
 
 $box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
 $box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;

diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md
index ec2a7cbc04eb9474557bb93a3e0ca83163b2d4cf..ceb140ecb755780498743cad787172dc378e6e23 100644 (file)
--- a/site/content/docs/5.0/utilities/borders.md
+++ b/site/content/docs/5.0/utilities/borders.md
@@ -43,7 +43,7 @@ Change the border color using utilities built on our theme colors.
 <span class="border border-white"></span>
 {{< /example >}}
 
-### Border-width
+## Border-width
 
 {{< example class="bd-example-border-utils" >}}
 <span class="border border-1"></span>
@@ -65,15 +65,15 @@ Add classes to an element to easily round its corners.
 {{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}}
 {{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
 {{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
-{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}}
 {{< /example >}}
 
+### Sizes
 
-## Sizes
-
-Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
+Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `3`, and can be configured by modifying the utilities API.
 
 {{< example class="bd-example-rounded-utils" >}}
-{{< placeholder width="75" height="75" class="rounded-sm" title="Example small rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-lg" title="Example large rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
 {{< /example >}}