fix: modal backdrop

Author: shinokada

src/lib/bottom-navigation/BottomNavItem.svelte

@@ -68,7 +68,7 @@
 	});
 
 	$effect(() => {
-		console.log('commonProps: ', commonProps);
+		// console.log('commonProps: ', commonProps);
 	});
 </script>
 

src/lib/mega-menu/MegaMenu.svelte

@@ -12,7 +12,7 @@
 	}: Props = $props();
 
 	const { base, div, ul, footerDiv } = $derived(megamenu());
-	$inspect('dropdownStatus', dropdownStatus);
+	// $inspect('dropdownStatus', dropdownStatus);
 </script>
 
 <!-- Dropdown menu -->

src/lib/modal/Modal.svelte

@@ -46,7 +46,7 @@
 		modal({
 			position,
 			size,
-			backdrop,
+			// backdrop,
 			rounded
 		})
 	);

src/lib/modal/theme.ts

@@ -6,7 +6,7 @@ export const modal = tv({
 		div: 'flex relative w-full max-h-full',
 		content:
 			'w-full divide-y text-gray-800 dark:text-gray-300 border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-800 bg-white dark:bg-gray-800 pointer-events-auto',
-		backdrop: 'fixed inset-0 z-50 bg-gray-900 bg-opacity-50 dark:bg-opacity-80 pointer-events-auto',
+		backdrop: 'fixed inset-0 z-50 bg-gray-900/50 dark:bg-gray-900/80 pointer-events-auto',
 		header: 'flex justify-between items-center p-4 md:p-5 rounded-t-lg',
 		footer: 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg',
 		body: 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain',
@@ -37,9 +37,6 @@ export const modal = tv({
 			lg: { div: 'max-w-4xl' },
 			xl: { div: 'max-w-7xl' }
 		},
-		backdrop: {
-			true: { backdrop: 'bg-gray-900 bg-opacity-75' }
-		},
 		rounded: {
 			true: { content: 'rounded' }
 		},

src/lib/nav/NavLi.svelte

@@ -22,7 +22,7 @@
 	// let currentUrl = $state();
 	let isActive = $derived(navUrl ? href === navUrl : false);
 	$effect(() => {
-		$inspect('navUrl: ', navUrl);
+		// $inspect('navUrl: ', navUrl);
 	});
 
 	const { base, link } = $derived(navLi({ active: isActive, breakPoint }));

src/routes/+layout.svelte

@@ -56,7 +56,7 @@
 			? deepMerge(page.data.layoutMetaTags, page.data.pageMetaTags)
 			: data.layoutMetaTags;
 		activeUrl = page.url.pathname;
-		$inspect('activeUrl in layout: ', activeUrl);
+		// $inspect('activeUrl in layout: ', activeUrl);
 	});
 </script>
 

src/routes/components/alert/examples/Event.svelte

@@ -2,7 +2,7 @@
 	import { Alert } from '$lib';
 	let alertEventStatus = $state(true);
 	function handleClose() {
-		console.log('Alert dismissed');
+		// console.log('Alert dismissed');
 		alert('Alert dismissed');
 		alertEventStatus = false;
 	}

src/routes/components/badge/examples/DismissingWithEvents.svelte

@@ -2,7 +2,7 @@
 	import { Badge } from '$lib';
 	let eventStatus = $state(true);
 	function handleClose() {
-		console.log('Badge dismissed');
+		// console.log('Badge dismissed');
 		alert('Badge dismissed');
 		eventStatus = false;
 	}

src/routes/components/modal/+page.svelte

@@ -30,7 +30,7 @@
 	const positions = Object.keys(modal.variants.position);
 	let modalPosition: ModalProps['position'] = $state('default');
 	const sizes = Object.keys(modal.variants.size);
-	console.log('sizes', sizes);
+	// console.log('sizes', sizes);
 	let modalSize: ModalProps['size'] = $state('md');
 	let backdrop = $state(true);
 	const changeBackdrop = () => {

src/routes/components/progress/+page.svelte

@@ -64,7 +64,7 @@
 			easing = undefined;
 		}
 	};
-	$inspect('tweenDuration', tweenDuration, 'animation', animation);
+	// $inspect('tweenDuration', tweenDuration, 'animation', animation);
 	// const randomize = () => {
 	//   progress = `${Math.round(Math.random() * 100)}`
 	// }