How to change background color based on variant and hover state?

[amirhhashemi]

This is the first time I'm using vanilla extract and macaron and I'm stock in a simple situation. I want to change the background color of an element based on the hover state and the variant. I'm looking for something like this:

const Button = styled("button", {
  base: {
    border: 0,
    padding: 0,
  },
  variants: {
    color: {
      primary: {
        backgroundColor: "red"
        ":hover": {
          backgroundColor: "yellow"
        }
      },
      secondary: {
        backgroundColor: "blue"
        ":hover": {
          backgroundColor: "orange"
        }
      }
    },
  },
});

Here, the primary button should has a red background by default and a yellow background when it's hovered. But the secondary button has a blue background by default and a orange background when it's hovered. What's the best way to do that?

[amirhhashemi]

The above code actually works. I'm not sure why I don't get autocompletion for :hover. It is probably a mistake on my side.

[Mokshit06]

The code above should autocomplete for :hover and other simple selectors. Were you able to get it working?