style: blur backdrop for dialog overlay

Author: lukicenturi

example/src/views/NavigationDrawerView.vue

@@ -12,6 +12,7 @@ const navigationDrawers = ref<NavigationDrawerData[]>([
   { modelValue: false, label: 'Left', temporary: true },
   { modelValue: false, label: 'Right', position: 'right', temporary: true },
   { modelValue: false, label: 'Persistent', temporary: false },
+  { modelValue: false, label: 'With Overlay', temporary: true, overlay: true },
 ]);
 </script>
 

src/components/overlays/dialog/RuiDialog.vue

@@ -195,7 +195,7 @@ function onClickOutside() {
 }
 
 .overlay {
-  @apply absolute top-0 left-0 w-full h-full bg-black/[0.5];
+  @apply absolute top-0 left-0 w-full h-full backdrop-blur bg-rui-grey-500/[0.5];
 }
 
 .content {
@@ -205,4 +205,10 @@ function onClickOutside() {
     @apply top-1/2 -translate-y-1/2 bottom-auto;
   }
 }
+
+:global(.dark) {
+  .overlay {
+    @apply bg-black/[0.5];
+  }
+}
 </style>

src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue

@@ -132,7 +132,7 @@ const activatorAttrs = computed(() => ({
 
 <style lang="scss" module>
 .overlay {
-  @apply absolute top-0 left-0 w-full h-full bg-black/[0.5] z-[10000];
+  @apply absolute top-0 left-0 w-full h-full backdrop-blur bg-rui-grey-500/[0.5] z-[10000];
 }
 
 .content {
@@ -170,6 +170,10 @@ const activatorAttrs = computed(() => ({
 }
 
 :global(.dark) {
+  .overlay {
+    @apply bg-black/[0.5];
+  }
+
   .content {
     @apply bg-[#363636];
   }