feat: blur backdrop dark

Author: peterpeterparker

templates/angular-example/src/app/components/backdrop/backdrop.component.html

@@ -1,8 +1,5 @@
 <div
-  [ngClass]="[
-    'fixed inset-0 z-40 bg-white/30 flex items-center justify-center',
-    spinner ? 'backdrop-blur-xs' : 'backdrop-blur-xl'
-  ]">
+  class="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl">
   <div
     *ngIf="spinner"
     class="w-12 h-12 rounded-full animate-spin border-[3px] border-solid border-lavender-blue-600 border-t-transparent"></div>

templates/angular-example/src/app/components/home/home.component.html

@@ -1,5 +1,6 @@
 <div class="relative isolate min-h-[100dvh]">
-  <main class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
+  <main
+    class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
     <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
       Example App
     </h1>

templates/nextjs-example/src/components/backdrop.tsx

@@ -3,8 +3,7 @@ interface BackdropProps {
 }
 
 export const Backdrop = ({spinner = false}: BackdropProps) => (
-  <div
-    className={`fixed inset-0 z-40 ${spinner ? 'backdrop-blur-xs' : 'backdrop-blur-xl'} bg-white/30 flex items-center justify-center`}>
+  <div className="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl">
     {spinner && (
       <div
         className="w-12 h-12 rounded-full animate-spin

templates/react-example/src/components/Backdrop.jsx

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 
 export const Backdrop = ({spinner = false}) => (
-  <div
-    className={`fixed inset-0 z-40 ${spinner ? 'backdrop-blur-xs' : 'backdrop-blur-xl'} bg-white/30 flex items-center justify-center`}>
+  <div className="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl">
     {spinner && (
       <div
         className="w-12 h-12 rounded-full animate-spin

templates/react-workshop/src/components/Backdrop.jsx

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 
 export const Backdrop = ({spinner = false}) => (
-  <div
-    className={`fixed inset-0 z-40 ${spinner ? 'backdrop-blur-xs' : 'backdrop-blur-xl'} bg-white/30 flex items-center justify-center`}>
+  <div className="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl">
     {spinner && (
       <div
         className="w-12 h-12 rounded-full animate-spin

templates/vanilla-js-example/src/components/modal.js

@@ -114,7 +114,7 @@ const showModal = () => {
   </div>
 </div>
 
-<div class="fixed inset-0 z-40 backdrop-blur-xl bg-white/30 flex items-center justify-center"></div>
+<div class="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl"></div>
 `;
 };
 

templates/vue-example/src/components/Backdrop.vue

@@ -6,11 +6,7 @@ defineProps<{
 
 <template>
   <div
-    :class="{
-      'backdrop-blur-sm': spinner === true,
-      'backdrop-blur-xl': spinner !== true,
-    }"
-    class="fixed inset-0 z-40 bg-white/30 flex items-center justify-center"
+    class="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl"
   >
     <div
       v-if="spinner"