feat: Add getAcrylicTextureStyle.ts

Author: myxvisual

src/common/browser/backdropFilterDetector.ts

@@ -6,12 +6,14 @@ export function isSupportBackdropFilter() {
   if (CSS && CSS.supports) {
     return CSS.supports("backdrop-filter", propertyValue);
   } else {
-    const { style } = document.createElement("div");
+    let elm = document.createElement("div");
+    const { style } = elm;
     isSupported = style[propertyName] !== void 0;
     if (isSupported) {
       style[propertyName] = propertyValue;
       isSupported = style.cssText.length !== 0;
     }
+    elm = null;
 
     return isSupported;
   }

src/styles/getAcrylicTextureStyle.ts

@@ -0,0 +1,31 @@
+import { isSupportBackdropFilter } from "../common/browser/backdropFilterDetector";
+
+export function getAcrylicTextureStyle(): CSSStyleDeclaration {
+  const isSupported = isSupportBackdropFilter();
+  let style: CSSStyleDeclaration;
+  if (isSupported) {
+    style = {
+      /**
+       * Add theme.baseLow color.
+       */
+      backgroundColor: "",
+      /**
+       * Add noise texture.
+       */
+      backgroundImage: "",
+      /**
+       * Add blur filter.
+       */
+      backdropFilter: "blur(10px)"
+    } as any;
+  } else {
+    style = {
+      /**
+       * Add polyfill texture theme.acrylicText40.
+       */
+      background: ""
+    } as CSSStyleDeclaration;
+  }
+
+  return style;
+}