more fixes

components/src/components/atoms/Button/Button.tsx

@@ -210,7 +210,7 @@ const CounterIconBox = ({
     height="6"
     justifyContent="center"
     minWidth="6"
-    opacity={$visible ? 1 : 0}
+    opacity={$visible ? '1' : '0'}
     pointerEvents="none"
     px="1"
     transitionDuration={300}

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

@@ -144,7 +144,7 @@ const DropdownMenuBox = React.forwardRef<
       bottom={$direction === 'up' ? 'full' : 'unset'}
       marginBottom={$direction === 'up' ? '1.5' : 'unset'}
       marginTop={$direction === 'down' ? '1.5' : 'unset'}
-      opacity={1}
+      opacity="1"
       padding="1.5"
       ref={ref}
       // transform={match([$state, $direction, $shortThrow])

components/src/components/molecules/Input/Input.tsx

@@ -215,7 +215,7 @@ const ActionButton = ({
       flexShrink={0}
       justifyContent="flex-start"
       // marginLeft={`calc(-1 * ${getValueForSize($size, 'iconPadding')})`}
-      opacity={1}
+      opacity="1"
       // paddingRight={getValueForSize($size, 'outerPadding')}
       transform={scale(1)}
       transition="all 0.1s ease-in-out"

components/src/components/molecules/Modal/Modal.tsx

@@ -35,7 +35,7 @@ const Container: React.FC<BoxProps & ContainerProps> = ({
         base: getValueForMode(mobileMode, 'left'),
         sm: getValueForMode(desktopMode, 'left'),
       }}
-      opacity={entered ? 1 : 0}
+      opacity={entered ? '1' : '0'}
       position="fixed"
       top={{
         base: getValueForMode(mobileMode, 'top'),

components/src/components/molecules/Modal/utils/getValueForMode.ts

@@ -8,7 +8,7 @@ type Properties = {
   left: Space
   translate: string
   transform: string
-  bottom: string
+  bottom: Space
 }
 
 type Property = keyof Properties
@@ -28,7 +28,7 @@ const modeMap: { [key in Mode]: Properties } = {
     left: '0',
     transform: 'translateY(-128px)',
     translate: 'unset',
-    bottom: 'uset',
+    bottom: 'unset',
   },
   desktop: {
     width: 'min',
@@ -39,6 +39,6 @@ const modeMap: { [key in Mode]: Properties } = {
     bottom: 'unset',
   },
 }
-export const getValueForMode = (mode: Mode, property: Property) => {
+export const getValueForMode = <P extends Property>(mode: Mode, property: P) => {
   return modeMap[mode]?.[property] || modeMap.desktop[property]
 }

components/src/components/molecules/Profile/Profile.tsx

@@ -72,7 +72,6 @@ const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
         hover: translateY($hasDropdown ? -1 : 0),
       }}
       transitionDuration={150}
-      transitionProperty="color, border-color, background-color, transform, filter"
       transitionTimingFunction="inOut"
       zIndex={10}
       {...props}

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

@@ -2,6 +2,9 @@ import { sprinkles } from '@/src/css/sprinkles.css'
 import { recipe } from '@vanilla-extract/recipes'
 
 export const variants = recipe({
+  base: {
+    transitionProperty: 'color, border-color, background-color, transform, filter',
+  },
   variants: {
     size: {
       small: sprinkles({

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

@@ -27,6 +27,7 @@ import { getValueForTransitionState } from './utils/getValueForTransitionState'
 import { cssVars } from '@/src/css/theme.css'
 import { uniqueId } from '@/src/utils/uniqueId'
 import { ScrollBox } from '../../atoms'
+import clsx from 'clsx'
 
 const CREATE_OPTION_VALUE = 'CREATE_OPTION_VALUE'
 
@@ -101,10 +102,10 @@ const SelectContainer = ({
   />
 )
 
-const RootInput = React.forwardRef<HTMLInputElement, BoxProps>((props, ref) => (
+const RootInput = React.forwardRef<HTMLInputElement, BoxProps>(({ className, ...props }, ref) => (
   <Box
     {...props}
-    appearance="none"
+    className={clsx(styles.rootInput, className)}
     as="input"
     overflow="hidden"
     position="absolute"
@@ -222,7 +223,7 @@ const ToggleMenuButton = ({
         display="block"
         fill="currentColor"
         transform={rotate(rotation)}
-        transitionDuration="200"
+        transitionDuration={200}
         transitionProperty="all"
         transitionTimingFunction="inOut"
         wh={getValueForSize($size, 'iconWidth')}

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

@@ -9,3 +9,7 @@ export const input = style({
     },
   },
 })
+
+export const rootInput = style({
+  appearance: 'none',
+})

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

@@ -49,7 +49,7 @@ const SliderComponent = React.forwardRef<HTMLElement, BoxProps>(
       className={clsx(styles.slider, className)}
       cursor={{ base: 'pointer', disabled: 'not-allowed' }}
       height="1.5"
-      opacity={1}
+      opacity="1"
       ref={ref}
       type="range"
       width="full"

components/src/components/molecules/Toggle/Toggle.tsx

@@ -33,7 +33,9 @@ const CheckBox = React.forwardRef<
     justifyContent="center"
     position="relative"
     ref={ref}
-    transition="background-color 0.1s ease-in-out"
+    transitionProperty="background-color"
+    transitionDuration={100}
+    transitionTimingFunction="ease-in-out"
     type="checkbox"
   />
 ))

components/src/components/organisms/Toast/Toast.tsx

@@ -20,7 +20,7 @@ const CloseIcon = (props: BoxProps) => (
     {...props}
     as={<CrossSVG />}
     cursor="pointer"
-    opacity={{ base: 0.5, hover: 0.7 }}
+    opacity={{ base: '0.5', hover: '0.7' }}
     padding="1.5"
     position="absolute"
     right="2.5"
@@ -80,7 +80,7 @@ const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
       maxWidth={match($mobile)
         .with(true, () => 'unset' as const)
         .otherwise(() => '112')}
-      opacity={$state.status === 'entered' ? 1 : 0}
+      opacity={$state.status === 'entered' ? '1' : '0'}
       padding="4.5"
       position="fixed"
       ref={ref}

components/src/css/sprinkles.css.ts

@@ -26,7 +26,7 @@ const colorProperties = defineProperties({
     borderTopColor: colorPropertiesObject,
     borderLeftColor: colorPropertiesObject,
     borderRightColor: colorPropertiesObject,
-    opacity: [0, 1, 0.5, 0.7, 0.9, 0.95, 1, 'inherit', 'initial'],
+    opacity: ['0', '1', '0.5', '0.7', '0.9', '0.95', '1', 'inherit', 'initial'],
   },
   shorthands: {
     bg: ['backgroundColor'],

docs/src/components/NavBar.tsx

@@ -3,7 +3,6 @@ import LogoSVG from '~/assets/ENSLogo.svg'
 import GithubSVG from '~/assets/Github.svg'
 import FigmaSVG from '~/assets/Figma.svg'
 import { Link } from './Link'
-import { Tag } from '@ensdomains/thorin'
 
 export const NavBar = ({
   open,
@@ -42,14 +41,14 @@ export const NavBar = ({
               as={CrossSVG}
               wh="full"
               position="absolute"
-              opacity={open ? 1 : 0}
+              opacity={open ? '1' : '0'}
               // transition="opacity 0.2s ease-in-out"
             />
             <Box
               as={MenuSVG}
               position="absolute"
               wh="full"
-              opacity={open ? 0 : 1}
+              opacity={open ? '0' : '1'}
               transition="opacity 0.2s ease-in-out"
             />
           </Box>