feat(underlay): use core tokens

adobe · Sep 8, 2023 · 9c555ab · 9c555ab
1 parent 1062847
commit 9c555ab
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 42 deletions.
diff --git a/packages/underlay/package.json b/packages/underlay/package.json
@@ -60,7 +60,7 @@
         "@spectrum-web-components/base": "^0.38.0"
     },
     "devDependencies": {
-        "@spectrum-css/underlay": "^2.0.53"
+        "@spectrum-css/underlay": "^3.0.3"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/underlay/src/spectrum-underlay.css b/packages/underlay/src/spectrum-underlay.css
@@ -12,13 +12,15 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
+    --spectrum-overlay-animation-distance: var(
+        --spectrum-picker-m-texticon-popover-offset-y
+    );
     opacity: 0;
     pointer-events: none;
-    transition: transform var(--spectrum-global-animation-duration-100, 0.13s)
+    transition: transform var(--spectrum-global-animation-duration-100)
             ease-in-out,
-        opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out,
-        visibility 0s linear
-            var(--spectrum-global-animation-duration-100, 0.13s);
+        opacity var(--spectrum-global-animation-duration-100) ease-in-out,
+        visibility 0s linear var(--spectrum-global-animation-duration-100);
     visibility: hidden;
 }
 :host([open]) {
@@ -28,65 +30,78 @@ governing permissions and limitations under the License.
     visibility: visible;
 }
 :host {
-    --spectrum-dialog-confirm-background-entry-animation-delay: 0s;
-    --spectrum-dialog-confirm-background-exit-animation-ease: cubic-bezier(
-        0.5,
-        0,
-        1,
-        1
+    --spectrum-underlay-background-entry-animation-delay: var(
+        --spectrum-animation-duration-0
+    );
+    --spectrum-underlay-background-exit-animation-ease: var(
+        --spectrum-animation-ease-in
+    );
+    --spectrum-underlay-background-entry-animation-ease: var(
+        --spectrum-animation-ease-out
+    );
+    --spectrum-underlay-background-entry-animation-duration: var(
+        --spectrum-animation-duration-600
+    );
+    --spectrum-underlay-background-exit-animation-duration: var(
+        --spectrum-animation-duration-300
     );
-    --spectrum-dialog-confirm-background-entry-animation-ease: cubic-bezier(
-        0,
-        0,
-        0.4,
-        1
+    --spectrum-underlay-background-exit-animation-delay: var(
+        --spectrum-animation-duration-200
+    );
+    --spectrum-underlay-background-color: rgba(
+        var(--spectrum-black-rgb),
+        var(--spectrum-overlay-opacity)
     );
 }
 :host {
-    inset: 0;
+    background-color: var(
+        --mod-underlay-background-color,
+        var(--spectrum-underlay-background-color)
+    );
+    inset-block: 0;
+    inset-inline: 0;
     overflow: hidden;
     position: fixed;
     transition: opacity
             var(
-                --spectrum-dialog-confirm-background-exit-animation-duration,
-                var(--spectrum-global-animation-duration-300)
+                --mod-underlay-background-exit-animation-duration,
+                var(--spectrum-underlay-background-exit-animation-duration)
             )
             var(
-                --spectrum-dialog-confirm-background-exit-animation-ease,
-                var(--spectrum-global-animation-linear)
+                --mod-underlay-background-exit-animation-ease,
+                var(--spectrum-underlay-background-exit-animation-ease)
             )
             var(
-                --spectrum-dialog-confirm-background-exit-animation-delay,
-                var(--spectrum-global-animation-duration-200)
+                --mod-underlay-background-exit-animation-delay,
+                var(--spectrum-underlay-background-exit-animation-delay)
             ),
         visibility 0s linear
             calc(
                 var(
-                        --spectrum-dialog-confirm-background-exit-animation-delay,
-                        var(--spectrum-global-animation-duration-200)
+                        --mod-underlay-background-exit-animation-delay,
+                        var(--spectrum-underlay-background-exit-animation-delay)
                     ) +
                     var(
-                        --spectrum-dialog-confirm-background-exit-animation-duration,
-                        var(--spectrum-global-animation-duration-300)
+                        --mod-underlay-background-exit-animation-duration,
+                        var(
+                            --spectrum-underlay-background-exit-animation-duration
+                        )
                     )
             );
     z-index: 1;
 }
 :host([open]) {
     transition: opacity
         var(
-            --spectrum-dialog-confirm-background-entry-animation-duration,
-            var(--spectrum-global-animation-duration-600)
+            --mod-underlay-background-entry-animation-duration,
+            var(--spectrum-underlay-background-entry-animation-duration)
         )
         var(
-            --spectrum-dialog-confirm-background-entry-animation-ease,
-            var(--spectrum-global-animation-linear)
+            --mod-underlay-background-entry-animation-ease,
+            var(--spectrum-underlay-background-entry-animation-ease)
         )
-        var(--spectrum-dialog-confirm-background-entry-animation-delay, 0s);
-}
-:host {
-    background: var(
-        --spectrum-dialog-confirm-overlay-background-color,
-        var(--spectrum-alias-background-color-modal-overlay)
-    );
+        var(
+            --mod-underlay-background-entry-animation-delay,
+            var(--spectrum-underlay-background-entry-animation-delay)
+        );
 }
diff --git a/scripts/spectrum-tokens.js b/scripts/spectrum-tokens.js
@@ -83,6 +83,7 @@ const tokenPackages = [
     'pickerbutton',
     'sidenav',
     'table',
+    'underlay',
 ];
 
 const packagePaths = tokenPackages.map((packageName) => {

diff --git a/yarn.lock b/yarn.lock
@@ -6467,10 +6467,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-5.0.37.tgz#d63177a4937122eaccf218eae5145b7f375fd1a5"
   integrity sha512-buWiWksP38j194JdOuIq6EAJNE8xhzLCZsO9PUS0lkgFj0MVWLoMhBZY/7l7fJoUZHwYOE5yAo1/G6IOKq1TZg==
 
-"@spectrum-css/underlay@^2.0.53":
-  version "2.0.53"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.53.tgz#336b88f102a640f57df16ba76fd954e5d60becd0"
-  integrity sha512-rV42xKdxN4RXwiAp/iRrA4wlVL1EZ7i1IlECDrMUi2UypUyFN8evxwp+6ZGloPGYz0Gce/Vn41gOtrdCxkDJtA==
+"@spectrum-css/underlay@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-3.0.3.tgz#817f91d74af90c25d2e1e5f0066bc0e6f612f7d2"
+  integrity sha512-RAgbnfz0KxwPuX9MaZsGKOyrwcV8wQjA+2o6QDrqcIAyAgJ3ssNqMUEtd6yW4Hj7IofRdfPB7hsobbcFUwKjDw==
 
 "@spectrum-css/vars@^9.0.8":
   version "9.0.8"