import { ComponentSingleStyleConfig } from "@chakra-ui/react" ; import { mode } from "@chakra-ui/theme-tools" ; const Input = { variants : { light : { field : { bg : "inherit" , color : mode ( "gray.400" , "#B7B7B7" ) , borderWidth : "1px" , borderColor : mode ( "gray.50" , "#1A1C20" ) , fontFamily : "Passenger Sans" , fontSize : "16px" , fontWeight : "300" , fontStyle : "normal" , borderRadius : "5px" , _hover : { bg : "inherit" , borderWidth : "1px" , borderColor : mode ( "gray.100" , "#2C2E34" ) , } , _readOnly : { bg : "inherit" , borderWidth : "1px" , borderColor : mode ( "gray.100" , "#151419" ) , userSelect : "all" , } , _disabled : { opacity : 0.4 , cursor : "not-allowed" , } , _focus : { bg : "inherit" , borderWidth : "1px" , borderColor : mode ( "blue.500" , "blue.500" ) , } , _invalid : { bg : "inherit" , borderWidth : "1px" , borderColor : mode ( "red.500" , "red.500" ) , } , } , } , } , } ; export default Input ;