feat(overlay)!: migrate to spectrum-tokens (#2165)

BREAKING CHANGE: 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

---------

Co-authored-by: Rajdeep Chandra <rajdeepc@adobe.com>
Co-authored-by: Patrick Fulton <pfulton@adobe.com>

Author: 3 people

components/commons/metadata/mods.md

@@ -1,6 +1,4 @@
-| Modifiable Custom Properties   |
-| ------------------------------ |
-| `--mod-animation-duration-100` |
-| `--mod-focus-indicator-gap`    |
-| `--mod-line-height-100`        |
-| `--mod-sans-font-family-stack` |
+| Modifiable Custom Properties              |
+| ----------------------------------------- |
+| `--mod-overlay-animation-distance`        |
+| `--mod-overlay-animation-duration-opened` |

components/commons/overlay-coretokens.css

@@ -14,6 +14,7 @@ governing permissions and limitations under the License.
   /* TODO: replace with core tokens */
   --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;
 
@@ -29,26 +30,26 @@ governing permissions and limitations under the License.
 %spectrum-overlay--open {
   visibility: visible;
   opacity: 1;
-  transition-delay: 0ms;
+  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(--spectrum-overlay-animation-distance));
+  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(--spectrum-overlay-animation-distance)));
+  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(--spectrum-overlay-animation-distance));
+  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(--spectrum-overlay-animation-distance)));
+  transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
 }

components/overlay/index.css

@@ -10,15 +10,17 @@ governing permissions and limitations under the License.
 */
 
 %spectrum-overlay {
-  --spectrum-overlay-animation-distance: var(--spectrum-picker-m-texticon-popover-offset-y);
+  --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-global-animation-duration-100) ease-in-out,
-              opacity var(--spectrum-global-animation-duration-100) ease-in-out,
-              visibility 0ms linear var(--spectrum-global-animation-duration-100);
+  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;
 }
@@ -28,23 +30,23 @@ governing permissions and limitations under the License.
 
   opacity: 1;
 
-  transition-delay: 0ms;
+  transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-overlay-animation-duration-opened));
 
   pointer-events: auto;
 }
 
 %spectrum-overlay--bottom--open {
-  transform: translateY(var(--spectrum-overlay-animation-distance));
+  transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
 }
 
 %spectrum-overlay--top--open {
-  transform: translateY(calc(-1 * var(--spectrum-overlay-animation-distance)));
+  transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
 }
 
 %spectrum-overlay--right--open {
-  transform: translateX(var(--spectrum-overlay-animation-distance));
+  transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
 }
 
 %spectrum-overlay--left--open {
-  transform: translateX(calc(-1 * var(--spectrum-overlay-animation-distance)));
+  transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
 }

components/overlay/metadata/mods.md

@@ -0,0 +1,4 @@
+| Modifiable Custom Properties              |
+| ----------------------------------------- |
+| `--mod-overlay-animation-distance`        |
+| `--mod-overlay-animation-duration-opened` |