diff --git a/.stylelintrc.json b/.stylelintrc.json
index 6abc524964..ff0515b89f 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -34,6 +34,7 @@
     "color-function-notation": "legacy",
     "value-keyword-case": ["lower", {
       "ignoreProperties": ["/font-family/"]
-    }]
+    }],
+    "custom-property-empty-line-before": null
   }
 }
diff --git a/lib/build-tokens.js b/lib/build-tokens.js
index 3036f088cf..e0f1a7f689 100755
--- a/lib/build-tokens.js
+++ b/lib/build-tokens.js
@@ -154,13 +154,13 @@ async function buildTokensCommand(commandArgs) {
   ];
 
   // Build tokens for each configuration
-  await Promise.all(configs.map(async ({ config, isThemeVariant, themeVariant }) => {
+  await Promise.all(configs.map(async ({ config, themeVariant }) => {
     const sd = new StyleDictionary(config);
     await sd.cleanAllPlatforms();
     await sd.buildAllPlatforms();
     createIndexCssFile({
       buildDir,
-      isThemeVariant: !!isThemeVariant,
+      isThemeVariant: !!themeVariant,
       themeVariant,
     });
   }));
diff --git a/src/Annotation/index.scss b/src/Annotation/index.scss
index a398ce1cdc..19519cd00a 100644
--- a/src/Annotation/index.scss
+++ b/src/Annotation/index.scss
@@ -1,10 +1,7 @@
 @import "mixins";
 
-.pgn__annotation {
-  padding: var(--pgn-spacing-annotation-padding);
-  border-radius: var(--pgn-size-annotation-border-radius);
-  max-width: var(--pgn-size-annotation-max-width);
-  filter:
+:root {
+  --pgn-elevation-annotation-box-shadow:
     drop-shadow(
       var(--pgn-elevation-annotation-box-shadow-1-offset-x)
       var(--pgn-elevation-annotation-box-shadow-1-offset-y)
@@ -17,6 +14,13 @@
       var(--pgn-elevation-annotation-box-shadow-2-blur)
       var(--pgn-elevation-annotation-box-shadow-2-color)
     );
+}
+
+.pgn__annotation {
+  padding: var(--pgn-spacing-annotation-padding);
+  border-radius: var(--pgn-size-annotation-border-radius);
+  max-width: var(--pgn-size-annotation-max-width);
+  filter: var(--pgn-elevation-annotation-box-shadow);
   word-wrap: break-word;
   position: relative;
   display: inline-block;
diff --git a/src/Card/index.scss b/src/Card/index.scss
index 11a2607f5b..383726a8cf 100644
--- a/src/Card/index.scss
+++ b/src/Card/index.scss
@@ -353,15 +353,7 @@ a.pgn__card {
       width: var(--pgn-size-card-logo-width);
       height: var(--pgn-size-card-logo-height);
       border-radius: var(--pgn-size-card-border-radius-logo);
-      box-shadow:
-        var(--pgn-elevation-box-shadow-level-1-1-offset-y)
-        var(--pgn-elevation-box-shadow-level-1-1-offset-x)
-        var(--pgn-elevation-box-shadow-level-1-1-blur)
-        var(--pgn-elevation-box-shadow-level-1-1-color),
-        var(--pgn-elevation-box-shadow-level-1-2-offset-y)
-        var(--pgn-elevation-box-shadow-level-1-2-offset-x)
-        var(--pgn-elevation-box-shadow-level-1-2-blur)
-        var(--pgn-elevation-box-shadow-level-1-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-level-1);
       padding: map_get($spacers, 2);
       background-color: var(--pgn-color-white);
       display: none;
diff --git a/src/Carousel/index.scss b/src/Carousel/index.scss
index f477c7fb0a..6ec582f98d 100644
--- a/src/Carousel/index.scss
+++ b/src/Carousel/index.scss
@@ -1,3 +1,11 @@
+:root {
+  --pgn-transition-carousel-base:
+    var(--pgn-transition-carousel-base-property)
+    var(--pgn-transition-carousel-base-duration)
+    var(--pgn-transition-carousel-base-timing-function)
+    var(--pgn-transition-carousel-base-delay);
+}
+
 .carousel {
   position: relative;
 }
@@ -21,11 +29,7 @@
   width: 100%;
   margin-right: -100%;
   backface-visibility: hidden;
-  transition:
-    var(--pgn-transition-carousel-base-property)
-    var(--pgn-transition-carousel-base-duration)
-    var(--pgn-transition-carousel-base-timing-function)
-    var(--pgn-transition-carousel-base-delay);
+  transition: var(--pgn-transition-carousel-base);
 }
 
 .carousel-item.active,
@@ -62,11 +66,7 @@
   .active.carousel-item-right {
     z-index: 0;
     opacity: 0;
-    transition:
-      opacity 0s var(--pgn-transition-carousel-base-property)
-      var(--pgn-transition-carousel-base-duration)
-      var(--pgn-transition-carousel-base-timing-function)
-      var(--pgn-transition-carousel-base-delay);
+    transition: opacity 0s var(--pgn-transition-carousel-base);
   }
 }
 
diff --git a/src/CloseButton/index.scss b/src/CloseButton/index.scss
index a74b5eded6..750f47d3f3 100644
--- a/src/CloseButton/index.scss
+++ b/src/CloseButton/index.scss
@@ -1,13 +1,17 @@
+:root {
+  --pgn-elevation-close-button-text-shadow:
+    var(--pgn-elevation-close-button-text-shadow-offset-x)
+    var(--pgn-elevation-close-button-text-shadow-offset-y)
+    var(--pgn-elevation-close-button-text-shadow-blur)
+    var(--pgn-elevation-close-button-text-shadow-color);
+}
+
 .close {
   float: right;
   font-weight: var(--pgn-typography-close-button-font-weight);
   line-height: 1;
   color: var(--pgn-color-close-button);
-  text-shadow:
-    var(--pgn-elevation-close-button-text-shadow-offset-x)
-    var(--pgn-elevation-close-button-text-shadow-offset-y)
-    var(--pgn-elevation-close-button-text-shadow-blur)
-    var(--pgn-elevation-close-button-text-shadow-color);
+  text-shadow: var(--pgn-elevation-close-button-text-shadow);
   opacity: .5;
 
   @include font-size(var(--pgn-typography-close-button-font-size));
diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss
index e1cb447157..a1056b8c2b 100644
--- a/src/DataTable/index.scss
+++ b/src/DataTable/index.scss
@@ -1,12 +1,16 @@
-.pgn__data-table-wrapper {
-  font-size: var(--pgn-typography-font-size-sm);
-  border-radius: var(--pgn-size-border-radius-base);
-  background-color: var(--pgn-color-data-table-bg-base);
-  box-shadow:
+:root {
+  --pgn-elevation-data-table-box-shadow:
     var(--pgn-elevation-data-table-box-shadow-offset-x)
     var(--pgn-elevation-data-table-box-shadow-offset-y)
     var(--pgn-elevation-data-table-box-shadow-blur)
     var(--pgn-elevation-data-table-box-shadow-color);
+}
+
+.pgn__data-table-wrapper {
+  font-size: var(--pgn-typography-font-size-sm);
+  border-radius: var(--pgn-size-border-radius-base);
+  background-color: var(--pgn-color-data-table-bg-base);
+  box-shadow: var(--pgn-elevation-data-table-box-shadow);
 
   &.hide-shadow {
     box-shadow: none;
@@ -97,12 +101,7 @@
   .pgn__data-table-layout-sidebar {
     background-color: var(--pgn-color-data-table-bg-base);
     border-radius: var(--pgn-size-border-radius-base);
-    box-shadow:
-      var(--pgn-elevation-data-table-box-shadow-offset-x)
-      var(--pgn-elevation-data-table-box-shadow-offset-y)
-      var(--pgn-elevation-data-table-box-shadow-blur)
-      var(--pgn-elevation-data-table-box-shadow-color);
-    padding: var(--pgn-spacing-data-table-padding-small);
+    box-shadow: var(--pgn-elevation-data-table-box-shadow);
     margin-right: var(--pgn-spacing-spacer-4);
     flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width);
   }
@@ -294,15 +293,7 @@
 .pgn__data-table__overflow-actions-menu {
   background: var(--pgn-color-white);
   padding: var(--pgn-spacing-spacer-2);
-  box-shadow:
-    var(--pgn-elevation-box-shadow-level-1-1-offset-y)
-    var(--pgn-elevation-box-shadow-level-1-1-offset-x)
-    var(--pgn-elevation-box-shadow-level-1-1-blur)
-    var(--pgn-elevation-box-shadow-level-1-1-color),
-    var(--pgn-elevation-box-shadow-level-1-2-offset-y)
-    var(--pgn-elevation-box-shadow-level-1-2-offset-x)
-    var(--pgn-elevation-box-shadow-level-1-2-blur)
-    var(--pgn-elevation-box-shadow-level-1-2-color);
+  box-shadow: var(--pgn-elevation-box-shadow-level-1);
   border-radius: 4px;
 }
 
diff --git a/src/Dropzone/index.scss b/src/Dropzone/index.scss
index d5c73e4098..b2d382c72e 100644
--- a/src/Dropzone/index.scss
+++ b/src/Dropzone/index.scss
@@ -1,3 +1,37 @@
+:root {
+  --pgn-elevation-dropzone-hover:
+    var(--pgn-elevation-dropzone-hover-inset)
+    var(--pgn-elevation-dropzone-hover-offset-x)
+    var(--pgn-elevation-dropzone-hover-offset-y)
+    var(--pgn-elevation-dropzone-hover-blur)
+    var(--pgn-elevation-dropzone-hover-spread)
+    var(--pgn-elevation-dropzone-hover-color);
+
+  --pgn-elevation-dropzone-focus:
+    var(--pgn-elevation-dropzone-focus-inset)
+    var(--pgn-elevation-dropzone-focus-offset-x)
+    var(--pgn-elevation-dropzone-focus-offset-y)
+    var(--pgn-elevation-dropzone-focus-blur)
+    var(--pgn-elevation-dropzone-focus-spread)
+    var(--pgn-elevation-dropzone-focus-color);
+
+  --pgn-elevation-dropzone-error:
+    var(--pgn-elevation-dropzone-error-inset)
+    var(--pgn-elevation-dropzone-error-offset-x)
+    var(--pgn-elevation-dropzone-error-offset-y)
+    var(--pgn-elevation-dropzone-error-blur)
+    var(--pgn-elevation-dropzone-error-spread)
+    var(--pgn-elevation-dropzone-error-color);
+
+  --pgn-elevation-dropzone-active:
+    var(--pgn-elevation-dropzone-active-inset)
+    var(--pgn-elevation-dropzone-active-offset-x)
+    var(--pgn-elevation-dropzone-active-offset-y)
+    var(--pgn-elevation-dropzone-active-blur)
+    var(--pgn-elevation-dropzone-active-spread)
+    var(--pgn-elevation-dropzone-active-color);
+}
+
 .pgn__dropzone {
   display: flex;
   justify-content: center;
@@ -16,43 +50,19 @@
   }
 
   &:hover {
-    box-shadow:
-      var(--pgn-elevation-dropzone-hover-inset)
-      var(--pgn-elevation-dropzone-hover-offset-x)
-      var(--pgn-elevation-dropzone-hover-offset-y)
-      var(--pgn-elevation-dropzone-hover-blur)
-      var(--pgn-elevation-dropzone-hover-spread)
-      var(--pgn-elevation-dropzone-hover-color);
+    box-shadow: var(--pgn-elevation-dropzone-hover);
   }
 
   &:focus {
-    box-shadow:
-      var(--pgn-elevation-dropzone-focus-inset)
-      var(--pgn-elevation-dropzone-focus-offset-x)
-      var(--pgn-elevation-dropzone-focus-offset-y)
-      var(--pgn-elevation-dropzone-focus-blur)
-      var(--pgn-elevation-dropzone-focus-spread)
-      var(--pgn-elevation-dropzone-focus-color);
+    box-shadow: var(--pgn-elevation-dropzone-focus);
   }
 
   &.pgn__dropzone-validation-error {
-    box-shadow:
-      var(--pgn-elevation-dropzone-error-inset)
-      var(--pgn-elevation-dropzone-error-offset-x)
-      var(--pgn-elevation-dropzone-error-offset-y)
-      var(--pgn-elevation-dropzone-error-blur)
-      var(--pgn-elevation-dropzone-error-spread)
-      var(--pgn-elevation-dropzone-error-color);
+    box-shadow: var(--pgn-elevation-dropzone-error);
   }
 
   &.pgn__dropzone-active {
-    box-shadow:
-      var(--pgn-elevation-dropzone-active-inset)
-      var(--pgn-elevation-dropzone-active-offset-x)
-      var(--pgn-elevation-dropzone-active-offset-y)
-      var(--pgn-elevation-dropzone-active-blur)
-      var(--pgn-elevation-dropzone-active-spread)
-      var(--pgn-elevation-dropzone-active-color);
+    box-shadow: var(--pgn-elevation-dropzone-active);
   }
 }
 
diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss
index 25249e5c59..42f763703d 100644
--- a/src/Form/_bootstrap-custom-forms.scss
+++ b/src/Form/_bootstrap-custom-forms.scss
@@ -1,3 +1,26 @@
+:root {
+  --pgn-elevation-form-control-indicator-checked-focus:
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
+    var(--pgn-elevation-form-control-indicator-checked-focus-blur)
+    var(--pgn-elevation-form-control-indicator-checked-focus-spread)
+    var(--pgn-elevation-form-control-indicator-checked-focus-color);
+
+  --pgn-elevation-form-control-select-border-focus:
+    var(--pgn-elevation-form-control-select-border-focus-offset-x)
+    var(--pgn-elevation-form-control-select-border-focus-offset-y)
+    var(--pgn-elevation-form-control-select-border-focus-blur)
+    var(--pgn-elevation-form-control-select-border-focus-spread)
+    var(--pgn-elevation-form-control-select-border-focus-color);
+
+  --pgn-elevation-form-control-file-focus:
+    var(--pgn-elevation-form-control-file-focus-offset-x)
+    var(--pgn-elevation-form-control-file-focus-offset-y)
+    var(--pgn-elevation-form-control-file-focus-blur)
+    var(--pgn-elevation-form-control-file-focus-spread)
+    var(--pgn-elevation-form-control-file-focus-color);
+}
+
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
 // https://useiconic.com/open
@@ -39,12 +62,7 @@
   }
 
   &:focus ~ .custom-control-label::before {
-    box-shadow:
-      var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
-      var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
-      var(--pgn-elevation-form-control-indicator-checked-focus-blur)
-      var(--pgn-elevation-form-control-indicator-checked-focus-spread)
-      var(--pgn-elevation-form-control-indicator-checked-focus-color);
+    box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus);
   }
 
   &:focus:not(:checked) ~ .custom-control-label::before {
@@ -254,12 +272,7 @@
   &:focus {
     border-color: var(--pgn-color-form-control-select-border-focus);
     outline: 0;
-    box-shadow:
-      var(--pgn-elevation-form-control-select-border-focus-offset-x)
-      var(--pgn-elevation-form-control-select-border-focus-offset-y)
-      var(--pgn-elevation-form-control-select-border-focus-blur)
-      var(--pgn-elevation-form-control-select-border-focus-spread)
-      var(--pgn-elevation-form-control-select-border-focus-color);
+    box-shadow: var(--pgn-elevation-form-control-select-border-focus);
 
     &::-ms-value {
       // For visual consistency with other platforms/browsers,
@@ -338,12 +351,7 @@
 
   &:focus ~ .custom-file-label {
     border-color: var(--pgn-color-form-control-file-border-focus);
-    box-shadow:
-      var(--pgn-elevation-form-control-file-focus-offset-x)
-      var(--pgn-elevation-form-control-file-focus-offset-y)
-      var(--pgn-elevation-form-control-file-focus-blur)
-      var(--pgn-elevation-form-control-file-focus-spread)
-      var(--pgn-elevation-form-control-file-focus-color);
+    box-shadow: var(--pgn-elevation-form-control-file-focus);
   }
 
   // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
diff --git a/src/Form/_index.scss b/src/Form/_index.scss
index 8f81e670b9..1452f8104f 100644
--- a/src/Form/_index.scss
+++ b/src/Form/_index.scss
@@ -5,6 +5,15 @@
 @import "FormText";
 @import "FormControlSet";
 
+:root {
+  --pgn-elevation-form-control-indicator-checked-focus:
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
+    var(--pgn-elevation-form-control-indicator-checked-focus-blur)
+    var(--pgn-elevation-form-control-indicator-checked-focus-spread)
+    var(--pgn-elevation-form-control-indicator-checked-focus-color);
+}
+
 // A form input state used by the now deprecate Fieldset and asInput
 // we can remove this when they are deleted.
 .form-control.is-invalid.is-invalid-nodanger {
@@ -411,12 +420,7 @@ select.form-control {
   }
 
   &:not(:disabled):hover {
-    box-shadow:
-      var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
-      var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
-      var(--pgn-elevation-form-control-indicator-checked-focus-blur)
-      var(--pgn-elevation-form-control-indicator-checked-focus-spread)
-      var(--pgn-elevation-form-control-indicator-checked-focus-color);
+    box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus);
   }
 
   &:disabled {
diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss
index 6641ff90e7..11c9030d67 100644
--- a/src/Form/_mixins.scss
+++ b/src/Form/_mixins.scss
@@ -1,3 +1,12 @@
+:root {
+  --pgn-elevation-form-input-focus:
+    var(--pgn-elevation-form-input-focus-offset-x)
+    var(--pgn-elevation-form-input-focus-offset-y)
+    var(--pgn-elevation-form-input-focus-blur)
+    var(--pgn-elevation-form-input-focus-spread)
+    var(--pgn-elevation-form-input-focus-color);
+}
+
 @mixin form-control-floating-label-initial(
   $padding-x,
   $padding-y,
@@ -50,12 +59,7 @@
     background-color: var(--pgn-color-form-input-focus-bg);
     border-color: var(--pgn-color-form-input-focus-border);
     outline: 0;
-    box-shadow:
-      var(--pgn-elevation-form-input-focus-offset-x)
-      var(--pgn-elevation-form-input-focus-offset-y)
-      var(--pgn-elevation-form-input-focus-blur)
-      var(--pgn-elevation-form-input-focus-spread)
-      var(--pgn-elevation-form-input-focus-color);
+    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/IconButton/index.scss b/src/IconButton/index.scss
index 86c61fc98e..54792c04c5 100644
--- a/src/IconButton/index.scss
+++ b/src/IconButton/index.scss
@@ -1,5 +1,151 @@
 @import "mixins";
 
+:root {
+  --pgn-elevation-icon-button-box-shadow-primary-base:
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-primary-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-secondary-base:
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-brand-base:
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-brand-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-success-base:
+    var(--pgn-elevation-icon-button-box-shadow-success-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-success-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-warning-base:
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-warning-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-danger-base:
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-danger-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-light-base:
+    var(--pgn-elevation-icon-button-box-shadow-light-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-light-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-dark-base:
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-dark-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-black-base:
+    var(--pgn-elevation-icon-button-box-shadow-black-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-black-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-color);
+}
+
 .btn-icon {
   @include btn-icon-size(var(--pgn-size-icon-button-diameter-md));
 
@@ -74,13 +220,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-primary-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-primary-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-primary-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-primary-base-inset)
-      var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-primary-base-blur)
-      var(--pgn-elevation-icon-button-box-shadow-primary-base-spread)
-      var(--pgn-elevation-icon-button-box-shadow-primary-base-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-primary-base);
   }
 
   &.btn-icon-inverse-primary {
@@ -90,13 +230,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-primary-inverse-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-primary-inverse-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-primary-inverse-inset)
-      var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-primary-inverse-blur)
-      var(--pgn-elevation-icon-button-box-shadow-primary-inverse-spread)
-      var(--pgn-elevation-icon-button-box-shadow-primary-inverse-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-primary-inverse);
   }
 
   &.btn-icon-primary-active {
@@ -127,13 +261,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-secondary-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-secondary-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-secondary-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-secondary-base-inset)
-      var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-secondary-base-blur)
-      var(--pgn-elevation-icon-button-box-shadow-secondary-base-spread)
-      var(--pgn-elevation-icon-button-box-shadow-secondary-base-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-secondary-base);
   }
 
   &.btn-icon-inverse-secondary {
@@ -143,13 +271,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-secondary-inverse-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-secondary-inverse-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-inset)
-      var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-blur)
-      var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-spread)
-      var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-secondary-inverse);
   }
 
   &.btn-icon-secondary-active {
@@ -180,13 +302,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-brand-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-brand-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-brand-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-brand-base-inset)
-      var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-brand-base-blur)
-      var(--pgn-elevation-icon-button-box-shadow-brand-base-spread)
-      var(--pgn-elevation-icon-button-box-shadow-brand-base-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-brand-base);
   }
 
   &.btn-icon-inverse-brand {
@@ -196,13 +312,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-brand-inverse-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-brand-inverse-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-brand-inverse-inset)
-      var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-brand-inverse-blur)
-      var(--pgn-elevation-icon-button-box-shadow-brand-inverse-spread)
-      var(--pgn-elevation-icon-button-box-shadow-brand-inverse-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-brand-inverse);
   }
 
   &.btn-icon-brand-active {
@@ -233,13 +343,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-success-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-success-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-success-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-success-base-inset)
-      var(--pgn-elevation-icon-button-box-shadow-success-base-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-success-base-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-success-base-blur)
-      var(--pgn-elevation-icon-button-box-shadow-success-base-spread)
-      var(--pgn-elevation-icon-button-box-shadow-success-base-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-success-base);
   }
 
   &.btn-icon-inverse-success {
@@ -249,13 +353,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-success-inverse-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-success-inverse-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-success-inverse-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-success-inverse-inset)
-      var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-success-inverse-blur)
-      var(--pgn-elevation-icon-button-box-shadow-success-inverse-spread)
-      var(--pgn-elevation-icon-button-box-shadow-success-inverse-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-success-inverse);
   }
 
   &.btn-icon-success-active {
@@ -286,13 +384,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-warning-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-warning-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-warning-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-warning-base-inset)
-      var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-warning-base-blur)
-      var(--pgn-elevation-icon-button-box-shadow-warning-base-spread)
-      var(--pgn-elevation-icon-button-box-shadow-warning-base-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-warning-base);
   }
 
   &.btn-icon-inverse-warning {
@@ -302,13 +394,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-warning-inverse-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-warning-inverse-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-warning-inverse-inset)
-      var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-warning-inverse-blur)
-      var(--pgn-elevation-icon-button-box-shadow-warning-inverse-spread)
-      var(--pgn-elevation-icon-button-box-shadow-warning-inverse-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-warning-inverse);
   }
 
   &.btn-icon-warning-active {
@@ -339,13 +425,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-danger-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-danger-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-danger-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-danger-base-inset)
-      var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-danger-base-blur)
-      var(--pgn-elevation-icon-button-box-shadow-danger-base-spread)
-      var(--pgn-elevation-icon-button-box-shadow-danger-base-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-danger-base);
   }
 
   &.btn-icon-inverse-danger {
@@ -355,13 +435,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-danger-inverse-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-danger-inverse-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-danger-inverse-inset)
-      var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-danger-inverse-blur)
-      var(--pgn-elevation-icon-button-box-shadow-danger-inverse-spread)
-      var(--pgn-elevation-icon-button-box-shadow-danger-inverse-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-danger-inverse);
   }
 
   &.btn-icon-danger-active {
@@ -392,13 +466,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-light-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-light-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-light-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-light-base-inset)
-      var(--pgn-elevation-icon-button-box-shadow-light-base-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-light-base-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-light-base-blur)
-      var(--pgn-elevation-icon-button-box-shadow-light-base-spread)
-      var(--pgn-elevation-icon-button-box-shadow-light-base-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-light-base);
   }
 
   &.btn-icon-inverse-light {
@@ -408,13 +476,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-light-inverse-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-light-inverse-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-light-inverse-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-light-inverse-inset)
-      var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-light-inverse-blur)
-      var(--pgn-elevation-icon-button-box-shadow-light-inverse-spread)
-      var(--pgn-elevation-icon-button-box-shadow-light-inverse-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-light-inverse);
   }
 
   &.btn-icon-light-active {
@@ -445,13 +507,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-dark-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-dark-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-dark-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-dark-base-inset)
-      var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-dark-base-blur)
-      var(--pgn-elevation-icon-button-box-shadow-dark-base-spread)
-      var(--pgn-elevation-icon-button-box-shadow-dark-base-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-dark-base);
   }
 
   &.btn-icon-inverse-dark {
@@ -461,13 +517,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-dark-inverse-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-dark-inverse-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-dark-inverse)
-      var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-dark-inverse-blur)
-      var(--pgn-elevation-icon-button-box-shadow-dark-inverse-spread)
-      var(--pgn-elevation-icon-button-box-shadow-dark-inverse-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-dark-inverse);
   }
 
   &.btn-icon-dark-active {
@@ -498,13 +548,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-black-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-black-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-black-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-black-base-inset)
-      var(--pgn-elevation-icon-button-box-shadow-black-base-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-black-base-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-black-base-blur)
-      var(--pgn-elevation-icon-button-box-shadow-black-base-spread)
-      var(--pgn-elevation-icon-button-box-shadow-black-base-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-black-base);
   }
 
   &.btn-icon-inverse-black {
@@ -514,13 +558,7 @@
     --btn-icon-color: var(--pgn-color-icon-button-text-black-inverse-base);
     --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-black-inverse-focus);
     --btn-icon-focus-color: var(--pgn-color-icon-button-text-black-inverse-focus);
