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

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

components/commons/basebutton.css

@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 
 %spectrum-BaseButton {
-
  /* Contain halo */
  position: relative;
 
@@ -41,15 +40,15 @@ 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;
 
  text-decoration: none;
- font-family: var(--spectrum-alias-body-text-font-family);
+ font-family: var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack));
 
- line-height: var(--spectrum-alias-component-text-line-height);
+ line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
 
  user-select: none;
  -webkit-user-select: none;
@@ -86,25 +85,21 @@ 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;
+ margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1);
+ transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
+ margin 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);
  }
  }
 }

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

components/commons/overlay-coretokens.css → 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))));
 }