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 a06f5629a1..19519cd00a 100644
--- a/src/Annotation/index.scss
+++ b/src/Annotation/index.scss
@@ -1,5 +1,21 @@
 @import "mixins";
 
+: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)
+      var(--pgn-elevation-annotation-box-shadow-1-blur)
+      var(--pgn-elevation-annotation-box-shadow-1-color)
+    )
+    drop-shadow(
+      var(--pgn-elevation-annotation-box-shadow-2-offset-x)
+      var(--pgn-elevation-annotation-box-shadow-2-offset-y)
+      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);
diff --git a/src/Carousel/index.scss b/src/Carousel/index.scss
index a046f79f46..29e6bc078b 100644
--- a/src/Carousel/index.scss
+++ b/src/Carousel/index.scss
@@ -1,3 +1,26 @@
+: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)
+    var(--pgn-transition-carousel-base-behavior);
+
+  --pgn-transition-carousel-indicator:
+    var(--pgn-transition-carousel-indicator-property)
+    var(--pgn-transition-carousel-indicator-duration)
+    var(--pgn-transition-carousel-indicator-timing-function)
+    var(--pgn-transition-carousel-indicator-delay)
+    var(--pgn-transition-carousel-indicator-behavior);
+
+  --pgn-transition-carousel-control:
+    var(--pgn-transition-carousel-control-property)
+    var(--pgn-transition-carousel-control-duration)
+    var(--pgn-transition-carousel-control-timing-function)
+    var(--pgn-transition-carousel-control-delay)
+    var(--pgn-transition-carousel-control-behavior);
+}
+
 .carousel {
   position: relative;
 }
@@ -58,7 +81,7 @@
   .active.carousel-item-right {
     z-index: 0;
     opacity: 0;
-    transition: opacity 0s var(--pgn-transition-carousel-base);
+    transition: var(--pgn-transition-carousel-base);
   }
 }
 
diff --git a/src/CloseButton/index.scss b/src/CloseButton/index.scss
index cde16e1bb3..750f47d3f3 100644
--- a/src/CloseButton/index.scss
+++ b/src/CloseButton/index.scss
@@ -1,3 +1,11 @@
+: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);
diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss
index 62e8e01a3d..4292f5bde3 100644
--- a/src/DataTable/index.scss
+++ b/src/DataTable/index.scss
@@ -1,3 +1,15 @@
+: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-spacing-data-table-padding-cell:
+    var(--pgn-spacing-data-table-padding-cell-x)
+    var(--pgn-spacing-data-table-padding-cell-y);
+}
+
 .pgn__data-table-wrapper {
   font-size: var(--pgn-typography-font-size-sm);
   border-radius: var(--pgn-size-border-radius-base);
diff --git a/src/Dropdown/dropdown-bootstrap.scss b/src/Dropdown/dropdown-bootstrap.scss
index 49a4c052f1..2575d841c5 100644
--- a/src/Dropdown/dropdown-bootstrap.scss
+++ b/src/Dropdown/dropdown-bootstrap.scss
@@ -1,3 +1,9 @@
+:root {
+  --pgn-spacing-dropdown-padding-header:
+    var(--pgn-spacing-dropdown-padding-header-y)
+    var(--pgn-spacing-dropdown-padding-header-x);
+}
+
 .dropup,
 .dropright,
 .dropdown,
diff --git a/src/Dropzone/index.scss b/src/Dropzone/index.scss
index c1c4ae871c..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;
diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss
index b462f84da0..335d07fb06 100644
--- a/src/Form/_bootstrap-custom-forms.scss
+++ b/src/Form/_bootstrap-custom-forms.scss
@@ -1,3 +1,43 @@
+: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);
+
+  --pgn-transition-form-control:
+    var(--pgn-transition-form-control-1-property)
+    var(--pgn-transition-form-control-1-duration)
+    var(--pgn-transition-form-control-1-timing-function)
+    var(--pgn-transition-form-control-1-delay)
+    var(--pgn-transition-form-control-1-behavior),
+    var(--pgn-transition-form-control-2-property)
+    var(--pgn-transition-form-control-2-duration)
+    var(--pgn-transition-form-control-2-timing-function)
+    var(--pgn-transition-form-control-2-delay)
+    var(--pgn-transition-form-control-2-behavior),
+    var(--pgn-transition-form-control-3-property)
+    var(--pgn-transition-form-control-3-duration)
+    var(--pgn-transition-form-control-3-timing-function)
+    var(--pgn-transition-form-control-3-delay)
+    var(--pgn-transition-form-control-3-behavior);
+}
+
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
 // https://useiconic.com/open
diff --git a/src/Form/_index.scss b/src/Form/_index.scss
index ccf3f58818..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 {
diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss
index 6493a51fa9..89af16b140 100644
--- a/src/Form/_mixins.scss
+++ b/src/Form/_mixins.scss
@@ -1,3 +1,25 @@
+: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);
+
+  --pgn-spacing-form-control-select-feedback-icon-position:
+    var(--pgn-spacing-form-control-select-feedback-icon-position-position-y)
+    var(--pgn-spacing-form-control-select-feedback-icon-position-position-x)
+    var(--pgn-spacing-form-control-select-feedback-icon-position-offset-x)
+    var(--pgn-spacing-form-control-select-feedback-icon-position-offset-y);
+
+  --pgn-other-content-form-control-select-bg:
+    var(--pgn-other-content-form-control-select-bg-image)
+    var(--pgn-other-content-form-control-select-bg-position-x)
+    var(--pgn-other-content-form-control-select-bg-offset-y)
+    var(--pgn-other-content-form-control-select-bg-position-y)
+    / var(--pgn-other-content-form-control-select-bg-color); // stylelint-disable-line scss/operator-no-newline-before
+}
+
 @mixin form-control-floating-label-initial(
   $padding-x,
   $padding-y,
diff --git a/src/IconButton/index.scss b/src/IconButton/index.scss
index d1454db5d9..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));
 
diff --git a/src/Menu/index.scss b/src/Menu/index.scss
index fddd792f10..1d3fded3f3 100644
--- a/src/Menu/index.scss
+++ b/src/Menu/index.scss
@@ -1,3 +1,11 @@
+: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);
diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss
index a49be42af7..112574551d 100644
--- a/src/Modal/_ModalDialog.scss
+++ b/src/Modal/_ModalDialog.scss
@@ -1,3 +1,23 @@
+: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-spacing-modal-footer-padding-base:
+    var(--pgn-spacing-modal-footer-padding-base-y)
+    var(--pgn-spacing-modal-footer-padding-base-x);
+
+  --pgn-spacing-modal-header-padding-base:
+    var(--pgn-spacing-modal-header-padding-base-y)
+    var(--pgn-spacing-modal-header-padding-base-x);
+}
+
 .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));
diff --git a/src/Nav/index.scss b/src/Nav/index.scss
index 7257f889b3..88fc0109a7 100644
--- a/src/Nav/index.scss
+++ b/src/Nav/index.scss
@@ -1,5 +1,13 @@
 @import "mixins";
 
+:root {
+  --pgn-border-color-nav-tabs-link-border-hover:
+    var(--pgn-border-color-nav-tabs-link-border-hover-top)
+    var(--pgn-border-color-nav-tabs-link-border-hover-right)
+    var(--pgn-border-color-nav-tabs-link-border-hover-bottom)
+    var(--pgn-border-color-nav-tabs-link-border-hover-left);
+}
+
 // Base class
 //
 // Kickstart any navigation component with a set of style resets. Works with
diff --git a/src/Pagination/pagination-bootstrap.scss b/src/Pagination/pagination-bootstrap.scss
index 505732b90d..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;
 
diff --git a/src/ProgressBar/bootstrap-progress.scss b/src/ProgressBar/bootstrap-progress.scss
index 27bee9a446..77779f295f 100644
--- a/src/ProgressBar/bootstrap-progress.scss
+++ b/src/ProgressBar/bootstrap-progress.scss
@@ -1,3 +1,18 @@
+:root {
+  --pgn-transition-progress-bar-animation-timing:
+    var(--pgn-transition-progress-bar-animation-timing-duration)
+    var(--pgn-transition-progress-bar-animation-timing-timing-function)
+    var(--pgn-transition-progress-bar-animation-timing-iteration-count)
+    var(--pgn-transition-progress-bar-animation-timing-delay);
+
+  --pgn-transition-progress-bar-transition:
+    var(--pgn-transition-progress-bar-transition-property)
+    var(--pgn-transition-progress-bar-transition-duration)
+    var(--pgn-transition-progress-bar-transition-timing-function)
+    var(--pgn-transition-progress-bar-transition-delay)
+    var(--pgn-transition-progress-bar-transition-behavior);
+}
+
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
     from { background-position: var(--pgn-size-progress-bar-height-base) 0; }
@@ -10,7 +25,7 @@
   height: var(--pgn-size-progress-bar-height-base);
   overflow: hidden;
   line-height: 0;
-  background-color: var(--pgn-color-progress-bar-bg);
+  background-color: var(--pgn-color-progress-bg);
   box-shadow: var(--pgn-elevation-progress-bar-box-shadow);
 
   @include font-size(var(--pgn-typography-progress-bar-font-size));