-    --btn-icon-box-shadow:
-      var(--pgn-elevation-icon-button-box-shadow-black-inverse-inset)
-      var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-x)
-      var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-y)
-      var(--pgn-elevation-icon-button-box-shadow-black-inverse-blur)
-      var(--pgn-elevation-icon-button-box-shadow-black-inverse-spread)
-      var(--pgn-elevation-icon-button-box-shadow-black-inverse-color);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-black-inverse);
   }
 
   &.btn-icon-black-active {
diff --git a/src/Menu/index.scss b/src/Menu/index.scss
index 60f7c609a2..1d3fded3f3 100644
--- a/src/Menu/index.scss
+++ b/src/Menu/index.scss
@@ -1,10 +1,14 @@
-.pgn__menu {
-  border-radius: var(--pgn-size-menu-base-border-radius);
-  box-shadow:
+:root {
+  --pgn-elevation-menu-box-shadow:
     var(--pgn-elevation-menu-box-shadow-offset-x)
     var(--pgn-elevation-menu-box-shadow-offset-y)
     var(--pgn-elevation-menu-box-shadow-blur)
     var(--pgn-elevation-menu-box-shadow-color);
+}
+
+.pgn__menu {
+  border-radius: var(--pgn-size-menu-base-border-radius);
+  box-shadow: var(--pgn-elevation-menu-box-shadow);
   background-color: var(--pgn-color-menu-bg);
   overflow: auto;
   max-height: var(--pgn-size-menu-base-max-height);
diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss
index ba68c4bab1..9fd630d128 100644
--- a/src/Modal/_ModalDialog.scss
+++ b/src/Modal/_ModalDialog.scss
@@ -1,3 +1,15 @@
+:root {
+  --pgn-elevation-modal-content-box-shadow-sm-up:
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-blur)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-color),
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-blur)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-color);
+}
+
 .pgn__modal {
   background: var(--pgn-color-modal-content-bg);
   border-radius: calc(var(--pgn-size-modal-content-border-radius) - var(--pgn-size-modal-content-border-width));
@@ -8,15 +20,7 @@
   max-width: var(--pgn-size-modal-md);
   overflow: auto;
   width: 100vw;
-  box-shadow:
-    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x)
-    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y)
-    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-blur)
-    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-color),
-    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x)
-    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y)
-    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-blur)
-    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-color);
+  box-shadow: var(--pgn-elevation-modal-content-box-shadow-sm-up);
   border: solid var(--pgn-size-modal-content-border-width) var(--pgn-color-modal-content-border);
   position: relative;
 
