From 2a844481c9f18750d4c9da3dde1cb8434639f57a Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Fri, 15 Sep 2023 12:22:09 +0300
Subject: [PATCH] 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                  |  4 +-
 src/Code/index.scss                           |  4 +-
 src/Dropdown/dropdown-bootstrap.scss          |  2 +-
 src/Form/_bootstrap-custom-forms.scss         | 49 +++++-------------
 src/Form/_bootstrap-forms.scss                |  2 +-
 src/Form/_mixins.scss                         | 10 +---
 src/Image/index.scss                          |  2 +-
 src/Popover/popover-bootstrap.scss            |  2 +-
 src/ProgressBar/bootstrap-progress.scss       |  2 +-
 styles/css/core/variables.css                 | 20 ++++----
 styles/css/themes/light/variables.css         | 16 +++---
 styles/scss/core/_variables.scss              | 51 +++++++++----------
 tokens/src/core/global/spacing.json           | 20 ++++----
 tokens/src/themes/light/components/Code.json  |  2 +-
 .../src/themes/light/components/Dropdown.json |  2 +-
 .../light/components/Form/elevation.json      | 10 ++--
 tokens/src/themes/light/components/Image.json |  2 +-
 .../src/themes/light/components/Popover.json  |  2 +-
 www/src/templates/component-page-template.tsx |  2 +-
 19 files changed, 87 insertions(+), 117 deletions(-)

diff --git a/src/Button/button-group.scss b/src/Button/button-group.scss
index cfb13559c5..89b4cd24bb 100644
--- a/src/Button/button-group.scss
+++ b/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;
   }
 }
 
diff --git a/src/Code/index.scss b/src/Code/index.scss
index 077d4f65bd..7de34b6c91 100644
--- a/src/Code/index.scss
+++ b/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);
   }
 }
 
