From 714ee0eb8670eb65acab81b426a84516c9378908 Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Wed, 9 Apr 2025 11:31:30 +0100
Subject: [PATCH] [release-11.6.1] GrafanaUI: Remove blurred background from
 overlay backdrops to improve performance (#103647)

* GrafanaUI: Remove blurred background from overlay backdrops to improve performance (#103563)

* default noBackdropBlur to enabled

* move blur from hacks to theme.components, tweak backdrop colour

* remove toggle completely

* fix unused import

(cherry picked from commit 577ea8f6a9cb3baa48bd631e31f38e558ba81cd3)

* remove blur component token
---
 packages/grafana-data/src/themes/createComponents.ts       | 2 +-
 packages/grafana-ui/src/components/Drawer/Drawer.tsx       | 1 -
 packages/grafana-ui/src/components/Modal/getModalStyles.ts | 1 -
 public/app/core/components/AppChrome/AppChromeMenu.tsx     | 1 -
 public/app/features/commandPalette/CommandPalette.tsx      | 1 -
 5 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts
index e810a94b86e..baf8ad97e46 100644
--- a/packages/grafana-data/src/themes/createComponents.ts
+++ b/packages/grafana-data/src/themes/createComponents.ts
@@ -91,7 +91,7 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
       padding: 1,
     },
     overlay: {
-      background: colors.mode === 'dark' ? 'rgba(63, 62, 62, 0.45)' : 'rgba(208, 209, 211, 0.24)',
+      background: colors.mode === 'dark' ? 'rgba(63, 62, 62, 0.5)' : 'rgba(208, 209, 211, 0.5)',
     },
     sidemenu: {
       width: 57,
diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index 3e9afa787bf..b68115dd756 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -292,7 +292,6 @@ const getStyles = (theme: GrafanaTheme2) => {
 
       '&:before': {
         backgroundColor: `${theme.components.overlay.background} !important`,
-        backdropFilter: 'blur(1px)',
         bottom: 0,
         content: '""',
         left: 0,
diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
index ede316fbd32..9f0aa34f0ac 100644
--- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts
+++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
@@ -34,7 +34,6 @@ export const getModalStyles = (theme: GrafanaTheme2) => {
       bottom: 0,
       left: 0,
       backgroundColor: theme.components.overlay.background,
-      backdropFilter: 'blur(1px)',
     }),
     modalHeader: css({
       label: 'modalHeader',
diff --git a/public/app/core/components/AppChrome/AppChromeMenu.tsx b/public/app/core/components/AppChrome/AppChromeMenu.tsx
index 560370f4c25..e22f53e851c 100644
--- a/public/app/core/components/AppChrome/AppChromeMenu.tsx
+++ b/public/app/core/components/AppChrome/AppChromeMenu.tsx
@@ -81,7 +81,6 @@ export function AppChromeMenu({}: Props) {
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     backdrop: css({
-      backdropFilter: 'blur(1px)',
       backgroundColor: theme.components.overlay.background,
       bottom: 0,
       left: 0,
diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx
index 066694fa1ea..28419162be3 100644
--- a/public/app/features/commandPalette/CommandPalette.tsx
+++ b/public/app/features/commandPalette/CommandPalette.tsx
@@ -174,7 +174,6 @@ const getSearchStyles = (theme: GrafanaTheme2, lateralSpace: number) => {
         bottom: 0,
         left: 0,
         background: theme.components.overlay.background,
-        backdropFilter: 'blur(1px)',
       },
     }),
     animator: css({