fix: remove $enable-shadows SCSS flag (#2423)

* refactor: fixed spacing calculations and box-shadows

* refactor: removed flag to switch shadows

src/Button/button-group.scss

@@ -78,10 +78,10 @@
 }
 
 .btn-group.show .dropdown-toggle {
-  @include box-shadow(var(--pgn-elevation-btn-box-shadow-active));
+  box-shadow: var(--pgn-elevation-btn-box-shadow-active);
 
   &.btn-link {
-    @include box-shadow(none);
+    box-shadow: none;
   }
 }
 

src/Code/index.scss

@@ -13,17 +13,17 @@ kbd {
   padding: var(--pgn-spacing-code-kbd-padding-y) var(--pgn-spacing-code-kbd-padding-x);
   color: var(--pgn-color-code-kbd-base);
   background-color: var(--pgn-color-code-kbd-bg);
+  box-shadow: var(--pgn-elevation-code-kbd-box-shadow);
 
   @include font-size(var(--pgn-typography-code-kbd-font-size));
   @include border-radius(var(--pgn-size-border-radius-sm));
-  @include box-shadow(var(--pgn-elevation-code-kbd-box-shadow));
 
   kbd {
     padding: 0;
     font-weight: var(--pgn-typography-code-kbd-nested-font-weight);
+    box-shadow: none;
 
     @include font-size(100%);
-    @include box-shadow(none);
   }
 }
 

src/Dropdown/dropdown-bootstrap.scss

@@ -27,10 +27,10 @@
   background-color: var(--pgn-color-dropdown-bg);
   background-clip: padding-box;
   border: var(--pgn-size-dropdown-border-width) solid var(--pgn-color-dropdown-border);
+  box-shadow: var(--pgn-elevation-dropdown-box-shadow);
 
   @include font-size(var(--pgn-typography-dropdown-font-size));
   @include border-radius(var(--pgn-size-dropdown-border-radius-base));
-  @include box-shadow(var(--pgn-elevation-dropdown-box-shadow));
 
   &[x-placement^="top"],
   &[x-placement^="right"],

src/Form/_bootstrap-custom-forms.scss

@@ -33,20 +33,13 @@
   &:checked ~ .custom-control-label::before {
     color: var(--pgn-color-form-control-indicator-checked-base);
     border-color: var(--pgn-color-form-control-indicator-checked-border-base);
+    box-shadow: var(--pgn-elevation-form-control-indicator-checked-base);
 
     @include gradient-bg(var(--pgn-color-form-control-indicator-checked-bg-base));
-    @include box-shadow(var(--pgn-elevation-form-control-indicator-checked-base));
   }
 
   &:focus ~ .custom-control-label::before {
-    // the mixin is not used here to make sure there is feedback
-    @if $enable-shadows {
-      box-shadow: var(--pgn-elevation-form-input-base), var(--pgn-elevation-form-control-indicator-checked-focus);
-    }
-
-    @else {
-      box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus);
-    }
+    box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus);
   }
 
   &:focus:not(:checked) ~ .custom-control-label::before {
@@ -57,8 +50,7 @@
     color: var(--pgn-color-form-control-indicator-active-base);
     background-color: var(--pgn-color-form-control-indicator-active-bg);
     border-color: var(--pgn-color-form-control-indicator-active-border);
-
-    @include box-shadow(var(--pgn-elevation-form-control-indicator-active));
+    box-shadow: var(--pgn-elevation-form-control-indicator-active);
   }
 
   // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
@@ -98,8 +90,7 @@
     pointer-events: none;
     background-color: var(--pgn-color-form-control-indicator-bg-base);
     border: var(--pgn-size-form-control-indicator-border-width) solid var(--pgn-color-form-control-indicator-border);
-
-    @include box-shadow(var(--pgn-elevation-form-control-indicator-base));
+    box-shadow: var(--pgn-elevation-form-control-indicator-base);
   }
 
   // Foreground (icon)
