Overwriting variant styles

[aidana12]

It seems it’s not possible to easily overwrite the styles of a variant.

E.g. if I want to change the font weight by adding the fontWeight prop:

<Heading fontWeight="regular" variant="h1">
   Heading 1
</Heading>

adding fontWeight prop doesn’t overwrite the styles of the variant, it still has fontWeight bold as set in the variant object:

baseStyles: {
    color: 'grey900',
    // fontWeight: 'bold',
  },

  variants: {
    variant: {
      h1: {
        fontSize: [5, 8],
        lineHeight: '120%',
        letterSpacing: 'revert',
        fontWeight: 'bold',
      },
      ...
    }
  }
}

It doesn’t matter whether the fontWeight property is in the base styles or the variant styles, both cannot be overwritten with a simple fontWeight prop.

Overwriting variants isn’t a thing we do often (neither should we do it often), but sometimes it is needed. I know we can overwrite it in other ways, but would be nice if it was possible to do it with a style prop just like it was before.