Replace instances of Sass vars for CSS variable versions of border-color and border...

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 33a22f441374523b840f07bdf8af92326549109e..53f1c0ccfc337b18ee2b8fd4c4030f13fd93540a 100644 (file)
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -20,7 +20,7 @@
   &:not(.collapsed) {
     color: $accordion-button-active-color;
     background-color: $accordion-button-active-bg;
-    box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
+    box-shadow: inset 0 calc($accordion-border-width * -1) 0 $accordion-border-color; // stylelint-disable-line function-disallowed-list
 
     &::after {
       background-image: escape-svg($accordion-button-active-icon);

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index f015d332c970ac5d84cb5754c28e79c2bd52ac20..e2a42285ef43565a391104abbf8a7e4f7c352d8f 100644 (file)
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -156,7 +156,7 @@
   line-height: 1;
   color: var(--#{$variable-prefix}navbar-color);
   background-color: transparent; // remove default button style
-  border: $border-width solid var(--#{$variable-prefix}navbar-toggler-border-color); // remove default button style
+  border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}navbar-toggler-border-color); // remove default button style
   @include border-radius(var(--#{$variable-prefix}navbar-toggler-border-radius));
   @include transition(var(--#{$variable-prefix}navbar-toggler-transition));
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 56a81be7fd42ff75a7fedeb19f4a3999249c530b..ce41aa945b5197246141cee76bc664571e2bee57 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -620,13 +620,14 @@ $blockquote-footer-font-size: $small-font-size !default;
 
 $hr-margin-y:                 $spacer !default;
 $hr-color:                    inherit !default;
+
 // fusv-disable
-$hr-bg-color: null !default; // Deprecated in v5.2.0
-$hr-height: null !default; // Deprecated in v5.2.0
+$hr-bg-color:                 null !default; // Deprecated in v5.2.0
+$hr-height:                   null !default; // Deprecated in v5.2.0
 // fusv-enable
 
-$hr-border-color: null !default; // Allows for inherited colors
-$hr-border-width: $border-width !default;
+$hr-border-color:             null !default; // Allows for inherited colors
+$hr-border-width:             var(--#{$variable-prefix}border-width) !default;
 $hr-opacity:                  .25 !default;
 
 $legend-margin-bottom:        .5rem !default;
@@ -1058,8 +1059,8 @@ $nav-link-transition:               color .15s ease-in-out, background-color .15
 $nav-link-disabled-color:           $gray-600 !default;
 
 $nav-tabs-border-color:             $gray-300 !default;
-$nav-tabs-border-width:             $border-width !default;
 $nav-tabs-border-radius:            $border-radius !default;
+$nav-tabs-border-width:             var(--#{$variable-prefix}border-width) !default;
 $nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
 $nav-tabs-link-active-color:        $gray-700 !default;
 $nav-tabs-link-active-bg:           $body-bg !default;
@@ -1130,7 +1131,7 @@ $dropdown-color:                    $body-color !default;
 $dropdown-bg:                       $white !default;
 $dropdown-border-color:             rgba($black, .15) !default;
 $dropdown-border-radius:            $border-radius !default;
-$dropdown-border-width:             $border-width !default;
+$dropdown-border-width:             var(--#{$variable-prefix}border-width) !default;
 $dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
@@ -1180,8 +1181,8 @@ $pagination-padding-x-lg:           1.5rem !default;
 
 $pagination-color:                  $link-color !default;
 $pagination-bg:                     $white !default;
-$pagination-border-width:           $border-width !default;
 $pagination-border-radius:          $border-radius !default;
+$pagination-border-width:           var(--#{$variable-prefix}border-width) !default;
 $pagination-margin-start:           -$pagination-border-width !default;
 $pagination-border-color:           $gray-300 !default;
 
@@ -1222,9 +1223,9 @@ $placeholder-opacity-min:           .2 !default;
 $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:                 rgba($black, .125) !default;
 $card-border-radius:                $border-radius !default;
+$card-border-width:                 var(--#{$variable-prefix}border-width) !default;
+$card-border-color:                 var(--#{$variable-prefix}border-color) !default;
 $card-box-shadow:                   null !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
 $card-cap-padding-y:                $card-spacer-y * .5 !default;
@@ -1245,9 +1246,9 @@ $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
 $accordion-color:                         $body-color !default;
 $accordion-bg:                            $body-bg !default;
-$accordion-border-width:                  $border-width !default;
-$accordion-border-color:                  rgba($black, .125) !default;
 $accordion-border-radius:                 $border-radius !default;
+$accordion-border-width:                  var(--#{$variable-prefix}border-width) !default;
+$accordion-border-color:                  var(--#{$variable-prefix}border-color) !default;
 $accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;
 
 $accordion-body-padding-y:                $accordion-padding-y !default;
@@ -1309,7 +1310,7 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
 $popover-font-size:                 $font-size-sm !default;
 $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
-$popover-border-width:              $border-width !default;
+$popover-border-width:              var(--#{$variable-prefix}border-width) !default;
 $popover-border-color:              rgba($black, .2) !default;
 $popover-border-radius:             $border-radius-lg !default;
 $popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
@@ -1341,9 +1342,9 @@ $toast-padding-y:                   .5rem !default;
 $toast-font-size:                   .875rem !default;
 $toast-color:                       null !default;
 $toast-background-color:            rgba($white, .85) !default;
-$toast-border-width:                1px !default;
-$toast-border-color:                rgba($black, .1) !default;
 $toast-border-radius:               $border-radius !default;
+$toast-border-width:                var(--#{$variable-prefix}border-width) !default;
+$toast-border-color:                var(--#{$variable-prefix}border-color) !default;
 $toast-box-shadow:                  $box-shadow !default;
 $toast-spacing:                     $container-padding-x !default;
 
@@ -1379,16 +1380,16 @@ $modal-title-line-height:           $line-height-base !default;
 
 $modal-content-color:               null !default;
 $modal-content-bg:                  $white !default;
-$modal-content-border-color:        rgba($black, .2) !default;
-$modal-content-border-width:        $border-width !default;
 $modal-content-border-radius:       $border-radius-lg !default;
+$modal-content-border-color:        var(--#{$variable-prefix}border-color) !default;
+$modal-content-border-width:        var(--#{$variable-prefix}border-width) !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
 $modal-content-box-shadow-xs:       $box-shadow-sm !default;
 $modal-content-box-shadow-sm-up:    $box-shadow !default;
 
 $modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity:            .5 !default;
-$modal-header-border-color:         $border-color !default;
+$modal-header-border-color:         var(--#{$variable-prefix}border-color) !default;
 $modal-footer-border-color:         $modal-header-border-color !default;
 $modal-header-border-width:         $modal-content-border-width !default;
 $modal-footer-border-width:         $modal-header-border-width !default;
@@ -1448,8 +1449,8 @@ $progress-bar-transition:           width .6s ease !default;
 $list-group-color:                  $gray-900 !default;
 $list-group-bg:                     $white !default;
 $list-group-border-color:           rgba($black, .125) !default;
-$list-group-border-width:           $border-width !default;
 $list-group-border-radius:          $border-radius !default;
+$list-group-border-width:           var(--#{$variable-prefix}border-width) !default;
 
 $list-group-item-padding-y:         $spacer * .5 !default;
 $list-group-item-padding-x:         $spacer !default;
@@ -1477,9 +1478,9 @@ $list-group-action-active-bg:       $gray-200 !default;
 // scss-docs-start thumbnail-variables
 $thumbnail-padding:                 .25rem !default;
 $thumbnail-bg:                      $body-bg !default;
-$thumbnail-border-width:            $border-width !default;
-$thumbnail-border-color:            $gray-300 !default;
 $thumbnail-border-radius:           $border-radius !default;
+$thumbnail-border-width:            var(--#{$variable-prefix}border-width) !default;
+$thumbnail-border-color:            var(--#{$variable-prefix}border-color) !default;
 $thumbnail-box-shadow:              $box-shadow-sm !default;
 // scss-docs-end thumbnail-variables
 

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 4bc44ad2f0082517061a38009b5dd233b322bfd1..1d860b2c2c338f17a1db8cc83d5b2856984e24f1 100644 (file)
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -194,7 +194,7 @@
     width: 10rem;
     color: $gray-600;
     background-color: $gray-100;
-    border: $border-width solid $border-color;
+    border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color);
 
     > div {
       display: flex;
@@ -265,7 +265,7 @@
 
 .bd-example-border-utils-0 {
   [class^="border"] {
-    border: 1px solid $border-color;
+    border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color);
   }
 }