[stdf]Update Tailwind v4 for blur and backdrop-blur

docs/mds/components/mask/api.md

@@ -8,7 +8,7 @@
 | outDuration  | `number`                                                             | `0`      | N    | 消失动画过渡时长，单位：ms。 |
 | inverse      | `boolean`                                                            | `false`  | N    | 遮罩背景是否反色。           |
 | clickable    | `boolean`                                                            | `false`  | N    | 遮罩是否可点击穿透。         |
-| backdropBlur | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'`               | `'none'` | N    | 背景模糊度。                 |
+| backdropBlur | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'`               | `'none'` | N    | 背景模糊度。                 |
 | zIndex       | `number`                                                             | `500`    | N    | z-index。                    |
 
 ## Mask Events

docs/mds/components/mask/api_en.md

@@ -8,7 +8,7 @@
 | outDuration  | `number`                                                             | `0`      | N        | Duration of the hide animation in ms.        |
 | inverse      | `boolean`                                                            | `false`  | N        | Whether to invert the mask background color. |
 | clickable    | `boolean`                                                            | `false`  | N        | Whether the mask is click-through.           |
-| backdropBlur | `'none'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'`               | `'none'` | N        | Backdrop blur level.                         |
+| backdropBlur | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'`               | `'none'` | N        | Backdrop blur level.                         |
 | zIndex       | `number`                                                             | `500`    | N        | z-index value.                               |
 
 ## Mask Events

packages/stdf/src/lib/components/mask/Mask.svelte

