[create]发布 0.3.0

packages/create-stdf/README_CN.md

@@ -1,141 +0,0 @@
-[English](https://github.com/any-tdf/stdf/blob/main/packages/create-stdf/README.md)
-
-> v0.2.2 之后支持选择图标使用方式，支持 stdf-icon 或 iconify。
-
-# create-stdf
-
-一个用于创建新的 [STDF](https://stdf.design) 项目的命令行工具。只需运行以下命令...
-
-<!-- :::code-groups -->
-<!-- pnpm -->
-```sh
-pnpm create stdf@latest
-```
-<!-- :: -->
-<!-- npm -->
-```sh
-npm create stdf@latest
-# 或
-npm init stdf@latest
-# 或
-npx create-stdf@latest
-```
-<!-- :: -->
-<!-- bun -->
-```sh
-bun create stdf@latest
-```
-<!-- :: -->
-<!-- yarn -->
-```sh
-yarn create stdf@latest
-```
-<!-- ::: -->
-
-...然后按照提示进行操作。
-
-你也可以通过额外的命令行选项直接指定项目名称与默认参数。例如，如果要使用 **SvelteKit & Tailwind & TypeScript & STDF** 模板创建一个名为 my-app 的新项目，请运行：
-
-<!-- :::code-groups -->
-<!-- pnpm -->
-```sh
-pnpm create stdf@latest my-app
-```
-<!-- :: -->
-<!-- npm -->
-```sh
-npm create stdf@latest my-app
-```
-<!-- :: -->
-<!-- bun -->
-```sh
-bun create stdf@latest my-app
-```
-<!-- :: -->
-<!-- yarn -->
-```sh
-yarn create stdf@latest my-app
-```
-<!-- ::: -->
-
-提示语言为简体中文，使用 **SvelteKit & Tailwind & STDF** 模板，使用 Iconify 管理图标，创建一个名为 my-app 的新项目，请运行：
-
-<!-- :::code-groups -->
-<!-- pnpm -->
-```sh
-pnpm create stdf@latest my-app --template skt --language zh_CN --icon-usage iconify
-# 或
-pnpm create stdf@latest my-app --t skt --l zh_CN --i iconify
-```
-<!-- :: -->
-<!-- npm -->
-```sh
-npm create stdf@latest my-app --template skt --language zh_CN --icon-usage iconify
-# 或
-npm create stdf@latest my-app --t skt --l zh_CN --i iconify
-```
-<!-- :: -->
-<!-- bun -->
-```sh
-bun create stdf@latest my-app --template skt --language zh_CN --icon-usage iconify
-# 或
-bun create stdf@latest my-app --t skt --l zh_CN --i iconify
-```
-<!-- :: -->
-<!-- yarn -->
-```sh
-yarn create stdf@latest my-app --template skt --language zh_CN --icon-usage iconify
-# 或
-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 | 图标使用方式。           |
-
-# 模板预设
-
-| 简写 | 模板                                  | 描述     |
-| ---- | ------------------------------------- | -------- |
-| 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                | 暂未适配 |
-
-# 语言预设
-
-| 简写  | 语言         |
-| ----- | ------------ |
-| en_US | 英语（美式） |
-| zh_CN | 中文（简体） |
-| zh_TW | 中文（繁体） |
-| ja_JP | 日语         |
-| ko_KR | 韩语         |
-| es_ES | 西班牙语     |
-| ru_RU | 俄语         |
-| fr_FR | 法语         |
-| de_DE | 德语         |
-| it_IT | 意大利语     |
-
-# 图标使用方式预设
-
-| 简写      | 描述                                                       |
-| --------- | ---------------------------------------------------------- |
-| stdf-icon | 使用 rollup-plugin-stdf-icon 插件管理图标。                |
-| iconify   | 使用 iconify 插件管理图标。                                |
-| both      | 同时使用 rollup-plugin-stdf-icon 和 iconify 插件管理图标。 |
-| none      | 不使用任何工具管理图标。                                   |
-
-# 许可证
-
-本项目基于 [MIT 许可证](https://github.com/any-tdf/stdf/blob/main/LICENSE)。

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

@@ -1,13 +0,0 @@
-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 +0,0 @@
-export default defineConfig({
-	plugins: [
-		svelte(),
-		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: 'public/symbols' },
-			{ inFile: 'src/lib/svgs/IconPark', outFile: 'public/symbols' },
-			{ inFile: 'src/lib/svgs/Remix', outFile: 'public/symbols' }
-		])
-	]
-});

packages/create-stdf/src/index.js

@@ -1,458 +0,0 @@
-#!/usr/bin/env node
-
-import fs from 'fs-extra';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import * as p from '@clack/prompts';
-import { bold, cyan, grey, red, blue } from 'kleur/colors';
-import minimist from 'minimist';
-import pacote from 'pacote';
-
-import * as langAll from './lang';
-
-// 获取最新版本号
-// Get the latest version number
-const getLatestVersion = async packageName => {
-	const manifest = await pacote.manifest(`${packageName}@latest`);
-	return manifest.version;
-};
-
-// 获取 create 当前版本
-// Get create-stdf current version
-const { version } = JSON.parse(fs.readFileSync(fileURLToPath(new URL('../package.json', import.meta.url)), 'utf-8'));
-
-// 获取 create-stdf 的最新版本号
-// Get the latest version number of create-stdf
-const createStdfV = await getLatestVersion('create-stdf');
-
-// 显示版本号
-// Display version number
-console.log(`
-${grey(`create-stdf@${version}`)}
-`);
-
-if (version != createStdfV) {
-	console.log(
-		red(`😢 Recommended to use the latest version: ${createStdfV}
-		`)
-	);
-}
-
-const spinner = p.spinner();
-
-p.intro('Welcome to use STDF!');
-
-let lang = langAll.en_US;
-
-// 获取命令行参数
-// Get command line parameters
-const argv = minimist(process.argv.slice(2));
-
-// 获取项目名称和模板名称和语言
-// Get project name and template name
-const argvProjectName = argv._[0];
-const argvTemplate = argv.template || argv.t;
-const argvLanguage = argv.language || argv.l;
-const argvIconUsage = argv.iconUsage || argv.i;
-
-// 语言列表
-// Language list
-const languages = [];
-
-// 循环 langAll 对象，将语言列表中的语言名字替换为对应的语言名字，且按照 sort 排序
-// Loop through the langAll object and replace the language name in the language list with the corresponding language name, and sort by sort
-for (const key in langAll) {
-	languages.push({ value: key, label: langAll[key].name, sort: langAll[key].sort });
-}
-
-// 按照 sort 排序
-// Sort by sort
-languages.sort((a, b) => a.sort - b.sort);
-
-// 如果命令行参数中有语言，且语言列表中有该语言，使用该语言，否则使用英语
-// If there is a language in the command line parameters and the language list has the language, use the language, otherwise use English
-lang = argvLanguage && languages.find(item => item.value === argvLanguage) ? langAll[argvLanguage] : langAll.en_US;
-
-// 模板列表
-// Template list
-const templateOptions = [
-	{ 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 },
-];
-
-// 包管理工具列表
-// Package management tool list
-const packageManagerOptions = [
-	{ value: 'npm', label: 'NPM', install: 'npm i', dev: 'npm run dev' },
-	{ value: 'bun', label: 'Bun', install: 'bun i', dev: 'bun dev' },
-	{ value: 'pnpm', label: 'PNPM', install: 'pnpm i', dev: 'pnpm dev' },
-	{ value: 'yarn', label: 'Yarn', install: 'yarn', dev: 'yarn run dev' },
-];
-
-// 图标使用方式列表
-// Icon usage method list
-const iconUsageOptions = [
-	{ value: 'stdf-icon', label: 'rollup-plugin-stdf-icon' },
-	{ value: 'iconify', label: 'iconify' },
-	{ value: 'both', label: 'rollup-plugin-stdf-icon & iconify' },
-	{ value: 'none', label: 'none' },
-];
-
-// 如果命令行参数中有项目名称
-// If there is project name in command line parameters
-if (argvProjectName) {
-	let itemTemplate = null;
-	if (argvTemplate) {
-		itemTemplate = templateOptions.find(item => item.value === argvTemplate);
-		if (!itemTemplate) {
-			p.intro(red(lang.pectn + ' (' + templateOptions.map(item => item.value).join(', ') + ')'));
-			process.exit(0);
-		}
-		if (!itemTemplate.finish) {
-			p.intro(red(itemTemplate.label + ' ' + lang.hnay));
-			process.exit(0);
-		}
-	} else {
-		itemTemplate = templateOptions[0];
-	}
-	let itemIconUsage = null;
-	if (argvIconUsage) {
-		itemIconUsage = iconUsageOptions.find(item => item.value === argvIconUsage);
-		if (!itemIconUsage) {
-			p.intro(red(lang.pic + ' (' + iconUsageOptions.map(item => item.value).join(', ') + ')'));
-			process.exit(0);
-		}
-	} else {
-		itemIconUsage = iconUsageOptions[0];
-	}
-	// 判断是否已存在，提示"项目名称已存在"
-	// Determine whether it already exists, prompt "Project name already exists"
-	if (fs.existsSync(argvProjectName)) {
-		p.intro(red('🚫 ' + argvProjectName + ' ' + lang.pane));
-		process.exit(0);
-	}
-	createFunc(argvProjectName, itemTemplate, itemIconUsage, packageManagerOptions[0]);
-} else {
-	(async () => {
-		// 选择一种语言
-		// Select a language
-		const languageType = await p.select({
-			message: bold('Please select your preferred language'),
-			options: languages,
-		});
-		if (p.isCancel(languageType)) {
-			p.cancel(red('⛔ ') + lang.oc);
-			process.exit(0);
-		}
-		lang = langAll[languageType];
-
-		//  选择一个模板
-		// Select a template
-		let template = await p.select({
-			message: bold(lang.psat),
-			options: templateOptions.map(item => ({
-				...item,
-				label: item.finish ? item.label : `(${lang.hnay}) ${item.label}`,
-			})),
-		});
-
-		if (p.isCancel(template)) {
-			p.cancel(red('⛔ ') + lang.oc);
-			process.exit(0);
-		}
-
-		// 直到选择的 template 所在项 的 finish 为 true 为止，否则一直重新选择
-		// Until the finish of the selected template is true, otherwise keep reselecting
-		while (!templateOptions.find(item => item.value === template)?.finish) {
-			if (p.isCancel(template)) {
-				p.cancel(red('⛔ ') + lang.oc);
-				process.exit(0);
-			}
-
-			p.intro(red(templateOptions.find(item => item.value === template).label + ' ' + lang.hnay + ' ' + lang.pca));
-			template = await p.select({
-				message: bold(lang.psat),
-				options: templateOptions.map(item => ({
-					...item,
-					label: item.finish ? item.label : `(${lang.hnay}) ${item.label}`,
-				})),
-			});
-		}
-
-		// 选择图标使用方式
-		// Select icon usage method
-		const iconUsage = await p.select({
-			message: bold(lang.psai),
-			options: iconUsageOptions,
-		});
-
-		if (p.isCancel(iconUsage)) {
-			p.cancel(red('⛔ ') + lang.oc);
-			process.exit(0);
-		}
-
-		// 输入项目名称
-		// Enter the project name
-		const projectName = await p.text({
-			message: bold(lang.pn),
-			placeholder: 'stdf-project',
-			validate: value => {
-				if (!value) {
-					// 判断是否为空，提示"项目名称不能为空"
-					// Determine whether it is empty, prompt "Project name cannot be empty"
-					return lang.pncbne;
-				}
-				if (fs.existsSync(value)) {
-					// 判断是否已存在，提示"项目名称已存在"
-					// Determine whether it already exists, prompt "Project name already exists"
-					return '🚫 ' + value + ' ' + lang.pane;
-				}
-			},
-		});
-
-		if (p.isCancel(projectName)) {
-			p.cancel(red('⛔ ') + lang.oc);
-			process.exit(0);
-		}
-
-		// 使用什么包管理工具 npm / pnpm / yarn / bun / deno
-		// What package management tool to use npm / pnpm / yarn / bun / deno
-		const packageManager = await p.select({
-			message: bold(lang.pm),
-			options: packageManagerOptions,
-		});
-
-		if (p.isCancel(packageManager)) {
-			p.cancel(red('⛔ ') + lang.oc);
-			process.exit(0);
-		}
-
-		// 根据 template 的值，复制对应目录下的所有文件到当前目录
-		// According to the value of template, copy all files under the corresponding directory to the current directory
-		createFunc(
-			projectName,
-			templateOptions.find(i => i.value === template),
-			iconUsageOptions.find(i => i.value === iconUsage),
-			packageManagerOptions.find(i => i.value === packageManager)
-		);
-	})();
-}
-
-function createFunc(projectName, templateItem, iconUsageItem, packageManagerItem) {
-	// 如果 projectName 是数字，转为字符串
-	// If projectName is a number, convert it to a string
-	if (typeof projectName === 'number') {
-		projectName = projectName.toString();
-	}
-
-	// 项目目录
-	// Project directory
-	const projectDir = path.join(path.resolve(), projectName);
-
-	spinner.start('🚀 ' + lang.cfsing);
-
-	fs.mkdirSync(projectDir);
-
-	// 获取模板目录的绝对路径，考虑到 Windows 系统的兼容性，使用 path.join
-	// Get the absolute path of the template directory, considering the compatibility of the Windows system, use path.join
-	const templatePath = path.resolve(fileURLToPath(import.meta.url), '../..', `templates/${templateItem.template}`);
-
-	// 将 templatePath 目录下的所有文件复制到 projectDir 目录下
-	// Copy all files under the templatePath directory to the projectDir directory
-	fs.copy(templatePath, projectDir)
-		.then(async () => {
-			// 读取 package.json 文件
-			// Read the package.json file
-			const packageJson = JSON.parse(fs.readFileSync(`${projectDir}/package.json`, 'utf-8'));
-
-			// 将项目内的 package.json 中的 name 属性修改为 projectName
-			// Modify the name attribute in package.json in the project to projectName
-			packageJson.name = projectName;
-
-			// 获取 stdf 的最新版本号
-			// Get the latest version number of stdf
-			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');
-				const duo_iconsV = await getLatestVersion('@iconify-json/duo-icons');
-				const fluent_colorV = await getLatestVersion('@iconify-json/fluent-color');
-				packageJson.devDependencies['@iconify/tailwind4'] = `^${iconifyTailwind4V}`;
-				packageJson.devDependencies['@iconify-json/bitcoin-icons'] = `^${bitcoin_iconsV}`;
-				packageJson.devDependencies['@iconify-json/duo-icons'] = `^${duo_iconsV}`;
-				packageJson.devDependencies['@iconify-json/fluent-color'] = `^${fluent_colorV}`;
-				// 在 ${projectDir}/src/app.css 的第 4 行增加 @plugin "@iconify/tailwind4" {
-				// 	prefixes: duo-icons, bitcoin-icons, fluent-color;
-				// }
-				const appCss = fs.readFileSync(`${projectDir}/src/app.css`, 'utf-8');
-				const appCssLines = appCss.split('\n');
-				appCssLines.splice(
-					3,
-					0,
-					`
-@plugin "@iconify/tailwind4" {
-	prefixes: duo-icons, bitcoin-icons, fluent-color;
-}`
-				);
-				fs.writeFileSync(`${projectDir}/src/app.css`, appCssLines.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 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';`);
-
-				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
-			// If the value of iconUsageItem is iconify
-			if (iconUsageItem.value === 'iconify') {
-				await addIconifyFun();
-			}
-
-			// 如果 iconUsageItem 的值为 stdf-icon，则获取 rollup-plugin-stdf-icon 的最新版本号
-			// If the value of iconUsageItem is stdf-icon, get the latest version number of rollup-plugin-stdf-icon
-			if (iconUsageItem.value === 'stdf-icon') {
-				await addStdfIconFun();
-			}
-
-			// 如果 iconUsageItem 的值为 both，则同时调用 addIconifyFun 和 addStdfIconFun
-			// If the value of iconUsageItem is both, call addIconifyFun and addStdfIconFun
-			if (iconUsageItem.value === 'both') {
-				await addIconifyFun();
-				await addStdfIconFun();
-			}
-
-			// 将修改后的 packageJson 写入到项目内的 package.json 文件中
-			// Write the modified packageJson to the package.json file in the project
-			fs.writeFileSync(`${projectDir}/package.json`, JSON.stringify(packageJson, null, 4), 'utf-8');
-
-			spinner.stop();
-			p.outro(`🎉🎉🎉 ${projectName} - ${lang.pcsucc}`);
-
-			// 获得依赖的版本号
-			// get the version number of the dependency
-			const BaseVersions = {
-				svelte: packageJson.devDependencies.svelte.replace('^', ''),
-				stdf: packageJson.devDependencies.stdf.replace('^', ''),
-				// vite: packageJson.devDependencies.vite.replace('^', ''),
-				// '@sveltejs/kit': packageJson.devDependencies['@sveltejs/kit'].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 {
-				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 BaseVersions) {
-				versionsString += bold(key) + ': ' + cyan(BaseVersions[key]) + ' ';
-			}
-
-			// 显示版本号
-			// Display version number
-			console.log(`📦 ${versionsString}
-                `);
-
-			// 显示提示信息
-			// Display prompt information
-			console.log(
-				`👉 ${bold(lang.tgs)}
-    ${blue(`1. cd ${projectName}`)}
-    ${blue(`2. git init && git add -A && git commit -m "Initial commit"`)}
-    ${blue(`3. ${packageManagerItem.install}`)}
-    ${blue(`4. ${packageManagerItem.dev}`)}
-    `
-			);
-			// 提示配置主题色
-			// Prompt configuration theme color
-			console.log(`🎨 ${grey(isUno ? lang.pcyt_vu : lang.pcyt_vt)}`);
-		})
-		.catch(err => {
-			spinner.stop();
-			console.error(red(lang.cferror + '--' + err));
-		});
-}

