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

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?