diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 86e5b280246..80abdd5689b 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/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.
 */
 
-@import "../commons/basebutton-coretokens.css";
+@import "@spectrum-css/commons/basebutton.css";
 
 .spectrum-ActionButton {
   --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
@@ -26,13 +26,13 @@ governing permissions and limitations under the License.
   --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
   --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
   --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap));
-  
+
   &.is-selected {
     --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
     --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
     --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
     --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus));
-    
+
     --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50));
     --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50));
     --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50));
@@ -43,7 +43,7 @@ governing permissions and limitations under the License.
       --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover));
       --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down));
       --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus));
-    
+
       --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white));
       --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white));
       --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white));
@@ -158,7 +158,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-ActionButton {
-  @inherit: %spectrum-BaseButton;
+  @extend %spectrum-BaseButton;
   position: relative;
 
   min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width));
@@ -203,11 +203,11 @@ governing permissions and limitations under the License.
 }
 
 a.spectrum-ActionButton {
-  @inherit: %spectrum-AnchorButton;
+  @extend %spectrum-AnchorButton;
 }
 
 .spectrum-ActionButton-icon {
-  @inherit: %spectrum-ButtonIcon;
+  @extend %spectrum-ButtonIcon;
 
   inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
   block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
@@ -235,7 +235,7 @@ a.spectrum-ActionButton {
 }
 
 .spectrum-ActionButton-label {
-  @inherit: %spectrum-ButtonLabel;
+  @extend %spectrum-ButtonLabel;
   pointer-events: none;
 
   font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size));
diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css
index def1bc1b03b..fb1ba32aec6 100644
--- a/components/alertdialog/index.css
+++ b/components/alertdialog/index.css
@@ -61,10 +61,12 @@ governing permissions and limitations under the License.
   }
 
   &--warning {
+    /* @passthrough */
     --mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color));
   }
 
   &--error {
+    /* @passthrough */
     --mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color));
   }
 }
diff --git a/components/button/index.css b/components/button/index.css
index b4248cb9c1b..524146783d0 100644
--- a/components/button/index.css
+++ b/components/button/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.
 */
 
-@import "../commons/basebutton-coretokens.css";
+@import "@spectrum-css/commons/basebutton.css";
 
 /* default for all buttons */
 .spectrum-Button {
@@ -92,8 +92,8 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Button {
-  @inherit: %spectrum-BaseButton;
-  @inherit: %spectrum-ButtonWithFocusRing;
+  @extend %spectrum-BaseButton;
+  @extend %spectrum-ButtonWithFocusRing;
 
   border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius));
   border-width: var(--mod-button-border-width, var(--spectrum-button-border-width));
@@ -149,11 +149,11 @@ governing permissions and limitations under the License.
 }
 
 a.spectrum-Button {
-  @inherit: %spectrum-AnchorButton;
+  @extend %spectrum-AnchorButton;
 }
 
 .spectrum-Button-label {
-  @inherit: %spectrum-ButtonLabel;
+  @extend %spectrum-ButtonLabel;
   padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
   padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
   white-space: nowrap;
@@ -204,7 +204,7 @@ a.spectrum-Button {
 /* former skin.css, applied / copied from actionbutton/index.css  */
 
 .spectrum-Button {
-  @inherit: %spectrum-BaseButton;
+  @extend %spectrum-BaseButton;
 
   background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)));
   border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));
diff --git a/components/closebutton/index.css b/components/closebutton/index.css
index 67bfd720072..dbc0a115129 100644
--- a/components/closebutton/index.css
+++ b/components/closebutton/index.css
@@ -15,7 +15,7 @@ governing permissions and limitations under the License.
  * .spectrum-Closebutton::after is the Focus ring
  */
 
-@import "../commons/basebutton-coretokens.css";
+@import "@spectrum-css/commons/basebutton.css";
 
 .spectrum-CloseButton {
   /* Hardcoded tokens */
@@ -127,11 +127,11 @@ governing permissions and limitations under the License.
 }
 
 a.spectrum-CloseButton {
-  @inherit: %spectrum-AnchorButton;
+  @extend %spectrum-AnchorButton;
 }
 
 .spectrum-CloseButton {
-  @inherit: %spectrum-BaseButton;
+  @extend %spectrum-BaseButton;
 
   block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-height));
   inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-width));