packages/create-stdf/src/lang.js

@@ -1,229 +0,0 @@
-// 英语 english
-export const en_US = {
-	sort: 0,
-	name: 'English',
-	hnay: 'Has not adapted yet',
-	pn: 'Please enter the project name',
-	pncbne: 'Project name cannot be empty',
-	pane: 'Project name already exists, please change it!',
-	psat: 'Please select a template',
-	oc: 'Operation cancelled',
-	pca: 'Please choose again',
-	psai: 'Please select icon usage',
-	pm: 'Please select package manager',
-	cfsing: 'Creating file...',
-	pcsucc: 'Project created successfully!',
-	tgs: 'To get started:',
-	pcyt_vt: 'Tip: please configure Initial Color System in src/app.css, reference https://stdf.design/guide/theme',
-	pcyt_vu: 'Tip: please configure Initial Color System in src/app.css, reference https://stdf.design/guide/theme',
-	cferror: 'Failed to create file',
-	pectn: 'Please enter the correct template name!',
-	pic: 'Please enter the correct icon usage!',
-};
-
-// 简体中文 chinese
-export const zh_CN = {
-	sort: 1,
-	name: '简体中文',
-	hnay: '暂未适配',
-	pn: '请输入项目名称',
-	pncbne: '项目名称不能为空',
-	pane: '项目名称已存在，请换一个！',
-	psat: '请选择一个模板',
-	oc: '操作已取消',
-	pca: '请重新选择',
-	psai: '请选择图标使用方式',
-	pm: '请选择包管理工具',
-	cfsing: '正在创建文件...',
-	pcsucc: '项目创建成功！',
-	tgs: '开始：',
-	pcyt_vt: '提示：请到 src/app.css 配置初始主题色，参考 https://stdf.design/guide/theme',
-	pcyt_vu: '提示：请到 src/app.css 配置初始主题色，参考 https://stdf.design/guide/theme',
-	cferror: '创建文件失败',
-	pectn: '请输入正确的模板名称！',
-	pic: '请输入正确的图标使用方式！',
-};
-
-// 繁體中文 chinese traditional
-export const zh_TW = {
-	sort: 2,
-	name: '繁體中文',
-	hnay: '暫未適配',
-	pn: '請輸入項目名稱',
-	pncbne: '項目名稱不能為空',
-	pane: '項目名稱已存在，請換一個！',
-	psat: '請選擇一個模板',
-	oc: '操作已取消',
-	pca: '請重新選擇',
-	psai: '請選擇圖標使用方式',
-	pm: '請選擇包管理工具',
-	cfsing: '正在創建文件...',
-	pcsucc: '項目創建成功！',
-	tgs: '開始：',
-	pcyt_vt: '提示：請到 src/app.css 配置初始主題色，參考 https://stdf.design/guide/theme',
-	pcyt_vu: '提示：請到 src/app.css 配置初始主題色，參考 https://stdf.design/guide/theme',
-	cferror: '創建文件失敗',
-	pectn: '請輸入正確的模板名稱！',
-	pic: '請輸入正確的圖標使用方式！',
-};
-
-// 日语 japanese
-export const ja_JP = {
-	sort: 3,
-	name: '日本語',
-	hnay: 'まだ適応されていません',
-	pn: 'プロジェクト名を入力してください',
-	pncbne: 'プロジェクト名は空にできません',
-	pane: 'プロジェクト名が既に存在します，別の名前を入力してください！',
-	psat: 'テンプレートを選択してください',
-	oc: '操作がキャンセルされました',
-	pca: 'もう一度選択してください',
-	psai: 'アイコンの使用方法を選択してください',
-	pm: 'パッケージマネージャーを選択してください',
-	cfsing: 'ファイルを作成しています...',
-	pcsucc: 'プロジェクトが正常に作成されました！',
-	tgs: '開始：',
-	pcyt_vt: 'ヒント：src/app.css ファイルで初期カラーシステムを設定し、参考 https://stdf.design/guide/theme',
-	pcyt_vu: 'ヒント：src/app.css ファイルで初期カラーシステムを設定し、参考 https://stdf.design/guide/theme',
-	cferror: 'ファイルの作成に失敗しました',
-	pectn: '正しいテンプレート名を入力してください！',
-	pic: '正しいアイコン使用方法を入力してください！',
-};
-
-// 韩语 korean
-export const ko_KR = {
-	sort: 4,
-	name: '한국어',
-	hnay: '아직 적응하지 못했습니다',
-	pn: '프로젝트 이름을 입력하십시오',
-	pncbne: '프로젝트 이름은 비워 둘 수 없습니다',
-	pane: '프로젝트 이름이 이미 있습니다，다른 이름을 입력하십시오！',
-	psat: '템플릿을 선택하십시오',
-	oc: '작업이 취소되었습니다',
-	pca: '다시 선택하십시오',
-	psai: '아이콘 사용 방법을 선택하십시오',
-	pm: '패키지 관리자를 선택하십시오',
-	cfsing: '파일을 만드는 중입니다...',
-	pcsucc: '프로젝트가 성공적으로 생성되었습니다！',
-	tgs: '시작：',
-	pcyt_vt: '팁: src/app.css 파일에서 초기 색상 시스템을 구성하고 참조 https://stdf.design/guide/theme',
-	pcyt_vu: '팁: src/app.css 파일에서 초기 색상 시스템을 구성하고 참조 https://stdf.design/guide/theme',
-	cferror: '파일 생성 실패',
-	pectn: '올바른 템플릿 이름을 입력하십시오!',
-	pic: '올바른 아이콘 사용 방법을 입력하십시오!',
-};
-
-// 西班牙语 spanish
-export const es_ES = {
-	sort: 5,
-	name: 'Español',
-	hnay: 'Aún no se ha adaptado',
-	pn: 'Por favor ingrese el nombre del proyecto',
-	pncbne: 'El nombre del proyecto no puede estar vacío',
-	pane: 'El nombre del proyecto ya existe, por favor ingrese otro nombre!',
-	psat: 'Por favor seleccione una plantilla',
-	oc: 'Operación cancelada',
-	pca: 'Por favor, elija de nuevo',
-	psai: 'Por favor seleccione el uso de iconos',
-	pm: 'Por favor seleccione un administrador de paquetes',
-	cfsing: 'Creando archivo...',
-	pcsucc: 'Proyecto creado con éxito!',
-	tgs: 'Para empezar:',
-	pcyt_vt: 'Consejo: configure su sistema de colores en reference https://stdf.design/guide/theme',
-	pcyt_vu: 'Consejo: configure su sistema de colores en reference https://stdf.design/guide/theme',
-	cferror: 'Error al crear archivo',
-	pectn: '¡Por favor ingrese el nombre de la plantilla correcto!',
-	pic: '¡Por favor ingrese el uso correcto de iconos!',
-};
-
-// 俄语 russian
-export const ru_RU = {
-	sort: 6,
-	name: 'Русский',
-	hnay: 'Еще не адаптировано',
-	pn: 'Пожалуйста, введите название проекта',
-	pncbne: 'Название проекта не может быть пустым',
-	pane: 'Название проекта уже существует, пожалуйста, введите другое название!',
-	psat: 'Пожалуйста, выберите шаблон',
-	oc: 'Операция отменена',
-	pca: 'Пожалуйста, выберите снова',
-	psai: 'Пожалуйста, выберите использование иконок',
-	pm: 'Пожалуйста, выберите пакетный менеджер',
-	cfsing: 'Создание файла...',
-	pcsucc: 'Проект успешно создан!',
-	tgs: 'Чтобы начать:',
-	pcyt_vt: 'Совет: настройте свой цветовой систему в ссылке https://stdf.design/guide/theme',
-	pcyt_vu: 'Совет: настройте свой цветовой систему в ссылке https://stdf.design/guide/theme',
-	cferror: 'Не удалось создать файл',
-	pectn: 'Пожалуйста, введите правильное название шаблона!',
-	pic: 'Пожалуйста, введите правильное использование иконок!',
-};
-
-// 法语 french
-export const fr_FR = {
-	sort: 7,
-	name: 'Français',
-	hnay: "N'a pas encore adapté",
-	pn: 'Veuillez saisir le nom du projet',
-	pncbne: 'Le nom du projet ne peut pas être vide',
-	pane: 'Le nom du projet existe déjà, veuillez entrer un autre nom!',
-	psat: 'Veuillez sélectionner un modèle',
-	oc: 'Opération annulée',
-	pca: 'Veuillez choisir à nouveau',
-	psai: "Veuillez sélectionner le mode d'utilisation des icônes",
-	pm: 'Veuillez sélectionner un gestionnaire de paquets',
-	cfsing: 'Création de fichier...',
-	pcsucc: 'Projet créé avec succès!',
-	tgs: 'Pour commencer:',
-	pcyt_vt: 'Conseil: veuillez configurer votre système de couleurs dans reference https://stdf.design/guide/theme',
-	pcyt_vu: 'Conseil: veuillez configurer votre système de couleurs dans reference https://stdf.design/guide/theme',
-	cferror: 'Échec de la création du fichier',
-	pectn: 'Veuillez saisir le nom du modèle correct!',
-	pic: "Veuillez saisir le mode d'utilisation correct des icônes!",
-};
-
-// 德语 german
-export const de_DE = {
-	sort: 8,
-	name: 'Deutsch',
-	hnay: 'Noch nicht angepasst',
-	pn: 'Bitte geben Sie den Projektnamen ein',
-	pncbne: 'Projektname darf nicht leer sein',
-	pane: 'Projektname existiert bereits, bitte geben Sie einen anderen Namen ein!',
-	psat: 'Bitte wählen Sie eine Vorlage aus',
-	oc: 'Vorgang abgebrochen',
-	pca: 'Bitte wählen Sie erneut',
-	psai: 'Bitte wählen Sie die Verwendung von Icons',
-	pm: 'Bitte wählen Sie einen Paketmanager aus',
-	cfsing: 'Erstelle Datei...',
-	pcsucc: 'Projekt erfolgreich erstellt!',
-	tgs: 'Um zu beginnen:',
-	pcyt_vt: 'Tip: please configure your color system in reference https://stdf.design/guide/theme',
-	pcyt_vu: 'Tip: please configure your color system in reference https://stdf.design/guide/theme',
-	cferror: 'Fehler beim Erstellen der Datei',
-	pectn: 'Bitte geben Sie den richtigen Vorlagennamen ein!',
-	pic: 'Bitte geben Sie den richtigen Verwendungsmodus für Icons ein!',
-};
-
-// 意大利语 italian
-export const it_IT = {
-	sort: 9,
-	name: 'Italiano',
-	hnay: 'Non ancora adattato',
-	pn: 'Inserisci il nome del progetto',
-	pncbne: 'Il nome del progetto non può essere vuoto',
-	pane: 'Il nome del progetto esiste già, inserisci un altro nome!',
-	psat: 'Seleziona un modello',
-	oc: 'Operazione annullata',
-	pca: 'Seleziona di nuovo',
-	psai: 'Seleziona il modo di utilizzo delle icone',
-	pm: 'Seleziona un gestore di pacchetti',
-	cfsing: 'Creazione del file in corso...',
-	pcsucc: 'Progetto creato con successo!',
-	tgs: 'Per iniziare:',
-	pcyt_vt: 'Consiglio: configura il tuo sistema di colori in https://stdf.design/guide/theme',
-	pcyt_vu: 'Consiglio: configura il tuo sistema di colori in https://stdf.design/guide/theme',
-	cferror: 'Impossibile creare il file',
-	pectn: 'Inserisci il nome del modello corretto!',
-	pic: 'Inserisci il modo di utilizzo corretto delle icone!',
-};

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

@@ -1,36 +0,0 @@
-{
-	"name": "skt",
-	"private": true,
-	"version": "0.0.1",
-	"type": "module",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint ."
-	},
-	"devDependencies": {
-		"@eslint/compat": "^1.2.9",
-		"@eslint/js": "^9.27.0",
-		"@sveltejs/adapter-auto": "^6.0.1",
-		"@sveltejs/kit": "^2.21.2",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@tailwindcss/vite": "^4.1.7",
-		"eslint": "^9.27.0",
-		"eslint-config-prettier": "^10.1.5",
-		"eslint-plugin-svelte": "^3.9.0",
-		"globals": "^16.2.0",
-		"prettier": "^3.5.3",
-		"prettier-plugin-svelte": "^3.4.0",
-		"prettier-plugin-tailwindcss": "^0.6.11",
-		"svelte": "^5.33.3",
-		"svelte-check": "^4.2.1",
-		"tailwindcss": "^4.1.7",
-		"typescript": "^5.8.3",
-		"vite": "^6.3.5"
-	}
-}

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

@@ -1,67 +0,0 @@
-@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/**/*.svelte";
-
-html {
-	-webkit-tap-highlight-color: transparent;
-}

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

@@ -1,59 +0,0 @@
-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/skt/static/stdf.svg

@@ -1,4 +0,0 @@
-<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/skt/static/stdf_dark.svg

@@ -1,4 +0,0 @@
-<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/sktt/package.json

@@ -1,37 +0,0 @@
-{
-	"name": "sktt",
-	"private": true,
-	"version": "0.0.1",
-	"type": "module",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint ."
-	},
-	"devDependencies": {
-		"@eslint/compat": "^1.2.9",
-		"@eslint/js": "^9.27.0",
-		"@sveltejs/adapter-auto": "^6.0.1",
-		"@sveltejs/kit": "^2.21.2",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@tailwindcss/vite": "^4.1.7",
-		"eslint": "^9.27.0",
-		"eslint-config-prettier": "^10.1.5",
-		"eslint-plugin-svelte": "^3.9.0",
-		"globals": "^16.2.0",
-		"prettier": "^3.5.3",
-		"prettier-plugin-svelte": "^3.4.0",
-		"prettier-plugin-tailwindcss": "^0.6.11",
-		"svelte": "^5.33.3",
-		"svelte-check": "^4.2.1",
-		"tailwindcss": "^4.1.7",
-		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.32.1",
-		"vite": "^6.3.5"
-	}
-}

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

@@ -1,67 +0,0 @@
-@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/**/*.svelte";
-
-html {
-	-webkit-tap-highlight-color: transparent;
-}

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

@@ -1,59 +0,0 @@
-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/sktt/static/stdf.svg

@@ -1,4 +0,0 @@
-<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/sktt/static/stdf_dark.svg

@@ -1,4 +0,0 @@
-<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/stdf.svg

@@ -1,4 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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/src/app.css

@@ -1,67 +0,0 @@
-@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

@@ -1,59 +0,0 @@
-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/public/stdf.svg

@@ -1,4 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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/src/app.css

@@ -1,67 +0,0 @@
-@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

@@ -1,59 +0,0 @@
-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/.npmignore

@@ -0,0 +1,18 @@
+# 忽略模板中的 node_modules
+templates/**/node_modules
+
+# 忽略模板中的 .svelte-kit
+templates/**/.svelte-kit
+
+# 忽略模板中的 lock 文件
+templates/**/bun.lock
+templates/**/bun.lockb
+templates/**/pnpm-lock.yaml
+templates/**/package-lock.json
+
+# 忽略模板中的构建产物
+templates/**/dist
+templates/**/build
+
+# 忽略 .DS_Store
+**/.DS_Store

packages/create-stdf/README.md → packages/create/README.md

