diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css
index 0cbbf89f568..00ca18e6808 100644
--- a/components/commons/basebutton.css
+++ b/components/commons/basebutton.css
@@ -11,67 +11,69 @@ governing permissions and limitations under the License.
 */
 
 %spectrum-BaseButton {
+  cursor: pointer;
+
+  /* stylelint-disable-next-line property-no-vendor-prefix -- need to validate if this can be removed */
+  -webkit-user-select: none;
+  user-select: none;
+
   /* Contain halo */
   position: relative;
 
+  /* Show the button overflow in Edge. */
+  overflow: visible;
   display: inline-flex;
-  box-sizing: border-box;
-
   align-items: center;
   justify-content: center;
 
-  /* Show the button overflow in Edge. */
-  overflow: visible;
+  box-sizing: border-box;
 
   /* Remove button the margin in Firefox and Safari. */
   margin: 0;
 
-  border-style: solid;
+  /* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */
+  font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
+
+  /* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */
+  line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
+  text-decoration: none;
+
 
   /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
   text-transform: none;
-  -webkit-font-smoothing: antialiased;
-  /* Font smoothing for Firefox */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Correct the inability to style clickable types in iOS and Safari. */
-  -webkit-appearance: button;
 
   /* Adjacent buttons should be aligned correctly */
   vertical-align: top;
 
-  transition: background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
-    border-color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
-    color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
-    box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
-
-  /* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */
-  font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
-  text-decoration: none;
-
-  /* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */
-  line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
+  /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari. */
+  -webkit-appearance: button;
+  border-style: solid;
 
-  user-select: none;
-  -webkit-user-select: none;
+  transition: background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
+    border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
+    color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
+    box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
 
-  cursor: pointer;
+  -webkit-font-smoothing: antialiased;
 
-  &:focus {
-    outline: none;
-  }
+  /* Font smoothing for Firefox */
+  -moz-osx-font-smoothing: grayscale;
 
   /* Fix Firefox */
   &::-moz-focus-inner {
+    /* Use uppercase PX so values don't get converted to rem */
+    margin-block-start: -2px;
+    margin-block-end: -2px;
+    padding: 0;
+
     border: 0;
 
     /* Remove the inner border and padding for button in Firefox. */
     border-style: none;
-    padding: 0;
+  }
 
-    /* Use uppercase PX so values don't get converted to rem */
-    margin-block-start: -2px;
-    margin-block-end: -2px;
+  &:focus {
+    outline: none;
   }
 
   &:disabled,
@@ -81,42 +83,42 @@ governing permissions and limitations under the License.
 }
 
 %spectrum-ButtonIcon {
-  max-block-size: 100%;
   flex-shrink: 0;
+  max-block-size: 100%;
 }
 
 %spectrum-ButtonWithFocusRing {
   &::after {
     content: "";
-    display: block;
+
     position: absolute;
     inset-block-start: 0;
     inset-block-end: 0;
     inset-inline-start: 0;
     inset-inline-end: 0;
 
+    display: block;
+
     /* @deprecation --mod-focus-indicator-gap has been renamed and will be removed in a future version. */
     margin: calc(var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) * -1);
 
     /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
-    transition: opacity var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-                margin var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
+    transition: opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out,
+                margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out;
   }
 
-  &:focus-visible {
-    &::after {
-      margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2);
-    }
+  &:focus-visible::after {
+    margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2);
   }
 }
 
 
 %spectrum-AnchorButton {
-  /* Remove appearance for clickable types in iOS and Safari. */
-  -webkit-appearance: none;
-
   /* Make link text not selectable  */
   user-select: none;
+
+  /* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */
+  -webkit-appearance: none;
 }
 
 %spectrum-ButtonLabel {
diff --git a/components/commons/overlay.css b/components/commons/overlay.css
index d531803d234..f64648da4f1 100644
--- a/components/commons/overlay.css
+++ b/components/commons/overlay.css
@@ -10,47 +10,42 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-%spectrum-overlay {
-  /* TODO: replace with core tokens */
-  --spectrum-overlay-animation-distance: 6px;
-  --spectrum-overlay-animation-duration: var(--spectrum-animation-duration-100);
-  --spectrum-overlay-animation-duration-opened: var(--spectrum-animation-duration-0);
+/* TODO: replace legacy animation variables with core tokens when available */
 
+/** @note used in modal, popover, quickaction, tooltip, underlay */
+%spectrum-overlay {
   pointer-events: none;
   visibility: hidden;
-  opacity: 0;
-  transition: transform var(--spectrum-overlay-animation-duration) ease-in-out,
-              opacity var(--spectrum-overlay-animation-duration) ease-in-out,
-              visibility 0ms linear var(--spectrum-overlay-animation-duration);
+  opacity: 0%;
+  transition: transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
+              opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
+              visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms));
 }
 