diff --git a/src/Pagination/pagination-bootstrap.scss b/src/Pagination/pagination-bootstrap.scss
index 07d87a3383..282f9e6ad8 100644
--- a/src/Pagination/pagination-bootstrap.scss
+++ b/src/Pagination/pagination-bootstrap.scss
@@ -1,3 +1,12 @@
+:root {
+  --pgn-elevation-pagination-focus-box-shadow:
+    var(--pgn-elevation-pagination-focus-box-shadow-offset-x)
+    var(--pgn-elevation-pagination-focus-box-shadow-offset-y)
+    var(--pgn-elevation-pagination-focus-box-shadow-blur)
+    var(--pgn-elevation-pagination-focus-box-shadow-spread)
+    var(--pgn-elevation-pagination-focus-box-shadow-color);
+}
+
 .pagination {
   display: flex;
 
@@ -27,12 +36,7 @@
   &:focus {
     z-index: 3;
     outline: var(--pgn-size-pagination-focus-outline);
-    box-shadow:
-      var(--pgn-elevation-pagination-focus-box-shadow-offset-x)
-      var(--pgn-elevation-pagination-focus-box-shadow-offset-y)
-      var(--pgn-elevation-pagination-focus-box-shadow-blur)
-      var(--pgn-elevation-pagination-focus-box-shadow-spread)
-      var(--pgn-elevation-pagination-focus-box-shadow-color);
+    box-shadow: var(--pgn-elevation-pagination-focus-box-shadow);
   }
 }
 
diff --git a/src/SelectableBox/index.scss b/src/SelectableBox/index.scss
index 38f9c8819f..5fad5a2146 100644
--- a/src/SelectableBox/index.scss
+++ b/src/SelectableBox/index.scss
@@ -18,15 +18,7 @@
   position: relative;
   height: 100%;
   padding: var(--pgn-spacing-selectable-box-padding);
-  box-shadow:
-    var(--pgn-elevation-box-shadow-level-1-1-offset-y)
-    var(--pgn-elevation-box-shadow-level-1-1-offset-x)
-    var(--pgn-elevation-box-shadow-level-1-1-blur)
-    var(--pgn-elevation-box-shadow-level-1-1-color),
-    var(--pgn-elevation-box-shadow-level-1-2-offset-y)
-    var(--pgn-elevation-box-shadow-level-1-2-offset-x)
-    var(--pgn-elevation-box-shadow-level-1-2-blur)
-    var(--pgn-elevation-box-shadow-level-1-2-color);
+  box-shadow: var(--pgn-elevation-box-shadow-level-1);
   border-radius: var(--pgn-spacing-selectable-box-border-radius);
   text-align: start;
   background: var(--pgn-color-white);
diff --git a/src/Sticky/index.scss b/src/Sticky/index.scss
index facd262633..b7278818cf 100644
--- a/src/Sticky/index.scss
+++ b/src/Sticky/index.scss
@@ -1,3 +1,15 @@
+:root {
+  --pgn-elevation-sticky-shadow-bottom:
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-1-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-1-color),
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-2-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-2-color);
+}
+
 .pgn__sticky {
   display: flex;
   width: 100%;
@@ -14,15 +26,7 @@
     }
 
     &.pgn__sticky-shadow {
-      box-shadow:
-        var(--pgn-elevation-sticky-shadow-bottom-1-offset-x)
-        var(--pgn-elevation-sticky-shadow-bottom-1-offset-y)
-        var(--pgn-elevation-sticky-shadow-bottom-1-blur)
-        var(--pgn-elevation-sticky-shadow-bottom-1-color),
-        var(--pgn-elevation-sticky-shadow-bottom-2-offset-x)
-        var(--pgn-elevation-sticky-shadow-bottom-2-offset-y)
-        var(--pgn-elevation-sticky-shadow-bottom-2-blur)
-        var(--pgn-elevation-sticky-shadow-bottom-2-color);
+      box-shadow: var(--pgn-elevation-sticky-shadow-bottom);
     }
   }
 
diff --git a/src/Toast/bootstrap-toast.scss b/src/Toast/bootstrap-toast.scss
index 8052c0e3b1..9d1f8f3775 100644
--- a/src/Toast/bootstrap-toast.scss
+++ b/src/Toast/bootstrap-toast.scss
@@ -5,15 +5,7 @@
   background-color: var(--pgn-color-toast-bg);
   background-clip: padding-box;
   border: var(--pgn-size-toast-border-width) solid var(--pgn-color-toast-border);
