Design Systems Made Easy

function App() {
  return (
    <GluestackUIStyledProvider config={config.theme}>
      <Box
        borderRadius="$md"
        h="$20"
        w="$20"
        sx={{
          _web: {
            bg: "$violet600",
          },
          _ios: {
            bg: "$blue600",
          },
          _android: {
            bg: "$red600",
          },
        }}
      ></Box>
    </GluestackUIStyledProvider>
  )
}

function App() {
  const Button = styled(Pressable, {
    p: "$3",
    rounded: "$md",
    shadow: "$4",
    bg: "$amber500",
    ":hover": {
      bg: "$amber600",
    },
    ":active": {
      bg: "$amber500",
    },
    "@md": {
      bg: "$emerald500",
      ":hover": {
        bg: "$emerald600",
      },
      ":active": {
        bg: "$emerald500",
      },
    },
    "@lg": {
      bg: "$indigo500",
      ":hover": {
        bg: "$indigo600",
      },
      ":active": {
        bg: "$indigo500",
      },
    },
  })
  const [isHovered, setIsHovered] = useState(false)
  const [isActive, setIsActive] = useState(false)

  return (
    <GluestackUIStyledProvider config={config.theme}>
      <Button
        states={{ hover: isHovered, active: isActive }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onMouseDown={() => setIsActive(true)}
        onMouseUp={() => setIsActive(false)}
      >
        <ButtonText color="$white">Hello World</ButtonText>
      </Button>
    </GluestackUIStyledProvider>
  )
}

function App() {
  return (
    <GluestackUIStyledProvider config={config.theme}>
      <Button
        sx={{
          _text: {
            color: "$white",
          },
        }}
      >
        <ButtonText>Hover Over</ButtonText>
      </Button>
    </GluestackUIStyledProvider>
  )
}