feat(overlay,commons): deprecate overlay; migrate references to commo…

…ns (#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

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