-  box-shadow:
-    var(--pgn-elevation-toast-box-shadow-1-offset-x)
-    var(--pgn-elevation-toast-box-shadow-1-offset-y)
-    var(--pgn-elevation-toast-box-shadow-1-blur)
-    var(--pgn-elevation-toast-box-shadow-1-color),
-    var(--pgn-elevation-toast-box-shadow-2-offset-x)
-    var(--pgn-elevation-toast-box-shadow-2-offset-y)
-    var(--pgn-elevation-toast-box-shadow-2-blur)
-    var(--pgn-elevation-toast-box-shadow-2-color);
+  box-shadow: var(--pgn-elevation-toast-box-shadow);
   opacity: 0;
 
   @include font-size(var(--pgn-typography-toast-font-size));
diff --git a/src/Toast/index.scss b/src/Toast/index.scss
index 859ce5910d..043f65b9bc 100644
--- a/src/Toast/index.scss
+++ b/src/Toast/index.scss
@@ -1,8 +1,7 @@
 @import "bootstrap-toast";
 
-.toast {
-  background-color: var(--pgn-color-toast-bg);
-  box-shadow:
+:root {
+  --pgn-elevation-toast-box-shadow:
     var(--pgn-elevation-toast-box-shadow-1-offset-x)
     var(--pgn-elevation-toast-box-shadow-1-offset-y)
     var(--pgn-elevation-toast-box-shadow-1-blur)
@@ -11,6 +10,11 @@
     var(--pgn-elevation-toast-box-shadow-2-offset-y)
     var(--pgn-elevation-toast-box-shadow-2-blur)
     var(--pgn-elevation-toast-box-shadow-2-color);
+}
+
+.toast {
+  background-color: var(--pgn-color-toast-bg);
+  box-shadow: var(--pgn-elevation-toast-box-shadow);
   margin: 0;
   padding: 1rem;
   position: relative;
diff --git a/src/Tooltip/index.scss b/src/Tooltip/index.scss
index 5daf8b8bce..d6c972ce02 100644
--- a/src/Tooltip/index.scss
+++ b/src/Tooltip/index.scss
@@ -1,3 +1,19 @@
+:root {
+  --pgn-elevation-tooltip-box-shadow:
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-1-blur)
+      var(--pgn-elevation-tooltip-box-shadow-1-color)
+    )
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-2-blur)
+      var(--pgn-elevation-tooltip-box-shadow-2-color)
+    );
+}
+
 // Base class
 .tooltip {
   position: absolute;
@@ -11,19 +27,7 @@
   // Allow breaking very long words so they don't overflow the tooltip's bounds
   word-wrap: break-word;
   opacity: 0;
-  filter:
-    drop-shadow(
-      var(--pgn-elevation-tooltip-box-shadow-1-offset-x)
-      var(--pgn-elevation-tooltip-box-shadow-1-offset-y)
-      var(--pgn-elevation-tooltip-box-shadow-1-blur)
-      var(--pgn-elevation-tooltip-box-shadow-1-color)
-    )
-    drop-shadow(
-      var(--pgn-elevation-tooltip-box-shadow-2-offset-x)
-      var(--pgn-elevation-tooltip-box-shadow-2-offset-y)
-      var(--pgn-elevation-tooltip-box-shadow-2-blur)
-      var(--pgn-elevation-tooltip-box-shadow-2-color)
-    );
+  filter: var(--pgn-elevation-tooltip-box-shadow);
 
   &.show {
     opacity: var(--pgn-other-tooltip-opacity);
diff --git a/styles/css/themes/light/abstraction-variables.css b/styles/css/themes/light/abstraction-variables.css
new file mode 100644
index 0000000000..f7d5498780
--- /dev/null
+++ b/styles/css/themes/light/abstraction-variables.css
@@ -0,0 +1,301 @@
+:root {
+  --pgn-elevation-box-shadow-level-1:
+    var(--pgn-elevation-box-shadow-level-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-1-1-blur)
+    var(--pgn-elevation-box-shadow-level-1-1-color),
+    var(--pgn-elevation-box-shadow-level-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-1-2-blur)
+    var(--pgn-elevation-box-shadow-level-1-2-color);
+
+  --pgn-elevation-box-shadow-level-2:
+    var(--pgn-elevation-box-shadow-level-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-2-1-blur)
+    var(--pgn-elevation-box-shadow-level-2-1-color),
+    var(--pgn-elevation-box-shadow-level-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-2-2-blur)
+    var(--pgn-elevation-box-shadow-level-2-2-color);
+
+  --pgn-elevation-box-shadow-level-3:
+    var(--pgn-elevation-box-shadow-level-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-3-1-blur)
+    var(--pgn-elevation-box-shadow-level-3-1-color),
+    var(--pgn-elevation-box-shadow-level-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-3-2-blur)
+    var(--pgn-elevation-box-shadow-level-3-2-color);
+
+  --pgn-elevation-box-shadow-level-4:
+    var(--pgn-elevation-box-shadow-level-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-4-1-blur)
+    var(--pgn-elevation-box-shadow-level-4-1-color),
+    var(--pgn-elevation-box-shadow-level-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-4-2-blur)
+    var(--pgn-elevation-box-shadow-level-4-2-color);
+
+  --pgn-elevation-box-shadow-level-5:
+    var(--pgn-elevation-box-shadow-level-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-5-1-blur)
+    var(--pgn-elevation-box-shadow-level-5-1-color),
+    var(--pgn-elevation-box-shadow-level-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-5-2-blur)
+    var(--pgn-elevation-box-shadow-level-5-2-color);
+
+  --pgn-elevation-box-shadow-down-1:
+    var(--pgn-elevation-box-shadow-down-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-1-1-blur)
+    var(--pgn-elevation-box-shadow-down-1-1-color),
+    var(--pgn-elevation-box-shadow-down-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-1-2-blur)
+    var(--pgn-elevation-box-shadow-down-1-2-color);
+
+  --pgn-elevation-box-shadow-down-2:
+  var(--pgn-elevation-box-shadow-down-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-2-1-blur)
+    var(--pgn-elevation-box-shadow-down-2-1-color),
+    var(--pgn-elevation-box-shadow-down-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-2-2-blur)
+    var(--pgn-elevation-box-shadow-down-2-2-color);
+
+  --pgn-elevation-box-shadow-down-3:
+    var(--pgn-elevation-box-shadow-down-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-3-1-blur)
+    var(--pgn-elevation-box-shadow-down-3-1-color),
+    var(--pgn-elevation-box-shadow-down-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-3-2-blur)
+    var(--pgn-elevation-box-shadow-down-3-2-color);
+
+  --pgn-elevation-box-shadow-down-4:
+    var(--pgn-elevation-box-shadow-down-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-4-1-blur)
+    var(--pgn-elevation-box-shadow-down-4-1-color),
+    var(--pgn-elevation-box-shadow-down-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-4-2-blur)
+    var(--pgn-elevation-box-shadow-down-4-2-color);
+
+  --pgn-elevation-box-shadow-down-5:
+    var(--pgn-elevation-box-shadow-down-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-5-1-blur)
+    var(--pgn-elevation-box-shadow-down-5-1-color),
+    var(--pgn-elevation-box-shadow-down-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-5-2-blur)
+    var(--pgn-elevation-box-shadow-down-5-2-color);
+
+  --pgn-elevation-box-shadow-left-1:
+    var(--pgn-elevation-box-shadow-left-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-1-1-blur)
+    var(--pgn-elevation-box-shadow-left-1-1-color),
+    var(--pgn-elevation-box-shadow-left-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-1-2-blur)
+    var(--pgn-elevation-box-shadow-left-1-2-color);
+
+  --pgn-elevation-box-shadow-left-2:
+    var(--pgn-elevation-box-shadow-left-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-2-1-blur)
+    var(--pgn-elevation-box-shadow-left-2-1-color),
+    var(--pgn-elevation-box-shadow-left-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-2-2-blur)
+    var(--pgn-elevation-box-shadow-left-2-2-color);
+
+  --pgn-elevation-box-shadow-left-3:
+    var(--pgn-elevation-box-shadow-left-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-3-1-blur)
+    var(--pgn-elevation-box-shadow-left-3-1-color),
+    var(--pgn-elevation-box-shadow-left-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-3-2-blur)
+    var(--pgn-elevation-box-shadow-left-3-2-color);
+
+  --pgn-elevation-box-shadow-left-4:
+    var(--pgn-elevation-box-shadow-left-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-4-1-blur)
+    var(--pgn-elevation-box-shadow-left-4-1-color),
+    var(--pgn-elevation-box-shadow-left-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-4-2-blur)
+    var(--pgn-elevation-box-shadow-left-4-2-color);
+
+  --pgn-elevation-box-shadow-left-5:
+    var(--pgn-elevation-box-shadow-left-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-5-1-blur)
+    var(--pgn-elevation-box-shadow-left-5-1-color),
+    var(--pgn-elevation-box-shadow-left-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-5-2-blur)
+    var(--pgn-elevation-box-shadow-left-5-2-color);
+
+  --pgn-elevation-box-shadow-up-1:
+    var(--pgn-elevation-box-shadow-up-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-1-1-blur)
+    var(--pgn-elevation-box-shadow-up-1-1-color),
+    var(--pgn-elevation-box-shadow-up-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-1-2-blur)
+    var(--pgn-elevation-box-shadow-up-1-2-color);
+
+  --pgn-elevation-box-shadow-up-2:
+    var(--pgn-elevation-box-shadow-up-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-2-1-blur)
+    var(--pgn-elevation-box-shadow-up-2-1-color),
+    var(--pgn-elevation-box-shadow-up-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-2-2-blur)
+    var(--pgn-elevation-box-shadow-up-2-2-color);
+
+  --pgn-elevation-box-shadow-up-3:
+    var(--pgn-elevation-box-shadow-up-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-3-1-blur)
+    var(--pgn-elevation-box-shadow-up-3-1-color),
+    var(--pgn-elevation-box-shadow-up-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-3-2-blur)
+    var(--pgn-elevation-box-shadow-up-3-2-color);
+
+  --pgn-elevation-box-shadow-up-4:
+    var(--pgn-elevation-box-shadow-up-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-3-1-blur)
+    var(--pgn-elevation-box-shadow-up-3-1-color),
+    var(--pgn-elevation-box-shadow-up-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-3-2-blur)
+    var(--pgn-elevation-box-shadow-up-3-2-color);
+
+  --pgn-elevation-box-shadow-up-5:
+    var(--pgn-elevation-box-shadow-up-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-5-1-blur)
+    var(--pgn-elevation-box-shadow-up-5-1-color),
+    var(--pgn-elevation-box-shadow-up-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-5-2-blur)
+    var(--pgn-elevation-box-shadow-up-5-2-color);
+
+  --pgn-elevation-box-shadow-right-1:
+    var(--pgn-elevation-box-shadow-right-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-1-1-blur)
+    var(--pgn-elevation-box-shadow-right-1-1-color),
+    var(--pgn-elevation-box-shadow-right-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-1-2-blur)
+    var(--pgn-elevation-box-shadow-right-1-2-color);
+
+  --pgn-elevation-box-shadow-right-2:
+    var(--pgn-elevation-box-shadow-right-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-2-1-blur)
+    var(--pgn-elevation-box-shadow-right-2-1-color),
+    var(--pgn-elevation-box-shadow-right-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-2-2-blur)
+    var(--pgn-elevation-box-shadow-right-2-2-color);
+
+  --pgn-elevation-box-shadow-right-3:
+    var(--pgn-elevation-box-shadow-right-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-3-1-blur)
+    var(--pgn-elevation-box-shadow-right-3-1-color),
+    var(--pgn-elevation-box-shadow-right-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-3-2-blur)
+    var(--pgn-elevation-box-shadow-right-3-2-color);
+
+  --pgn-elevation-box-shadow-right-4:
+    var(--pgn-elevation-box-shadow-right-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-4-1-blur)
+    var(--pgn-elevation-box-shadow-right-4-1-color),
+    var(--pgn-elevation-box-shadow-right-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-4-2-blur)
+    var(--pgn-elevation-box-shadow-right-4-2-color);
+
+  --pgn-elevation-box-shadow-right-5:
+    var(--pgn-elevation-box-shadow-right-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-5-1-blur)
+    var(--pgn-elevation-box-shadow-right-5-1-color),
+    var(--pgn-elevation-box-shadow-right-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-5-2-blur)
+    var(--pgn-elevation-box-shadow-right-5-2-color);
+
+  --pgn-elevation-box-shadow-centered-1:
+    var(--pgn-elevation-box-shadow-centered-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-1-1-blur)
+    var(--pgn-elevation-box-shadow-centered-1-1-color),
+    var(--pgn-elevation-box-shadow-centered-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-1-2-blur)
+    var(--pgn-elevation-box-shadow-centered-1-2-color);
+
+  --pgn-elevation-box-shadow-centered-2:
+    var(--pgn-elevation-box-shadow-centered-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-2-1-blur)
+    var(--pgn-elevation-box-shadow-centered-2-1-color),
+    var(--pgn-elevation-box-shadow-centered-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-2-2-blur)
+    var(--pgn-elevation-box-shadow-centered-2-2-color);
+
+  --pgn-elevation-box-shadow-centered-3:
+    var(--pgn-elevation-box-shadow-centered-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-3-1-blur)
+    var(--pgn-elevation-box-shadow-centered-3-1-color),
+    var(--pgn-elevation-box-shadow-centered-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-3-2-blur)
+    var(--pgn-elevation-box-shadow-centered-3-2-color);
+
+  --pgn-elevation-box-shadow-centered-4:
+    var(--pgn-elevation-box-shadow-centered-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-4-1-blur)
+    var(--pgn-elevation-box-shadow-centered-4-1-color),
+    var(--pgn-elevation-box-shadow-centered-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-4-2-blur)
+    var(--pgn-elevation-box-shadow-centered-4-2-color);
+
+  --pgn-elevation-box-shadow-centered-5:
+    var(--pgn-elevation-box-shadow-centered-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-5-1-blur)
+    var(--pgn-elevation-box-shadow-centered-5-1-color),
+    var(--pgn-elevation-box-shadow-centered-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-5-2-blur)
+    var(--pgn-elevation-box-shadow-centered-5-2-color);
+}
diff --git a/styles/css/themes/light/index.css b/styles/css/themes/light/index.css
index 0b94ebd1ac..7551787e26 100644
--- a/styles/css/themes/light/index.css
+++ b/styles/css/themes/light/index.css
@@ -1,2 +1,3 @@
 @import "variables.css";
 @import "utility-classes.css";
+@import "abstraction-variables.css";
diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss
index a7a38984e2..83dee48a28 100644
--- a/styles/scss/core/_variables.scss
+++ b/styles/scss/core/_variables.scss
@@ -467,313 +467,63 @@ $border-radius-sm: var(--pgn-size-border-radius-sm) !default;
 
 $rounded-pill: var(--pgn-size-rounded-pill) !default;
 
-$level-1-box-shadow: var(--pgn-elevation-box-shadow-level-1-1-offset-x)
-  var(--pgn-elevation-box-shadow-level-1-1-offset-y)
-  var(--pgn-elevation-box-shadow-level-1-1-blur)
-  var(--pgn-elevation-box-shadow-level-1-1-color),
-  var(--pgn-elevation-box-shadow-level-1-2-offset-y)
-  var(--pgn-elevation-box-shadow-level-1-2-offset-x)
-  var(--pgn-elevation-box-shadow-level-1-2-blur)
-  var(--pgn-elevation-box-shadow-level-1-2-color) !default;
-
-$level-2-box-shadow: var(--pgn-elevation-box-shadow-level-2-1-offset-x)
-  var(--pgn-elevation-box-shadow-level-2-1-offset-y)
-  var(--pgn-elevation-box-shadow-level-2-1-blur)
-  var(--pgn-elevation-box-shadow-level-2-1-color),
-  var(--pgn-elevation-box-shadow-level-2-2-offset-y)
-  var(--pgn-elevation-box-shadow-level-2-2-offset-x)
-  var(--pgn-elevation-box-shadow-level-2-2-blur)
-  var(--pgn-elevation-box-shadow-level-2-2-color) !default;
-$level-3-box-shadow: var(--pgn-elevation-box-shadow-level-3-1-offset-x)
-  var(--pgn-elevation-box-shadow-level-3-1-offset-y)
-  var(--pgn-elevation-box-shadow-level-3-1-blur)
-  var(--pgn-elevation-box-shadow-level-3-1-color),
-  var(--pgn-elevation-box-shadow-level-3-2-offset-y)
-  var(--pgn-elevation-box-shadow-level-3-2-offset-x)
-  var(--pgn-elevation-box-shadow-level-3-2-blur)
-  var(--pgn-elevation-box-shadow-level-3-2-color) !default;
-$level-4-box-shadow: var(--pgn-elevation-box-shadow-level-4-1-offset-x)
-  var(--pgn-elevation-box-shadow-level-4-1-offset-y)
-  var(--pgn-elevation-box-shadow-level-4-1-blur)
-  var(--pgn-elevation-box-shadow-level-4-1-color),
-  var(--pgn-elevation-box-shadow-level-4-2-offset-y)
-  var(--pgn-elevation-box-shadow-level-4-2-offset-x)
-  var(--pgn-elevation-box-shadow-level-4-2-blur)
-  var(--pgn-elevation-box-shadow-level-4-2-color) !default;
-$level-5-box-shadow: var(--pgn-elevation-box-shadow-level-5-1-offset-x)
-  var(--pgn-elevation-box-shadow-level-5-1-offset-y)
-  var(--pgn-elevation-box-shadow-level-5-1-blur)
-  var(--pgn-elevation-box-shadow-level-5-1-color),
-  var(--pgn-elevation-box-shadow-level-5-2-offset-y)
-  var(--pgn-elevation-box-shadow-level-5-2-offset-x)
-  var(--pgn-elevation-box-shadow-level-5-2-blur)
-  var(--pgn-elevation-box-shadow-level-5-2-color) !default;
-
-$box-shadow-down-1: var(--pgn-elevation-box-shadow-down-1-1-offset-x)
-  var(--pgn-elevation-box-shadow-down-1-1-offset-y)
-  var(--pgn-elevation-box-shadow-down-1-1-blur)
-  var(--pgn-elevation-box-shadow-down-1-1-color),
-  var(--pgn-elevation-box-shadow-down-1-2-offset-y)
-  var(--pgn-elevation-box-shadow-down-1-2-offset-x)
-  var(--pgn-elevation-box-shadow-down-1-2-blur)
-  var(--pgn-elevation-box-shadow-down-1-2-color) !default;
-$box-shadow-down-2: var(--pgn-elevation-box-shadow-down-2-1-offset-x)
-  var(--pgn-elevation-box-shadow-down-2-1-offset-y)
-  var(--pgn-elevation-box-shadow-down-2-1-blur)
-  var(--pgn-elevation-box-shadow-down-2-1-color),
-  var(--pgn-elevation-box-shadow-down-2-2-offset-y)
-  var(--pgn-elevation-box-shadow-down-2-2-offset-x)
-  var(--pgn-elevation-box-shadow-down-2-2-blur)
-  var(--pgn-elevation-box-shadow-down-2-2-color) !default;
-$box-shadow-down-3: var(--pgn-elevation-box-shadow-down-3-1-offset-x)
-  var(--pgn-elevation-box-shadow-down-3-1-offset-y)
-  var(--pgn-elevation-box-shadow-down-3-1-blur)
-  var(--pgn-elevation-box-shadow-down-3-1-color),
-  var(--pgn-elevation-box-shadow-down-3-2-offset-y)
-  var(--pgn-elevation-box-shadow-down-3-2-offset-x)
-  var(--pgn-elevation-box-shadow-down-3-2-blur)
-  var(--pgn-elevation-box-shadow-down-3-2-color) !default;
-$box-shadow-down-4: var(--pgn-elevation-box-shadow-down-4-1-offset-x)
-  var(--pgn-elevation-box-shadow-down-4-1-offset-y)
-  var(--pgn-elevation-box-shadow-down-4-1-blur)
-  var(--pgn-elevation-box-shadow-down-4-1-color),
-  var(--pgn-elevation-box-shadow-down-4-2-offset-y)
-  var(--pgn-elevation-box-shadow-down-4-2-offset-x)
-  var(--pgn-elevation-box-shadow-down-4-2-blur)
-  var(--pgn-elevation-box-shadow-down-4-2-color) !default;
-$box-shadow-down-5: var(--pgn-elevation-box-shadow-down-5-1-offset-x)
-  var(--pgn-elevation-box-shadow-down-5-1-offset-y)
-  var(--pgn-elevation-box-shadow-down-5-1-blur)
-  var(--pgn-elevation-box-shadow-down-5-1-color),
-  var(--pgn-elevation-box-shadow-down-5-2-offset-y)
-  var(--pgn-elevation-box-shadow-down-5-2-offset-x)
-  var(--pgn-elevation-box-shadow-down-5-2-blur)
-  var(--pgn-elevation-box-shadow-down-5-2-color) !default;
-
-$box-shadow-left-1: var(--pgn-elevation-box-shadow-left-1-1-offset-x)
-  var(--pgn-elevation-box-shadow-left-1-1-offset-y)
-  var(--pgn-elevation-box-shadow-left-1-1-blur)
-  var(--pgn-elevation-box-shadow-left-1-1-color),
-  var(--pgn-elevation-box-shadow-left-1-2-offset-y)
-  var(--pgn-elevation-box-shadow-left-1-2-offset-x)
-  var(--pgn-elevation-box-shadow-left-1-2-blur)
-  var(--pgn-elevation-box-shadow-left-1-2-color) !default;
-$box-shadow-left-2: var(--pgn-elevation-box-shadow-left-2-1-offset-x)
-  var(--pgn-elevation-box-shadow-left-2-1-offset-y)
-  var(--pgn-elevation-box-shadow-left-2-1-blur)
-  var(--pgn-elevation-box-shadow-left-2-1-color),
-  var(--pgn-elevation-box-shadow-left-2-2-offset-y)
-  var(--pgn-elevation-box-shadow-left-2-2-offset-x)
-  var(--pgn-elevation-box-shadow-left-2-2-blur)
-  var(--pgn-elevation-box-shadow-left-2-2-color) !default;
-$box-shadow-left-3: var(--pgn-elevation-box-shadow-left-3-1-offset-x)
-  var(--pgn-elevation-box-shadow-left-3-1-offset-y)
-  var(--pgn-elevation-box-shadow-left-3-1-blur)
-  var(--pgn-elevation-box-shadow-left-3-1-color),
-  var(--pgn-elevation-box-shadow-left-3-2-offset-y)
-  var(--pgn-elevation-box-shadow-left-3-2-offset-x)
-  var(--pgn-elevation-box-shadow-left-3-2-blur)
-  var(--pgn-elevation-box-shadow-left-3-2-color) !default;
-$box-shadow-left-4: var(--pgn-elevation-box-shadow-left-4-1-offset-x)
-  var(--pgn-elevation-box-shadow-left-4-1-offset-y)
-  var(--pgn-elevation-box-shadow-left-4-1-blur)
-  var(--pgn-elevation-box-shadow-left-4-1-color),
-  var(--pgn-elevation-box-shadow-left-4-2-offset-y)
-  var(--pgn-elevation-box-shadow-left-4-2-offset-x)
-  var(--pgn-elevation-box-shadow-left-4-2-blur)
-  var(--pgn-elevation-box-shadow-left-4-2-color) !default;
-$box-shadow-left-5: var(--pgn-elevation-box-shadow-left-1-1-offset-x)
-  var(--pgn-elevation-box-shadow-left-1-1-offset-y)
-  var(--pgn-elevation-box-shadow-left-1-1-blur)
-  var(--pgn-elevation-box-shadow-left-1-1-color),
-  var(--pgn-elevation-box-shadow-left-1-2-offset-y)
-  var(--pgn-elevation-box-shadow-left-1-2-offset-x)
-  var(--pgn-elevation-box-shadow-left-1-2-blur)
-  var(--pgn-elevation-box-shadow-left-1-2-color) !default;
-
-$box-shadow-up-1: var(--pgn-elevation-box-shadow-up-1-1-offset-x)
-  var(--pgn-elevation-box-shadow-up-1-1-offset-y)
-  var(--pgn-elevation-box-shadow-up-1-1-blur)
-  var(--pgn-elevation-box-shadow-up-1-1-color),
-  var(--pgn-elevation-box-shadow-up-1-2-offset-y)
-  var(--pgn-elevation-box-shadow-up-1-2-offset-x)
-  var(--pgn-elevation-box-shadow-up-1-2-blur)
-  var(--pgn-elevation-box-shadow-up-1-2-color) !default;
-$box-shadow-up-2: var(--pgn-elevation-box-shadow-up-2-1-offset-x)
-  var(--pgn-elevation-box-shadow-up-2-1-offset-y)
-  var(--pgn-elevation-box-shadow-up-2-1-blur)
-  var(--pgn-elevation-box-shadow-up-2-1-color),
-  var(--pgn-elevation-box-shadow-up-2-2-offset-y)
-  var(--pgn-elevation-box-shadow-up-2-2-offset-x)
-  var(--pgn-elevation-box-shadow-up-2-2-blur)
-  var(--pgn-elevation-box-shadow-up-2-2-color) !default;
-$box-shadow-up-3: var(--pgn-elevation-box-shadow-up-3-1-offset-x)
-  var(--pgn-elevation-box-shadow-up-3-1-offset-y)
-  var(--pgn-elevation-box-shadow-up-3-1-blur)
-  var(--pgn-elevation-box-shadow-up-3-1-color),
-  var(--pgn-elevation-box-shadow-up-3-2-offset-y)
-  var(--pgn-elevation-box-shadow-up-3-2-offset-x)
-  var(--pgn-elevation-box-shadow-up-3-2-blur)
-  var(--pgn-elevation-box-shadow-up-3-2-color) !default;
-$box-shadow-up-4: var(--pgn-elevation-box-shadow-up-4-1-offset-x)
-  var(--pgn-elevation-box-shadow-up-4-1-offset-y)
-  var(--pgn-elevation-box-shadow-up-4-1-blur)
-  var(--pgn-elevation-box-shadow-up-4-1-color),
-  var(--pgn-elevation-box-shadow-up-4-2-offset-y)
-  var(--pgn-elevation-box-shadow-up-4-2-offset-x)
-  var(--pgn-elevation-box-shadow-up-4-2-blur)
-  var(--pgn-elevation-box-shadow-up-4-2-color) !default;
-$box-shadow-up-5: var(--pgn-elevation-box-shadow-up-5-1-offset-x)
-  var(--pgn-elevation-box-shadow-up-5-1-offset-y)
-  var(--pgn-elevation-box-shadow-up-5-1-blur)
-  var(--pgn-elevation-box-shadow-up-5-1-color),
-  var(--pgn-elevation-box-shadow-up-5-2-offset-y)
-  var(--pgn-elevation-box-shadow-up-5-2-offset-x)
-  var(--pgn-elevation-box-shadow-up-5-2-blur)
-  var(--pgn-elevation-box-shadow-up-5-2-color) !default;
-
-$box-shadow-right-1: var(--pgn-elevation-box-shadow-right-1-1-offset-x)
-  var(--pgn-elevation-box-shadow-right-1-1-offset-y)
-  var(--pgn-elevation-box-shadow-right-1-1-blur)
-  var(--pgn-elevation-box-shadow-right-1-1-color),
-  var(--pgn-elevation-box-shadow-right-1-2-offset-y)
-  var(--pgn-elevation-box-shadow-right-1-2-offset-x)
-  var(--pgn-elevation-box-shadow-right-1-2-blur)
-  var(--pgn-elevation-box-shadow-right-1-2-color) !default;
-$box-shadow-right-2: var(--pgn-elevation-box-shadow-right-2-1-offset-x)
-  var(--pgn-elevation-box-shadow-right-2-1-offset-y)
-  var(--pgn-elevation-box-shadow-right-2-1-blur)
-  var(--pgn-elevation-box-shadow-right-2-1-color),
-  var(--pgn-elevation-box-shadow-right-2-2-offset-y)
-  var(--pgn-elevation-box-shadow-right-2-2-offset-x)
-  var(--pgn-elevation-box-shadow-right-2-2-blur)
-  var(--pgn-elevation-box-shadow-right-2-2-color) !default;
-$box-shadow-right-3: var(--pgn-elevation-box-shadow-right-3-1-offset-x)
-  var(--pgn-elevation-box-shadow-right-3-1-offset-y)
-  var(--pgn-elevation-box-shadow-right-3-1-blur)
-  var(--pgn-elevation-box-shadow-right-3-1-color),
-  var(--pgn-elevation-box-shadow-right-3-2-offset-y)
-  var(--pgn-elevation-box-shadow-right-3-2-offset-x)
-  var(--pgn-elevation-box-shadow-right-3-2-blur)
-  var(--pgn-elevation-box-shadow-right-3-2-color) !default;
-$box-shadow-right-4: var(--pgn-elevation-box-shadow-right-4-1-offset-x)
-  var(--pgn-elevation-box-shadow-right-4-1-offset-y)
-  var(--pgn-elevation-box-shadow-right-4-1-blur)
-  var(--pgn-elevation-box-shadow-right-4-1-color),
-  var(--pgn-elevation-box-shadow-right-4-2-offset-y)
-  var(--pgn-elevation-box-shadow-right-4-2-offset-x)
-  var(--pgn-elevation-box-shadow-right-4-2-blur)
-  var(--pgn-elevation-box-shadow-right-4-2-color) !default;
-$box-shadow-right-5: var(--pgn-elevation-box-shadow-right-5-1-offset-x)
-  var(--pgn-elevation-box-shadow-right-5-1-offset-y)
-  var(--pgn-elevation-box-shadow-right-5-1-blur)
-  var(--pgn-elevation-box-shadow-right-5-1-color),
-  var(--pgn-elevation-box-shadow-right-5-2-offset-y)
-  var(--pgn-elevation-box-shadow-right-5-2-offset-x)
-  var(--pgn-elevation-box-shadow-right-5-2-blur)
-  var(--pgn-elevation-box-shadow-right-5-2-color) !default;
-
-$box-shadow-centered-1: var(--pgn-elevation-box-shadow-centered-1-1-offset-x)
-  var(--pgn-elevation-box-shadow-centered-1-1-offset-y)
-  var(--pgn-elevation-box-shadow-centered-1-1-blur)
-  var(--pgn-elevation-box-shadow-centered-1-1-color),
-  var(--pgn-elevation-box-shadow-centered-1-2-offset-y)
-  var(--pgn-elevation-box-shadow-centered-1-2-offset-x)
-  var(--pgn-elevation-box-shadow-centered-1-2-blur)
-  var(--pgn-elevation-box-shadow-centered-1-2-color) !default;
-$box-shadow-centered-2: var(--pgn-elevation-box-shadow-centered-2-1-offset-x)
-  var(--pgn-elevation-box-shadow-centered-2-1-offset-y)
-  var(--pgn-elevation-box-shadow-centered-2-1-blur)
-  var(--pgn-elevation-box-shadow-centered-2-1-color),
-  var(--pgn-elevation-box-shadow-centered-2-2-offset-y)
-  var(--pgn-elevation-box-shadow-centered-2-2-offset-x)
-  var(--pgn-elevation-box-shadow-centered-2-2-blur)
-  var(--pgn-elevation-box-shadow-centered-2-2-color) !default;
-$box-shadow-centered-3: var(--pgn-elevation-box-shadow-centered-3-1-offset-x)
-  var(--pgn-elevation-box-shadow-centered-3-1-offset-y)
-  var(--pgn-elevation-box-shadow-centered-3-1-blur)
-  var(--pgn-elevation-box-shadow-centered-3-1-color),
-  var(--pgn-elevation-box-shadow-centered-3-2-offset-y)
-  var(--pgn-elevation-box-shadow-centered-3-2-offset-x)
-  var(--pgn-elevation-box-shadow-centered-3-2-blur)
-  var(--pgn-elevation-box-shadow-centered-3-2-color) !default;
-$box-shadow-centered-4: var(--pgn-elevation-box-shadow-centered-4-1-offset-x)
-  var(--pgn-elevation-box-shadow-centered-4-1-offset-y)
-  var(--pgn-elevation-box-shadow-centered-4-1-blur)
-  var(--pgn-elevation-box-shadow-centered-4-1-color),
-  var(--pgn-elevation-box-shadow-centered-4-2-offset-y)
-  var(--pgn-elevation-box-shadow-centered-4-2-offset-x)
-  var(--pgn-elevation-box-shadow-centered-4-2-blur)
-  var(--pgn-elevation-box-shadow-centered-4-2-color) !default;
-$box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5-1-offset-x)
-  var(--pgn-elevation-box-shadow-centered-5-1-offset-y)
-  var(--pgn-elevation-box-shadow-centered-5-1-blur)
-  var(--pgn-elevation-box-shadow-centered-5-1-color),
-  var(--pgn-elevation-box-shadow-centered-5-2-offset-y)
-  var(--pgn-elevation-box-shadow-centered-5-2-offset-x)
-  var(--pgn-elevation-box-shadow-centered-5-2-blur)
-  var(--pgn-elevation-box-shadow-centered-5-2-color) !default;
+$level-1-box-shadow: var(--pgn-elevation-box-shadow-level-1) !default;
+
+$level-2-box-shadow: var(--pgn-elevation-box-shadow-level-2) !default;
+$level-3-box-shadow: var(--pgn-elevation-box-shadow-level-3) !default;
+$level-4-box-shadow: var(--pgn-elevation-box-shadow-level-4) !default;
+$level-5-box-shadow: var(--pgn-elevation-box-shadow-level-5) !default;
+
+$box-shadow-down-1: var(--pgn-elevation-box-shadow-down-1) !default;
+$box-shadow-down-2: var(--pgn-elevation-box-shadow-down-2) !default;
+$box-shadow-down-3: var(--pgn-elevation-box-shadow-down-3) !default;
+$box-shadow-down-4: var(--pgn-elevation-box-shadow-down-4) !default;
+$box-shadow-down-5: var(--pgn-elevation-box-shadow-down-5) !default;
+
+$box-shadow-left-1: var(--pgn-elevation-box-shadow-left-1) !default;
+$box-shadow-left-2: var(--pgn-elevation-box-shadow-left-2) !default;
+$box-shadow-left-3: var(--pgn-elevation-box-shadow-left-3) !default;
+$box-shadow-left-4: var(--pgn-elevation-box-shadow-left-4) !default;
+$box-shadow-left-5: var(--pgn-elevation-box-shadow-left-5) !default;
+
+$box-shadow-up-1: var(--pgn-elevation-box-shadow-up-1) !default;
+$box-shadow-up-2: var(--pgn-elevation-box-shadow-up-2) !default;
+$box-shadow-up-3: var(--pgn-elevation-box-shadow-up-3) !default;
+$box-shadow-up-4: var(--pgn-elevation-box-shadow-up-4) !default;
+$box-shadow-up-5: var(--pgn-elevation-box-shadow-up-5) !default;
+
+$box-shadow-right-1: var(--pgn-elevation-box-shadow-right-1) !default;
+$box-shadow-right-2: var(--pgn-elevation-box-shadow-right-2) !default;
+$box-shadow-right-3: var(--pgn-elevation-box-shadow-right-3) !default;
+$box-shadow-right-4: var(--pgn-elevation-box-shadow-right-4) !default;
+$box-shadow-right-5: var(--pgn-elevation-box-shadow-right-5) !default;
+
+$box-shadow-centered-1: var(--pgn-elevation-box-shadow-centered-1) !default;
+$box-shadow-centered-2: var(--pgn-elevation-box-shadow-centered-2) !default;
+$box-shadow-centered-3: var(--pgn-elevation-box-shadow-centered-3) !default;
+$box-shadow-centered-4: var(--pgn-elevation-box-shadow-centered-4) !default;
+$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:
-        var(--pgn-elevation-box-shadow-down-1-1-offset-x)
-        var(--pgn-elevation-box-shadow-down-1-1-offset-y)
-        var(--pgn-elevation-box-shadow-down-1-1-blur)
-        var(--pgn-elevation-box-shadow-down-1-1-color),
-        var(--pgn-elevation-box-shadow-down-1-2-offset-x)
-        var(--pgn-elevation-box-shadow-down-1-2-offset-y)
-        var(--pgn-elevation-box-shadow-down-1-2-blur)
-        var(--pgn-elevation-box-shadow-down-1-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-down-1);
     }
 
     @else if $level == 2 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-down-2-1-offset-x)
