Typescript autocomplete does not work with extendTheme function's arguments.

Description

When I use extendTheme with Typescript, I expected to autocomplete theme, but it doesn’t.

Link to Reproduction

https://codesandbox.io/s/quizzical-mclean-zewes?file=/src/index.tsx

Steps to reproduce

1. use extendTheme function with override exist theme object

Chakra UI Version

1.6.6 (it works fine with 1.5.2)

Browser

Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

I think it’s probably related to this commit https://github.com/chakra-ui/chakra-ui/commit/1d5e55272fe1475ce6fa0ed5bdccef4218885f77

This may be a problem in typescript. This is the small code that reproduces this problem in typescript:

type BaseTheme = {
  component?: string
}

declare function extendTheme<
  Extensions extends (BaseTheme & Record<string, unknown>)[]
>(...extensions: [...Extensions]): Extensions


extendTheme({

})

https://www.typescriptlang.org/play?ts=4.3.5#code/C4TwDgpgBAQghgZwgFQBYQLbQLxQN4BQUUAxgPYZhkB2E1wA-AFxQLABOAltQOYEC+BAgBMIJADZx20AGYBXaiWCcaUCAA9gdYWkwQAPESgBRTXQQrqCNWerDrACnhJdWKADIoAJTFl2w-TYuXgAaKAUAa2oyAHdqAD4ASgBtAF0CeIcAOhyNLStLBBZknKzTfIsaBFTElnLzQqECPO1XCAdCAUSCIA

[cwylycode]

In case anyone needs autocomplete in typescript for their extendTheme object, without using chakra cli, there’s a little ‘hack’ that mostly works.

import { extendTheme, theme, } from "@chakra-ui/react"

const base: typeof theme = {
  fonts: {
    body: `Poppins, sans-serif`,
    heading: 'Poppins, sans-serif',
    mono: 'mono, monospace'
  },
  components: {
    Button: {
      baseStyle: {
        color: 'green',
        background: 'yellow'
      },
    },
  },
  ...etc
}

export const themeBase = extendTheme(base)

There are two peculiarities with this approach: autocomplete isn’t available for the values of the tokens (i.e. 'color and ‘background’ will autocomplete, but ‘green’ and ‘yellow’ won’t - even though they are still valid) and there’s a syntax error for the components object - however, it seems to not matter, as the app will still compile and run just fine (if anyone knows why this components error exists, I’d be grateful).

It works well enough for me inside vscode, since all I needed was the type auto-completion.

[tresorama]

@tresorama isn’t that why you need to run @chakra/cli to generate types for number 2?

Yes. I confirm that with @chakra-ui/react@2.2.8 @chakra-ui/cli@2.1.6 after generate theme typing using npx chakra-cli tokens /path/to/theme.ts, Vs Code autocomplete suggests all theme tokens values. (From chakra components like Box, Flex, …)