@@ -1,12 +1,15 @@
-[简体中文](https://github.com/any-tdf/stdf/blob/main/packages/create-stdf/README_CN.md)
-
-> Since v0.2.2, you can choose to use stdf-icon or iconify for icons.
+[简体中文](https://github.com/any-tdf/stdf/blob/main/packages/create/README_CN.md)
 
 # create-stdf
 
 A CLI for creating new [STDF](https://stdf.design) projects. Just run...
 
 <!-- :::code-groups -->
+<!-- bun -->
+```sh
+bun create stdf@latest
+```
+<!-- :: -->
 <!-- pnpm -->
 ```sh
 pnpm create stdf@latest
@@ -21,11 +24,6 @@ npm init stdf@latest
 npx create-stdf@latest
 ```
 <!-- :: -->
-<!-- bun -->
-```sh
-bun create stdf@latest
-```
-<!-- :: -->
 <!-- yarn -->
 ```sh
 yarn create stdf@latest
@@ -37,6 +35,11 @@ yarn create stdf@latest
 You can also directly specify the project name and the template you want to use via additional command line options. For example: create a new project named my-app using the **SvelteKit & Tailwind & TypeScript & STDF** template, run:
 
 <!-- :::code-groups -->
+<!-- bun -->
+```sh
+bun create stdf@latest my-app
+```
+<!-- :: -->
 <!-- pnpm -->
 ```sh
 pnpm create stdf@latest my-app
@@ -47,57 +50,45 @@ pnpm create stdf@latest my-app
 npm create stdf@latest my-app
 ```
 <!-- :: -->
-<!-- bun -->
-```sh
-bun create stdf@latest my-app
-```
-<!-- :: -->
 <!-- yarn -->
 ```sh
 yarn create stdf@latest my-app
 ```
 <!-- ::: -->
 
-Prompt language is Simplified Chinese, use **SvelteKit & Tailwind & STDF** template, use Iconify to manage icons, create a new project named my-app, run:
+Prompt language is Simplified Chinese, use **SvelteKit & Tailwind & STDF** template, use Iconify to manage icons, use 3 built-in themes, create a new project named my-app, run:
 
 <!-- :::code-groups -->
-<!-- pnpm -->
+<!-- bun -->
 ```sh
-pnpm create stdf@latest my-app --template skt --language zh_CN --icon-usage iconify
-# or
-pnpm create stdf@latest my-app --t skt --l zh_CN --i iconify
+bun create stdf@latest my-app -t skt -l zh_CN -i iconify -m multi
 ```
 <!-- :: -->
-<!-- npm -->
+<!-- pnpm -->
 ```sh
-npm create stdf@latest my-app --template skt --language zh_CN --icon-usage iconify
-# or
-npm create stdf@latest my-app --t skt --l zh_CN --i iconify
+pnpm create stdf@latest my-app -t skt -l zh_CN -i iconify -m multi
 ```
 <!-- :: -->
-<!-- bun -->
+<!-- npm -->
 ```sh
-bun create stdf@latest my-app --template skt --language zh_CN --icon-usage iconify
-# or
-bun create stdf@latest my-app --t skt --l zh_CN --i iconify
+npm create stdf@latest my-app -t skt -l zh_CN -i iconify -m multi
 ```
 <!-- :: -->
 <!-- yarn -->
 ```sh
-yarn create stdf@latest my-app --template skt --language zh_CN --icon-usage iconify
-# or
-yarn create stdf@latest my-app --t skt --l zh_CN --i iconify
+yarn create stdf@latest my-app -t skt -l zh_CN -i iconify -m multi
 ```
 <!-- ::: -->
 
 # 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.                   |
-| --i / --icon-usage | stdf-icon | The icon usage method.                         |
+| 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  | any-tdf-icon | The icon usage method.                         |
+| -m / --theme-mode  | single       | The theme mode.                                |
 
 # Template presets
 
@@ -109,7 +100,7 @@ yarn create stdf@latest my-app --t skt --l zh_CN --i iconify
 | vst          | Vite & Svelte & Tailwind              | -               |
 | skut         | SvelteKit & UnoCSS & TypeScript       | Not adapted yet |
 | sku          | SvelteKit & UnoCSS                    | Not adapted yet |
-| vsut         | Vite & Svelte & UnoCSS                | Not adapted yet |
+| vsut         | Vite & Svelte & UnoCSS & TypeScript   | Not adapted yet |
 | vsu          | Vite & Svelte & UnoCSS                | Not adapted yet |
 
 # Language presets
@@ -129,12 +120,20 @@ yarn create stdf@latest my-app --t skt --l zh_CN --i iconify
 
 # 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                                                                                                                        |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| any-tdf-icon | Use [@any-tdf/vite-plugin-svg-symbol](https://github.com/any-tdf/vite-plugin-svg-symbol) to manage icons with SVG symbol sprites.  |
+| iconify      | Use [Iconify](https://iconify.design) icon sets with Tailwind CSS.                                                                 |
+| both         | Use both @any-tdf/vite-plugin-svg-symbol and Iconify to manage icons.                                                              |
+| none         | Do not use any tool to manage icons, configure manually later.                                                                     |
+
+# Theme mode presets
+
+| Abbreviation | Description                                                                                                                        |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| single       | Initial theme (STDF), add custom themes later. You can generate custom themes at https://stdf.design/guide/generator               |
+| multi        | 3 built-in themes (STDF, Sage, GoldWood).                                                                                          |
+| all          | All 42 built-in themes.                                                                                                            |
 
 # License
 

packages/create/README_CN.md

@@ -0,0 +1,140 @@
+[English](https://github.com/any-tdf/stdf/blob/main/packages/create/README.md)
+
+# create-stdf
+
+一个用于创建新的 [STDF](https://stdf.design) 项目的命令行工具。只需运行以下命令...
+
+<!-- :::code-groups -->
+<!-- bun -->
+```sh
+bun create stdf@latest
+```
+<!-- :: -->
+<!-- pnpm -->
+```sh
+pnpm create stdf@latest
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm create stdf@latest
+# 或
+npm init stdf@latest
+# 或
+npx create-stdf@latest
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf@latest
+```
+<!-- ::: -->
+
+...然后按照提示进行操作。
+
+你也可以通过额外的命令行选项直接指定项目名称与默认参数。例如，如果要使用 **SvelteKit & Tailwind & TypeScript & STDF** 模板创建一个名为 my-app 的新项目，请运行：
+
+<!-- :::code-groups -->
+<!-- bun -->
+```sh
+bun create stdf@latest my-app
+```
+<!-- :: -->
+<!-- pnpm -->
+```sh
+pnpm create stdf@latest my-app
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm create stdf@latest my-app
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf@latest my-app
+```
+<!-- ::: -->
+
+提示语言为简体中文，使用 **SvelteKit & Tailwind & STDF** 模板，使用 Iconify 管理图标，使用内置 3 个主题，创建一个名为 my-app 的新项目，请运行：
+
+<!-- :::code-groups -->
+<!-- bun -->
+```sh
+bun create stdf@latest my-app -t skt -l zh_CN -i iconify -m multi
+```
+<!-- :: -->
+<!-- pnpm -->
+```sh
+pnpm create stdf@latest my-app -t skt -l zh_CN -i iconify -m multi
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm create stdf@latest my-app -t skt -l zh_CN -i iconify -m multi
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf@latest my-app -t skt -l zh_CN -i iconify -m multi
+```
+<!-- ::: -->
+
+# 命令选项
+
+| 命令               | 默认         | 描述                     |
+| ------------------ | ------------ | ------------------------ |
+| -                  | -            | 项目名称，可以直接输入。 |
+| -t / --template    | sktt         | 要使用的模板。           |
+| -l / --language    | en_US        | 提示语言。               |
+| -i / --icon-usage  | any-tdf-icon | 图标使用方式。           |
+| -m / --theme-mode  | single       | 主题模式。               |
+
+# 模板预设
+
+| 简写 | 模板                                  | 描述     |
+| ---- | ------------------------------------- | -------- |
+| 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 & TypeScript   | 暂未适配 |
+| vsu  | Vite & Svelte & UnoCSS                | 暂未适配 |
+
+# 语言预设
+
+| 简写  | 语言         |
+| ----- | ------------ |
+| en_US | 英语（美式） |
+| zh_CN | 中文（简体） |
+| zh_TW | 中文（繁体） |
+| ja_JP | 日语         |
+| ko_KR | 韩语         |
+| es_ES | 西班牙语     |
+| ru_RU | 俄语         |
+| fr_FR | 法语         |
+| de_DE | 德语         |
+| it_IT | 意大利语     |
+
+# 图标使用方式预设
+
+| 简写         | 描述                                                                                                                   |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------- |
+| any-tdf-icon | 使用 [@any-tdf/vite-plugin-svg-symbol](https://github.com/any-tdf/vite-plugin-svg-symbol) 插件管理图标（SVG 雪碧图）。 |
+| iconify      | 配合 Tailwind CSS 使用 [Iconify](https://iconify.design) 图标集。                                                      |
+| both         | 同时使用 @any-tdf/vite-plugin-svg-symbol 和 Iconify 管理图标。                                                         |
+| none         | 不使用任何工具管理图标，后续手动配置。                                                                                 |
+
+# 主题模式预设
+
+| 简写   | 描述                                                                                       |
+| ------ | ------------------------------------------------------------------------------------------ |
+| single | 初始主题（STDF），后续可增加自定义主题。可到 https://stdf.design/guide/generator 生成主题。 |
+| multi  | 内置 3 个主题（STDF、Sage、GoldWood）。                                                    |
+| all    | 全部 42 个内置主题。                                                                       |
+
+# 许可证
+
+本项目基于 [MIT 许可证](https://github.com/any-tdf/stdf/blob/main/LICENSE)。

packages/create-stdf/package.json → packages/create/package.json

@@ -1,13 +1,14 @@
 {
 	"name": "create-stdf",
-	"version": "0.2.11",
+	"version": "0.3.0",
 	"description": "A CLI for creating new STDF projects",
 	"bin": {
 		"create-stdf": "index.js"
 	},
 	"scripts": {
 		"build": "rollup -c",
-		"test": "echo \"Error: no test specified\" && exit 1"
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"bt": "rollup -c && bun run dist/index.js"
 	},
 	"files": [
 		"dist/**",
@@ -18,15 +19,15 @@
 		"node": ">=14.14"
 	},
 	"dependencies": {
-		"@clack/prompts": "^0.10.0",
-		"fs-extra": "^11.3.0",
+		"@clack/prompts": "^0.11.0",
+		"fs-extra": "^11.3.3",
 		"kleur": "^4.1.5",
 		"minimist": "^1.2.8",
-		"pacote": "^21.0.0"
+		"pacote": "^21.0.4"
 	},
 	"devDependencies": {
 		"@rollup/plugin-terser": "^0.4.4",
-		"rollup": "^4.39.0"
+		"rollup": "^4.56.0"
 	},
 	"keywords": [
 		"svelte",

packages/create/snippet/iconify-unocss.txt

@@ -0,0 +1,30 @@
+<div class="my-6 flex justify-between px-8">
+	<span class="i-duo-icons-cake text-2xl text-primary dark:text-dark"></span>
+	<span class="i-duo-icons-brush text-2xl text-primary dark:text-dark"></span>
+	<span class="i-bitcoin-icons-miner-filled text-2xl text-primary dark:text-dark"></span>
+	<span class="i-bitcoin-icons-magic-wand-outline text-2xl text-primary dark:text-dark"></span>
+	<span class="i-fluent-color-building-store-20 text-2xl"></span>
+</div>
+<div class="px-4 text-xs">
+	{#if lang === 'zh_CN'}
+		<p>
+			以上图标使用 <a class="underline" href="https://unocss.dev/presets/icons" target="_blank">UnoCSS Icons</a> 配合 <a class="underline" href="https://iconify.design" target="_blank">Iconify</a> 方式：
+		</p>
+		<p class="mt-2">
+			第一与第二个来自
+			<a class="underline" href="https://icon-sets.iconify.design/duo-icons/" target="_blank">duo-icons</a>，第三与第四个来自
+			<a class="underline" href="https://icon-sets.iconify.design/bitcoin-icons/" target="_blank">bitcoin-icons</a>，最后一个来自
+			<a class="underline" href="https://icon-sets.iconify.design/fluent-color/" target="_blank">fluent-color</a>。
+		</p>
+	{:else}
+		<p>
+			The above icons use <a class="underline" href="https://unocss.dev/presets/icons" target="_blank">UnoCSS Icons</a> with <a class="underline" href="https://iconify.design" target="_blank">Iconify</a> way:
+		</p>
+		<p class="mt-2">
+			The first and second come from
+			<a class="underline" href="https://icon-sets.iconify.design/duo-icons/" target="_blank">duo-icons</a>, the third and fourth come from
+			<a class="underline" href="https://icon-sets.iconify.design/bitcoin-icons/" target="_blank">bitcoin-icons</a>, the last one comes from
+			<a class="underline" href="https://icon-sets.iconify.design/fluent-color/" target="_blank">fluent-color</a>.
+		</p>
+	{/if}
+</div>

packages/create-stdf/snippet/stdf-icon.txt → packages/create/snippet/svg-symbol.txt

@@ -8,27 +8,27 @@
 <div class="px-4 text-xs">
 	{#if lang === 'zh_CN'}
 		<p>
-			以上图标通过 <a class="underline" href="https://www.npmjs.com/package/rollup-plugin-stdf-icon" target="_blank">
-				rollup-plugin-stdf-icon
-			</a> 使用 SVG Sprites 方式：
+			以上图标通过 <a class="underline" href="https://www.npmjs.com/package/@any-tdf/vite-plugin-svg-symbol" target="_blank">
+				@any-tdf/vite-plugin-svg-symbol
+			</a> 使用 SVG Symbol 方式：
 		</p>
 		<p class="mt-2">
 			第一个来自
-			<a class="underline" href="https://heroicons.com" target="_blank">Heroicons</a>，最后一个来自
-			<a class="underline" href="https://iconpark.oceanengine.com" target="_blank">IconPark</a>，其余来自
-			<a class="underline" href="https://remixicon.com" target="_blank">Remix Icon</a>。
+			<a class="underline" href="https://heroicons.com" target="_blank">Heroicons</a> ，最后一个来自
+			<a class="underline" href="https://iconpark.oceanengine.com" target="_blank">IconPark</a> ，其余来自
+			<a class="underline" href="https://remixicon.com" target="_blank">Remix Icon</a> 。
 		</p>
 	{:else}
 		<p>
-			The above icons use <a class="underline" href="https://www.npmjs.com/package/rollup-plugin-stdf-icon" target="_blank">
-				rollup-plugin-stdf-icon
-			</a> way:
+			The above icons use <a class="underline" href="https://www.npmjs.com/package/@any-tdf/vite-plugin-svg-symbol" target="_blank">
+				@any-tdf/vite-plugin-svg-symbol
+			</a> for SVG symbols:
 		</p>
 		<p class="mt-2">
 			The first one comes from
-			<a class="underline" href="https://heroicons.com" target="_blank">Heroicons</a>，the last one comes from
-			<a class="underline" href="https://iconpark.oceanengine.com" target="_blank">IconPark</a>，the rest come from
+			<a class="underline" href="https://heroicons.com" target="_blank">Heroicons</a>, the last one comes from
+			<a class="underline" href="https://iconpark.oceanengine.com" target="_blank">IconPark</a>, the rest come from
 			<a class="underline" href="https://remixicon.com" target="_blank">Remix Icon</a>.
 		</p>
 	{/if}
-</div>
+</div>

packages/create/src/index.js

@@ -0,0 +1,655 @@
+#!/usr/bin/env node
+
+import fs from 'fs-extra';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import * as p from '@clack/prompts';
+import { bold, cyan, grey, red, blue } from 'kleur/colors';
+import minimist from 'minimist';
+import pacote from 'pacote';
+
+import * as langAll from './lang';
+
+// 获取最新版本号
+// Get the latest version number
+const getLatestVersion = async packageName => {
+    const manifest = await pacote.manifest(`${packageName}@latest`);
+    return manifest.version;
+};
+
+// 获取 create 当前版本
+// Get create-stdf current version
+const { version } = JSON.parse(fs.readFileSync(fileURLToPath(new URL('../package.json', import.meta.url)), 'utf-8'));
+
+// 获取 create-stdf 的最新版本号
+// Get the latest version number of create-stdf
+const createStdfV = await getLatestVersion('create-stdf');
+
+// 显示版本号
+// Display version number
+console.log(`
+${grey(`create-stdf@${version}`)}
+`);
+
+if (version != createStdfV) {
+    console.log(
+        red(`😢 Recommended to use the latest version: ${createStdfV}
+		`),
+    );
+}
+
+const spinner = p.spinner();
+
+p.intro('Welcome to use STDF!');
+
+let lang = langAll.en_US;
+
+// 获取命令行参数
+// Get command line parameters
+const argv = minimist(process.argv.slice(2));
+
+// 获取项目名称和模板名称和语言
+// Get project name and template name
+const argvProjectName = argv._[0];
+const argvTemplate = argv.template || argv.t;
+const argvLanguage = argv.language || argv.l;
+const argvIconUsage = argv.iconUsage || argv.i;
+const argvThemeMode = argv.themeMode || argv.theme;
+
+// 语言列表
+// Language list
+const languages = [];
+
+// 循环 langAll 对象，将语言列表中的语言名字替换为对应的语言名字，且按照 sort 排序
+// Loop through the langAll object and replace the language name in the language list with the corresponding language name, and sort by sort
+for (const key in langAll) {
+    languages.push({ value: key, label: langAll[key].name, sort: langAll[key].sort });
+}
+
+// 按照 sort 排序
+// Sort by sort
+languages.sort((a, b) => a.sort - b.sort);
+
+// 如果命令行参数中有语言，且语言列表中有该语言，使用该语言，否则使用英语
+// If there is a language in the command line parameters and the language list has the language, use the language, otherwise use English
+lang = argvLanguage && languages.find(item => item.value === argvLanguage) ? langAll[argvLanguage] : langAll.en_US;
+
+// 模板列表
+// Template list
+const templateOptions = [
+    { 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 },
+];
+
+// 包管理工具列表
+// Package management tool list
+const packageManagerOptions = [
+    { value: 'bun', label: 'Bun', install: 'bun i', dev: 'bun dev' },
+    { value: 'npm', label: 'NPM', install: 'npm i', dev: 'npm run dev' },
+    { value: 'pnpm', label: 'PNPM', install: 'pnpm i', dev: 'pnpm dev' },
+    { value: 'yarn', label: 'Yarn', install: 'yarn', dev: 'yarn run dev' },
+];
+
+// 图标使用方式列表
+// Icon usage method list
+const iconUsageOptions = [
+    { value: 'any-tdf-icon', label: '@any-tdf/vite-plugin-svg-symbol', hintKey: 'iconSvgSymbolHint' },
+    { value: 'iconify', label: 'iconify', hintKey: 'iconIconifyHint' },
+    { value: 'both', label: '@any-tdf/vite-plugin-svg-symbol & iconify', hintKey: 'iconBothHint' },
+    { value: 'none', label: 'none', hintKey: 'iconNoneHint' },
+];
+
+const themeModeOptions = [
+    { value: 'single', labelKey: 'tms' },
+    { value: 'multi', labelKey: 'tmm' },
+    { value: 'all', labelKey: 'tma' },
+];
+
+const getThemeModeOptions = () =>
+    themeModeOptions.map(item => ({
+        value: item.value,
+        label: lang[item.labelKey],
+    }));
+
+// 如果命令行参数中有项目名称
+// If there is project name in command line parameters
+if (argvProjectName) {
+    let itemTemplate = null;
+    if (argvTemplate) {
+        itemTemplate = templateOptions.find(item => item.value === argvTemplate);
+        if (!itemTemplate) {
+            p.intro(red(lang.pectn + ' (' + templateOptions.map(item => item.value).join(', ') + ')'));
+            process.exit(0);
+        }
+        if (!itemTemplate.finish) {
+            p.intro(red(itemTemplate.label + ' ' + lang.hnay));
+            process.exit(0);
+        }
+    } else {
+        itemTemplate = templateOptions[0];
+    }
+    let itemIconUsage = null;
+    if (argvIconUsage) {
+        itemIconUsage = iconUsageOptions.find(item => item.value === argvIconUsage);
+        if (!itemIconUsage) {
+            p.intro(red(lang.pic + ' (' + iconUsageOptions.map(item => item.value).join(', ') + ')'));
+            process.exit(0);
+        }
+    } else {
+        itemIconUsage = iconUsageOptions[0];
+    }
+    let itemThemeMode = null;
+    if (argvThemeMode) {
+        itemThemeMode = themeModeOptions.find(item => item.value === argvThemeMode);
+        if (!itemThemeMode) {
+            p.intro(red(lang.ptm + ' (' + themeModeOptions.map(item => item.value).join(', ') + ')'));
+            process.exit(0);
+        }
+    } else {
+        itemThemeMode = themeModeOptions.find(item => item.value === 'multi');
+    }
+    // 判断是否已存在，提示"项目名称已存在"
+    // Determine whether it already exists, prompt "Project name already exists"
+    if (fs.existsSync(argvProjectName)) {
+        p.intro(red('🚫 ' + argvProjectName + ' ' + lang.pane));
+        process.exit(0);
+    }
+    createFunc(argvProjectName, itemTemplate, itemIconUsage, packageManagerOptions[0], itemThemeMode);
+} else {
+    (async () => {
+        // 选择一种语言
+        // Select a language
+        const languageType = await p.select({
+            message: bold('Please select your preferred language'),
+            options: languages,
+        });
+        if (p.isCancel(languageType)) {
+            p.cancel(red('⛔ ') + lang.oc);
+            process.exit(0);
+        }
+        lang = langAll[languageType];
+
+        //  选择一个模板
+        // Select a template
+        let template = await p.select({
+            message: bold(lang.psat),
+            options: templateOptions.map(item => ({
+                ...item,
+                label: item.finish ? item.label : `(${lang.hnay}) ${item.label}`,
+                disabled: !item.finish,
+            })),
+        });
+
+        if (p.isCancel(template)) {
+            p.cancel(red('⛔ ') + lang.oc);
+            process.exit(0);
+        }
+
+        // 选择图标使用方式
+        // Select icon usage method
+        const iconUsage = await p.select({
+            message: bold(lang.psai),
+            options: iconUsageOptions.map(item => ({
+                value: item.value,
+                label: `${item.label} - ${lang[item.hintKey]}`,
+            })),
+        });
+
+        if (p.isCancel(iconUsage)) {
+            p.cancel(red('⛔ ') + lang.oc);
+            process.exit(0);
+        }
+
+        // 选择主题模式
+        // Select theme mode
+        const themeMode = await p.select({
+            message: bold(lang.pstm) + ' - ' + grey(lang.themeGeneratorHint),
+            options: getThemeModeOptions(),
+        });
+
+        if (p.isCancel(themeMode)) {
+            p.cancel(red('⛔ ') + lang.oc);
+            process.exit(0);
+        }
+
+        // 输入项目名称
+        // Enter the project name
+        const projectName = await p.text({
+            message: bold(lang.pn),
+            placeholder: 'stdf-project',
+            validate: value => {
+                if (!value) {
+                    // 判断是否为空，提示"项目名称不能为空"
+                    // Determine whether it is empty, prompt "Project name cannot be empty"
+                    return lang.pncbne;
+                }
+                if (fs.existsSync(value)) {
+                    // 判断是否已存在，提示"项目名称已存在"
+                    // Determine whether it already exists, prompt "Project name already exists"
+                    return '🚫 ' + value + ' ' + lang.pane;
+                }
+            },
+        });
+
+        if (p.isCancel(projectName)) {
+            p.cancel(red('⛔ ') + lang.oc);
+            process.exit(0);
+        }
+
+        // 使用什么包管理工具 npm / pnpm / yarn / bun / deno
+        // What package management tool to use npm / pnpm / yarn / bun / deno
+        const packageManager = await p.select({
+            message: bold(lang.pm),
+            options: packageManagerOptions,
+        });
+
+        if (p.isCancel(packageManager)) {
+            p.cancel(red('⛔ ') + lang.oc);
+            process.exit(0);
+        }
+
+        // 根据 template 的值，复制对应目录下的所有文件到当前目录
+        // According to the value of template, copy all files under the corresponding directory to the current directory
+        createFunc(
+            projectName,
+            templateOptions.find(i => i.value === template),
+            iconUsageOptions.find(i => i.value === iconUsage),
+            packageManagerOptions.find(i => i.value === packageManager),
+            themeModeOptions.find(i => i.value === themeMode),
+        );
+    })();
+}
+
+function createFunc(projectName, templateItem, iconUsageItem, packageManagerItem, themeModeItem) {
+    // 如果 projectName 是数字，转为字符串
+    // If projectName is a number, convert it to a string
+    if (typeof projectName === 'number') {
+        projectName = projectName.toString();
+    }
+
+    // 项目目录
+    // Project directory
+    const projectDir = path.join(path.resolve(), projectName);
+
+    spinner.start('🚀 ' + lang.cfsing);
+
+    fs.mkdirSync(projectDir);
+
+    // 获取模板目录的绝对路径，考虑到 Windows 系统的兼容性，使用 path.join
+    // Get the absolute path of the template directory, considering the compatibility of the Windows system, use path.join
+    const templatePath = path.resolve(fileURLToPath(import.meta.url), '../..', `templates/${templateItem.template}`);
+
+    // 将 templatePath 目录下的所有文件复制到 projectDir 目录下
+    // Copy all files under the templatePath directory to the projectDir directory
+    fs.copy(templatePath, projectDir)
+        .then(async () => {
+            // 读取 package.json 文件
+            // Read the package.json file
+            const packageJson = JSON.parse(fs.readFileSync(`${projectDir}/package.json`, 'utf-8'));
+
+            // 将项目内的 package.json 中的 name 属性修改为 projectName
+            // Modify the name attribute in package.json in the project to projectName
+            packageJson.name = projectName;
+
+            // 获取 stdf 的最新版本号
+            // Get the latest version number of stdf
+            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 themeMode = themeModeItem?.value || 'multi';
+            const appSveltePath = isVite ? `${projectDir}/src/App.svelte` : `${projectDir}/src/routes/+page.svelte`;
+
+            const addIconifyFun = async () => {
+                if (isUno) {
+                    // UnoCSS 模板使用 presetIcons，通过 CDN 加载图标，无需额外依赖
+                    // UnoCSS template uses presetIcons, loads icons via CDN, no additional dependencies needed
+                    const iconifySnippetPath = fileURLToPath(new URL('../snippet/iconify-unocss.txt', import.meta.url));
+                    const iconifySnippet = fs.readFileSync(iconifySnippetPath, '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');
+                        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');
+                        pageSvelteLines.splice(pageSvelteLines.indexOf('<Calendar bind:visible />') + 1, 0, iconifySnippet);
+                        fs.writeFileSync(`${projectDir}/src/routes/+page.svelte`, pageSvelteLines.join('\n'), 'utf-8');
+                    }
+                } else {
+                    // Tailwind 模板使用 @iconify/tailwind4 插件
+                    // Tailwind template uses @iconify/tailwind4 plugin
+                    const iconifyTailwind4V = await getLatestVersion('@iconify/tailwind4');
+                    const bitcoin_iconsV = await getLatestVersion('@iconify-json/bitcoin-icons');
+                    const duo_iconsV = await getLatestVersion('@iconify-json/duo-icons');
+                    const fluent_colorV = await getLatestVersion('@iconify-json/fluent-color');
+                    packageJson.devDependencies['@iconify/tailwind4'] = `^${iconifyTailwind4V}`;
+                    packageJson.devDependencies['@iconify-json/bitcoin-icons'] = `^${bitcoin_iconsV}`;
+                    packageJson.devDependencies['@iconify-json/duo-icons'] = `^${duo_iconsV}`;
+                    packageJson.devDependencies['@iconify-json/fluent-color'] = `^${fluent_colorV}`;
+                    // 在 ${projectDir}/src/app.css 的第 4 行增加 @plugin "@iconify/tailwind4" {
+                    // 	prefixes: duo-icons, bitcoin-icons, fluent-color;
+                    // }
+                    const appCss = fs.readFileSync(`${projectDir}/src/app.css`, 'utf-8');
+                    const appCssLines = appCss.split('\n');
+                    const iconifyBlock = ['@plugin "@iconify/tailwind4" {', '\tprefixes: duo-icons, bitcoin-icons, fluent-color;', '}', ''];
+                    const themeIndex = appCssLines.findIndex(line => line.trim().startsWith('@theme'));
+                    const insertIndex = themeIndex === -1 ? appCssLines.length : themeIndex;
+                    appCssLines.splice(insertIndex, 0, ...iconifyBlock);
+                    fs.writeFileSync(`${projectDir}/src/app.css`, appCssLines.join('\n'), 'utf-8');
+
+                    const iconifySnippet = fs.readFileSync(fileURLToPath(new URL('../snippet/iconify.txt', import.meta.url)), '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');
+                        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');
+                        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 svgSymbolV = await getLatestVersion('@any-tdf/vite-plugin-svg-symbol');
+                packageJson.devDependencies['@any-tdf/vite-plugin-svg-symbol'] = `^${svgSymbolV}`;
+                const viteConfig = fs.readFileSync(`${projectDir}/vite.config.${isTs ? 'ts' : 'js'}`, 'utf-8');
+                const viteConfigLines = viteConfig.split('\n');
+                viteConfigLines.splice(1, 0, `import svgSymbol from '@any-tdf/vite-plugin-svg-symbol';`);
+
+                // 根据模板类型确定要查找的 export default 行
+                // Determine the export default line to find based on template type
+                const cssPlugin = isUno ? 'UnoCSS()' : 'tailwindcss()';
+                const frameworkPlugin = isVite ? 'svelte()' : 'sveltekit()';
+                const exportLine = `export default defineConfig({ plugins: [${frameworkPlugin}, ${cssPlugin}] });`;
+                // 输出目录：SvelteKit 使用 static，Vite 使用 public
+                // Output directory: SvelteKit uses static, Vite uses public
+                const outDir = isVite ? 'public' : 'static';
+
+                // 生成新的 export default defineConfig 配置，将 svgSymbol 放在 plugins 数组中
+                // Generate new export default defineConfig configuration, put svgSymbol in plugins array
+                const newExportLine = `// 一般来说，一个应用的 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.
+export default defineConfig({
+\tplugins: [
+\t\t${frameworkPlugin},
+\t\t${cssPlugin},
+\t\tsvgSymbol([
+\t\t\t{ inFile: 'src/lib/svgs/Heroicons', outFile: '${outDir}/symbols' },
+\t\t\t{ inFile: 'src/lib/svgs/IconPark', outFile: '${outDir}/symbols' },
+\t\t\t{ inFile: 'src/lib/svgs/Remix', outFile: '${outDir}/symbols' }
+\t\t])
+\t]
+});`;
+
+                // 将 export default defineConfig 行替换为新的配置
+                // Replace the export default defineConfig line with the new configuration
+                viteConfigLines.splice(
+                    viteConfigLines.indexOf(exportLine),
+                    1,
+                    newExportLine,
+                );
+                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`);
+
+                if (isVite) {
+                    // 在 ${projectDir}/src/App.svelte 的 <Calendar bind:visible /> 下方增加图标使用示例
+                    const appSvelte = fs.readFileSync(`${projectDir}/src/App.svelte`, 'utf-8');
+                    const appSvelteLines = appSvelte.split('\n');
+                    const svgSymbolSnippetHtml = fs.readFileSync(fileURLToPath(new URL('../snippet/svg-symbol.txt', import.meta.url)), 'utf-8');
+                    appSvelteLines.splice(appSvelteLines.indexOf('<Calendar bind:visible />') + 1, 0, svgSymbolSnippetHtml);
+                    fs.writeFileSync(`${projectDir}/src/App.svelte`, appSvelteLines.join('\n'), 'utf-8');
+                } else {
+                    // 在 ${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 svgSymbolSnippetHtml = fs.readFileSync(fileURLToPath(new URL('../snippet/svg-symbol.txt', import.meta.url)), 'utf-8');
+                    pageSvelteLines.splice(pageSvelteLines.indexOf('<Calendar bind:visible />') + 1, 0, svgSymbolSnippetHtml);
+                    fs.writeFileSync(`${projectDir}/src/routes/+page.svelte`, pageSvelteLines.join('\n'), 'utf-8');
+                }
+            };
+
+            // 如果 iconUsageItem 的值为 iconify
+            // If the value of iconUsageItem is iconify
+            if (iconUsageItem.value === 'iconify') {
+                await addIconifyFun();
+            }
+
+            // 如果 iconUsageItem 的值为 any-tdf-icon，则获取 @any-tdf/vite-plugin-svg-symbol 的最新版本号
+            // If the value of iconUsageItem is any-tdf-icon, get the latest version number of @any-tdf/vite-plugin-svg-symbol
+            if (iconUsageItem.value === 'any-tdf-icon') {
+                await addStdfIconFun();
+            }
+
+            // 如果 iconUsageItem 的值为 both，则同时调用 addIconifyFun 和 addStdfIconFun
+            // If the value of iconUsageItem is both, call addIconifyFun and addStdfIconFun
+            if (iconUsageItem.value === 'both') {
+                await addIconifyFun();
+                await addStdfIconFun();
+            }
+
+            const updateThemeCss = (cssContent, mode) => {
+                const pluginRegex = /@plugin "stdf\/theme" \{[\s\S]*?\}\n\n?/;
+                const multiPlugin = '@plugin "stdf/theme" {\n\tname: "STDF, Sage, GoldWood";\n}\n\n';
+                const allPlugin = '@plugin "stdf/theme" {\n\tall: true;\n}\n\n';
+                const insertPlugin = (content, pluginBlock) => {
+                    if (content.match(pluginRegex)) {
+                        return content.replace(pluginRegex, pluginBlock);
+                    }
+                    const themeIndex = content.indexOf('@theme');
+                    if (themeIndex === -1) {
+                        return `${pluginBlock}${content}`;
+                    }
+                    return content.replace('@theme', `${pluginBlock}@theme`);
+                };
+
+                if (mode === 'single') {
+                    return cssContent.replace(pluginRegex, '');
+                }
+                if (mode === 'all') {
+                    return insertPlugin(cssContent, allPlugin);
+                }
+                return insertPlugin(cssContent, multiPlugin);
+            };
+
+            const updateThemeSvelte = (svelteContent, mode) => {
+                // 模板默认是单主题模式，不需要修改
+                // Template default is single theme mode, no modification needed
+                if (mode === 'single') {
+                    return svelteContent;
+                }
+
+                let content = svelteContent;
+
+                // 多主题模式：使用 Tabs 切换 4 个主题
+                // Multi theme mode: use Tabs to switch 4 themes
+                if (mode === 'multi') {
+                    // 添加 Tabs 导入
+                    content = content.replace(
+                        /import \{ Button, ButtonGroup, Cell, Icon, Calendar \} from 'stdf';/,
+                        "import { Button, ButtonGroup, Cell, Icon, Calendar, Tabs } from 'stdf';"
+                    );
+                    // 修改 stdf/theme 导入
+                    content = content.replace(
+                        /import \{ switchMode \} from 'stdf\/theme';/,
+                        "import { switchTheme, switchMode } from 'stdf/theme';"
+                    );
+                    // 在 // 日历 代码块后添加主题相关的 JS 代码
+                    const multiThemeBlock = [
+                        '',
+                        '\t// 主题',
+                        '\t// Theme',
+                        '\tconst themeOptions = [',
+                        "\t\t{ name: 'STDF', labelZh: 'STDF', labelEn: 'STDF' },",
+                        "\t\t{ name: 'Sage', labelZh: '草绿粉紫', labelEn: 'Sage' },",
+                        "\t\t{ name: 'GoldWood', labelZh: '金色森林', labelEn: 'GoldWood' },",
+                        '\t];',
+                        '\tconst themeLabels = $derived(',
+                        '\t\tthemeOptions.map((item) => ({',
+                        "\t\t\ttext: lang === 'zh_CN' ? item.labelZh : item.labelEn",
+                        '\t\t}))',
+                        '\t);',
+                        '\tlet themeIndex = $state(0);',
+                        '',
+                        '\t$effect(() => {',
+                        '\t\tconst currentTheme = themeOptions[themeIndex]?.name;',
+                        '\t\tif (currentTheme) {',
+                        '\t\t\tswitchTheme(currentTheme);',
+                        '\t\t}',
+                        '\t});',
+                    ].join('\n');
+                    content = content.replace(
+                        /(\t\/\/ 日历\n\t\/\/ Calendar\n\tlet visible = \$state\(false\);)/,
+                        `$1${multiThemeBlock}`
+                    );
+                    // 在切换语言按钮后添加 Tabs 组件
+                    const multiThemeUi = [
+                        '</div>',
+                        '<div class="my-6">',
+                        '\t<Tabs tab={{ labels: themeLabels }} bind:active={themeIndex} />',
+                        '</div>',
+                    ].join('\n');
+                    content = content.replace(
+                        /<Button onclick=\{toggleLangFun\}>\{lang === 'zh_CN' \? '切换语言' : 'Toggle language'\}<\/Button>\n<\/div>/,
+                        `<Button onclick={toggleLangFun}>{lang === 'zh_CN' ? '切换语言' : 'Toggle language'}</Button>\n${multiThemeUi}`
+                    );
+                    return content;
+                }
+
+                // 全部主题模式：使用按钮随机切换主题
+                // All theme mode: use button to randomly switch theme
+                if (mode === 'all') {
+                    // 修改 stdf/theme 导入
+                    content = content.replace(
+                        /import \{ switchMode \} from 'stdf\/theme';/,
+                        "import { switchTheme, switchMode, themes, getTheme } from 'stdf/theme';"
+                    );
+                    // 在 // 日历 代码块后添加主题相关的 JS 代码
+                    const allThemeBlock = [
+                        '',
+                        '\t// 主题',
+                        '\t// Theme',
+                        '\tconst themeNames = themes.map((item) => item.name);',
+                        "\tlet theme = $state('STDF');",
+                        '\tlet currentTheme = $state(getTheme());',
+                        '\tconst randomThemeFun = () => {',
+                        '\t\tif (themeNames.length === 0) {',
+                        '\t\t\treturn;',
+                        '\t\t}',
+                        '\t\tconst index = Math.floor(Math.random() * themeNames.length);',
+                        '\t\ttheme = themeNames[index];',
+                        '\t};',
+                        '',
+                        '\t$effect(() => {',
+                        '\t\tif (theme) {',
+                        '\t\t\tswitchTheme(theme);',
+                        '\t\t\tcurrentTheme = getTheme();',
+                        '\t\t}',
+                        '\t});',
+                    ].join('\n');
+                    content = content.replace(
+                        /(\t\/\/ 日历\n\t\/\/ Calendar\n\tlet visible = \$state\(false\);)/,
+                        `$1${allThemeBlock}`
+                    );
+                    // 在切换语言按钮后添加随机主题按钮和主题名称显示
+                    content = content.replace(
+                        /<Button onclick=\{toggleLangFun\}>\{lang === 'zh_CN' \? '切换语言' : 'Toggle language'\}<\/Button>\n<\/div>/,
+                        `<Button onclick={toggleLangFun}>{lang === 'zh_CN' ? '切换语言' : 'Toggle language'}</Button>\n\t<Button fill="lineState" onclick={randomThemeFun}>{lang === 'zh_CN' ? '随机主题' : 'Random theme'}</Button>\n</div>\n<div class="my-6 text-center text-xs">{lang === 'zh_CN' ? '当前主题' : 'Current theme'}: {currentTheme}</div>`
+                    );
+                    return content;
+                }
+
+                return content;
+            };
+
+            const appCssPath = `${projectDir}/src/app.css`;
+            const appCssContent = fs.readFileSync(appCssPath, 'utf-8');
+            const nextAppCss = updateThemeCss(appCssContent, themeMode);
+            fs.writeFileSync(appCssPath, nextAppCss, 'utf-8');
+
+            const appSvelteContent = fs.readFileSync(appSveltePath, 'utf-8');
+            const nextAppSvelte = updateThemeSvelte(appSvelteContent, themeMode);
+            fs.writeFileSync(appSveltePath, nextAppSvelte, 'utf-8');
+
+            // 将修改后的 packageJson 写入到项目内的 package.json 文件中
+            // Write the modified packageJson to the package.json file in the project
+            fs.writeFileSync(`${projectDir}/package.json`, JSON.stringify(packageJson, null, 4), 'utf-8');
+
+            spinner.stop();
+            p.outro(`🎉🎉🎉 ${projectName} - ${lang.pcsucc}`);
+
+            // 获得依赖的版本号
+            // get the version number of the dependency
+            const BaseVersions = {
+                svelte: packageJson.devDependencies.svelte.replace('^', ''),
+                stdf: packageJson.devDependencies.stdf.replace('^', ''),
+                // vite: packageJson.devDependencies.vite.replace('^', ''),
+                // '@sveltejs/kit': packageJson.devDependencies['@sveltejs/kit'].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 {
+                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 BaseVersions) {
+                versionsString += bold(key) + ': ' + cyan(BaseVersions[key]) + ' ';
+            }
+
+            // 显示版本号
+            // Display version number
+            console.log(`📦 ${versionsString}
+                `);
+
+            // 显示提示信息
+            // Display prompt information
+            console.log(
+                `👉 ${bold(lang.tgs)}
+    ${blue(`1. cd ${projectName}`)}
+    ${blue(`2. ${packageManagerItem.install}`)}
+    ${blue(`3. ${packageManagerItem.dev}`)}
+    `,
+            );
+            // 提示配置主题色
+            // Prompt configuration theme color
+            console.log(`🎨 ${grey(isUno ? lang.pcyt_vu : lang.pcyt_vt)}`);
+
+            process.exit(0);
+        })
+        .catch(err => {
+            spinner.stop();
+            console.error(red(lang.cferror + '--' + err));
+            process.exit(1);
+        });
+}

