[create]将 create-stdf 版本更新至 0.2.10，优化 README 文件中的命令选项格式，添加新的 Vite 和 Svelte 模板，更新相关示例文件，确保文档和代码一致性。

packages/create-stdf/README.md

@@ -92,45 +92,49 @@ yarn create stdf@latest my-app --t skt --l zh_CN --i iconify
 
 # Options
 
-| Option             | Default | Description                                    |
-| --------------- | ------- | ---------------------------------------------- |
-| -               | -       | The name of the project, you can direct input. |
-| --t / --template | sktt | The template to use.                           |
-| --l / --language | en_US | The language of the prompts.                   |
+| Option             | Default   | Description                                    |
+| ------------------ | --------- | ---------------------------------------------- |
+| -                  | -         | The name of the project, you can direct input. |
+| --t / --template   | sktt      | The template to use.                           |
+| --l / --language   | en_US     | The language of the prompts.                   |
 | --i / --icon-usage | stdf-icon | The icon usage method.                         |
 
 # Template presets
 
-| Abbreviation | Template                                                | Description     |
-| ------------ | ------------------------------------------------------- | --------------- |
-| sktt        | SvelteKit & Tailwind & TypeScript           | Default         |
-| skt         | SvelteKit & Tailwind                         | -               |
-| skut        | SvelteKit & UnoCSS & TypeScript             | Not adapted yet |
-| sku         | SvelteKit & UnoCSS                         | Not adapted yet |
+| Abbreviation | Template                              | Description     |
+| ------------ | ------------------------------------- | --------------- |
+| sktt         | SvelteKit & Tailwind & TypeScript     | Default         |
+| skt          | SvelteKit & Tailwind                  | -               |
+| vstt         | Vite & Svelte & Tailwind & TypeScript | -               |
+| vst          | Vite & Svelte & Tailwind              | -               |
+| skut         | SvelteKit & UnoCSS & TypeScript       | Not adapted yet |
+| sku          | SvelteKit & UnoCSS                    | Not adapted yet |
+| vsut         | Vite & Svelte & UnoCSS                | Not adapted yet |
+| vsu          | Vite & Svelte & UnoCSS                | Not adapted yet |
 
 # Language presets
 
-| Abbreviation  | Language              |
-| ----- | --------------------- |
-| en_US | English (US)          |
-| zh_CN | Chinese (Simplified)  |
-| zh_TW | Chinese (Traditional) |
-| ja_JP | Japanese              |
-| ko_KR | Korean                |
-| es_ES | Spanish               |
-| ru_RU | Russian               |
-| fr_FR | French                |
-| de_DE | German                |
-| it_IT | Italian               |
+| Abbreviation | Language              |
+| ------------ | --------------------- |
+| en_US        | English (US)          |
+| zh_CN        | Chinese (Simplified)  |
+| zh_TW        | Chinese (Traditional) |
+| ja_JP        | Japanese              |
+| ko_KR        | Korean                |
+| es_ES        | Spanish               |
+| ru_RU        | Russian               |
+| fr_FR        | French                |
+| de_DE        | German                |
+| it_IT        | Italian               |
 
 # Icon usage presets
 
-| Abbreviation | Description                                                           |
-| --------- | -------------------------------------------------------------- |
-| stdf-icon | Use rollup-plugin-stdf-icon to manage icons.                  |
-| iconify   | Use iconify to manage icons.                                  |
-| both      | Use both rollup-plugin-stdf-icon and iconify to manage icons. |
-| none      | Do not use any tool to manage icons.                                       |
+| Abbreviation | Description                                                   |
+| ------------ | ------------------------------------------------------------- |
+| stdf-icon    | Use rollup-plugin-stdf-icon to manage icons.                  |
+| iconify      | Use iconify to manage icons.                                  |
+| both         | Use both rollup-plugin-stdf-icon and iconify to manage icons. |
+| none         | Do not use any tool to manage icons.                          |
 
 # License
 

packages/create-stdf/README_CN.md

@@ -92,21 +92,25 @@ yarn create stdf@latest my-app --t skt --l zh_CN --i iconify
 
 # 命令选项
 
-| 命令              | 默认          | 描述                     |
-| ----------------- | ------------- | ------------------------ |
-| -                 | -             | 项目名称，可以直接输入。 |
-| --t/--template   | sktt          | 要使用的模板。           |
-| --l/--language   | en_US         | 提示语言。               |
-| --i/--icon-usage | stdf-icon     | 图标使用方式。           |
+| 命令             | 默认      | 描述                     |
+| ---------------- | --------- | ------------------------ |
+| -                | -         | 项目名称，可以直接输入。 |
+| --t/--template   | sktt      | 要使用的模板。           |
+| --l/--language   | en_US     | 提示语言。               |
+| --i/--icon-usage | stdf-icon | 图标使用方式。           |
 
 # 模板预设
 
-| 简写 | 模板                              | 描述     |
-| ---- | --------------------------------- | -------- |
-| sktt | SvelteKit & Tailwind & TypeScript | 默认     |
-| skt  | SvelteKit & Tailwind              | -        |
-| skut | SvelteKit & UnoCSS & TypeScript   | 暂未适配 |
-| sku  | SvelteKit & UnoCSS                | 暂未适配 |
+| 简写 | 模板                                  | 描述     |
+| ---- | ------------------------------------- | -------- |
+| sktt | SvelteKit & Tailwind & TypeScript     | 默认     |
+| skt  | SvelteKit & Tailwind                  | -        |
+| vstt | Vite & Svelte & Tailwind & TypeScript | -        |
+| vst  | Vite & Svelte & Tailwind              | -        |
+| skut | SvelteKit & UnoCSS & TypeScript       | 暂未适配 |
+| sku  | SvelteKit & UnoCSS                    | 暂未适配 |
+| vsut | Vite & Svelte & UnoCSS                | 暂未适配 |
+| vsu  | Vite & Svelte & UnoCSS                | 暂未适配 |
 
 # 语言预设
 
@@ -125,12 +129,12 @@ yarn create stdf@latest my-app --t skt --l zh_CN --i iconify
 
 # 图标使用方式预设
 
-| 简写      | 描述                                                           |
-| --------- | -------------------------------------------------------------- |
-| stdf-icon | 使用 rollup-plugin-stdf-icon 插件管理图标。                  |
-| iconify   | 使用 iconify 插件管理图标。                                  |
+| 简写      | 描述                                                       |
+| --------- | ---------------------------------------------------------- |
+| stdf-icon | 使用 rollup-plugin-stdf-icon 插件管理图标。                |
+| iconify   | 使用 iconify 插件管理图标。                                |
 | both      | 同时使用 rollup-plugin-stdf-icon 和 iconify 插件管理图标。 |
-| none      | 不使用任何工具管理图标。                                       |
+| none      | 不使用任何工具管理图标。                                   |
 
 # 许可证
 

