v5: Reuse box-shadow variables (#29023)

* Remove default kbd element shadow, simplify selector while here

* Add new -shadow-inset variable so our shadows match on .form-control's, .form-select's, and .progress's

* Reuse box-shadow variables for .dropdown's, .popover's, .toast's, .modal's, and .img-thumbnail's

diff --git a/scss/_code.scss b/scss/_code.scss
index 74b6e1c89be5057882650eb91148f69c7f7a93a3..f12fa01bf3b184152d90b91f396d9cc83af2a277 100644 (file)
--- a/scss/_code.scss
+++ b/scss/_code.scss
@@ -17,13 +17,12 @@ kbd {
   color: $kbd-color;
   background-color: $kbd-bg;
   @include border-radius($border-radius-sm);
-  @include box-shadow($kbd-box-shadow);
 
-  kbd {
+  // stylelint-disable-next-line no-duplicate-selectors
+  & {
     padding: 0;
     @include font-size(100%);
     font-weight: $nested-kbd-font-weight;
-    @include box-shadow(none);
   }
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 56bd143dbf4051d327cb9641665bee9ce544bddd..0b1191fe708fa3c3b695f619c0aa356676f5397b 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -234,6 +234,7 @@ $rounded-pill:                50rem !default;
 $box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
 $box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
 $box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
+$box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
 
 $component-active-color:      $white !default;
 $component-active-bg:         theme-color("primary") !default;
@@ -337,7 +338,6 @@ $mark-padding:                .2em !default;
 
 $dt-font-weight:              $font-weight-bold !default;
 
-$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
 $nested-kbd-font-weight:      $font-weight-bold !default;
 
 $list-inline-padding:         .5rem !default;
@@ -480,7 +480,7 @@ $input-disabled-bg:                     $gray-200 !default;
 $input-color:                           $gray-700 !default;
 $input-border-color:                    $gray-400 !default;
 $input-border-width:                    $input-btn-border-width !default;
-$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
+$input-box-shadow:                      $box-shadow-inset !default;
 
 $input-border-radius:                   $border-radius !default;
 $input-border-radius-lg:                $border-radius-lg !default;
@@ -594,7 +594,7 @@ $form-select-feedback-icon-size:          $input-height-inner-half $input-height
 $form-select-border-width:        $input-border-width !default;
 $form-select-border-color:        $input-border-color !default;
 $form-select-border-radius:       $border-radius !default;
-$form-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
+$form-select-box-shadow:          $box-shadow-inset !default;
 
 $form-select-focus-border-color:  $input-focus-border-color !default;
 $form-select-focus-width:         $input-focus-width !default;
@@ -615,7 +615,7 @@ $form-range-track-height:         .5rem !default;
 $form-range-track-cursor:         pointer !default;
 $form-range-track-bg:             $gray-300 !default;
 $form-range-track-border-radius:  1rem !default;
-$form-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;
+$form-range-track-box-shadow:     $box-shadow-inset !default;
 
 $form-range-thumb-width:                   1rem !default;
 $form-range-thumb-height:                  $form-range-thumb-width !default;
@@ -766,7 +766,7 @@ $dropdown-border-width:             $border-width !default;
 $dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
 $dropdown-divider-bg:               $gray-200 !default;
 $dropdown-divider-margin-y:         $nav-divider-margin-y !default;
-$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
+$dropdown-box-shadow:               $box-shadow !default;
 
 $dropdown-link-color:               $gray-900 !default;
 $dropdown-link-hover-color:         darken($gray-900, 5%) !default;
@@ -871,7 +871,7 @@ $popover-border-width:              $border-width !default;
 $popover-border-color:              rgba($black, .2) !default;
 $popover-border-radius:             $border-radius-lg !default;
 $popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
-$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
+$popover-box-shadow:                $box-shadow !default;
 
 $popover-header-bg:                 darken($popover-bg, 3%) !default;
 $popover-header-color:              $headings-color !default;
@@ -900,7 +900,7 @@ $toast-background-color:            rgba($white, .85) !default;
 $toast-border-width:                1px !default;
 $toast-border-color:                rgba(0, 0, 0, .1) !default;
 $toast-border-radius:               $border-radius !default;
-$toast-box-shadow:                  0 .25rem .75rem rgba($black, .1) !default;
+$toast-box-shadow:                  $box-shadow !default;
 
 $toast-header-color:                $gray-600 !default;
 $toast-header-background-color:     rgba($white, .85) !default;
@@ -933,8 +933,8 @@ $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-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width}) !default;
-$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
-$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !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;
@@ -978,7 +978,7 @@ $progress-height:                   1rem !default;
 $progress-font-size:                $font-size-base * .75 !default;
 $progress-bg:                       $gray-200 !default;
 $progress-border-radius:            $border-radius !default;
-$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
+$progress-box-shadow:               $box-shadow-inset !default;
 $progress-bar-color:                $white !default;
 $progress-bar-bg:                   theme-color("primary") !default;
 $progress-bar-animation-timing:     1s linear infinite !default;
@@ -1018,7 +1018,7 @@ $thumbnail-bg:                      $body-bg !default;
 $thumbnail-border-width:            $border-width !default;
 $thumbnail-border-color:            $gray-300 !default;
 $thumbnail-border-radius:           $border-radius !default;
-$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
+$thumbnail-box-shadow:              $box-shadow-sm !default;
 
 
 // Figures