@@ -19,8 +19,8 @@
 	// Mask blur style
 	const backdropBlurClass = {
 		none: '',
+		xs: ' backdrop-blur-xs',
 		sm: ' backdrop-blur-sm',
-		base: ' backdrop-blur',
 		md: ' backdrop-blur-md',
 		lg: ' backdrop-blur-lg',
 		xl: ' backdrop-blur-xl',

packages/stdf/src/lib/types/index.ts

@@ -363,7 +363,7 @@ export type MaskProps = {
 	opacity?: '0' | '0.1' | '0.2' | '0.3' | '0.4' | '0.5' | '0.6' | '0.7' | '0.8' | '0.9' | '1';
 	clickable?: boolean;
 	inverse?: boolean;
-	backdropBlur?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+	backdropBlur?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 	duration?: number;
 	outDuration?: number;
 	zIndex?: number;

packages/stdf/src/routes/+layout.svelte

@@ -140,7 +140,7 @@
 			: menuListArr.filter((item) => item.nav === $page.url.pathname.split('/')[1])[0][isZh ? 'title_zh' : 'title_en'] +
 				(isZh ? '示例' : ' Demo')}
 		left={showLeft ? 'back' : null}
-		injClass="bg-white/60 dark:bg-black/60 backdrop-blur"
+		injClass="bg-white/60 dark:bg-black/60 backdrop-blur-sm"
 		onclickLeft={() => window.history.back()}
 	>
 		{#snippet rightChild()}

packages/stdf/src/routes/bottomSheet/en_US/+page.svelte

@@ -78,7 +78,7 @@
 	</BottomSheet>
 
 	<Cell title="Mask completely transparent and blurry" onclick={() => (visible7 = true)} />
-	<BottomSheet bind:visible={visible7} mask={{ opacity: '0', backdropBlur: 'base' }}>
+	<BottomSheet bind:visible={visible7} mask={{ opacity: '0', backdropBlur: 'sm' }}>
 		<Aphorism num={2} />
 	</BottomSheet>
 

packages/stdf/src/routes/bottomSheet/zh_CN/+page.svelte

@@ -73,7 +73,7 @@
 	</BottomSheet>
 
 	<Cell title="遮罩完全透明且模糊" onclick={() => (visible7 = true)} />
-	<BottomSheet bind:visible={visible7} mask={{ opacity: '0', backdropBlur: 'base' }}>
+	<BottomSheet bind:visible={visible7} mask={{ opacity: '0', backdropBlur: 'sm' }}>
 		<Aphorism num={2} />
 	</BottomSheet>
 

packages/stdf/src/routes/loading/en_US/+page.svelte

@@ -53,7 +53,7 @@
 							<div class="mt-8 text-center text-xs">{'1_' + i}</div>
 						</div>
 						<div
-							class="flex w-full flex-col items-center border border-white/5 bg-darkBlack py-6 text-white dark:border-black/5 dark:bg-darkWhite dark:text-black"
+							class="bg-darkBlack dark:bg-darkWhite flex w-full flex-col items-center border border-white/5 py-6 text-white dark:border-black/5 dark:text-black"
 						>
 							<div class="h-8 w-8">
 								<Loading type={'1_' + i} inverse bind:speed />
@@ -61,7 +61,7 @@
 							<div class="mt-8 text-center text-xs">{'1_' + i}</div>
 						</div>
 						<div
-							class="flex w-full flex-col items-center border border-white/5 bg-darkBlack py-6 text-white dark:border-black/5 dark:bg-darkWhite dark:text-black"
+							class="bg-darkBlack dark:bg-darkWhite flex w-full flex-col items-center border border-white/5 py-6 text-white dark:border-black/5 dark:text-black"
 						>
 							<div class="h-8 w-8">
 								<Loading type={'1_' + i} theme inverse bind:speed />
@@ -96,7 +96,7 @@
 							<div class="mt-8 text-center text-xs">{'2_' + i}</div>
 						</div>
 						<div
-							class="flex w-full flex-col items-center border border-white/5 bg-darkBlack py-6 text-white dark:border-black/5 dark:bg-darkWhite dark:text-black"
+							class="bg-darkBlack dark:bg-darkWhite flex w-full flex-col items-center border border-white/5 py-6 text-white dark:border-black/5 dark:text-black"
 						>
 							<div class="h-8 w-8">
 								<Loading type={'2_' + i} inverse bind:speed />
@@ -142,7 +142,7 @@
 	</Tabs>
 </div>
 <!-- The button group fixed at the bottom, control speed -->
-<div class="sticky bottom-0 left-0 z-10 flex w-full justify-between gap-3 bg-white/60 px-2 backdrop-blur dark:bg-black/60">
+<div class="sticky bottom-0 left-0 z-10 flex w-full justify-between gap-3 bg-white/60 px-2 backdrop-blur-sm dark:bg-black/60">
 	{#each speedBtns as item}
 		<div class="flex-1">
 			<Button fill={speed === item ? 'base' : 'lineTheme'} size="full" injClass="text-xs px-2" onclick={() => (speed = item)}>

packages/stdf/src/routes/loading/zh_CN/+page.svelte

@@ -53,7 +53,7 @@
 							<div class="mt-8 text-center text-xs">{'1_' + i}</div>
 						</div>
 						<div
-							class="flex w-full flex-col items-center border border-white/5 bg-darkBlack py-6 text-white dark:border-black/5 dark:bg-darkWhite dark:text-black"
+							class="bg-darkBlack dark:bg-darkWhite flex w-full flex-col items-center border border-white/5 py-6 text-white dark:border-black/5 dark:text-black"
 						>
 							<div class="h-8 w-8">
 								<Loading type={'1_' + i} inverse bind:speed />
@@ -61,7 +61,7 @@
 							<div class="mt-8 text-center text-xs">{'1_' + i}</div>
 						</div>
 						<div
-							class="flex w-full flex-col items-center border border-white/5 bg-darkBlack py-6 text-white dark:border-black/5 dark:bg-darkWhite dark:text-black"
+							class="bg-darkBlack dark:bg-darkWhite flex w-full flex-col items-center border border-white/5 py-6 text-white dark:border-black/5 dark:text-black"
 						>
 							<div class="h-8 w-8">
 								<Loading type={'1_' + i} theme inverse bind:speed />
@@ -96,7 +96,7 @@
 							<div class="mt-8 text-center text-xs">{'2_' + i}</div>
 						</div>
 						<div
-							class="flex w-full flex-col items-center border border-white/5 bg-darkBlack py-6 text-white dark:border-black/5 dark:bg-darkWhite dark:text-black"
+							class="bg-darkBlack dark:bg-darkWhite flex w-full flex-col items-center border border-white/5 py-6 text-white dark:border-black/5 dark:text-black"
 						>
 							<div class="h-8 w-8">
 								<Loading type={'2_' + i} inverse bind:speed />
@@ -142,7 +142,7 @@
 	</Tabs>
 </div>
 <!-- 固定在底部的按钮组，控制速度 -->
-<div class="sticky bottom-0 left-0 z-10 flex w-full justify-between gap-3 bg-white/60 px-2 backdrop-blur dark:bg-black/60">
+<div class="sticky bottom-0 left-0 z-10 flex w-full justify-between gap-3 bg-white/60 px-2 backdrop-blur-sm dark:bg-black/60">
 	{#each speedBtns as item}
 		<div class="flex-1">
 			<Button fill={speed === item ? 'base' : 'lineTheme'} size="full" injClass="text-xs px-2" onclick={() => (speed = item)}>

packages/stdf/src/routes/mask/en_US/+page.svelte

@@ -38,7 +38,7 @@
 	<Mask visible={visible5} inverse onclickMask={() => (visible5 = false)} />
 
 	<Cell title="Blur mask" onclick={() => (visible6 = true)} />
-	<Mask visible={visible6} backdropBlur="sm" opacity="0" onclickMask={() => (visible6 = false)} />
+	<Mask visible={visible6} backdropBlur="xs" opacity="0" onclickMask={() => (visible6 = false)} />
 
 	<Cell title="Increase ambiguity" onclick={() => (visible7 = true)} />
 	<Mask visible={visible7} backdropBlur="xl" opacity="0" onclickMask={() => (visible7 = false)} />

packages/stdf/src/routes/mask/zh_CN/+page.svelte

@@ -38,7 +38,7 @@
 	<Mask visible={visible5} inverse onclickMask={() => (visible5 = false)} />
 
 	<Cell title="模糊遮罩" onclick={() => (visible6 = true)} />
-	<Mask visible={visible6} backdropBlur="sm" opacity="0" onclickMask={() => (visible6 = false)} />
+	<Mask visible={visible6} backdropBlur="xs" opacity="0" onclickMask={() => (visible6 = false)} />
 
 	<Cell title="加大模糊度" onclick={() => (visible7 = true)} />
 	<Mask visible={visible7} backdropBlur="xl" opacity="0" onclickMask={() => (visible7 = false)} />

packages/stdf/src/routes/pagination/en_US/+page.svelte

@@ -107,7 +107,7 @@
 		</div>
 	{/each}
 	{#if loading}
-		<div class="absolute inset-0 flex h-full w-full flex-col justify-center gap-8 text-center backdrop-blur">
+		<div class="absolute inset-0 flex h-full w-full flex-col justify-center gap-8 text-center backdrop-blur-sm">
 			<div>Querying the {currentPage} page data...</div>
 			<Loading />
 		</div>

packages/stdf/src/routes/pagination/zh_CN/+page.svelte

@@ -107,7 +107,7 @@
 		</div>
 	{/each}
 	{#if loading}
-		<div class="absolute inset-0 flex h-full w-full flex-col justify-center gap-8 text-center backdrop-blur">
+		<div class="absolute inset-0 flex h-full w-full flex-col justify-center gap-8 text-center backdrop-blur-sm">
 			<div>查询第 {currentPage} 页数据...</div>
 			<Loading />
 		</div>

packages/stdf/src/routes/popup/en_US/+page.svelte

@@ -64,7 +64,7 @@
 	<Popup bind:visible={visible9} size={80} position="left" />
 
 	<Cell title="The mask is completely transparent and fuzzy" onclick={() => (visible12 = true)} />
-	<Popup bind:visible={visible12} position="center" radiusPosition="all" radius="xl" px="8" mask={{ opacity: '0', backdropBlur: 'base' }} />
+	<Popup bind:visible={visible12} position="center" radiusPosition="all" radius="xl" px="8" mask={{ opacity: '0', backdropBlur: 'sm' }} />
 
 	<Cell title="Clicking the mask does not close" onclick={() => (visible13 = true)} />
 	<Popup bind:visible={visible13} maskClosable={false}>
@@ -80,7 +80,7 @@
 			<div class="m-auto w-1/2">
 				<img class="w-full object-cover" src="/assets/images/airpods-pro2.png" alt="" />
 			</div>
-			<div class="flex justify-around py-6 text-primary dark:text-dark">
+			<div class="text-primary dark:text-dark flex justify-around py-6">
 				<div>set</div>
 				<div>music</div>
 			</div>
@@ -89,7 +89,7 @@
 
 	<Cell title="The left position is automatically sized" onclick={() => (visible20 = true)} />
 	<Popup bind:visible={visible20} size={0} position="left" py="48" radiusPosition="right" radius="2xl" transitionDistance={80}>
-		<div class="flex h-full flex-col justify-around text-primary dark:text-dark">
+		<div class="text-primary dark:text-dark flex h-full flex-col justify-around">
 			<button class="p-6" onclick={() => (visible20 = false)}>Home</button>
 			<button class="p-6" onclick={() => (visible20 = false)}>Setting</button>
 			<button class="p-6" onclick={() => (visible20 = false)}>About</button>

packages/stdf/src/routes/popup/zh_CN/+page.svelte

@@ -64,7 +64,7 @@
 	<Popup bind:visible={visible9} size={80} position="left" />
 
 	<Cell title="遮罩完全透明且模糊" onclick={() => (visible12 = true)} />
-	<Popup bind:visible={visible12} position="center" radiusPosition="all" radius="xl" px="8" mask={{ opacity: '0', backdropBlur: 'base' }} />
+	<Popup bind:visible={visible12} position="center" radiusPosition="all" radius="xl" px="8" mask={{ opacity: '0', backdropBlur: 'sm' }} />
 
 	<Cell title="点击遮罩不会关闭" onclick={() => (visible13 = true)} />
 	<Popup bind:visible={visible13} maskClosable={false}>
@@ -80,7 +80,7 @@
 			<div class="m-auto w-1/2">
 				<img class="w-full object-cover" src="/assets/images/airpods-pro2.png" alt="" />
 			</div>
-			<div class="flex justify-around py-6 text-primary dark:text-dark">
+			<div class="text-primary dark:text-dark flex justify-around py-6">
 				<div>设置</div>
 				<div>音乐</div>
 			</div>
@@ -89,7 +89,7 @@
 
 	<Cell title="左侧位置自动大小" onclick={() => (visible20 = true)} />
 	<Popup bind:visible={visible20} size={0} position="left" py="48" radiusPosition="right" radius="2xl" transitionDistance={80}>
-		<div class="flex h-full flex-col justify-around text-primary dark:text-dark">
+		<div class="text-primary dark:text-dark flex h-full flex-col justify-around">
 			<button class="p-6" onclick={() => (visible20 = false)}>首页</button>
 			<button class="p-6" onclick={() => (visible20 = false)}>设置</button>
 			<button class="p-6" onclick={() => (visible20 = false)}>关于</button>

packages/stdf/src/routes/steps/en_US/+page.svelte

@@ -222,7 +222,7 @@
 <div class="mb-4 mt-8 px-4 text-lg font-bold">The content area injects elements</div>
 <Steps steps={steps9} {current} vertical />
 
-<div class="sticky bottom-0 z-10 flex bg-white/50 backdrop-blur dark:bg-black/50">
+<div class="sticky bottom-0 z-10 flex bg-white/50 backdrop-blur-sm dark:bg-black/50">
 	<div class="flex-1">
 		<Button fill="lineTheme" disabled={current === 1} onclick={() => current > 1 && current--}>Previous step</Button>
 	</div>

packages/stdf/src/routes/steps/zh_CN/+page.svelte

@@ -210,7 +210,7 @@
 <div class="mb-4 mt-8 px-4 text-lg font-bold">内容区域注入元素</div>
 <Steps steps={steps9} {current} vertical />
 
-<div class="sticky bottom-0 z-10 flex bg-white/50 backdrop-blur dark:bg-black/50">
+<div class="sticky bottom-0 z-10 flex bg-white/50 backdrop-blur-sm dark:bg-black/50">
 	<div class="flex-1">
 		<Button fill="lineTheme" disabled={current === 1} onclick={() => current > 1 && current--}>上一步</Button>
 	</div>

packages/stdf/src/routes/tabBar/en_US/+page.svelte

@@ -86,5 +86,5 @@
 	</div>
 </div>
 <div class="fixed bottom-0 w-full">
-	<TabBar labels={labels4} injClass="bg-white/50 dark:bg-black/50 backdrop-blur" />
+	<TabBar labels={labels4} injClass="bg-white/50 dark:bg-black/50 backdrop-blur-sm" />
 </div>

packages/stdf/src/routes/tabBar/zh_CN/+page.svelte

@@ -86,5 +86,5 @@
 	</div>
 </div>
 <div class="fixed bottom-0 w-full">
-	<TabBar labels={labels4} injClass="bg-white/50 dark:bg-black/50 backdrop-blur" />
+	<TabBar labels={labels4} injClass="bg-white/50 dark:bg-black/50 backdrop-blur-sm" />
 </div>

packages/stdf/src/routes/toast/en_US/+page.svelte

@@ -105,7 +105,7 @@
 	<Toast bind:visible={visible11} mask={{ inverse: true, opacity: '0.5' }} message="Reverse color mask" />
 
 	<Cell title="Mask blur" onclick={() => (visible12 = true)} />
-	<Toast bind:visible={visible12} mask={{ opacity: '0', backdropBlur: 'base' }} message="The content below the mask is blurry" />
+	<Toast bind:visible={visible12} mask={{ opacity: '0', backdropBlur: 'sm' }} message="The content below the mask is blurry" />
 
 	<Cell title="Faster transition" onclick={() => (visible13 = true)} />
 	<Toast bind:visible={visible13} transitionParams={{ duration: 150 }} message="The transition time is 150ms" />
@@ -168,7 +168,7 @@
 	<Toast bind:visible={visible26} radius="xl" message="Rounded corners were added" />
 </div>
 
-<div class="sticky bottom-0 z-10 flex bg-white/50 backdrop-blur dark:bg-black/50">
+<div class="sticky bottom-0 z-10 flex bg-white/50 backdrop-blur-sm dark:bg-black/50">
 	<div class="flex-1">
 		<Button fill="lineTheme" onclick={() => (visible5 = false)}>Manual shutdown</Button>
 	</div>

packages/stdf/src/routes/toast/zh_CN/+page.svelte

@@ -97,7 +97,7 @@
 	<Toast bind:visible={visible11} mask={{ inverse: true, opacity: '0.5' }} message="反色遮罩" />
 
 	<Cell title="遮罩模糊" onclick={() => (visible12 = true)} />
-	<Toast bind:visible={visible12} mask={{ opacity: '0', backdropBlur: 'base' }} message="遮罩下层内容模糊" />
+	<Toast bind:visible={visible12} mask={{ opacity: '0', backdropBlur: 'sm' }} message="遮罩下层内容模糊" />
 
 	<Cell title="过渡较快" onclick={() => (visible13 = true)} />
 	<Toast bind:visible={visible13} transitionParams={{ duration: 150 }} message="过渡时间为 150ms" />
@@ -160,7 +160,7 @@
 	<Toast bind:visible={visible26} radius="xl" message="加大了圆角" />
 </div>
 
-<div class="sticky bottom-0 z-10 flex bg-white/50 backdrop-blur dark:bg-black/50">
+<div class="sticky bottom-0 z-10 flex bg-white/50 backdrop-blur-sm dark:bg-black/50">
 	<div class="flex-1">
 		<Button fill="lineTheme" onclick={() => (visible5 = false)}>手动关闭</Button>
 	</div>