[doc]Update site

docs/mds/guide/quickStart.md

@@ -1,200 +1,220 @@
-<!-- main -> next -->
 
 > Tip：所有代码或命令可以双击选定词，三击选定行。
 
-## 😉 已有工程
+## 😓 无工程
 
-### 安装
+### 使用 create-stdf
 
-已有配置好 Svelte 与 Tailwind 的工程，直接安装。
+可以尝试使用 [create-stdf](https://www.npmjs.com/package/create-stdf) 快速创建工程。
 
 <!-- :::code-groups -->
 <!-- pnpm -->
 ```sh
-pnpm i stdf@next -D
+pnpm create stdf
 ```
 <!-- :: -->
 <!-- npm -->
 ```sh
-npm i stdf@next -D
+npm create stdf
+# 或
+npm init stdf
+# 或
+npx create-stdf
 ```
 <!-- :: -->
 <!-- bun -->
 ```sh
-bun add stdf@next -D
+bun create stdf
 ```
 <!-- :: -->
 <!-- yarn -->
 ```sh
-yarn add stdf@next -D
+yarn create stdf
 ```
 <!-- ::: -->
 
-### 在 Svelte 中使用
+### 自行搭建工程
 
-```svelte
-<!-- Button Demo -->
-<script>
-	import { Button } from 'stdf';
-</script>
+此处用 Vite 示例创建工程，参考 [Vite 文档](https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project)。
 
-<Button>默认</Button>
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
+pnpm create vite
 ```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm create vite@latest
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun create vite
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create vite
+```
+<!-- ::: -->
 
-## 😓 无工程
+按照提示操作创建工程。
 
-### 使用 create-stdf
+参考 [Tailwind CSS 文档](https://tailwindcss.com/docs/guides/vite#svelte) 配置 Tailwind CSS。
 
-可以尝试使用 [create-stdf](https://www.npmjs.com/package/create-stdf) 快速创建工程。
+1. 安装 Tailwind CSS 与 Vite 插件。
 
 <!-- :::code-groups -->
 <!-- pnpm -->
 ```sh
-pnpm create stdf@next
+pnpm i tailwindcss @tailwindcss/vite -D
 ```
 <!-- :: -->
 <!-- npm -->
 ```sh
-npm create stdf@next
-# 或
-npm init stdf@next
-# 或
-npx create-stdf@next
+npm i tailwindcss @tailwindcss/vite -D
 ```
 <!-- :: -->
 <!-- bun -->
 ```sh
-bun create stdf@next
+bun add tailwindcss @tailwindcss/vite -D
 ```
 <!-- :: -->
 <!-- yarn -->
 ```sh
-yarn create stdf@next
+yarn add tailwindcss @tailwindcss/vite -D
 ```
 <!-- ::: -->
 
-### 自行搭建工程
-
-此处用 Vite 示例创建工程，参考 [Vite 文档](https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project)。
+2. 在项目的入口 CSS 文件中引入 Tailwind CSS，设置暗黑模式，添加初始颜色变量。以下为 STDF 默认主题色，请根据自己的需要进行修改。可参考 [STDF 指南 - 色彩](/guide/color)。
+
+```css
+/* app.css */
+@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;
+}
+```
+
+3. 启动项目。
 
 <!-- :::code-groups -->
 <!-- pnpm -->
 ```sh
-pnpm create vite
+pnpm dev
 ```
 <!-- :: -->
 <!-- npm -->
 ```sh
-npm create vite@latest
+npm run dev
 ```
 <!-- :: -->
 <!-- bun -->
 ```sh
-bun create vite
+bun dev
 ```
 <!-- :: -->
 <!-- yarn -->
 ```sh
