Make it possible for themes to blur backgrounds

[Nezz]

Proposed change

Currently themes have little control over the backdrop-filter properties. The only one they can control is the whole screen when a dialog is open:

frontend/src/components/ha-dialog.ts

Lines 78 to 79 in dd082c2

	-webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
	backdrop-filter: var(--dialog-backdrop-filter, none);

This PR makes it possible for themes to control the backdrop-filter for cards and dialogs. This allows the use of blurred background among others. For example without and with a blur filter:

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

--ha-card-background: rgba(0, 0, 0, 0.1);
--ha-card-backdrop-filter: blur(20px);
--dialog-surface-backdrop-filter: blur(20px);

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
  Request - Vision OS Theme basnijholt/lovelace-ios-themes#61
  Make transparency of cards blurry basnijholt/lovelace-ios-themes#49
  check out kibibit/kb-frosted-cards basnijholt/lovelace-ios-themes#22
• 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

[basnijholt]

This would be a great addition and definitely worth it regarding the small change set!

[Nezz]

Should I update this to have the ha prefix too?

frontend/src/components/ha-dialog.ts

Lines 78 to 79 in dd082c2

	-webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
	backdrop-filter: var(--dialog-backdrop-filter, none);

That would be a breaking change though.

[bramkragten]

Should I update this to have the ha prefix too?

frontend/src/components/ha-dialog.ts

Lines 78 to 79 in dd082c2

	-webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
	backdrop-filter: var(--dialog-backdrop-filter, none);

That would be a breaking change though.

I think that one is a bit confusing now anyway, as we have multiple variables for the dialog now. Should be ha-dialog-scrim-backdrop-filter.

We can make the change non breaking though: backdrop-filter: var(--ha-dialog-scrim-backdrop-filter, --dialog-backdrop-filter);

[Nezz]

Good point. Should it actually be this?

var(--ha-dialog-scrim-backdrop-filter, var(--dialog-backdrop-filter, none));

[bramkragten]

Good point. Should it actually be this?

var(--ha-dialog-scrim-backdrop-filter, var(--dialog-backdrop-filter, none));

The default is none anyway, so not really needed but sure 👍

[RhavoX]

Shouldn't this be a single dash here: --ha-dialog-surface--filter?

[Nezz]

Good point. I fixed this in my fork but for some reason not on this branch.