fix: peeling motion

Author: kai-orion

src/tokens/motion.ts

@@ -9,29 +9,41 @@ export class Motion {
 
     public static readonly plugin = plugin(({ addComponents, addUtilities }) => {
         addComponents({
-            '.motion-easing-emphasized': {
+            '.transition-easing-emphasized': {
                 'transition-timing-function': `var(--${this.motionPrefix}-easing-emphasized, ease-in-out)`,
+            },
+            '.animation-easing-emphasized': {
                 'animation-timing-function': `var(--${this.motionPrefix}-easing-emphasized, ease-in-out)`,
             },
-            '.motion-easing-emphasized-decelerate': {
+            '.transition-easing-emphasized-decelerate': {
                 'transition-timing-function': `var(--${this.motionPrefix}-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1.0))`,
+            },
+            '.animation-easing-emphasized-decelerate': {
                 'animation-timing-function': `var(--${this.motionPrefix}-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1.0))`,
             },
-            '.motion-easing-emphasized-accelerate': {
+            '.transition-easing-emphasized-accelerate': {
                 'transition-timing-function': `var(--${this.motionPrefix}-easing-emphasized-accelerate, cubic-bezier(0.3, 0.0, 0.8, 0.15))`,
+            },
+            '.animation-easing-emphasized-accelerate': {
                 'animation-timing-function': `var(--${this.motionPrefix}-easing-emphasized-accelerate, cubic-bezier(0.3, 0.0, 0.8, 0.15))`,
             },
 
-            '.motion-easing-standard': {
+            '.transition-easing-standard': {
                 'transition-timing-function': `var(--${this.motionPrefix}-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0))`,
+            },
+            '.animation-easing-standard': {
                 'animation-timing-function': `var(--${this.motionPrefix}-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0))`,
             },
-            '.motion-easing-standard-decelerate': {
+            '.transition-easing-standard-decelerate': {
                 'transition-timing-function': `var(--${this.motionPrefix}-easing-standard-decelerate, cubic-bezier(0, 0, 0, 1))`,
+            },
+            '.animation-easing-standard-decelerate': {
                 'animation-timing-function': `var(--${this.motionPrefix}-easing-standard-decelerate, cubic-bezier(0, 0, 0, 1))`,
             },
-            '.motion-easing-standard-accelerate': {
+            '.transition-easing-standard-accelerate': {
                 'transition-timing-function': `var(--${this.motionPrefix}-easing-standard-accelerate, cubic-bezier(0.3, 0, 1, 1))`,
+            },
+            '.animation-easing-standard-accelerate': {
                 'animation-timing-function': `var(--${this.motionPrefix}-easing-standard-accelerate, cubic-bezier(0.3, 0, 1, 1))`,
             },
         })
@@ -40,39 +52,57 @@ export class Motion {
             /**
              * 	Begin and end on screen
              */
-            '.motion-duration-emphasized': {
+            '.transition-duration-emphasized': {
                 'transition-duration': '500ms',
             },
+            '.animation-duration-emphasized': {
+                'animation-duration': '500ms',
+            },
             /**
              * 	Enter the screen
              */
-            '.motion-duration-emphasized-decelerate': {
+            '.transition-duration-emphasized-decelerate': {
                 'transition-duration': '400ms',
             },
+            '.animation-duration-emphasized-decelerate': {
+                'animation-duration': '400ms',
+            },
             /**
              * 	Exit the screen
              */
-            '.motion-duration-emphasized-accelerate': {
+            '.transition-duration-emphasized-accelerate': {
                 'transition-duration': '200ms',
             },
+            '.animation-duration-emphasized-accelerate': {
+                'animation-duration': '200ms',
+            },
             /**
              * 	Begin and end on screen
              */
-            '.motion-duration-standard': {
+            '.transition-duration-standard': {
                 'transition-duration': '300ms',
             },
+            '.animation-duration-standard': {
+                'animation-duration': '300ms',
+            },
             /**
              * 	Enter the screen
              */
-            '.motion-duration-standard-decelerate': {
+            '.transition-duration-standard-decelerate': {
                 'transition-duration': '250ms',
             },
+            '.animation-duration-standard-decelerate': {
+                'animation-duration': '250ms',
+            },
             /**
              * 	Exit the screen
              */
-            '.motion-duration-standard-accelerate': {
+            '.transition-duration-standard-accelerate': {
                 'transition-duration': '200ms',
             },
+            '.animation-duration-standard-accelerate': {
+                'animation-duration': '200ms',
+            },
         })
     })