-        var(--pgn-elevation-box-shadow-down-2-1-offset-y)
-        var(--pgn-elevation-box-shadow-down-2-1-blur)
-        var(--pgn-elevation-box-shadow-down-2-1-color),
-        var(--pgn-elevation-box-shadow-down-2-2-offset-x)
-        var(--pgn-elevation-box-shadow-down-2-2-offset-y)
-        var(--pgn-elevation-box-shadow-down-2-2-blur)
-        var(--pgn-elevation-box-shadow-down-2-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-down-2);
     }
 
     @else if $level == 3 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-down-3-1-offset-x)
-        var(--pgn-elevation-box-shadow-down-3-1-offset-y)
-        var(--pgn-elevation-box-shadow-down-3-1-blur)
-        var(--pgn-elevation-box-shadow-down-3-1-color),
-        var(--pgn-elevation-box-shadow-down-3-2-offset-x)
-        var(--pgn-elevation-box-shadow-down-3-2-offset-y)
-        var(--pgn-elevation-box-shadow-down-3-2-blur)
-        var(--pgn-elevation-box-shadow-down-3-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-down-3);
     }
 
     @else if $level == 4 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-down-4-1-offset-x)
-        var(--pgn-elevation-box-shadow-down-4-1-offset-y)
-        var(--pgn-elevation-box-shadow-down-4-1-blur)
-        var(--pgn-elevation-box-shadow-down-4-1-color),
-        var(--pgn-elevation-box-shadow-down-4-2-offset-x)
-        var(--pgn-elevation-box-shadow-down-4-2-offset-y)
-        var(--pgn-elevation-box-shadow-down-4-2-blur)
-        var(--pgn-elevation-box-shadow-down-4-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-down-4);
     }
 
     @else if $level == 5 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-down-5-1-offset-x)
