-
Notifications
You must be signed in to change notification settings - Fork 265
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Light mode for modal dialogs #7184
Comments
If you haven't started I can do the changes to Modal as part of #7187, not sure yet if that'll be all that's required or there are other cases. |
@ekidneyrh the core modal dialog only uses three colors today. Here are the current colors and what I've called them:
Let me know if you can think of a better name than 'fade', but I'm assuming the light mode equivalent for the first is safely 'white'. Could you provide light mode color values for the other two? |
Adds light mode colors for Modal dialog along with a defined 1px border so that it is not washed out. Initial light mode color values are taken from other mappings in the registry. It is not possible to use bg-opacity-60 with colors from the registry due to Tailwind CSS post processing order. I looked at several other options (defining colors as r g b instead of hex, trying several css functions, but the simplest is just to use direct styling instead. Fixes containers#7187. First minor part of containers#7184. Signed-off-by: Tim deBoer <git@tdeboer.ca>
Yah white for pd-modal-fade looks good. For pd-model-bg I like the gray-300 used in ur PR or we could go lighter with gray-050, and for the pd-modal-boarder I would go darker and use gray-500. I'll post a screen shot of what im thinking |
Adds light mode colors for Modal dialog along with a defined 1px border so that it is not washed out. Initial light mode color values are taken from other mappings in the registry. Also fixes a nit: the background should have the default cursor and not a button cursor. Fixes containers#7187. First minor part of containers#7184. Signed-off-by: Tim deBoer <git@tdeboer.ca>
Adds light mode colors for Modal dialog along with a defined 1px border so that it is not washed out. Initial light mode color values are taken from other mappings in the registry. Also fixes a nit: the background should have the default cursor and not a button cursor. Fixes containers#7187. First minor part of containers#7184. Signed-off-by: Tim deBoer <git@tdeboer.ca>
Adds light mode colors for Modal dialog along with a defined 1px border so that it is not washed out. Initial light mode color values are taken from other mappings in the registry. Also fixes a nit: the background should have the default cursor and not a button cursor. Fixes #7187. First minor part of #7184. Signed-off-by: Tim deBoer <git@tdeboer.ca>
Some dialogs add a shadow at the bottom of the modal box. But the shadow appears inside the border. Do we want to keep the shadow? @deboer-tim @ekidneyrh |
These are from one of the earliest designs, and AFAIK the plan was always to replace with what is now the Modal styling - i.e. no drop-shadow just faded screen background. I have a commit where I ran into cases like this and removed them along with cases where we change the bg color unnecessarily, will try to find it and PR soon. |
When trying to test containers#7246 I noticed that there are several uses of Modal that override the background color of Modal or try to add their own shadow or other styling as per a very old design. This just removes this extraneous styling so that these dialogs use what is in Modal (including light mode) and remaining work can focus on what actually needs to change within the dialogs. Should be more consistent or no change to existing modals, just clears out unnecessary/duplicate code. IMHO SendFeedback is the only issue here since two custom fields were being set to the (now) background color, not sure if I should temporarily set them to another color or skip this for now. Will need containers#7303 to see the rename image modal. Part of containers#7184. Signed-off-by: Tim deBoer <git@tdeboer.ca>
When trying to test containers#7246 I noticed that there are several uses of Modal that override the background color of Modal or try to add their own shadow or other styling as per a very old design. This just removes this extraneous styling so that these dialogs use what is in Modal (including light mode) and remaining work can focus on what actually needs to change within the dialogs. Should be more consistent or no change to existing modals, just clears out unnecessary/duplicate code. IMHO SendFeedback is the only issue here since two custom fields were being set to the (now) background color, not sure if I should temporarily set them to another color or skip this for now. Will need containers#7303 to see the rename image modal. Part of containers#7184. Signed-off-by: Tim deBoer <git@tdeboer.ca>
Is your enhancement related to a problem? Please describe
Modal dialogs do not support light mode.
Describe the solution you'd like
Extract colors to the registry and add light mode colors. The component structure is being cleaned up, but we possibly have several of these that need to be moved. e.g. Modal, MessageBox, making sure things like the Feedback form and Container > Create are fixed.
Describe alternatives you've considered
No response
Additional context
No response
The text was updated successfully, but these errors were encountered: