From 2b7e582c309dbc52b3da23341d0cb7fb50be32e5 Mon Sep 17 00:00:00 2001 From: Alec LaLonde Date: Sat, 25 Feb 2023 23:34:36 -0700 Subject: [PATCH] Fixed white background in menus --- package.json | 2 +- packages/design-system/package.json | 1 + packages/design-system/src/theme/index.ts | 2 ++ packages/design-system/src/theme/menu.ts | 15 +++++++++++++ yarn.lock | 27 +++++++---------------- 5 files changed, 27 insertions(+), 20 deletions(-) create mode 100644 packages/design-system/src/theme/menu.ts diff --git a/package.json b/package.json index 6028b74b..d7b9833a 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "@graphql-codegen/add": "3.1.1", "@graphql-codegen/cli": "2.7.0", "@graphql-codegen/introspection": "2.1.1", - "@graphql-codegen/typescript": "2.4.5", + "@graphql-codegen/typescript": "^2.4.5", "@graphql-codegen/typescript-graphql-request": "4.3.7", "@graphql-codegen/typescript-operations": "2.3.2", "@graphql-codegen/typescript-react-apollo": "3.2.8", diff --git a/packages/design-system/package.json b/packages/design-system/package.json index c1d55581..21e00664 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -30,6 +30,7 @@ "react": ">=18" }, "dependencies": { + "@chakra-ui/anatomy": "^2.1.1", "@chakra-ui/icons": "^2.0.11", "@chakra-ui/media-query": "^3.2.7", "@chakra-ui/react": "^2.3.6", diff --git a/packages/design-system/src/theme/index.ts b/packages/design-system/src/theme/index.ts index 0faa8d71..7cd3a565 100644 --- a/packages/design-system/src/theme/index.ts +++ b/packages/design-system/src/theme/index.ts @@ -4,6 +4,7 @@ import { GroupBase, StylesConfig } from 'react-select'; import { isBackdropFilterSupported } from '../compatibilityHelpers'; import { colors } from './colors'; +import { menuTheme } from './menu'; import { textStyles } from './texts'; const modalContentStyles = isBackdropFilterSupported() @@ -59,6 +60,7 @@ export const theme = extendTheme( }, }, }, + Menu: menuTheme, Modal: { defaultProps: { isCentered: true, diff --git a/packages/design-system/src/theme/menu.ts b/packages/design-system/src/theme/menu.ts new file mode 100644 index 00000000..b891b427 --- /dev/null +++ b/packages/design-system/src/theme/menu.ts @@ -0,0 +1,15 @@ +import { menuAnatomy } from '@chakra-ui/anatomy'; +import { createMultiStyleConfigHelpers } from '@chakra-ui/react'; + +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(menuAnatomy.keys); + +// define the base component styles +const baseStyle = definePartsStyle({ + list: { + '--menu-bg': 'transparent', + }, +}); + +// export the base styles in the component theme +export const menuTheme = defineMultiStyleConfig({ baseStyle }); diff --git a/yarn.lock b/yarn.lock index c32450e3..b64a05c8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1144,7 +1144,7 @@ "@chakra-ui/shared-utils" "2.0.5" "@chakra-ui/spinner" "2.0.13" -"@chakra-ui/anatomy@2.1.1": +"@chakra-ui/anatomy@2.1.1", "@chakra-ui/anatomy@^2.1.1": version "2.1.1" resolved "https://registry.yarnpkg.com/@chakra-ui/anatomy/-/anatomy-2.1.1.tgz#819a1458ff727157e5500a69fc26bfea6e944495" integrity sha512-LUHAoqJAgxAqmyckG5bUpBrfEo1FleEyY+1A8hkWciy58gZ+h3GoY9oBpHcdo7XdHPpy3G+3hieK/7i9NLwxAw== @@ -2247,14 +2247,14 @@ integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== "@emotion/react@^11.8.1": - version "11.10.5" - resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.5.tgz#95fff612a5de1efa9c0d535384d3cfa115fe175d" - integrity sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A== + version "11.10.4" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.4.tgz#9dc6bccbda5d70ff68fdb204746c0e8b13a79199" + integrity sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA== dependencies: "@babel/runtime" "^7.18.3" - "@emotion/babel-plugin" "^11.10.5" - "@emotion/cache" "^11.10.5" - "@emotion/serialize" "^1.1.1" + "@emotion/babel-plugin" "^11.10.0" + "@emotion/cache" "^11.10.0" + "@emotion/serialize" "^1.1.0" "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" "@emotion/utils" "^1.2.0" "@emotion/weak-memoize" "^0.3.0" @@ -3295,7 +3295,7 @@ lodash "~4.17.0" tslib "~2.4.0" -"@graphql-codegen/schema-ast@^2.4.1", "@graphql-codegen/schema-ast@^2.6.1": +"@graphql-codegen/schema-ast@^2.6.1": version "2.6.1" resolved "https://registry.yarnpkg.com/@graphql-codegen/schema-ast/-/schema-ast-2.6.1.tgz#8ba1b38827c034b51ecd3ce88622c2ae6cd3fe1a" integrity sha512-5TNW3b1IHJjCh07D2yQNGDQzUpUl2AD+GVe1Dzjqyx/d2Fn0TPMxLsHsKPS4Plg4saO8FK/QO70wLsP7fdbQ1w== @@ -3358,17 +3358,6 @@ auto-bind "~4.0.0" tslib "~2.3.0" -"@graphql-codegen/typescript@2.4.5": - version "2.4.5" - resolved "https://registry.yarnpkg.com/@graphql-codegen/typescript/-/typescript-2.4.5.tgz#80ca7a343511a27cd587c0b220b0a0dd99a4dc4b" - integrity sha512-Ytb8phNHKl/v/wxudsMOAV1dmzIbckWHm2J83PLNOvnu9CGEhgsd67vfe3ZoF95VU2BKSG8BXGa6uL9z2xDmuA== - dependencies: - "@graphql-codegen/plugin-helpers" "^2.4.0" - "@graphql-codegen/schema-ast" "^2.4.1" - "@graphql-codegen/visitor-plugin-common" "2.7.1" - auto-bind "~4.0.0" - tslib "~2.3.0" - "@graphql-codegen/typescript@^2.4.5": version "2.8.7" resolved "https://registry.yarnpkg.com/@graphql-codegen/typescript/-/typescript-2.8.7.tgz#da34261b779a001d7d53b8f454bafc002b06e041"