-yarn create vite
+yarn dev
 ```
 <!-- ::: -->
 
-按照提示操作创建工程。
+## 😉 已有工程
 
-参考 [Tailwind CSS 文档](https://tailwindcss.com/docs/guides/vite#svelte) 配置 Tailwind CSS。
+### 安装
 
-1. 安装 Tailwind CSS 和其他依赖，然后生成 `tailwind.config.js` 和 `postcss.config.js` 文件。
-
-```sh
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-```
-
-2. 在 `tailwind.config.js` 文件内添加模板文件。注意 content 内添加`./node_modules/stdf/**/*.svelte`，这是 STDF 的组件位置。其中 theme 的 colors 可以根据自己的需要进行修改。可参考 [STDF 指南 - 色彩](/#/guide/color)。
-
-注意：Tailwind 配置文件中的 content 即表示所有可能用到 Tailwind 的文件，请不要遗漏。darkMode 请设置为 'class'，这是为了配合 STDF 的暗黑模式。
-
-```javascript
-/** @type {import('tailwindcss').Config} */
-export default {
-	// ...
-	content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/stdf/**/*.svelte'],
-	theme: {
-		colors: {
-			// 主题色
-			primary: {
-				50: 'rgba(var(--theme-color-primary-50), <alpha-value>)',
-				100: 'rgba(var(--theme-color-primary-100), <alpha-value>)',
-				200: 'rgba(var(--theme-color-primary-200), <alpha-value>)',
-				300: 'rgba(var(--theme-color-primary-300), <alpha-value>)',
-				400: 'rgba(var(--theme-color-primary-400), <alpha-value>)',
-				500: 'rgba(var(--theme-color-primary-500), <alpha-value>)',
-				DEFAULT: 'rgba(var(--theme-color-primary), <alpha-value>)',
-				700: 'rgba(var(--theme-color-primary-700), <alpha-value>)',
-				800: 'rgba(var(--theme-color-primary-800), <alpha-value>)',
-				900: 'rgba(var(--theme-color-primary-900), <alpha-value>)',
-				950: 'rgba(var(--theme-color-primary-950), <alpha-value>)',
-			},
-			dark: {
-				50: 'rgba(var(--theme-color-dark-50), <alpha-value>)',
-				100: 'rgba(var(--theme-color-dark-100), <alpha-value>)',
-				200: 'rgba(var(--theme-color-dark-200), <alpha-value>)',
-				300: 'rgba(var(--theme-color-dark-300), <alpha-value>)',
-				400: 'rgba(var(--theme-color-dark-400), <alpha-value>)',
-				500: 'rgba(var(--theme-color-dark-500), <alpha-value>)',
-				DEFAULT: 'rgba(var(--theme-color-dark), <alpha-value>)',
-				700: 'rgba(var(--theme-color-dark-700), <alpha-value>)',
-				800: 'rgba(var(--theme-color-dark-800), <alpha-value>)',
-				900: 'rgba(var(--theme-color-dark-900), <alpha-value>)',
-				950: 'rgba(var(--theme-color-dark-950), <alpha-value>)',
-			},
-			primaryBlack: 'rgba(var(--theme-color-primaryBlack), <alpha-value>)',
-			primaryWhite: 'rgba(var(--theme-color-primaryWhite), <alpha-value>)',
-			darkBlack: 'rgba(var(--theme-color-darkBlack), <alpha-value>)',
-			darkWhite: 'rgba(var(--theme-color-darkWhite), <alpha-value>)',
-
-			// 功能色
-			success: 'rgba(var(--theme-color-functional-success), <alpha-value>)',
-			warning: 'rgba(var(--theme-color-functional-warning), <alpha-value>)',
-			error: 'rgba(var(--theme-color-functional-error), <alpha-value>)',
-			info: 'rgba(var(--theme-color-functional-info), <alpha-value>)',
-
-			// 扩展色
-			extend0: 'rgba(var(--theme-color-extend0), <alpha-value>)',
-			extend1: 'rgba(var(--theme-color-extend1), <alpha-value>)',
-			extend2: 'rgba(var(--theme-color-extend2), <alpha-value>)',
-
-			// 中性色
-			black: '#000000',
-			white: '#ffffff',
-			gray: {
-				50: '#f2f2f2',
-				100: '#e6e6e6',
-				200: '#cccccc',
-				300: '#b3b3b3',
-				400: '#999999',
-				500: '#808080',
-				600: '#666666',
-				700: '#4D4D4D',
-				800: '#333333',
-				900: '#1A1A1A',
-				950: '#0D0D0D',
-			},
-			transparent: 'transparent',
-		},
-		// ...
-	},
-	darkMode: 'class',
-	// ...
-};
-```
-
-3. 将 Tailwind CSS 添加到入口 CSS 文件中，如 `./src/index.css`，并在入口文件 main.js 中引入这个 CSS 文件。
-
-4. 启动项目。
+已有配置好 Svelte 与 Tailwind 的工程，直接安装。
 
+<!-- :::code-groups -->
+<!-- pnpm -->
 ```sh