packages/create/src/lang.js

@@ -0,0 +1,329 @@
+// 英语 english
+export const en_US = {
+    sort: 0,
+    name: 'English',
+    hnay: 'Has not adapted yet',
+    pn: 'Please enter the project name',
+    pncbne: 'Project name cannot be empty',
+    pane: 'Project name already exists, please change it!',
+    psat: 'Please select a template',
+    oc: 'Operation cancelled',
+    pca: 'Please choose again',
+    psai: 'Please select icon usage',
+    pstm: 'Please select theme mode',
+    pm: 'Please select package manager',
+    cfsing: 'Creating file...',
+    pcsucc: 'Project created successfully!',
+    tgs: 'To get started:',
+    pcyt_vt: 'Tip: please configure Initial Color System in src/app.css, reference https://stdf.design/guide/theme',
+    pcyt_vu: 'Tip: please configure Initial Color System in src/app.css, reference https://stdf.design/guide/theme',
+    cferror: 'Failed to create file',
+    pectn: 'Please enter the correct template name!',
+    pic: 'Please enter the correct icon usage!',
+    ptm: 'Please enter the correct theme mode!',
+    tms: 'Initial theme (STDF), add custom themes later',
+    tmm: '3 built-in themes',
+    tma: 'All 42 built-in themes',
+    iconSvgSymbolHint: 'Vite plugin for SVG symbol sprites (https://github.com/any-tdf/vite-plugin-svg-symbol)',
+    iconIconifyHint: 'Use Iconify icon sets with Tailwind CSS (https://iconify.design)',
+    iconBothHint: 'Use both SVG symbol sprites and Iconify',
+    iconNoneHint: 'No icon solution, configure manually later',
+    themeGeneratorHint: 'You can generate custom themes at https://stdf.design/guide/generator',
+};
+
+// 简体中文 chinese
+export const zh_CN = {
+    sort: 1,
+    name: '简体中文',
+    hnay: '暂未适配',
+    pn: '请输入项目名称',
+    pncbne: '项目名称不能为空',
+    pane: '项目名称已存在，请换一个！',
+    psat: '请选择一个模板',
+    oc: '操作已取消',
+    pca: '请重新选择',
+    psai: '请选择图标使用方式',
+    pstm: '请选择主题模式',
+    pm: '请选择包管理工具',
+    cfsing: '正在创建文件...',
+    pcsucc: '项目创建成功！',
+    tgs: '开始：',
+    pcyt_vt: '提示：请到 src/app.css 配置初始主题色，参考 https://stdf.design/guide/theme',
+    pcyt_vu: '提示：请到 src/app.css 配置初始主题色，参考 https://stdf.design/guide/theme',
+    cferror: '创建文件失败',
+    pectn: '请输入正确的模板名称！',
+    pic: '请输入正确的图标使用方式！',
+    ptm: '请输入正确的主题模式！',
+    tms: '初始主题（STDF），后续可增加自定义主题',
+    tmm: '内置 3 个主题',
+    tma: '全部 42 个内置主题',
+    iconSvgSymbolHint: 'SVG symbol 雪碧图 Vite 插件（https://github.com/any-tdf/vite-plugin-svg-symbol）',
+    iconIconifyHint: '配合 Tailwind CSS 使用 Iconify 图标集（https://iconify.design）',
+    iconBothHint: '同时使用 SVG symbol 雪碧图和 Iconify',
+    iconNoneHint: '不用处理图标，或后续配置',
+    themeGeneratorHint: '可到 https://stdf.design/guide/generator 配置生成自定义主题',
+};
+
+// 繁體中文 chinese traditional
+export const zh_TW = {
+    sort: 2,
+    name: '繁體中文',
+    hnay: '暫未適配',
+    pn: '請輸入項目名稱',
+    pncbne: '項目名稱不能為空',
+    pane: '項目名稱已存在，請換一個！',
+    psat: '請選擇一個模板',
+    oc: '操作已取消',
+    pca: '請重新選擇',
+    psai: '請選擇圖標使用方式',
+    pstm: '請選擇主題模式',
+    pm: '請選擇包管理工具',
+    cfsing: '正在創建文件...',
+    pcsucc: '項目創建成功！',
+    tgs: '開始：',
+    pcyt_vt: '提示：請到 src/app.css 配置初始主題色，參考 https://stdf.design/guide/theme',
+    pcyt_vu: '提示：請到 src/app.css 配置初始主題色，參考 https://stdf.design/guide/theme',
+    cferror: '創建文件失敗',
+    pectn: '請輸入正確的模板名稱！',
+    pic: '請輸入正確的圖標使用方式！',
+    ptm: '請輸入正確的主題模式！',
+    tms: '初始主題（STDF），後續可增加自定義主題',
+    tmm: '內置 3 個主題',
+    tma: '全部 42 個內置主題',
+    iconSvgSymbolHint: 'SVG symbol 雪碧圖 Vite 插件（https://github.com/any-tdf/vite-plugin-svg-symbol）',
+    iconIconifyHint: '配合 Tailwind CSS 使用 Iconify 圖標集（https://iconify.design）',
+    iconBothHint: '同時使用 SVG symbol 雪碧圖和 Iconify',
+    iconNoneHint: '不使用圖標方案，稍後手動配置',
+    themeGeneratorHint: '可到 https://stdf.design/guide/generator 配置生成自定義主題',
+};
+
+// 日语 japanese
+export const ja_JP = {
+    sort: 3,
+    name: '日本語',
+    hnay: 'まだ適応されていません',
+    pn: 'プロジェクト名を入力してください',
+    pncbne: 'プロジェクト名は空にできません',
+    pane: 'プロジェクト名が既に存在します，別の名前を入力してください！',
+    psat: 'テンプレートを選択してください',
+    oc: '操作がキャンセルされました',
+    pca: 'もう一度選択してください',
+    psai: 'アイコンの使用方法を選択してください',
+    pstm: 'Please select theme mode',
+    pm: 'パッケージマネージャーを選択してください',
+    cfsing: 'ファイルを作成しています...',
+    pcsucc: 'プロジェクトが正常に作成されました！',
+    tgs: '開始：',
+    pcyt_vt: 'ヒント：src/app.css ファイルで初期カラーシステムを設定し、参考 https://stdf.design/guide/theme',
+    pcyt_vu: 'ヒント：src/app.css ファイルで初期カラーシステムを設定し、参考 https://stdf.design/guide/theme',
+    cferror: 'ファイルの作成に失敗しました',
+    pectn: '正しいテンプレート名を入力してください！',
+    pic: '正しいアイコン使用方法を入力してください！',
+    ptm: 'Please enter the correct theme mode!',
+    tms: 'Initial theme (STDF), add custom themes later',
+    tmm: '3 built-in themes',
+    tma: 'All 42 built-in themes',
+    iconSvgSymbolHint: 'SVG シンボルスプライト用 Vite プラグイン（https://github.com/any-tdf/vite-plugin-svg-symbol）',
+    iconIconifyHint: 'Tailwind CSS で Iconify アイコンセットを使用（https://iconify.design）',
+    iconBothHint: 'SVG シンボルスプライトと Iconify の両方を使用',
+    iconNoneHint: 'アイコンソリューションなし、後で手動設定',
+    themeGeneratorHint: 'https://stdf.design/guide/generator でカスタムテーマを生成できます',
+};
+
+// 韩语 korean
+export const ko_KR = {
+    sort: 4,
+    name: '한국어',
+    hnay: '아직 적응하지 못했습니다',
+    pn: '프로젝트 이름을 입력하십시오',
+    pncbne: '프로젝트 이름은 비워 둘 수 없습니다',
+    pane: '프로젝트 이름이 이미 있습니다，다른 이름을 입력하십시오！',
+    psat: '템플릿을 선택하십시오',
+    oc: '작업이 취소되었습니다',
+    pca: '다시 선택하십시오',
+    psai: '아이콘 사용 방법을 선택하십시오',
+    pstm: 'Please select theme mode',
+    pm: '패키지 관리자를 선택하십시오',
+    cfsing: '파일을 만드는 중입니다...',
+    pcsucc: '프로젝트가 성공적으로 생성되었습니다！',
+    tgs: '시작：',
+    pcyt_vt: '팁: src/app.css 파일에서 초기 색상 시스템을 구성하고 참조 https://stdf.design/guide/theme',
+    pcyt_vu: '팁: src/app.css 파일에서 초기 색상 시스템을 구성하고 참조 https://stdf.design/guide/theme',
+    cferror: '파일 생성 실패',
+    pectn: '올바른 템플릿 이름을 입력하십시오!',
+    pic: '올바른 아이콘 사용 방법을 입력하십시오!',
+    ptm: 'Please enter the correct theme mode!',
+    tms: 'Initial theme (STDF), add custom themes later',
+    tmm: '3 built-in themes',
+    tma: 'All 42 built-in themes',
+    iconSvgSymbolHint: 'SVG 심볼 스프라이트용 Vite 플러그인 (https://github.com/any-tdf/vite-plugin-svg-symbol)',
+    iconIconifyHint: 'Tailwind CSS 와 함께 Iconify 아이콘 세트 사용 (https://iconify.design)',
+    iconBothHint: 'SVG 심볼 스프라이트와 Iconify 모두 사용',
+    iconNoneHint: '아이콘 솔루션 없음, 나중에 수동 구성',
+    themeGeneratorHint: 'https://stdf.design/guide/generator 에서 사용자 정의 테마를 생성할 수 있습니다',
+};
+
+// 西班牙语 spanish
+export const es_ES = {
+    sort: 5,
+    name: 'Español',
+    hnay: 'Aún no se ha adaptado',
+    pn: 'Por favor ingrese el nombre del proyecto',
+    pncbne: 'El nombre del proyecto no puede estar vacío',
+    pane: 'El nombre del proyecto ya existe, por favor ingrese otro nombre!',
+    psat: 'Por favor seleccione una plantilla',
+    oc: 'Operación cancelada',
+    pca: 'Por favor, elija de nuevo',
+    psai: 'Por favor seleccione el uso de iconos',
+    pstm: 'Please select theme mode',
+    pm: 'Por favor seleccione un administrador de paquetes',
+    cfsing: 'Creando archivo...',
+    pcsucc: 'Proyecto creado con éxito!',
+    tgs: 'Para empezar:',
+    pcyt_vt: 'Consejo: configure su sistema de colores en reference https://stdf.design/guide/theme',
+    pcyt_vu: 'Consejo: configure su sistema de colores en reference https://stdf.design/guide/theme',
+    cferror: 'Error al crear archivo',
+    pectn: '¡Por favor ingrese el nombre de la plantilla correcto!',
+    pic: '¡Por favor ingrese el uso correcto de iconos!',
+    ptm: 'Please enter the correct theme mode!',
+    tms: 'Initial theme (STDF), add custom themes later',
+    tmm: '3 built-in themes',
+    tma: 'All 42 built-in themes',
+    iconSvgSymbolHint: 'Plugin Vite para sprites de símbolos SVG (https://github.com/any-tdf/vite-plugin-svg-symbol)',
+    iconIconifyHint: 'Usar conjuntos de iconos Iconify con Tailwind CSS (https://iconify.design)',
+    iconBothHint: 'Usar tanto sprites de símbolos SVG como Iconify',
+    iconNoneHint: 'Sin solución de iconos, configurar manualmente después',
+    themeGeneratorHint: 'Puede generar temas personalizados en https://stdf.design/guide/generator',
+};
+
+// 俄语 russian
+export const ru_RU = {
+    sort: 6,
+    name: 'Русский',
+    hnay: 'Еще не адаптировано',
+    pn: 'Пожалуйста, введите название проекта',
+    pncbne: 'Название проекта не может быть пустым',
+    pane: 'Название проекта уже существует, пожалуйста, введите другое название!',
+    psat: 'Пожалуйста, выберите шаблон',
+    oc: 'Операция отменена',
+    pca: 'Пожалуйста, выберите снова',
+    psai: 'Пожалуйста, выберите использование иконок',
+    pstm: 'Please select theme mode',
+    pm: 'Пожалуйста, выберите пакетный менеджер',
+    cfsing: 'Создание файла...',
+    pcsucc: 'Проект успешно создан!',
+    tgs: 'Чтобы начать:',
+    pcyt_vt: 'Совет: настройте свой цветовой систему в ссылке https://stdf.design/guide/theme',
+    pcyt_vu: 'Совет: настройте свой цветовой систему в ссылке https://stdf.design/guide/theme',
+    cferror: 'Не удалось создать файл',
+    pectn: 'Пожалуйста, введите правильное название шаблона!',
+    pic: 'Пожалуйста, введите правильное использование иконок!',
+    ptm: 'Please enter the correct theme mode!',
+    tms: 'Initial theme (STDF), add custom themes later',
+    tmm: '3 built-in themes',
+    tma: 'All 42 built-in themes',
+    iconSvgSymbolHint: 'Плагин Vite для SVG символьных спрайтов (https://github.com/any-tdf/vite-plugin-svg-symbol)',
+    iconIconifyHint: 'Использовать наборы иконок Iconify с Tailwind CSS (https://iconify.design)',
+    iconBothHint: 'Использовать как SVG символьные спрайты, так и Iconify',
+    iconNoneHint: 'Без решения для иконок, настроить вручную позже',
+    themeGeneratorHint: 'Вы можете создать пользовательские темы на https://stdf.design/guide/generator',
+};
+
+// 法语 french
+export const fr_FR = {
+    sort: 7,
+    name: 'Français',
+    hnay: "N'a pas encore adapté",
+    pn: 'Veuillez saisir le nom du projet',
+    pncbne: 'Le nom du projet ne peut pas être vide',
+    pane: 'Le nom du projet existe déjà, veuillez entrer un autre nom!',
+    psat: 'Veuillez sélectionner un modèle',
+    oc: 'Opération annulée',
+    pca: 'Veuillez choisir à nouveau',
+    psai: "Veuillez sélectionner le mode d'utilisation des icônes",
+    pstm: 'Please select theme mode',
+    pm: 'Veuillez sélectionner un gestionnaire de paquets',
+    cfsing: 'Création de fichier...',
+    pcsucc: 'Projet créé avec succès!',
+    tgs: 'Pour commencer:',
+    pcyt_vt: 'Conseil: veuillez configurer votre système de couleurs dans reference https://stdf.design/guide/theme',
+    pcyt_vu: 'Conseil: veuillez configurer votre système de couleurs dans reference https://stdf.design/guide/theme',
+    cferror: 'Échec de la création du fichier',
+    pectn: 'Veuillez saisir le nom du modèle correct!',
+    pic: "Veuillez saisir le mode d'utilisation correct des icônes!",
+    ptm: 'Please enter the correct theme mode!',
+    tms: 'Initial theme (STDF), add custom themes later',
+    tmm: '3 built-in themes',
+    tma: 'All 42 built-in themes',
+    iconSvgSymbolHint: 'Plugin Vite pour les sprites de symboles SVG (https://github.com/any-tdf/vite-plugin-svg-symbol)',
+    iconIconifyHint: "Utiliser les ensembles d'icônes Iconify avec Tailwind CSS (https://iconify.design)",
+    iconBothHint: 'Utiliser à la fois les sprites de symboles SVG et Iconify',
+    iconNoneHint: "Pas de solution d'icônes, configurer manuellement plus tard",
+    themeGeneratorHint: 'Vous pouvez générer des thèmes personnalisés sur https://stdf.design/guide/generator',
+};
+
+// 德语 german
+export const de_DE = {
+    sort: 8,
+    name: 'Deutsch',
+    hnay: 'Noch nicht angepasst',
+    pn: 'Bitte geben Sie den Projektnamen ein',
+    pncbne: 'Projektname darf nicht leer sein',
+    pane: 'Projektname existiert bereits, bitte geben Sie einen anderen Namen ein!',
+    psat: 'Bitte wählen Sie eine Vorlage aus',
+    oc: 'Vorgang abgebrochen',
+    pca: 'Bitte wählen Sie erneut',
+    psai: 'Bitte wählen Sie die Verwendung von Icons',
+    pstm: 'Please select theme mode',
+    pm: 'Bitte wählen Sie einen Paketmanager aus',
+    cfsing: 'Erstelle Datei...',
+    pcsucc: 'Projekt erfolgreich erstellt!',
+    tgs: 'Um zu beginnen:',
+    pcyt_vt: 'Tip: please configure your color system in reference https://stdf.design/guide/theme',
+    pcyt_vu: 'Tip: please configure your color system in reference https://stdf.design/guide/theme',
+    cferror: 'Fehler beim Erstellen der Datei',
+    pectn: 'Bitte geben Sie den richtigen Vorlagennamen ein!',
+    pic: 'Bitte geben Sie den richtigen Verwendungsmodus für Icons ein!',
+    ptm: 'Please enter the correct theme mode!',
+    tms: 'Initial theme (STDF), add custom themes later',
+    tmm: '3 built-in themes',
+    tma: 'All 42 built-in themes',
+    iconSvgSymbolHint: 'Vite-Plugin für SVG-Symbol-Sprites (https://github.com/any-tdf/vite-plugin-svg-symbol)',
+    iconIconifyHint: 'Iconify-Icon-Sets mit Tailwind CSS verwenden (https://iconify.design)',
+    iconBothHint: 'Sowohl SVG-Symbol-Sprites als auch Iconify verwenden',
+    iconNoneHint: 'Keine Icon-Lösung, später manuell konfigurieren',
+    themeGeneratorHint: 'Sie können benutzerdefinierte Themen unter https://stdf.design/guide/generator erstellen',
+};
+
+// 意大利语 italian
+export const it_IT = {
+    sort: 9,
+    name: 'Italiano',
+    hnay: 'Non ancora adattato',
+    pn: 'Inserisci il nome del progetto',
+    pncbne: 'Il nome del progetto non può essere vuoto',
+    pane: 'Il nome del progetto esiste già, inserisci un altro nome!',
+    psat: 'Seleziona un modello',
+    oc: 'Operazione annullata',
+    pca: 'Seleziona di nuovo',
+    psai: 'Seleziona il modo di utilizzo delle icone',
+    pstm: 'Please select theme mode',
+    pm: 'Seleziona un gestore di pacchetti',
+    cfsing: 'Creazione del file in corso...',
+    pcsucc: 'Progetto creato con successo!',
+    tgs: 'Per iniziare:',
+    pcyt_vt: 'Consiglio: configura il tuo sistema di colori in https://stdf.design/guide/theme',
+    pcyt_vu: 'Consiglio: configura il tuo sistema di colori in https://stdf.design/guide/theme',
+    cferror: 'Impossibile creare il file',
+    pectn: 'Inserisci il nome del modello corretto!',
+    pic: 'Inserisci il modo di utilizzo corretto delle icone!',
+    ptm: 'Please enter the correct theme mode!',
+    tms: 'Initial theme (STDF), add custom themes later',
+    tmm: '3 built-in themes',
+    tma: 'All 42 built-in themes',
+    iconSvgSymbolHint: 'Plugin Vite per sprite di simboli SVG (https://github.com/any-tdf/vite-plugin-svg-symbol)',
+    iconIconifyHint: 'Usa set di icone Iconify con Tailwind CSS (https://iconify.design)',
+    iconBothHint: 'Usa sia sprite di simboli SVG che Iconify',
+    iconNoneHint: 'Nessuna soluzione per icone, configurare manualmente in seguito',
+    themeGeneratorHint: 'Puoi generare temi personalizzati su https://stdf.design/guide/generator',
+};

