diff --git a/src/theme/default/components/drawer.ts b/src/theme/default/components/drawer.ts index 3d5a89be2..1d9b857f8 100644 --- a/src/theme/default/components/drawer.ts +++ b/src/theme/default/components/drawer.ts @@ -1,5 +1,5 @@ import { drawerAnatomy as parts } from "@chakra-ui/anatomy"; -import { createMultiStyleConfigHelpers, cssVar, defineStyle } from "@chakra-ui/styled-system"; +import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/styled-system"; const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys); diff --git a/src/theme/default/components/menu.ts b/src/theme/default/components/menu.ts new file mode 100644 index 000000000..b3e64cc1e --- /dev/null +++ b/src/theme/default/components/menu.ts @@ -0,0 +1,23 @@ +import { menuAnatomy as parts } from "@chakra-ui/anatomy"; +import { createMultiStyleConfigHelpers, cssVar, defineStyle } from "@chakra-ui/styled-system"; + +// https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/menu.ts + +const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(parts.keys); + +const $bg = cssVar("menu-bg"); + +const baseStyleList = defineStyle({ + [$bg.variable]: "#fff", + _dark: { + [$bg.variable]: "colors.gray.800", + }, +}); + +const baseStyle = definePartsStyle({ + list: baseStyleList, +}); + +export const menuTheme = defineMultiStyleConfig({ + baseStyle, +}); diff --git a/src/theme/default/index.ts b/src/theme/default/index.ts index 9d870e410..6706e2114 100644 --- a/src/theme/default/index.ts +++ b/src/theme/default/index.ts @@ -6,6 +6,7 @@ import { pallet } from "../helpers"; import { buttonTheme } from "./components/button"; import { drawerTheme } from "./components/drawer"; import { modalTheme } from "./components/modal"; +import { menuTheme } from "./components/menu"; const defaultTheme = extendTheme({ colors: { @@ -16,6 +17,7 @@ const defaultTheme = extendTheme({ Button: buttonTheme, Drawer: drawerTheme, Modal: modalTheme, + Menu: menuTheme, }, semanticTokens: { colors: {