feat: animations vanilla extract

Author: lisalupi

.changeset/moody-carrots-drive.md

@@ -0,0 +1,9 @@
+---
+"@ultraviolet/ui": major
+---
+
+**BREAKING CHANGE** Remove all emotion animation, replace with vanilla-extract animation by default. To use the Emotion animation, add `Emotion` to the name of the animation: 
+```js
+import { fadeIn } from '@ultraviolet/ui' // vanilla-extract animation
+import { fadeInEmotion } from '@ultraviolet/ui' // Emotion animation
+```

packages/plus/src/components/EstimateCost/Components/components.css.ts

@@ -1,5 +1,5 @@
 import { theme } from '@ultraviolet/themes'
-import { zoomInVanillaExtract } from '@ultraviolet/ui'
+import { zoomIn } from '@ultraviolet/ui'
 import { createVar, style } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
 
@@ -40,7 +40,7 @@ export const estimateCostItemResourceName = recipe({
   variants: {
     animated: {
       true: {
-        animation: `800ms ${zoomInVanillaExtract}`,
+        animation: `800ms ${zoomIn}`,
       },
     },
   },
@@ -66,7 +66,7 @@ export const estimateCostResourceName = recipe({
     },
     isAnimated: {
       true: {
-        animation: `${zoomInVanillaExtract} 800ms`,
+        animation: `${zoomIn} 800ms`,
       },
     },
   },

packages/plus/src/components/Navigation/components/items.css.ts

@@ -2,7 +2,7 @@ import { theme } from '@ultraviolet/themes'
 import { style, styleVariants } from '@vanilla-extract/css'
 import { ANIMATION_DURATION } from '../constants'
 import { shrinkHeight } from '../animations.css'
-import { fadeInVanillaExtract } from '@ultraviolet/ui'
+import { fadeIn } from '@ultraviolet/ui'
 import { recipe } from '@vanilla-extract/recipes'
 
 export const navigationItemMenuContainer = style({ width: 180 })
@@ -236,10 +236,10 @@ export const navigationItemPinnedButton = style({
 
 export const navigationItemAnimatedIcon = styleVariants({
   expand: {
-    animation: `${fadeInVanillaExtract} ${ANIMATION_DURATION}ms ease-in-out`,
+    animation: `${fadeIn} ${ANIMATION_DURATION}ms ease-in-out`,
   },
   collapse: {
-    animation: `${fadeInVanillaExtract} ${ANIMATION_DURATION}ms ease-in-out reverse`,
+    animation: `${fadeIn} ${ANIMATION_DURATION}ms ease-in-out reverse`,
   },
 })
 

packages/ui/src/components/ActionBar/styles.css.ts

@@ -1,5 +1,5 @@
 import { theme } from '@ultraviolet/themes'
-import { fadeInVanillaExtract } from '../../utils'
+import { fadeIn } from '../../utils'
 import { createVar, style } from '@vanilla-extract/css'
 
 export const rankActionBar = createVar()
@@ -10,7 +10,7 @@ export const stackActionBar = style({
 })
 
 export const actionBar = style({
-  animation: `${fadeInVanillaExtract} 0.2s ease-in-out`,
+  animation: `${fadeIn} 0.2s ease-in-out`,
   backgroundColor: theme.colors.other.elevation.background.fixed,
   borderRadius: theme.radii.default,
   boxShadow: `${theme.shadows.fixed[0]}, ${theme.shadows.fixed[1]}`,

packages/ui/src/components/Modal/styles.css.ts

@@ -2,7 +2,7 @@ import { theme } from '@ultraviolet/themes'
 import { createVar, style } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
 import { MODAL_PLACEMENT, MODAL_WIDTH } from './constants'
-import { slideFromBottomVanillaExtract } from '../../utils'
+import { slideFromBottom } from '../../utils'
 
 export const topModal = createVar()
 export const positionModal = createVar()
@@ -96,7 +96,7 @@ export const modal = recipe({
     },
     animation: {
       true: {
-        animation: `${slideFromBottomVanillaExtract} 0.3s ease-in-out forwards`,
+        animation: `${slideFromBottom} 0.3s ease-in-out forwards`,
       },
     },
     positivePosition: {

packages/ui/src/components/Status/styles.css.ts

@@ -1,6 +1,6 @@
 import { theme } from '@ultraviolet/themes'
 import { recipe } from '@vanilla-extract/recipes'
-import { pingVanillaExtract } from '../../utils'
+import { ping } from '../../utils'
 import { SENTIMENTS } from './constant'
 
 const HEIGHT = '10px'
@@ -39,7 +39,7 @@ export const animatedCircleStatus = recipe({
     ...baseCircle,
     position: 'absolute',
     opacity: 0.75,
-    animation: `${pingVanillaExtract} 1.1s cubic-bezier(0, 0, 0.2, 1) infinite`,
+    animation: `${ping} 1.1s cubic-bezier(0, 0, 0.2, 1) infinite`,
   },
   variants: {
     sentiment: sentimentsCircleStatus,

packages/ui/src/index.ts

@@ -11,38 +11,61 @@ export {
 export {
   Breakpoint,
   bounce,
+  bounceEmotion,
   down,
   fadeIn,
-  fadeInVanillaExtract,
+  fadeInEmotion,
   fadeOut,
+  fadeOutEmotion,
   flash,
+  flashEmotion,
   getUUID,
   normalize,
   ping,
-  pingVanillaExtract,
+  pingEmotion,
   pulse,
+  pulseEmotion,
   quickScaleDown,
+  quickScaleDownEmotion,
   scaleBack,
+  scaleBackEmotion,
   scaleDown,
+  scaleDownEmotion,
   scaleForward,
+  scaleForwardEmotion,
   scaleUp,
+  scaleUpEmotion,
   sketchIn,
+  sketchInEmotion,
   sketchOut,
+  sketchOutEmotion,
   slideDownLarge,
+  slideDownLargeEmotion,
   slideFromBottom,
-  slideFromBottomVanillaExtract,
+  slideFromBottomEmotion,
   slideFromLeft,
+  slideFromLeftEmotion,
   slideFromRight,
+  slideFromRightEmotion,
   slideFromTop,
+  slideFromTopEmotion,
   slideToBottom,
+  slideToBottomEmotion,
   slideToLeft,
+  slideToLeftEmotion,
   slideToRight,
+  slideToRightEmotion,
   slideToTop,
+  slideToTopEmotion,
   slideUpLarge,
+  slideUpLargeEmotion,
   unfoldIn,
+  unfoldInEmotion,
   unfoldOut,
+  unfoldOutEmotion,
   up,
   zoomIn,
-  zoomInVanillaExtract,
+  zoomInEmotion,
   zoomOut,
+  zoomOutEmotion,
 } from './utils'