packages/create/templates/skt/package.json

@@ -0,0 +1,37 @@
+{
+	"name": "skt",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^2.0.1",
+		"@eslint/js": "^9.39.2",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.1",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@sveltejs/acorn-typescript": "^1.0.8",
+		"@tailwindcss/vite": "^4.1.18",
+		"eslint": "^9.39.2",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.14.0",
+		"globals": "^17.1.0",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.4.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"svelte": "^5.48.0",
+		"svelte-check": "^4.3.5",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1"
+	}
+}

packages/create/templates/skt/src/app.css

@@ -0,0 +1,78 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where([data-mode=dark], [data-mode=dark] *):not(:where([data-mode=light], [data-mode=light] *):not([data-mode=dark], [data-mode=dark] *)));
+
+@theme {
+	--color-primary-50: oklch(0.97 0.036 276.886); /* #eef4ff rgb(238, 244, 255) */
+	--color-primary-100: oklch(0.882 0.071 274.886); /* #cad5ff rgb(202, 213, 255) */
+	--color-primary-200: oklch(0.795 0.105 272.886); /* #a5b8ff rgb(165, 184, 255) */
+	--color-primary-300: oklch(0.707 0.14 270.886); /* #809af8 rgb(128, 154, 248) */
+	--color-primary-400: oklch(0.62 0.174 268.886); /* #5c7cee rgb(92, 124, 238) */
+	--color-primary-500: oklch(0.532 0.209 266.886); /* #365ce3 rgb(54, 92, 227) */
+	--color-primary: oklch(0.444 0.243 264.886); /* #0e36d6 rgb(14, 54, 214) */
+	--color-primary-700: oklch(0.396 0.263 262.886); /* #0015d0 rgb(0, 21, 208) */
+	--color-primary-800: oklch(0.347 0.267 260.886); /* #0000c0 rgb(0, 0, 192) */
+	--color-primary-900: oklch(0.299 0.267 258.886); /* #0000af rgb(0, 0, 175) */
+	--color-primary-950: oklch(0.25 0.267 256.886); /* #01009d rgb(1, 0, 157) */
+
+	--color-dark-50: oklch(0.97 0.023 68.597); /* #fff3e5 rgb(255, 243, 229) */
+	--color-dark-100: oklch(0.949 0.045 70.597); /* #ffeace rgb(255, 234, 206) */
+	--color-dark-200: oklch(0.928 0.066 72.597); /* #ffe1b7 rgb(255, 225, 183) */
+	--color-dark-300: oklch(0.907 0.088 74.597); /* #ffd89f rgb(255, 216, 159) */
+	--color-dark-400: oklch(0.887 0.11 76.597); /* #ffd084 rgb(255, 208, 132) */
+	--color-dark-500: oklch(0.866 0.131 78.597); /* #ffc868 rgb(255, 200, 104) */
+	--color-dark: oklch(0.845 0.153 80.597); /* #ffc042 rgb(255, 192, 66) */
+	--color-dark-700: oklch(0.696 0.168 82.597); /* #cf9000 rgb(207, 144, 0) */
+	--color-dark-800: oklch(0.547 0.168 84.597); /* #9d6400 rgb(157, 100, 0) */
+	--color-dark-900: oklch(0.399 0.168 86.597); /* #6e3a00 rgb(110, 58, 0) */
+	--color-dark-950: oklch(0.25 0.168 88.597); /* #411000 rgb(65, 16, 0) */
+
+	--color-success: oklch(0.704 0.142 167.084); /* #0fbb8d rgb(15, 187, 141) */
+	--color-warning: oklch(0.558 0.153 47.186); /* #b95002 rgb(185, 80, 2) */
+	--color-error: oklch(0.564 0.223 28.46); /* #da1514 rgb(218, 21, 20) */
+	--color-info: oklch(0.482 0.14 261.518); /* #2e5aac rgb(46, 90, 172) */
+
+	--color-blue: oklch(0.6 0.2 250); /* #0081f1 rgb(0, 129, 241) */
+	--color-purple: oklch(0.6 0.2 300); /* #955be3 rgb(149, 91, 227) */
+	--color-orange: oklch(0.7 0.18 50); /* #f37513 rgb(243, 117, 19) */
+	--color-cyan: oklch(0.7 0.15 190); /* #00bbb3 rgb(0, 187, 179) */
+
+	--color-black: oklch(0 0 0); /* #000000 rgb(0, 0, 0) */
+	--color-white: oklch(1 0 0); /* #FFFFFF rgb(255, 255, 255) */
+	--color-gray-50: oklch(0.961 0 0); /* #F5F5F5 rgb(245, 245, 245) */
+	--color-gray-100: oklch(0.925 0 0); /* #E8E8E8 rgb(232, 232, 232) */
+	--color-gray-200: oklch(0.845 0 0); /* #D1D1D1 rgb(209, 209, 209) */
+	--color-gray-300: oklch(0.767 0 0); /* #B8B8B8 rgb(184, 184, 184) */
+	--color-gray-400: oklch(0.683 0 0); /* #9E9E9E rgb(158, 158, 158) */
+	--color-gray-500: oklch(0.6 0 0); /* #858585 rgb(133, 133, 133) */
+	--color-gray-600: oklch(0.51 0 0); /* #6B6B6B rgb(107, 107, 107) */
+	--color-gray-700: oklch(0.42 0 0); /* #525252 rgb(82, 82, 82) */
+	--color-gray-800: oklch(0.321 0 0); /* #383838 rgb(56, 56, 56) */
+	--color-gray-900: oklch(0.218 0 0); /* #1F1F1F rgb(31, 31, 31) */
+	--color-gray-950: oklch(0.159 0 0); /* #121212 rgb(18, 18, 18) */
+	--color-transparent: transparent;
+
+	--color-bg-base: oklch(0.967 0.016 264.84); /* #eff4ff rgb(239, 244, 255) */
+	--color-bg-surface: oklch(0.978 0 80.342); /* #f8f8f8 rgb(248, 248, 248) */
+	--color-bg-overlay: oklch(0.961 0 93.125); /* #f2f2f2 rgb(242, 242, 242) */
+	--color-bg-highlight: oklch(0.961 0.017 279.375); /* #eff1fe rgb(239, 241, 254) */
+	--color-bg-base-dark: oklch(0.167 0.015 80.342); /* #120e07 rgb(18, 14, 7) */
+	--color-bg-surface-dark: oklch(0.178 0.017 264.84); /* #0d1119 rgb(13, 17, 25) */
+	--color-bg-overlay-dark: oklch(0.233 0.001 264.84); /* #1d1e1e rgb(29, 30, 30) */
+	--color-bg-highlight-dark: oklch(0.178 0.019 80.342); /* #161008 rgb(22, 16, 8) */
+
+	--color-text-primary: oklch(0.144 0.016 245.938); /* #050b10 rgb(5, 11, 16) */
+	--color-text-dark: oklch(0.917 0.039 89.688); /* #eee3c7 rgb(238, 227, 199) */
+	--color-text-on-primary: oklch(0.883 0.043 79.063); /* #e8d6b9 rgb(232, 214, 185) */
+	--color-text-on-dark: oklch(0.189 0.05 262.813); /* #07122a rgb(7, 18, 42) */
+
+	--radius-box: 0.5rem;
+	--radius-form: 0.25rem;
+	--radius-small: calc(infinity * 1px);
+}
+
+@source "../node_modules/stdf/**/*.svelte";
+
+html {
+	-webkit-tap-highlight-color: transparent;
+}

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