@@ -22,12 +37,12 @@
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: var(--pgn-color-progress-bar-bar-base);
+  color: var(--pgn-color-progress-bar-base);
   text-align: center;
   white-space: nowrap;
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 
-  @include transition(var(--pgn-transition-progress-bar-bar-transition));
+  @include transition(var(--pgn-transition-progress-bar-transition));
 }
 
 .progress-bar-striped {
@@ -38,7 +53,7 @@
 
 @if $enable-transitions {
   .progress-bar-animated {
-    animation: var(--pgn-transition-progress-bar-bar-animation-timing) progress-bar-stripes;
+    animation: var(--pgn-transition-progress-bar-animation-timing) progress-bar-stripes;
 
     @if $enable-prefers-reduced-motion-media-query {
       @media (prefers-reduced-motion: reduce) {
diff --git a/src/ProgressBar/index.scss b/src/ProgressBar/index.scss
index 96271b1813..2489e94453 100644
--- a/src/ProgressBar/index.scss
+++ b/src/ProgressBar/index.scss
@@ -6,7 +6,7 @@
 }
 
 .progress-bar {
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 }
 
 .pgn__progress-annotated {
@@ -22,7 +22,7 @@
     border: none;
 
     .progress-bar {
-      background-color: var(--pgn-color-progress-bar-bar-bg-annotated);
+      background-color: var(--pgn-color-progress-bar-bg-annotated);
       overflow: visible;
       position: relative;
     }
diff --git a/src/Sticky/index.scss b/src/Sticky/index.scss
index 54b78b0b02..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%;
diff --git a/src/Toast/index.scss b/src/Toast/index.scss
index 866e049709..043f65b9bc 100644
--- a/src/Toast/index.scss
+++ b/src/Toast/index.scss
@@ -1,5 +1,17 @@
 @import "bootstrap-toast";
 
+: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)
+    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);
+}
+
 .toast {
   background-color: var(--pgn-color-toast-bg);
   box-shadow: var(--pgn-elevation-toast-box-shadow);
diff --git a/src/Tooltip/index.scss b/src/Tooltip/index.scss
index 722dd95328..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;
diff --git a/styles/css/core/abstraction-variables.css b/styles/css/core/abstraction-variables.css
new file mode 100644
index 0000000000..c27ac4eccb
--- /dev/null
+++ b/styles/css/core/abstraction-variables.css
@@ -0,0 +1,44 @@
+:root {
+  /**
+   * TRANSITION
+   */
+  --pgn-transition-base:
+    var(--pgn-transition-base-property)
+    var(--pgn-transition-base-duration)
+    var(--pgn-transition-base-timing-function)
+    var(--pgn-transition-base-delay)
+    var(--pgn-transition-base-behavior);
+
+  --pgn-transition-fade:
+    var(--pgn-transition-fade-property)
+    var(--pgn-transition-fade-duration)
+    var(--pgn-transition-fade-timing-function)
+    var(--pgn-transition-fade-delay)
+    var(--pgn-transition-fade-behavior);
+
+  --pgn-transition-collapse-height:
+    var(--pgn-transition-collapse-height-property)
+    var(--pgn-transition-collapse-height-duration)
+    var(--pgn-transition-collapse-height-timing-function)
+    var(--pgn-transition-collapse-height-delay)
+    var(--pgn-transition-collapse-height-behavior);
+
+  --pgn-transition-collapse-width:
+    var(--pgn-transition-collapse-width-property)
+    var(--pgn-transition-collapse-width-duration)
+    var(--pgn-transition-collapse-width-timing-function)
+    var(--pgn-transition-collapse-width-delay)
+    var(--pgn-transition-collapse-width-behavior);
+
+  --pgn-transition-form-input:
+    var(--pgn-transition-form-input-1-property)
+    var(--pgn-transition-form-input-1-duration)
+    var(--pgn-transition-form-input-1-timing-function)
+    var(--pgn-transition-form-input-1-delay)
+    var(--pgn-transition-form-input-1-behavior),
+    var(--pgn-transition-form-input-2-property)
+    var(--pgn-transition-form-input-2-duration)
+    var(--pgn-transition-form-input-2-timing-function)
+    var(--pgn-transition-form-input-2-delay)
+    var(--pgn-transition-form-input-2-behavior);
+}
diff --git a/styles/css/core/index.css b/styles/css/core/index.css
index 4a993a982b..f95813ae45 100644
--- a/styles/css/core/index.css
+++ b/styles/css/core/index.css
@@ -1,2 +1,3 @@
-@import "custom-media-breakpoints.css";
 @import "variables.css";
+@import "abstraction-variables.css";
+@import "custom-media-breakpoints.css";
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index 1f35a623c1..10e2eec4f5 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -30,18 +30,76 @@
   --pgn-elevation-modal-zindex: 1050;
   --pgn-elevation-modal-backdrop-zindex: 1040;
   --pgn-elevation-dropdown-zindex: 1000;
-  --pgn-transition-collapse-width: width .35s ease; /* Collapse transition for width that takes 350ms */
-  --pgn-transition-collapse-height: height .35s ease; /* Collapse transition for height that takes 350ms */
-  --pgn-transition-fade: opacity .15s linear; /* Opacity transition that takes 150ms */
-  --pgn-transition-base: all .2s ease-in-out; /* Generic transition for any property change */
-  --pgn-transition-progress-bar-bar-transition: width .6s ease;
-  --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite;
-  --pgn-transition-form-control: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  --pgn-transition-form-input: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  --pgn-transition-carousel-control: opacity .15s ease;
-  --pgn-transition-carousel-indicator: opacity .6s ease;
+  --pgn-transition-collapse-width-behavior: normal; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-width-delay: 0s; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-width-timing-function: ease; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-width-duration: 0.35s; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-width-property: width; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-height-behavior: normal; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-collapse-height-delay: 0s; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-collapse-height-timing-function: ease; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-collapse-height-duration: 0.35s; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-collapse-height-property: height; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-fade-behavior: normal; /* Opacity transition that takes 150ms */
+  --pgn-transition-fade-delay: 0s; /* Opacity transition that takes 150ms */
+  --pgn-transition-fade-timing-function: linear; /* Opacity transition that takes 150ms */
+  --pgn-transition-fade-duration: 0.15s; /* Opacity transition that takes 150ms */
+  --pgn-transition-fade-property: opacity; /* Opacity transition that takes 150ms */
+  --pgn-transition-base-behavior: normal; /* Generic transition for any property change */
+  --pgn-transition-base-delay: 0s; /* Generic transition for any property change */
+  --pgn-transition-base-timing-function: ease-in-out; /* Generic transition for any property change */
+  --pgn-transition-base-duration: 0.2s; /* Generic transition for any property change */
+  --pgn-transition-base-property: all; /* Generic transition for any property change */
+  --pgn-transition-progress-bar-transition-behavior: normal;
+  --pgn-transition-progress-bar-transition-delay: 0s;
+  --pgn-transition-progress-bar-transition-timing-function: ease;
+  --pgn-transition-progress-bar-transition-duration: 0.6s;
+  --pgn-transition-progress-bar-transition-property: width;
+  --pgn-transition-progress-bar-animation-timing-iteration-count: infinite;
+  --pgn-transition-progress-bar-animation-timing-delay: 0s;
+  --pgn-transition-progress-bar-animation-timing-timing-function: linear;
+  --pgn-transition-progress-bar-animation-timing-duration: 1s;
+  --pgn-transition-form-control-3-behavior: normal;
+  --pgn-transition-form-control-3-delay: 0s;
+  --pgn-transition-form-control-3-timing-function: ease-in-out;
+  --pgn-transition-form-control-3-duration: 0.15s;
+  --pgn-transition-form-control-3-property: box-shadow;
+  --pgn-transition-form-control-2-behavior: normal;
+  --pgn-transition-form-control-2-delay: 0s;
+  --pgn-transition-form-control-2-timing-function: ease-in-out;
+  --pgn-transition-form-control-2-duration: 0.15s;
+  --pgn-transition-form-control-2-property: border-color;
+  --pgn-transition-form-control-1-behavior: normal;
+  --pgn-transition-form-control-1-delay: 0s;
+  --pgn-transition-form-control-1-timing-function: ease-in-out;
+  --pgn-transition-form-control-1-duration: 0.15s;
+  --pgn-transition-form-control-1-property: background-color;
+  --pgn-transition-form-input-2-behavior: normal;
+  --pgn-transition-form-input-2-delay: 0s;
+  --pgn-transition-form-input-2-timing-function: ease-in-out;
+  --pgn-transition-form-input-2-duration: 0.15s;
+  --pgn-transition-form-input-2-property: box-shadow;
+  --pgn-transition-form-input-1-behavior: normal;
+  --pgn-transition-form-input-1-delay: 0s;
+  --pgn-transition-form-input-1-timing-function: ease-in-out;
+  --pgn-transition-form-input-1-duration: 0.15s;
+  --pgn-transition-form-input-1-property: border-color;
+  --pgn-transition-carousel-control-behavior: normal;
+  --pgn-transition-carousel-control-delay: 0ms;
+  --pgn-transition-carousel-control-timing-function: ease;
+  --pgn-transition-carousel-control-duration: 0.15s;
+  --pgn-transition-carousel-control-property: opacity;
+  --pgn-transition-carousel-indicator-behavior: normal;
+  --pgn-transition-carousel-indicator-delay: 0ms;
+  --pgn-transition-carousel-indicator-timing-function: ease;
+  --pgn-transition-carousel-indicator-duration: var(--pgn-transition-carousel-duration);
+  --pgn-transition-carousel-indicator-property: opacity;
   --pgn-transition-carousel-duration: 0.6s;
-  --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
+  --pgn-transition-carousel-base-behavior: normal;
+  --pgn-transition-carousel-base-delay: 0ms;
+  --pgn-transition-carousel-base-timing-function: ease-in-out;
+  --pgn-transition-carousel-base-duration: var(--pgn-transition-carousel-duration);
+  --pgn-transition-carousel-base-property: transform;
   --pgn-transition-btn: none;
   --pgn-transition-badge: none;
   --pgn-typography-print-page-size: a3;
@@ -87,7 +145,7 @@
   --pgn-typography-font-size-micro: 0.688rem; /* Micro utils text font size. */
   --pgn-typography-font-size-xs: 0.75rem; /* X-small font size. */
   --pgn-typography-font-size-sm: 0.875rem; /* Small font size. */
-  --pgn-typography-font-size-lg: var(--pgn-typography-font-size-base) * 1.25; /* Lead text font size. */
+  --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25); /* Lead text font size. */
   --pgn-typography-font-size-base: 1.125rem; /* Base font size. */
   --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Monospace font family. */
   --pgn-typography-font-family-serif: serif; /* Serif font family. */
@@ -159,7 +217,7 @@
   --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base);
   --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size);
-  --pgn-typography-code-font-size: 87.5%;
+  --pgn-typography-code-font-size: var(--pgn-typography-font-size-sm);
   --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5);
   --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-xs);
@@ -258,9 +316,11 @@
   --pgn-spacing-nav-link-padding-y: 0.5rem;
   --pgn-spacing-modal-dialog-margin: 1.5rem;
   --pgn-spacing-modal-header-padding-y: 1rem;