+/** @note used in modal, popover, quickaction, tooltip, underlay */
 %spectrum-overlay--open {
   pointer-events: auto;
   visibility: visible;
-  opacity: 100;
-  transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-overlay-animation-duration-opened));
+  opacity: 100%;
+  transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0ms));
 }
 
+/** @note currently unused */
 %spectrum-overlay--bottom--open {
-  --spectrum-overlay-animation-distance: 6px;
-
-  transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
+  transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)));
 }
 
+/** @note currently unused */
 %spectrum-overlay--top--open {
-  --spectrum-overlay-animation-distance: 6px;
-
-  transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
+  transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))));
 }
 
+/** @note used in quickaction */
 %spectrum-overlay--right--open {
-  --spectrum-overlay-animation-distance: 6px;
-
-  transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
+  transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)));
 }
 
+/** @note used in quickaction */
 %spectrum-overlay--left--open {
-  --spectrum-overlay-animation-distance: 6px;
-
-  transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
+  transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))));
 }
diff --git a/components/modal/metadata/mods.md b/components/modal/metadata/mods.md
index c7790f2e75c..3cd142425fe 100644
--- a/components/modal/metadata/mods.md
+++ b/components/modal/metadata/mods.md
@@ -11,4 +11,5 @@
 | `--mod-modal-max-height`                       |
 | `--mod-modal-max-width`                        |
 | `--mod-modal-transition-animation-duration`    |
+| `--mod-overlay-animation-duration`             |
 | `--mod-overlay-animation-duration-opened`      |
diff --git a/components/page/index.css b/components/page/index.css
index 513b114a586..0f0a504607d 100644
--- a/components/page/index.css
+++ b/components/page/index.css
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:root {
+& {
   background-color: var(--spectrum-gray-100);
 
   /* Prevent tap highlights */
diff --git a/components/popover/metadata/mods.md b/components/popover/metadata/mods.md
index 12e87266143..25cb283e785 100644
--- a/components/popover/metadata/mods.md
+++ b/components/popover/metadata/mods.md
@@ -1,5 +1,6 @@
 | Modifiable custom properties                  |
 | --------------------------------------------- |
+| `--mod-overlay-animation-duration`            |
 | `--mod-overlay-animation-duration-opened`     |
 | `--mod-popover-animation-distance`            |
 | `--mod-popover-background-color`              |
diff --git a/components/quickaction/metadata/mods.md b/components/quickaction/metadata/mods.md
index bc075725c2c..e733fcf96e1 100644
--- a/components/quickaction/metadata/mods.md
+++ b/components/quickaction/metadata/mods.md
@@ -1,4 +1,5 @@
 | Modifiable custom properties              |
 | ----------------------------------------- |
 | `--mod-overlay-animation-distance`        |
+| `--mod-overlay-animation-duration`        |
 | `--mod-overlay-animation-duration-opened` |
diff --git a/components/tooltip/metadata/mods.md b/components/tooltip/metadata/mods.md
index 91c5f3d1cda..7931ae66573 100644
--- a/components/tooltip/metadata/mods.md
+++ b/components/tooltip/metadata/mods.md
@@ -1,5 +1,6 @@
 | Modifiable custom properties                 |
 | -------------------------------------------- |
+| `--mod-overlay-animation-duration`           |
 | `--mod-overlay-animation-duration-opened`    |
 | `--mod-tooltip-animation-distance`           |
 | `--mod-tooltip-background-color-default`     |
diff --git a/components/underlay/metadata/mods.md b/components/underlay/metadata/mods.md
index deb3c029815..e66baf3d554 100644
--- a/components/underlay/metadata/mods.md
+++ b/components/underlay/metadata/mods.md
@@ -1,5 +1,6 @@
 | Modifiable custom properties                         |
 | ---------------------------------------------------- |
+| `--mod-overlay-animation-duration`                   |
 | `--mod-overlay-animation-duration-opened`            |
 | `--mod-underlay-background-color`                    |
 | `--mod-underlay-background-entry-animation-delay`    |