diff --git a/components/commons/basebutton-coretokens.css b/components/commons/basebutton-coretokens.css
deleted file mode 100644
index e9d4f5106ea..00000000000
--- a/components/commons/basebutton-coretokens.css
+++ /dev/null
@@ -1,130 +0,0 @@
-/*!
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-%spectrum-BaseButton {
-  /* Contain halo */
-  position: relative;
-
-  display: inline-flex;
-  box-sizing: border-box;
-
-  align-items: center;
-  justify-content: center;
-
-  /* Show the button overflow in Edge. */
-  overflow: visible;
-
-  /* Remove button the margin in Firefox and Safari. */
-  margin: 0;
-
-  border-style: solid;
-
-  /* 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;
-
-  /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
-  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;
-
-  text-decoration: none;
-
-  /* @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)));
-
-  user-select: none;
-  -webkit-user-select: none;
-
-  cursor: pointer;
-
-  &:focus {
-    outline: none;
-  }
-
-  /* Fix Firefox */
-  &::-moz-focus-inner {
-    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;
-  }
-
-  &:disabled,
-  &.is-disabled {
-    cursor: default;
-  }
-}
-
-%spectrum-ButtonIcon {
-  max-block-size: 100%;
-  flex-shrink: 0;
-}
-
-%spectrum-ButtonWithFocusRing {
-  &::after {
-    content: "";
-    display: block;
-    position: absolute;
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    /* @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;
-  }
-
-  &:focus-visible {
-    &::after {
-      margin: calc(var(--mod-button-focus-indicator-gap, 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;
-}
-
-%spectrum-ButtonLabel {
-  align-self: center;
-  justify-self: center;
-
-  /* Fixes horizontal alignment of text in anchor buttons */
-  text-align: center;
-
-  &:empty {
-    display: none;
-  }
-}
diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css
index 5554d26fa65..0cbbf89f568 100644
--- a/components/commons/basebutton.css
+++ b/components/commons/basebutton.css
@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 
 %spectrum-BaseButton {
-
   /* Contain halo */
   position: relative;
 
@@ -41,15 +40,17 @@ governing permissions and limitations under the License.
   /* Adjacent buttons should be aligned correctly */
   vertical-align: top;
 
-  transition: background var(--spectrum-global-animation-duration-100) ease-out,
-    border-color var(--spectrum-global-animation-duration-100) ease-out,
-    color var(--spectrum-global-animation-duration-100) ease-out,
-    box-shadow var(--spectrum-global-animation-duration-100) ease-out;
+  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;
-  font-family: var(--spectrum-alias-body-text-font-family);
 
-  line-height: var(--spectrum-alias-component-text-line-height);
+  /* @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)));
 
   user-select: none;
   -webkit-user-select: none;
@@ -86,25 +87,25 @@ governing permissions and limitations under the License.
 
 %spectrum-ButtonWithFocusRing {
   &::after {
-    border-radius: calc(
-      var(--spectrum-button-m-primary-fill-texticon-border-radius) +
-        var(--spectrum-alias-focus-ring-gap)
-    );
     content: "";
     display: block;
     position: absolute;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
     inset-block-start: 0;
     inset-block-end: 0;
-    margin: calc(var(--spectrum-alias-focus-ring-gap) * -1);
-    transition: opacity var(--spectrum-global-animation-duration-100) ease-out,
-                margin var(--spectrum-global-animation-duration-100) ease-out;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+
+    /* @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;
   }
 
   &:focus-visible {
     &::after {
-      margin: calc(var(--spectrum-alias-focus-ring-gap) * -2);
+      margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2);
     }
   }
 }
@@ -113,6 +114,7 @@ governing permissions and limitations under the License.
 %spectrum-AnchorButton {
   /* Remove appearance for clickable types in iOS and Safari. */
   -webkit-appearance: none;
+
   /* Make link text not selectable  */
   user-select: none;
 }
@@ -124,9 +126,6 @@ governing permissions and limitations under the License.
   /* Fixes horizontal alignment of text in anchor buttons */
   text-align: center;
 
-  /* @safari10 Workaround for https://bugs.webkit.org/show_bug.cgi?id=169700 */
-  /*inline-size: 100%;*/
-
   &:empty {
     display: none;
   }
diff --git a/components/commons/index.css b/components/commons/index.css
new file mode 100644
index 00000000000..748267b8b49
--- /dev/null
+++ b/components/commons/index.css
@@ -0,0 +1,14 @@
+/*!
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@import "basebutton.css";
+@import "overlay.css";
diff --git a/components/commons/overlay-coretokens.css b/components/commons/overlay.css
similarity index 99%
rename from components/commons/overlay-coretokens.css
rename to components/commons/overlay.css
index e6d458d2e7b..d531803d234 100644
--- a/components/commons/overlay-coretokens.css
+++ b/components/commons/overlay.css
@@ -16,40 +16,41 @@ governing permissions and limitations under the License.
   --spectrum-overlay-animation-duration: var(--spectrum-animation-duration-100);
   --spectrum-overlay-animation-duration-opened: var(--spectrum-animation-duration-0);
 
+  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);
-
-  pointer-events: none;
 }
 
 %spectrum-overlay--open {
+  pointer-events: auto;
   visibility: visible;
-  opacity: 1;
+  opacity: 100;
   transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-overlay-animation-duration-opened));
-  pointer-events: auto;
 }
 
 %spectrum-overlay--bottom--open {
   --spectrum-overlay-animation-distance: 6px;
+
   transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
 }
 
 %spectrum-overlay--top--open {
   --spectrum-overlay-animation-distance: 6px;
+
   transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
 }
 
 %spectrum-overlay--right--open {
   --spectrum-overlay-animation-distance: 6px;
+
   transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
 }
 
 %spectrum-overlay--left--open {
   --spectrum-overlay-animation-distance: 6px;
+
   transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
 }
diff --git a/components/commons/package.json b/components/commons/package.json
index a516e96a837..710efc5a108 100644
--- a/components/commons/package.json
+++ b/components/commons/package.json
@@ -14,6 +14,9 @@
     "url": "https://github.com/adobe/spectrum-css/issues"
   },
   "main": "index.css",
+  "peerDependencies": {
+    "@spectrum-css/tokens": ">=13"
+  },
   "publishConfig": {
     "access": "public"
   }
diff --git a/components/dialog/index.css b/components/dialog/index.css
index 2336aba38e3..deb5a285ac0 100644
--- a/components/dialog/index.css
+++ b/components/dialog/index.css
@@ -10,10 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import "../overlay/index.css";
-
-
-
 .spectrum-Dialog {
   /* The font-size of the fullscreen dialog header */
   --spectrum-dialog-fullscreen-header-text-size: 28px;
@@ -173,7 +169,7 @@ governing permissions and limitations under the License.
   font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight));
   line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-dialog-confirm-description-text-line-height));
   color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color));
-  
+
 
   /* this is kinda dumb,  but needed for the keyboard focus rings so they don't get clipped. is there a better way to treat this */
   padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2);
@@ -191,7 +187,7 @@ governing permissions and limitations under the License.
   outline: none; /* Hide focus outline */
 
   /* Both selectors are required to override the button + button rule */
-  > *, 
+  > *,
   > .spectrum-Button + .spectrum-Button {
     margin-bottom: 0;
   }
@@ -257,7 +253,7 @@ governing permissions and limitations under the License.
   border-radius: 0;
 }
 