@@ -135,9 +126,9 @@
   .custom-control-input:indeterminate ~ .custom-control-label {
     &::before {
       border-color: var(--pgn-color-form-control-checkbox-indicator-indeterminate-border);
+      box-shadow: var(--pgn-elevation-form-control-checkbox-indicator-indeterminate);
 
       @include gradient-bg(var(--pgn-color-form-control-checkbox-indicator-indeterminate-bg));
-      @include box-shadow(var(--pgn-elevation-form-control-checkbox-indicator-indeterminate));
     }
 
     &::after {
@@ -250,26 +241,15 @@
   background: var(--pgn-color-form-control-select-bg-base) var(--pgn-other-content-form-control-select-bg);
   border: var(--pgn-size-form-control-select-border-width-base) solid var(--pgn-color-form-control-select-border-base);
   appearance: none;
+  box-shadow: var(--pgn-elevation-form-control-select-border-base);
 
   @include font-size(var(--pgn-typography-form-control-select-font-size-base));
   @include border-radius(var(--pgn-size-form-control-select-border-radius),0);
-  @include box-shadow(var(--pgn-elevation-form-control-select-border-base));
 
   &:focus {
     border-color: var(--pgn-color-form-control-select-border-focus);
     outline: 0;
-
-    @if $enable-shadows {
-      @include box-shadow(
-        var(--pgn-elevation-form-control-select-border-base),
-        var(--pgn-elevation-form-control-select-border-focus)
-      );
-    }
-
-    @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: var(--pgn-elevation-form-control-select-border-focus);
-    }
+    box-shadow: var(--pgn-elevation-form-control-select-border-focus);
 
     &::-ms-value {
       // For visual consistency with other platforms/browsers,
@@ -381,9 +361,9 @@
   color: var(--pgn-color-form-control-file-base);
   background-color: var(--pgn-color-form-control-file-bg-base);
   border: var(--pgn-size-form-control-file-width) solid var(--pgn-color-form-control-file-border-base);
+  box-shadow: var(--pgn-elevation-form-control-file-base);
 
   @include border-radius(var(--pgn-size-form-control-file-border-radius));
-  @include box-shadow(var(--pgn-elevation-form-control-file-base));
 
   &::after {
     content: "Browse";
@@ -448,10 +428,10 @@
     border: var(--pgn-size-form-control-range-thumb-border-base);
     appearance: none;
     transition: var(--pgn-transition-form-control);
+    box-shadow: var(--pgn-elevation-form-control-range-thumb-base);
 
     @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-base));
     @include border-radius(var(--pgn-size-form-control-range-thumb-border-radius));
-    @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base));
 
     &:active {
       @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active));
@@ -465,9 +445,9 @@
     cursor: var(--pgn-other-form-control-range-track-cursor);
     background-color: var(--pgn-color-form-control-range-track-bg);
     border-color: transparent;
+    box-shadow: var(--pgn-elevation-form-control-range-track);
 
     @include border-radius(var(--pgn-size-form-control-range-track-border-radius));
-    @include box-shadow(var(--pgn-elevation-form-control-range-track));
   }
 
   &::-moz-range-thumb {
@@ -476,10 +456,10 @@
     border: var(--pgn-size-form-control-range-thumb-border-base);
     appearance: none;
     transition: var(--pgn-transition-form-control);
+    box-shadow: var(--pgn-elevation-form-control-range-thumb-base);
 
     @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-base));
     @include border-radius(var(--pgn-size-form-control-range-thumb-border-radius));
-    @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base));
 
     &:active {
       @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active));
@@ -493,9 +473,9 @@
     cursor: var(--pgn-other-form-control-range-track-cursor);
     background-color: var(--pgn-color-form-control-range-track-bg);
     border-color: transparent; // Firefox specific?
+    box-shadow: var(--pgn-elevation-form-control-range-track);
 
     @include border-radius(var(--pgn-size-form-control-range-track-border-radius));
-    @include box-shadow(var(--pgn-elevation-form-control-range-track));
   }
 
   &::-ms-thumb {
@@ -507,10 +487,10 @@
     border: var(--pgn-size-form-control-range-thumb-border-base);
     appearance: none;
     transition: var(--pgn-transition-form-control);
+    box-shadow: var(--pgn-elevation-form-control-range-thumb-base);
 
     @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-base));
     @include border-radius(var(--pgn-size-form-control-range-thumb-border-radius));
-    @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base));
 
     &:active {
       @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active));
@@ -525,8 +505,7 @@
     background-color: transparent;
     border-color: transparent;
     border-width: calc(var(--pgn-size-form-control-range-thumb-height) * .5);
-
-    @include box-shadow(var(--pgn-elevation-form-control-range-track));
+    box-shadow: var(--pgn-elevation-form-control-range-track);
   }
 
   &::-ms-fill-lower {

src/Form/_bootstrap-forms.scss

@@ -21,10 +21,10 @@
   background-clip: padding-box;
   border: var(--pgn-size-form-input-width-border) solid var(--pgn-color-form-input-border);
   transition: var(--pgn-transition-form-input);
+  box-shadow: var(--pgn-elevation-form-input-base);
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius(var(--pgn-size-form-input-radius-border-base), 0);
-  @include box-shadow(var(--pgn-elevation-form-input-base));
 
   // Unstyle the caret on `<select>`s in IE10+.
   &::-ms-expand {

src/Form/_mixins.scss

@@ -50,15 +50,7 @@
     background-color: var(--pgn-color-form-input-focus-bg);
     border-color: var(--pgn-color-form-input-focus-border);
     outline: 0;
-
-    @if $enable-shadows {
-      @include box-shadow(var(--pgn-elevation-form-input-base), var(--pgn-elevation-form-input-focus));
-    }
-
-    @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: var(--pgn-elevation-form-input-focus);
-    }
+    box-shadow: var(--pgn-elevation-form-input-focus);
   }
 
   @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);

