Revert `border-color` change (#36238)

* Revert `border-color` change

* Add new border-color-translucent for when we want optional alpha-transparency in our border-color

Apply to drodpowns, modals, offcanvas, popovers, and toasts

* bundlewatch

4 files changed, 16 insertions, 10 deletions

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index b864477107..a041de59e6 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -10,7 +10,7 @@
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "2.55 kB"
+      "maxSize": "2.75 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
diff --git a/scss/_root.scss b/scss/_root.scss
index e1719e5da1..36f9849ef8 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -56,6 +56,7 @@
   --#{$prefix}border-width: #{$border-width};
   --#{$prefix}border-style: #{$border-style};
   --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
   --#{$prefix}border-opacity: 1;
 
   --#{$prefix}border-radius: #{$border-radius};
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6aae8adc55..386889475f 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -487,7 +487,8 @@ $border-widths: (
 ) !default;
 
 $border-style:                solid !default;
-$border-color:                rgba($black, .15) !default;
+$border-color:                $gray-300 !default;
+$border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
@@ -1133,7 +1134,7 @@ $dropdown-spacer:                   .125rem !default;
 $dropdown-font-size:                $font-size-base !default;
 $dropdown-color:                    $body-color !default;
 $dropdown-bg:                       $white !default;
-$dropdown-border-color:             rgba($black, .15) !default;
+$dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius:            $border-radius !default;
 $dropdown-border-width:             $border-width !default;
 $dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
@@ -1234,7 +1235,7 @@ $card-spacer-y:                     $spacer !default;
 $card-spacer-x:                     $spacer !default;
 $card-title-spacer-y:               $spacer * .5 !default;
 $card-border-width:                 $border-width !default;
-$card-border-color:                 var(--#{$prefix}border-color) !default;
+$card-border-color:                 var(--#{$prefix}border-color-translucent) !default;
 $card-border-radius:                $border-radius !default;
 $card-box-shadow:                   null !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
@@ -1323,7 +1324,7 @@ $popover-font-size:                 $font-size-sm !default;
 $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
 $popover-border-width:              $border-width !default;
-$popover-border-color:              rgba($black, .2) !default;
+$popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             $border-radius-lg !default;
 $popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
 $popover-box-shadow:                $box-shadow !default;
@@ -1345,7 +1346,7 @@ $popover-arrow-height:              .5rem !default;
 // fusv-disable
 // Deprecated in Bootstrap 5.2.0 for CSS variables
 $popover-arrow-color:               $popover-bg !default;
-$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+$popover-arrow-outer-color:         var(--#{$prefix}border-color-translucent) !default;
 // fusv-enable
 
 
@@ -1359,7 +1360,7 @@ $toast-font-size:                   .875rem !default;
 $toast-color:                       null !default;
 $toast-background-color:            rgba($white, .85) !default;
 $toast-border-width:                $border-width !default;
-$toast-border-color:                var(--#{$prefix}border-color) !default;
+$toast-border-color:                var(--#{$prefix}border-color-translucent) !default;
 $toast-border-radius:               $border-radius !default;
 $toast-box-shadow:                  $box-shadow !default;
 $toast-spacing:                     $container-padding-x !default;
@@ -1396,7 +1397,7 @@ $modal-title-line-height:           $line-height-base !default;
 
 $modal-content-color:               null !default;
 $modal-content-bg:                  $white !default;
-$modal-content-border-color:        var(--#{$prefix}border-color) !default;
+$modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $modal-content-border-width:        $border-width !default;
 $modal-content-border-radius:       $border-radius-lg !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
diff --git a/site/content/docs/5.1/utilities/borders.md b/site/content/docs/5.1/utilities/borders.md
index 17d353b322..bba34358eb 100644
--- a/site/content/docs/5.1/utilities/borders.md
+++ b/site/content/docs/5.1/utilities/borders.md
@@ -124,15 +124,19 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 {{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}}
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< scss-docs name="root-border-var" file="scss/_root.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="border-variables" file="scss/_variables.scss" >}}
 
 {{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
 
-### Mixins
+### Sass mixins
 
 {{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}