-npm run dev
-# or
-bun dev
+pnpm i stdf -D
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm i stdf -D
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun add stdf -D
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add stdf -D
+```
+<!-- ::: -->
+
+### 在 Svelte 中使用
+
+```svelte
+<!-- Button Demo -->
+<script>
+	import { Button } from 'stdf';
+</script>
+
+<Button>默认</Button>
 ```

docs/mds/guide/quickStart_en.md

@@ -1,4 +1,3 @@
-<!-- main -> next -->
 
 > Tip: All code or commands can be double-clicked to select the word, three clicks to select the line.
 
@@ -11,22 +10,22 @@ Svelte and Tailwind have been configured for direct installation.
 <!-- :::code-groups -->
 <!-- pnpm -->
 ```sh
-pnpm i stdf@next -D
+pnpm i stdf -D
 ```
 <!-- :: -->
 <!-- npm -->
 ```sh
-npm i stdf@next -D
+npm i stdf -D
 ```
 <!-- :: -->
 <!-- bun -->
 ```sh
-bun add stdf@next -D
+bun add stdf -D
 ```
 <!-- :: -->
 <!-- yarn -->
 ```sh
-yarn add stdf@next -D
+yarn add stdf -D
 ```
 <!-- ::: -->
 
@@ -50,26 +49,26 @@ You can try using [create-stdf](https://www.npmjs.com/package/create-stdf) to qu
 <!-- :::code-groups -->
 <!-- pnpm -->
 ```sh
-pnpm create stdf@next
+pnpm create stdf
 ```
 <!-- :: -->
 <!-- npm -->
 ```sh
-npm create stdf@next
+npm create stdf
 # or
-npm init stdf@next
+npm init stdf
 # or
-npx create-stdf@next
+npx create-stdf
 ```
 <!-- :: -->
 <!-- bun -->
 ```sh
-bun create stdf@next
+bun create stdf
 ```
 <!-- :: -->
 <!-- yarn -->
 ```sh
