feat(tokens): added new motion tokens (#2562)

eBay · Feb 6, 2025 · 59d2e12 · 59d2e12
1 parent cf2b10e
commit 59d2e12
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 4 deletions.
diff --git a/.changeset/giant-comics-admire.md b/.changeset/giant-comics-admire.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(tokens): added new motion tokens
diff --git a/dist/accordion/accordion.css b/dist/accordion/accordion.css
@@ -26,8 +26,8 @@ ul.accordion details .details__content {
     transform: scaleY(0);
     transform-origin: top;
     transition:
-        opacity 0.5s cubic-bezier(0.3, 0, 0, 1),
-        transform 0.5s cubic-bezier(0.3, 0, 0, 1);
+        opacity var(--motion-duration-medium-3) var(--motion-easing-standard),
+        transform var(--motion-duration-medium-3) var(--motion-easing-standard);
 }
 
 ul.accordion details[open] .details__content {

diff --git a/dist/tokens/evo-light.css b/dist/tokens/evo-light.css
@@ -196,4 +196,24 @@
         var(--color-ai-solid-green-subtle) 100%
     );
     --color-media-disabled-filter: grayscale(1) opacity(0.25);
+    /* Motion Functions */
+    --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);
+    --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);
+    --motion-easing-quick-exit: cubic-bezier(1, 0, 0, 1);
+    --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);
+    --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);
+    --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);
+    --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.5);
+    --motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+    /* Motion Timings */
+    --motion-duration-instant: 17ms;
+    --motion-duration-short-1: 50ms;
+    --motion-duration-short-2: 83ms;
+    --motion-duration-short-3: 167ms;
+    --motion-duration-medium-1: 250ms;
+    --motion-duration-medium-2: 333ms;
+    --motion-duration-medium-3: 500ms;
+    --motion-duration-long-1: 667ms;
+    --motion-duration-long-2: 883ms;
+    --motion-duration-long-3: 1000ms;
 }
diff --git a/src/sass/accordion/accordion.scss b/src/sass/accordion/accordion.scss
@@ -33,8 +33,8 @@ ul.accordion details .details__content {
     transform: scaleY(0);
     transform-origin: top;
     transition:
-        opacity 500ms cubic-bezier(0.3, 0, 0, 1),
-        transform 500ms cubic-bezier(0.3, 0, 0, 1);
+        opacity var(--motion-duration-medium-3) var(--motion-easing-standard),
+        transform var(--motion-duration-medium-3) var(--motion-easing-standard);
 }
 
 ul.accordion details[open] .details__content {

diff --git a/src/tokens/evo-light.css b/src/tokens/evo-light.css
@@ -196,4 +196,24 @@
         var(--color-ai-solid-green-subtle) 100%
     );
     --color-media-disabled-filter: grayscale(1) opacity(0.25);
+    /* Motion Functions */
+    --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);
+    --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);
+    --motion-easing-quick-exit: cubic-bezier(1, 0, 0, 1);
+    --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);
+    --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);
+    --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);
+    --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.5);
+    --motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+    /* Motion Timings */
+    --motion-duration-instant: 17ms;
+    --motion-duration-short-1: 50ms;
+    --motion-duration-short-2: 83ms;
+    --motion-duration-short-3: 167ms;
+    --motion-duration-medium-1: 250ms;
+    --motion-duration-medium-2: 333ms;
+    --motion-duration-medium-3: 500ms;
+    --motion-duration-long-1: 667ms;
+    --motion-duration-long-2: 883ms;
+    --motion-duration-long-3: 1000ms;
 }