Evergreen Theme's Modal backgroundColor is solid and covers page
brandongregoryscott opened this issue · 2 comments
brandongregoryscott commented
Description
When using the Evergreen theme, the background color of the overlay is completely solid and removes context of the page it's on.
Link to Reproduction
https://codesandbox.io/s/evergreen-theme-modal-background-xj2kdo
Steps to reproduce
- Click on the Open modal button
- Observe the overlay background completely cover the page behind it
Paste Core Version
17.7.0
Browser
Google Chrome 109.0.5414.119 (Official Build) (x86_64)
Operating System
- macOS
- Windows
- Linux
Additional Information
I don't think this is intended behavior based on how the modal works with the default or dark themes. I was able to work around it by wrapping the Modal in a CustomizationProvider:
<CustomizationProvider
baseTheme="evergreen"
elements={{
MODAL: {
backgroundColor: "none",
},
}}
>
<Modal>...</Modal>nkrantz commented
Thanks for bringing this to our attention @brandongregoryscott! I'm going to make a PR to fix this token so that you don't have to use the Customization Provider. I'll update this thread with the PR.
brandongregoryscott commented