src/Image/index.scss

@@ -23,9 +23,9 @@
   padding: var(--pgn-spacing-image-thumbnail-padding);
   background-color: var(--pgn-color-image-thumbnail-bg);
   border: var(--pgn-size-image-thumbnail-border-width) solid var(--pgn-color-image-thumbnail-border);
+  box-shadow: var(--pgn-elevation-image-thumbnail-box-shadow);
 
   @include border-radius(var(--pgn-size-image-thumbnail-border-radius));
-  @include box-shadow(var(--pgn-elevation-image-thumbnail-box-shadow));
 
   // Keep them at most 100% wide
   @include img-fluid();

src/Popover/popover-bootstrap.scss

@@ -13,9 +13,9 @@
   background-color: var(--pgn-color-popover-bg);
   background-clip: padding-box;
   border: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-border);
+  box-shadow: var(--pgn-elevation-popover-box-shadow);
 
   @include border-radius(var(--pgn-size-popover-border-radius));
-  @include box-shadow(var(--pgn-elevation-popover-box-shadow));
 
   .arrow {
     position: absolute;

src/ProgressBar/bootstrap-progress.scss

@@ -11,10 +11,10 @@
   overflow: hidden;
   line-height: 0;
   background-color: var(--pgn-color-progress-bar-bg);
+  box-shadow: var(--pgn-elevation-progress-bar-box-shadow);
 
   @include font-size(var(--pgn-typography-progress-bar-font-size));
   @include border-radius(var(--pgn-size-progress-bar-border-radius));
-  @include box-shadow(var(--pgn-elevation-progress-bar-box-shadow));
 }
 
 .progress-bar {

styles/css/core/variables.css

@@ -459,17 +459,17 @@
   --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
   --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base);
   --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family);
-  --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4rem);
-  --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2rem);
-  --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25rem);
-  --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75rem);
-  --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375rem);
-  --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5rem);
-  --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3rem);
-  --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5rem);
+  --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4);
+  --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2);
+  --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25);
+  --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75);
+  --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375);
+  --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5);
+  --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3);
+  --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5);
   --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5rem);
-  --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25rem);
+  --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5);
+  --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25);
   --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
   --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
   --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);

styles/css/themes/light/variables.css

@@ -216,7 +216,7 @@
   --pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
   --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
   --pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
-  --pgn-elevation-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+  --pgn-elevation-image-thumbnail-box-shadow: none;
   --pgn-elevation-icon-button-box-shadow-black-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-black-active: none;
   --pgn-elevation-icon-button-box-shadow-dark-inverse-active: none;
@@ -238,21 +238,22 @@
   --pgn-elevation-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25);
   --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))  drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
   --pgn-elevation-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15);
-  --pgn-elevation-form-control-select-border-base: inset 0 1px 2px rgba(0, 0, 0, .075);
-  --pgn-elevation-form-control-range-thumb-base: 0 .1rem .25rem rgba(0, 0, 0, .1);
-  --pgn-elevation-form-control-range-track: inset 0 .25rem .25rem rgba(0, 0, 0, .1);
+  --pgn-elevation-form-control-select-border-base: none;
+  --pgn-elevation-form-control-range-thumb-base: none;
+  --pgn-elevation-form-control-range-track: none;
   --pgn-elevation-form-control-checkbox-indicator-indeterminate: none;
   --pgn-elevation-form-control-indicator-active: none;
   --pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1);
   --pgn-elevation-form-control-indicator-checked-base: none;
+  --pgn-elevation-form-input-focus: none;
   --pgn-elevation-form-input-base: inset 0 1px 1px rgba(0, 0, 0, .075);
   --pgn-elevation-btn-box-shadow-active: none;
   --pgn-elevation-btn-box-shadow-base: none;
   --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
   --pgn-elevation-progress-bar-box-shadow: none;
-  --pgn-elevation-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
+  --pgn-elevation-popover-box-shadow: none;
   --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
-  --pgn-elevation-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
+  --pgn-elevation-dropdown-box-shadow: none;
   --pgn-other-tooltip-opacity: 1;
   --pgn-other-search-field-disabled-opacity: .3;
   --pgn-other-modal-opacity: .5;
@@ -602,6 +603,7 @@
   --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm);
   --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white);
   --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
+  --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
   --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
   --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base);
   --pgn-border-color-nav-tabs-link-border-active: var(--pgn-color-primary-500);
@@ -1122,7 +1124,6 @@
   --pgn-color-bg-active: var(--pgn-color-primary-500);
   --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
   --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
-  --pgn-elevation-form-input-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
   --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
   --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border);
   --pgn-color-action-default-danger-900: #60161DFF;
@@ -1455,7 +1456,6 @@
   --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100);
   --pgn-color-table-caption: var(--pgn-color-text-muted);
   --pgn-color-input-btn-focus: var(--pgn-color-input-focus);
-  --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
   --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
   --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="%23454545FF"/></svg>');
   --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e");