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

Author: ArtBlue

.changeset/giant-comics-admire.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(tokens): added new motion tokens

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 {

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

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 {

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