diff --git a/src/Dropdown/dropdown-bootstrap.scss b/src/Dropdown/dropdown-bootstrap.scss
index 97f165b8c7..49a4c052f1 100644
--- a/src/Dropdown/dropdown-bootstrap.scss
+++ b/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"],
diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss
index f1b7fb04b2..b462f84da0 100644
--- a/src/Form/_bootstrap-custom-forms.scss
+++ b/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 {
diff --git a/src/Form/_bootstrap-forms.scss b/src/Form/_bootstrap-forms.scss
index 42aa6766e3..f98cae533c 100644
--- a/src/Form/_bootstrap-forms.scss
+++ b/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 {
diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss
index bcec5d3f0a..6493a51fa9 100644
--- a/src/Form/_mixins.scss
+++ b/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);
diff --git a/src/Image/index.scss b/src/Image/index.scss
index 795eeb7ebe..513b613706 100644
--- a/src/Image/index.scss
+++ b/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();
diff --git a/src/Popover/popover-bootstrap.scss b/src/Popover/popover-bootstrap.scss
index 93b754edb8..5dbdada252 100644
--- a/src/Popover/popover-bootstrap.scss
+++ b/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;
diff --git a/src/ProgressBar/bootstrap-progress.scss b/src/ProgressBar/bootstrap-progress.scss
index b92b521f91..27bee9a446 100644
--- a/src/ProgressBar/bootstrap-progress.scss
+++ b/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 {
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index 199b3daf41..90dbe01f1b 100644
--- a/styles/css/core/variables.css
+++ b/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);
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index 17e2900005..2bef05fbf2 100644
--- a/styles/css/themes/light/variables.css
+++ b/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");
diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss
index 592c0d05ba..26261f9485 100644
--- a/styles/scss/core/_variables.scss
+++ b/styles/scss/core/_variables.scss
@@ -320,7 +320,6 @@ $escaped-characters: (
 
 $enable-caret:                                true !default;
 $enable-rounded:                              true !default;
-$enable-shadows:                              false !default;
 $enable-gradients:                            false !default;
 $enable-transitions:                          true !default;
 $enable-prefers-reduced-motion-media-query:   true !default;
@@ -508,23 +507,23 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5) !default;
 @mixin pgn-box-shadow($level, $side) {
   @if $side == "down" {
     @if $level == 1 {
-      box-shadow: $box-shadow-down-1;
+      box-shadow: var(--pgn-elevation-box-shadow-down-1);
     }
 
     @else if $level == 2 {
-      box-shadow: $box-shadow-down-2;
+      box-shadow: var(--pgn-elevation-box-shadow-down-2);
     }
 
     @else if $level == 3 {
-      box-shadow: $box-shadow-down-3;
+      box-shadow: var(--pgn-elevation-box-shadow-down-3);
     }
 
     @else if $level == 4 {
-      box-shadow: $box-shadow-down-4;
+      box-shadow: var(--pgn-elevation-box-shadow-down-4);
     }
 
     @else if $level == 5 {
-      box-shadow: $box-shadow-down-5;
+      box-shadow: var(--pgn-elevation-box-shadow-down-5);
     }
 
     @else {
@@ -534,23 +533,23 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5) !default;
 
   @if $side == "left" {
     @if $level == 1 {
-      box-shadow: $box-shadow-left-1;
+      box-shadow: var(--pgn-elevation-box-shadow-left-1);
     }
 
     @else if $level == 2 {
-      box-shadow: $box-shadow-left-2;
+      box-shadow: var(--pgn-elevation-box-shadow-left-2);
     }
 
     @else if $level == 3 {
-      box-shadow: $box-shadow-left-3;
+      box-shadow: var(--pgn-elevation-box-shadow-left-3);
     }
 
     @else if $level == 4 {
-      box-shadow: $box-shadow-left-4;
+      box-shadow: var(--pgn-elevation-box-shadow-left-4);
     }
 
     @else if $level == 5 {
-      box-shadow: $box-shadow-left-5;
+      box-shadow: var(--pgn-elevation-box-shadow-left-5);
     }
 
     @else {
@@ -560,23 +559,23 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5) !default;
 
   @if $side == "up" {
     @if $level == 1 {
-      box-shadow: $box-shadow-up-1;
+      box-shadow: var(--pgn-elevation-box-shadow-up-1);
     }
 
     @else if $level == 2 {
-      box-shadow: $box-shadow-up-2;
+      box-shadow: var(--pgn-elevation-box-shadow-up-2);
     }
 
     @else if $level == 3 {
-      box-shadow: $box-shadow-up-3;
+      box-shadow: var(--pgn-elevation-box-shadow-up-3);
     }
 
     @else if $level == 4 {
-      box-shadow: $box-shadow-up-4;
+      box-shadow: var(--pgn-elevation-box-shadow-up-4);
     }
 
     @else if $level == 5 {
-      box-shadow: $box-shadow-up-5;
+      box-shadow: var(--pgn-elevation-box-shadow-up-5);
     }
 
     @else {
@@ -586,23 +585,23 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5) !default;
 
   @if $side == "right" {
     @if $level == 1 {
-      box-shadow: $box-shadow-right-1;
+      box-shadow: var(--pgn-elevation-box-shadow-right-1);
     }
 
     @else if $level == 2 {
-      box-shadow: $box-shadow-right-2;
+      box-shadow: var(--pgn-elevation-box-shadow-right-2);
     }
 
     @else if $level == 3 {
-      box-shadow: $box-shadow-right-3;
+      box-shadow: var(--pgn-elevation-box-shadow-right-3);
     }
 
     @else if $level == 4 {
-      box-shadow: $box-shadow-right-4;
+      box-shadow: var(--pgn-elevation-box-shadow-right-4);
     }
 
     @else if $level == 5 {
-      box-shadow: $box-shadow-right-5;
+      box-shadow: var(--pgn-elevation-box-shadow-right-5);
     }
 
     @else {
@@ -612,23 +611,23 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5) !default;
 
   @if $side == "centered" {
     @if $level == 1 {
-      box-shadow: $box-shadow-centered-1;
+      box-shadow: var(--pgn-elevation-box-shadow-centered-1);
     }
 
     @else if $level == 2 {
-      box-shadow: $box-shadow-centered-2;
+      box-shadow: var(--pgn-elevation-box-shadow-centered-2);
     }
 
     @else if $level == 3 {
-      box-shadow: $box-shadow-centered-3;
+      box-shadow: var(--pgn-elevation-box-shadow-centered-3);
     }
 
     @else if $level == 4 {
-      box-shadow: $box-shadow-centered-4;
+      box-shadow: var(--pgn-elevation-box-shadow-centered-4);
     }
 
     @else if $level == 5 {
-      box-shadow: $box-shadow-centered-5;
+      box-shadow: var(--pgn-elevation-box-shadow-centered-5);
     }
 
     @else {
diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json
index 467fcba172..1f690e8a3a 100644
--- a/tokens/src/core/global/spacing.json
+++ b/tokens/src/core/global/spacing.json
@@ -3,17 +3,17 @@
     "spacer": {
       "base": { "value": "1rem", "type": "dimension", "source": "$spacer", "description": "Basic space value" },
       "0": { "value": "0", "type": "dimension", "description": "Space value of level 0" },
-      "1": { "value": "calc({spacing.spacer.base} * .25rem)", "type": "dimension", "description": "Space value of level 1" },
-      "1,5": { "value": "calc({spacing.spacer.base} * .375rem)", "type": "dimension", "description": "Space value of level 1.5" },
-      "2": { "value": "calc({spacing.spacer.base} * .5rem)", "type": "dimension", "description": "Space value of level 2" },
-      "2,5": { "value": "calc({spacing.spacer.base} * .75rem)", "type": "dimension", "description": "Space value of level 2.5" },
+      "1": { "value": "calc({spacing.spacer.base} * .25)", "type": "dimension", "description": "Space value of level 1" },
+      "1,5": { "value": "calc({spacing.spacer.base} * .375)", "type": "dimension", "description": "Space value of level 1.5" },
+      "2": { "value": "calc({spacing.spacer.base} * .5)", "type": "dimension", "description": "Space value of level 2" },
+      "2,5": { "value": "calc({spacing.spacer.base} * .75)", "type": "dimension", "description": "Space value of level 2.5" },
       "3": { "value": "{spacing.spacer.base}", "type": "dimension", "description": "Space value of level 3" },
-      "3,5": { "value": "calc({spacing.spacer.base} * 1.25rem)", "type": "dimension", "description": "Space value of level 3.5"},
-      "4": { "value": "calc({spacing.spacer.base} * 1.5rem)", "type": "dimension", "description": "Space value of level 4" },
-      "4,5": { "value": "calc({spacing.spacer.base} * 2rem)", "type": "dimension", "description": "Space value of level 4.5" },
-      "5": { "value": "calc({spacing.spacer.base} * 3rem)", "type": "dimension", "description": "Space value of level 5" },
-      "5,5": { "value": "calc({spacing.spacer.base} * 4rem)", "type": "dimension", "description": "Space value of level 5.5"},
-      "6": { "value": "calc({spacing.spacer.base} * 5rem)", "type": "dimension", "description": "Space value of level 6" }
+      "3,5": { "value": "calc({spacing.spacer.base} * 1.25)", "type": "dimension", "description": "Space value of level 3.5"},
+      "4": { "value": "calc({spacing.spacer.base} * 1.5)", "type": "dimension", "description": "Space value of level 4" },
+      "4,5": { "value": "calc({spacing.spacer.base} * 2)", "type": "dimension", "description": "Space value of level 4.5" },
+      "5": { "value": "calc({spacing.spacer.base} * 3)", "type": "dimension", "description": "Space value of level 5" },
+      "5,5": { "value": "calc({spacing.spacer.base} * 4)", "type": "dimension", "description": "Space value of level 5.5"},
+      "6": { "value": "calc({spacing.spacer.base} * 5)", "type": "dimension", "description": "Space value of level 6" }
     },
     "label": {
       "margin-bottom": { "value": ".5rem", "type": "dimension", "description": "Margin bottom for label." }
diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json
index a14d475647..bfdf221bde 100644
--- a/tokens/src/themes/light/components/Code.json
+++ b/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"
         }
diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json
index 9c9ae91fda..088debae77 100644
--- a/tokens/src/themes/light/components/Dropdown.json
+++ b/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" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
index cacf533819..db58f17b7b 100644
--- a/tokens/src/themes/light/components/Form/elevation.json
+++ b/tokens/src/themes/light/components/Form/elevation.json
@@ -2,9 +2,9 @@
   "elevation": {
     "form": {
       "input": {
-        "base": { "value": "inset 0 1px 1px rgba(0, 0, 0, .075)", "type": "shadow", "source": "$input-box-shadow" },
+        "base": { "value": "none", "type": "shadow", "source": "$input-box-shadow" },
         "focus": {
-          "value": "{elevation.input.btn-focus.box-shadow}",
+          "value": "none",
           "type": "shadow",
           "source": "$input-focus-box-shadow"
         }
@@ -35,13 +35,13 @@
         },
         "range": {
           "track": {
-            "value": "inset 0 .25rem .25rem rgba(0, 0, 0, .1)",
+            "value": "none",
             "type": "shadow",
             "source": "$custom-range-track-box-shadow"
           },
           "thumb": {
             "base": {
-              "value": "0 .1rem .25rem rgba(0, 0, 0, .1)", "type": "shadow", "source": "$custom-range-thumb-box-shadow"
+              "value": "none", "type": "shadow", "source": "$custom-range-thumb-box-shadow"
             },
             "focus": {
               "value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}",
@@ -61,7 +61,7 @@
         "select": {
           "border": {
             "base": {
-              "value": "inset 0 1px 2px rgba(0, 0, 0, .075)", "type": "shadow", "source": "$custom-select-box-shadow"
+              "value": "none", "type": "shadow", "source": "$custom-select-box-shadow"
             },
             "focus": {
               "value": "{elevation.input.btn-focus.box-shadow}",
diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json
index aab2f96f87..bd743ec210 100644
--- a/tokens/src/themes/light/components/Image.json
+++ b/tokens/src/themes/light/components/Image.json
@@ -11,7 +11,7 @@
   "elevation": {
     "image": {
       "thumbnail": {
-        "box-shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)", "type": "shadow", "source": "$thumbnail-box-shadow" }
+        "box-shadow": { "value": "none", "type": "shadow", "source": "$thumbnail-box-shadow" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json
index 2b72cf2340..013ce92c0b 100644
--- a/tokens/src/themes/light/components/Popover.json
+++ b/tokens/src/themes/light/components/Popover.json
@@ -46,7 +46,7 @@
   "elevation": {
     "popover": {
       "box-shadow": {
-        "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
+        "value": "none",
         "type": "shadow",
         "source": "$popover-box-shadow"
       }
diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx
index c4331e09f3..56156f1875 100644
--- a/www/src/templates/component-page-template.tsx
+++ b/www/src/templates/component-page-template.tsx
@@ -142,7 +142,7 @@ export default function PageTemplate({
         <MDXProvider components={shortcodes}>
           <MDXRenderer>{mdx.body}</MDXRenderer>
         </MDXProvider>
-        {!!cssVariablesData.length && (
+        {!!cssVariablesData?.length && (
           <div className="mb-5">
             <h2 className="mb-4 pgn-doc__heading" id={cssVariablesUrl}>
               {cssVariablesTitle}