fix a few more issues

components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx

@@ -43,9 +43,9 @@ const Label = ({
     fontWeight={$size === 'extraSmall' ? '$normal' : 'bold'}
     height={getValuesForKnob($size, 'height')}
     justifyContent="center"
-    left="50%"
+    left="1/2"
     position="absolute"
-    top="50%"
+    top="1/2"
     transform={$type === 'eth' ? 'translateX(-50%)' : 'translateX(50%)'}
     transition="color 0.1s linear"
     translate="-50% -50%"
@@ -84,9 +84,9 @@ const Slider = ({
     borderRadius={$size === 'extraSmall' ? 'full' : '$medium'}
     display="block"
     height={getValuesForKnob($size, 'height')}
-    left="50%"
+    left="1/2"
     position="absolute"
-    top="50%"
+    top="1/2"
     transition="transform 0.3s ease-in-out, background-color 0.1s ease-in-out"
     translate="-50% -50%"
     width={getValuesForKnob($size, 'width')}

components/src/components/molecules/Dropdown/Dropdown.tsx

@@ -206,7 +206,7 @@ const MenuButton = React.forwardRef<HTMLElement, BoxProps & MenuButtonProps>(
           borderRadius="full"
           position="absolute"
           right="3"
-          top="50%"
+          top="1/2"
           transform="translateY(-50%)"
           wh="2"
         />

components/src/components/molecules/RadioButton/RadioButton.tsx

@@ -9,9 +9,7 @@ import { Field } from '../../atoms/Field/Field'
 import { getTestId } from '../../../utils/utils'
 import type { BoxProps } from '../../atoms/Box/Box'
 import { Box } from '../../atoms/Box/Box'
-import type { Color } from './utils/getValidatedColor'
-import { getValidatedColor } from './utils/getValidatedColor'
-
+import type { Color } from '@/src/tokens/color'
 type NativeInputProps = React.InputHTMLAttributes<HTMLInputElement>
 
 export type RadioButtonProps = {
@@ -52,12 +50,12 @@ Omit<
 const Mark = ({ $color, disabled, ...props }: BoxProps & { $color: Color }) => (
   <Box
     {...props}
-    backgroundColor={disabled ? 'greyPrimary' : getValidatedColor($color)}
+    backgroundColor={disabled ? 'greyPrimary' : $color}
     borderRadius="full"
-    left="50%"
+    left="1/2"
     pointerEvents="none"
     position="absolute"
-    top="50%"
+    top="1/2"
     transition="all 150ms ease-in-out"
     translate="-50% -50%"
     wh="3"

components/src/components/molecules/Select/Select.tsx

@@ -256,14 +256,14 @@ const SelectOptionContainer = ({
     bottom={getValueForTransitionState($state, 'bottom', $direction)}
     display={$state === 'exited' ? 'none' : 'block'}
     fontSize={getValueForSize($size, 'fontSize')}
-    left={$align === 'left' ? 0 : 'unset'}
+    left={$align === 'left' ? '0' : 'unset'}
     lineHeight="body"
     minWidth="full"
     opacity={getValueForTransitionState($state, 'opacity', $direction)}
     overflow="hidden"
     padding="2"
     position="absolute"
-    right={$align === 'right' ? 0 : 'unset'}
+    right={$align === 'right' ? '0' : 'unset'}
     top={getValueForTransitionState($state, 'top', $direction)}
     transition="all 0.3s cubic-bezier(1, 0, 0.22, 1.6), z-index 0.3s linear"
     visibility={getValueForTransitionState($state, 'visibility', $direction)}

components/src/components/molecules/Slider/Slider.tsx

@@ -50,7 +50,7 @@ const SliderComponent = React.forwardRef<HTMLElement, BoxProps>(
       cursor={{ base: 'pointer', disabled: 'not-allowed' }}
       filter={{ base: 'grayscale(0)', disabled: 'grayscale(100%)' }}
       height="1.5"
-      opacity={{ base: '1', disabled: '1.0' }}
+      opacity={1}
       ref={ref}
       type="range"
       width="full"

components/src/components/molecules/ThemeToggle/ThemeToggle.tsx

@@ -44,10 +44,10 @@ const Label = ({
     fontSize="small"
     fontWeight={$size === 'extraSmall' ? '$normal' : 'bold'}
     justifyContent="center"
-    left="50%"
+    left="1/2"
     pointerEvents="none"
     position="absolute"
-    top="50%"
+    top="1/2"
     transform={$mode === 'dark' ? 'translateX(-50%)' : 'translateX(50%)'}
     transition="color 0.1s linear"
     translate="-50% -50%"
@@ -85,10 +85,10 @@ const Slider = ({
     backgroundColor={getValidatedColor($color)}
     borderRadius="full"
     display="block"
-    left="50%"
+    left="1/2"
     pointerEvents="none"
     position="absolute"
-    top="50%"
+    top="1/2"
     transition="transform 0.3s ease-in-out, background-color 0.1s ease-in-out"
     translate="-50% -50%"
     wh={getValueForSize($size, 'knobSize')}

components/src/components/molecules/Tooltip/Tooltip.tsx

@@ -12,9 +12,12 @@ import type { Colors } from '@/src/tokens'
 import type { BoxProps } from '../../atoms/Box/Box'
 import { Box } from '../../atoms/Box/Box'
 import { getValueForPlacement } from './utils/getValueForPlacement'
+import * as styles from './styles.css'
+import clsx from 'clsx'
+import type { Color } from '@/src/tokens/color'
 
 type TooltipPopoverElementProps = {
-  $background: any
+  $background: Color
   $placement: DynamicPopoverSide
   $mobilePlacement: DynamicPopoverSide
 }
@@ -24,14 +27,15 @@ const TooltipPopoverElement = ({
   $placement,
   $mobilePlacement,
   children,
+  className,
   ...props
 }: BoxProps & TooltipPopoverElementProps) => (
   <Box
     {...props}
     backgroundColor={$background}
     borderRadius="large"
     boxSizing="border-box"
-    filter="drop-shadow(0px 0px 1px #e8e8e8) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2))"
+    className={clsx(className, styles.popover)}
     overflow="visible"
     padding="2.5"
     position="relative"

components/src/components/molecules/Tooltip/styles.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css'
+
+export const popover = style({
+  filter: 'drop-shadow(0px 0px 1px #e8e8e8) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2))',
+})

components/src/css/sprinkles.css.ts

@@ -65,6 +65,11 @@ const responsivePropeties = defineProperties({
     paddingRight: commonVars.space,
     paddingTop: commonVars.space,
     paddingBottom: commonVars.space,
+    borderRadius: commonVars.radii,
+    borderBottomLeftRadius: commonVars.radii,
+    borderBottomRightRadius: commonVars.radii,
+    borderTopRightRadius: commonVars.radii,
+    borderTopLeftRadius: commonVars.radii,
   },
   shorthands: {
     p: ['padding'],
@@ -106,8 +111,8 @@ const staticProperties = defineProperties({
     textTransform: ['capitalize', 'uppercase', 'lowercase', 'none', 'initial', 'inherit'],
     borderWidth: commonVars.borderWidths,
     position: ['static', 'absolute', 'relative', 'fixed', 'sticky', 'initial', 'inherit'],
-    borderRadius: commonVars.radii,
     cursor: ['pointer', 'not-allowed', 'text', 'initial', 'inherit'],
+    pointerEvents: ['none', 'all', 'initial', 'inherit'],
     transitionTimingFunction: commonVars.transitionTimingFunction,
     transitionDuration: commonVars.transitionDuration,
     transitionProperty: ['all', 'none', 'box-shadow', 'background-color', 'initial', 'inherit'],

components/src/tokens/border.ts

@@ -13,6 +13,7 @@ export const borderWidths = {
 }
 
 export const radii = {
+  '0': '0',
   'none': '0',
   'extraSmall': '2px',
   'small': '4px',