-yarn create stdf@next
+yarn create stdf
 ```
 <!-- ::: -->
 
@@ -101,100 +100,121 @@ yarn create vite
 
 Follow the prompts to create a project.
 
-Configuration Tailwind CSS. See [Tailwind CSS documentation](https://tailwindcss.com/docs/guides/vite#svelte)。
-
-1. Install Tailwind CSS and other dependencies, then generate tailwind.config.js and postcss.config.js files.
-
-```sh
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-```
-
-2. Add a template file within the `tailwind.config.js` file. Note that `./node_modules/stdf/**/*.svelte` is added in content, which is the component location of STDF.The colors of theme can be modified according to its own needs. Reference [STDF Guide - Color](/#/guide/color).
-
-Note: The 'content' in the Tailwind configuration file represents all files that may use Tailwind, please do not omit any files. Please set darkMode to 'class' to match STDF's dark mode.
-
-```javascript
-/** @type {import('tailwindcss').Config} */
-export default {
-	// ...
-	content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/stdf/**/*.svelte'],
-	theme: {
-		colors: {
-			// Theme color
-			primary: {
-				50: 'rgba(var(--theme-color-primary-50), <alpha-value>)',
-				100: 'rgba(var(--theme-color-primary-100), <alpha-value>)',
-				200: 'rgba(var(--theme-color-primary-200), <alpha-value>)',
-				300: 'rgba(var(--theme-color-primary-300), <alpha-value>)',
-				400: 'rgba(var(--theme-color-primary-400), <alpha-value>)',
-				500: 'rgba(var(--theme-color-primary-500), <alpha-value>)',
-				DEFAULT: 'rgba(var(--theme-color-primary), <alpha-value>)',
-				700: 'rgba(var(--theme-color-primary-700), <alpha-value>)',
-				800: 'rgba(var(--theme-color-primary-800), <alpha-value>)',
-				900: 'rgba(var(--theme-color-primary-900), <alpha-value>)',
-				950: 'rgba(var(--theme-color-primary-950), <alpha-value>)',
-			},
-			dark: {
-				50: 'rgba(var(--theme-color-dark-50), <alpha-value>)',
-				100: 'rgba(var(--theme-color-dark-100), <alpha-value>)',
-				200: 'rgba(var(--theme-color-dark-200), <alpha-value>)',
-				300: 'rgba(var(--theme-color-dark-300), <alpha-value>)',
-				400: 'rgba(var(--theme-color-dark-400), <alpha-value>)',
-				500: 'rgba(var(--theme-color-dark-500), <alpha-value>)',
-				DEFAULT: 'rgba(var(--theme-color-dark), <alpha-value>)',
-				700: 'rgba(var(--theme-color-dark-700), <alpha-value>)',
-				800: 'rgba(var(--theme-color-dark-800), <alpha-value>)',
-				900: 'rgba(var(--theme-color-dark-900), <alpha-value>)',
-				950: 'rgba(var(--theme-color-dark-950), <alpha-value>)',
-			},
-			primaryBlack: 'rgba(var(--theme-color-primaryBlack), <alpha-value>)',
-			primaryWhite: 'rgba(var(--theme-color-primaryWhite), <alpha-value>)',
-			darkBlack: 'rgba(var(--theme-color-darkBlack), <alpha-value>)',
-			darkWhite: 'rgba(var(--theme-color-darkWhite), <alpha-value>)',
-
-			// Functional color
-			success: 'rgba(var(--theme-color-functional-success), <alpha-value>)',
-			warning: 'rgba(var(--theme-color-functional-warning), <alpha-value>)',
-			error: 'rgba(var(--theme-color-functional-error), <alpha-value>)',
-			info: 'rgba(var(--theme-color-functional-info), <alpha-value>)',
-
-			// Extended color
-			extend0: 'rgba(var(--theme-color-extend0), <alpha-value>)',
-			extend1: 'rgba(var(--theme-color-extend1), <alpha-value>)',
-			extend2: 'rgba(var(--theme-color-extend2), <alpha-value>)',
-
-			// Neutral color
-			black: '#000000',
-			white: '#ffffff',
-			gray: {
-				50: '#f2f2f2',
-				100: '#e6e6e6',
-				200: '#cccccc',
-				300: '#b3b3b3',
-				400: '#999999',
-				500: '#808080',
-				600: '#666666',
-				700: '#4D4D4D',
-				800: '#333333',
-				900: '#1A1A1A',
-				950: '#0D0D0D',
-			},
-			transparent: 'transparent',
-		},
-		// ...
-	},
-	darkMode: 'class',
-	// ...
-};
-```
-
-3. Add Tailwind CSS to the entry CSS file, such as./src/index.css, and import the CSS file in the entry file main.js.
-
-4. Start the project.
+Reference [Tailwind CSS documentation](https://tailwindcss.com/docs/guides/vite#svelte) to configure Tailwind CSS.
 
+1. Install Tailwind CSS and Vite plugin.
+
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
+pnpm i tailwindcss @tailwindcss/vite -D
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm i tailwindcss @tailwindcss/vite -D
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun i tailwindcss @tailwindcss/vite -D
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn i tailwindcss @tailwindcss/vite -D
+```
+<!-- ::: -->
+
+2. Import Tailwind CSS in the project entry CSS file, set the dark mode, and add the initial color variable. The following is the default theme color of STDF, please modify it according to your needs. See [STDF Guide - Color](/guide/color).
+
+```css
+/* app.css */
+@import 'tailwindcss';
+@custom-variant dark (&:where(.dark, .dark *));
+@theme {
+	/* Theme color */
+	--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);
+
+	/* Functional color */
+	--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);
+
+	/* Extended color */
+	--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);
+
+	/* Neutral color */
+	--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;
+}
+```
+
+3. Start the project.
+
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
+pnpm dev
+```
+<!-- :: -->
+<!-- npm -->
 ```sh
 npm run dev