@@ -9,7 +9,7 @@
 		%sveltekit.head%
 	</head>
 
-	<body data-sveltekit-preload-data="hover" class="bg-primaryWhite dark:bg-darkBlack text-black dark:text-white">
+	<body data-sveltekit-preload-data="hover" class="bg-bg-base dark:bg-bg-base-dark text-text-primary dark:text-text-dark">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>

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

@@ -1,47 +1,44 @@
 <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 { Button, ButtonGroup, Cell, Icon, Calendar } from 'stdf';
+	import { switchMode } from 'stdf/theme';
 	import { en_US, zh_CN } from 'stdf/lang';
 	import Counter from './Counter.svelte';
 
 	import { browser } from '$app/environment';
 
 	if (browser) {
-		//解决 ios 不支持按钮:active 伪类
-		// Solve the problem that ios does not support the button: active pseudo class
+		// 解决 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');
+	// 切换亮暗模式
+	// Toggle light or dark mode
+	let mode = $state(sessionStorage.getItem('mode') === 'dark' ? 'dark' : 'primary');
 
 	$effect(() => {
-		if (mode === 'dark') {
-			darkMode(true);
-		} else {
-			darkMode(false);
-		}
+		switchMode(mode === 'dark' ? 'dark' : 'primary');
 	});
 	const toggleModeFun = () => {
 		if (mode === 'dark') {
-			// 切换到 (light switch to light)
-			mode = 'light';
-			darkMode(false);
-			sessionStorage.setItem('mode', 'light');
+			// 切换到亮色模式
+			// Switch to primary mode
+			mode = 'primary';
+			sessionStorage.setItem('mode', 'primary');
 		} else {
-			// 切换到 (dark switch to dark)
+			// 切换到暗色模式
+			// Switch to dark mode
 			mode = 'dark';
-			darkMode(true);
 			sessionStorage.setItem('mode', 'dark');
 		}
 	};
 
-	// 设置语言 (setting language)
+	// 设置语言
+	// Set 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 = () => {
@@ -50,7 +47,8 @@
 		window.location.reload();
 	};
 
