[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 577ea8f6a9)

* remove blur component token

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,

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,

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',

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,

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({