-  --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem;
+  --pgn-spacing-modal-header-padding-base-y: var(--pgn-spacing-modal-header-padding-y);
+  --pgn-spacing-modal-header-padding-base-x: 1.5rem;
   --pgn-spacing-modal-footer-padding-y: 1rem;
-  --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem;
+  --pgn-spacing-modal-footer-padding-base-y: var(--pgn-spacing-modal-footer-padding-y);
+  --pgn-spacing-modal-footer-padding-base-x: 1.5rem;
   --pgn-spacing-modal-inner-padding-bottom: 0.7rem;
   --pgn-spacing-modal-inner-padding-base: 1.5rem;
   --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
@@ -274,7 +334,10 @@
   --pgn-spacing-form-control-select-feedback-tooltip-padding-x: 0.5rem;
   --pgn-spacing-form-control-select-feedback-tooltip-padding-y: 0.25rem;
   --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top);
-  --pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
+  --pgn-spacing-form-control-select-feedback-icon-position-offset-y: 0;
+  --pgn-spacing-form-control-select-feedback-icon-position-offset-x: calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
+  --pgn-spacing-form-control-select-feedback-icon-position-position-x: right;
+  --pgn-spacing-form-control-select-feedback-icon-position-position-y: center;
   --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
   --pgn-spacing-form-control-select-indicator-padding: 1rem;
   --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg);
@@ -303,14 +366,16 @@
   --pgn-spacing-dropzone-padding: 1.5rem;
   --pgn-spacing-dropdown-close-container-top: 0.625rem;
   --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
-  --pgn-spacing-dropdown-padding-header: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-item);
+  --pgn-spacing-dropdown-padding-header-y: 0.5rem;
+  --pgn-spacing-dropdown-padding-header-x: var(--pgn-spacing-dropdown-padding-x-item);
   --pgn-spacing-dropdown-padding-y-item: 0.25rem;
   --pgn-spacing-dropdown-padding-y-base: 0.5rem;
   --pgn-spacing-dropdown-padding-x-item: 1rem;
   --pgn-spacing-dropdown-padding-x-base: 0rem;
   --pgn-spacing-dropdown-spacer: 0.125rem;
   --pgn-spacing-data-table-footer-position: center;
-  --pgn-spacing-data-table-padding-cell: 0.5rem 0.75rem;
+  --pgn-spacing-data-table-padding-cell-y: 0.75rem;
+  --pgn-spacing-data-table-padding-cell-x: 0.5rem;
   --pgn-spacing-data-table-padding-small: 0.5rem;
   --pgn-spacing-data-table-padding-y: 0.75rem;
   --pgn-spacing-data-table-padding-x: 0.75rem;
diff --git a/styles/css/themes/light/abstraction-variables.css b/styles/css/themes/light/abstraction-variables.css
new file mode 100644
index 0000000000..7de59902cb
--- /dev/null
+++ b/styles/css/themes/light/abstraction-variables.css
@@ -0,0 +1,304 @@
+:root {
+  /**
+   * ELEVATION
+   */
+  --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..e997ed9633 100644
--- a/styles/css/themes/light/index.css
+++ b/styles/css/themes/light/index.css
@@ -1,2 +1,3 @@
 @import "variables.css";
+@import "abstraction-variables.css";
 @import "utility-classes.css";
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index c146b74630..d93bcbd0bb 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -5,7 +5,10 @@
 
 :root {
   --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
-  --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base);
+  --pgn-border-color-nav-tabs-link-border-hover-left: transparent;
+  --pgn-border-color-nav-tabs-link-border-hover-bottom: var(--pgn-color-nav-tabs-base-border-base);
+  --pgn-border-color-nav-tabs-link-border-hover-right: transparent;
+  --pgn-border-color-nav-tabs-link-border-hover-top: transparent;
   --pgn-border-color-nav-tabs-link-border-active: var(--pgn-color-primary-500);
   --pgn-content-navbar-toggler-light-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2300000080' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
   --pgn-content-navbar-toggler-dark-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23FFFFFF80' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
@@ -303,11 +306,11 @@
   --pgn-color-search-field-border-focus: var(--pgn-color-black);
   --pgn-color-search-field-border-interaction: var(--pgn-color-black);
   --pgn-color-search-field-border-base: var(--pgn-color-gray-500);
-  --pgn-color-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500);
-  --pgn-color-progress-bar-bar-bg-base: var(--pgn-color-accent-a);
-  --pgn-color-progress-bar-bar-base: var(--pgn-color-white);
+  --pgn-color-progress-bg: #00000000;
   --pgn-color-progress-bar-border: var(--pgn-color-gray-500);
-  --pgn-color-progress-bar-bg: #00000000;
+  --pgn-color-progress-bar-bg-annotated: var(--pgn-color-dark-500);
+  --pgn-color-progress-bar-bg-base: var(--pgn-color-accent-a);
+  --pgn-color-progress-bar-base: var(--pgn-color-white);
   --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000;
   --pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg);
   --pgn-color-product-tour-checkpoint-box-shadow: #0000004D;
@@ -1518,7 +1521,12 @@
   --pgn-other-modal-opacity: .5;
   --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23C32D3AFF' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23C32D3AFF' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
   --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23178253FF' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
-  --pgn-other-content-form-control-select-bg: var(--pgn-other-content-form-control-select-indicator-icon) no-repeat right var(--pgn-spacing-form-input-padding-y-base) center / var(--pgn-color-form-control-select-bg-base);
+  --pgn-other-content-form-control-select-bg-position-y: center;
+  --pgn-other-content-form-control-select-bg-offset-y: var(--pgn-spacing-form-input-padding-y-base);
+  --pgn-other-content-form-control-select-bg-position-x: right;
+  --pgn-other-content-form-control-select-bg-repeat: no-repeat;
+  --pgn-other-content-form-control-select-bg-image: var(--pgn-other-content-form-control-select-indicator-icon);
+  --pgn-other-content-form-control-select-bg-color: var(--pgn-color-form-control-select-bg-base);
   --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="%23454545FF"/></svg>');
   --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e");
   --pgn-other-content-form-control-switch-indicator-icon-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e");
@@ -1534,115 +1542,522 @@
   --pgn-other-carousel-control-opacity-base: .5;
   --pgn-other-btn-disabled-opacity: .65;
   --pgn-other-form-feedback-tooltip-opacity: .9;
