Styled-system: Variant example in docs fails in Typescript.

[benjamingeorge]

On page https://styled-system.com/variants

This example:

const Button = styled('button')(
  variant({
    scale: 'buttons',
    variants: {
      primary: {
        color: 'white',
        bg: 'primary',
      },
      secondary: {
        color: 'white',
        bg: 'secondary',
      },
    },
  })
)

get a typescript error

Argument of type '{ scale: string; variants: { primary: { color: string; bg: string; }; secondary: { color: string; bg: string; }; }; }' is not assignable to parameter of type 'VariantArgs'.
  Object literal may only specify known properties, and 'variants' does not exist in type 'VariantArgs'.

I basically can't get themeable variants to work when using typescript.

I'm using
"@types/styled-system": "^5.0.1",
"styled-system": "^5.1.0",

[jxnblk]

I think whoever maintains @types/styled-system will need to update the types for the new API

[benjamingeorge]

Maybe I will try my first contribution to open source and do a pull request

[nerdyman]

I think this can be closed, @types/styled-system 5.1.1 updated the VariantArgs interface.

Thanks @benjamingeorge!