Expose an overlay theme option for dialogs and selects

[toddparker]

Currently, the background "overlay" that sits behind a dialog or small/large custom selects to give it s modal appearance is hard-coded to swatch A which is fine with the default theme, but isn't going to work for all themes out there.

We can leave swatch A as the default for these, but we should expose an overlayTheme option in both these plugins to allow people to set this by passing in a swatch letter. This will also be exposed as a data-overlay-theme attribute that can be applied on:

[smwald]

Seems that this fix only works if the theme is labeled with both: .ui-body-a, as well as .ui-dialog.ui-overlay-a,
I am not sure if this was by design or a mistake - seems it should only require a .ui-dialog.ui-overlay-X tag...

Stephen

[gseguin]

@smwald

It was intentional I added another more specific rule that will take precedence over the .ui-body-X for the overlay because you can open a page in a dialog and a page has .ui-body-X on it. Does that cause a problem?

[smwald]

The issue it caused me, was that I do not have any of the themes installed, I created my own custom themes. So when I upgraded it was looking for theme "a" with the .ui-body-a.ui-overlay-a tag instead of just the .ui-overlay-X tag. Looking for just the .ui-overlay-X seems more logical in my mind, because I don't really care what the body is, I want the dialog theme to be set to what I define it as without relying on the body.

Just an observation. Thanks for the great work.

[toddparker]

The issue is that the overlay wasn't themable and we don't have an overlay lever in TR so we're using whatever content swatch you want. I suppose we could introduce an overlay lever in TR in the next release which would work globally, but that is less flexible than the current system.