-  --pgn-elevation-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); /* Centered box shadow of level 5. */
-  --pgn-elevation-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); /* Centered box shadow of level 4. */
-  --pgn-elevation-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); /* Centered box shadow of level 3. */
-  --pgn-elevation-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); /* Centered box shadow of level 2. */
-  --pgn-elevation-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); /* Centered box shadow of level 1. */
-  --pgn-elevation-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); /* Right box shadow of level 5. */
-  --pgn-elevation-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); /* Right box shadow of level 4. */
-  --pgn-elevation-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); /* Right box shadow of level 3. */
-  --pgn-elevation-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); /* Right box shadow of level 2. */
-  --pgn-elevation-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); /* Right box shadow of level 1. */
-  --pgn-elevation-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); /* Basic box shadow of level 5. */
-  --pgn-elevation-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); /* Top box shadow of level 4. */
-  --pgn-elevation-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); /* Top box shadow of level 3. */
-  --pgn-elevation-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); /* Top box shadow of level 2. */
-  --pgn-elevation-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); /* Top box shadow of level 1. */
-  --pgn-elevation-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); /* Left box shadow of level 5. */
-  --pgn-elevation-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); /* Left box shadow of level 4. */
-  --pgn-elevation-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); /* Left box shadow of level 3. */
-  --pgn-elevation-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); /* Left box shadow of level 2. */
-  --pgn-elevation-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); /* Left box shadow of level 1. */
-  --pgn-elevation-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 5. */
-  --pgn-elevation-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 4. */
-  --pgn-elevation-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 3. */
-  --pgn-elevation-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 2. */
-  --pgn-elevation-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 1. */
-  --pgn-elevation-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); /* Large box shadow. */
-  --pgn-elevation-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); /* Small box shadow. */
-  --pgn-elevation-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); /* Default box shadow. */
-  --pgn-elevation-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); /* Basic box shadow of level 5. */
-  --pgn-elevation-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); /* Basic box shadow of level 4. */
-  --pgn-elevation-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); /* Basic box shadow of level 3. */
-  --pgn-elevation-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); /* Basic box shadow of level 2. */
-  --pgn-elevation-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); /* Basic box shadow of level 1. */
-  --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
-  --pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
-  --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
-  --pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
+  --pgn-elevation-box-shadow-centered-5-2-blur: 3rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-offset-y: 0rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-offset-x: 0rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-blur: 2.5rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-offset-y: 0rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-offset-x: 0rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-4-2-blur: 1.25rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-offset-y: 0rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-offset-x: 0rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-blur: 1.25rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-offset-y: 0rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-offset-x: 0rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-3-2-blur: 1rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-offset-y: 0rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-offset-x: 0rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-blur: 0.625rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-offset-y: 0rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-offset-x: 0rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-2-2-blur: 0.5rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-offset-y: 0rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-offset-x: 0rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-blur: 0.25rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-offset-y: 0rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-offset-x: 0rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-1-2-blur: 0.25rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-offset-y: 0rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-offset-x: 0rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-blur: 0.125rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-offset-y: 0rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-offset-x: 0rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-5-2-blur: 3rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-offset-y: 0rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-offset-x: 0.5rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-blur: 2.5rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-offset-y: 0rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-offset-x: 1.25rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-4-2-blur: 1.25rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-offset-y: 0rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-offset-x: 0.5rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-blur: 1.25rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-offset-y: 0rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-offset-x: 0.625rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-3-2-blur: 0.625rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-offset-y: 0rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-offset-x: 0.25rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-blur: 1rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-offset-y: 0rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-offset-x: 0.5rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-2-2-blur: 0.5rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-offset-y: 0rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-offset-x: 0.125rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-blur: 0.25rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-offset-y: 0rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-offset-x: 0.125rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-1-2-blur: 0.25rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-offset-y: 0rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-offset-x: 0.0625rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-blur: 0.125rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-offset-y: 0rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-offset-x: 0.0625rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-5-2-blur: 3rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-offset-y: -0.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-offset-x: 0rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-blur: 2.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-offset-y: -1.25rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-offset-x: 0rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-4-2-blur: 1.25rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-offset-y: -0.5rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-offset-x: 0rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-blur: 1.25rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-offset-y: -0.625rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-offset-x: 0rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-3-2-blur: 0.625rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-offset-y: -0.25rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-offset-x: 0rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-blur: 1rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-offset-y: -0.5rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-offset-x: 0rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-2-2-blur: 0.5rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-offset-y: -0.125rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-offset-x: 0rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-blur: 0.25rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-offset-y: -0.125rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-offset-x: 0rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-1-2-blur: 0.25rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-offset-y: -0.0625rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-offset-x: 0rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-blur: 0.125rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-offset-y: -0.0625rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-offset-x: 0rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-5-2-blur: 3rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-offset-y: 0rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-offset-x: -0.5rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-blur: 2.5rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-offset-y: 0rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-offset-x: -1.25rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-4-2-blur: 1.25rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-offset-y: 0rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-offset-x: -0.5rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-blur: 1.25rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-offset-y: 0rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-offset-x: -0.625rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-3-2-blur: 0.625rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-offset-y: 0rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-offset-x: -0.25rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-blur: 1rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-offset-y: 0rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-offset-x: -0.5rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-2-2-blur: 0.5rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-offset-y: 0rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-offset-x: -0.125rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-blur: 0.25rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-offset-y: 0rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-offset-x: -0.125rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-1-2-blur: 0.25rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-offset-y: 0rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-offset-x: -0.0625rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-blur: 0.125rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-offset-y: 0rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-offset-x: -0.0625rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-5-2-blur: 2.5rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-offset-y: 0.5rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-offset-x: 0rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-blur: 2.5rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-offset-y: 1.25px; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-offset-x: 0rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-4-2-blur: 1.25rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-offset-y: 0.5rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-offset-x: 0rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-blur: 1.25rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-offset-y: 0.625rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-offset-x: 0rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-3-2-blur: 0.625rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-offset-y: 0.25rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-offset-x: 0rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-blur: 1rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-offset-y: 0.5rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-offset-x: 0rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-2-2-blur: 0.5rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-offset-y: 0.125rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-offset-x: 0rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-blur: 0.25rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-offset-y: 0.125rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-offset-x: 0rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-1-2-blur: 0.25rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-offset-y: 0.0625rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-offset-x: 0rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-blur: 0.125rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-offset-y: 0.0625rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-offset-x: 0rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-lg-blur: 0.5rem; /* Large box shadow. */
+  --pgn-elevation-box-shadow-lg-offset-y: 0.25rem; /* Large box shadow. */
+  --pgn-elevation-box-shadow-lg-offset-x: 0rem; /* Large box shadow. */
+  --pgn-elevation-box-shadow-lg-color: rgba(0, 0, 0, 0.3); /* Large box shadow. */
+  --pgn-elevation-box-shadow-sm-blur: 0.125rem; /* Small box shadow. */
+  --pgn-elevation-box-shadow-sm-offset-y: 0.0625rem; /* Small box shadow. */
+  --pgn-elevation-box-shadow-sm-offset-x: 0rem; /* Small box shadow. */
+  --pgn-elevation-box-shadow-sm-color: rgba(0, 0, 0, 0.2); /* Small box shadow. */
+  --pgn-elevation-box-shadow-base-blur: 0.25rem; /* Default box shadow. */
+  --pgn-elevation-box-shadow-base-offset-y: 0.125rem; /* Default box shadow. */
+  --pgn-elevation-box-shadow-base-offset-x: 0rem; /* Default box shadow. */
+  --pgn-elevation-box-shadow-base-color: rgba(0, 0, 0, 0.3); /* Default box shadow. */
+  --pgn-elevation-box-shadow-level-5-2-blur: 2.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-offset-y: 0.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-offset-x: 0rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-blur: 2.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-offset-y: 1.25px; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-offset-x: 0rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-4-2-blur: 1.25rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-offset-y: 0.5rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-offset-x: 0rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-blur: 1.25rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-offset-y: 0.625rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-offset-x: 0rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-3-2-blur: 1rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-offset-y: 0rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-offset-x: 0rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-blur: 0.625rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-offset-y: 0rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-offset-x: 0rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-2-2-blur: 0.5rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-offset-y: 0.125rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-offset-x: 0rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-blur: 0.25rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-offset-y: 0.125rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-offset-x: 0rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-1-2-blur: 0.25rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-offset-y: 0.0625rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-offset-x: 0rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-blur: 0.125rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-offset-y: 0.0625rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-offset-x: 0rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 1. */
+  --pgn-elevation-input-btn-focus-box-shadow-blur: 0rem;
+  --pgn-elevation-input-btn-focus-box-shadow-offset-y: 0rem;
+  --pgn-elevation-input-btn-focus-box-shadow-offset-x: 0rem;
+  --pgn-elevation-input-btn-focus-box-shadow-spread: var(--pgn-size-input-btn-focus-width);
+  --pgn-elevation-input-btn-focus-box-shadow-color: var(--pgn-color-input-btn-focus);
+  --pgn-elevation-toast-box-shadow-2-blur: 3rem;
+  --pgn-elevation-toast-box-shadow-2-offset-y: 0.5rem;
+  --pgn-elevation-toast-box-shadow-2-offset-x: 0rem;
+  --pgn-elevation-toast-box-shadow-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-toast-box-shadow-1-blur: 2.5rem;
+  --pgn-elevation-toast-box-shadow-1-offset-y: 1.25rem;
+  --pgn-elevation-toast-box-shadow-1-offset-x: 0rem;
+  --pgn-elevation-toast-box-shadow-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-bottom-2-blur: 0.625rem;
+  --pgn-elevation-sticky-shadow-bottom-2-offset-y: 0.25rem;
+  --pgn-elevation-sticky-shadow-bottom-2-offset-x: 0rem;
+  --pgn-elevation-sticky-shadow-bottom-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-bottom-1-blur: 1rem;
+  --pgn-elevation-sticky-shadow-bottom-1-offset-y: 0.5rem;
+  --pgn-elevation-sticky-shadow-bottom-1-offset-x: 0rem;
+  --pgn-elevation-sticky-shadow-bottom-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-top-2-blur: 0.625rem;
+  --pgn-elevation-sticky-shadow-top-2-offset-y: -0.25rem;
+  --pgn-elevation-sticky-shadow-top-2-offset-x: 0rem;
+  --pgn-elevation-sticky-shadow-top-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-top-1-blur: 1rem;
+  --pgn-elevation-sticky-shadow-top-1-offset-y: -0.5rem;
+  --pgn-elevation-sticky-shadow-top-1-offset-x: 0rem;
+  --pgn-elevation-sticky-shadow-top-1-color: rgba(0, 0, 0, 0.15);
   --pgn-elevation-scrollable-body-box-shadow: #0000008C;
   --pgn-elevation-progress-bar-box-shadow: none;
-  --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
-  --pgn-elevation-menu-box-shadow: var(--pgn-elevation-box-shadow-base);
+  --pgn-elevation-pagination-focus-box-shadow-blur: 0rem;
+  --pgn-elevation-pagination-focus-box-shadow-offset-y: 0rem;
+  --pgn-elevation-pagination-focus-box-shadow-offset-x: 0rem;
+  --pgn-elevation-pagination-focus-box-shadow-spread: var(--pgn-size-input-btn-focus-width);
+  --pgn-elevation-pagination-focus-box-shadow-color: var(--pgn-color-input-btn-focus);
+  --pgn-elevation-menu-box-shadow-blur: 0.25rem;
+  --pgn-elevation-menu-box-shadow-offset-y: 0.125rem;
+  --pgn-elevation-menu-box-shadow-offset-x: 0rem;
+  --pgn-elevation-menu-box-shadow-color: rgba(0, 0, 0, 0.3);
   --pgn-elevation-image-thumbnail-box-shadow: none;
   --pgn-elevation-icon-button-box-shadow-black-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-black-active: none;
-  --pgn-elevation-icon-button-box-shadow-black-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-black-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-black-base);
+  --pgn-elevation-icon-button-box-shadow-black-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-black-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-black-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-black-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-black-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-black-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-black-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-black-base-color: var(--pgn-color-icon-button-text-black-base);
   --pgn-elevation-icon-button-box-shadow-dark-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-dark-active: none;
-  --pgn-elevation-icon-button-box-shadow-dark-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-dark-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-dark-base);
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-dark-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-dark-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-dark-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-dark-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-dark-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-dark-base-color: var(--pgn-color-icon-button-text-dark-base);
   --pgn-elevation-icon-button-box-shadow-light-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-light-active: none;
-  --pgn-elevation-icon-button-box-shadow-light-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-light-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-light-base);
+  --pgn-elevation-icon-button-box-shadow-light-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-light-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-light-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-light-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-light-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-light-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-light-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-light-base-color: var(--pgn-color-icon-button-text-light-base);
   --pgn-elevation-icon-button-box-shadow-danger-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-danger-active: none;
-  --pgn-elevation-icon-button-box-shadow-danger-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-danger-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-danger-base);
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-danger-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-danger-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-danger-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-danger-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-danger-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-danger-base-color: var(--pgn-color-icon-button-text-danger-base);
   --pgn-elevation-icon-button-box-shadow-warning-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-warning-active: none;
-  --pgn-elevation-icon-button-box-shadow-warning-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-warning-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-warning-base);
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-warning-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-warning-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-warning-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-warning-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-warning-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-warning-base-color: var(--pgn-color-icon-button-text-warning-base);
   --pgn-elevation-icon-button-box-shadow-success-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-success-active: none;
-  --pgn-elevation-icon-button-box-shadow-success-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-success-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-success-base);
+  --pgn-elevation-icon-button-box-shadow-success-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-success-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-success-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-success-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-success-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-success-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-success-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-success-base-color: var(--pgn-color-icon-button-text-success-base);
   --pgn-elevation-icon-button-box-shadow-brand-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-brand-active: none;
