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/Code.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,28 @@
   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)
-      );
-    }
+    // @if $enable-shadows {
+    //   @include box-shadow(
+    //     var(--pgn-elevation-form-control-select-border-base),
+    //     var(--pgn-elevation-form-control-select-border-focus)
+    //   );
+    // }
 
-    @else {
+    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);
-    }
+    // }
 
     &::-ms-value {
       // For visual consistency with other platforms/browsers,
@@ -383,7 +376,8 @@
   border: var(--pgn-size-form-control-file-width) solid var(--pgn-color-form-control-file-border-base);
 
   @include border-radius(var(--pgn-size-form-control-file-border-radius));
-  @include box-shadow(var(--pgn-elevation-form-control-file-base));
+  // @include box-shadow(var(--pgn-elevation-form-control-file-base));
+  box-shadow: var(--pgn-elevation-form-control-file-base);
 
   &::after {
     content: "Browse";
@@ -451,7 +445,8 @@
 
     @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));
+    // @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base));
+    box-shadow: var(--pgn-elevation-form-control-range-thumb-base);
 
     &:active {
       @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active));
@@ -467,7 +462,8 @@
     border-color: transparent;
 
     @include border-radius(var(--pgn-size-form-control-range-track-border-radius));
-    @include box-shadow(var(--pgn-elevation-form-control-range-track));
+    // @include box-shadow(var(--pgn-elevation-form-control-range-track));
+    box-shadow: var(--pgn-elevation-form-control-range-track);
   }
 
   &::-moz-range-thumb {
@@ -479,7 +475,8 @@
 
     @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));
+    // @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base));
+    box-shadow: var(--pgn-elevation-form-control-range-thumb-base);
 
     &:active {
       @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active));
@@ -495,7 +492,8 @@
     border-color: transparent; // Firefox specific?
 
     @include border-radius(var(--pgn-size-form-control-range-track-border-radius));
-    @include box-shadow(var(--pgn-elevation-form-control-range-track));
+    // @include box-shadow(var(--pgn-elevation-form-control-range-track));
+    box-shadow: var(--pgn-elevation-form-control-range-track);
   }
 
   &::-ms-thumb {
@@ -510,7 +508,8 @@
 
     @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));
+    // @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base));
+    box-shadow: var(--pgn-elevation-form-control-range-thumb-base);
 
     &:active {
       @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active));
@@ -526,7 +525,8 @@
     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));
+    // @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/Image.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/custom-media-breakpoints.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Mon, 05 Jun 2023 02:30:54 GMT
+ * Generated on Fri, 18 Aug 2023 12:26:04 GMT
  */
 
 @custom-media --min-pgn-size-breakpoint-xs (min-width: 0);

styles/css/core/variables.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 05 Jul 2023 14:14:00 GMT
+ * Generated on Fri, 18 Aug 2023 12:26:04 GMT
  */
 
 :root {

styles/css/themes/light/utility-classes.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Mon, 05 Jun 2023 02:30:54 GMT
+ * Generated on Fri, 18 Aug 2023 12:26:05 GMT
  */
 
 .bg-accent-a {

styles/css/themes/light/variables.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 09 Jun 2023 07:34:35 GMT
+ * Generated on Fri, 18 Aug 2023 12:26:05 GMT
  */
 
 :root {
@@ -223,7 +223,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;
@@ -249,17 +249,18 @@
   --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-base: inset 0 1px 1px rgba(0, 0, 0, .075);
-  --pgn-elevation-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25);
+  --pgn-elevation-form-input-focus: none;
+  --pgn-elevation-form-input-base: none;
+  --pgn-elevation-code-kbd-box-shadow: none;
   --pgn-elevation-btn-box-shadow-active: none;
   --pgn-elevation-btn-box-shadow-base: none;
   --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-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-color-action-default-accent-b: #FFE755FF;
   --pgn-color-action-default-accent-a: #0095C6FF;
   --pgn-color-action-default-dark-base: #142018FF;
@@ -595,6 +596,7 @@
   --pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
   --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base);
   --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-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm);
@@ -1115,7 +1117,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;
@@ -1454,7 +1455,6 @@
   --pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23178253FF'/%3e%3c/svg%3e");
   --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: 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='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23C32D3AFF'/></svg>");
   --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: 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='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23178253FF'/></svg>");
-  --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-color-pagination-border-active: var(--pgn-color-pagination-bg-active);
   --pgn-color-pagination-text-base: var(--pgn-color-link-base);

styles/scss/core/_variables.scss

@@ -320,7 +320,7 @@ $escaped-characters: (
 
 $enable-caret:                                true !default;
 $enable-rounded:                              true !default;
-$enable-shadows:                              true !default;
+// $enable-shadows:                              true !default;
 $enable-gradients:                            false !default;
 $enable-transitions:                          true !default;
 $enable-prefers-reduced-motion-media-query:   true !default;

tokens/src/themes/light/components/Code.json

@@ -13,7 +13,7 @@
     "code": {
       "kbd": {
         "box-shadow": {
-          "value": "inset 0 -.1rem 0 rgba(0, 0, 0, .25)",
+          "value": "none",
           "type": "shadow",
           "source": "$kbd-box-shadow"
         }

tokens/src/themes/light/components/Dropdown.json

@@ -30,7 +30,7 @@
   },
   "elevation": {
     "dropdown": {
-      "box-shadow": { "value": "0 .5rem 1rem rgba(0, 0, 0, .175)", "type": "shadow", "source": "$dropdown-box-shadow" }
+      "box-shadow": { "value": "none", "type": "shadow", "source": "$dropdown-box-shadow" }
     }
   }
 }