Make it possible for themes to blur backgrounds (#20447)

* Make it possible for themes to blur card backgrounds * Make it possible for themes to blur dialog backgrounds * Add ha prefix Co-authored-by: Bram Kragten <[email protected]> * Rename dialog-backdrop-filter to ha-dialog-scrim-backdrop-filter With backwards compatibility * Run prettier --------- Co-authored-by: Bram Kragten <[email protected]>
home-assistant · Apr 10, 2024 · bf176ac · bf176ac
1 parent 9903e22
commit bf176ac
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
@@ -14,6 +14,8 @@ export class HaCard extends LitElement {
           --ha-card-background,
           var(--card-background-color, white)
         );
+        -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
+        backdrop-filter: var(--ha-card-backdrop-filter, none);
         box-shadow: var(--ha-card-box-shadow, none);
         box-sizing: border-box;
         border-radius: var(--ha-card-border-radius, 12px);

diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
@@ -75,8 +75,14 @@ export class HaDialog extends DialogBase {
           var(--divider-color)
         );
         z-index: var(--dialog-z-index, 8);
-        -webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
-        backdrop-filter: var(--dialog-backdrop-filter, none);
+        -webkit-backdrop-filter: var(
+          --ha-dialog-scrim-backdrop-filter,
+          var(--dialog-backdrop-filter, none)
+        );
+        backdrop-filter: var(
+          --ha-dialog-scrim-backdrop-filter,
+          var(--dialog-backdrop-filter, none)
+        );
         --mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
         --mdc-typography-headline6-font-weight: 400;
         --mdc-typography-headline6-font-size: 1.574rem;
@@ -119,6 +125,8 @@ export class HaDialog extends DialogBase {
         margin-top: var(--dialog-surface-margin-top);
         min-height: var(--mdc-dialog-min-height, auto);
         border-radius: var(--ha-dialog-border-radius, 28px);
+        -webkit--filter: var(--ha-dialog-surface--filter, none);
+        -filter: var(--ha-dialog-surface--filter, none);
       }
       :host([flexContent]) .mdc-dialog .mdc-dialog__content {
         display: flex;