-        var(--pgn-elevation-box-shadow-down-5-1-offset-y)
-        var(--pgn-elevation-box-shadow-down-5-1-blur)
-        var(--pgn-elevation-box-shadow-down-5-1-color),
-        var(--pgn-elevation-box-shadow-down-5-2-offset-x)
-        var(--pgn-elevation-box-shadow-down-5-2-offset-y)
-        var(--pgn-elevation-box-shadow-down-5-2-blur)
-        var(--pgn-elevation-box-shadow-down-5-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-down-5);
     }
 
     @else {
@@ -783,63 +533,23 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5-1-offset-x)
 
   @if $side == "left" {
     @if $level == 1 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-left-1-1-offset-x)
-        var(--pgn-elevation-box-shadow-left-1-1-offset-y)
-        var(--pgn-elevation-box-shadow-left-1-1-blur)
-        var(--pgn-elevation-box-shadow-left-1-1-color),
-        var(--pgn-elevation-box-shadow-left-1-2-offset-x)
-        var(--pgn-elevation-box-shadow-left-1-2-offset-y)
-        var(--pgn-elevation-box-shadow-left-1-2-blur)
-        var(--pgn-elevation-box-shadow-left-1-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-left-1);
     }
 
     @else if $level == 2 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-left-2-1-offset-x)