-# or
+```
+<!-- :: -->
+<!-- bun -->
+```sh
 bun dev
 ```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn dev
+```
+<!-- ::: -->

docs/site/src/lib/header/Header.svelte

@@ -53,11 +53,7 @@
 	});
 </script>
 
-<div
-	class="{showBottonLine
-		? 'border-b border-black/10 dark:border-white/10 '
-		: ''}flex sticky top-0 z-[100] h-14 items-center justify-between backdrop-blur-sm"
->
+<div class="sticky top-0 z-[100] flex h-14 items-center justify-between border-b border-black/5 backdrop-blur-sm dark:border-white/10">
 	{#if showLeftNav}
 		<button class="cursor-pointer p-4 md:hidden" onclick={toggleNavFun}>
 			{#if !$isShowNavStore}

docs/site/src/routes/guide/changelog/+page.svelte

@@ -64,7 +64,7 @@
 </script>
 
 <article
-	class="prose pb-12 dark:prose-invert prose-strong:text-primary dark:prose-strong:text-dark {$isWideScreenStore
+	class="prose dark:prose-invert prose-strong:text-primary dark:prose-strong:text-dark pb-12 text-xs {$isWideScreenStore
 		? 'max-w-full'
 		: 'max-w-5xl'}"
 >

docs/site/src/utils/index.ts

@@ -303,7 +303,7 @@ const colorPalette = (originColor: string, i: number, format: string) => {
 	const maxValue = 100;
 	const minValue = 30;
 
-	function getNewHue(isLight: boolean, i: number) {
+	const getNewHue = (isLight: boolean, i: number) => {
 		let hue;
 		if (h >= 60 && h <= 240) {
 			hue = isLight ? h - hueStep * i : h + hueStep * i;
@@ -316,22 +316,21 @@ const colorPalette = (originColor: string, i: number, format: string) => {
 			hue -= 360;
 		}
 		return Math.round(hue);
-	}
+	};
 
-	function getNewSaturation(isLight: boolean, i: number) {
+	const getNewSaturation = (isLight: boolean, i: number) => {
 		let newSaturation;
-
 		if (isLight) {
 			newSaturation = s <= minSaturationStep ? s : s - ((s - minSaturationStep) / 5) * i;
 		} else {
 			newSaturation = s + ((maxSaturationStep - s) / 4) * i;
 		}
 		return newSaturation;
-	}
+	};
 
-	function getNewValue(isLight: boolean, i: number) {
+	const getNewValue = (isLight: boolean, i: number) => {
 		return isLight ? v + ((maxValue - v) / 5) * i : v <= minValue ? v : v - ((v - minValue) / 4) * i;
-	}
+	};
 
 	const isLight = i < 6;
 	const index = isLight ? 6 - i : i - 6;
@@ -343,6 +342,7 @@ const colorPalette = (originColor: string, i: number, format: string) => {
 					s: getNewSaturation(isLight, index) < 0 ? 4 : getNewSaturation(isLight, index),
 					v: getNewValue(isLight, index)
 				});
+
 	return getColorString(retColor, format);
 };
 
@@ -389,7 +389,6 @@ export const generateThemeBlack = (color: string) => {
 		.hsl()
 		.round()
 		.string();
-	
 
 	// 将 hsl 格式的颜色值转换成数组
 	const colorHslArr = colorHsl.split(',');