feat(overlay,commons): deprecate overlay; migrate references to commons (#2429)

- deprecate @spectrum-css/overlay as duplicate of @spectrum-css/commons/overlay.css
- @spectrum-css/commons/overlay.css, incorporate fallbacks into the varstacks
- @spectrum-css/commons remove basebutton.css and rename basebutton-coretokens.css to basebutton.css
- @spectrum-css/commons remove overlay.css and rename overlay-coretokens.css to overlay.css

Author: castastrophe

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));

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));
   }
 }

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)));

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));