Light mode for modal dialogs

[deboer-tim]

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

[deboer-tim]

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.

[feloy]

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.

OK, let's make the changes in relation with #7187, I'll check if there are other places to make changes. Thanks

[deboer-tim]

@ekidneyrh the core modal dialog only uses three colors today. Here are the current colors and what I've called them:

• pd-modal-fade - black (uses to fade the rest of the screen at 60% opacity and a blend-multiply)
• pd-modal-bg - charcoal-800
• pd-modal-border - charcoal-500

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?

[ekidneyrh]

@ekidneyrh the core modal dialog only uses three colors today. Here are the current colors and what I've called them:

* pd-modal-fade - black (uses to fade the rest of the screen at 60% opacity and a blend-multiply)

* pd-modal-bg - charcoal-800

* pd-modal-border - charcoal-500

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?

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

[ekidneyrh]

pd-modal-fade: white
pd-modal-bg: gray-050
pd-modal-boarder: gray-500
pd-modal-header: purple-500
pd-modal-dropdown-header: charcoal-200
pd-modal-dropdown-header-bg: gray-300
pd-modal-dropdown-highlight: purple-300
pd-modal-text: charcoal-300

WDYT of this combo?

[feloy]

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

[deboer-tim]

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.