-  --pgn-elevation-icon-button-box-shadow-brand-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-brand-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-brand-base);
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-brand-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-brand-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-brand-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-brand-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-brand-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-brand-base-color: var(--pgn-color-icon-button-text-brand-base);
   --pgn-elevation-icon-button-box-shadow-secondary-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-secondary-active: none;
-  --pgn-elevation-icon-button-box-shadow-secondary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-secondary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-secondary-base);
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-secondary-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-secondary-base-color: var(--pgn-color-icon-button-text-secondary-base);
   --pgn-elevation-icon-button-box-shadow-primary-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-primary-active: none;
-  --pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base);
-  --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-primary-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-primary-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-primary-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-primary-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-primary-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-primary-base-color: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-elevation-form-control-select-border-focus-blur: 0rem;
+  --pgn-elevation-form-control-select-border-focus-offset-y: 0rem;
+  --pgn-elevation-form-control-select-border-focus-offset-x: 0rem;
+  --pgn-elevation-form-control-select-border-focus-spread: var(--pgn-size-input-btn-focus-width);
+  --pgn-elevation-form-control-select-border-focus-color: var(--pgn-color-input-btn-focus);
   --pgn-elevation-form-control-select-border-base: none;
-  --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
+  --pgn-elevation-form-control-file-focus-blur: 0rem;
+  --pgn-elevation-form-control-file-focus-offset-y: 0rem;
+  --pgn-elevation-form-control-file-focus-offset-x: 0rem;
+  --pgn-elevation-form-control-file-focus-spread: 1px;
+  --pgn-elevation-form-control-file-focus-color: var(--pgn-color-primary-500);
   --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
-  --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
+  --pgn-elevation-form-control-range-thumb-focus-blur: 0.25rem;
+  --pgn-elevation-form-control-range-thumb-focus-offset-y: 0.1rem;
+  --pgn-elevation-form-control-range-thumb-focus-offset-x: 0rem;
+  --pgn-elevation-form-control-range-thumb-focus-spread: 0rem;
+  --pgn-elevation-form-control-range-thumb-focus-color: var(--pgn-color-body-bg);
   --pgn-elevation-form-control-range-thumb-base: none;
   --pgn-elevation-form-control-range-track: none;
   --pgn-elevation-form-control-checkbox-indicator-indeterminate: none;
   --pgn-elevation-form-control-indicator-active: none;
-  --pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1);
+  --pgn-elevation-form-control-indicator-checked-focus-blur: 0rem;
+  --pgn-elevation-form-control-indicator-checked-focus-offset-y: 0rem;
+  --pgn-elevation-form-control-indicator-checked-focus-offset-x: 0rem;
+  --pgn-elevation-form-control-indicator-checked-focus-spread: 4px;
+  --pgn-elevation-form-control-indicator-checked-focus-color: rgba(0, 0, 0, 0.1);
   --pgn-elevation-form-control-indicator-checked-base: none;
   --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base);
-  --pgn-elevation-form-input-focus: 0 0 0 1px var(--pgn-color-primary-500);
+  --pgn-elevation-form-input-focus-blur: 0rem;
+  --pgn-elevation-form-input-focus-offset-y: 0rem;
+  --pgn-elevation-form-input-focus-offset-x: 0rem;
+  --pgn-elevation-form-input-focus-spread: 1px;
+  --pgn-elevation-form-input-focus-color: var(--pgn-color-primary-500);
   --pgn-elevation-form-input-base: none;
-  --pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300);
-  --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500);
-  --pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300);
-  --pgn-elevation-dropzone-hover: inset 0 0 0 2px var(--pgn-color-info-300);
-  --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm);
+  --pgn-elevation-dropzone-error-inset: inset;
+  --pgn-elevation-dropzone-error-blur: 0rem;
+  --pgn-elevation-dropzone-error-offset-y: 0rem;
+  --pgn-elevation-dropzone-error-offset-x: 0rem;
+  --pgn-elevation-dropzone-error-spread: 2px;
+  --pgn-elevation-dropzone-error-color: var(--pgn-color-danger-300);
+  --pgn-elevation-dropzone-active-inset: inset;
+  --pgn-elevation-dropzone-active-blur: 0rem;
+  --pgn-elevation-dropzone-active-offset-y: 0rem;
+  --pgn-elevation-dropzone-active-offset-x: 0rem;
+  --pgn-elevation-dropzone-active-spread: 2px;
+  --pgn-elevation-dropzone-active-color: var(--pgn-color-primary-500);
+  --pgn-elevation-dropzone-focus-inset: inset;
+  --pgn-elevation-dropzone-focus-blur: 0rem;
+  --pgn-elevation-dropzone-focus-offset-y: 0rem;
+  --pgn-elevation-dropzone-focus-offset-x: 0rem;
+  --pgn-elevation-dropzone-focus-spread: 2px;
+  --pgn-elevation-dropzone-focus-color: var(--pgn-color-info-300);
+  --pgn-elevation-dropzone-hover-inset: inset;
+  --pgn-elevation-dropzone-hover-blur: 0rem;
+  --pgn-elevation-dropzone-hover-offset-y: 0rem;
+  --pgn-elevation-dropzone-hover-offset-x: 0rem;
+  --pgn-elevation-dropzone-hover-spread: 2px;
+  --pgn-elevation-dropzone-hover-color: var(--pgn-color-info-300);
+  --pgn-elevation-data-table-box-shadow-blur: 0.125rem;
+  --pgn-elevation-data-table-box-shadow-offset-y: 0.0625rem;
+  --pgn-elevation-data-table-box-shadow-offset-x: 0rem;
+  --pgn-elevation-data-table-box-shadow-color: rgba(0, 0, 0, 0.2);
   --pgn-elevation-code-kbd-box-shadow: none;
-  --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white);
+  --pgn-elevation-close-button-text-shadow-blur: 0rem;
+  --pgn-elevation-close-button-text-shadow-offset-y: 1px;
+  --pgn-elevation-close-button-text-shadow-offset-x: 0rem;
+  --pgn-elevation-close-button-text-shadow-color: var(--pgn-color-white);
   --pgn-elevation-btn-box-shadow-active: none;
   --pgn-elevation-btn-box-shadow-base: none;
-  --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
-  --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
+  --pgn-elevation-annotation-box-shadow-2-blur: 8px;
+  --pgn-elevation-annotation-box-shadow-2-offset-y: 2px;
+  --pgn-elevation-annotation-box-shadow-2-offset-x: 0rem;
+  --pgn-elevation-annotation-box-shadow-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-annotation-box-shadow-1-blur: 4px;
+  --pgn-elevation-annotation-box-shadow-1-offset-y: 2px;
+  --pgn-elevation-annotation-box-shadow-1-offset-x: 0rem;
+  --pgn-elevation-annotation-box-shadow-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-tooltip-box-shadow-2-blur: 8px;
+  --pgn-elevation-tooltip-box-shadow-2-offset-y: 2px;
+  --pgn-elevation-tooltip-box-shadow-2-offset-x: 0rem;
+  --pgn-elevation-tooltip-box-shadow-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-tooltip-box-shadow-1-blur: 4px;
+  --pgn-elevation-tooltip-box-shadow-1-offset-y: 2px;
+  --pgn-elevation-tooltip-box-shadow-1-offset-x: 0rem;
+  --pgn-elevation-tooltip-box-shadow-1-color: rgba(0, 0, 0, 0.15);
   --pgn-elevation-popover-box-shadow: none;
-  --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-blur: 20px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y: 8px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x: 0rem;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-blur: 20px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y: 10px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x: 0rem;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-color: rgba(0, 0, 0, 0.15);
   --pgn-elevation-dropdown-box-shadow: none;
   --pgn-spacing-input-btn-padding-y: 0.5625rem;
   --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
   --pgn-size-input-btn-focus-width: 1px;
-  --pgn-size-form-input-width-focus: 0.063rem;
   --pgn-size-btn-focus-width: 2px;
 }
diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss
index e5723b6a73..64b14a253a 100644
--- a/styles/scss/core/_variables.scss
+++ b/styles/scss/core/_variables.scss
@@ -652,7 +652,10 @@ $box-shadow-sides: (
 ) !default;
 
 $box-shadow-sm: var(--pgn-elevation-box-shadow-sm) !default;
-$box-shadow: var(--pgn-elevation-box-shadow-base) !default;
+$box-shadow: var(--pgn-elevation-box-shadow-base-offset-x)
+  var(--pgn-elevation-box-shadow-base-offset-y)
+  var(--pgn-elevation-box-shadow-base-blur)
+  var(--pgn-elevation-box-shadow-base-color) !default;
 $box-shadow-lg: var(--pgn-elevation-box-shadow-lg) !default;
 
 $component-active-color: var(--pgn-color-active) !default;
@@ -728,7 +731,8 @@ $display2-size: var(--pgn-typography-font-size-display-2) !default;
 $display3-size: var(--pgn-typography-font-size-display-3) !default;
 $display4-size: var(--pgn-typography-font-size-display-4) !default;
 
-$display-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default; // deprecated in favor of $display1-mobile-size
+// deprecated in favor of $display1-mobile-size
+$display-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default;
 $display1-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default;
 $display2-mobile-size: var(--pgn-typography-font-size-display-mobile-2) !default;
 $display3-mobile-size: var(--pgn-typography-font-size-display-mobile-3) !default;
@@ -806,7 +810,11 @@ $input-btn-line-height: var(--pgn-typography-input-btn-line-height-base) !defaul
 
 $input-btn-focus-width: var(--pgn-size-input-btn-focus-width) !default;
 $input-btn-focus-color: var(--pgn-color-input-btn-focus) !default;
-$input-btn-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow) !default;
+$input-btn-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow-offset-x)
+  var(--pgn-elevation-input-btn-focus-box-shadow-offset-y)
+  var(--pgn-elevation-input-btn-focus-box-shadow-spread)
+  var(--pgn-elevation-input-btn-focus-box-shadow-color)
+  var(--pgn-elevation-input-btn-focus-box-shadow-blur) !default;
 
 $input-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y) !default;
 $input-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x) !default;
diff --git a/styles/scss/core/core.scss b/styles/scss/core/core.scss
index bf494f1da6..924135ca81 100644
--- a/styles/scss/core/core.scss
+++ b/styles/scss/core/core.scss
@@ -15,6 +15,7 @@
 
 // Paragon core CSS
 @import "../../css/core/variables";
+@import "../../css/core/abstraction-variables";
 @import "../../css/core/custom-media-breakpoints";
 
 // Paragon components
diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json
index 57b8659d36..587265277c 100644
--- a/tokens/src/core/components/Bubble.json
+++ b/tokens/src/core/components/Bubble.json
@@ -1,6 +1,6 @@
 {
   "spacing": {
-    "$type": "transition",
+    "$type": "dimension",
     "bubble": {
       "expandable-padding": {
         "y": { "source": "$bubble-expandable-padding-y", "$value": "0" },
diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json
index 07248dda1c..da74f2a87a 100644
--- a/tokens/src/core/components/Carousel.json
+++ b/tokens/src/core/components/Carousel.json
@@ -25,11 +25,39 @@
     }
   },
   "transition": {
+    "$type": "transition",
     "carousel": {
-      "base": { "source": "$carousel-transition", "$value": "transform {transition.carousel.duration} ease-in-out", "$type": "transition" },
+      "base": {
+        "source": "$carousel-transition",
+        "$value": {
+          "property": "transform",
+          "duration": "{transition.carousel.duration}",
+          "timingFunction": "ease-in-out",
+          "delay": "0ms",
+          "behavior": "normal"
+        }
+      },
       "duration": { "source": "$carousel-transition-duration", "$value": ".6s", "$type": "duration" },
-      "indicator": { "source": "$carousel-indicator-transition", "$value": "opacity .6s ease", "$type": "transition" },
-      "control": { "source": "$carousel-control-transition", "$value": "opacity .15s ease", "$type": "transition" }
+      "indicator": {
+        "source": "$carousel-indicator-transition",
+        "$value": {
+          "property": "opacity",
+          "duration": "{transition.carousel.duration}",
+          "timingFunction": "ease",
+          "delay": "0ms",
+          "behavior": "normal"
+        }
+      },
+      "control": {
+        "source": "$carousel-control-transition",
+        "$value": {
+          "property": "opacity",
+          "duration": ".15s",
+          "timingFunction": "ease",
+          "delay": "0ms",
+          "behavior": "normal"
+        }
+      }
     }
   }
 }
diff --git a/tokens/src/core/components/Code.json b/tokens/src/core/components/Code.json
index 3ba3025295..4e03d1613c 100644
--- a/tokens/src/core/components/Code.json
+++ b/tokens/src/core/components/Code.json
@@ -1,7 +1,7 @@
 {
   "typography": {
     "code": {
-      "font-size": { "source": "$code-font-size", "$value": "87.5%", "$type": "percentage" },
+      "font-size": { "source": "$code-font-size", "$value": "{typography.font.size.sm}", "$type": "percentage" },
       "kbd": {
         "font-size": { "source": "$kbd-font-size", "$value": "{typography.code.font-size}", "$type": "dimension" },
         "nested": {
diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json
index b09fddb01d..75bf84d8e2 100644
--- a/tokens/src/core/components/DataTable.json
+++ b/tokens/src/core/components/DataTable.json
@@ -21,7 +21,13 @@
         "x": { "source": "$data-table-padding-x", "$value": ".75rem" },
         "y": { "source": "$data-table-padding-y", "$value": ".75rem" },
         "small": { "source": "$data-table-padding-small", "$value": ".5rem" },
-        "cell": { "source": "$data-table-cell-padding", "$value": ".5rem .75rem" }
+        "cell": {
+          "source": "$data-table-cell-padding",
+          "$value": {
+            "x": ".5rem",
+            "y": ".75rem"
+          }
+        }
       },
       "footer-position": { "source": "$data-table-footer-position", "$value": "center", "$type": "position" }
     }
diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json
index 1299b3ce0c..a709995611 100644
--- a/tokens/src/core/components/Dropdown.json
+++ b/tokens/src/core/components/Dropdown.json
@@ -37,7 +37,13 @@
           "base": { "source": "$dropdown-padding-y", "$value": ".5rem" },
           "item": { "source": "$dropdown-item-padding-y", "$value": ".25rem" }
         },
-        "header": { "source": "$dropdown-header-padding", "$value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}" }
+        "header": {
+          "source": "$dropdown-header-padding",
+          "$value": {
+            "x": "{spacing.dropdown.padding.x.item}",
+            "y": ".5rem"
+          }
+        }
       },
       "divider": {
         "margin-y": { "source": "$dropdown-divider-margin-y", "$value": "calc({spacing.spacer.base} / 2)" }
diff --git a/tokens/src/core/components/Form/spacing.json b/tokens/src/core/components/Form/spacing.json
index e7ed970856..065a110f54 100644
--- a/tokens/src/core/components/Form/spacing.json
+++ b/tokens/src/core/components/Form/spacing.json
@@ -77,7 +77,12 @@
               },
               "position": {
                 "source": "$custom-select-feedback-icon-position",
-                "$value": "center right calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})"
+                "$value": {
+                  "position-y": "center",
+                  "position-x": "right",
+                  "offset-x": "calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
+                  "offset-y": "0"
+                }
               }
             },
             "margin": {
diff --git a/tokens/src/core/components/Form/transition.json b/tokens/src/core/components/Form/transition.json
index 1348a40dc5..14b7c2afc5 100644
--- a/tokens/src/core/components/Form/transition.json
+++ b/tokens/src/core/components/Form/transition.json
@@ -4,11 +4,48 @@
     "form": {
       "input": {
         "source": "$input-transition",
-        "$value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out"
+        "$value": [
+          {
+            "property": "border-color",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          },
+          {
+            "property": "box-shadow",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          }
+        ]
       },
       "control": {
         "source": "$custom-forms-transition",
-        "$value": "background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out"
+        "$value": [
+          {
+            "property": "background-color",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          },
+          {
+            "property": "border-color",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          },
+          {
+            "property": "box-shadow",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          }
+        ]
       }
     }
   }
diff --git a/tokens/src/core/components/Modal.json b/tokens/src/core/components/Modal.json
index 6acdb2d145..542cc4f3f0 100644
--- a/tokens/src/core/components/Modal.json
+++ b/tokens/src/core/components/Modal.json
@@ -27,11 +27,23 @@
         "bottom": { "source": "$modal-inner-padding-bottom", "$value": ".7rem" }
       },
       "footer-padding": {
-        "base": { "source": "$modal-footer-padding", "$value": "{spacing.modal.footer-padding.y} 1.5rem" },
+        "base": {
+          "source": "$modal-footer-padding",
+          "$value": {
+            "x": "1.5rem",
+            "y": "{spacing.modal.footer-padding.y}"
+          }
+        },
         "y": { "source": "$modal-footer-padding-y", "$value": "1rem" }
       },
       "header-padding": {
-        "base": { "source": "$modal-header-padding", "$value": "{spacing.modal.header-padding.y} 1.5rem" },
+        "base": {
+          "source": "$modal-header-padding",
+          "$value": {
+            "x": "1.5rem",
+            "y": "{spacing.modal.header-padding.y}"
+          }
+        },
         "y": { "source": "$modal-header-padding-y", "$value": "1rem" }
       },
       "dialog-margin": { "source": "$modal-dialog-margin", "$value": "1.5rem" }
diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json
index d2c948d875..09a2edd5db 100644
--- a/tokens/src/core/components/ProgressBar.json
+++ b/tokens/src/core/components/ProgressBar.json
@@ -30,9 +30,24 @@
   "transition": {
     "$type": "transition",
     "progress-bar": {
-      "bar": {
-        "animation-timing": { "source": "$progress-bar-animation-timing", "$value": "1s linear infinite" },
-        "transition": { "source": "$progress-bar-transition", "$value": "width .6s ease" }
+      "animation-timing": {
+        "source": "$progress-bar-animation-timing",
+        "$value": {
+          "duration": "1s",
+          "timing-function": "linear",
+          "delay": "0s",
+          "iteration-count": "infinite"
+        }
+      },
+      "transition": {
+        "source": "$progress-bar-transition",
+        "$value": {
+          "property": "width",
+          "duration": ".6s",
+          "timing-function": "ease",
+          "delay": "0s",
+          "behavior": "normal"
+        }
       }
     }
   }
diff --git a/tokens/src/core/global/transition.json b/tokens/src/core/global/transition.json
index df27a59f47..657ee85e2f 100644
--- a/tokens/src/core/global/transition.json
+++ b/tokens/src/core/global/transition.json
@@ -3,23 +3,47 @@
     "$type": "transition",
     "base": {
       "source": "$transition-base",
-      "$value": "all .2s ease-in-out",
+      "$value": {
+        "property": "all",
+        "duration": ".2s",
+        "timing-function": "ease-in-out",
+        "delay": "0s",
+        "behavior": "normal"
+      },
       "$description": "Generic transition for any property change"
     },
     "fade": {
       "source": "$transition-fade",
-      "$value": "opacity .15s linear",
+      "$value": {
+        "property": "opacity",
+        "duration": ".15s",
+        "timing-function": "linear",
+        "delay": "0s",
+        "behavior": "normal"
+      },
       "$description": "Opacity transition that takes 150ms"
     },
     "collapse": {
       "height": {
         "source": "$transition-collapse",
-        "$value": "height .35s ease",
+        "$value": {
+          "property": "height",
+          "duration": ".35s",
+          "timing-function": "ease",
+          "delay": "0s",
+          "behavior": "normal"
+        },
         "$description": "Collapse transition for height that takes 350ms"
       },
       "width": {
         "source": "$transition-collapse-width",
-        "$value": "width .35s ease",
+        "$value": {
+          "property": "width",
+          "duration": ".35s",
+          "timing-function": "ease",
+          "delay": "0s",
+          "behavior": "normal"
+        },
         "$description": "Collapse transition for width that takes 350ms"
       }
     }
diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json
index 91a9fb0655..4922f40999 100644
--- a/tokens/src/core/global/typography.json
+++ b/tokens/src/core/global/typography.json
@@ -11,7 +11,8 @@
         "sans": {
           "serif": {
             "source": "$font-family-sans-serif",
-            "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI',  Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+            "$value": ["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial",
+            "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
             "$description": "Sans-serif font family."
           }
         },
@@ -22,7 +23,7 @@
         },
         "monospace": {
           "source": "$font-family-monospace",
-          "$value": "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',  'Courier New', monospace",
+          "$value": ["SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono",  "Courier New", "monospace"],
           "$description": "Monospace font family."
         }
       },
@@ -35,7 +36,7 @@
         },
         "lg": {
           "source": "$lead-font-size",
-          "$value": "{typography.font.size.base} * 1.25",
+          "$value": "calc({typography.font.size.base} * 1.25)",
           "$description": "Lead text font size."
         },
         "sm": {
diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json
index c24ae26a72..2bad75960e 100644
--- a/tokens/src/themes/light/components/Annotation.json
+++ b/tokens/src/themes/light/components/Annotation.json
@@ -4,7 +4,20 @@
     "annotation": {
       "box-shadow": {
         "source": "$annotation-box-shadow",
-        "$value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))"
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "4px"
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "8px"
+          }
+        ]
       }
     }
   },
diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json
index f7994d321c..dcba0a2d29 100644
--- a/tokens/src/themes/light/components/CloseButton.json
+++ b/tokens/src/themes/light/components/CloseButton.json
@@ -6,7 +6,15 @@
   "elevation": {
     "$type": "shadow",
     "close-button": {
-      "text-shadow": { "source": "$close-text-shadow", "$value": "0 1px 0 {color.white}" }
+      "text-shadow": {
+        "source": "$close-text-shadow",
+        "$value": {
+          "color": "{color.white}",
+          "offsetX": "0",
+          "offsetY": "1px",
+          "blur": "0"
+        }
+      }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json
index c757e73342..4641968f7c 100644
--- a/tokens/src/themes/light/components/Dropzone.json
+++ b/tokens/src/themes/light/components/Dropzone.json
@@ -12,10 +12,50 @@
   "elevation": {
     "$type": "shadow",
     "dropzone": {
-      "hover": { "source": "$dropzone-box-shadow-hover", "$value": "inset 0 0 0 2px {color.info.300}" },
-      "focus": { "source": "$dropzone-box-shadow-focus", "$value": "inset 0 0 0 2px {color.info.300}" },
-      "active": { "source": "$dropzone-box-shadow-active", "$value": "inset 0 0 0 2px {color.primary.500}" },
-      "error": { "source": "$dropzone-box-shadow-error", "$value": "inset 0 0 0 2px {color.danger.300}" }
+      "hover": {
+        "source": "$dropzone-box-shadow-hover",
+        "$value": {
+          "color": "{color.info.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      },
+      "focus": {
+        "source": "$dropzone-box-shadow-focus",
+        "$value": {
+          "color": "{color.info.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      },
+      "active": {
+        "source": "$dropzone-box-shadow-active",
+        "$value": {
+          "color": "{color.primary.500}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      },
+      "error": {
+        "source": "$dropzone-box-shadow-error",
+        "$value": {
+          "color": "{color.danger.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
index e19b6dfa3e..6554295dc1 100644
--- a/tokens/src/themes/light/components/Form/elevation.json
+++ b/tokens/src/themes/light/components/Form/elevation.json
@@ -4,14 +4,32 @@
     "form": {
       "input": {
         "base": { "source": "$input-box-shadow", "$value": "none" },
-        "focus": { "source": "$input-focus-box-shadow", "$value": "0 0 0 1px {color.primary.500}" }
+        "focus": {
+          "source": "$input-focus-box-shadow",
+          "$value": {
+            "color": "{color.primary.500}",
+            "spread": "1px",
+            "offsetX": "0",
+            "offsetY": "0",
+            "blur": "0"
+          }
+        }
       },
       "control": {
         "indicator": {
           "base": { "source": "$custom-control-indicator-box-shadow", "$value": "{elevation.form.input.base}" },
           "checked": {
             "base": { "source": "$custom-control-indicator-checked-box-shadow", "$value": "none" },
-            "focus": { "source": "$custom-control-indicator-focus-box-shadow", "$value": "0 0 0 4px rgba(0, 0, 0, .1)" }
+            "focus": {
+              "source": "$custom-control-indicator-focus-box-shadow",
+              "$value": {
+                "color": "rgba(0, 0, 0, .1)",
+                "spread": "4px",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": "0"
+              }
+            }
           },
           "active": { "source": "$custom-control-indicator-active-box-shadow", "$value": "none" }
         },
@@ -26,7 +44,15 @@
             "base": { "source": "$custom-range-thumb-box-shadow", "$value": "none" },
             "focus": {
               "source": "$custom-range-thumb-focus-box-shadow",
-              "$value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}"
+              "$value": [
+                {
+                  "color": "{color.body.bg}",
+                  "spread": "0",
+                  "offsetX": "0",
+                  "offsetY": ".1rem",
+                  "blur": ".25rem"
+                }
+              ]
             }
           }
         },
diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json
index 781d427b6a..80140fe9c8 100644
--- a/tokens/src/themes/light/components/Form/other.json
+++ b/tokens/src/themes/light/components/Form/other.json
@@ -99,7 +99,14 @@
             },
             "bg": {
               "source": "$custom-select-background",
-              "$value": "{other.content.form.control.select.indicator.icon} no-repeat right {spacing.form.input.padding.y.base} center / {color.form.control.select.bg.base}",
+              "$value": {
+                "color": "{color.form.control.select.bg.base}",
+                "image": "{other.content.form.control.select.indicator.icon}",
+                "repeat": "no-repeat",
+                "position-x": "right",
+                "offset-y": "{spacing.form.input.padding.y.base}",
+                "position-y": "center"
+              },
               "$type": "background"
             }
           }
diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json
index 3621861c48..d2e1b47e0b 100644
--- a/tokens/src/themes/light/components/IconButton.json
+++ b/tokens/src/themes/light/components/IconButton.json
@@ -382,56 +382,218 @@
     "icon-button": {
       "box-shadow": {
         "primary": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.primary.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.primary.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "secondary": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.secondary.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "brand": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.brand.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "success": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.success.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "warning": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.warning.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "danger": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.danger.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "light": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.light.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "dark": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.dark.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "black": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.black.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         }
diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json
index 13b21f679d..b11fd11149 100644
--- a/tokens/src/themes/light/components/Modal.json
+++ b/tokens/src/themes/light/components/Modal.json
@@ -20,7 +20,20 @@
         "box-shadow": {
           "sm-up": {
             "source": "$modal-content-box-shadow-sm-up",
-            "$value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)"
+            "$value": [
+              {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "10px",
+                "blur": "20px"
+              },
+              {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "8px",
+                "blur": "20px"
+              }
+            ]
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json
index e04ad06a6d..d9c0ac6f86 100644
--- a/tokens/src/themes/light/components/Nav.json
+++ b/tokens/src/themes/light/components/Nav.json
@@ -7,7 +7,12 @@
           "active": { "source": "$nav-tabs-link-active-border-color", "$value": "{color.primary.500}" },
           "hover": {
             "source": "$nav-tabs-link-hover-border-color",
-            "$value": "transparent transparent {color.nav.tabs.base.border.base}"
+            "$value": {
+              "top": "transparent",
+              "right": "transparent",
+              "bottom": "{color.nav.tabs.base.border.base}",
+              "left": "transparent"
+            }
           },
           "focus": {
             "source": "$nav-tabs-link-focus-border-color",
diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json
index 5bc0329299..81e1f9c36c 100644
--- a/tokens/src/themes/light/components/ProgressBar.json
+++ b/tokens/src/themes/light/components/ProgressBar.json
@@ -2,15 +2,15 @@
   "color": {
     "$type": "color",
     "progress-bar": {
-      "bg": { "source": "$progress-bg", "$value": "transparent" },
-      "border": { "source": "$progress-bar-border-color", "$value": "{color.gray.500}" },
-      "bar": {
-        "base": { "source": "$progress-bar-color", "$value": "{color.white}" },
-        "bg": {
-          "base": { "source": "$progress-bar-bg", "$value": "{color.accent.a}" },
-          "annotated": { "source": "$annotated-progress-bar-bg", "$value": "{color.dark.500}" }
-        }
-      }
+      "base": { "source": "$progress-bar-color", "$value": "{color.white}" },
+      "bg": {
+        "base": { "source": "$progress-bar-bg", "$value": "{color.accent.a}" },
+        "annotated": { "source": "$annotated-progress-bar-bg", "$value": "{color.dark.500}" }
+      },
+      "border": { "source": "$progress-bar-border-color", "$value": "{color.gray.500}" }
+    },
+    "progress": {
+      "bg": { "source": "$progress-bg", "$value": "transparent" }
     }
   },
   "elevation": {
diff --git a/tokens/src/themes/light/components/Sticky.json b/tokens/src/themes/light/components/Sticky.json
index 85b87d70bb..6fe18059fe 100644
--- a/tokens/src/themes/light/components/Sticky.json
+++ b/tokens/src/themes/light/components/Sticky.json
@@ -5,11 +5,37 @@
       "shadow": {
         "top": {
           "source": "$sticky-shadow-top",
-          "$value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)"
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.25rem",
+              "blur": ".625rem"
+            }
+          ]
         },
         "bottom": {
           "source": "$sticky-shadow-bottom",
-          "$value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)"
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".25rem",
+              "blur": ".625rem"
+            }
+          ]
         }
       }
     }
diff --git a/tokens/src/themes/light/components/Toast.json b/tokens/src/themes/light/components/Toast.json
index abc5d7f77a..57f9d6d4d6 100644
--- a/tokens/src/themes/light/components/Toast.json
+++ b/tokens/src/themes/light/components/Toast.json
@@ -25,7 +25,20 @@
     "toast": {
       "box-shadow": {
         "source": "$toast-box-shadow",
-        "$value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)"
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "1.25rem",
+            "blur": "2.5rem"
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": ".5rem",
+            "blur": "3rem"
+          }
+        ]
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json
index 174eea3cd5..7336e557a3 100644
--- a/tokens/src/themes/light/components/Tooltip.json
+++ b/tokens/src/themes/light/components/Tooltip.json
@@ -19,7 +19,20 @@
     "tooltip": {
       "box-shadow": {
         "source": "$tooltip-box-shadow",
-        "$value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))"
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "4px"
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "8px"
+          }
+        ]
       }
     }
   },
diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json
index f6b3c23188..424b099dbb 100644
--- a/tokens/src/themes/light/components/general/input.json
+++ b/tokens/src/themes/light/components/general/input.json
@@ -11,7 +11,13 @@
       "btn-focus": {
         "box-shadow": {
           "source": "$input-btn-focus-box-shadow",
-          "$value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}"
+          "$value": {
+            "color": "{color.input.btn-focus}",
+            "spread": "{size.input.btn.focus-width}",
+            "offsetX": "0",
+            "offsetY": "0",
+            "blur": "0"
+          }
         }
       }
     }
diff --git a/tokens/src/themes/light/global/elevation.json b/tokens/src/themes/light/global/elevation.json
index 518ff1f5d0..ba0697b0af 100644
--- a/tokens/src/themes/light/global/elevation.json
+++ b/tokens/src/themes/light/global/elevation.json
@@ -5,177 +5,582 @@
       "level": {
         "1": {
           "source": "$level-1-box-shadow",
-          "$value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".25rem"
+            }
+          ],
           "$description": "Basic box shadow of level 1."
         },
         "2": {
           "source": "$level-2-box-shadow",
-          "$value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".5rem"
+            }
+          ],
           "$description": "Basic box shadow of level 2."
         },
         "3": {
           "source": "$level-3-box-shadow",
-          "$value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".625rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1rem"
+            }
+          ],
           "$description": "Basic box shadow of level 3."
         },
         "4": {
           "source": "$level-4-box-shadow",
-          "$value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".625rem",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1.25rem"
+            }
+          ],
           "$description": "Basic box shadow of level 4."
         },
         "5": {
           "source": "$level-5-box-shadow",
-          "$value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "1.25px",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "2.5rem"
+            }
+          ],
           "$description": "Basic box shadow of level 5."
         }
       },
       "base": {
         "source": "$box-shadow",
-        "$value": "0 .125rem .25rem rgba(0, 0, 0, .3)",
+        "$value": {
+          "color": "rgba(0, 0, 0, .3)",
+          "offsetX": "0",
+          "offsetY": ".125rem",
+          "blur": ".25rem"
+        },
         "$description": "Default box shadow."
       },
       "sm": {
         "source": "$box-shadow-sm",
-        "$value": "0 .0625rem .125rem rgba(0, 0, 0, .2)",
+        "$value": {
+          "color": "rgba(0, 0, 0, .2)",
+          "offsetX": "0",
+          "offsetY": ".0625rem",
+          "blur": ".125rem"
+        },
         "$description": "Small box shadow."
       },
       "lg": {
         "source": "$box-shadow-lg",
-        "$value": "0 .25rem .5rem rgba(0, 0, 0, .3)",
+        "$value": {
+          "color": "rgba(0, 0, 0, .3)",
+          "offsetX": "0",
+          "offsetY": ".25rem",
+          "blur": ".5rem"
+        },
         "$description": "Large box shadow."
       },
       "down": {
         "1": {
           "source": "$box-shadow-down-1",
-          "$value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".25rem"
+            }
+          ],
           "$description": "Bottom box shadow of level 1."
         },
         "2": {
           "source": "$box-shadow-down-2",
-          "$value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".5rem"
+            }
+          ],
           "$description": "Bottom box shadow of level 2."
         },
         "3": {
           "source": "$box-shadow-down-3",
-          "$value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".25rem",
+              "blur": ".625rem"
+            }
+          ],
           "$description": "Bottom box shadow of level 3."
         },
         "4": {
           "source": "$box-shadow-down-4",
-          "$value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".625rem",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1.25rem"
+            }
+          ],
           "$description": "Bottom box shadow of level 4."
         },
         "5": {
           "source": "$box-shadow-down-5",
-          "$value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "1.25px",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "2.5rem"
+            }
+          ],
           "$description": "Bottom box shadow of level 5."
         }
       },
       "left": {
         "1": {
           "source": "$box-shadow-left-1",
-          "$value": "-.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.0625rem",
+              "offsetY": "0",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.0625rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            }
+          ],
           "$description": "Left box shadow of level 1."
         },
         "2": {
           "source": "$box-shadow-left-2",
-          "$value": "-.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.125rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.125rem",
+              "offsetY": "0",
+              "blur": ".5rem"
+            }
+          ],
           "$description": "Left box shadow of level 2."
         },
         "3": {
           "source": "$box-shadow-left-3",
-          "$value": "-.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.5rem",
+              "offsetY": "0",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.25rem",
+              "offsetY": "0",
+              "blur": ".625rem"
+            }
+          ],
           "$description": "Left box shadow of level 3."
         },
         "4": {
           "source": "$box-shadow-left-4",
-          "$value": "-.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.625rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.5rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            }
+          ],
           "$description": "Left box shadow of level 4."
         },
         "5": {
           "source": "$box-shadow-left-5",
-          "$value": "-1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-1.25rem",
+              "offsetY": "0",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.5rem",
+              "offsetY": "0",
+              "blur": "3rem"
+            }
+          ],
           "$description": "Left box shadow of level 5."
         }
       },
       "up": {
         "1": {
           "source": "$box-shadow-up-1",
-          "$value": "0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.0625rem",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.0625rem",
+              "blur": ".25rem"
+            }
+          ],
           "$description": "Top box shadow of level 1."
         },
         "2": {
           "source": "$box-shadow-up-2",
-          "$value": "0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.125rem",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.125rem",
+              "blur": ".5rem"
+            }
+          ],
           "$description": "Top box shadow of level 2."
         },
         "3": {
           "source": "$box-shadow-up-3",
-          "$value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.25rem",
+              "blur": ".625rem"
+            }
+          ],
           "$description": "Top box shadow of level 3."
         },
         "4": {
           "source": "$box-shadow-up-4",
-          "$value": "0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.625rem",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1.25rem"
+            }
+          ],
           "$description": "Top box shadow of level 4."
         },
         "5": {
           "source": "$box-shadow-up-5",
-          "$value": "0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-1.25rem",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "3rem"
+            }
+          ],
           "$description": "Basic box shadow of level 5."
         }
       },
       "right": {
         "1": {
           "source": "$box-shadow-right-1",
-          "$value": ".0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".0625rem",
+              "offsetY": "0",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".0625rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            }
+          ],
           "$description": "Right box shadow of level 1."
         },
         "2": {
           "source": "$box-shadow-right-2",
-          "$value": ".125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".125rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".125rem",
+              "offsetY": "0",
+              "blur": ".5rem"
+            }
+          ],
           "$description": "Right box shadow of level 2."
         },
         "3": {
           "source": "$box-shadow-right-3",
-          "$value": ".5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".5rem",
+              "offsetY": "0",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".25rem",
+              "offsetY": "0",
+              "blur": ".625rem"
+            }
+          ],
           "$description": "Right box shadow of level 3."
         },
         "4": {
           "source": "$box-shadow-right-4",
-          "$value": ".625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".625rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".5rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            }
+          ],
           "$description": "Right box shadow of level 4."
         },
         "5": {
           "source": "$box-shadow-right-5",
-          "$value": "1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "1.25rem",
+              "offsetY": "0",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".5rem",
+              "offsetY": "0",
+              "blur": "3rem"
+            }
+          ],
           "$description": "Right box shadow of level 5."
         }
       },
       "centered": {
         "1": {
           "source": "$box-shadow-centered-1",
-          "$value": "0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".25rem"
+            }
+          ],
           "$description": "Centered box shadow of level 1."
         },
         "2": {
           "source": "$box-shadow-centered-2",
-          "$value": "0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".5rem"
+            }
+          ],
           "$description": "Centered box shadow of level 2."
         },
         "3": {
           "source": "$box-shadow-centered-3",
-          "$value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".625rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1rem"
+            }
+          ],
           "$description": "Centered box shadow of level 3."
         },
         "4": {
           "source": "$box-shadow-centered-4",
-          "$value": "0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            }
+          ],
           "$description": "Centered box shadow of level 4."
         },
         "5": {
           "source": "$box-shadow-centered-5",
-          "$value": "0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "3rem"
+            }
+          ],
           "$description": "Centered box shadow of level 5."
         }
       }
