Responsive Styles

mediaQueries: {
  base: '@media screen and (min-width: 0)',
  sm: '@media screen and (min-width: 480px)',
  md: '@media screen and (min-width: 768px)',
  lg: '@media screen and (min-width: 992px)',
  xl: '@media screen and (min-width: 1280px)',
},

function App() {
  const StyledButton = styled(Pressable, {
    bg: "$red500",
    p: "$3",
    shadow: "$4",
    ":hover": {
      bg: "$red600",
    },
    ":active": {
      bg: "$red700",
    },
    "@md": {
      bg: "$blue500",
      ":hover": {
        bg: "$blue600",
      },
      ":active": {
        bg: "$blue700",
      },
    },
  })
  const StyledButtonText = styled(Text, {
    color: "$textDark50",
  })
  const [isHovered, setIsHovered] = useState(false)
  const [isActive, setIsActive] = useState(false)
  return (
    <Provider config={config}>
      <StyledButton
        states={{ hover: isHovered, active: isActive }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onMouseDown={() => setIsActive(true)}
        onMouseUp={() => setIsActive(false)}
      >
        <StyledButtonText>Click Me</StyledButtonText>
      </StyledButton>
    </Provider>
  )
}