-        var(--pgn-elevation-box-shadow-left-2-1-offset-y)
-        var(--pgn-elevation-box-shadow-left-2-1-blur)
-        var(--pgn-elevation-box-shadow-left-2-1-color),
-        var(--pgn-elevation-box-shadow-left-2-2-offset-x)
-        var(--pgn-elevation-box-shadow-left-2-2-offset-y)
-        var(--pgn-elevation-box-shadow-left-2-2-blur)
-        var(--pgn-elevation-box-shadow-left-2-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-left-2);
     }
 
     @else if $level == 3 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-left-3-1-offset-x)
-        var(--pgn-elevation-box-shadow-left-3-1-offset-y)
-        var(--pgn-elevation-box-shadow-left-3-1-blur)
-        var(--pgn-elevation-box-shadow-left-3-1-color),
-        var(--pgn-elevation-box-shadow-left-3-2-offset-x)
-        var(--pgn-elevation-box-shadow-left-3-2-offset-y)
-        var(--pgn-elevation-box-shadow-left-3-2-blur)
-        var(--pgn-elevation-box-shadow-left-3-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-left-3);
     }
 
     @else if $level == 4 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-left-4-1-offset-x)
-        var(--pgn-elevation-box-shadow-left-4-1-offset-y)
-        var(--pgn-elevation-box-shadow-left-4-1-blur)
-        var(--pgn-elevation-box-shadow-left-4-1-color),
-        var(--pgn-elevation-box-shadow-left-4-2-offset-x)
-        var(--pgn-elevation-box-shadow-left-4-2-offset-y)
-        var(--pgn-elevation-box-shadow-left-4-2-blur)
-        var(--pgn-elevation-box-shadow-left-4-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-left-4);
     }
 
     @else if $level == 5 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-left-5-1-offset-x)
-        var(--pgn-elevation-box-shadow-left-5-1-offset-y)
-        var(--pgn-elevation-box-shadow-left-5-1-blur)
-        var(--pgn-elevation-box-shadow-left-5-1-color),
-        var(--pgn-elevation-box-shadow-left-5-2-offset-x)
-        var(--pgn-elevation-box-shadow-left-5-2-offset-y)
-        var(--pgn-elevation-box-shadow-left-5-2-blur)
-        var(--pgn-elevation-box-shadow-left-5-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-left-5);
     }
 
     @else {
@@ -849,63 +559,23 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5-1-offset-x)
 
   @if $side == "up" {
     @if $level == 1 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-up-1-1-offset-x)
-        var(--pgn-elevation-box-shadow-up-1-1-offset-y)
-        var(--pgn-elevation-box-shadow-up-1-1-blur)
-        var(--pgn-elevation-box-shadow-up-1-1-color),
-        var(--pgn-elevation-box-shadow-up-1-2-offset-x)
-        var(--pgn-elevation-box-shadow-up-1-2-offset-y)
-        var(--pgn-elevation-box-shadow-up-1-2-blur)
-        var(--pgn-elevation-box-shadow-up-1-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-up-1);
     }
 
     @else if $level == 2 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-up-2-1-offset-x)
-        var(--pgn-elevation-box-shadow-up-2-1-offset-y)
-        var(--pgn-elevation-box-shadow-up-2-1-blur)
-        var(--pgn-elevation-box-shadow-up-2-1-color),
-        var(--pgn-elevation-box-shadow-up-2-2-offset-x)
-        var(--pgn-elevation-box-shadow-up-2-2-offset-y)
-        var(--pgn-elevation-box-shadow-up-2-2-blur)
-        var(--pgn-elevation-box-shadow-up-2-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-up-2);
     }
 
     @else if $level == 3 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-up-3-1-offset-x)