-	// 进度条 (percent)
+	// 进度条
+	// Percent
 	let percent = $state(20);
 	const reduceFunc = () => {
 		if (percent > 0) {
@@ -63,20 +61,9 @@
 		}
 	};
 
-	// 日历(calendar)
+	// 日历
+	// 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">
@@ -87,12 +74,17 @@
 		<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">
+		<svg class="h-full w-full" width="32" height="32" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
 			<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"
+				fill="currentColor"
+				d="M40 0C54.8054 0 67.7312 8.04427 74.6475 20H30V30H40C45.5228 30 50 34.4772 50 40C50 45.5228 45.5228 50 40 50H30V80H10V20H0V0H40ZM78.7393 30C79.5619 33.1962 80 36.547 80 40C80 62.0914 62.0914 80 40 80V60C51.0457 60 60 51.0457 60 40C60 36.3571 59.0259 32.9417 57.3242 30H78.7393Z"
+			/>
+			<path
+				class="text-dark dark:text-primary"
+				fill="currentColor"
+				d="M20 30H40L20 80V50H0L20 0V30Z"
 			/>
-			<path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
 		</svg>
 	</a>
 </div>
@@ -121,21 +113,19 @@
 	<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>
+	<ButtonGroup
+		fill="lineState"
+		items={[
+			{ text: '-10', onclick: reduceFunc },
+			{ text: '+10', onclick: increaseFunc },
+			{ text: lang === 'zh_CN' ? '重置' : 'Reset', onclick: () => (percent = 20) }
+		]}
+	/>
 </div>
 <div class="my-6">
-	<Button fill="lineTheme" onclick={() => (visible = true)}>{lang === 'zh_CN' ? '日历' : 'Calendar'}</Button>
+	<Button fill="lineState" 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/templates/skt/static/stdf.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 0C54.8054 0 67.7312 8.04427 74.6475 20H30V30H40C45.5228 30 50 34.4772 50 40C50 45.5228 45.5228 50 40 50H30V80H10V20H0V0H40ZM78.7393 30C79.5619 33.1962 80 36.547 80 40C80 62.0914 62.0914 80 40 80V60C51.0457 60 60 51.0457 60 40C60 36.3571 59.0259 32.9417 57.3242 30H78.7393Z" fill="#0B24FB"/>
+<path d="M20 30H40L20 80V50H0L20 0V30Z" fill="#FFC042"/>
+</svg>

packages/create/templates/skt/static/stdf_dark.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 0C54.8054 0 67.7312 8.04427 74.6475 20H30V30H40C45.5228 30 50 34.4772 50 40C50 45.5228 45.5228 50 40 50H30V80H10V20H0V0H40ZM78.7393 30C79.5619 33.1962 80 36.547 80 40C80 62.0914 62.0914 80 40 80V60C51.0457 60 60 51.0457 60 40C60 36.3571 59.0259 32.9417 57.3242 30H78.7393Z" fill="#FFC042"/>
+<path d="M20 30H40L20 80V50H0L20 0V30Z" fill="#0B24FB"/>
+</svg>

packages/create/templates/sktt/package.json

@@ -0,0 +1,37 @@
+{
+	"name": "sktt",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^2.0.1",
+		"@eslint/js": "^9.39.2",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.1",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/vite": "^4.1.18",
+		"eslint": "^9.39.2",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.14.0",
+		"globals": "^17.1.0",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.4.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"svelte": "^5.48.0",
+		"svelte-check": "^4.3.5",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.53.1",
+		"vite": "^7.3.1"
+	}
+}

packages/create/templates/sktt/src/app.css

@@ -0,0 +1,78 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where([data-mode=dark], [data-mode=dark] *):not(:where([data-mode=light], [data-mode=light] *):not([data-mode=dark], [data-mode=dark] *)));
+
+@theme {
+	--color-primary-50: oklch(0.97 0.036 276.886); /* #eef4ff rgb(238, 244, 255) */
+	--color-primary-100: oklch(0.882 0.071 274.886); /* #cad5ff rgb(202, 213, 255) */
+	--color-primary-200: oklch(0.795 0.105 272.886); /* #a5b8ff rgb(165, 184, 255) */
+	--color-primary-300: oklch(0.707 0.14 270.886); /* #809af8 rgb(128, 154, 248) */
+	--color-primary-400: oklch(0.62 0.174 268.886); /* #5c7cee rgb(92, 124, 238) */
+	--color-primary-500: oklch(0.532 0.209 266.886); /* #365ce3 rgb(54, 92, 227) */
+	--color-primary: oklch(0.444 0.243 264.886); /* #0e36d6 rgb(14, 54, 214) */
+	--color-primary-700: oklch(0.396 0.263 262.886); /* #0015d0 rgb(0, 21, 208) */
+	--color-primary-800: oklch(0.347 0.267 260.886); /* #0000c0 rgb(0, 0, 192) */
+	--color-primary-900: oklch(0.299 0.267 258.886); /* #0000af rgb(0, 0, 175) */
+	--color-primary-950: oklch(0.25 0.267 256.886); /* #01009d rgb(1, 0, 157) */
+
+	--color-dark-50: oklch(0.97 0.023 68.597); /* #fff3e5 rgb(255, 243, 229) */
+	--color-dark-100: oklch(0.949 0.045 70.597); /* #ffeace rgb(255, 234, 206) */
+	--color-dark-200: oklch(0.928 0.066 72.597); /* #ffe1b7 rgb(255, 225, 183) */
+	--color-dark-300: oklch(0.907 0.088 74.597); /* #ffd89f rgb(255, 216, 159) */
+	--color-dark-400: oklch(0.887 0.11 76.597); /* #ffd084 rgb(255, 208, 132) */
+	--color-dark-500: oklch(0.866 0.131 78.597); /* #ffc868 rgb(255, 200, 104) */
+	--color-dark: oklch(0.845 0.153 80.597); /* #ffc042 rgb(255, 192, 66) */
+	--color-dark-700: oklch(0.696 0.168 82.597); /* #cf9000 rgb(207, 144, 0) */
+	--color-dark-800: oklch(0.547 0.168 84.597); /* #9d6400 rgb(157, 100, 0) */
+	--color-dark-900: oklch(0.399 0.168 86.597); /* #6e3a00 rgb(110, 58, 0) */
+	--color-dark-950: oklch(0.25 0.168 88.597); /* #411000 rgb(65, 16, 0) */
+
+	--color-success: oklch(0.704 0.142 167.084); /* #0fbb8d rgb(15, 187, 141) */
+	--color-warning: oklch(0.558 0.153 47.186); /* #b95002 rgb(185, 80, 2) */
+	--color-error: oklch(0.564 0.223 28.46); /* #da1514 rgb(218, 21, 20) */
+	--color-info: oklch(0.482 0.14 261.518); /* #2e5aac rgb(46, 90, 172) */
+
+	--color-blue: oklch(0.6 0.2 250); /* #0081f1 rgb(0, 129, 241) */
+	--color-purple: oklch(0.6 0.2 300); /* #955be3 rgb(149, 91, 227) */
+	--color-orange: oklch(0.7 0.18 50); /* #f37513 rgb(243, 117, 19) */
+	--color-cyan: oklch(0.7 0.15 190); /* #00bbb3 rgb(0, 187, 179) */
+
+	--color-black: oklch(0 0 0); /* #000000 rgb(0, 0, 0) */
+	--color-white: oklch(1 0 0); /* #FFFFFF rgb(255, 255, 255) */
+	--color-gray-50: oklch(0.961 0 0); /* #F5F5F5 rgb(245, 245, 245) */
+	--color-gray-100: oklch(0.925 0 0); /* #E8E8E8 rgb(232, 232, 232) */
+	--color-gray-200: oklch(0.845 0 0); /* #D1D1D1 rgb(209, 209, 209) */
+	--color-gray-300: oklch(0.767 0 0); /* #B8B8B8 rgb(184, 184, 184) */
+	--color-gray-400: oklch(0.683 0 0); /* #9E9E9E rgb(158, 158, 158) */
+	--color-gray-500: oklch(0.6 0 0); /* #858585 rgb(133, 133, 133) */
+	--color-gray-600: oklch(0.51 0 0); /* #6B6B6B rgb(107, 107, 107) */
+	--color-gray-700: oklch(0.42 0 0); /* #525252 rgb(82, 82, 82) */
+	--color-gray-800: oklch(0.321 0 0); /* #383838 rgb(56, 56, 56) */
+	--color-gray-900: oklch(0.218 0 0); /* #1F1F1F rgb(31, 31, 31) */
+	--color-gray-950: oklch(0.159 0 0); /* #121212 rgb(18, 18, 18) */
+	--color-transparent: transparent;
+
+	--color-bg-base: oklch(0.967 0.016 264.84); /* #eff4ff rgb(239, 244, 255) */
+	--color-bg-surface: oklch(0.978 0 80.342); /* #f8f8f8 rgb(248, 248, 248) */
+	--color-bg-overlay: oklch(0.961 0 93.125); /* #f2f2f2 rgb(242, 242, 242) */
+	--color-bg-highlight: oklch(0.961 0.017 279.375); /* #eff1fe rgb(239, 241, 254) */
+	--color-bg-base-dark: oklch(0.167 0.015 80.342); /* #120e07 rgb(18, 14, 7) */
+	--color-bg-surface-dark: oklch(0.178 0.017 264.84); /* #0d1119 rgb(13, 17, 25) */
+	--color-bg-overlay-dark: oklch(0.233 0.001 264.84); /* #1d1e1e rgb(29, 30, 30) */
+	--color-bg-highlight-dark: oklch(0.178 0.019 80.342); /* #161008 rgb(22, 16, 8) */
+
+	--color-text-primary: oklch(0.144 0.016 245.938); /* #050b10 rgb(5, 11, 16) */
+	--color-text-dark: oklch(0.917 0.039 89.688); /* #eee3c7 rgb(238, 227, 199) */
+	--color-text-on-primary: oklch(0.883 0.043 79.063); /* #e8d6b9 rgb(232, 214, 185) */
+	--color-text-on-dark: oklch(0.189 0.05 262.813); /* #07122a rgb(7, 18, 42) */
+
+	--radius-box: 0.5rem;
+	--radius-form: 0.25rem;
+	--radius-small: calc(infinity * 1px);
+}
+
+@source "../node_modules/stdf/**/*.svelte";
+
+html {
+	-webkit-tap-highlight-color: transparent;
+}

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

@@ -9,7 +9,7 @@
 		%sveltekit.head%
 	</head>
 
-	<body data-sveltekit-preload-data="hover" class="bg-primaryWhite dark:bg-darkBlack text-black dark:text-white">
+	<body data-sveltekit-preload-data="hover" class="bg-bg-base dark:bg-bg-base-dark text-text-primary dark:text-text-dark">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>

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

@@ -1,47 +1,44 @@
 <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 { Button, ButtonGroup, Cell, Icon, Calendar } from 'stdf';
+	import { switchMode } from 'stdf/theme';
 	import { en_US, zh_CN } from 'stdf/lang';
 	import Counter from './Counter.svelte';
 
 	import { browser } from '$app/environment';
 
 	if (browser) {
-		//解决 ios 不支持按钮:active 伪类
-		// Solve the problem that ios does not support the button: active pseudo class
+		// 解决 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');
+	// 切换亮暗模式
+	// Toggle light or dark mode
+	let mode = $state(sessionStorage.getItem('mode') === 'dark' ? 'dark' : 'primary');
 
 	$effect(() => {
-		if (mode === 'dark') {
-			darkMode(true);
-		} else {
-			darkMode(false);
-		}
+		switchMode(mode === 'dark' ? 'dark' : 'primary');
 	});
 	const toggleModeFun = () => {
 		if (mode === 'dark') {
-			// 切换到 (light switch to light)
-			mode = 'light';
-			darkMode(false);
-			sessionStorage.setItem('mode', 'light');
+			// 切换到亮色模式
+			// Switch to primary mode
+			mode = 'primary';
+			sessionStorage.setItem('mode', 'primary');
 		} else {
-			// 切换到 (dark switch to dark)
+			// 切换到暗色模式
+			// Switch to dark mode
 			mode = 'dark';
-			darkMode(true);
 			sessionStorage.setItem('mode', 'dark');
 		}
 	};
 
-	// 设置语言 (setting language)
+	// 设置语言
+	// Set 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 = () => {
@@ -50,7 +47,8 @@
 		window.location.reload();
 	};
 
