feat: vanilla extract on badge and actionBar (#5461)

* feat: vanilla extract on badge and actionBar

* fix: create vanilla extract fadeIn animation

Author: lisalupi

packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap

@@ -1,10 +1,10 @@
 'use client'
 
-import { assignInlineVars } from '@vanilla-extract/dynamic'
+import { theme } from '@ultraviolet/themes'
 import type { ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { Stack } from '../Stack'
-import { actionBar, rankActionBar, stackActionBar } from './styles.css'
+import { actionBar, stackActionBar } from './styles.css'
 
 type ActionBarProps = {
   children: ReactNode
@@ -36,9 +36,9 @@ export const ActionBar = ({
       className={`${className ? `${className} ` : ''}${actionBar}`}
       data-testid={dataTestId}
       role={role}
-      style={assignInlineVars({
-        [rankActionBar]: `${rank}`,
-      })}
+      style={{
+        bottom: `calc(${theme.sizing['700']} * ${rank} + ${theme.space['2']})`,
+      }}
     >
       <Stack alignItems="center" className={stackActionBar}>
         {children}

packages/plus/src/components/EstimateCost/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,8 +1,6 @@
 import { theme } from '@ultraviolet/themes'
 import { fadeInVanillaExtract } from '../../utils'
-import { createVar, style } from '@vanilla-extract/css'
-
-export const rankActionBar = createVar()
+import { style } from '@vanilla-extract/css'
 
 export const stackActionBar = style({
   height: '100%',
@@ -19,5 +17,4 @@ export const actionBar = style({
   position: 'fixed',
   transform: 'translate(-50%, 0)',
   width: '37.5rem',
-  bottom: `calc(${theme.sizing['700']} * ${rankActionBar} + ${theme.space['2']})`,
 })