GitFOSS

@@ -309,7 +309,7 @@ const StyledDrawerOverlay = styled.a`
   pointer-events: none;
   user-select: none;
   background: rgba(0, 0, 0, 0.4);
-  filter: blur(8px);
+  backdrop-filter: blur(3px);
   opacity: 0;
   transition: opacity 140ms ease-in-out 140ms;
 `;

@@ -332,7 +332,8 @@ const StyledDrawerPrimary = styled.aside<
     left: 0;
     bottom: 0;
 
-    background: ${NamedColors.HEADER[themeScheme]};
+    background: ${NamedColors.DRAWER[themeScheme]};
+    backdrop-filter: blur(8px);
     border-right: 1px solid ${NamedColors.BORDER_DEFAULT[themeScheme]};
 
     transition: transform 140ms cubic-bezier(0, 0, 0.2, 1);

@@ -182,7 +182,7 @@ const StyledDrawerOverlay = styled.a`
   pointer-events: none;
   user-select: none;
   background: rgba(0, 0, 0, 0.4);
-  filter: blur(8px);
+  backdrop-filter: blur(3px);
   opacity: 0;
   transition: opacity 140ms ease-in-out 140ms;
 `;

@@ -205,7 +205,8 @@ const StyledDrawerSettings = styled.aside<
     left: 0;
     bottom: 0;
 
-    background: ${NamedColors.HEADER[themeScheme]};
+    background: ${NamedColors.DRAWER[themeScheme]};
+    backdrop-filter: blur(8px);
     border-right: 1px solid ${NamedColors.BORDER_DEFAULT[themeScheme]};
 
     transition: transform 140ms cubic-bezier(0, 0, 0.2, 1);

@@ -45,6 +45,10 @@ const NamedColors = {
     light: Colors.WHITE_ALPHA_01,
     dark: Colors.BLACK_TRANSPARENT,
   },
+  DRAWER: {
+    light: Colors.WHITE_ALPHA_01,
+    dark: Colors.GRAY_DARK_05,
+  },
   INPUT: {
     light: Colors.WHITE_01,
     dark: Colors.BLACK_LIGHTER_01,