Add dialog backdrop blur theme variable

[noxhirsch]

Breaking change

Proposed change

I've added a theme variable which allows to blur the background behind dialog popups. This creates a much more modern look and puts the dialog more into focus (less distracting background). Default is set to zero - so it isn't a breaking change.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

themes:
  blur_theme:
    dialog-bg-blur: 5px

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

Not all our dialogs use the new ha-dialog yet, so this will not work for every dialog. That will raise a lot of questions, we should either not do this until all dialogs are migrated or make it work for the old (paper-dialog) too.

[noxhirsch]

Thank you for the hint! I'll add it to the paper-dialog tomorrow 👍

[noxhirsch]

@bramkragten I tried lots of things in the last few hours to get it working with paper-dialog, but sadly I don't have a clue (I've never used Polymer before). If the solution is simple, maybe someone else can help here. If the solution isn't simple or is "hacky", I think we shouldn't do that for a "soon" to be removed element.

My suggestion or rather my wish would be, to add it as it is - as an undocumented variable, because it's already very useful - the only places where it doesn't work (as far as I can see) are in "edit mode" and in the "backend" (like automation editor).
The same had already been done with --header-height which also does not work everywhere (but is good enough to use for the Lovelace UI)

[bramkragten]

I think it would be iron-overlay-backdrop you would have to target, which is in the root of the DOM.

iron-overlay-backdrop {
  backdrop-filter: blur(10px);
}

[noxhirsch]

That's right - and also about the only thing I found out 😉 My problem was rather that I didn't know where to put it in the frontend code, but I think (aka. hope) I found a good solution.