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

adobe · Jan 17, 2024 · a9831bf · a9831bf
1 parent 60b44bb
commit a9831bf
Show file tree

Hide file tree

Showing 34 changed files with 216 additions and 639 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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";