1  import { modalAnatomy, popoverAnatomy, tabsAnatomy } from '@chakra-ui/anatomy';
 2  import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 3  
 4  const { definePartsStyle: modalPartsStyle, defineMultiStyleConfig: defineModalMultiStyleConfig } =
 5    createMultiStyleConfigHelpers(modalAnatomy.keys);
 6  
 7  export const modalTheme = defineModalMultiStyleConfig({
 8    variants: {
 9      tour: modalPartsStyle({
10        dialog: {
11          bg: `gray.100`,
12          color: `black`,
13        },
14      }),
15    },
16  });
17  
18  const {
19    definePartsStyle: popoverPartsStyle,
20    defineMultiStyleConfig: definePopoverMultiStyleConfig,
21  } = createMultiStyleConfigHelpers(popoverAnatomy.keys);
22  
23  export const popoverTheme = definePopoverMultiStyleConfig({
24    baseStyle: popoverPartsStyle({
25      content: {
26        overflow: 'unset',
27      },
28      arrow: {
29        '--popper-arrow-bg': 'var(--chakra-colors-gray-800)',
30      },
31    }),
32    variants: {
33      tour: popoverPartsStyle({
34        content: {
35          color: 'black',
36          borderRadius: '4px',
37          bg: `gray.100`,
38          overflow: 'unset',
39        },
40        header: {
41          bg: `gray.100`,
42          borderBottomWidth: 0,
43          fontWeight: `bold`,
44          paddingBottom: 0,
45        },
46        body: {
47          bg: `gray.100`,
48        },
49        arrow: {
50          '--popper-arrow-bg': 'var(--chakra-colors-gray-100)',
51        },
52      }),
53    },
54  });
55  
56  const {
57    definePartsStyle: defineTabsPartsStyle,
58    defineMultiStyleConfig: defineTabsMultiStyleConfig,
59  } = createMultiStyleConfigHelpers(tabsAnatomy.keys);
60  
61  // export the component theme
62  export const tabsTheme = defineTabsMultiStyleConfig({
63    variants: {
64      colorful: defineTabsPartsStyle({
65        tab: {
66          bg: 'gray.200',
67          borderRadius: 10,
68          _selected: {
69            bg: 'gray.600',
70            color: 'green',
71          },
72        },
73      }),
74    },
75  });