-        var(--pgn-elevation-box-shadow-up-3-1-offset-y)
-        var(--pgn-elevation-box-shadow-up-3-1-blur)
-        var(--pgn-elevation-box-shadow-up-3-1-color),
-        var(--pgn-elevation-box-shadow-up-3-2-offset-x)
-        var(--pgn-elevation-box-shadow-up-3-2-offset-y)
-        var(--pgn-elevation-box-shadow-up-3-2-blur)
-        var(--pgn-elevation-box-shadow-up-3-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-up-3);
     }
 
     @else if $level == 4 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-up-4-1-offset-x)
-        var(--pgn-elevation-box-shadow-up-4-1-offset-y)
-        var(--pgn-elevation-box-shadow-up-4-1-blur)
-        var(--pgn-elevation-box-shadow-up-4-1-color),
-        var(--pgn-elevation-box-shadow-up-4-2-offset-x)
-        var(--pgn-elevation-box-shadow-up-4-2-offset-y)
-        var(--pgn-elevation-box-shadow-up-4-2-blur)
-        var(--pgn-elevation-box-shadow-up-4-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-up-4);
     }
 
     @else if $level == 5 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-up-5-1-offset-x)
-        var(--pgn-elevation-box-shadow-up-5-1-offset-y)
-        var(--pgn-elevation-box-shadow-up-5-1-blur)
-        var(--pgn-elevation-box-shadow-up-5-1-color),
-        var(--pgn-elevation-box-shadow-up-5-2-offset-x)
-        var(--pgn-elevation-box-shadow-up-5-2-offset-y)
-        var(--pgn-elevation-box-shadow-up-5-2-blur)
-        var(--pgn-elevation-box-shadow-up-5-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-up-5);
     }
 
     @else {
@@ -915,63 +585,23 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5-1-offset-x)
 
   @if $side == "right" {
     @if $level == 1 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-right-1-1-offset-x)
-        var(--pgn-elevation-box-shadow-right-1-1-offset-y)
-        var(--pgn-elevation-box-shadow-right-1-1-blur)
-        var(--pgn-elevation-box-shadow-right-1-1-color),
-        var(--pgn-elevation-box-shadow-right-1-2-offset-x)
-        var(--pgn-elevation-box-shadow-right-1-2-offset-y)
-        var(--pgn-elevation-box-shadow-right-1-2-blur)
-        var(--pgn-elevation-box-shadow-right-1-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-right-1);
     }
 
     @else if $level == 2 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-right-2-1-offset-x)
-        var(--pgn-elevation-box-shadow-right-2-1-offset-y)
-        var(--pgn-elevation-box-shadow-right-2-1-blur)
-        var(--pgn-elevation-box-shadow-right-2-1-color),
-        var(--pgn-elevation-box-shadow-right-2-2-offset-x)
-        var(--pgn-elevation-box-shadow-right-2-2-offset-y)
-        var(--pgn-elevation-box-shadow-right-2-2-blur)
-        var(--pgn-elevation-box-shadow-right-2-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-right-2);
     }
 
     @else if $level == 3 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-right-3-1-offset-x)
-        var(--pgn-elevation-box-shadow-right-3-1-offset-y)
-        var(--pgn-elevation-box-shadow-right-3-1-blur)
-        var(--pgn-elevation-box-shadow-right-3-1-color),
-        var(--pgn-elevation-box-shadow-right-3-2-offset-x)
-        var(--pgn-elevation-box-shadow-right-3-2-offset-y)
-        var(--pgn-elevation-box-shadow-right-3-2-blur)
-        var(--pgn-elevation-box-shadow-right-3-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-right-3);
     }
 
     @else if $level == 4 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-right-4-1-offset-x)
-        var(--pgn-elevation-box-shadow-right-4-1-offset-y)
-        var(--pgn-elevation-box-shadow-right-4-1-blur)
-        var(--pgn-elevation-box-shadow-right-4-1-color),
-        var(--pgn-elevation-box-shadow-right-4-2-offset-x)
-        var(--pgn-elevation-box-shadow-right-4-2-offset-y)
-        var(--pgn-elevation-box-shadow-right-4-2-blur)
-        var(--pgn-elevation-box-shadow-right-4-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-right-4);
     }
 
     @else if $level == 5 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-right-5-1-offset-x)
-        var(--pgn-elevation-box-shadow-right-5-1-offset-y)
-        var(--pgn-elevation-box-shadow-right-5-1-blur)
-        var(--pgn-elevation-box-shadow-right-5-1-color),
-        var(--pgn-elevation-box-shadow-right-5-2-offset-x)
-        var(--pgn-elevation-box-shadow-right-5-2-offset-y)
-        var(--pgn-elevation-box-shadow-right-5-2-blur)
-        var(--pgn-elevation-box-shadow-right-5-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-right-5);
     }
 
     @else {
@@ -981,63 +611,23 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5-1-offset-x)
 
   @if $side == "centered" {
     @if $level == 1 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-centered-1-1-offset-x)
-        var(--pgn-elevation-box-shadow-centered-1-1-offset-y)
-        var(--pgn-elevation-box-shadow-centered-1-1-blur)
-        var(--pgn-elevation-box-shadow-centered-1-1-color),
-        var(--pgn-elevation-box-shadow-centered-1-2-offset-x)
-        var(--pgn-elevation-box-shadow-centered-1-2-offset-y)
-        var(--pgn-elevation-box-shadow-centered-1-2-blur)
-        var(--pgn-elevation-box-shadow-centered-1-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-centered-1);
     }
 
     @else if $level == 2 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-centered-2-1-offset-x)
-        var(--pgn-elevation-box-shadow-centered-2-1-offset-y)
-        var(--pgn-elevation-box-shadow-centered-2-1-blur)
-        var(--pgn-elevation-box-shadow-centered-2-1-color),
-        var(--pgn-elevation-box-shadow-centered-2-2-offset-x)
-        var(--pgn-elevation-box-shadow-centered-2-2-offset-y)
-        var(--pgn-elevation-box-shadow-centered-2-2-blur)
-        var(--pgn-elevation-box-shadow-centered-2-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-centered-2);
     }
 
     @else if $level == 3 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-centered-3-1-offset-x)
-        var(--pgn-elevation-box-shadow-centered-3-1-offset-y)
-        var(--pgn-elevation-box-shadow-centered-3-1-blur)
-        var(--pgn-elevation-box-shadow-centered-3-1-color),
-        var(--pgn-elevation-box-shadow-centered-3-2-offset-x)
-        var(--pgn-elevation-box-shadow-centered-3-2-offset-y)
-        var(--pgn-elevation-box-shadow-centered-3-2-blur)
-        var(--pgn-elevation-box-shadow-centered-3-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-centered-3);
     }
 
     @else if $level == 4 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-centered-4-1-offset-x)
-        var(--pgn-elevation-box-shadow-centered-4-1-offset-y)
-        var(--pgn-elevation-box-shadow-centered-4-1-blur)
-        var(--pgn-elevation-box-shadow-centered-4-1-color),
-        var(--pgn-elevation-box-shadow-centered-4-2-offset-x)
-        var(--pgn-elevation-box-shadow-centered-4-2-offset-y)
-        var(--pgn-elevation-box-shadow-centered-4-2-blur)
-        var(--pgn-elevation-box-shadow-centered-4-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-centered-4);
     }
 
     @else if $level == 5 {
-      box-shadow:
-        var(--pgn-elevation-box-shadow-centered-5-1-offset-x)
-        var(--pgn-elevation-box-shadow-centered-5-1-offset-y)
-        var(--pgn-elevation-box-shadow-centered-5-1-blur)
-        var(--pgn-elevation-box-shadow-centered-5-1-color),
-        var(--pgn-elevation-box-shadow-centered-5-2-offset-x)
-        var(--pgn-elevation-box-shadow-centered-5-2-offset-y)
-        var(--pgn-elevation-box-shadow-centered-5-2-blur)
-        var(--pgn-elevation-box-shadow-centered-5-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-centered-5);
     }
 
     @else {
diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss
index 9224aaf800..decd92b57e 100644
--- a/www/src/components/_doc-elements.scss
+++ b/www/src/components/_doc-elements.scss
@@ -279,15 +279,7 @@
       height: auto;
 
       &:focus {
-        box-shadow:
-          var(--pgn-elevation-box-shadow-level-4-1-offset-y)
-          var(--pgn-elevation-box-shadow-level-4-1-offset-x)
-          var(--pgn-elevation-box-shadow-level-4-1-blur)
-          var(--pgn-elevation-box-shadow-level-4-1-color),
-          var(--pgn-elevation-box-shadow-level-4-2-offset-y)
-          var(--pgn-elevation-box-shadow-level-4-2-offset-x)
-          var(--pgn-elevation-box-shadow-level-4-2-blur)
-          var(--pgn-elevation-box-shadow-level-4-2-color);
+        box-shadow: var(--pgn-elevation-box-shadow-level-4);
         border-radius: var(--pgn-size-border-radius-base);
       }
 
diff --git a/www/src/components/header/Header.scss b/www/src/components/header/Header.scss
index 9fd733ce36..ddd9dad3f2 100644
--- a/www/src/components/header/Header.scss
+++ b/www/src/components/header/Header.scss
@@ -42,15 +42,7 @@
     background-color: var(--pgn-color-white);
     width: 28rem;
     left: -3rem;
-    box-shadow:
-      var(--pgn-elevation-box-shadow-down-2-1-offset-y)
-      var(--pgn-elevation-box-shadow-down-2-1-offset-x)
-      var(--pgn-elevation-box-shadow-down-2-1-blur)
-      var(--pgn-elevation-box-shadow-down-2-1-color),
-      var(--pgn-elevation-box-shadow-down-2-2-offset-y)
-      var(--pgn-elevation-box-shadow-down-2-2-offset-x)
-      var(--pgn-elevation-box-shadow-down-2-2-blur)
-      var(--pgn-elevation-box-shadow-down-2-2-color);
+    box-shadow: var(--pgn-elevation-box-shadow-down-2);
 
     .pgn-doc__menu-items {
       max-height: 28rem;
diff --git a/www/src/scss/openedx-theme.scss b/www/src/scss/openedx-theme.scss
index 2ae63d6d3c..7a8bd39ee2 100644
--- a/www/src/scss/openedx-theme.scss
+++ b/www/src/scss/openedx-theme.scss
@@ -1,4 +1,5 @@
 @import "~paragon-style/scss/core/core";
 @import "~paragon-style/css/themes/light/variables";
 @import "~paragon-style/css/themes/light/utility-classes";
+@import "~paragon-style/css/themes/light/abstraction-variables";
 @import "base";