Extending a variant does not override its styles

Describe the bug I would not only extend a variant but also alter some of its defined styles. In my case I’m defining some heading style and would like to extend those by overriding color.

To Reproduce define the following in your config:

colors: {
    text: '#000',
    primary: '#f00',
},
text: {
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
      color: 'text'
    },
    headingLight: {
      variant: 'text.heading',
      color: 'primary'
    }
  }

and use <Heading variant='headingLight'>Testing</Heading> somewhere.

Expected behavior Headline should be red, but it is using the text color.

Additional context It works if you remove color: 'text' from the headling variant.

[lachlanjc]

I’d absolutely love this. For example, I have a set of container styles, & they’re mostly the same, but I want to change the maxWidth on each one. Some basic composition/overrides like this would shorten my theme enormously.

[joernroeder]

I revisited the components recently and now its working as expected. Not sure if it was related but having to pass down className all the time wasnt clear to me before reading through https://github.com/system-ui/theme-ui/issues/396 Maybe a high level explanation in the docs@Guides/HowToBuildYourOwnComponent so people can start with an example from there. Thanks for all the work btw, its amazing to work with!