Various theming not working at 1.6.6

Description

When I upgraded to 1.6.5 -> 1.6.6 on a large monorepo gatsby project, bg colors and various other theming things stopped working

Link to Reproduction

My code base is private and there are too many moving parts

Steps to reproduce

1. Upgrade from 1.6.5 to 1.6.6
2. Start gatsby as usual
3. bg in <Box>` doesn’t swap out

Expect to see var(--chakra-colors-blue-700)

Chakra UI Version

1.6.6

Browser

chrome 93

Operating System

• macOS
• Windows
• Linux

Additional Information

I’m not sure if it’s best to close this or not. I have a non open source project and its not feasible to create an MVP.

Did anything change in the past few weeks that make <Box bg='blue.700'> not switch out colors?

[takethefake]

Hej @tony @RIP21

Regarding the provided code sandbox, you may didn’t factor into account, that baseStyle is not always the resulting style, since chakra applies the concept of variants.

Since the Button-Component has the default variant: solid the solid-styles are applied onto the base styles which results in your described behavior, that e.g. a background color isn’t applied, since it is defined in the solid variant as well.

A good approach to ensure that your styles are applied is by styling a variant instead, or by defining a dedicated variant for your use case, or using color-schemes.

See attached code sandbox for clarification: https://codesandbox.io/s/affectionate-engelbart-9rxou?file=/src/index.tsx

Does this solve your questions regarding theming?

[takethefake]

@tony thanks for putting all this effort into this, but since reproduction seems to be so difficult, I guess that this is the result of a combination of errors, why it is quite difficult and time-intensive to handle on our side. That’s why I would close this issue for now.

If you or someone else somehow finds a way to reproduce this in an easy way, feel free to reach out and we’ll do our best to help.

So long, I wish you all the best in the further development of the project!