packages/create-stdf/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-stdf",
-	"version": "0.2.9",
+	"version": "0.2.10",
 	"description": "A CLI for creating new STDF projects",
 	"bin": {
 		"create-stdf": "index.js"

packages/create-stdf/snippet/svelte-kit-stdf-icon.txt

@@ -0,0 +1,13 @@
+export default defineConfig({
+	plugins: [
+		sveltekit(),
+		tailwindcss(),
+		// 一般来说，一个应用的的 svg 不多时都放在一个文件夹下，合并为一个 symbol 即可。此处演示了不同文件夹下的图标如何合并为不同的 symbol。
+		// Generally speaking, when the svg of an application is not much, it is placed in a folder and merged into one symbol. This example shows how the icons in different folders are merged into different symbols.
+		svgSprite([
+			{ inFile: 'src/lib/svgs/Heroicons', outFile: 'static/symbols' },
+			{ inFile: 'src/lib/svgs/IconPark', outFile: 'static/symbols' },
+			{ inFile: 'src/lib/svgs/Remix', outFile: 'static/symbols' }
+		])
+	]
+});

packages/create-stdf/snippet/vite-stdf-icon.txt

@@ -1,13 +1,13 @@
 export default defineConfig({
 	plugins: [
+		svelte(),
 		tailwindcss(),
-		sveltekit(),
 		// 一般来说，一个应用的的 svg 不多时都放在一个文件夹下，合并为一个 symbol 即可。此处演示了不同文件夹下的图标如何合并为不同的 symbol。
 		// Generally speaking, when the svg of an application is not much, it is placed in a folder and merged into one symbol. This example shows how the icons in different folders are merged into different symbols.
 		svgSprite([
-			{ inFile: 'src/lib/svgs/Heroicons', outFile: 'static/symbols' },
-			{ inFile: 'src/lib/svgs/IconPark', outFile: 'static/symbols' },
-			{ inFile: 'src/lib/svgs/Remix', outFile: 'static/symbols' }
+			{ inFile: 'src/lib/svgs/Heroicons', outFile: 'public/symbols' },
+			{ inFile: 'src/lib/svgs/IconPark', outFile: 'public/symbols' },
+			{ inFile: 'src/lib/svgs/Remix', outFile: 'public/symbols' }
 		])
 	]
 });

packages/create-stdf/src/index.js

@@ -76,10 +76,14 @@ lang = argvLanguage && languages.find(item => item.value === argvLanguage) ? lan
 // 模板列表
 // Template list
 const templateOptions = [
-	{ value: 'sktt', label: 'SvelteKit & Tailwind & TypeScript', template: 'sktt', finish: true },
-	{ value: 'skt', label: 'SvelteKit & Tailwind', template: 'skt', finish: true },
-	{ value: 'skut', label: 'SvelteKit & UnoCSS & TypeScript', template: 'skut', finish: false },
-	{ value: 'sku', label: 'SvelteKit & UnoCSS', template: 'sku', finish: false },
+	{ value: 'sktt', label: 'SvelteKit & Tailwind & TypeScript', template: 'sktt', ts: true, finish: true },
+	{ value: 'skt', label: 'SvelteKit & Tailwind', template: 'skt', ts: false, finish: true },
+	{ value: 'vstt', label: 'Vite & Svelte & Tailwind & TypeScript', template: 'vstt', ts: true, finish: true },
+	{ value: 'vst', label: 'Vite & Svelte & Tailwind', template: 'vst', ts: false, finish: true },
+	{ value: 'skut', label: 'SvelteKit & UnoCSS & TypeScript', template: 'skut', ts: true, finish: false },
+	{ value: 'sku', label: 'SvelteKit & UnoCSS', template: 'sku', ts: false, finish: false },
+	{ value: 'vsut', label: 'Vite & Svelte & UnoCSS & TypeScript', template: 'vsut', ts: true, finish: false },
+	{ value: 'vsu', label: 'Vite & Svelte & UnoCSS', template: 'vsu', ts: false, finish: false },
 ];
 
 // 包管理工具列表
@@ -276,6 +280,10 @@ function createFunc(projectName, templateItem, iconUsageItem, packageManagerItem
 			const stdfV = await getLatestVersion('stdf');
 			packageJson.devDependencies['stdf'] = `^${stdfV}`;
 
+			const isVite = templateItem.value.includes('v');
+			const isTs = templateItem.ts;
+			const isUno = templateItem.value.includes('u');
+
 			const addIconifyFun = async () => {
 				const iconifyTailwind4V = await getLatestVersion('@iconify/tailwind4');
 				const bitcoin_iconsV = await getLatestVersion('@iconify-json/bitcoin-icons');
@@ -299,41 +307,77 @@ function createFunc(projectName, templateItem, iconUsageItem, packageManagerItem
 }`
 				);
 				fs.writeFileSync(`${projectDir}/src/app.css`, appCssLines.join('\n'), 'utf-8');
-				// 在 ${projectDir}/src/routes/+page.svelte 的 <Calendar bind:visible /> 下方增加图标使用示例
-				const pageSvelte = fs.readFileSync(`${projectDir}/src/routes/+page.svelte`, 'utf-8');
-				const pageSvelteLines = pageSvelte.split('\n');
-				const iconifySnippet = fs.readFileSync(fileURLToPath(new URL('../snippet/iconify.txt', import.meta.url)), 'utf-8');
-				pageSvelteLines.splice(pageSvelteLines.indexOf('<Calendar bind:visible />') + 1, 0, iconifySnippet);
-				fs.writeFileSync(`${projectDir}/src/routes/+page.svelte`, pageSvelteLines.join('\n'), 'utf-8');
+
+				if (isVite) {
+					// 使用 Vite
+					// 在 ${projectDir}/src/App.svelte 的 <Calendar bind:visible /> 下方增加图标使用示例
+					const appSvelte = fs.readFileSync(`${projectDir}/src/App.svelte`, 'utf-8');
+					const appSvelteLines = appSvelte.split('\n');
+					const iconifySnippet = fs.readFileSync(fileURLToPath(new URL('../snippet/iconify.txt', import.meta.url)), 'utf-8');
+					appSvelteLines.splice(appSvelteLines.indexOf('<Calendar bind:visible />') + 1, 0, iconifySnippet);
+					fs.writeFileSync(`${projectDir}/src/App.svelte`, appSvelteLines.join('\n'), 'utf-8');
+				} else {
+					// 使用 SvelteKit
+					// 在 ${projectDir}/src/routes/+page.svelte 的 <Calendar bind:visible /> 下方增加图标使用示例
+					const pageSvelte = fs.readFileSync(`${projectDir}/src/routes/+page.svelte`, 'utf-8');
+					const pageSvelteLines = pageSvelte.split('\n');
+					const iconifySnippet = fs.readFileSync(fileURLToPath(new URL('../snippet/iconify.txt', import.meta.url)), 'utf-8');
+					pageSvelteLines.splice(pageSvelteLines.indexOf('<Calendar bind:visible />') + 1, 0, iconifySnippet);
+					fs.writeFileSync(`${projectDir}/src/routes/+page.svelte`, pageSvelteLines.join('\n'), 'utf-8');
+				}
 			};
 			const addStdfIconFun = async () => {
-				const isTs = templateItem.value.includes('tt') || templateItem.value.includes('ut');
 				const rollupPluginStdfIconV = await getLatestVersion('rollup-plugin-stdf-icon');
 				packageJson.devDependencies['rollup-plugin-stdf-icon'] = `^${rollupPluginStdfIconV}`;
 				const viteConfig = fs.readFileSync(`${projectDir}/vite.config.${isTs ? 'ts' : 'js'}`, 'utf-8');
 				const viteConfigLines = viteConfig.split('\n');
 				viteConfigLines.splice(1, 0, `import svgSprite from 'rollup-plugin-stdf-icon';`);
-				const viteStdfIconSnippet = fs.readFileSync(
-					fileURLToPath(new URL('../snippet/vite-stdf-icon.txt', import.meta.url)),
-					'utf-8'
-				);
-				// 将【export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });】替换为 viteStdfIconSnippet 的代码
-				// Replace 【export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });】 with the code of viteStdfIconSnippet
-				viteConfigLines.splice(
-					viteConfigLines.indexOf('export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });'),
-					1,
-					viteStdfIconSnippet
-				);
-				fs.writeFileSync(`${projectDir}/vite.config.${isTs ? 'ts' : 'js'}`, viteConfigLines.join('\n'), 'utf-8');
-				// 将 snippet/svgs 整个目录复制到 ${projectDir}/src/lib 目录下
-				// Copy the snippet/svgs directory to the ${projectDir}/src/lib directory
-				fs.copySync(fileURLToPath(new URL('../snippet/svgs', import.meta.url)), `${projectDir}/src/lib/svgs`);
-				// 在 ${projectDir}/src/routes/+page.svelte 的 <Calendar bind:visible /> 下方增加图标使用示例
-				const pageSvelte = fs.readFileSync(`${projectDir}/src/routes/+page.svelte`, 'utf-8');
-				const pageSvelteLines = pageSvelte.split('\n');
-				const stdfIconSnippet = fs.readFileSync(fileURLToPath(new URL('../snippet/stdf-icon.txt', import.meta.url)), 'utf-8');
-				pageSvelteLines.splice(pageSvelteLines.indexOf('<Calendar bind:visible />') + 1, 0, stdfIconSnippet);
-				fs.writeFileSync(`${projectDir}/src/routes/+page.svelte`, pageSvelteLines.join('\n'), 'utf-8');
+
+				if (isVite) {
+					const viteStdfIconSnippet = fs.readFileSync(
+						fileURLToPath(new URL('../snippet/vite-stdf-icon.txt', import.meta.url)),
+						'utf-8'
+					);
+					// 将【export default defineConfig({ plugins: [svelte(), tailwindcss()] });】替换为 viteStdfIconSnippet 的代码
+					// Replace 【export default defineConfig({ plugins: [svelte(), tailwindcss()] });】 with the code of viteStdfIconSnippet
+					viteConfigLines.splice(
+						viteConfigLines.indexOf('export default defineConfig({ plugins: [svelte(), tailwindcss()] });'),
+						1,
+						viteStdfIconSnippet
+					);
+					fs.writeFileSync(`${projectDir}/vite.config.${isTs ? 'ts' : 'js'}`, viteConfigLines.join('\n'), 'utf-8');
+					// 将 snippet/svgs 整个目录复制到 ${projectDir}/src/lib 目录下
+					// Copy the snippet/svgs directory to the ${projectDir}/src/lib directory
+					fs.copySync(fileURLToPath(new URL('../snippet/svgs', import.meta.url)), `${projectDir}/src/lib/svgs`);
+					// 在 ${projectDir}/src/App.svelte 的 <Calendar bind:visible /> 下方增加图标使用示例
+					const appSvelte = fs.readFileSync(`${projectDir}/src/App.svelte`, 'utf-8');
+					const appSvelteLines = appSvelte.split('\n');
+					const stdfIconSnippet = fs.readFileSync(fileURLToPath(new URL('../snippet/stdf-icon.txt', import.meta.url)), 'utf-8');
+					appSvelteLines.splice(appSvelteLines.indexOf('<Calendar bind:visible />') + 1, 0, stdfIconSnippet);
+					fs.writeFileSync(`${projectDir}/src/App.svelte`, appSvelteLines.join('\n'), 'utf-8');
+				} else {
+					const viteStdfIconSnippet = fs.readFileSync(
+						fileURLToPath(new URL('../snippet/svelte-kit-stdf-icon.txt', import.meta.url)),
+						'utf-8'
+					);
+					// 将【export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });】替换为 viteStdfIconSnippet 的代码
+					// Replace 【export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });】 with the code of viteStdfIconSnippet
+					viteConfigLines.splice(
+						viteConfigLines.indexOf('export default defineConfig({ plugins: [sveltekit(), tailwindcss()] });'),
+						1,
+						viteStdfIconSnippet
+					);
+					fs.writeFileSync(`${projectDir}/vite.config.${isTs ? 'ts' : 'js'}`, viteConfigLines.join('\n'), 'utf-8');
+					// 将 snippet/svgs 整个目录复制到 ${projectDir}/src/lib 目录下
+					// Copy the snippet/svgs directory to the ${projectDir}/src/lib directory
+					fs.copySync(fileURLToPath(new URL('../snippet/svgs', import.meta.url)), `${projectDir}/src/lib/svgs`);
+					// 在 ${projectDir}/src/routes/+page.svelte 的 <Calendar bind:visible /> 下方增加图标使用示例
+					const pageSvelte = fs.readFileSync(`${projectDir}/src/routes/+page.svelte`, 'utf-8');
+					const pageSvelteLines = pageSvelte.split('\n');
+					const stdfIconSnippet = fs.readFileSync(fileURLToPath(new URL('../snippet/stdf-icon.txt', import.meta.url)), 'utf-8');
+					pageSvelteLines.splice(pageSvelteLines.indexOf('<Calendar bind:visible />') + 1, 0, stdfIconSnippet);
+					fs.writeFileSync(`${projectDir}/src/routes/+page.svelte`, pageSvelteLines.join('\n'), 'utf-8');
+				}
 			};
 
 			// 如果 iconUsageItem 的值为 iconify
@@ -362,30 +406,30 @@ function createFunc(projectName, templateItem, iconUsageItem, packageManagerItem
 			spinner.stop();
 			p.outro(`🎉🎉🎉 ${projectName} - ${lang.pcsucc}`);
 
-			// 根据 item.value 的值，判断使用 Tailwind 还是 UnoCSS
-			// According to the value of item.value, determine whether to use Tailwind or UnoCSS
-			const isHasUno = templateItem.value.includes('u');
-
 			// 获得依赖的版本号
 			// get the version number of the dependency
-			const versions = {
-				vite: packageJson.devDependencies.vite.replace('^', ''),
+			const BaseVersions = {
 				svelte: packageJson.devDependencies.svelte.replace('^', ''),
-				'@sveltejs/kit': packageJson.devDependencies['@sveltejs/kit'].replace('^', ''),
 				stdf: packageJson.devDependencies.stdf.replace('^', ''),
+				// vite: packageJson.devDependencies.vite.replace('^', ''),
+				// '@sveltejs/kit': packageJson.devDependencies['@sveltejs/kit'].replace('^', ''),
 			};
-
-			if (isHasUno) {
-				versions['unocss'] = packageJson.devDependencies.unocss.replace('^', '');
+			if (isVite) {
+				BaseVersions['vite'] = packageJson.devDependencies.vite.replace('^', '');
+			} else {
+				BaseVersions['@sveltejs/kit'] = packageJson.devDependencies['@sveltejs/kit'].replace('^', '');
+			}
+			if (isUno) {
+				BaseVersions['unocss'] = packageJson.devDependencies.unocss.replace('^', '');
 			} else {
-				versions['tailwindcss'] = packageJson.devDependencies.tailwindcss.replace('^', '');
+				BaseVersions['tailwindcss'] = packageJson.devDependencies.tailwindcss.replace('^', '');
 			}
 
 			// 将 versions 的键值拼接为 bold('Vite:') cyan(versions.vite) bold('Svelte:') cyan(versions.svelte) 的形式
 			// Splice the key value of versions into the form of bold('Vite:') cyan(versions.vite) bold('Svelte:') cyan(versions.svelte)
 			let versionsString = '';
-			for (const key in versions) {
-				versionsString += bold(key) + ': ' + cyan(versions[key]) + ' ';
+			for (const key in BaseVersions) {
+				versionsString += bold(key) + ': ' + cyan(BaseVersions[key]) + ' ';
 			}
 
 			// 显示版本号
@@ -405,7 +449,7 @@ function createFunc(projectName, templateItem, iconUsageItem, packageManagerItem
 			);
 			// 提示配置主题色
 			// Prompt configuration theme color
-			console.log(`🎨 ${grey(isHasUno ? lang.pcyt_vu : lang.pcyt_vt)}`);
+			console.log(`🎨 ${grey(isUno ? lang.pcyt_vu : lang.pcyt_vt)}`);
 		})
 		.catch(err => {
 			spinner.stop();

packages/create-stdf/templates/skt/README.md

@@ -1,6 +1,6 @@
-# SvelteKit + Tailwind + STDF
+# SvelteKit & Tailwind & STDF
 
-This template should help get you started developing with Svelte + Tailwind + STDF in SvelteKit.
+This template should help get you started developing with SvelteKit & Tailwind & STDF.
 
 ## Recommended IDE Setup
 

packages/create-stdf/templates/skt/src/app.html

@@ -5,7 +5,7 @@
 		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf.svg" media="(prefers-color-scheme: light)" />
 		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf_dark.svg" media="(prefers-color-scheme: dark)" />
 		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
-		<title>SvelteKit + Tailwind + STDF</title>
+		<title>SvelteKit & Tailwind & STDF</title>
 		%sveltekit.head%
 	</head>
 

packages/create-stdf/templates/skt/src/routes/+page.svelte

@@ -82,10 +82,10 @@
 <div class="flex items-center justify-center gap-2 pt-10 text-center">
 	<a class="flex w-10 flex-col items-center" href="https://kit.svelte.dev" target="_blank" rel="noreferrer">
 		<img src="/svelte.svg" alt="Svelte Logo" />
-	</a>+
+	</a>
 	<a class="flex w-10 flex-col items-center" href="https://tailwindcss.com" target="_blank" rel="noreferrer">
 		<img src="/tailwindcss.svg" alt="Tailwind Logo" />
-	</a>+
+	</a>
 	<a class="flex w-8 flex-col items-center" href="https://stdf.design" target="_blank" rel="noreferrer" aria-label="STDF Logo">
 		<svg viewBox="0 0 90 80" fill="currentColor">
 			<path
@@ -98,10 +98,10 @@
 </div>
 <div class="my-6 text-center text-xs">
 	{#if lang === 'zh_CN'}
-		<p>这是 SvelteKit + Tailwind + STDF 构建的模板</p>
+		<p>这是 SvelteKit & Tailwind & STDF 构建的模板</p>
 		<p class="mt-2">点击上方 LOGO 了解更多</p>
 	{:else}
-		<p>This is a template using SvelteKit + TailwindCSS + STDF</p>
+		<p>This is a template using SvelteKit & Tailwind & STDF</p>
 		<p class="mt-2">Click the logo above to learn more</p>
 	{/if}
 </div>

packages/create-stdf/templates/skt/vite.config.js

@@ -2,4 +2,4 @@ import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
-export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });
+export default defineConfig({ plugins: [sveltekit(), tailwindcss()] });

packages/create-stdf/templates/sktt/README.md

@@ -1,6 +1,6 @@
-# SvelteKit + Tailwind + TypeScript + STDF
+# SvelteKit & Tailwind & TypeScript & STDF
 
-This template should help get you started developing with Svelte + Tailwind + TypeScript + STDF in SvelteKit.
+This template should help get you started developing with SvelteKit & Tailwind & TypeScript & STDF.
 
 ## Recommended IDE Setup
 

packages/create-stdf/templates/sktt/src/app.html

@@ -5,7 +5,7 @@
 		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf.svg" media="(prefers-color-scheme: light)" />
 		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf_dark.svg" media="(prefers-color-scheme: dark)" />
 		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
-		<title>SvelteKit + Tailwind + TypeScript + STDF</title>
+		<title>SvelteKit & Tailwind & TypeScript & STDF</title>
 		%sveltekit.head%
 	</head>
 

packages/create-stdf/templates/sktt/src/routes/+page.svelte

@@ -82,13 +82,13 @@
 <div class="flex items-center justify-center gap-2 pt-10 text-center">
 	<a class="flex w-10 flex-col items-center" href="https://kit.svelte.dev" target="_blank" rel="noreferrer">
 		<img src="/svelte.svg" alt="Svelte Logo" />
-	</a>+
+	</a>
 	<a class="flex w-10 flex-col items-center" href="https://tailwindcss.com" target="_blank" rel="noreferrer">
 		<img src="/tailwindcss.svg" alt="Tailwind Logo" />
-	</a>+
+	</a>
 	<a class="flex w-10 flex-col items-center" href="https://typescriptlang.org" target="_blank" rel="noreferrer">
 		<img src="/typescript.svg" alt="Typescript Logo" />
-	</a>+
+	</a>
 	<a class="flex w-8 flex-col items-center" href="https://stdf.design" target="_blank" rel="noreferrer" aria-label="STDF Logo">
 		<svg viewBox="0 0 90 80" fill="currentColor">
 			<path
@@ -101,10 +101,10 @@
 </div>
 <div class="my-6 text-center text-xs">
 	{#if lang === 'zh_CN'}
-		<p>这是 SvelteKit + Tailwind + TypeScript + STDF 构建的模板</p>
+		<p>这是 SvelteKit & Tailwind & TypeScript & STDF 构建的模板</p>
 		<p class="mt-2">点击上方 LOGO 了解更多</p>
 	{:else}
-		<p>This is a template using SvelteKit + TailwindCSS + TypeScript + STDF</p>
+		<p>This is a template using SvelteKit & Tailwind & TypeScript & STDF</p>
 		<p class="mt-2">Click the logo above to learn more</p>
 	{/if}
 </div>

packages/create-stdf/templates/sktt/vite.config.ts

@@ -2,4 +2,4 @@ import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
-export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });
+export default defineConfig({ plugins: [sveltekit(), tailwindcss()] });

packages/create-stdf/templates/vst/README.md

@@ -0,0 +1,21 @@
+# Vite & Svelte & Tailwind & STDF
+
+This template should help get you started developing with Svelte & Tailwind & STDF in Vite.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) + [TypeScript](https://typescriptlang.org) + [STDF](https://stdf.design) .
+
+- [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [Tailwind](https://www.jetbrains.com/help/webstorm/tailwind-css.html) + [TypeScript](https://typescriptlang.org) + [STDF](https://stdf.design) .
+
+## Install and run project
+
+```bash
+npm i
+
+npm run dev
+```
+
+## More Info
+
+For more information about quickly create a new project, see the STDF [Quick start](https://stdf.design/guide) guide.

packages/create-stdf/templates/vst/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/stdf.svg" media="(prefers-color-scheme: light)" />
+		<link rel="icon" type="image/svg+xml" href="/stdf_dark.svg" media="(prefers-color-scheme: dark)" />
+		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+		<title>Vite & Svelte & Tailwind & TypeScript & STDF</title>
+	</head>
+	<body class="bg-primaryWhite dark:bg-darkBlack text-black dark:text-white">
+		<div id="app"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
+</html>

packages/create-stdf/templates/vst/jsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}

packages/create-stdf/templates/vst/package.json

@@ -0,0 +1,18 @@
+{
+	"name": "vst",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/vite": "^4.1.8",
+		"svelte": "^5.28.1",
+		"tailwindcss": "^4.1.8",
+		"vite": "^6.3.5"
+	}
+}

packages/create-stdf/templates/vst/public/stdf.svg

@@ -0,0 +1,4 @@
+<svg width="90" height="80" viewBox="0 0 90 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z" fill="#0B24FB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 30V0L0 50H20V80L40 30H20Z" fill="#FFC043"/>
+</svg>

packages/create-stdf/templates/vst/public/stdf_dark.svg

@@ -0,0 +1,4 @@
+<svg width="90" height="80" viewBox="0 0 90 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z" fill="#FFC043"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 30V0L0 50H20V80L40 30H20Z" fill="#0B24FB"/>
+</svg>

packages/create-stdf/templates/vst/public/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

packages/create-stdf/templates/vst/public/tailwindcss.svg

@@ -0,0 +1,7 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<title>Tailwind CSS</title>
+	<path
+		fill="#00bcff"
+		d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
+	/>
+</svg>

packages/create-stdf/templates/vst/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

packages/create-stdf/templates/vst/src/App.svelte

@@ -0,0 +1,135 @@
+<script>
+	import { setContext } from 'svelte';
+	import { Button, Cell, Icon, Calendar } from 'stdf';
+	import { STDFTheme, switchTheme, darkMode } from 'stdf/theme';
+	import NintendoTheme from './data/nintendo';
+	import { en_US, zh_CN } from 'stdf/lang';
+	import Counter from './Counter.svelte';
+
+	//解决 ios 不支持按钮:active 伪类
+	// Solve the problem that ios does not support the button: active pseudo class
+	document.body.addEventListener('touchstart', function () {
+		//...空函数即可
+		// ... Empty function is OK
+	});
+
+	//切换亮暗模式 (toggle light or dark mode)
+	let mode = $state(sessionStorage.getItem('mode') === 'dark' ? 'dark' : 'light');
+
+	$effect(() => {
+		if (mode === 'dark') {
+			darkMode(true);
+		} else {
+			darkMode(false);
+		}
+	});
+	const toggleModeFun = () => {
+		if (mode === 'dark') {
+			// 切换到 (light switch to light)
+			mode = 'light';
+			darkMode(false);
+			sessionStorage.setItem('mode', 'light');
+		} else {
+			// 切换到 (dark switch to dark)
+			mode = 'dark';
+			darkMode(true);
+			sessionStorage.setItem('mode', 'dark');
+		}
+	};
+
+	// 设置语言 (setting language)
+	let lang = $state(localStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN');
+	setContext('STDF_lang', localStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
+	const toggleLangFun = () => {
+		lang = lang === 'zh_CN' ? 'en_US' : 'zh_CN';
+		localStorage.setItem('lang', lang);
+		window.location.reload();
+	};
+
+	// 进度条 (percent)
+	let percent = $state(20);
+	const reduceFunc = () => {
+		if (percent > 0) {
+			percent -= 10;
+		}
+	};
+	const increaseFunc = () => {
+		if (percent < 100) {
+			percent += 10;
+		}
+	};
+
+	// 日历(calendar)
+	let visible = $state(false);
+
+	// 主题(theme)
+	let theme = $state('STDF');
+	const toggleThemeFun = () => {
+		if (theme === 'STDF') {
+			theme = 'Nintendo';
+			switchTheme(NintendoTheme);
+		} else {
+			theme = 'STDF';
+			switchTheme(STDFTheme);
+		}
+	};
+</script>
+
+<div class="flex items-center justify-center gap-2 pt-10 text-center">
+	<a class="flex w-10 flex-col items-center" href="https://vite.dev" target="_blank" rel="noreferrer">
+		<img src="/vite.svg" alt="Vite Logo" />
+	</a>
+	<a class="flex w-10 flex-col items-center" href="https://svelte.dev" target="_blank" rel="noreferrer">
+		<img src="/svelte.svg" alt="Svelte Logo" />
+	</a>
+	<a class="flex w-10 flex-col items-center" href="https://tailwindcss.com" target="_blank" rel="noreferrer">
+		<img src="/tailwindcss.svg" alt="Tailwind Logo" />
+	</a>
+	<a class="flex w-8 flex-col items-center" href="https://stdf.design" target="_blank" rel="noreferrer" aria-label="STDF Logo">
+		<svg viewBox="0 0 90 80" fill="currentColor">
+			<path
+				class="text-primary dark:text-dark"
+				d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
+			/>
+			<path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
+		</svg>
+	</a>
+</div>
+<div class="my-6 text-center text-xs">
+	{#if lang === 'zh_CN'}
+		<p>这是 Vite & Svelte & Tailwind & STDF 构建的模板</p>
+		<p class="mt-2">点击上方 LOGO 了解更多</p>
+	{:else}
+		<p>This is a template using Vite & Svelte & TailwindCSS & STDF</p>
+		<p class="mt-2">Click the logo above to learn more</p>
+	{/if}
+</div>
+<div class="my-6">
+	<Cell
+		title={lang === 'zh_CN' ? '暗模式' : 'Dark mode'}
+		right={{ type: 'switch', switch: { active: mode === 'dark' } }}
+		onclick={toggleModeFun}
+	/>
+</div>
+<div class="mt-8">
+	<Counter bind:percent />
+</div>
+<div class="mb-8">
+	<Button heightIn="0" group fill="lineTheme">
+		<div class="flex w-full">
+			<button class="border-primary dark:border-dark flex-1 border-r py-2 active:opacity-80" onclick={reduceFunc}>-10</button>
+			<button class="border-primary dark:border-dark flex-1 border-r py-2 active:opacity-80" onclick={increaseFunc}>+10</button>
+			<button class="flex-1 py-2 active:opacity-80" onclick={() => (percent = 20)}>
+				{lang === 'zh_CN' ? '重置' : 'Reset'}
+			</button>
+		</div>
+	</Button>
+</div>
+<div class="my-6">
+	<Button fill="lineTheme" onclick={() => (visible = true)}>{lang === 'zh_CN' ? '日历' : 'Calendar'}</Button>
+</div>
+<Calendar bind:visible />
+<div class="my-6">
+	<Button onclick={toggleLangFun}>{lang === 'zh_CN' ? '切换语言' : 'Toggle language'}</Button>
+	<Button fill="lineTheme" onclick={toggleThemeFun}>{lang === 'zh_CN' ? '切换主题' : 'Toggle theme'}</Button>
+</div>

packages/create-stdf/templates/vst/src/Counter.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { Progress } from 'stdf';
+
+	let { percent = $bindable(20) } = $props();
+</script>
+
+<div class="p-4">
+	<Progress {percent} />
+</div>

packages/create-stdf/templates/vst/src/app.css

@@ -0,0 +1,67 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+	--color-primary-50: oklch(0.979 0.01 267.36);
+	--color-primary-100: oklch(0.95 0.024 270.343);
+	--color-primary-200: oklch(0.847 0.074 271.188);
+	--color-primary-300: oklch(0.741 0.13 272.232);
+	--color-primary-400: oklch(0.634 0.193 271.595);
+	--color-primary-500: oklch(0.536 0.252 268.66);
+	--color-primary: oklch(0.467 0.296 264.886);
+	--color-primary-700: oklch(0.397 0.26 264.877);
+	--color-primary-800: oklch(0.331 0.221 264.833);
+	--color-primary-900: oklch(0.26 0.178 264.428);
+	--color-primary-950: oklch(0.192 0.13 266.64);
+
+	--color-dark-50: oklch(0.995 0.012 101.474);
+	--color-dark-100: oklch(0.986 0.025 97.107);
+	--color-dark-200: oklch(0.965 0.059 95.884);
+	--color-dark-300: oklch(0.938 0.089 92.952);
+	--color-dark-400: oklch(0.91 0.114 89.711);
+	--color-dark-500: oklch(0.88 0.136 86.375);
+	--color-dark: oklch(0.845 0.153 80.597);
+	--color-dark-700: oklch(0.71 0.137 75.734);
+	--color-dark-800: oklch(0.58 0.118 70.166);
+	--color-dark-900: oklch(0.449 0.097 65.209);
+	--color-dark-950: oklch(0.321 0.074 62.379);
+
+	--color-primaryBlack: oklch(0.116 0.054 267.087);
+	--color-primaryWhite: oklch(0.961 0.001 286.375);
+	--color-darkBlack: oklch(0.183 0.035 86.634);
+	--color-darkWhite: oklch(0.962 0.001 17.178);
+
+	--color-success: oklch(0.704 0.142 167.084);
+	--color-warning: oklch(0.558 0.154 47.186);
+	--color-error: oklch(0.564 0.223 28.46);
+	--color-info: oklch(0.482 0.14 261.518);
+
+	--color-extend0: oklch(0.703 0.149 235.059);
+	--color-Twitter: oklch(0.703 0.149 235.059);
+	--color-extend1: oklch(0.702 0.194 38.137);
+	--color-Svelte: oklch(0.702 0.194 38.137);
+	--color-extend2: oklch(0.482 0.107 161.212);
+	--color-Starbucks: oklch(0.482 0.107 161.212);
+
+	--color-black: oklch(0 0 0);
+	--color-white: oklch(1 0 0);
+	--color-gray-50: oklch(0.961 0 0);
+	--color-gray-100: oklch(0.925 0 0);
+	--color-gray-200: oklch(0.845 0 0);
+	--color-gray-300: oklch(0.767 0 0);
+	--color-gray-400: oklch(0.683 0 0);
+	--color-gray-500: oklch(0.6 0 0);
+	--color-gray-600: oklch(0.51 0 0);
+	--color-gray-700: oklch(0.42 0 0);
+	--color-gray-800: oklch(0.321 0 0);
+	--color-gray-900: oklch(0.218 0 0);
+	--color-gray-950: oklch(0.159 0 0);
+	--color-transparent: transparent;
+}
+
+@source "../node_modules/stdf/dist/**/*.svelte";
+
+html {
+	-webkit-tap-highlight-color: transparent;
+}

packages/create-stdf/templates/vst/src/data/nintendo.ts

@@ -0,0 +1,59 @@
+import type { ThemeProps } from 'stdf/theme';
+
+const Nintendo: ThemeProps = {
+	name: 'Nintendo',
+	color: {
+		primary: {
+			50: 'oklch(0.98 0.01 25.073)', // #FFF6F5 hsl(6, 100%, 98%)
+			100: 'oklch(0.953 0.023 24.126)', // #FFEAE8 hsl(5, 100%, 96%)
+			200: 'oklch(0.845 0.076 21.796)', // #FAB9B6 hsl(3, 87%, 85%)
+			300: 'oklch(0.745 0.133 21.872)', // #F58886 hsl(1, 85%, 74%)
+			400: 'oklch(0.662 0.188 22.749)', // #F0575A hsl(359, 84%, 64%)
+			500: 'oklch(0.609 0.224 25.256)', // #EB2B34 hsl(357, 83%, 55%)
+			default: 'oklch(0.581 0.238 27.862)', // #E60012 hsl(355, 100%, 45%)
+			700: 'oklch(0.508 0.207 26.549)', // #C00016 hsl(353, 100%, 38%)
+			800: 'oklch(0.43 0.174 24.608)', // #990017 hsl(351, 100%, 30%)
+			900: 'oklch(0.351 0.141 21.971)', // #730015 hsl(349, 100%, 23%)
+			950: 'oklch(0.266 0.107 17.45)' // #4D0011 hsl(347, 100%, 15%)
+		},
+		dark: {
+			50: 'oklch(0.992 0.011 189.833)', // #F5FFFE hsl(174, 100%, 98%)
+			100: 'oklch(0.983 0.024 193.6)', // #E8FFFE hsl(177, 100%, 96%)
+			200: 'oklch(0.938 0.067 196.074)', // #B6F9F9 hsl(180, 85%, 85%)
+			300: 'oklch(0.893 0.099 198.69)', // #85F0F4 hsl(182, 84%, 74%)
+			400: 'oklch(0.847 0.12 201.806)', // #57E4EE hsl(184, 82%, 64%)
+			500: 'oklch(0.803 0.131 206.757)', // #2AD6E9 hsl(186, 81%, 54%)
+			default: 'oklch(0.752 0.133 215.123)', // #00C3E3 hsl(189, 100%, 45%)
+			700: 'oklch(0.646 0.116 218.359)', // #009EBD hsl(190, 100%, 37%)
+			800: 'oklch(0.535 0.1 223.819)', // #007998 hsl(192, 100%, 30%)
+			900: 'oklch(0.426 0.083 227.589)', // #005772 hsl(194, 100%, 22%)
+			950: 'oklch(0.319 0.064 230.58)' // #00384D hsl(196, 100%, 15%)
+		},
+		primaryBlack: 'oklch(0.139 0.05 18.003)', // #190103 hsl(355, 95%, 5%)
+		primaryWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(355, 5%, 95%)
+		darkBlack: 'oklch(0.184 0.03 206.812)', // #011619 hsl(188, 95%, 5%)
+		darkWhite: 'oklch(0.963 0.001 197.138)', // #F2F3F3 hsl(188, 5%, 95%)
+		functional: {
+			success: 'oklch(0.669 0.214 144.385)', // #00b42a hsl(134, 100%, 35%)
+			warning: 'oklch(0.865 0.176 95.103)', // #f7d00c hsl(50, 94%, 51%)
+			error: 'oklch(0.642 0.218 25.88)', // #f53f3f hsl(0, 90%, 60%)
+			info: 'oklch(0.549 0.249 263.048)' // #165dff hsl(222, 100%, 54%)
+		},
+		extend: [
+			{
+				color: 'oklch(0.492 0.217 261.351)', // #0052d9 hsl(217, 100%, 43%)
+				alias: 'Tencent'
+			},
+			{
+				color: 'oklch(0.651 0.212 142.608)', // #1aad19 hsl(120, 75%, 39%)
+				alias: 'WeChat'
+			},
+			{
+				color: 'oklch(0.692 0.181 46.213)', // #f37021 hsl(23, 90%, 54%)
+				alias: 'Hermès'
+			}
+		]
+	}
+};
+
+export default Nintendo;

packages/create-stdf/templates/vst/src/main.js

@@ -0,0 +1,9 @@
+import { mount } from 'svelte'
+import './app.css'
+import App from './App.svelte'
+
+const app = mount(App, {
+  target: document.getElementById('app'),
+})
+
+export default app

packages/create-stdf/templates/vst/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

packages/create-stdf/templates/vst/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

packages/create-stdf/templates/vst/vite.config.js

@@ -0,0 +1,5 @@
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({ plugins: [svelte(), tailwindcss()] });

packages/create-stdf/templates/vstt/README.md

@@ -0,0 +1,21 @@
+# Vite & Svelte & Tailwind & TypeScript & STDF
+
+This template should help get you started developing with Svelte & Tailwind & TypeScript & STDF in Vite.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) + [TypeScript](https://typescriptlang.org) + [STDF](https://stdf.design) .
+
+- [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [Tailwind](https://www.jetbrains.com/help/webstorm/tailwind-css.html) + [TypeScript](https://typescriptlang.org) + [STDF](https://stdf.design) .
+
+## Install and run project
+
+```bash
+npm i
+
+npm run dev
+```
+
+## More Info
+
+For more information about quickly create a new project, see the STDF [Quick start](https://stdf.design/guide) guide.

packages/create-stdf/templates/vstt/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/stdf.svg" media="(prefers-color-scheme: light)" />
+		<link rel="icon" type="image/svg+xml" href="/stdf_dark.svg" media="(prefers-color-scheme: dark)" />
+		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+		<title>Vite & Svelte & Tailwind & TypeScript & STDF</title>
+	</head>
+	<body class="bg-primaryWhite dark:bg-darkBlack text-black dark:text-white">
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>

packages/create-stdf/templates/vstt/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "vstt",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+	},
+	"devDependencies": {
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/vite": "^4.1.8",
+		"@tsconfig/svelte": "^5.0.4",
+		"stdf": "^1.1.1",
+		"svelte": "^5.28.1",
+		"svelte-check": "^4.1.6",
+		"tailwindcss": "^4.1.8",
+		"typescript": "~5.8.3",
+		"vite": "^6.3.5"
+	}
+}

packages/create-stdf/templates/vstt/public/stdf.svg

@@ -0,0 +1,4 @@
+<svg width="90" height="80" viewBox="0 0 90 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z" fill="#0B24FB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 30V0L0 50H20V80L40 30H20Z" fill="#FFC043"/>
+</svg>

packages/create-stdf/templates/vstt/public/stdf_dark.svg

@@ -0,0 +1,4 @@
+<svg width="90" height="80" viewBox="0 0 90 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z" fill="#FFC043"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 30V0L0 50H20V80L40 30H20Z" fill="#0B24FB"/>
+</svg>

packages/create-stdf/templates/vstt/public/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

packages/create-stdf/templates/vstt/public/tailwindcss.svg

@@ -0,0 +1,7 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<title>Tailwind CSS</title>
+	<path
+		fill="#00bcff"
+		d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
+	/>
+</svg>

packages/create-stdf/templates/vstt/public/typescript.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_typescript_official</title><rect x="2" y="2" width="28" height="28" rx="1.312" style="fill:#3178c6"/><path d="M18.245,23.759v3.068a6.492,6.492,0,0,0,1.764.575,11.56,11.56,0,0,0,2.146.192,9.968,9.968,0,0,0,2.088-.211,5.11,5.11,0,0,0,1.735-.7,3.542,3.542,0,0,0,1.181-1.266,4.469,4.469,0,0,0,.186-3.394,3.409,3.409,0,0,0-.717-1.117,5.236,5.236,0,0,0-1.123-.877,12.027,12.027,0,0,0-1.477-.734q-.6-.249-1.08-.484a5.5,5.5,0,0,1-.813-.479,2.089,2.089,0,0,1-.516-.518,1.091,1.091,0,0,1-.181-.618,1.039,1.039,0,0,1,.162-.571,1.4,1.4,0,0,1,.459-.436,2.439,2.439,0,0,1,.726-.283,4.211,4.211,0,0,1,.956-.1,5.942,5.942,0,0,1,.808.058,6.292,6.292,0,0,1,.856.177,5.994,5.994,0,0,1,.836.3,4.657,4.657,0,0,1,.751.422V13.9a7.509,7.509,0,0,0-1.525-.4,12.426,12.426,0,0,0-1.9-.129,8.767,8.767,0,0,0-2.064.235,5.239,5.239,0,0,0-1.716.733,3.655,3.655,0,0,0-1.171,1.271,3.731,3.731,0,0,0-.431,1.845,3.588,3.588,0,0,0,.789,2.34,6,6,0,0,0,2.395,1.639q.63.26,1.175.509a6.458,6.458,0,0,1,.942.517,2.463,2.463,0,0,1,.626.585,1.2,1.2,0,0,1,.23.719,1.1,1.1,0,0,1-.144.552,1.269,1.269,0,0,1-.435.441,2.381,2.381,0,0,1-.726.292,4.377,4.377,0,0,1-1.018.105,5.773,5.773,0,0,1-1.969-.35A5.874,5.874,0,0,1,18.245,23.759Zm-5.154-7.638h4V13.594H5.938v2.527H9.92V27.375h3.171Z" style="fill:#ffffff;fill-rule:evenodd"/></svg>

packages/create-stdf/templates/vstt/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

packages/create-stdf/templates/vstt/src/App.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import { Button, Cell, Icon, Calendar } from 'stdf';
+	import { STDFTheme, switchTheme, darkMode } from 'stdf/theme';
+	import NintendoTheme from './data/nintendo';
+	import { en_US, zh_CN } from 'stdf/lang';
+	import Counter from './Counter.svelte';
+
+	//解决 ios 不支持按钮:active 伪类
+	// Solve the problem that ios does not support the button: active pseudo class
+	document.body.addEventListener('touchstart', function () {
+		//...空函数即可
+		// ... Empty function is OK
+	});
+
+	//切换亮暗模式 (toggle light or dark mode)
+	let mode = $state(sessionStorage.getItem('mode') === 'dark' ? 'dark' : 'light');
+
+	$effect(() => {
+		if (mode === 'dark') {
+			darkMode(true);
+		} else {
+			darkMode(false);
+		}
+	});
+	const toggleModeFun = () => {
+		if (mode === 'dark') {
+			// 切换到 (light switch to light)
+			mode = 'light';
+			darkMode(false);
+			sessionStorage.setItem('mode', 'light');
+		} else {
+			// 切换到 (dark switch to dark)
+			mode = 'dark';
+			darkMode(true);
+			sessionStorage.setItem('mode', 'dark');
+		}
+	};
+
+	// 设置语言 (setting language)
+	let lang = $state(localStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN');
+	setContext('STDF_lang', localStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
+	const toggleLangFun = () => {
+		lang = lang === 'zh_CN' ? 'en_US' : 'zh_CN';
+		localStorage.setItem('lang', lang);
+		window.location.reload();
+	};
+
+	// 进度条 (percent)
+	let percent = $state(20);
+	const reduceFunc = () => {
+		if (percent > 0) {
+			percent -= 10;
+		}
+	};
+	const increaseFunc = () => {
+		if (percent < 100) {
+			percent += 10;
+		}
+	};
+
+	// 日历(calendar)
+	let visible = $state(false);
+
+	// 主题(theme)
+	let theme = $state('STDF');
+	const toggleThemeFun = () => {
+		if (theme === 'STDF') {
+			theme = 'Nintendo';
+			switchTheme(NintendoTheme);
+		} else {
+			theme = 'STDF';
+			switchTheme(STDFTheme);
+		}
+	};
+</script>
+
+<div class="flex items-center justify-center gap-2 pt-10 text-center">
+	<a class="flex w-10 flex-col items-center" href="https://vite.dev" target="_blank" rel="noreferrer">
+		<img src="/vite.svg" alt="Vite Logo" />
+	</a>
+	<a class="flex w-10 flex-col items-center" href="https://svelte.dev" target="_blank" rel="noreferrer">
+		<img src="/svelte.svg" alt="Svelte Logo" />
+	</a>
+	<a class="flex w-10 flex-col items-center" href="https://tailwindcss.com" target="_blank" rel="noreferrer">
+		<img src="/tailwindcss.svg" alt="Tailwind Logo" />
+	</a>
+	<a class="flex w-10 flex-col items-center" href="https://typescriptlang.org" target="_blank" rel="noreferrer">
+		<img src="/typescript.svg" alt="Typescript Logo" />
+	</a>
+	<a class="flex w-8 flex-col items-center" href="https://stdf.design" target="_blank" rel="noreferrer" aria-label="STDF Logo">
+		<svg viewBox="0 0 90 80" fill="currentColor">
+			<path
+				class="text-primary dark:text-dark"
+				d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
+			/>
+			<path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
+		</svg>
+	</a>
+</div>
+<div class="my-6 text-center text-xs">
+	{#if lang === 'zh_CN'}
+		<p>这是 Vite & Svelte & Tailwind & TypeScript & STDF 构建的模板</p>
+		<p class="mt-2">点击上方 LOGO 了解更多</p>
+	{:else}
+		<p>This is a template using Vite & Svelte & TailwindCSS & TypeScript & STDF</p>
+		<p class="mt-2">Click the logo above to learn more</p>
+	{/if}
+</div>
+<div class="my-6">
+	<Cell
+		title={lang === 'zh_CN' ? '暗模式' : 'Dark mode'}
+		right={{ type: 'switch', switch: { active: mode === 'dark' } }}
+		onclick={toggleModeFun}
+	/>
+</div>
+<div class="mt-8">
+	<Counter bind:percent />
+</div>
+<div class="mb-8">
+	<Button heightIn="0" group fill="lineTheme">
+		<div class="flex w-full">
+			<button class="border-primary dark:border-dark flex-1 border-r py-2 active:opacity-80" onclick={reduceFunc}>-10</button>
+			<button class="border-primary dark:border-dark flex-1 border-r py-2 active:opacity-80" onclick={increaseFunc}>+10</button>
+			<button class="flex-1 py-2 active:opacity-80" onclick={() => (percent = 20)}>
+				{lang === 'zh_CN' ? '重置' : 'Reset'}
+			</button>
+		</div>
+	</Button>
+</div>
+<div class="my-6">
+	<Button fill="lineTheme" onclick={() => (visible = true)}>{lang === 'zh_CN' ? '日历' : 'Calendar'}</Button>
+</div>
+<Calendar bind:visible />
+<div class="my-6">
+	<Button onclick={toggleLangFun}>{lang === 'zh_CN' ? '切换语言' : 'Toggle language'}</Button>
+	<Button fill="lineTheme" onclick={toggleThemeFun}>{lang === 'zh_CN' ? '切换主题' : 'Toggle theme'}</Button>
+</div>

packages/create-stdf/templates/vstt/src/Counter.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Progress } from 'stdf';
+
+	let { percent = $bindable(20) } = $props();
+</script>
+
+<div class="p-4">
+	<Progress {percent} />
+</div>

packages/create-stdf/templates/vstt/src/app.css

@@ -0,0 +1,67 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+	--color-primary-50: oklch(0.979 0.01 267.36);
+	--color-primary-100: oklch(0.95 0.024 270.343);
+	--color-primary-200: oklch(0.847 0.074 271.188);
+	--color-primary-300: oklch(0.741 0.13 272.232);
+	--color-primary-400: oklch(0.634 0.193 271.595);
+	--color-primary-500: oklch(0.536 0.252 268.66);
+	--color-primary: oklch(0.467 0.296 264.886);
+	--color-primary-700: oklch(0.397 0.26 264.877);
+	--color-primary-800: oklch(0.331 0.221 264.833);
+	--color-primary-900: oklch(0.26 0.178 264.428);
+	--color-primary-950: oklch(0.192 0.13 266.64);
+
+	--color-dark-50: oklch(0.995 0.012 101.474);
+	--color-dark-100: oklch(0.986 0.025 97.107);
+	--color-dark-200: oklch(0.965 0.059 95.884);
+	--color-dark-300: oklch(0.938 0.089 92.952);
+	--color-dark-400: oklch(0.91 0.114 89.711);
+	--color-dark-500: oklch(0.88 0.136 86.375);
+	--color-dark: oklch(0.845 0.153 80.597);
+	--color-dark-700: oklch(0.71 0.137 75.734);
+	--color-dark-800: oklch(0.58 0.118 70.166);
+	--color-dark-900: oklch(0.449 0.097 65.209);
+	--color-dark-950: oklch(0.321 0.074 62.379);
+
+	--color-primaryBlack: oklch(0.116 0.054 267.087);
+	--color-primaryWhite: oklch(0.961 0.001 286.375);
+	--color-darkBlack: oklch(0.183 0.035 86.634);
+	--color-darkWhite: oklch(0.962 0.001 17.178);
+
+	--color-success: oklch(0.704 0.142 167.084);
+	--color-warning: oklch(0.558 0.154 47.186);
+	--color-error: oklch(0.564 0.223 28.46);
+	--color-info: oklch(0.482 0.14 261.518);
+
+	--color-extend0: oklch(0.703 0.149 235.059);
+	--color-Twitter: oklch(0.703 0.149 235.059);
+	--color-extend1: oklch(0.702 0.194 38.137);
+	--color-Svelte: oklch(0.702 0.194 38.137);
+	--color-extend2: oklch(0.482 0.107 161.212);
+	--color-Starbucks: oklch(0.482 0.107 161.212);
+
+	--color-black: oklch(0 0 0);
+	--color-white: oklch(1 0 0);
+	--color-gray-50: oklch(0.961 0 0);
+	--color-gray-100: oklch(0.925 0 0);
+	--color-gray-200: oklch(0.845 0 0);
+	--color-gray-300: oklch(0.767 0 0);
+	--color-gray-400: oklch(0.683 0 0);
+	--color-gray-500: oklch(0.6 0 0);
+	--color-gray-600: oklch(0.51 0 0);
+	--color-gray-700: oklch(0.42 0 0);
+	--color-gray-800: oklch(0.321 0 0);
+	--color-gray-900: oklch(0.218 0 0);
+	--color-gray-950: oklch(0.159 0 0);
+	--color-transparent: transparent;
+}
+
+@source "../node_modules/stdf/dist/**/*.svelte";
+
+html {
+	-webkit-tap-highlight-color: transparent;
+}

packages/create-stdf/templates/vstt/src/data/nintendo.ts

@@ -0,0 +1,59 @@
+import type { ThemeProps } from 'stdf/theme';
+
+const Nintendo: ThemeProps = {
+	name: 'Nintendo',
+	color: {
+		primary: {
+			50: 'oklch(0.98 0.01 25.073)', // #FFF6F5 hsl(6, 100%, 98%)
+			100: 'oklch(0.953 0.023 24.126)', // #FFEAE8 hsl(5, 100%, 96%)
+			200: 'oklch(0.845 0.076 21.796)', // #FAB9B6 hsl(3, 87%, 85%)
+			300: 'oklch(0.745 0.133 21.872)', // #F58886 hsl(1, 85%, 74%)
+			400: 'oklch(0.662 0.188 22.749)', // #F0575A hsl(359, 84%, 64%)
+			500: 'oklch(0.609 0.224 25.256)', // #EB2B34 hsl(357, 83%, 55%)
+			default: 'oklch(0.581 0.238 27.862)', // #E60012 hsl(355, 100%, 45%)
+			700: 'oklch(0.508 0.207 26.549)', // #C00016 hsl(353, 100%, 38%)
+			800: 'oklch(0.43 0.174 24.608)', // #990017 hsl(351, 100%, 30%)
+			900: 'oklch(0.351 0.141 21.971)', // #730015 hsl(349, 100%, 23%)
+			950: 'oklch(0.266 0.107 17.45)' // #4D0011 hsl(347, 100%, 15%)
+		},
+		dark: {
+			50: 'oklch(0.992 0.011 189.833)', // #F5FFFE hsl(174, 100%, 98%)
+			100: 'oklch(0.983 0.024 193.6)', // #E8FFFE hsl(177, 100%, 96%)
+			200: 'oklch(0.938 0.067 196.074)', // #B6F9F9 hsl(180, 85%, 85%)
+			300: 'oklch(0.893 0.099 198.69)', // #85F0F4 hsl(182, 84%, 74%)
+			400: 'oklch(0.847 0.12 201.806)', // #57E4EE hsl(184, 82%, 64%)
+			500: 'oklch(0.803 0.131 206.757)', // #2AD6E9 hsl(186, 81%, 54%)
+			default: 'oklch(0.752 0.133 215.123)', // #00C3E3 hsl(189, 100%, 45%)
+			700: 'oklch(0.646 0.116 218.359)', // #009EBD hsl(190, 100%, 37%)
+			800: 'oklch(0.535 0.1 223.819)', // #007998 hsl(192, 100%, 30%)
+			900: 'oklch(0.426 0.083 227.589)', // #005772 hsl(194, 100%, 22%)
+			950: 'oklch(0.319 0.064 230.58)' // #00384D hsl(196, 100%, 15%)
+		},
+		primaryBlack: 'oklch(0.139 0.05 18.003)', // #190103 hsl(355, 95%, 5%)
+		primaryWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(355, 5%, 95%)
+		darkBlack: 'oklch(0.184 0.03 206.812)', // #011619 hsl(188, 95%, 5%)
+		darkWhite: 'oklch(0.963 0.001 197.138)', // #F2F3F3 hsl(188, 5%, 95%)
+		functional: {
+			success: 'oklch(0.669 0.214 144.385)', // #00b42a hsl(134, 100%, 35%)
+			warning: 'oklch(0.865 0.176 95.103)', // #f7d00c hsl(50, 94%, 51%)
+			error: 'oklch(0.642 0.218 25.88)', // #f53f3f hsl(0, 90%, 60%)
+			info: 'oklch(0.549 0.249 263.048)' // #165dff hsl(222, 100%, 54%)
+		},
+		extend: [
+			{
+				color: 'oklch(0.492 0.217 261.351)', // #0052d9 hsl(217, 100%, 43%)
+				alias: 'Tencent'
+			},
+			{
+				color: 'oklch(0.651 0.212 142.608)', // #1aad19 hsl(120, 75%, 39%)
+				alias: 'WeChat'
+			},
+			{
+				color: 'oklch(0.692 0.181 46.213)', // #f37021 hsl(23, 90%, 54%)
+				alias: 'Hermès'
+			}
+		]
+	}
+};
+
+export default Nintendo;

packages/create-stdf/templates/vstt/src/main.ts

@@ -0,0 +1,9 @@
+import { mount } from 'svelte'
+import './app.css'
+import App from './App.svelte'
+
+const app = mount(App, {
+  target: document.getElementById('app')!,
+})
+
+export default app

packages/create-stdf/templates/vstt/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

packages/create-stdf/templates/vstt/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

packages/create-stdf/templates/vstt/tsconfig.app.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force"
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+}

packages/create-stdf/templates/vstt/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

packages/create-stdf/templates/vstt/tsconfig.node.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": [
+      "ES2023"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "noUncheckedIndexedAccess": true
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}

packages/create-stdf/templates/vstt/vite.config.ts

@@ -0,0 +1,5 @@
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({ plugins: [svelte(), tailwindcss()] });