-	// 进度条 (percent)
+	// 进度条
+	// Percent
 	let percent = $state(20);
 	const reduceFunc = () => {
 		if (percent > 0) {
@@ -63,20 +61,9 @@
 		}
 	};
 
-	// 日历(calendar)
+	// 日历
+	// 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">
@@ -90,12 +77,17 @@
 		<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">
+		<svg class="h-full w-full" width="32" height="32" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
 			<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"
+				fill="currentColor"
+				d="M40 0C54.8054 0 67.7312 8.04427 74.6475 20H30V30H40C45.5228 30 50 34.4772 50 40C50 45.5228 45.5228 50 40 50H30V80H10V20H0V0H40ZM78.7393 30C79.5619 33.1962 80 36.547 80 40C80 62.0914 62.0914 80 40 80V60C51.0457 60 60 51.0457 60 40C60 36.3571 59.0259 32.9417 57.3242 30H78.7393Z"
+			/>
+			<path
+				class="text-dark dark:text-primary"
+				fill="currentColor"
+				d="M20 30H40L20 80V50H0L20 0V30Z"
 			/>
-			<path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
 		</svg>
 	</a>
 </div>
@@ -124,21 +116,19 @@
 	<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>
+	<ButtonGroup
+		fill="lineState"
+		items={[
+			{ text: '-10', onclick: reduceFunc },
+			{ text: '+10', onclick: increaseFunc },
+			{ text: lang === 'zh_CN' ? '重置' : 'Reset', onclick: () => (percent = 20) }
+		]}
+	/>
 </div>
 <div class="my-6">
-	<Button fill="lineTheme" onclick={() => (visible = true)}>{lang === 'zh_CN' ? '日历' : 'Calendar'}</Button>
+	<Button fill="lineState" 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/templates/sktt/static/stdf.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 0C54.8054 0 67.7312 8.04427 74.6475 20H30V30H40C45.5228 30 50 34.4772 50 40C50 45.5228 45.5228 50 40 50H30V80H10V20H0V0H40ZM78.7393 30C79.5619 33.1962 80 36.547 80 40C80 62.0914 62.0914 80 40 80V60C51.0457 60 60 51.0457 60 40C60 36.3571 59.0259 32.9417 57.3242 30H78.7393Z" fill="#0B24FB"/>
+<path d="M20 30H40L20 80V50H0L20 0V30Z" fill="#FFC042"/>
+</svg>

packages/create/templates/sktt/static/stdf_dark.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 0C54.8054 0 67.7312 8.04427 74.6475 20H30V30H40C45.5228 30 50 34.4772 50 40C50 45.5228 45.5228 50 40 50H30V80H10V20H0V0H40ZM78.7393 30C79.5619 33.1962 80 36.547 80 40C80 62.0914 62.0914 80 40 80V60C51.0457 60 60 51.0457 60 40C60 36.3571 59.0259 32.9417 57.3242 30H78.7393Z" fill="#FFC042"/>
+<path d="M20 30H40L20 80V50H0L20 0V30Z" fill="#0B24FB"/>
+</svg>

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

@@ -7,7 +7,7 @@
 		<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">
+	<body class="bg-bg-base dark:bg-bg-base-dark text-text-primary dark:text-text-dark">
 		<div id="app"></div>
 		<script type="module" src="/src/main.js"></script>
 	</body>

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

@@ -9,10 +9,11 @@
 		"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"
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@sveltejs/acorn-typescript": "^1.0.8",
+		"@tailwindcss/vite": "^4.1.18",
+		"svelte": "^5.48.0",
+		"tailwindcss": "^4.1.18",
+		"vite": "^7.3.1"
 	}
 }

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

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 0C54.8054 0 67.7312 8.04427 74.6475 20H30V30H40C45.5228 30 50 34.4772 50 40C50 45.5228 45.5228 50 40 50H30V80H10V20H0V0H40ZM78.7393 30C79.5619 33.1962 80 36.547 80 40C80 62.0914 62.0914 80 40 80V60C51.0457 60 60 51.0457 60 40C60 36.3571 59.0259 32.9417 57.3242 30H78.7393Z" fill="#0B24FB"/>
+<path d="M20 30H40L20 80V50H0L20 0V30Z" fill="#FFC042"/>
+</svg>

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

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 0C54.8054 0 67.7312 8.04427 74.6475 20H30V30H40C45.5228 30 50 34.4772 50 40C50 45.5228 45.5228 50 40 50H30V80H10V20H0V0H40ZM78.7393 30C79.5619 33.1962 80 36.547 80 40C80 62.0914 62.0914 80 40 80V60C51.0457 60 60 51.0457 60 40C60 36.3571 59.0259 32.9417 57.3242 30H78.7393Z" fill="#FFC042"/>
+<path d="M20 30H40L20 80V50H0L20 0V30Z" fill="#0B24FB"/>
+</svg>

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

@@ -1,43 +1,40 @@
 <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 { Button, ButtonGroup, Cell, Icon, Calendar } from 'stdf';
+	import { switchMode } from 'stdf/theme';
 	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
+	// 解决 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');
+	// 切换亮暗模式
+	// Toggle light or dark mode
+	let mode = $state(sessionStorage.getItem('mode') === 'dark' ? 'dark' : 'primary');
 
 	$effect(() => {
-		if (mode === 'dark') {
-			darkMode(true);
-		} else {
-			darkMode(false);
-		}
+		switchMode(mode === 'dark' ? 'dark' : 'primary');
 	});
 	const toggleModeFun = () => {
 		if (mode === 'dark') {
-			// 切换到 (light switch to light)
-			mode = 'light';
-			darkMode(false);
-			sessionStorage.setItem('mode', 'light');
+			// 切换到亮色模式
+			// Switch to primary mode
+			mode = 'primary';
+			sessionStorage.setItem('mode', 'primary');
 		} else {
-			// 切换到 (dark switch to dark)
+			// 切换到暗色模式
+			// Switch to dark mode
 			mode = 'dark';
-			darkMode(true);
 			sessionStorage.setItem('mode', 'dark');
 		}
 	};
 
-	// 设置语言 (setting language)
+	// 设置语言
+	// Set 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 = () => {
@@ -46,7 +43,8 @@
 		window.location.reload();
 	};
 
-	// 进度条 (percent)
+	// 进度条
+	// Percent
 	let percent = $state(20);
 	const reduceFunc = () => {
 		if (percent > 0) {
@@ -59,20 +57,9 @@
 		}
 	};
 
-	// 日历(calendar)
+	// 日历
+	// 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">
@@ -86,12 +73,17 @@
 		<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">
+		<svg class="h-full w-full" width="32" height="32" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
 			<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"
+				fill="currentColor"
+				d="M40 0C54.8054 0 67.7312 8.04427 74.6475 20H30V30H40C45.5228 30 50 34.4772 50 40C50 45.5228 45.5228 50 40 50H30V80H10V20H0V0H40ZM78.7393 30C79.5619 33.1962 80 36.547 80 40C80 62.0914 62.0914 80 40 80V60C51.0457 60 60 51.0457 60 40C60 36.3571 59.0259 32.9417 57.3242 30H78.7393Z"
+			/>
+			<path
+				class="text-dark dark:text-primary"
+				fill="currentColor"
+				d="M20 30H40L20 80V50H0L20 0V30Z"
 			/>
-			<path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
 		</svg>
 	</a>
 </div>
@@ -115,21 +107,19 @@
 	<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>
+	<ButtonGroup
+		fill="lineState"
+		items={[
+			{ text: '-10', onclick: reduceFunc },
+			{ text: '+10', onclick: increaseFunc },
+			{ text: lang === 'zh_CN' ? '重置' : 'Reset', onclick: () => (percent = 20) }
+		]}
+	/>
 </div>
 <div class="my-6">
-	<Button fill="lineTheme" onclick={() => (visible = true)}>{lang === 'zh_CN' ? '日历' : 'Calendar'}</Button>
+	<Button fill="lineState" 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/templates/vst/src/app.css

@@ -0,0 +1,78 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where([data-mode=dark], [data-mode=dark] *):not(:where([data-mode=light], [data-mode=light] *):not([data-mode=dark], [data-mode=dark] *)));
+
+@theme {
+	--color-primary-50: oklch(0.97 0.036 276.886); /* #eef4ff rgb(238, 244, 255) */
+	--color-primary-100: oklch(0.882 0.071 274.886); /* #cad5ff rgb(202, 213, 255) */
+	--color-primary-200: oklch(0.795 0.105 272.886); /* #a5b8ff rgb(165, 184, 255) */
+	--color-primary-300: oklch(0.707 0.14 270.886); /* #809af8 rgb(128, 154, 248) */
+	--color-primary-400: oklch(0.62 0.174 268.886); /* #5c7cee rgb(92, 124, 238) */
+	--color-primary-500: oklch(0.532 0.209 266.886); /* #365ce3 rgb(54, 92, 227) */
+	--color-primary: oklch(0.444 0.243 264.886); /* #0e36d6 rgb(14, 54, 214) */
+	--color-primary-700: oklch(0.396 0.263 262.886); /* #0015d0 rgb(0, 21, 208) */
+	--color-primary-800: oklch(0.347 0.267 260.886); /* #0000c0 rgb(0, 0, 192) */
+	--color-primary-900: oklch(0.299 0.267 258.886); /* #0000af rgb(0, 0, 175) */
+	--color-primary-950: oklch(0.25 0.267 256.886); /* #01009d rgb(1, 0, 157) */
+
+	--color-dark-50: oklch(0.97 0.023 68.597); /* #fff3e5 rgb(255, 243, 229) */
+	--color-dark-100: oklch(0.949 0.045 70.597); /* #ffeace rgb(255, 234, 206) */
+	--color-dark-200: oklch(0.928 0.066 72.597); /* #ffe1b7 rgb(255, 225, 183) */
+	--color-dark-300: oklch(0.907 0.088 74.597); /* #ffd89f rgb(255, 216, 159) */
+	--color-dark-400: oklch(0.887 0.11 76.597); /* #ffd084 rgb(255, 208, 132) */
+	--color-dark-500: oklch(0.866 0.131 78.597); /* #ffc868 rgb(255, 200, 104) */
+	--color-dark: oklch(0.845 0.153 80.597); /* #ffc042 rgb(255, 192, 66) */
+	--color-dark-700: oklch(0.696 0.168 82.597); /* #cf9000 rgb(207, 144, 0) */
+	--color-dark-800: oklch(0.547 0.168 84.597); /* #9d6400 rgb(157, 100, 0) */
+	--color-dark-900: oklch(0.399 0.168 86.597); /* #6e3a00 rgb(110, 58, 0) */
+	--color-dark-950: oklch(0.25 0.168 88.597); /* #411000 rgb(65, 16, 0) */
+
+	--color-success: oklch(0.704 0.142 167.084); /* #0fbb8d rgb(15, 187, 141) */
+	--color-warning: oklch(0.558 0.153 47.186); /* #b95002 rgb(185, 80, 2) */
+	--color-error: oklch(0.564 0.223 28.46); /* #da1514 rgb(218, 21, 20) */
+	--color-info: oklch(0.482 0.14 261.518); /* #2e5aac rgb(46, 90, 172) */
+
+	--color-blue: oklch(0.6 0.2 250); /* #0081f1 rgb(0, 129, 241) */
+	--color-purple: oklch(0.6 0.2 300); /* #955be3 rgb(149, 91, 227) */
+	--color-orange: oklch(0.7 0.18 50); /* #f37513 rgb(243, 117, 19) */
+	--color-cyan: oklch(0.7 0.15 190); /* #00bbb3 rgb(0, 187, 179) */
+
+	--color-black: oklch(0 0 0); /* #000000 rgb(0, 0, 0) */
+	--color-white: oklch(1 0 0); /* #FFFFFF rgb(255, 255, 255) */
+	--color-gray-50: oklch(0.961 0 0); /* #F5F5F5 rgb(245, 245, 245) */
+	--color-gray-100: oklch(0.925 0 0); /* #E8E8E8 rgb(232, 232, 232) */
+	--color-gray-200: oklch(0.845 0 0); /* #D1D1D1 rgb(209, 209, 209) */
+	--color-gray-300: oklch(0.767 0 0); /* #B8B8B8 rgb(184, 184, 184) */
+	--color-gray-400: oklch(0.683 0 0); /* #9E9E9E rgb(158, 158, 158) */
+	--color-gray-500: oklch(0.6 0 0); /* #858585 rgb(133, 133, 133) */
+	--color-gray-600: oklch(0.51 0 0); /* #6B6B6B rgb(107, 107, 107) */
+	--color-gray-700: oklch(0.42 0 0); /* #525252 rgb(82, 82, 82) */
+	--color-gray-800: oklch(0.321 0 0); /* #383838 rgb(56, 56, 56) */
+	--color-gray-900: oklch(0.218 0 0); /* #1F1F1F rgb(31, 31, 31) */
+	--color-gray-950: oklch(0.159 0 0); /* #121212 rgb(18, 18, 18) */
+	--color-transparent: transparent;
+
+	--color-bg-base: oklch(0.967 0.016 264.84); /* #eff4ff rgb(239, 244, 255) */
+	--color-bg-surface: oklch(0.978 0 80.342); /* #f8f8f8 rgb(248, 248, 248) */
+	--color-bg-overlay: oklch(0.961 0 93.125); /* #f2f2f2 rgb(242, 242, 242) */
+	--color-bg-highlight: oklch(0.961 0.017 279.375); /* #eff1fe rgb(239, 241, 254) */
+	--color-bg-base-dark: oklch(0.167 0.015 80.342); /* #120e07 rgb(18, 14, 7) */
+	--color-bg-surface-dark: oklch(0.178 0.017 264.84); /* #0d1119 rgb(13, 17, 25) */
+	--color-bg-overlay-dark: oklch(0.233 0.001 264.84); /* #1d1e1e rgb(29, 30, 30) */
+	--color-bg-highlight-dark: oklch(0.178 0.019 80.342); /* #161008 rgb(22, 16, 8) */
+
+	--color-text-primary: oklch(0.144 0.016 245.938); /* #050b10 rgb(5, 11, 16) */
+	--color-text-dark: oklch(0.917 0.039 89.688); /* #eee3c7 rgb(238, 227, 199) */
+	--color-text-on-primary: oklch(0.883 0.043 79.063); /* #e8d6b9 rgb(232, 214, 185) */
+	--color-text-on-dark: oklch(0.189 0.05 262.813); /* #07122a rgb(7, 18, 42) */
+
+	--radius-box: 0.5rem;
+	--radius-form: 0.25rem;
+	--radius-small: calc(infinity * 1px);
+}
+
+@source "../node_modules/stdf/**/*.svelte";
+
+html {
+	-webkit-tap-highlight-color: transparent;
+}

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

@@ -7,7 +7,7 @@
 		<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">
+	<body class="bg-bg-base dark:bg-bg-base-dark text-text-primary dark:text-text-dark">
 		<div id="app"></div>
 		<script type="module" src="/src/main.ts"></script>
 	</body>

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

@@ -10,14 +10,14 @@
 		"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"
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@sveltejs/acorn-typescript": "^1.0.8",
+		"@tailwindcss/vite": "^4.1.18",
+		"@tsconfig/svelte": "^5.0.6",
+		"svelte": "^5.48.0",
+		"svelte-check": "^4.3.5",
+		"tailwindcss": "^4.1.18",
+		"typescript": "~5.9.3",
+		"vite": "^7.3.1"
 	}
 }

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

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 0C54.8054 0 67.7312 8.04427 74.6475 20H30V30H40C45.5228 30 50 34.4772 50 40C50 45.5228 45.5228 50 40 50H30V80H10V20H0V0H40ZM78.7393 30C79.5619 33.1962 80 36.547 80 40C80 62.0914 62.0914 80 40 80V60C51.0457 60 60 51.0457 60 40C60 36.3571 59.0259 32.9417 57.3242 30H78.7393Z" fill="#0B24FB"/>
+<path d="M20 30H40L20 80V50H0L20 0V30Z" fill="#FFC042"/>
+</svg>