-.spectrum-Dialog--fullscreen, 
+.spectrum-Dialog--fullscreen,
 .spectrum-Dialog--fullscreenTakeover {
   max-height: none;
   max-inline-size: none;
@@ -284,11 +280,11 @@ governing permissions and limitations under the License.
 
   .spectrum-Dialog-content {
     max-height: none;
-    
-    
+
+
   }
 
-  .spectrum-Dialog-footer, 
+  .spectrum-Dialog-footer,
   .spectrum-Dialog-buttonGroup {
     padding-block-start: 0px;
   }
@@ -344,7 +340,7 @@ governing permissions and limitations under the License.
     justify-content: flex-start;
   }
 
-  .spectrum-Dialog--fullscreen, 
+  .spectrum-Dialog--fullscreen,
   .spectrum-Dialog--fullscreenTakeover {
     &.spectrum-Dialog .spectrum-Dialog-grid {
       display: grid;
diff --git a/components/icon/ui-icons.css b/components/icon/ui-icons.css
index 76adca9125f..7efc688615a 100644
--- a/components/icon/ui-icons.css
+++ b/components/icon/ui-icons.css
@@ -131,270 +131,270 @@ governing permissions and limitations under the License.
 
 /* Chevron */
 .spectrum-UIIcon-ChevronRight50 {
-  @inherit: %spectrum-UIIcon-Chevron50;
+  @extend %spectrum-UIIcon-Chevron50;
 }
 
 .spectrum-UIIcon-ChevronRight75 {
-  @inherit: %spectrum-UIIcon-Chevron75;
+  @extend %spectrum-UIIcon-Chevron75;
 }
 
 .spectrum-UIIcon-ChevronRight100 {
-  @inherit: %spectrum-UIIcon-Chevron100;
+  @extend %spectrum-UIIcon-Chevron100;
 }
 
 .spectrum-UIIcon-ChevronRight200 {
-  @inherit: %spectrum-UIIcon-Chevron200;
+  @extend %spectrum-UIIcon-Chevron200;
 }
 
 .spectrum-UIIcon-ChevronRight300 {
-  @inherit: %spectrum-UIIcon-Chevron300;
+  @extend %spectrum-UIIcon-Chevron300;
 }
 
 .spectrum-UIIcon-ChevronRight400 {
-  @inherit: %spectrum-UIIcon-Chevron400;
+  @extend %spectrum-UIIcon-Chevron400;
 }
 
 .spectrum-UIIcon-ChevronRight500 {
-  @inherit: %spectrum-UIIcon-Chevron500;
+  @extend %spectrum-UIIcon-Chevron500;
 }
 
 .spectrum-UIIcon-ChevronDown50 {
-  @inherit: %spectrum-UIIcon-Chevron50;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Chevron50;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ChevronDown75 {
-  @inherit: %spectrum-UIIcon-Chevron75;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Chevron75;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ChevronDown100 {
-  @inherit: %spectrum-UIIcon-Chevron100;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Chevron100;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ChevronDown200 {
-  @inherit: %spectrum-UIIcon-Chevron200;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Chevron200;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ChevronDown300 {
-  @inherit: %spectrum-UIIcon-Chevron300;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Chevron300;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ChevronDown400 {
-  @inherit: %spectrum-UIIcon-Chevron400;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Chevron400;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ChevronDown500 {
-  @inherit: %spectrum-UIIcon-Chevron500;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Chevron500;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ChevronLeft50 {
-  @inherit: %spectrum-UIIcon-Chevron50;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Chevron50;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ChevronLeft75 {
-  @inherit: %spectrum-UIIcon-Chevron75;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Chevron75;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ChevronLeft100 {
-  @inherit: %spectrum-UIIcon-Chevron100;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Chevron100;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ChevronLeft200 {
-  @inherit: %spectrum-UIIcon-Chevron200;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Chevron200;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ChevronLeft300 {
-  @inherit: %spectrum-UIIcon-Chevron300;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Chevron300;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ChevronLeft400 {
-  @inherit: %spectrum-UIIcon-Chevron400;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Chevron400;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ChevronLeft500 {
-  @inherit: %spectrum-UIIcon-Chevron500;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Chevron500;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ChevronUp50 {
-  @inherit: %spectrum-UIIcon-Chevron50;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Chevron50;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 .spectrum-UIIcon-ChevronUp75 {
-  @inherit: %spectrum-UIIcon-Chevron75;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Chevron75;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 .spectrum-UIIcon-ChevronUp100 {
-  @inherit: %spectrum-UIIcon-Chevron100;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Chevron100;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 .spectrum-UIIcon-ChevronUp200 {
-  @inherit: %spectrum-UIIcon-Chevron200;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Chevron200;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 .spectrum-UIIcon-ChevronUp300 {
-  @inherit: %spectrum-UIIcon-Chevron300;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Chevron300;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 .spectrum-UIIcon-ChevronUp400 {
-  @inherit: %spectrum-UIIcon-Chevron400;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Chevron400;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 .spectrum-UIIcon-ChevronUp500 {
-  @inherit: %spectrum-UIIcon-Chevron500;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Chevron500;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 /* Arrow */
 .spectrum-UIIcon-ArrowRight75 {
-  @inherit: %spectrum-UIIcon-Arrow75;
+  @extend %spectrum-UIIcon-Arrow75;
 }
 
 .spectrum-UIIcon-ArrowRight100 {
-  @inherit: %spectrum-UIIcon-Arrow100;
+  @extend %spectrum-UIIcon-Arrow100;
 }
 
 .spectrum-UIIcon-ArrowRight200 {
-  @inherit: %spectrum-UIIcon-Arrow200;
+  @extend %spectrum-UIIcon-Arrow200;
 }
 
 .spectrum-UIIcon-ArrowRight300 {
-  @inherit: %spectrum-UIIcon-Arrow300;
+  @extend %spectrum-UIIcon-Arrow300;
 }
 
 .spectrum-UIIcon-ArrowRight400 {
-  @inherit: %spectrum-UIIcon-Arrow400;
+  @extend %spectrum-UIIcon-Arrow400;
 }
 
 .spectrum-UIIcon-ArrowRight500 {
-  @inherit: %spectrum-UIIcon-Arrow500;
+  @extend %spectrum-UIIcon-Arrow500;
 }
 
 .spectrum-UIIcon-ArrowRight600 {
-  @inherit: %spectrum-UIIcon-Arrow600;
+  @extend %spectrum-UIIcon-Arrow600;
 }
 
 .spectrum-UIIcon-ArrowDown75 {
-  @inherit: %spectrum-UIIcon-Arrow75;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Arrow75;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ArrowDown100 {
-  @inherit: %spectrum-UIIcon-Arrow100;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Arrow100;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ArrowDown200 {
-  @inherit: %spectrum-UIIcon-Arrow200;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Arrow200;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ArrowDown300 {
-  @inherit: %spectrum-UIIcon-Arrow300;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Arrow300;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ArrowDown400 {
-  @inherit: %spectrum-UIIcon-Arrow400;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Arrow400;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ArrowDown500 {
-  @inherit: %spectrum-UIIcon-Arrow500;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Arrow500;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ArrowDown600 {
-  @inherit: %spectrum-UIIcon-Arrow600;
-  @inherit: %spectrum-UIIcon--rotation90;
+  @extend %spectrum-UIIcon-Arrow600;
+  @extend %spectrum-UIIcon--rotation90;
 }
 
 .spectrum-UIIcon-ArrowLeft75 {
-  @inherit: %spectrum-UIIcon-Arrow75;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Arrow75;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ArrowLeft100 {
-  @inherit: %spectrum-UIIcon-Arrow100;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Arrow100;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ArrowLeft200 {
-  @inherit: %spectrum-UIIcon-Arrow200;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Arrow200;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ArrowLeft300 {
-  @inherit: %spectrum-UIIcon-Arrow300;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Arrow300;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ArrowLeft400 {
-  @inherit: %spectrum-UIIcon-Arrow400;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Arrow400;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ArrowLeft500 {
-  @inherit: %spectrum-UIIcon-Arrow500;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Arrow500;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ArrowLeft600 {
-  @inherit: %spectrum-UIIcon-Arrow600;
-  @inherit: %spectrum-UIIcon--rotation180;
+  @extend %spectrum-UIIcon-Arrow600;
+  @extend %spectrum-UIIcon--rotation180;
 }
 
 .spectrum-UIIcon-ArrowUp75 {
-  @inherit: %spectrum-UIIcon-Arrow75;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Arrow75;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 .spectrum-UIIcon-ArrowUp100 {
-  @inherit: %spectrum-UIIcon-Arrow100;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Arrow100;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 .spectrum-UIIcon-ArrowUp200 {
-  @inherit: %spectrum-UIIcon-Arrow200;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Arrow200;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 .spectrum-UIIcon-ArrowUp300 {
-  @inherit: %spectrum-UIIcon-Arrow300;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Arrow300;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 .spectrum-UIIcon-ArrowUp400 {
-  @inherit: %spectrum-UIIcon-Arrow400;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Arrow400;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 .spectrum-UIIcon-ArrowUp500 {
-  @inherit: %spectrum-UIIcon-Arrow500;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Arrow500;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 .spectrum-UIIcon-ArrowUp600 {
-  @inherit: %spectrum-UIIcon-Arrow600;
-  @inherit: %spectrum-UIIcon--rotation270;
+  @extend %spectrum-UIIcon-Arrow600;
+  @extend %spectrum-UIIcon--rotation270;
 }
 
 /* Checkmark */
diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css
index 423048bb45a..70c4bf93938 100644
--- a/components/logicbutton/index.css
+++ b/components/logicbutton/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.
 */
 
-@import "../commons/basebutton-coretokens.css";
+@import "@spectrum-css/commons/basebutton.css";
 
 .spectrum-LogicButton {
   --spectrum-logic-button-height: 24px;
@@ -48,8 +48,8 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-LogicButton {
-  @inherit: %spectrum-BaseButton;
-  @inherit: %spectrum-ButtonWithFocusRing;
+  @extend %spectrum-BaseButton;
+  @extend %spectrum-ButtonWithFocusRing;
 
   block-size: var(--mod-logic-button-height, var(--spectrum-logic-button-height));
   padding: var(--mod-logic-button-padding, var(--spectrum-logic-button-padding));
diff --git a/components/modal/index.css b/components/modal/index.css
index 83b45efedce..007068c6405 100644
--- a/components/modal/index.css
+++ b/components/modal/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.
 */
 
-@import "../overlay/index.css";
+@import "@spectrum-css/commons/overlay.css";
 
 .spectrum-Modal {
 	/* Bug: this must be 0ms, not 0 */
@@ -41,9 +41,12 @@ governing permissions and limitations under the License.
 
 	box-sizing: border-box;
 	inline-size: 100vw;
-	/* On mobile browsers, vh units are fixed based on the maximum height of the screen.
-   * However, when you scroll, the toolbar and address bar shrink, making the viewport resize.
-   * We use the stretch value to counteract this where supported. */
+
+	/**
+	 * On mobile browsers, vh units are fixed based on the maximum height of the screen.
+	 * However, when you scroll, the toolbar and address bar shrink, making the viewport resize.
+	 * We use the stretch value to counteract this where supported.
+	 */
 	block-size: 100vh;
 	/* stylelint-disable-next-line value-no-vendor-prefix */
 	block-size: -moz-available;
@@ -68,7 +71,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Modal {
-	@inherit: %spectrum-overlay;
+	@extend %spectrum-overlay;
 
 	/* Start offset by the animation distance */
 	transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-modal-confirm-entry-animation-distance)));
@@ -103,7 +106,7 @@ governing permissions and limitations under the License.
 			);
 
 	&.is-open {
-		@inherit: %spectrum-overlay--open;
+		@extend %spectrum-overlay--open;
 
 		/* Entry animations */
 		transition: transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
diff --git a/components/modal/package.json b/components/modal/package.json
index 22a7086f95a..2267ebc45cc 100644
--- a/components/modal/package.json
+++ b/components/modal/package.json
@@ -15,13 +15,10 @@
   },
   "main": "dist/index-vars.css",
   "peerDependencies": {
-    "@spectrum-css/overlay": ">=4",
     "@spectrum-css/tokens": ">=13"
   },
-  "peerDependenciesMeta": {
-    "@spectrum-css/overlay": {
-      "optional": true
-    }
+  "devDependencies": {
+    "@spectrum-css/commons": "^9.0.2"
   },
   "publishConfig": {
     "access": "public"
diff --git a/components/overlay/CHANGELOG.md b/components/overlay/CHANGELOG.md
deleted file mode 100644
index 57fcc0df644..00000000000
--- a/components/overlay/CHANGELOG.md
+++ /dev/null
@@ -1,176 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-<a name="4.0.2"></a>
-##4.0.2
-🗓
-2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@4.0.1...@spectrum-css/overlay@4.0.2)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="4.0.1"></a>
-##4.0.1
-🗓
-2023-12-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@4.0.0...@spectrum-css/overlay@4.0.1)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="4.0.0"></a>
-#4.0.0
-🗓
-2023-10-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@3.0.9...@spectrum-css/overlay@4.0.0)
-
-\*feat(overlay)!: migrate to spectrum-tokens (#2165)([0331dae](https://github.com/adobe/spectrum-css/commit/0331dae)), closes[#2165](https://github.com/adobe/spectrum-css/issues/2165)
-
-    	###
-    	🛑 BREAKING CHANGES
-
-    		*
-    		migrates Overlay to use `@adobe/spectrum-tokens`
-
-- feat(overlay): migrate to use spectrum-tokens BREAKING CHANGE: migrate overlay to use spectrum tokens
-- chore(tokens): add custom tokens to overlay component
-- docs: regenerate mods
-
-<a name="3.0.9"></a>
-##3.0.9
-🗓
-2023-06-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@3.0.8...@spectrum-css/overlay@3.0.9)
-
-### 🐛 Bug fixes
-
-\*restore files to pre-formatted state([491dbcb](https://github.com/adobe/spectrum-css/commit/491dbcb))
-
-<a name="3.0.8"></a>
-##3.0.8
-🗓
-2023-06-01 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@3.0.7...@spectrum-css/overlay@3.0.8)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="3.0.7"></a>
-
-## 3.0.7
-
-🗓 2023-04-26 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@3.0.6...@spectrum-css/overlay@3.0.7)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="3.0.6"></a>
-
-## 3.0.6
-
-🗓 2023-04-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@3.0.4...@spectrum-css/overlay@3.0.6)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="3.0.5"></a>
-
-## 3.0.5
-
-🗓 2023-04-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@3.0.4...@spectrum-css/overlay@3.0.5)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="3.0.4"></a>
-
-## 3.0.4
-
-🗓 2023-03-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@3.0.3...@spectrum-css/overlay@3.0.4)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="3.0.3"></a>
-
-## 3.0.3
-
-🗓 2023-02-21 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@3.0.2...@spectrum-css/overlay@3.0.3)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="3.0.2"></a>
-
-## 3.0.2
-
-🗓 2023-01-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@3.0.0...@spectrum-css/overlay@3.0.2)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="3.0.1"></a>
-
-## 3.0.1
-
-🗓 2023-01-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@3.0.0...@spectrum-css/overlay@3.0.1)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="3.0.0"></a>
-
-# 3.0.0
-
-🗓 2022-11-10 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@2.0.2-alpha.0...@spectrum-css/overlay@3.0.0)
-
-- refactor(popover)!: migrate to core tokens (#1509) ([011e486](https://github.com/adobe/spectrum-css/commit/011e486)), closes [#1509](https://github.com/adobe/spectrum-css/issues/1509)
-
-### 🛑 BREAKING CHANGES
-
-- migrates popover to core tokens
-
-Co-authored-by: Garth Braithwaite <garthdb@gmail.com>
-Co-authored-by: Patrick Fulton <pfulton@adobe.com>
-
-<a name="2.0.2"></a>
-
-## 2.0.2
-
-🗓 2021-09-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@2.0.2-alpha.0...@spectrum-css/overlay@2.0.2)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="2.0.2-alpha.0"></a>
-
-## 2.0.2-alpha.0
-
-🗓 2021-04-27 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@2.0.1...@spectrum-css/overlay@2.0.2-alpha.0)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="2.0.1"></a>
-
-## 2.0.1
-
-🗓 2021-02-02 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@2.0.1-beta.1...@spectrum-css/overlay@2.0.1)
-
-**Note:** Version bump only for package @spectrum-css/overlay
-
-<a name="2.0.1-beta.1"></a>
-
-## 2.0.1-beta.1
-
-🗓 2020-12-04 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@2.0.1-beta.0...@spectrum-css/overlay@2.0.1-beta.1)
-
-### 🐛 Bug fixes
-
-- make Popover and friends build again ([a6c8a17](https://github.com/adobe/spectrum-css/commit/a6c8a17))
-
-<a name="2.0.1-beta.0"></a>
-
-## 2.0.1-beta.0
-
-🗓 2020-09-23 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/overlay@2.0.0...@spectrum-css/overlay@2.0.1-beta.0)
-
-### 🐛 Bug fixes
-
-- fix the issues caused by component rename ([#778](https://github.com/adobe/spectrum-css/issues/778)) ([e1d180c](https://github.com/adobe/spectrum-css/commit/e1d180c))
-
-<a name="2.0.0"></a>
-
-# 2.0.0
-
-🗓 2019-10-08
-
-### ✨ Features
-
-- move to individually versioned packages with Lerna ([#265](https://github.com/adobe/spectrum-css/issues/265)) ([cb7fd4b](https://github.com/adobe/spectrum-css/commit/cb7fd4b)), closes [#231](https://github.com/adobe/spectrum-css/issues/231) [#214](https://github.com/adobe/spectrum-css/issues/214) [#229](https://github.com/adobe/spectrum-css/issues/229) [#240](https://github.com/adobe/spectrum-css/issues/240) [#239](https://github.com/adobe/spectrum-css/issues/239) [#161](https://github.com/adobe/spectrum-css/issues/161) [#242](https://github.com/adobe/spectrum-css/issues/242) [#246](https://github.com/adobe/spectrum-css/issues/246) [#219](https://github.com/adobe/spectrum-css/issues/219) [#235](https://github.com/adobe/spectrum-css/issues/235) [#189](https://github.com/adobe/spectrum-css/issues/189) [#248](https://github.com/adobe/spectrum-css/issues/248) [#232](https://github.com/adobe/spectrum-css/issues/232) [#248](https://github.com/adobe/spectrum-css/issues/248) [#218](https://github.com/adobe/spectrum-css/issues/218) [#237](https://github.com/adobe/spectrum-css/issues/237) [#255](https://github.com/adobe/spectrum-css/issues/255) [#256](https://github.com/adobe/spectrum-css/issues/256) [#258](https://github.com/adobe/spectrum-css/issues/258) [#257](https://github.com/adobe/spectrum-css/issues/257) [#259](https://github.com/adobe/spectrum-css/issues/259)
diff --git a/components/overlay/README.md b/components/overlay/README.md
deleted file mode 100644
index e6f5d443612..00000000000
--- a/components/overlay/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# @spectrum-css/overlay
-
-> Overlay mixin
-
-This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
-
-See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details.
diff --git a/components/overlay/index.css b/components/overlay/index.css
deleted file mode 100644
index d6572916218..00000000000
--- a/components/overlay/index.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/*!
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-%spectrum-overlay {
-  --spectrum-overlay-animation-distance: 6px;
-  --spectrum-overlay-animation-duration: var(--spectrum-animation-duration-100);
-  --spectrum-overlay-animation-duration-opened: var(--spectrum-animation-duration-0);
-
-  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);
-
-  pointer-events: none;
-}
-
-%spectrum-overlay--open {
-  visibility: visible;
-
-  opacity: 1;
-
-  transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-overlay-animation-duration-opened));
-
-  pointer-events: auto;
-}
-
-%spectrum-overlay--bottom--open {
-  transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
-}
-
-%spectrum-overlay--top--open {
-  transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
-}
-
-%spectrum-overlay--right--open {
-  transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
-}
-
-%spectrum-overlay--left--open {
-  transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
-}
diff --git a/components/overlay/package.json b/components/overlay/package.json
deleted file mode 100644
index 5fdb53e64be..00000000000
--- a/components/overlay/package.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "@spectrum-css/overlay",
-  "version": "4.0.2",
-  "description": "Overlay mixin",
-  "license": "Apache-2.0",
-  "author": "Adobe",
-  "homepage": "https://opensource.adobe.com/spectrum-css/",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/adobe/spectrum-css.git",
-    "directory": "components/overlay"
-  },
-  "bugs": {
-    "url": "https://github.com/adobe/spectrum-css/issues"
-  },
-  "main": "index.css",
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/components/overlay/project.json b/components/overlay/project.json
deleted file mode 100644
index 7e7e650de76..00000000000
--- a/components/overlay/project.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	"$schema": "../../node_modules/nx/schemas/project-schema.json",
-	"name": "overlay",
-	"tags": ["utility"],
-	"targets": {
-		"build": {
-			"executor": "nx:noop"
-		},
-		"clean": {
-			"executor": "nx:noop"
-		},
-		"compare": {
-			"executor": "nx:noop"
-		},
-		"lint": {},
-
-		"test": {
-			"executor": "nx:noop"
-		}
-	}
-}
diff --git a/components/page/index.css b/components/page/index.css
index 0f0a504607d..513b114a586 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/picker/index.css b/components/picker/index.css
index a4400ed6be4..0251bcecdd7 100644
--- a/components/picker/index.css
+++ b/components/picker/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.
 */
 
-@import "../commons/basebutton-coretokens.css";
+@import "@spectrum-css/commons/basebutton.css";
 
 .spectrum-Picker {
   /* font */
@@ -180,7 +180,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Picker {
-  @inherit: %spectrum-BaseButton;
+  @extend %spectrum-BaseButton;
 
   /* Layout */
   display: flex;
@@ -449,7 +449,7 @@ governing permissions and limitations under the License.
   background-color: var(--highcontrast-picker-background-color, transparent);
 
   &.spectrum-Picker--sideLabel {
-    margin-block-start: calc(-1 * var(--spectrum-picker-spacing-top-to-text-side-label-quiet)); 
+    margin-block-start: calc(-1 * var(--spectrum-picker-spacing-top-to-text-side-label-quiet));
   }
 
   .spectrum-Picker-menuIcon {
diff --git a/components/popover/index.css b/components/popover/index.css
index 4788b0d30a9..78f97509112 100644
--- a/components/popover/index.css
+++ b/components/popover/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.
 */
 
-@import "../commons/overlay-coretokens.css";
+@import "@spectrum-css/commons/overlay.css";
 
 .spectrum-Popover {
   /* Used in positioning popover for storybook */
@@ -57,7 +57,7 @@ governing permissions and limitations under the License.
 
 .spectrum-Popover {
   --spectrum-popover-filter: drop-shadow(var(--mod-popover-shadow-horizontal, var(--spectrum-popover-shadow-horizontal)) var(--mod-popover-shadow-vertical, var(--spectrum-popover-shadow-vertical)) var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) var(--mod-popover-shadow-color, var(--spectrum-popover-shadow-color)));
-  @inherit: %spectrum-overlay;
+  @extend %spectrum-overlay;
 
   box-sizing: border-box;
   position: absolute;
@@ -79,7 +79,7 @@ governing permissions and limitations under the License.
 
   /* default opens and animates upward */
   &.is-open {
-    @inherit: %spectrum-overlay--open;
+    @extend %spectrum-overlay--open;
   }
 
   /* has tip triangle */
diff --git a/components/popover/package.json b/components/popover/package.json
index fe7cba67b64..f2666d56b05 100644
--- a/components/popover/package.json
+++ b/components/popover/package.json
@@ -19,13 +19,9 @@
     "@spectrum-css/dialog": ">=9",
     "@spectrum-css/divider": ">=2",
     "@spectrum-css/menu": ">=5",
-    "@spectrum-css/overlay": ">=4",
     "@spectrum-css/tokens": ">=13"
   },
   "peerDependenciesMeta": {
-    "@spectrum-css/overlay": {
-      "optional": true
-    },
     "@spectrum-css/divider": {
       "optional": true
     },
diff --git a/components/quickaction/index.css b/components/quickaction/index.css
index c6786f28a56..44abd968675 100644
--- a/components/quickaction/index.css
+++ b/components/quickaction/index.css
@@ -10,12 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import "../overlay/index.css";
+@import "@spectrum-css/commons/overlay.css";
 
 .spectrum-QuickActions {
   box-sizing: border-box;
 
-  @inherit: %spectrum-overlay;
+  @extend %spectrum-overlay;
 
   display: inline-flex;
   align-items: center;
@@ -29,7 +29,7 @@ governing permissions and limitations under the License.
   border-radius: var(--spectrum-quickactions-border-radius);
 
   &.is-open {
-    @inherit: %spectrum-overlay--open;
+    @extend %spectrum-overlay--open;
   }
 
   .spectrum-ActionButton + .spectrum-ActionButton {
@@ -45,12 +45,12 @@ governing permissions and limitations under the License.
 
 .spectrum-QuickActions--right {
   &.is-open {
-    @inherit: %spectrum-overlay--left--open; /* should animate to the left when aligned right */
+    @extend %spectrum-overlay--left--open; /* should animate to the left when aligned right */
   }
 }
 
 .spectrum-QuickActions--left {
   &.is-open {
-    @inherit: %spectrum-overlay--right--open; /* should animate to the right when aligned left */
+    @extend %spectrum-overlay--right--open; /* should animate to the right when aligned left */
   }
 }
diff --git a/components/quickaction/package.json b/components/quickaction/package.json
index b26f7b7d9e8..57485b7e122 100644
--- a/components/quickaction/package.json
+++ b/components/quickaction/package.json
@@ -17,13 +17,10 @@
   "peerDependencies": {
     "@spectrum-css/actionbutton": ">=5",
     "@spectrum-css/checkbox": ">=8",
-    "@spectrum-css/overlay": ">=4",
     "@spectrum-css/vars": ">=9"
   },
-  "peerDependenciesMeta": {
-    "@spectrum-css/overlay": {
-      "optional": true
-    }
+  "devDependencies": {
+    "@spectrum-css/commons": "^9.0.2"
   },
   "publishConfig": {
     "access": "public"
diff --git a/components/tooltip/index.css b/components/tooltip/index.css
index 42770794a26..68642ee1ba7 100644
--- a/components/tooltip/index.css
+++ b/components/tooltip/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.
 */
 
-@import "../commons/overlay-coretokens.css";
+@import "@spectrum-css/commons/overlay.css";
 
 .spectrum-Tooltip {
   --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100);
@@ -82,7 +82,7 @@ governing permissions and limitations under the License.
 
 
 .spectrum-Tooltip {
-  @inherit: %spectrum-overlay;
+  @extend %spectrum-overlay;
 
   position: relative;
 
@@ -119,7 +119,7 @@ governing permissions and limitations under the License.
   }
 
   &.is-open {
-    @inherit: %spectrum-overlay--open;
+    @extend %spectrum-overlay--open;
   }
 
   & {
diff --git a/components/tooltip/package.json b/components/tooltip/package.json
index 416115311d3..0dd558b86b0 100644
--- a/components/tooltip/package.json
+++ b/components/tooltip/package.json
@@ -16,14 +16,8 @@
   "main": "dist/index-vars.css",
   "peerDependencies": {
     "@spectrum-css/icon": ">=4",
-    "@spectrum-css/overlay": ">=4",
     "@spectrum-css/tokens": ">=13"
   },
-  "peerDependenciesMeta": {
-    "@spectrum-css/overlay": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@spectrum-css/commons": "^9.0.2"
   },
diff --git a/components/underlay/index.css b/components/underlay/index.css
index a96c37c340e..d3b4472b8e7 100644
--- a/components/underlay/index.css
+++ b/components/underlay/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.
 */
 
-@import '../overlay/index.css';
+@import '@spectrum-css/commons/overlay.css';
 
 .spectrum-Underlay {
   --spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0);
@@ -26,7 +26,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Underlay {
-  @inherit: %spectrum-overlay;
+  @extend %spectrum-overlay;
 
   position: fixed;
   inset-block: 0;
@@ -50,7 +50,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Underlay.is-open {
-  @inherit: %spectrum-overlay--open;
+  @extend %spectrum-overlay--open;
 
   /* Entry animations */
   transition: opacity var(--mod-underlay-background-entry-animation-duration, var(--spectrum-underlay-background-entry-animation-duration))
diff --git a/components/underlay/package.json b/components/underlay/package.json
index ebca3317cdb..b238ec4c75f 100644
--- a/components/underlay/package.json
+++ b/components/underlay/package.json
@@ -15,13 +15,10 @@
   },
   "main": "dist/index-vars.css",
   "peerDependencies": {
-    "@spectrum-css/overlay": ">=4",
     "@spectrum-css/tokens": ">=13"
   },
-  "peerDependenciesMeta": {
-    "@spectrum-css/overlay": {
-      "optional": true
-    }
+  "devDependencies": {
+    "@spectrum-css/commons": "^9.0.2"
   },
   "publishConfig": {
     "access": "public"
diff --git a/tools/component-builder-simple/css/processors.js b/tools/component-builder-simple/css/processors.js
index 70af22f0f59..d3599f378e4 100644
--- a/tools/component-builder-simple/css/processors.js
+++ b/tools/component-builder-simple/css/processors.js
@@ -14,6 +14,7 @@ function getProcessors({ noFlatVariables = false, noSelectors = false, keepComme
 	return [
 		require("postcss-import"),
 		require("postcss-nested"),
+		require("postcss-extend"),
 		require("postcss-splitinator")({
 			processIdentifier: (identifier) => {
 				if (identifier === "express") {
@@ -24,7 +25,6 @@ function getProcessors({ noFlatVariables = false, noSelectors = false, keepComme
 			noFlatVariables,
 			noSelectors,
 		}),
-		require("postcss-inherit"),
 		require("./plugins/postcss-transform-logical")(),
 		require("./plugins/postcss-custom-properties-passthrough")(),
 		require("postcss-calc"),
diff --git a/tools/component-builder-simple/package.json b/tools/component-builder-simple/package.json
index c06e3499ec2..5af573a473c 100644
--- a/tools/component-builder-simple/package.json
+++ b/tools/component-builder-simple/package.json
@@ -28,8 +28,8 @@
     "postcss-discard-empty": "^4.0.1",
     "postcss-dropdupedvars": "file:../../plugins/postcss-dropdupedvars",
     "postcss-dropunusedvars": "file:../../plugins/postcss-dropunusedvars",
+    "postcss-extend": "^1.0.5",
     "postcss-import": "^10.0.0",
-    "postcss-inherit": "^4.0.3",
     "postcss-nested": "^3.0.0",
     "postcss-selector-parser": "^6.0.2",
     "postcss-splitinator": "^1.0.2",
diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js
index 017f5621318..c5952ff1ca9 100644
--- a/tools/component-builder/css/processors.js
+++ b/tools/component-builder/css/processors.js
@@ -43,7 +43,7 @@ function getProcessors(
 		require("postcss-import"),
 		require("postcss-remapvars"),
 		require("postcss-nested"),
-		require("postcss-inherit"),
+		require("postcss-extend"),
 		diff ? require("./plugins/postcss-varsonly")() : null,
 		require("postcss-logical")(),
 		require("./plugins/postcss-transform-logical")(),
diff --git a/tools/component-builder/package.json b/tools/component-builder/package.json
index 86bf7a019e3..11162ccbb42 100644
--- a/tools/component-builder/package.json
+++ b/tools/component-builder/package.json
@@ -37,8 +37,8 @@
     "postcss-discard-comments": "^4.0.0",
     "postcss-discard-empty": "^4.0.1",
     "postcss-droproot": "^1.0.3",
+    "postcss-extend": "^1.0.5",
     "postcss-import": "^10.0.0",
-    "postcss-inherit": "^4.0.3",
     "postcss-logical": "^4.0.2",
     "postcss-nested": "^3.0.0",
     "postcss-remapvars": "^1.1.0",
diff --git a/yarn.lock b/yarn.lock
index 3a67ef36f7f..0fafcb54ace 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7834,13 +7834,6 @@ debug@4.3.2:
   dependencies:
     ms "2.1.2"
 
-debug@^3.1.0:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
-  dependencies:
-    ms "^2.1.1"
-
 decamelize-keys@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.1.tgz#04a2d523b2f18d80d0158a43b895d56dff8d19d8"
@@ -12898,7 +12891,7 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3, ms@^2.0.0, ms@^2.1.1, ms@^2.1.3:
+ms@2.1.3, ms@^2.0.0, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -14503,6 +14496,13 @@ postcss-discard-empty@^6.0.1:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
+postcss-extend@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-extend/-/postcss-extend-1.0.5.tgz#5ea98bf787ba3cacf4df4609743f80a833b1d0e7"
+  integrity sha512-zplAc8IovPMe/JqV0B9nl6o6sElIX7VX1CP2FbV+lGZud3hcnDMr4clN0S8xdHthQoTNDN2K1Q+z0YEW5FWc8A==
+  dependencies:
+    postcss "^5.0.4"
+
 postcss-import@^10.0.0:
   version "10.0.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-10.0.0.tgz#4c85c97b099136cc5ea0240dc1dfdbfde4e2ebbe"
@@ -14514,22 +14514,6 @@ postcss-import@^10.0.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-inherit-parser@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-inherit-parser/-/postcss-inherit-parser-0.2.0.tgz#661af4b77fa6c0005dd4ae76c4710d5a756210a7"
-  integrity sha512-XL3QoYrPh+PQqIc4N3x1y0AEcXjG4gjAF+6kvD/vXNmIQRQ1Ck25Z6dyYY7clx6jrG5nlg3v+max6mzoH+K26g==
-  dependencies:
-    postcss "^6.0.22"
-
-postcss-inherit@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-inherit/-/postcss-inherit-4.1.0.tgz#54268633ec137700e72c9eb40ea961571db4d61b"
-  integrity sha512-BI3Dme4twf9uk4LInRtG3NKo3eTmfywXmazVqFvQdVHUb5qlnGItXzUTEj0ihqxpoo1u4bA1lEro3C6+UQxdvg==
-  dependencies:
-    debug "^3.1.0"
-    postcss "^6.0.22"
-    postcss-inherit-parser "^0.2.0"
-
 postcss-licensing@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/postcss-licensing/-/postcss-licensing-1.0.1.tgz#a40a6e28768925670734bff66f118d99c7043c3a"
@@ -14780,7 +14764,7 @@ postcss@^5.0.4, postcss@^5.1.0, postcss@^5.2.16:
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.14, postcss@^6.0.22, postcss@^6.0.8:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.14, postcss@^6.0.8:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==