diff --git a/tokens/utils.js b/tokens/utils.js
index 0751f638e5..1398219951 100644
--- a/tokens/utils.js
+++ b/tokens/utils.js
@@ -4,6 +4,8 @@ const path = require('path');
 
 const visitedTokens = {};
 
+const commonCssFiles = ['variables.css', 'abstraction-variables.css'];
+
 /**
  * Finds a token by its path in the token tree.
  * @param {string} path - The path to the token in the token tree.
@@ -334,11 +336,17 @@ function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'
     }
 
     const outputCssFiles = files.filter(file => file !== 'index.css');
-    // When creating themes, there are typically two files: one for utility classes and one for variables.
-    // It's organized them to allow variables be reading first.
-    if (isThemeVariant) { outputCssFiles.reverse(); }
 
-    const exportStatements = outputCssFiles.map((file) => `@import "${file}";`);
+    // For theme variants, files are ordered with variables first, abstraction variables second,
+    // and utility classes last. This ensures that variables are available before other files use them.
+    // For the core styles, custom media breakpoints replace utility classes in the order.
+    const sortOrder = isThemeVariant
+      ? [...commonCssFiles, 'utility-classes.css']
+      : [...commonCssFiles, 'custom-media-breakpoints.css'];
+
+    const sortedCssFiles = outputCssFiles.sort((a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b));
+
+    const exportStatements = sortedCssFiles.map((file) => `@import "${file}";`);
 
     const indexContent = `${exportStatements.join('\n')}\n`;
 
diff --git a/www/src/scss/openedx-theme.scss b/www/src/scss/openedx-theme.scss
index 2ae63d6d3c..7f449b3b77 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/abstraction-variables";
 @import "~paragon-style/css/themes/light/utility-classes";
 @import "base";