[doc]Updating documentation to support Tailwind CSS v4.

docs/mds/guide/compatibility.md

@@ -1,8 +1,8 @@
-> STDF v1.x 基于 Svelte 5.x 与 Tailwind CSS 4.x。
+> STDF v1.x 基于 Svelte v5 与 Tailwind CSS v4。
 
 ## Svelte
 
-市面上能看到的浏览器版本基本都已经支持了 Svelte 3，旧版的 IE 浏览器需要 Polyfills，不过移动端没有 IE，况且微软也已经放弃了 IE，所以这里不做讨论。
+市面上能看到的浏览器版本基本都已经支持了 Svelte v5，旧版的 IE 浏览器需要 Polyfills，不过移动端没有 IE，况且微软也已经放弃了 IE，所以这里不做讨论。
 
 ## Tailwind CSS
 

docs/mds/guide/compatibility_en.md

@@ -1,8 +1,8 @@
-> STDF v1.x based on Svelte 5.x and Tailwind CSS 4.x.
+> STDF v1.x based on Svelte v5 and Tailwind CSS v4.
 
 ## Svelte
 
-Most modern browsers on the market already support Svelte 3. Old versions of Internet Explorer may require polyfills, but since mobile devices generally do not use IE and Microsoft has also abandoned IE, we won't discuss it here.
+Most modern browsers on the market already support Svelte v5. Old versions of Internet Explorer may require polyfills, but since mobile devices generally do not use IE and Microsoft has also abandoned IE, we won't discuss it here.
 
 ## Tailwind CSS
 

docs/mds/guide/future.md

@@ -10,7 +10,7 @@
 - [x] 新增 Stepper-步进器组件。
 - [x] 完整支持 Svelte 5。
 - [x] 完整支持 TypeScript。
-- [ ] 适配 Tailwind CSS v4。
+- [x] 适配 Tailwind CSS v4。
 
 ---
 

docs/mds/guide/future_en.md

@@ -10,7 +10,7 @@
 - [x] Added Stepper component.
 - [x] Complete support for Svelte 5.
 - [x] Complete support for TypeScript.
-- [ ] Adapt to Tailwind CSS v4.
+- [x] Adapt to Tailwind CSS v4.
 
 ---
 

docs/mds/guide/theme.md

@@ -1,14 +1,18 @@
-> 从 v0.4.0 版本开始，STDF 支持多主题切换。
-
 ## 亮暗模式
 
 ### 配置
 
-使用 Tailwind CSS 的暗模式配置，请在 `tailwind.config.js` 配置 `darkMode: 'class'`，参考 [Dark Mode](https://tailwindcss.com/docs/dark-mode)。
+使用 Tailwind CSS 的暗模式配置，请在项目入口 CSS 文件中做如下 `@custom-variant` 配置，参考 [Dark Mode](https://tailwindcss.com/docs/dark-mode)。
+
+```css
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *))
+```
 
 ### 切换
 
-从 0.4.0 版本开始，STDF 将切换亮暗模式的方法置于 STDF 的 NPM 包中，本质上是直接给 `html` 标签添加或删除 `dark` 类名。
+STDF 将切换亮暗模式的方法置于 STDF 的 NPM 包中，本质上是直接给 `html` 标签添加或删除 `dark` 类名。
 
 ```javascript
 // 引入 darkMode，传入 false 切换为亮模式，不传参或传入 true 切换为暗模式。
@@ -25,200 +29,143 @@ darkMode();
 
 ### 介绍
 
-从 0.4.0 版本开始，STDF 支持多主题切换，主题暂支持切换[颜色系统](/#/guide/color)，后续考虑字体、间距、文字大小等配置也可跟随主题切换。本质原理是将一些属性设置为 CSS 变量，通过修改这些变量实现主题切换。
+STDF 支持多主题切换，主题暂支持切换[颜色系统](/guide/color)，后续考虑字体、间距、文字大小等配置也可跟随主题切换。本质原理是将一些属性设置为 CSS 变量，通过修改这些变量实现主题切换。
 
 ### 配置
 
-请参考主题生成器生成的主题配置格式配置好主题，主题配置须包含 name 与 color 两个属性，name 为主题名称，color 为此主题搭配的颜色。默认主题配置如下：
+请参考主题生成器生成的主题配置格式配置好主题，主题配置须包含 name 与 color 两个属性，name 为主题名称，color 为此主题搭配的颜色。
+
+> 可到<a href="/guide/generator" target="_blank">主题生成器</a>快速配置颜色系统并生成配置文件。
 
-> 可到<a href="#/guide/generator" target="_blank">主题生成器</a>快速配置颜色系统并生成配置文件。
+默认主题配置如下：
 
 ```javascript
 {
 	name: 'STDF',
 	color: {
 		primary: {
-			50: '245, 248, 255', // #F5F8FF
-			100: '232, 238, 255', // #E8EEFF
-			200: '187, 203, 254', // #BBCBFE
-			300: '143, 165, 253', // #8FA5FD
-			400: '99, 124, 253', // #637CFD
-			500: '55, 81, 252', // #3751FC
-			default: '11, 36, 251', // #0B24FB
-			700: '7, 20, 207', // #0714CF
-			800: '4, 9, 164', // #0409A4
-			900: '1, 1, 120', // #010178
-			950: '3, 0, 77', // #03004D
+			50: 'oklch(0.979 0.01 267.36)', // #F5F8FF hsl(222, 100%, 98%)
+			100: 'oklch(0.95 0.024 270.343)', // #E8EEFF hsl(224, 100%, 96%)
+			200: 'oklch(0.847 0.074 271.188)', // #BBCBFE hsl(226, 97%, 87%)
+			300: 'oklch(0.741 0.13 272.232)', // #8FA5FD hsl(228, 97%, 78%)
+			400: 'oklch(0.634 0.193 271.595)', // #637CFD hsl(230, 98%, 69%)
+			500: 'oklch(0.536 0.252 268.66)', // #3751FC hsl(232, 97%, 60%)
+			default: 'oklch(0.467 0.296 264.886)', // #0B24FB hsl(234, 97%, 51%)
+			700: 'oklch(0.397 0.26 264.877)', // #0714CF hsl(236, 94%, 42%)
+			800: 'oklch(0.331 0.221 264.833)', // #0409A4 hsl(238, 95%, 33%)
+			900: 'oklch(0.26 0.178 264.428)', // #010178 hsl(240, 98%, 24%)
+			950: 'oklch(0.192 0.13 266.64)' // #03004D hsl(242, 100%, 15%)
 		},
 		dark: {
-			50: '255, 254, 245', // #FFFEF5
-			100: '255, 251, 232', // #FFFBE8
-			200: '255, 244, 199', // #FFF4C7
-			300: '255, 234, 166', // #FFEAA6
-			400: '255, 222, 133', // #FFDE85
-			500: '255, 209, 100', // #FFD164
-			default: '255, 192, 67', // #FFC043
-			700: '210, 148, 41', // #D29429
-			800: '166, 108, 22', // #A66C16
-			900: '121, 72, 8', // #794808
-			950: '77, 41, 0', // #4D2900
+			50: 'oklch(0.995 0.012 101.474)', // #FFFEF5 hsl(54, 100%, 98%)
+			100: 'oklch(0.986 0.025 97.107)', // #FFFBE8 hsl(50, 100%, 96%)
+			200: 'oklch(0.965 0.059 95.884)', // #FFF4C7 hsl(48, 100%, 89%)
+			300: 'oklch(0.938 0.089 92.952)', // #FFEAA6 hsl(46, 100%, 83%)
+			400: 'oklch(0.91 0.114 89.711)', // #FFDE85 hsl(44, 100%, 76%)
+			500: 'oklch(0.88 0.136 86.375)', // #FFD164 hsl(42, 100%, 70%)
+			default: 'oklch(0.845 0.153 80.597)', // #FFC043 hsl(40, 100%, 63%)
+			700: 'oklch(0.71 0.137 75.734)', // #D29429 hsl(38, 67%, 49%)
+			800: 'oklch(0.58 0.118 70.166)', // #A66C16 hsl(36, 77%, 37%)
+			900: 'oklch(0.449 0.097 65.209)', // #794808 hsl(34, 88%, 25%)
+			950: 'oklch(0.321 0.074 62.379)' // #4D2900 hsl(32, 100%, 15%)
 		},
-		primaryBlack: '1, 3, 25', // #010319
-		primaryWhite: '242, 242, 243', // #F2F2F3
-		darkBlack: '25, 17, 1', // #191101
-		darkWhite: '243, 242, 242', // #F3F2F2
+		primaryBlack: 'oklch(0.116 0.054 267.087)', // #010319 hsl(234, 95%, 5%)
+		primaryWhite: 'oklch(0.961 0.001 286.375)', // #F2F2F3 hsl(234, 5%, 95%)
+		darkBlack: 'oklch(0.183 0.035 86.634)', // #191101 hsl(40, 95%, 5%)
+		darkWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(40, 5%, 95%)
 		functional: {
-			success: '17, 187, 141', // #11bb8d
-			warning: '185, 80, 0', // #b95000
-			error: '218, 20, 20', // #da1414
-			info: '46, 90, 172', // #2e5aac
+			success: 'oklch(0.704 0.142 167.084)', // #11bb8d hsl(164, 83%, 40%)
+			warning: 'oklch(0.558 0.154 47.186)', // #b95000 hsl(26, 100%, 36%)
+			error: 'oklch(0.564 0.223 28.46)', // #da1414 hsl(0, 83%, 47%)
+			info: 'oklch(0.482 0.14 261.518)' // #2e5aac hsl(219, 58%, 43%)
 		},
 		extend: [
-			{ color: '0, 172, 238', alias: "Twitter" }, // #00acee
-			{ color: '255, 105, 55', alias: "Svelte" }, // #ff6937
-			{ color: '0, 112, 74', alias: "Starbucks" }, // #00704a
-		],
-	},
-}
-```
-
-按照 Tailwind 的规定，使用 CSS 变量同时支持 `primary/50` 这种透明度写法，在 `tailwind.config.js` 中配置 `theme.extend.colors` 时不能使用十六进制，必须使用带有 alpha 通道写法，STDF 统一采用 rgba 写法。需要**特别注意初始 CSS 变量时只需要将 rgb 的三个值列举出来**，参考 [Using CSS variables](https://tailwindcss.com/docs/customizing-colors#using-css-variables)。
-
-```css
-/* ✅ ✅ 这种写法是对的 */
-:root {
-	--color-primary: 255 115 179;
-	--color-dark: 111 114 185;
-}
-```
-
-```css
-/* ❌ ❌ 这种写法是错的 */
-:root {
-	--color-primary: rgb(255 115 179);
-	--color-secondary: rgb(111 114 185);
-}
-```
-
-按照颜色系统的配色，加上基础的黑、白、灰、透明，在 `tailwind.config.js` 中配置 `theme.extend.colors` 时至少包含以下内容：
-
-```javascript
-/** @type {import('tailwindcss').Config} */
-// ...
-module.exports = {
-	// ...
-	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>)',
+			{
+				color: 'oklch(0.703 0.149 235.059)', // #00acee hsl(197, 100%, 47%)
+				alias: 'Twitter'
 			},
-			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',
+			{
+				color: 'oklch(0.702 0.194 38.137)', // #ff6937 hsl(15, 100%, 61%)
+				alias: 'Svelte'
 			},
-			transparent: 'transparent',
-			// ...
-		},
-		// ...
-	},
-	darkMode: 'class',
-	// ...
-};
+			{
+				color: 'oklch(0.482 0.107 161.212)', // #00704a hsl(160, 100%, 22%)
+				alias: 'Starbucks'
+			}
+		]
+	}
+}
 ```
 
-最后在全局样式增加初始主题的 CSS 变量，如在 `src/app.css` 中配置如下：
+Tailwind v4 推荐使用 oklch 颜色模式，参考 [Using CSS variables](https://tailwindcss.com/docs/customizing-colors#using-css-variables)。
+
+按照颜色系统的配色，加上基础的黑、白、灰、透明，默认配色在入口 CSS 文件中至少包含以下内容：
 
 ```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-	:root {
-		--theme-color-primary-50: 245, 248, 255;
-		--theme-color-primary-100: 232, 238, 255;
-		--theme-color-primary-200: 187, 203, 254;
-		--theme-color-primary-300: 143, 165, 253;
-		--theme-color-primary-400: 99, 124, 253;
-		--theme-color-primary-500: 55, 81, 252;
-		--theme-color-primary: 11, 36, 251;
-		--theme-color-primary-700: 7, 20, 207;
-		--theme-color-primary-800: 4, 9, 164;
-		--theme-color-primary-900: 1, 1, 120;
-		--theme-color-primary-950: 3, 0, 77;
-		--theme-color-dark-50: 255, 254, 245;
-		--theme-color-dark-100: 255, 251, 232;
-		--theme-color-dark-200: 255, 244, 199;
-		--theme-color-dark-300: 255, 234, 166;
-		--theme-color-dark-400: 255, 222, 133;
-		--theme-color-dark-500: 255, 209, 100;
-		--theme-color-dark: 255, 192, 67;
-		--theme-color-dark-700: 210, 148, 41;
-		--theme-color-dark-800: 166, 108, 22;
-		--theme-color-dark-900: 121, 72, 8;
-		--theme-color-dark-950: 77, 41, 0;
-		--theme-color-primaryBlack: 1, 3, 25;
-		--theme-color-primaryWhite: 242, 242, 243;
-		--theme-color-darkBlack: 25, 17, 1;
-		--theme-color-darkWhite: 243, 242, 242;
-		--theme-color-functional-success: 17, 187, 141;
-		--theme-color-functional-warning: 185, 80, 0;
-		--theme-color-functional-error: 218, 20, 20;
-		--theme-color-functional-info: 46, 90, 172;
-		--theme-color-extend0: 0, 172, 238;
-		--theme-color-extend1: 255, 105, 55;
-		--theme-color-extend2: 0, 112, 74;
-	}
+@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;
+	/* ... */
 }
 ```
 
-> 请注意，这里的 CSS 变量名必须与 `tailwind.config.js` 中的颜色系统配置一致，否则无法切换主题。extend 数量不限，但不同主题的 extend 数量必须一致。
-
 ### 切换
 
 引入 NPM 包中的 switchTheme 方法切换主题，传入主题文件对象即可。
@@ -246,9 +193,8 @@ switchTheme(customTheme);
 
 ### 多主题模式
 
-1. 在入口 CSS 文件内配置主题 CSS 变量，如 `src/app.css`。
-2. 在 `tailwind.config.js` 中配置主题颜色系统。
-3. 到主题生成器中配置颜色系统并生成主题配置文件。
-4. 在需要切换主题的地方引入主题配置文件和切换主题方法，调用切换主题方法。
+1. 在入口 CSS 文件内配置默认主题 CSS 变量，如 `src/app.css`。
+2. 到主题生成器中配置颜色系统并生成主题配置文件。
+3. 在需要切换主题的地方引入主题配置文件和切换主题方法，调用切换主题方法。
 
-> 当然，如果你不需要切换主题，只需要配置初始 CSS 变量并在 `tailwind.config.js` 中配置颜色系统即可。
+> 当然，如果你不需要切换主题，只需要配置初始 CSS 变量即可。

docs/mds/guide/theme_en.md

@@ -1,17 +1,21 @@
-> Starting from version v0.4.0, STDF supports switching between multiple themes.
-
 ## Light and dark modes
 
 ### Configuration
 
-To use the dark mode configuration of Tailwind CSS, please configure `darkMode: 'class'` in `tailwind.config.js`, refer to [Dark Mode](https://tailwindcss.com/docs/dark-mode).
+Use the Tailwind CSS dark mode configuration, please make the following `@custom-variant` configuration in the project entry CSS file, reference [Dark Mode](https://tailwindcss.com/docs/dark-mode).
+
+```css
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *))
+```
 
 ### Switching
 
-Starting from version 0.4.0, STDF puts the method of switching between light and dark modes in the STDF NPM package, which is essentially to add or remove the `dark` class name to the `html` tag.
+STDF supports switching between multiple themes. The method of switching themes is placed in the NPM package of STDF, essentially adding or removing the `dark` class name to the `html` tag.
 
 ```javascript
-// Import darkMode, pass false to switch to light mode, pass no parameters or pass true to switch to dark mode.
+// Import darkMode, pass false to switch to light mode, or not pass parameters or pass true to switch to dark mode.
 import { darkMode } from 'stdf/theme';
 
 // Switch to light mode
@@ -21,234 +25,176 @@ darkMode(false);
 darkMode();
 ```
 
-## Multiple themes
+## Multiple theme mode
 
 ### Introduction
 
-Starting from version 0.4.0, STDF supports switching between multiple themes. The theme currently supports switching [color systems](/#/guide/color), and it is considered that font, spacing, text size and other configurations can also follow the theme switching. The essential principle is to set some attributes as CSS variables, and modify these variables to achieve theme switching.
+STDF supports switching between multiple themes, currently supports switching [color system](/guide/color), and will consider switching font, spacing, text size, etc. in the future. The essential principle is to set some attributes as CSS variables, and switch the theme by modifying these variables.
 
 ### Configuration
 
-Please refer to the theme generator to generate the theme configuration format and configure the theme. The theme configuration must include the `name` and `color` attributes. The `name` is the theme name, and the `color` is the color matching of this theme. The default theme configuration is as follows:
-
-> You can go to the <a href="#/guide/generator" target="_blank">Theme Generator</a> to quickly configure the color system and generate the configuration file.
-
-```javascript
-{
-    name: 'STDF',
-    color: {
-        primary: {
-            50: '245, 248, 255', // #F5F8FF
-            100: '232, 238, 255', // #E8EEFF
-            200: '187, 203, 254', // #BBCBFE
-            300: '143, 165, 253', // #8FA5FD
-            400: '99, 124, 253', // #637CFD
-            500: '55, 81, 252', // #3751FC
-            default: '11, 36, 251', // #0B24FB
-            700: '7, 20, 207', // #0714CF
-            800: '4, 9, 164', // #0409A4
-            900: '1, 1, 120', // #010178
-            950: '3, 0, 77', // #03004D
-        },
-        dark: {
-            50: '255, 254, 245', // #FFFEF5
-            100: '255, 251, 232', // #FFFBE8
-            200: '255, 244, 199', // #FFF4C7
-            300: '255, 234, 166', // #FFEAA6
-            400: '255, 222, 133', // #FFDE85
-            500: '255, 209, 100', // #FFD164
-            default: '255, 192, 67', // #FFC043
-            700: '210, 148, 41', // #D29429
-            800: '166, 108, 22', // #A66C16
-            900: '121, 72, 8', // #794808
-            950: '77, 41, 0', // #4D2900
-        },
-        primaryBlack: '1, 3, 25', // #010319
-        primaryWhite: '242, 242, 243', // #F2F2F3
-        darkBlack: '25, 17, 1', // #191101
-        darkWhite: '243, 242, 242', // #F3F2F2
-        functional: {
-            success: '17, 187, 141', // #11bb8d
-            warning: '185, 80, 0', // #b95000
-            error: '218, 20, 20', // #da1414
-            info: '46, 90, 172', // #2e5aac
-        },
-        extend: [
-            { color: '0, 172, 238', alias: "Twitter" }, // #00acee
-            { color: '255, 105, 55', alias: "Svelte" }, // #ff6937
-            { color: '0, 112, 74', alias: "Starbucks" }, // #00704a
-        ],
-    },
-}
-```
-
-According to the Tailwind rules, the `primary/50` this kind of transparency writing method is supported by using CSS variables at the same time. When configuring `theme.extend.colors` in `tailwind.config.js`, hexadecimal cannot be used, and the writing method with alpha channel must be used. STDF uniformly adopts the rgba writing method. You need to **pay special attention to the initial CSS variables, you only need to list the three values ​​of rgb**, refer to [Using CSS variables](https://tailwindcss.com/docs/customizing-colors#using-css-variables).
-
-```css
-/* ✅ ✅ This writing method is correct */
-:root {
-	--color-primary: 255 115 179;
-	--color-dark: 111 114 185;
-}
-```
+Please refer to the theme configuration format generated by the theme generator for the theme configuration, the theme configuration must contain the name and color attributes, name is the theme name, and color is the color system configuration.
 
-```css
-/* ❌ ❌ This writing method is wrong */
-:root {
-	--color-primary: rgb(255 115 179);
-	--color-secondary: rgb(111 114 185);
-}
-```
+> Please refer to [Theme Generator](/guide/generator) for the theme configuration format.
 
-According to the color system's color matching, plus the basic black, white, gray, and transparency, when configuring `theme.extend.colors` in `tailwind.config.js`, at least the following contents must be included:
+Default theme configuration:
 
 ```javascript
-/** @type {import('tailwindcss').Config} */
-// ...
-module.exports = {
-	// ...
-	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>)',
+{
+	name: 'STDF',
+	color: {
+		primary: {
+			50: 'oklch(0.979 0.01 267.36)', // #F5F8FF hsl(222, 100%, 98%)
+			100: 'oklch(0.95 0.024 270.343)', // #E8EEFF hsl(224, 100%, 96%)
+			200: 'oklch(0.847 0.074 271.188)', // #BBCBFE hsl(226, 97%, 87%)
+			300: 'oklch(0.741 0.13 272.232)', // #8FA5FD hsl(228, 97%, 78%)
+			400: 'oklch(0.634 0.193 271.595)', // #637CFD hsl(230, 98%, 69%)
+			500: 'oklch(0.536 0.252 268.66)', // #3751FC hsl(232, 97%, 60%)
+			default: 'oklch(0.467 0.296 264.886)', // #0B24FB hsl(234, 97%, 51%)
+			700: 'oklch(0.397 0.26 264.877)', // #0714CF hsl(236, 94%, 42%)
+			800: 'oklch(0.331 0.221 264.833)', // #0409A4 hsl(238, 95%, 33%)
+			900: 'oklch(0.26 0.178 264.428)', // #010178 hsl(240, 98%, 24%)
+			950: 'oklch(0.192 0.13 266.64)' // #03004D hsl(242, 100%, 15%)
+		},
+		dark: {
+			50: 'oklch(0.995 0.012 101.474)', // #FFFEF5 hsl(54, 100%, 98%)
+			100: 'oklch(0.986 0.025 97.107)', // #FFFBE8 hsl(50, 100%, 96%)
+			200: 'oklch(0.965 0.059 95.884)', // #FFF4C7 hsl(48, 100%, 89%)
+			300: 'oklch(0.938 0.089 92.952)', // #FFEAA6 hsl(46, 100%, 83%)
+			400: 'oklch(0.91 0.114 89.711)', // #FFDE85 hsl(44, 100%, 76%)
+			500: 'oklch(0.88 0.136 86.375)', // #FFD164 hsl(42, 100%, 70%)
+			default: 'oklch(0.845 0.153 80.597)', // #FFC043 hsl(40, 100%, 63%)
+			700: 'oklch(0.71 0.137 75.734)', // #D29429 hsl(38, 67%, 49%)
+			800: 'oklch(0.58 0.118 70.166)', // #A3731F hsl(36, 80%, 45%)
+			900: 'oklch(0.45 0.094 64.59)', // #744F14 hsl(34, 80%, 39%)
+			950: 'oklch(0.32 0.069 59.014)' // #46300A hsl(32, 80%, 32%)
+		},
+		primaryBlack: 'oklch(0.116 0.054 267.087)', // #010319 hsl(234, 95%, 5%)
+		primaryWhite: 'oklch(0.961 0.001 286.375)', // #F2F2F3 hsl(234, 5%, 95%)
+		darkBlack: 'oklch(0.183 0.035 86.634)', // #191101 hsl(40, 95%, 5%)
+		darkWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(40, 5%, 95%)
+		functional: {
+			success: 'oklch(0.704 0.142 167.084)', // #11bb8d hsl(164, 83%, 40%)
+			warning: 'oklch(0.558 0.154 47.186)', // #b95000 hsl(26, 100%, 36%)
+			error: 'oklch(0.564 0.223 28.46)', // #da1414 hsl(0, 83%, 47%)
+			info: 'oklch(0.482 0.14 261.518)' // #2e5aac hsl(219, 58%, 43%)
+		},
+		extend: [
+			{
+				color: 'oklch(0.703 0.149 235.059)', // #00acee hsl(197, 100%, 47%)
+				alias: 'Twitter'
 			},
-			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',
+			{
+				color: 'oklch(0.702 0.194 38.137)', // #ff6937 hsl(15, 100%, 61%)
+				alias: 'Svelte'
 			},
-			transparent: 'transparent',
-			// ...
-		},
-		// ...
-	},
-	darkMode: 'class',
-	// ...
-};
+			{
+				color: 'oklch(0.482 0.107 161.212)', // #00704a hsl(160, 100%, 22%)
+				alias: 'Starbucks'
+			}
+		]
+	}
+}
 ```
 
-Finally, add the initial theme CSS variables in the global style, such as `src/app.css`:
+Tailwind v4 recommends using the oklch color mode, reference [Using CSS variables](https://tailwindcss.com/docs/customizing-colors#using-css-variables).
+
+According to the color system configuration, plus the basic black, white, gray, and transparent, the default color system configuration in the entry CSS file must contain the following content:
 
 ```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-	:root {
-		--theme-color-primary-50: 245, 248, 255;
-		--theme-color-primary-100: 232, 238, 255;
-		--theme-color-primary-200: 187, 203, 254;
-		--theme-color-primary-300: 143, 165, 253;
-		--theme-color-primary-400: 99, 124, 253;
-		--theme-color-primary-500: 55, 81, 252;
-		--theme-color-primary: 11, 36, 251;
-		--theme-color-primary-700: 7, 20, 207;
-		--theme-color-primary-800: 4, 9, 164;
-		--theme-color-primary-900: 1, 1, 120;
-		--theme-color-primary-950: 3, 0, 77;
-		--theme-color-dark-50: 255, 254, 245;
-		--theme-color-dark-100: 255, 251, 232;
-		--theme-color-dark-200: 255, 244, 199;
-		--theme-color-dark-300: 255, 234, 166;
-		--theme-color-dark-400: 255, 222, 133;
-		--theme-color-dark-500: 255, 209, 100;
-		--theme-color-dark: 255, 192, 67;
-		--theme-color-dark-700: 210, 148, 41;
-		--theme-color-dark-800: 166, 108, 22;
-		--theme-color-dark-900: 121, 72, 8;
-		--theme-color-dark-950: 77, 41, 0;
-		--theme-color-primaryBlack: 1, 3, 25;
-		--theme-color-primaryWhite: 242, 242, 243;
-		--theme-color-darkBlack: 25, 17, 1;
-		--theme-color-darkWhite: 243, 242, 242;
-		--theme-color-functional-success: 17, 187, 141;
-		--theme-color-functional-warning: 185, 80, 0;
-		--theme-color-functional-error: 218, 20, 20;
-		--theme-color-functional-info: 46, 90, 172;
-		--theme-color-extend0: 0, 172, 238;
-		--theme-color-extend1: 255, 105, 55;
-		--theme-color-extend2: 0, 112, 74;
-	}
+@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;
+	/* ... */
 }
 ```
 
-> Please note that the CSS variable names here must be consistent with the color system configuration in `tailwind.config.js`, otherwise the theme cannot be switched.
-
 ### Switching
 
-Import the theme configuration file and the switchTheme method in the NPM package of STDF to switch the theme, and pass in the theme file object.
+Import the theme configuration file and the switch theme method in the NPM package of STDF, and call the switch theme method.
 
 ```javascript
-// Import STDF theme configuration file and switch theme method (stdf NPM package contains a stdf theme configuration file)
+// Import the theme configuration file and the switch theme method (the NPM package of STDF contains a STDF theme configuration file)
 import { stdfTheme, switchTheme } from 'stdf/theme';
-// Import custom theme configuration file, assuming customTheme is a custom theme configuration file
+// Import the custom theme configuration file, assume customTheme is the custom theme configuration file
 import customTheme from './customTheme';
 
-// Switch theme to STDF theme
+// Switch to STDF theme
 switchTheme(stdfTheme);
 
-// Switch theme to custom theme
+// Switch to custom theme
 switchTheme(customTheme);
 ```
 
-For detailed usage, please refer to [STDF Demo](https://github.com/any-tdf/demo-stdf).
+Detailed usage can refer to [STDF Demo](https://github.com/any-tdf/demo-stdf).
 
 ## Summary
 
 ### Light and dark modes
 
-Use the darkMode method in the STDF NPM package directly.
+Directly use the darkMode method in the NPM package of STDF.
 
-### Multiple themes
+### Multiple theme mode
 
-1. Configure the theme CSS variables in the entry CSS file, such as `src/app.css`.
-2. Configure the theme color system in `tailwind.config.js`.
-3. Go to the theme generator to configure the color system and generate the theme configuration file.
-4. Import the theme configuration file and the switch theme method where you need to switch the theme, and call the switch theme method.
+1. Configure the default theme CSS variables in the entry CSS file, such as `src/app.css`.
+2. Configure the color system in the theme generator and generate the theme configuration file.
+3. Import the theme configuration file and the switch theme method in the NPM package of STDF, and call the switch theme method.
 
-> Of course, if you don’t need to switch themes, you only need to configure the initial CSS variables and configure the color system in `tailwind.config.js`.
+> Of course, if you don't need to switch themes, you only need to configure the initial CSS variables.

docs/site/package.json

@@ -21,11 +21,13 @@
 		"@sveltejs/kit": "^2.9.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.1",
 		"@tailwindcss/typography": "^0.5.15",
+		"@tailwindcss/vite": "^4.0.12",
 		"@types/color": "^4.2.0",
-		"autoprefixer": "^10.4.20",
+		"@types/culori": "^2.1.1",
 		"beautify-qrcode": "^1.0.3",
 		"clipboard": "^2.0.11",
 		"color": "^4.2.3",
+		"culori": "^4.0.1",
 		"eslint": "^9.16.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
@@ -39,7 +41,7 @@
 		"stdf": "file:../../packages/stdf",
 		"svelte": "^5.7.1",
 		"svelte-check": "^4.1.1",
-		"tailwindcss": "^3.4.16",
+		"tailwindcss": "^4.0.12",
 		"typescript": "^5.7.2",
 		"typescript-eslint": "^8.17.0",
 		"vite": "^6.0.3"

docs/site/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
-	}
-};

docs/site/src/app.css

@@ -1,41 +1,217 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-
-@layer base {
-	:root {
-		--theme-color-primary-50: 245, 248, 255;
-		--theme-color-primary-100: 232, 238, 255;
-		--theme-color-primary-200: 187, 203, 254;
-		--theme-color-primary-300: 143, 165, 253;
-		--theme-color-primary-400: 99, 124, 253;
-		--theme-color-primary-500: 55, 81, 252;
-		--theme-color-primary: 11, 36, 251;
-		--theme-color-primary-700: 7, 20, 207;
-		--theme-color-primary-800: 4, 9, 164;
-		--theme-color-primary-900: 1, 1, 120;
-		--theme-color-primary-950: 3, 0, 77;
-		--theme-color-dark-50: 255, 254, 245;
-		--theme-color-dark-100: 255, 251, 232;
-		--theme-color-dark-200: 255, 244, 199;
-		--theme-color-dark-300: 255, 234, 166;
-		--theme-color-dark-400: 255, 222, 133;
-		--theme-color-dark-500: 255, 209, 100;
-		--theme-color-dark: 255, 192, 67;
-		--theme-color-dark-700: 210, 148, 41;
-		--theme-color-dark-800: 166, 108, 22;
-		--theme-color-dark-900: 121, 72, 8;
-		--theme-color-dark-950: 77, 41, 0;
-		--theme-color-primaryBlack: 1, 3, 25;
-		--theme-color-primaryWhite: 242, 242, 243;
-		--theme-color-darkBlack: 25, 17, 1;
-		--theme-color-darkWhite: 243, 242, 242;
-		--theme-color-functional-success: 17, 187, 141;
-		--theme-color-functional-warning: 185, 80, 0;
-		--theme-color-functional-error: 218, 20, 20;
-		--theme-color-functional-info: 46, 90, 172;
-		--theme-color-extend0: 0, 172, 238;
-		--theme-color-extend1: 255, 105, 55;
-		--theme-color-extend2: 0, 112, 74;
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@plugin "@tailwindcss/typography";
+
+@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;
+
+	--color-bug1: oklch(0.579 0.214 27.172);
+	--color-bug2: oklch(0.749 0.162 66.986);
+	--color-bug3: oklch(0.912 0.192 103.116);
+	--color-bug4: oklch(0.779 0.141 229.596);
+	--color-tailwind: oklch(0.746 0.16 232.661);
+	--color-svelte: oklch(0.702 0.194 38.137);
+
+	--animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+	@keyframes shake {
+		10%,
+		90% {
+			transform: translate3d(-1px, 0, 0);
+		}
+		20%,
+		80% {
+			transform: translate3d(2px, 0, 0);
+		}
+		30%,
+		50%,
+		70% {
+			transform: translate3d(-4px, 0, 0);
+		}
+		40%,
+		60% {
+			transform: translate3d(4px, 0, 0);
+		}
+	}
+
+	--animate-lightning: lightning 3s linear infinite;
+	@keyframes lightning {
+		0% {
+			opacity: 0;
+		}
+		10% {
+			opacity: 1;
+		}
+		20% {
+			opacity: 0;
+		}
+		30% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+		}
 	}
+
+	--animate-path: path 3s linear infinite;
+	@keyframes path {
+		0% {
+			stroke-dashoffset: 400;
+			fill: transparent;
+		}
+		31% {
+			stroke-dashoffset: 0;
+			fill: transparent;
+		}
+		32% {
+			stroke-dashoffset: 0;
+			fill: currentColor;
+			opacity: 1;
+		}
+		33% {
+			opacity: 0;
+		}
+		35% {
+			opacity: 1;
+		}
+		37% {
+			opacity: 0;
+		}
+		39% {
+			opacity: 1;
+		}
+		41% {
+			opacity: 0;
+		}
+		43% {
+			opacity: 1;
+		}
+		44% {
+			stroke-dashoffset: 0;
+			fill: currentColor;
+		}
+		99% {
+			stroke-dashoffset: 0;
+			fill: currentColor;
+		}
+		100% {
+			stroke-dashoffset: 400;
+			fill: transparent;
+		}
+	}
+
+	--animate-dynamicsBg:dynamicsBg 8s linear infinite;
+	@keyframes dynamicsBg {
+		0% {
+			transform: rotate(360deg);
+			height: 14rem;
+			width: 14rem;
+		}
+		50% {
+			height: 7rem;
+			width: 7rem;
+		}
+		100% {
+			transform: rotate(0deg);
+			height: 14rem;
+			width: 14rem;
+		}
+	}
+
+	--animate-cloudMove: cloudMove 40s linear infinite;
+	@keyframes cloudMove {
+		0% {
+			transform: translateX(20%) translateY(-20%);
+		}
+		50% {
+			transform: translateX(-100%) translateY(-20%);
+		}
+		100% {
+			transform: translateX(20%) translateY(-20%);
+		}
+	}
+
+	--animate-starTwinkle: starTwinkle 8s linear infinite;
+	--animate-starTwinkle2: starTwinkle 3s linear infinite;
+	--animate-starTwinkle3: starTwinkle 6s linear infinite;
+	--animate-starTwinkle4: starTwinkle 4s linear infinite;
+	@keyframes starTwinkle {
+		0% {
+			opacity: 1;
+		}
+		40% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0;
+		}
+		60% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+}
+
+@source "../../packages/stdf/dist/**/*.svelte";
+
+pre {
+	background-color: transparent;
+	padding: 0;
 }

docs/site/src/data/themes/azurePink.ts

@@ -4,45 +4,54 @@ const AzurePink: ThemeProps = {
 	name: 'AzurePink',
 	color: {
 		primary: {
-			50: '245, 247, 255', // #F5F7FF
-			100: '232, 237, 255', // #E8EDFF
-			200: '176, 186, 237', // #B0BAED
-			300: '126, 139, 219', // #7E8BDB
-			400: '83, 94, 201', // #535EC9
-			500: '45, 54, 183', // #2D36B7
-			default: '13, 18, 165', // #0D12A5
-			700: '8, 8, 143', // #08088F
-			800: '9, 5, 121', // #090579
-			900: '8, 2, 99', // #080263
-			950: '8, 0, 77' // #08004D
+			50: 'oklch(0.977 0.011 274.897)', // #F5F7FF hsl(228, 100%, 98%)
+			100: 'oklch(0.948 0.025 273.503)', // #E8EDFF hsl(227, 100%, 96%)
+			200: 'oklch(0.799 0.073 275.979)', // #B0BAED hsl(230, 63%, 81%)
+			300: 'oklch(0.66 0.12 275.608)', // #7E8BDB hsl(232, 56%, 68%)
+			400: 'oklch(0.531 0.164 274.903)', // #535EC9 hsl(234, 52%, 56%)
+			500: 'oklch(0.421 0.199 271.236)', // #2D36B7 hsl(236, 61%, 45%)
+			default: 'oklch(0.341 0.216 266.286)', // #0D12A5 hsl(238, 85%, 35%)
+			700: 'oklch(0.302 0.198 265.961)', // #08088F hsl(240, 89%, 30%)
+			800: 'oklch(0.269 0.175 267.031)', // #090579 hsl(242, 92%, 25%)
+			900: 'oklch(0.233 0.152 268.05)', // #080263 hsl(244, 96%, 20%)
+			950: 'oklch(0.196 0.128 270.599)' // #08004D hsl(246, 100%, 15%)
 		},
 		dark: {
-			50: '255, 245, 248', // #FFF5F8
-			100: '255, 232, 240', // #FFE8F0
-			200: '251, 190, 213', // #FBBED5
-			300: '247, 149, 190', // #F795BE
-			400: '243, 109, 169', // #F36DA9
-			500: '239, 70, 152', // #EF4698
-			default: '235, 33, 136', // #EB2188
-			700: '195, 21, 117', // #C31575
-			800: '156, 11, 95', // #9C0B5F
-			900: '116, 4, 73', // #740449
-			950: '77, 0, 50' // #4D0032
+			50: 'oklch(0.979 0.011 356.992)', // #FFF5F8 hsl(342, 100%, 98%)
+			100: 'oklch(0.952 0.027 354.511)', // #FFE8F0 hsl(339, 100%, 96%)
+			200: 'oklch(0.863 0.076 354.34)', // #FBBED5 hsl(337, 88%, 87%)
+			300: 'oklch(0.783 0.127 353.824)', // #F795BE hsl(335, 86%, 78%)
+			400: 'oklch(0.713 0.175 354.443)', // #F36DA9 hsl(333, 85%, 69%)
+			500: 'oklch(0.658 0.216 355.121)', // #EF4698 hsl(331, 84%, 61%)
+			default: 'oklch(0.621 0.239 357.218)', // #EB2188 hsl(329, 84%, 53%)
+			700: 'oklch(0.54 0.212 354.913)', // #C31575 hsl(327, 81%, 42%)
+			800: 'oklch(0.458 0.183 353.544)', // #9C0B5F hsl(325, 87%, 33%)
+			900: 'oklch(0.37 0.15 351.13)', // #740449 hsl(323, 93%, 24%)
+			950: 'oklch(0.278 0.117 348.207)' // #4D0032 hsl(321, 100%, 15%)
 		},
-		primaryBlack: '1, 1, 25', // #010119
-		primaryWhite: '242, 242, 243', // #F2F2F3
-		darkBlack: '25, 1, 13', // #19010D
-		darkWhite: '243, 242, 242', // #F3F2F2
+		primaryBlack: 'oklch(0.106 0.061 269.597)', // #010119 hsl(238, 95%, 5%)
+		primaryWhite: 'oklch(0.961 0.001 286.375)', // #F2F2F3 hsl(238, 5%, 95%)
+		darkBlack: 'oklch(0.144 0.055 350.158)', // #19010D hsl(329, 95%, 5%)
+		darkWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(329, 5%, 95%)
 		functional: {
-			success: '43, 164, 23', // #2ba417
-			warning: '227, 115, 24', // #e37318
-			error: '213, 73, 65', // #d54941
-			info: '0, 82, 217' // #0052d9
+			success: 'oklch(0.629 0.199 141.373)', // #2ba417 hsl(112, 75%, 37%)
+			warning: 'oklch(0.674 0.166 52.005)', // #e37318 hsl(27, 81%, 49%)
+			error: 'oklch(0.599 0.177 27.079)', // #d54941 hsl(3, 64%, 55%)
+			info: 'oklch(0.492 0.217 261.351)' // #0052d9 hsl(217, 100%, 43%)
 		},
 		extend: [
-			{ color: '20, 40, 160', alias: 'Samsung' }, // #1428A0
-			{ color: '253, 73, 0', alias: 'Xiaomi' }, // #fd4900
-			{ color: '4, 106, 56', alias: 'OPPO' } // ##046a38
+			{
+				color: 'oklch(0.364 0.191 266.82)', // #1428a0 hsl(231, 78%, 35%)
+				alias: 'Samsung'
+			},
+			{
+				color: 'oklch(0.66 0.225 36.296)', // #fd4900 hsl(17, 100%, 50%)
+				alias: 'Xiaomi'
+			},
+			{
+				color: 'oklch(0.461 0.116 153.579)', // #046a38 hsl(151, 93%, 22%)
+				alias: 'OPPO'
+			}
 		]
 	}
 };

docs/site/src/data/themes/camelliaRed.ts

@@ -4,45 +4,54 @@ const CamelliaRed: ThemeProps = {
 	name: 'CamelliaRed',
 	color: {
 		primary: {
-			50: '255, 246, 245', // #FFF6F5
-			100: '255, 234, 232', // #FFEAE8
-			200: '252, 199, 196', // #FCC7C4
-			300: '248, 163, 162', // #F8A3A2
-			400: '245, 128, 130', // #F58082
-			500: '241, 95, 102', // #F15F66
-			default: '238, 63, 77', // #EE3F4D
-			700: '198, 39, 58', // #C6273A
-			800: '157, 21, 41', // #9D1529
-			900: '117, 8, 28', // #75081C
-			950: '77, 0, 17' // #4D0011
+			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.876 0.061 22.144)', // #FCC7C4 hsl(3, 90%, 88%)
+			300: 'oklch(0.799 0.101 20.296)', // #F8A3A2 hsl(1, 86%, 80%)
+			400: 'oklch(0.732 0.143 20.141)', // #F58082 hsl(359, 85%, 73%)
+			500: 'oklch(0.675 0.18 20.489)', // #F15F66 hsl(357, 84%, 66%)
+			default: 'oklch(0.632 0.21 21.584)', // #EE3F4D hsl(355, 84%, 59%)
+			700: 'oklch(0.54 0.193 20.999)', // #C6273A hsl(353, 67%, 47%)
+			800: 'oklch(0.449 0.168 20.933)', // #9D1529 hsl(351, 76%, 35%)
+			900: 'oklch(0.36 0.138 20.161)', // #75081C hsl(349, 87%, 25%)
+			950: 'oklch(0.266 0.107 17.45)' // #4D0011 hsl(347, 100%, 15%)
 		},
 		dark: {
-			50: '254, 250, 255', // #FEFAFF
-			100: '251, 232, 255', // #FBE8FF
-			200: '246, 214, 255', // #F6D6FF
-			300: '240, 196, 255', // #F0C4FF
-			400: '233, 179, 255', // #E9B3FF
-			500: '225, 161, 255', // #E1A1FF
-			default: '216, 143, 255', // #D88FFF
-			700: '164, 88, 210', // #A458D2
-			800: '116, 46, 166', // #742EA6
-			900: '74, 17, 121', // #4A1179
-			950: '40, 0, 77' // #28004D
+			50: 'oklch(0.99 0.008 319.447)', // #FEFAFF hsl(288, 100%, 99%)
+			100: 'oklch(0.953 0.037 320.346)', // #FBE8FF hsl(290, 100%, 96%)
+			200: 'oklch(0.915 0.065 318.761)', // #F6D6FF hsl(287, 100%, 92%)
+			300: 'oklch(0.877 0.092 317.423)', // #F0C4FF hsl(285, 100%, 88%)
+			400: 'oklch(0.841 0.118 315.933)', // #E9B3FF hsl(283, 100%, 85%)
+			500: 'oklch(0.803 0.145 314.514)', // #E1A1FF hsl(281, 100%, 82%)
+			default: 'oklch(0.765 0.171 312.957)', // #D88FFF hsl(279, 100%, 78%)
+			700: 'oklch(0.602 0.188 310.729)', // #A458D2 hsl(277, 58%, 58%)
+			800: 'oklch(0.461 0.184 307.198)', // #742EA6 hsl(275, 57%, 42%)
+			900: 'oklch(0.339 0.159 303.074)', // #4A1179 hsl(273, 75%, 27%)
+			950: 'oklch(0.231 0.124 299.616)' // #28004D hsl(271, 100%, 15%)
 		},
-		primaryBlack: '25, 1, 3', // #190103
-		primaryWhite: '243, 242, 242', // #F3F2F2
-		darkBlack: '16, 1, 25', // #100119
-		darkWhite: '242, 242, 243', // #F2F2F3
+		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.134 0.06 312.473)', // #100119 hsl(279, 95%, 5%)
+		darkWhite: 'oklch(0.961 0.001 286.375)', // #F2F2F3 hsl(279, 5%, 95%)
 		functional: {
-			success: '82, 196, 26', // #52c41a
-			warning: '250, 173, 20', // #faad14
-			error: '255, 77, 79', // #ff4d4f
-			info: '22, 119, 255' // #1677ff
+			success: 'oklch(0.726 0.218 138.487)', // #52c41a hsl(100, 77%, 44%)
+			warning: 'oklch(0.802 0.165 76.001)', // #faad14 hsl(40, 96%, 53%)
+			error: 'oklch(0.673 0.214 24.465)', // #ff4d4f hsl(359, 100%, 65%)
+			info: 'oklch(0.599 0.219 259.04)' // #1677ff hsl(215, 100%, 54%)
 		},
 		extend: [
-			{ color: '59, 89, 152', alias: 'Facebook' }, // #3b5998
-			{ color: '237, 28, 22', alias: 'CocaCola' }, // #ed1c16
-			{ color: '0, 104, 181', alias: 'Intel' } // #0068b5
+			{
+				color: 'oklch(0.472 0.108 263.58)', // #3b5998 hsl(221, 44%, 41%)
+				alias: 'Facebook'
+			},
+			{
+				color: 'oklch(0.602 0.236 28.928)', // #ed1c16 hsl(2, 86%, 51%)
+				alias: 'CocaCola'
+			},
+			{
+				color: 'oklch(0.51 0.145 250.251)', // #0068b5 hsl(206, 100%, 36%)
+				alias: 'Intel'
+			}
 		]
 	}
 };

docs/site/src/data/themes/chameleon.ts

@@ -4,45 +4,54 @@ const Chameleon: ThemeProps = {
 	name: 'Chameleon',
 	color: {
 		primary: {
-			50: '245, 255, 248', // #F5FFF8
-			100: '232, 255, 239', // #E8FFEF
-			200: '173, 236, 195', // #ADECC3
-			300: '120, 218, 157', // #78DA9D
-			400: '74, 199, 126', // #4AC77E
-			500: '35, 181, 100', // #23B564
-			default: '2, 162, 78', // #02A24E
-			700: '1, 141, 73', // #018D49
-			800: '1, 119, 66', // #017742
-			900: '0, 98, 57', // #006239
-			950: '0, 77, 47' // #004D2F
+			50: 'oklch(0.991 0.014 155.599)', // #F5FFF8 hsl(138, 100%, 98%)
+			100: 'oklch(0.979 0.032 155.407)', // #E8FFEF hsl(138, 100%, 96%)
+			200: 'oklch(0.89 0.085 155.743)', // #ADECC3 hsl(141, 62%, 80%)
+			300: 'oklch(0.812 0.128 154.98)', // #78DA9D hsl(143, 57%, 66%)
+			400: 'oklch(0.742 0.153 154.251)', // #4AC77E hsl(145, 53%, 54%)
+			500: 'oklch(0.682 0.167 152.73)', // #23B564 hsl(147, 68%, 42%)
+			default: 'oklch(0.623 0.168 150.91)', // #02A24E hsl(149, 98%, 32%)
+			700: 'oklch(0.564 0.146 152.693)', // #018D49 hsl(151, 99%, 28%)
+			800: 'oklch(0.5 0.124 154.785)', // #017742 hsl(153, 98%, 24%)
+			900: 'oklch(0.437 0.104 156.756)', // #006239 hsl(155, 100%, 19%)
+			950: 'oklch(0.371 0.085 159.162)' // #004D2F hsl(157, 100%, 15%)
 		},
 		dark: {
-			50: '255, 245, 252', // #FFF5FC
-			100: '255, 232, 250', // #FFE8FA
-			200: '250, 204, 241', // #FACCF1
-			300: '246, 177, 234', // #F6B1EA
-			400: '241, 151, 229', // #F197E5
-			500: '237, 126, 226', // #ED7EE2
-			default: '232, 102, 223', // #E866DF
-			700: '193, 64, 189', // #C140BD
-			800: '154, 34, 154', // #9A229A
-			900: '112, 13, 115', // #700D73
-			950: '71, 0, 77' // #47004D
+			50: 'oklch(0.98 0.014 336.137)', // #FFF5FC hsl(318, 100%, 98%)
+			100: 'oklch(0.955 0.034 333.19)', // #FFE8FA hsl(313, 100%, 96%)
+			200: 'oklch(0.896 0.07 332.956)', // #FACCF1 hsl(312, 82%, 89%)
+			300: 'oklch(0.842 0.108 332.745)', // #F6B1EA hsl(310, 79%, 83%)
+			400: 'oklch(0.793 0.145 331.761)', // #F197E5 hsl(308, 76%, 77%)
+			500: 'oklch(0.75 0.181 330.986)', // #ED7EE2 hsl(306, 76%, 71%)
+			default: 'oklch(0.711 0.213 330.284)', // #E866DF hsl(304, 74%, 66%)
+			700: 'oklch(0.6 0.215 329.149)', // #C140BD hsl(302, 51%, 50%)
+			800: 'oklch(0.496 0.202 328.098)', // #9A229A hsl(300, 64%, 37%)
+			900: 'oklch(0.391 0.17 326.834)', // #700D73 hsl(298, 80%, 25%)
+			950: 'oklch(0.284 0.133 324.454)' // #47004D hsl(295, 100%, 15%)
 		},
-		primaryBlack: '1, 25, 12', // #01190C
-		primaryWhite: '242, 243, 242', // #F2F3F2
-		darkBlack: '25, 1, 23', // #190117
-		darkWhite: '243, 242, 243', // #F3F2F3
+		primaryBlack: 'oklch(0.189 0.042 157.928)', // #01190C hsl(149, 95%, 5%)
+		primaryWhite: 'oklch(0.963 0.002 145.562)', // #F2F3F2 hsl(149, 5%, 95%)
+		darkBlack: 'oklch(0.151 0.063 331.348)', // #190117 hsl(304, 95%, 5%)
+		darkWhite: 'oklch(0.962 0.002 325.59)', // #F3F2F3 hsl(304, 5%, 95%)
 		functional: {
-			success: '103, 194, 58', // #67c23a
-			warning: '230, 162, 60', // #e6a23c
-			error: '245, 108, 108', // #f56c6c
-			info: '144, 147, 153' // #909399
+			success: 'oklch(0.731 0.191 137.226)', // #67c23a hsl(100, 54%, 49%)
+			warning: 'oklch(0.761 0.139 73.316)', // #e6a23c hsl(36, 77%, 57%)
+			error: 'oklch(0.699 0.169 22.456)', // #f56c6c hsl(0, 87%, 69%)
+			info: 'oklch(0.663 0.01 264.502)' // #909399 hsl(220, 4%, 58%)
 		},
 		extend: [
-			{ color: '56, 189, 248', alias: 'Tailwind' }, // #38bdf8
-			{ color: '194, 12, 12', alias: 'NetEaseCloudMusic' }, // #c20c0c
-			{ color: '65, 95, 255', alias: 'vivo' } // #415fff
+			{
+				color: 'oklch(0.746 0.16 232.661)', // #00bcff hsl(194, 100%, 44%)
+				alias: 'Tailwind'
+			},
+			{
+				color: 'oklch(0.515 0.206 28.695)', // #c20c0c hsl(0, 88%, 40%)
+				alias: 'NetEaseCloudMusic'
+			},
+			{
+				color: 'oklch(0.566 0.238 268.917)', // #415fff hsl(231, 100%, 63%)
+				alias: 'vivo'
+			}
 		]
 	}
 };

docs/site/src/data/themes/index.ts

@@ -1,82 +1,15 @@
-import { STDFTheme, type ThemeProps } from 'stdf/theme';
+import { STDFTheme } from 'stdf/theme';
 import Chameleon from './chameleon.js';
 import AzurePink from './azurePink.js';
 import SmartLive from './smartLive.js';
 import CamelliaRed from './camelliaRed.js';
 import Nintendo from './nintendo.js';
 
-/**
- * 传入 rgb 格式 255, 255, 255 的颜色值，返回 hex 格式的颜色值
- * Pass in the color value of rgb format 255, 255, 255 and return the color value of hex format
- * @param {string} rgb
- * @returns {string}
- */
-const rgbToHex = (rgb: string) => {
-	// 如果传入的是 hex 格式的颜色值，直接返回
-	// If the color value passed in is in hex format, return directly
-	if (rgb.includes('#')) {
-		return rgb;
-	}
-	const rgbArr = rgb.split(',');
-	let hex = '#';
-	rgbArr.forEach((item) => {
-		const num = parseInt(item);
-		hex += num.toString(16).padStart(2, '0');
-	});
-	return hex;
-};
-
-/**
- * 将 theme 对象中所有的 rgb 格式 255, 255, 255 转换为 hex 格式 #ffffff
- * Let all rgb formats 255, 255, 255 in the theme object be converted to hex format #ffffff
- * @param {Object} theme
- * @returns {Object}
- */
-const rgbToHexFunc = (theme: ThemeProps) => {
-	const obj = theme.color;
-	const primary = obj.primary;
-	for (const key in primary) {
-		if (Object.hasOwnProperty.call(primary, key)) {
-			const element = primary[key as keyof typeof primary];
-			if (typeof element === 'string' && element.includes(',')) {
-				primary[key as keyof typeof primary] = rgbToHex(element);
-			}
-		}
-	}
-	const dark = obj.dark;
-	for (const key in dark) {
-		if (Object.hasOwnProperty.call(dark, key)) {
-			const element = dark[key as keyof typeof dark];
-			if (typeof element === 'string' && element.includes(',')) {
-				dark[key as keyof typeof dark] = rgbToHex(element);
-			}
-		}
-	}
-	obj.functional.success = rgbToHex(obj.functional.success);
-	obj.functional.warning = rgbToHex(obj.functional.warning);
-	obj.functional.error = rgbToHex(obj.functional.error);
-	obj.functional.info = rgbToHex(obj.functional.info);
-	const extend = obj.extend;
-	extend.forEach((item) => {
-		item.color = rgbToHex(item.color);
-	});
-	obj.primaryBlack = rgbToHex(obj.primaryBlack);
-	obj.primaryWhite = rgbToHex(obj.primaryWhite);
-	obj.darkBlack = rgbToHex(obj.darkBlack);
-	obj.darkWhite = rgbToHex(obj.darkWhite);
-	theme.color = obj;
-	return theme;
-};
-
-export type ThemeItem = { name: string; name_CN: string; theme: ThemeProps };
-
-const themes: ThemeItem[] = [
-	{ name_CN: 'STDF', name: STDFTheme.name, theme: rgbToHexFunc(STDFTheme) },
-	{ name_CN: '任天堂', name: Nintendo.name, theme: rgbToHexFunc(Nintendo) },
-	{ name_CN: '蔚蓝粉', name: AzurePink.name, theme: rgbToHexFunc(AzurePink) },
-	{ name_CN: '变色龙', name: Chameleon.name, theme: rgbToHexFunc(Chameleon) },
-	{ name_CN: '慧活力', name: SmartLive.name, theme: rgbToHexFunc(SmartLive) },
-	{ name_CN: '山茶红', name: CamelliaRed.name, theme: rgbToHexFunc(CamelliaRed) }
+export default [
+	{ name_CN: 'STDF', name: STDFTheme.name, theme: STDFTheme },
+	{ name_CN: '任天堂', name: Nintendo.name, theme: Nintendo },
+	{ name_CN: '蔚蓝粉', name: AzurePink.name, theme: AzurePink },
+	{ name_CN: '变色龙', name: Chameleon.name, theme: Chameleon },
+	{ name_CN: '慧活力', name: SmartLive.name, theme: SmartLive },
+	{ name_CN: '山茶红', name: CamelliaRed.name, theme: CamelliaRed }
 ];
-
-export default themes;

docs/site/src/data/themes/nintendo.ts

@@ -4,45 +4,54 @@ const Nintendo: ThemeProps = {
 	name: 'Nintendo',
 	color: {
 		primary: {
-			50: '255, 246, 245', // #FFF6F5
-			100: '255, 234, 232', // #FFEAE8
-			200: '250, 185, 182', // #FAB9B6
-			300: '245, 136, 134', // #F58886
-			400: '240, 87, 90', // #F0575A
-			500: '235, 43, 52', // #EB2B34
-			default: '230, 0, 18', // #E60012
-			700: '192, 0, 22', // #C00016
-			800: '153, 0, 23', // #990017
-			900: '115, 0, 21', // #730015
-			950: '77, 0, 17' // #4D0011
+			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: '245, 255, 254', // #F5FFFE
-			100: '232, 255, 254', // #E8FFFE
-			200: '182, 249, 249', // #B6F9F9
-			300: '133, 240, 244', // #85F0F4
-			400: '87, 228, 238', // #57E4EE
-			500: '42, 214, 233', // #2AD6E9
-			default: '0, 195, 227', // #00C3E3
-			700: '0, 158, 189', // #009EBD
-			800: '0, 121, 152', // #007998
-			900: '0, 87, 114', // #005772
-			950: '0, 56, 77' // #00384D
+			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: '25, 1, 3', // #190103
-		primaryWhite: '243, 242, 242', // #F3F2F2
-		darkBlack: '1, 22, 25', // #011619
-		darkWhite: '242, 243, 243', // #F2F3F3
+		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: '0, 180, 42', // #00b42a
-			warning: '255, 125, 0', // #ff7d00
-			error: '245, 63, 63', // #f53f3f
-			info: '22, 93, 255' // #165dff
+			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: '0, 82, 217', alias: 'Tencent' }, // #0052d9
-			{ color: '26, 173, 25', alias: 'WeChat' }, // #1aad19
-			{ color: '243, 112, 33', alias: 'Hermès' } // #f37021
+			{
+				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'
+			}
 		]
 	}
 };

docs/site/src/data/themes/smartLive.ts

@@ -4,45 +4,54 @@ const SmartLive: ThemeProps = {
 	name: 'SmartLive',
 	color: {
 		primary: {
-			50: '252, 245, 255', // #FCF5FF
-			100: '248, 232, 255', // #F8E8FF
-			200: '205, 174, 222', // #CDAEDE
-			300: '165, 125, 189', // #A57DBD
-			400: '126, 84, 157', // #7E549D
-			500: '91, 51, 124', // #5B337C
-			default: '60, 26, 91', // #3C1A5B
-			700: '52, 19, 87', // #341357
-			800: '44, 12, 84', // #2C0C54
-			900: '37, 6, 80', // #250650
-			950: '29, 0, 77' // #1D004D
+			50: 'oklch(0.978 0.015 315.966)', // #FCF5FF hsl(282, 100%, 98%)
+			100: 'oklch(0.95 0.035 315.73)', // #F8E8FF hsl(282, 100%, 96%)
+			200: 'oklch(0.794 0.075 313.533)', // #CDAEDE hsl(279, 42%, 78%)
+			300: 'oklch(0.652 0.103 312.25)', // #A57DBD hsl(278, 33%, 62%)
+			400: 'oklch(0.522 0.119 309.358)', // #7E549D hsl(275, 30%, 47%)
+			500: 'oklch(0.406 0.122 307.073)', // #5B337C hsl(273, 42%, 34%)
+			default: 'oklch(0.304 0.112 304.532)', // #3C1A5B hsl(271, 56%, 23%)
+			700: 'oklch(0.28 0.115 301.336)', // #341357 hsl(269, 64%, 21%)
+			800: 'oklch(0.258 0.119 297.251)', // #2C0C54 hsl(267, 75%, 19%)
+			900: 'oklch(0.238 0.12 293.937)', // #250650 hsl(265, 86%, 17%)
+			950: 'oklch(0.216 0.123 289.042)' // #1D004D hsl(263, 100%, 15%)
 		},
 		dark: {
-			50: '253, 255, 245', // #FDFFF5
-			100: '252, 255, 232', // #FCFFE8
-			200: '250, 255, 200', // #FAFFC8
-			300: '251, 255, 168', // #FBFFA8
-			400: '253, 255, 136', // #FDFF88
-			500: '255, 252, 104', // #FFFC68
-			default: '255, 247, 72', // #FFF748
-			700: '210, 197, 45', // #D2C52D
-			800: '166, 149, 23', // #A69517
-			900: '121, 104, 9', // #796809
-			950: '77, 62, 0' // #4D3E00
+			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.902 0.051 19.634)', // #FFD2D1 hsl(1, 100%, 91%)
+			300: 'oklch(0.853 0.08 18.86)', // #FFBABA hsl(0, 100%, 87%)
+			400: 'oklch(0.806 0.111 17.023)', // #FFA2A6 hsl(357, 100%, 82%)
+			500: 'oklch(0.765 0.14 16.578)', // #FF8B93 hsl(356, 100%, 77%)
+			default: 'oklch(0.728 0.169 15.672)', // #FF7483 hsl(354, 100%, 73%)
+			700: 'oklch(0.597 0.173 16.54)', // #D2485A hsl(352, 61%, 55%)
+			800: 'oklch(0.482 0.163 17.177)', // #A6263B hsl(350, 63%, 40%)
+			900: 'oklch(0.373 0.138 17.973)', // #790E23 hsl(348, 79%, 27%)
+			950: 'oklch(0.267 0.107 16.66)' // #4D0012 hsl(346, 100%, 15%)
 		},
-		primaryBlack: '13, 1, 25', // #0D0119
-		primaryWhite: '242, 242, 243', // #F2F2F3
-		darkBlack: '25, 24, 1', // #191801
-		darkWhite: '243, 243, 242', // #F3F3F2
+		primaryBlack: 'oklch(0.129 0.059 306.37)', // #0D0119 hsl(271, 95%, 5%)
+		primaryWhite: 'oklch(0.961 0.001 286.375)', // #F2F2F3 hsl(271, 5%, 95%)
+		darkBlack: 'oklch(0.139 0.05 18.003)', // #190103 hsl(354, 95%, 5%)
+		darkWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(354, 5%, 95%)
 		functional: {
-			success: '21, 91, 54', // #155b36
-			warning: '208, 126, 11', // #d07e0b
-			error: '218, 20, 20', // #da1414
-			info: '99, 176, 227' // #63b0e3
+			success: 'oklch(0.419 0.092 155.284)', // #155b36 hsl(148, 63%, 22%)
+			warning: 'oklch(0.666 0.147 65.222)', // #d07e0b hsl(35, 90%, 43%)
+			error: 'oklch(0.564 0.223 28.46)', // #da1414 hsl(0, 83%, 47%)
+			info: 'oklch(0.728 0.107 239.498)' // #63b0e3 hsl(204, 70%, 64%)
 		},
 		extend: [
-			{ color: '118, 185, 0', alias: 'NVIDIA' }, // #76b900
-			{ color: '251, 114, 153', alias: 'bilibili' }, // #fb7299
-			{ color: '22, 119, 255', alias: 'AliPay' } // #1677ff
+			{
+				color: 'oklch(0.713 0.194 130.802)', // #76b900 hsl(82, 100%, 36%)
+				alias: 'NVIDIA'
+			},
+			{
+				color: 'oklch(0.726 0.171 4.454)', // #fb7299 hsl(343, 95%, 72%)
+				alias: 'bilibili'
+			},
+			{
+				color: 'oklch(0.599 0.219 259.04)', // #1677ff hsl(215, 100%, 54%)
+				alias: 'AliPay'
+			}
 		]
 	}
 };

docs/site/src/lib/cmdk/CmdK.svelte

@@ -213,7 +213,7 @@
 {#if $isCmdKStore}
 	<div
 		transition:fade={{ duration: 50 }}
-		class="fixed left-0 top-0 flex h-screen w-screen flex-col bg-black/20 pt-20 text-left backdrop-blur"
+		class="fixed left-0 top-0 flex h-screen w-screen flex-col bg-black/20 pt-20 text-left backdrop-blur-sm"
 		style="z-index: 10000"
 		onclick={closeCmdKFun}
 	>
@@ -235,12 +235,12 @@
 					<input
 						bind:this={cmdKInput}
 						bind:value={cmdKValue}
-						class="focus:ring-b caret-primary dark:caret-dark w-full placeholder:text-black/20 focus:outline-none dark:bg-black dark:placeholder:text-white/10"
+						class="focus:ring-b caret-primary dark:caret-dark focus:outline-hidden w-full placeholder:text-black/20 dark:bg-black dark:placeholder:text-white/10"
 						type="text"
 						placeholder={isZh ? '请输入组件关键字' : 'Please enter the component keyword'}
 					/>
 				</div>
-				<div class="rounded border border-black/10 px-2 py-1 text-xs font-bold dark:border-white/10">ESC</div>
+				<div class="rounded-sm border border-black/10 px-2 py-1 text-xs font-bold dark:border-white/10">ESC</div>
 			</div>
 			<div class="overflow-y-auto px-6 pb-6" style="max-height: {(document.documentElement.clientHeight * 3) / 4}px">
 				{#if cmdKValue === ''}
@@ -276,7 +276,8 @@
 						</div>
 						<div class="w-full dark:border-white/10">
 							<button
-								class="my-1 flex w-full cursor-pointer justify-between rounded border py-1 pl-2 {index === currentIndex && currentTab === 0
+								class="my-1 flex w-full cursor-pointer justify-between rounded-sm border py-1 pl-2 {index === currentIndex &&
+								currentTab === 0
 									? 'border-primary dark:border-dark text-primary dark:text-dark'
 									: 'text-balck border-transparent dark:text-white'}"
 								class:animate-shake={isDemoShake && index === 0}
@@ -297,7 +298,8 @@
 								</div>
 							</button>
 							<button
-								class="my-1 flex w-full cursor-pointer justify-between rounded border py-1 pl-2 {index === currentIndex && currentTab === 1
+								class="my-1 flex w-full cursor-pointer justify-between rounded-sm border py-1 pl-2 {index === currentIndex &&
+								currentTab === 1
 									? 'border-primary dark:border-dark text-primary dark:text-dark'
 									: 'text-balck border-transparent dark:text-white'}"
 								onclick={() => clickCmdKFun(item, 1)}
@@ -317,7 +319,8 @@
 								</div>
 							</button>
 							<button
-								class="my-1 flex w-full cursor-pointer justify-between rounded border py-1 pl-2 {index === currentIndex && currentTab === 2
+								class="my-1 flex w-full cursor-pointer justify-between rounded-sm border py-1 pl-2 {index === currentIndex &&
+								currentTab === 2
 									? 'border-primary dark:border-dark text-primary dark:text-dark'
 									: 'text-balck border-transparent dark:text-white'}"
 								class:animate-shake={isGuideShake && index === cmdKList.length - 1}

docs/site/src/lib/colorCard/ColorCard.svelte

@@ -1,29 +1,17 @@
 <script lang="ts">
-	import Color from 'color';
 	let { colorList = [] } = $props();
-
-	// 传入 hsl(222, 100%, 98%) 这种字符，将其中的数字四舍五入取整后返回字符
-	const getHslFunc = (str: string) => {
-		const arr = str.split(',');
-		const h = Math.round(Number(arr[0].split('(')[1]));
-		const s = Math.round(Number(arr[1].split('%')[0]));
-		const l = Math.round(Number(arr[2].split('%')[0]));
-		return `hsl(${h}, ${s}%, ${l}%)`;
-	};
 </script>
 
 {#each colorList as color, index}
 	<div
-		class="flex w-full flex-1 justify-between self-center px-4 transition hover:scale-105 hover:rounded md:py-0 {index > 5
+		class="flex w-full flex-1 justify-between self-center px-4 transition hover:scale-105 hover:rounded-sm md:py-0 {index > 5
 			? 'text-white'
 			: 'text-black'}"
-		style="background-color: {color.hex};"
+		style="background-color: {color.color};"
 	>
 		<div class="flex flex-col justify-center text-sm">{color.key}</div>
-		<div class="mt-2 flex flex-col justify-center py-1 text-right text-xs">
-			<div>{color.hex || ''}</div>
-			<div>{Color(color.hex).rgb().string()}</div>
-			<div>{getHslFunc(Color(color.hex).hsl().string())}</div>
+		<div class="mt-2 flex flex-col justify-center py-1 text-right">
+			<div>{color.color || ''}</div>
 		</div>
 	</div>
 {/each}

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

@@ -56,7 +56,7 @@
 <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"
+		: ''}flex sticky top-0 z-[100] h-14 items-center justify-between backdrop-blur-sm"
 >
 	{#if showLeftNav}
 		<button class="cursor-pointer p-4 md:hidden" onclick={toggleNavFun}>
@@ -119,22 +119,22 @@
 			{#if showNav}
 				<!-- 移动端 -->
 				<div
-					class="absolute right-2 top-16 flex flex-col space-y-4 rounded border border-black/10 bg-white p-1 pt-4 text-center font-bold shadow-lg backdrop-blur dark:border-white/20 dark:bg-gray-950 dark:shadow-white/20"
+					class="absolute right-2 top-16 flex flex-col space-y-4 rounded-sm border border-black/10 bg-white p-1 pt-4 text-center font-bold shadow-lg backdrop-blur-sm dark:border-white/20 dark:bg-gray-950 dark:shadow-white/20"
 				>
 					<a
 						href="/guide"
-						class="rounded px-4 py-1 hover:bg-gray-100 dark:hover:bg-gray-700"
+						class="rounded-sm px-4 py-1 hover:bg-gray-100 dark:hover:bg-gray-700"
 						class:bg-gray-100={currentRoute === '/guide'}
 						class:dark:bg-gray-500={currentRoute === '/guide'}>{isZh ? '指南' : 'Guide'}</a
 					>
 					<a
 						href="/components?nav=button&tab=0"
-						class="rounded px-4 py-1 hover:bg-gray-100 dark:hover:bg-gray-700"
+						class="rounded-sm px-4 py-1 hover:bg-gray-100 dark:hover:bg-gray-700"
 						class:bg-gray-100={currentRoute === '/components'}
 						class:dark:bg-gray-500={currentRoute === '/components'}>{isZh ? '组件' : 'Components'}</a
 					>
 					<button
-						class="relative rounded px-4 py-1 hover:bg-gray-100 dark:hover:bg-gray-700"
+						class="relative rounded-sm px-4 py-1 hover:bg-gray-100 dark:hover:bg-gray-700"
 						onclick={showThemeFunc}
 						bind:this={ThemeSwitchDom}
 					>
@@ -144,19 +144,19 @@
 								transition:slide={{ duration: 300, axis: 'y' }}
 								class="absolute right-4 top-0 rounded-lg bg-white p-4 shadow-lg dark:bg-black/95 dark:shadow-white/10"
 							>
-								<ModeSwitch />
+								<ModeSwitch useViewTransition={false} />
 								<ThemeSwitch vertical />
 							</div>
 						{/if}
 					</button>
-					<button class="rounded px-4 py-1 text-center hover:bg-gray-100 dark:hover:bg-gray-700" onclick={toggleFundFunc}>
+					<button class="rounded-sm px-4 py-1 text-center hover:bg-gray-100 dark:hover:bg-gray-700" onclick={toggleFundFunc}>
 						{isZh ? '支持' : 'Support'}
 					</button>
 
 					<!-- 语言切换 -->
 					<button
 						aria-label={isZh ? '切换语言' : 'Switch Language'}
-						class="rounded px-4 py-1 text-center hover:bg-gray-100 dark:hover:bg-gray-700"
+						class="rounded-sm px-4 py-1 text-center hover:bg-gray-100 dark:hover:bg-gray-700"
 						onclick={toggleLangFunc}
 					>
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" class="inline-block">
@@ -171,7 +171,7 @@
 					<!-- main -> next -->
 					<a
 						href="https://github.com/any-tdf/stdf/tree/next"
-						class="rounded px-4 py-1 text-center hover:bg-gray-100 dark:hover:bg-gray-700"
+						class="rounded-sm px-4 py-1 text-center hover:bg-gray-100 dark:hover:bg-gray-700"
 						target="_blank"
 						aria-label={isZh ? '跳转至 GitHub' : 'Jump to GitHub'}
 					>
@@ -190,7 +190,7 @@
 		<!--PC 端-->
 		<div class="hidden items-center space-x-2 px-6 font-bold md:flex">
 			<button
-				class="flex cursor-pointer rounded border border-black/10 px-2 text-sm font-normal text-black/40 transition-all hover:border-black/20 dark:border-white/10 dark:text-white/40 dark:hover:border-white/20"
+				class="flex cursor-pointer rounded-sm border border-black/10 px-2 text-sm font-normal text-black/40 transition-all hover:border-black/20 dark:border-white/10 dark:text-white/40 dark:hover:border-white/20"
 				style="padding-top: 0.3125rem;padding-bottom: 0.3125rem;"
 				onclick={clickCmdKFun}
 			>
@@ -205,12 +205,12 @@
 				<div class="mr-4 flex flex-col justify-center text-xs">
 					{isZh ? '快速搜索...' : 'Quick search...'}
 				</div>
-				<div class="mr-1 rounded bg-black/5 px-1 font-bold dark:bg-white/5">{cmdkey}</div>
-				<div class="rounded bg-black/5 px-1.5 font-bold dark:bg-white/5">K</div>
+				<div class="mr-1 rounded-sm bg-black/5 px-1 font-bold dark:bg-white/5">{cmdkey}</div>
+				<div class="rounded-sm bg-black/5 px-1.5 font-bold dark:bg-white/5">K</div>
 			</button>
 			<a
 				href="/guide"
-				class="rounded px-4 py-1 transition-all {currentRoute === '/guide'
+				class="rounded-sm px-4 py-1 transition-all {currentRoute === '/guide'
 					? 'bg-primary dark:bg-dark text-white dark:text-black'
 					: 'hover:bg-black/5 dark:hover:bg-white/5'}"
 			>
@@ -218,14 +218,14 @@
 			</a>
 			<a
 				href="/components?nav=button&tab=0"
-				class="inline-block rounded px-4 py-1 text-center transition-all {currentRoute === '/components'
+				class="inline-block rounded-sm px-4 py-1 text-center transition-all {currentRoute === '/components'
 					? 'bg-primary dark:bg-dark text-white dark:text-black'
 					: 'hover:bg-black/5 dark:hover:bg-white/5'}"
 			>
 				{isZh ? '组件' : 'Components'}
 			</a>
 			<button
-				class="relative cursor-pointer rounded px-4 py-1 text-center transition-all hover:bg-black/5 dark:hover:bg-white/5"
+				class="relative rounded-sm px-4 py-1 text-center transition-all hover:bg-black/5 dark:hover:bg-white/5"
 				onmouseover={() => showThemeSwitchStore.set(true)}
 				onfocus={() => showThemeSwitchStore.set(true)}
 				onblur={() => showThemeSwitchStore.set(false)}
@@ -236,14 +236,14 @@
 				{#if $showThemeSwitchStore}
 					<div transition:slide={{ duration: 300, axis: 'y' }} class="absolute left-1/2 top-8 -translate-x-1/2 pt-2">
 						<div class="rounded-lg bg-white p-4 shadow-lg dark:bg-black/95 dark:shadow-white/10">
-							<ModeSwitch />
+							<ModeSwitch useViewTransition={false} />
 							<ThemeSwitch vertical />
 						</div>
 					</div>
 				{/if}
 			</button>
 			<button
-				class="cursor-pointer rounded px-4 py-1 text-center transition-all hover:bg-black/5 dark:hover:bg-white/5"
+				class="cursor-pointer rounded-sm px-4 py-1 text-center transition-all hover:bg-black/5 dark:hover:bg-white/5"
 				title={isZh ? '支持' : 'Support'}
 				onclick={toggleFundFunc}
 			>
@@ -254,7 +254,7 @@
 				onclick={toggleLangFunc}
 				title={isZh ? '切换语言' : 'Switch languages'}
 				aria-label={isZh ? '切换语言' : 'Switch languages'}
-				class="cursor-pointer rounded px-4 py-1 text-center transition-all hover:bg-black/5 dark:hover:bg-white/5"
+				class="cursor-pointer rounded-sm px-4 py-1 text-center transition-all hover:bg-black/5 dark:hover:bg-white/5"
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" class="inline-block">
 					<path fill="none" d="M0 0h24v24H0z" />
@@ -268,7 +268,7 @@
 			<!-- main -> next -->
 			<a
 				href="https://github.com/any-tdf/stdf/tree/next"
-				class="inline-block rounded px-4 py-1 transition-all hover:bg-black/5 dark:hover:bg-white/5"
+				class="inline-block rounded-sm px-4 py-1 transition-all hover:bg-black/5 dark:hover:bg-white/5"
 				target="_blank"
 				aria-label={isZh ? '跳转至 GitHub' : 'Jump to GitHub'}
 				title={isZh ? '跳转至 GitHub' : 'Jump to GitHub'}

docs/site/src/lib/menu/Menu.svelte

@@ -27,9 +27,9 @@
 						// e.self();
 						setClick(child);
 					}}
-					class="box-content border-l-2 py-2 pl-2 text-left text-sm transition-all hover:font-bold {child.nav === currentNav
-						? 'border-primary font-bold text-primary dark:border-dark dark:text-dark'
-						: ''}"
+					class="box-content cursor-pointer border-l-2 py-2 pl-2 text-left text-sm transition-all hover:font-bold {child.nav === currentNav
+						? 'border-primary text-primary dark:border-dark dark:text-dark font-bold'
+						: 'border-black/10 dark:border-white/20'}"
 				>
 					{isZh ? child.title : child.title_en}
 				</button>

docs/site/src/lib/modeSwitch/ModeSwitch.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	let { useViewTransition = true } = $props();
 	import darkMode from './darkMode';
 	import { themeStore, sysThemeStore, currentThemeStore } from '../../store';
 	let isClick = $state(false);
@@ -15,17 +16,17 @@
 			themeStore.set('dark');
 			currentThemeStore.set('dark');
 			localStorage.setItem('theme', 'dark');
-			darkMode(true, e);
+			darkMode(true, e, useViewTransition);
 		} else if ($themeStore === 'dark') {
 			// 切换到 auto
 			themeStore.set('auto');
 			localStorage.setItem('theme', 'auto');
 			if ($sysThemeStore === 'dark') {
 				// 系统是暗模式
-				darkMode(true, e);
+				darkMode(true, e, useViewTransition);
 				currentThemeStore.set('dark');
 			} else {
-				darkMode(false, e);
+				darkMode(false, e, useViewTransition);
 				currentThemeStore.set('light');
 			}
 		} else {
@@ -33,7 +34,7 @@
 			themeStore.set('light');
 			currentThemeStore.set('light');
 			localStorage.setItem('theme', 'light');
-			darkMode(false, e);
+			darkMode(false, e, useViewTransition);
 		}
 	};
 	//auto 时，监听系统主题
@@ -56,7 +57,7 @@
 </script>
 
 <button
-	class="mx-auto flex w-28 cursor-pointer justify-between rounded bg-black/5 p-0.5 text-center dark:bg-white/10"
+	class="mx-auto flex w-28 cursor-pointer justify-between rounded-sm bg-black/5 p-0.5 text-center dark:bg-white/10"
 	title={isZh
 		? `${$themeStore === 'light' ? '亮模式' : $themeStore === 'dark' ? '暗模式' : '跟随系统'}`
 		: `${$themeStore === 'light' ? 'Light' : $themeStore === 'dark' ? 'Dark' : 'System'}`}
@@ -67,7 +68,7 @@
 >
 	<div
 		class:scale-75={isClick}
-		class="min-h-full p-0.5 px-2 transition-all duration-150 rounded{$themeStore === 'light' ? ' bg-white/80 shadow-sm' : ''}"
+		class="min-h-full p-0.5 px-2 transition-all duration-150 rounded-sm{$themeStore === 'light' ? ' shadow-xs bg-white/80' : ''}"
 		style="color:{$sysThemeStore === 'dark'
 			? $themeStore === 'light'
 				? '#ff3f2e'
@@ -119,7 +120,7 @@
 	</div>
 	<div
 		class:scale-75={isClick}
-		class="min-h-full p-0.5 px-2 transition-all duration-150 rounded{$themeStore === 'dark' ? ' bg-black/50 shadow-sm' : ''}"
+		class="min-h-full p-0.5 px-2 transition-all duration-150 rounded-sm{$themeStore === 'dark' ? ' shadow-xs bg-black/50' : ''}"
 		style="color:{$sysThemeStore === 'light'
 			? $themeStore === 'auto'
 				? '#cecece'
@@ -140,10 +141,10 @@
 		</svg>
 	</div>
 	<div
-		class="min-h-full p-0.5 px-2 transition-all duration-150 rounded{$themeStore === 'auto' && $sysThemeStore === 'light'
+		class="min-h-full p-0.5 px-2 transition-all duration-150 rounded-sm{$themeStore === 'auto' && $sysThemeStore === 'light'
 			? ' bg-white/80'
 			: ''}{$themeStore === 'auto' && $sysThemeStore === 'dark' ? ' bg-black/50' : ''}{$themeStore === 'auto' && $sysThemeStore === 'light'
-			? ' shadow-sm'
+			? ' shadow-xs'
 			: ''}"
 		style="color:{$themeStore === 'light'
 			? '#cecece'

docs/site/src/lib/modeSwitch/darkMode.ts

@@ -5,12 +5,12 @@
  * @returns {void}
  * @example
  */
-export default (isDark = true, ev: MouseEvent) => {
+export default (isDark = true, ev: MouseEvent, useViewTransition = true) => {
 	document.documentElement.style.setProperty('--x', ev.clientX + 'px');
 	document.documentElement.style.setProperty('--y', ev.clientY + 'px');
 
 	if (isDark) {
-		if ('startViewTransition' in document) {
+		if ('startViewTransition' in document && useViewTransition) {
 			(document as Document & { startViewTransition: (callback: () => void) => void }).startViewTransition(() => {
 				document.documentElement.classList.add('dark');
 			});
@@ -18,7 +18,7 @@ export default (isDark = true, ev: MouseEvent) => {
 			document.documentElement.classList.add('dark');
 		}
 	} else {
-		if ('startViewTransition' in document) {
+		if ('startViewTransition' in document && useViewTransition) {
 			(document as Document & { startViewTransition: (callback: () => void) => void }).startViewTransition(() => {
 				document.documentElement.classList.remove('dark');
 			});

docs/site/src/lib/tab/Tab.svelte

@@ -46,7 +46,7 @@
 			text: QRValue,
 			isSpace: false
 		});
-		const color = $currentThemeStore === 'dark' ? 'rgb(var(--theme-color-dark))' : 'rgb(var(--theme-color-primary))';
+		const color = $currentThemeStore === 'dark' ? 'var(--color-dark)' : 'var(--color-primary)';
 		A_a1Svg = rendererLine(qrcode, {
 			posType: 2,
 			otherColor: color,
@@ -77,11 +77,11 @@
 	};
 </script>
 
-<div class="relative top-14 w-82 md:w-102">
-	<div class="relative rounded bg-gray-100 p-1 dark:bg-gray-700">
+<div class="w-82 md:w-102 relative top-14">
+	<div class="relative rounded-sm bg-gray-100 p-1 dark:bg-gray-700">
 		<!--滑块-->
 		<div
-			class="absolute top-1 h-10 w-16 rounded bg-white shadow-md transition-all duration-300 dark:bg-black dark:shadow-white/10 md:w-20"
+			class="absolute top-1 h-10 w-16 rounded-sm bg-white shadow-md transition-all duration-300 md:w-20 dark:bg-black dark:shadow-white/10"
 			class:left-1={currentTab === 0}
 			class:left-17={currentTab === 1}
 			class:md:left-21={currentTab === 1}
@@ -97,7 +97,7 @@
 			<button
 				onmouseleave={() => (showQr = false)}
 				onmouseenter={mouseenterFun}
-				class="absolute left-106 top-0 hidden h-12 w-12 rounded bg-gray-100 p-3 dark:bg-gray-700 md:block"
+				class="left-106 absolute top-0 hidden h-12 w-12 rounded-sm bg-gray-100 p-3 md:block dark:bg-gray-700"
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="fill: currentColor">
 					<path fill="none" d="M0 0h24v24H0z" />
@@ -107,7 +107,7 @@
 				</svg>
 				{#if showQr}
 					<div
-						class="absolute left-0 top-14 z-50 hidden w-60 rounded bg-black p-6 shadow-lg dark:block"
+						class="absolute left-0 top-14 z-50 hidden w-60 rounded-sm bg-black p-6 shadow-lg dark:block"
 						transition:fade={{ duration: 200 }}
 					>
 						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -116,7 +116,7 @@
 				{/if}
 				{#if showQr}
 					<div
-						class="absolute left-0 top-14 z-50 block w-60 rounded bg-white p-6 shadow-lg dark:hidden"
+						class="absolute left-0 top-14 z-50 block w-60 rounded-sm bg-white p-6 shadow-lg dark:hidden"
 						transition:fade={{ duration: 200 }}
 					>
 						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -130,14 +130,14 @@
 			<button
 				onmouseleave={() => (showStackblitz = false)}
 				onmouseenter={showStackblitzFunc}
-				class="absolute left-[34.5rem] top-0 hidden h-12 w-12 rounded bg-gray-100 p-3 dark:bg-gray-700 md:block"
+				class="absolute left-[34.5rem] top-0 hidden h-12 w-12 rounded-sm bg-gray-100 p-3 md:block dark:bg-gray-700"
 			>
 				<svg viewBox="0 0 28 28" height="24">
 					<path fill="#3275e7" d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z" />
 				</svg>
 				{#if showStackblitz}
 					<div
-						class="absolute left-0 top-14 z-50 h-12 w-44 rounded bg-gray-700 py-3 text-center leading-[1.5rem] text-white shadow-lg"
+						class="absolute left-0 top-14 z-50 h-12 w-44 rounded-sm bg-gray-700 py-3 text-center leading-[1.5rem] text-white shadow-lg"
 						transition:fade={{ duration: 200 }}
 					>
 						{isZh ? '在 StackBlitz 中打开' : 'Open in StackBlitz'}
@@ -150,7 +150,7 @@
 			<button
 				onmouseleave={() => (showCode = false)}
 				onmouseenter={showCodeFunc}
-				class="absolute left-[30.5rem] top-0 hidden h-12 w-12 rounded bg-gray-100 p-3 dark:bg-gray-700 md:block"
+				class="absolute left-[30.5rem] top-0 hidden h-12 w-12 rounded-sm bg-gray-100 p-3 md:block dark:bg-gray-700"
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="fill: currentColor">
 					<path
@@ -161,7 +161,7 @@
 					<div
 						class="{isZh
 							? 'w-28'
-							: 'w-52'} absolute left-0 top-14 z-50 h-12 rounded bg-gray-700 py-3 text-center leading-[1.5rem] text-white shadow-lg"
+							: 'w-52'} absolute left-0 top-14 z-50 h-12 rounded-sm bg-gray-700 py-3 text-center leading-[1.5rem] text-white shadow-lg"
 						transition:fade={{ duration: 200 }}
 					>
 						{isZh ? '组件源码' : 'Component source code'}
@@ -171,7 +171,7 @@
 		</a>
 		<div class="relative flex">
 			{#each tabList as item, index}
-				<button onclick={() => changeIndexFun(index)} class="w-16 cursor-pointer rounded py-2 text-center md:w-20">
+				<button onclick={() => changeIndexFun(index)} class="w-16 cursor-pointer rounded-sm py-2 text-center md:w-20">
 					{isZh ? item.zh : item.en}
 				</button>
 			{/each}

docs/site/src/lib/themeSwitch/ThemeSwitch.svelte

@@ -32,9 +32,6 @@
 			darkMeta.setAttribute('content', safariDark);
 		}
 	};
-	const bgFunc = (str: string) => {
-		return str.charAt(0) === '#' ? str : `rgb(${str})`;
-	};
 </script>
 
 <div class="flex {vertical ? 'flex-col' : 'flex-row'} my-4 flex-wrap gap-2">
@@ -56,22 +53,22 @@
 			<div class="whitespace-nowrap">{isZh ? item.name_CN : item.name}</div>
 			<div class="flex justify-between gap-2">
 				<!-- theme  -->
-				<div class="flex overflow-hidden rounded-sm">
-					<div class="bg-primary w-6" style="background-color: {bgFunc(item.theme.color.primary.default)};"></div>
-					<div class="bg-dark w-6" style="background-color: {bgFunc(item.theme.color.dark.default)};"></div>
+				<div class="rounded-xs flex overflow-hidden">
+					<div class="bg-primary w-6" style="background-color: {item.theme.color.primary.default};"></div>
+					<div class="bg-dark w-6" style="background-color: {item.theme.color.dark.default};"></div>
 				</div>
 				<div class="flex flex-col justify-between gap-1">
 					<!-- Functional -->
 					<div class="flex gap-0.5">
-						<div class="h-3 w-3 rounded-sm" style="background-color: {bgFunc(item.theme.color.functional.success)};"></div>
-						<div class="h-3 w-3 rounded-sm" style="background-color: {bgFunc(item.theme.color.functional.warning)};"></div>
-						<div class="h-3 w-3 rounded-sm" style="background-color: {bgFunc(item.theme.color.functional.error)};"></div>
-						<div class="h-3 w-3 rounded-sm" style="background-color: {bgFunc(item.theme.color.functional.info)};"></div>
+						<div class="rounded-xs h-3 w-3" style="background-color: {item.theme.color.functional.success};"></div>
+						<div class="rounded-xs h-3 w-3" style="background-color: {item.theme.color.functional.warning};"></div>
+						<div class="rounded-xs h-3 w-3" style="background-color: {item.theme.color.functional.error};"></div>
+						<div class="rounded-xs h-3 w-3" style="background-color: {item.theme.color.functional.info};"></div>
 					</div>
 					<!-- Extended -->
 					<div class="flex justify-between gap-0.5">
 						{#each item.theme.color.extend as child}
-							<div class="h-3 w-3 rounded-sm" style="background-color: {bgFunc(child.color)};"></div>
+							<div class="rounded-xs h-3 w-3" style="background-color: {child.color};"></div>
 						{/each}
 					</div>
 				</div>
@@ -82,7 +79,7 @@
 		<a
 			href="/guide/generator"
 			target="_blank"
-			class="text-primary hover:border-primary dark:text-dark dark:hover:border-dark group flex items-center justify-center gap-2 rounded border border-gray-100 py-2 transition-all duration-300 dark:border-gray-700"
+			class="text-primary hover:border-primary dark:text-dark dark:hover:border-dark group flex items-center justify-center gap-2 rounded-sm border border-gray-100 py-2 transition-all duration-300 dark:border-gray-700"
 		>
 			<svg class="h-5 w-5 transition-all duration-300 group-hover:scale-95" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 				<path

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

@@ -254,7 +254,7 @@
 			text: 'https://next-demo.stdf.design?lang=' + (isZh ? 'zh_CN' : 'en_US'),
 			isSpace: false
 		});
-		const color = $currentThemeStore === 'dark' ? 'rgb(var(--theme-color-dark))' : 'rgb(var(--theme-color-primary))';
+		const color = $currentThemeStore === 'dark' ? 'var(--color-dark)' : 'var(--color-primary)';
 		A_a1Svg = rendererLine(qrcode, { posType: 2, otherColor: color, posColor: color });
 		showQr = true;
 	};
@@ -299,7 +299,7 @@
 						show3D = false;
 						localStorage.setItem('show3D', '0');
 					}}
-					class="absolute left-10 top-10 hidden scale-0 cursor-pointer rounded bg-black/5 px-2 py-1 text-xs text-black/80 transition-all duration-500 group-hover:scale-100 md:block dark:bg-white/10 dark:text-white/90"
+					class="absolute left-10 top-10 hidden scale-0 cursor-pointer rounded-sm bg-black/5 px-2 py-1 text-xs text-black/80 transition-all duration-500 group-hover:scale-100 md:block dark:bg-white/10 dark:text-white/90"
 				>
 					{isZh ? '隐藏 3D LOGO' : 'Hidden 3D LOGO'}
 				</button>
@@ -314,7 +314,7 @@
 						show3D = true;
 						localStorage.setItem('show3D', '1');
 					}}
-					class="absolute left-10 top-10 hidden scale-0 cursor-pointer rounded bg-black/5 px-2 py-1 text-xs text-black/80 transition-all duration-300 group-hover:scale-100 md:block dark:bg-white/10 dark:text-white/90"
+					class="absolute left-10 top-10 hidden scale-0 cursor-pointer rounded-sm bg-black/5 px-2 py-1 text-xs text-black/80 transition-all duration-300 group-hover:scale-100 md:block dark:bg-white/10 dark:text-white/90"
 				>
 					{isZh ? '显示 3D LOGO' : 'Show 3D LOGO'}
 				</button>
@@ -405,7 +405,7 @@
 			<div class="mb-8 mt-8 flex justify-center gap-4 space-x-8 md:mb-10 md:mt-16">
 				<a
 					href="/guide"
-					class="bg-primary hover:bg-primary/80 dark:bg-dark hover:dark:bg-dark/80 group relative rounded px-6 py-2 text-white transition-all dark:text-black"
+					class="bg-primary hover:bg-primary/80 dark:bg-dark hover:dark:bg-dark/80 group relative rounded-sm px-6 py-2 text-white transition-all dark:text-black"
 				>
 					{isZh ? '开始使用' : 'Get Started'}
 					<span class="absolute left-1/2 top-0 hidden group-hover:block">
@@ -417,7 +417,7 @@
 					href="/"
 					onmouseleave={() => (showQr = false)}
 					onmouseenter={mouseenterFun}
-					class="border-primary dark:border-dark relative hidden rounded border border-solid px-6 py-2 transition-all md:block"
+					class="border-primary dark:border-dark relative hidden rounded-sm border border-solid px-6 py-2 transition-all md:block"
 				>
 					{isZh ? '扫码示例' : 'QR Demo'}
 					{#if showQr}
@@ -445,7 +445,7 @@
 				<a
 					href={'https://next-demo.stdf.design?lang=' + (isZh ? 'zh_CN' : 'en_US')}
 					target="_blank"
-					class="border-primary dark:border-dark block rounded border border-solid px-6 py-2 transition-all md:hidden"
+					class="border-primary dark:border-dark block rounded-sm border border-solid px-6 py-2 transition-all md:hidden"
 				>
 					{isZh ? '查看示例' : 'Examples'}
 				</a>

docs/site/src/routes/components/+page.svelte

@@ -212,7 +212,7 @@
 							{isZh ? currentNav?.title : currentNav?.title_en}
 						</div>
 						<a href={QRValue} target="_blank" aria-label={isZh ? '扫码预览' : 'Scan to preview'}>
-							<div class="ml-2 h-8 w-8 rounded bg-gray-100 p-1 text-gray-500 md:hidden dark:bg-gray-700">
+							<div class="ml-2 h-8 w-8 rounded-sm bg-gray-100 p-1 text-gray-500 md:hidden dark:bg-gray-700">
 								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="fill: currentColor">
 									<path fill="none" d="M0 0h24v24H0z" />
 									<path
@@ -242,7 +242,7 @@
 						class="mt-2 flex flex-1 justify-around py-4 md:pl-8 md:pr-4"
 						style="width:{titleWidth}px;"
 					>
-						<div class="bg-codeLight dark:bg-codeDark grow overflow-y-scroll rounded" style="height:{demoHeight}px;">
+						<div class="bg-codeLight dark:bg-codeDark grow overflow-y-scroll rounded-sm" style="height:{demoHeight}px;">
 							<Component {highlightedCode} />
 						</div>
 						<div
@@ -298,7 +298,7 @@
 						<div
 							in:fly={{ y: 100, duration: 500 }}
 							out:fly={{ y: 100, duration: 100 }}
-							class={`mt-4 flex-1 rounded p-4 md:px-8 md:py-4 `}
+							class={`mt-4 flex-1 rounded-sm p-4 md:px-8 md:py-4 `}
 							style="width:{titleWidth}px;"
 						>
 							<Guide guide={currentNav?.nav} />
@@ -311,7 +311,7 @@
 						<div
 							in:fly={{ y: 100, duration: 500 }}
 							out:fly={{ y: 100, duration: 100 }}
-							class={`mt-4 flex-1 rounded p-4 md:px-8 md:py-4 `}
+							class={`mt-4 flex-1 rounded-sm p-4 md:px-8 md:py-4 `}
 							style="width:{titleWidth}px;"
 						>
 							<FAQ guide={currentNav?.nav} />
@@ -324,7 +324,7 @@
 						<div
 							in:fly={{ y: 100, duration: 500 }}
 							out:fly={{ y: 100, duration: 100 }}
-							class={`mt-4 flex-1 rounded p-4 md:px-8 md:py-4 `}
+							class={`mt-4 flex-1 rounded-sm p-4 md:px-8 md:py-4 `}
 							style="width:{titleWidth}px;"
 						>
 							<Version guide={currentNav?.nav} />

docs/site/src/routes/components/Api.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <article
-	class="prose max-w-none overflow-x-auto pb-12 dark:prose-invert prose-table:break-all prose-td:whitespace-nowrap md:prose-td:whitespace-normal"
+	class="prose dark:prose-invert prose-table:break-all prose-td:whitespace-nowrap md:prose-td:whitespace-normal max-w-none overflow-x-auto pb-12"
 >
 	{#if loading}
 		{isZh ? '请等待...' : 'Please wait...'}
@@ -37,7 +37,7 @@
 	<a
 		href={'https://github.com/any-tdf/stdf/edit/next/docs/mds/components/' + api + '/api' + (isZh ? '' : '_en') + '.md'}
 		target="_blank"
-		class="flex text-primary dark:text-dark"
+		class="text-primary dark:text-dark flex"
 	>
 		<span class="mr-1 h-4 w-4">
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-4 w-4" style="fill: currentColor;">

docs/site/src/routes/components/FAQ.svelte

@@ -30,7 +30,7 @@
 		: 'Note: Please raise any issues or ideas encountered in development to GitHub Issue, and then select representative issues to organize here.'}
 </p>
 <article
-	class="prose max-w-none overflow-x-auto pb-12 dark:prose-invert prose-table:break-all prose-td:whitespace-nowrap md:prose-td:whitespace-normal"
+	class="prose dark:prose-invert prose-table:break-all prose-td:whitespace-nowrap md:prose-td:whitespace-normal max-w-none overflow-x-auto pb-12"
 >
 	{#if loading}
 		{isZh ? '请等待...' : 'Please wait...'}
@@ -43,7 +43,7 @@
 	<a
 		href={'https://github.com/any-tdf/stdf/edit/next/docs/mds/components/' + guide + '/FAQ' + (isZh ? '' : '_en') + '.md'}
 		target="_blank"
-		class="flex text-primary dark:text-dark"
+		class="text-primary dark:text-dark flex"
 	>
 		<span class="mr-1 h-4 w-4">
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-4 w-4" style="fill: currentColor;">

docs/site/src/routes/components/Guide.svelte

@@ -41,7 +41,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 {$isWideScreenStore
 		? 'max-w-full'
 		: 'max-w-5xl'}"
 >
@@ -57,7 +57,7 @@
 	<a
 		href={'https://github.com/any-tdf/stdf/edit/next/docs/mds/components/' + guide + '/guide' + (isZh ? '' : '_en') + '.md'}
 		target="_blank"
-		class="flex text-primary dark:text-dark"
+		class="text-primary dark:text-dark flex"
 	>
 		<span class="mr-1 h-4 w-4">
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-4 w-4" style="fill: currentColor;">
@@ -71,7 +71,7 @@
 </div>
 
 <button
-	class="fixed bottom-4 right-2 z-50 hidden h-8 w-8 rounded-full bg-primary p-1.5 text-white shadow-md shadow-primary/50 dark:bg-dark dark:text-black dark:shadow-dark/50 md:block"
+	class="bg-primary shadow-primary/50 dark:bg-dark dark:shadow-dark/50 fixed bottom-4 right-2 z-50 hidden h-8 w-8 rounded-full p-1.5 text-white shadow-md md:block dark:text-black"
 	onclick={changeFullFunc}
 >
 	{#if $isWideScreenStore}

docs/site/src/routes/components/Version.svelte

@@ -106,7 +106,7 @@
 		: 'Note: 👊, ✊, and 👎 represent three levels of severity for bugs, with 👊 being the most severe and 👎 the least severe. 👏 means optimization, and 💪 means new feature. The avatar after the description represents the proposer or contributor of the item. We thank them for their contributions. '}
 </div>
 <article
-	class="prose max-w-none overflow-x-auto pb-12 dark:prose-invert prose-table:break-all prose-td:whitespace-nowrap md:prose-td:whitespace-normal"
+	class="prose dark:prose-invert prose-table:break-all prose-td:whitespace-nowrap md:prose-td:whitespace-normal max-w-none overflow-x-auto pb-12"
 >
 	{#if loading}
 		{isZh ? '请等待...' : 'Please wait...'}
@@ -118,7 +118,7 @@
 	<!-- main -> next -->
 	<a
 		href={'https://github.com/any-tdf/stdf/edit/next/docs/mds/components/' + guide + '/version' + (isZh ? '' : '_en') + '.md'}
-		class="flex text-primary dark:text-dark"
+		class="text-primary dark:text-dark flex"
 		target="_blank"
 	>
 		<span class="mr-1 h-4 w-4">

docs/site/src/routes/guide/+layout.svelte

@@ -191,6 +191,8 @@ peer-checked/tab-2-0:border-primary peer-checked/tab-2-1:border-primary peer-che
 peer-checked/tab-2-3:border-primary peer-checked/tab-2-4:border-primary peer-checked/tab-2-5:border-primary
 peer-checked/tab-3-0:border-primary peer-checked/tab-3-1:border-primary peer-checked/tab-3-2:border-primary
 peer-checked/tab-3-3:border-primary peer-checked/tab-3-4:border-primary peer-checked/tab-3-5:border-primary
+peer-checked/tab-4-0:border-primary peer-checked/tab-4-1:border-primary peer-checked/tab-4-2:border-primary
+peer-checked/tab-4-3:border-primary peer-checked/tab-4-4:border-primary peer-checked/tab-4-5:border-primary
 dark:peer-checked/tab-0-0:border-dark dark:peer-checked/tab-0-1:border-dark dark:peer-checked/tab-0-2:border-dark
 dark:peer-checked/tab-0-3:border-dark dark:peer-checked/tab-0-4:border-dark dark:peer-checked/tab-0-5:border-dark
 dark:peer-checked/tab-1-0:border-dark dark:peer-checked/tab-1-1:border-dark dark:peer-checked/tab-1-2:border-dark
@@ -199,6 +201,8 @@ dark:peer-checked/tab-2-0:border-dark dark:peer-checked/tab-2-1:border-dark dark
 dark:peer-checked/tab-2-3:border-dark dark:peer-checked/tab-2-4:border-dark dark:peer-checked/tab-2-5:border-dark
 dark:peer-checked/tab-3-0:border-dark dark:peer-checked/tab-3-1:border-dark dark:peer-checked/tab-3-2:border-dark
 dark:peer-checked/tab-3-3:border-dark dark:peer-checked/tab-3-4:border-dark dark:peer-checked/tab-3-5:border-dark
+dark:peer-checked/tab-4-0:border-dark dark:peer-checked/tab-4-1:border-dark dark:peer-checked/tab-4-2:border-dark
+dark:peer-checked/tab-4-3:border-dark dark:peer-checked/tab-4-4:border-dark dark:peer-checked/tab-4-5:border-dark
 hidden border-b-2 border-black/10 peer-checked/tab-0-0:block
 peer-checked/tab-0-1:block peer-checked/tab-0-2:block peer-checked/tab-0-3:block
 peer-checked/tab-0-4:block peer-checked/tab-0-5:block peer-checked/tab-1-0:block
@@ -207,5 +211,7 @@ peer-checked/tab-1-4:block peer-checked/tab-1-5:block peer-checked/tab-2-0:block
 peer-checked/tab-2-1:block peer-checked/tab-2-2:block peer-checked/tab-2-3:block
 peer-checked/tab-2-4:block peer-checked/tab-2-5:block peer-checked/tab-3-0:block
 peer-checked/tab-3-1:block peer-checked/tab-3-2:block peer-checked/tab-3-3:block
-peer-checked/tab-3-4:block peer-checked/tab-3-5:block dark:border-white/10 dark:bg-[#202020]"
+peer-checked/tab-3-4:block peer-checked/tab-3-5:block peer-checked/tab-4-0:block
+peer-checked/tab-4-1:block peer-checked/tab-4-2:block peer-checked/tab-4-3:block
+peer-checked/tab-4-4:block peer-checked/tab-4-5:block dark:border-white/10 dark:bg-[#202020]"
 ></div>

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

@@ -1,12 +1,5 @@
 <script lang="ts">
 	import Color from './Color.svelte';
-	import ColorEn from './Color_en.svelte';
-
-	const isZh = localStorage.getItem('lang') === 'zh_CN';
 </script>
 
-{#if isZh}
-	<Color />
-{:else}
-	<ColorEn />
-{/if}
+<Color />

docs/site/src/routes/guide/color/Color.svelte

@@ -5,42 +5,37 @@
 	import ThemeSwitch from '$lib/themeSwitch/ThemeSwitch.svelte';
 	import themes from '../../../data/themes';
 	import { currentColorStore, isWideScreenStore } from '../../../store';
-	import { generatePalette, generateThemeBlack, generateThemeWhite, colorConvertFunc } from '../../../utils';
+	import { colorConvertFunc, colorObjToArr, getOklchOpacity } from '../../../utils';
 	import hljs from 'highlight.js';
-	import { type ThemeProps } from 'stdf/theme';
+	import { type ThemeProps, type PrimaryAndDarkColor } from 'stdf/theme';
+
+	const isZh = localStorage.getItem('lang') === 'zh_CN';
 
 	const colorGrayList = [
-		{ key: 'gray-50', hex: '#f2f2f2' },
-		{ key: 'gray-100', hex: '#e6e6e6' },
-		{ key: 'gray-200', hex: '#cccccc' },
-		{ key: 'gray-300', hex: '#b3b3b3' },
-		{ key: 'gray-400', hex: '#999999' },
-		{ key: 'gray-500', hex: '#808080' },
-		{ key: 'gray-600', hex: '#666666' },
-		{ key: 'gray-700', hex: '#4D4D4D' },
-		{ key: 'gray-800', hex: '#333333' },
-		{ key: 'gray-900', hex: '#1A1A1A' },
-		{ key: 'gray-950', hex: '#0D0D0D' }
+		{ key: 'gray-50', color: 'oklch(0.961 0 0)' },
+		{ key: 'gray-100', color: 'oklch(0.925 0 0)' },
+		{ key: 'gray-200', color: 'oklch(0.845 0 0)' },
+		{ key: 'gray-300', color: 'oklch(0.767 0 0)' },
+		{ key: 'gray-400', color: 'oklch(0.683 0 0)' },
+		{ key: 'gray-500', color: 'oklch(0.6 0 0)' },
+		{ key: 'gray-600', color: 'oklch(0.51 0 0)' },
+		{ key: 'gray-700', color: 'oklch(0.42 0 0)' },
+		{ key: 'gray-800', color: 'oklch(0.321 0 0)' },
+		{ key: 'gray-900', color: 'oklch(0.218 0 0)' },
+		{ key: 'gray-950', color: 'oklch(0.159 0 0)' }
 	];
 	onMount(() => hljs.highlightAll());
 
 	let currentColorObj: ThemeProps | undefined = undefined;
-	let primaryColors: { n: number; hex: string; rgb: string; hsl: string }[] | undefined = undefined;
-	let darkColors: { n: number; hex: string; rgb: string; hsl: string }[] | undefined = undefined;
-	let themeBlack:
-		| {
-				primary: { hex: string; rgb: string; hsl: string };
-				dark: { hex: string; rgb: string; hsl: string };
-		  }
-		| undefined = undefined;
-	let themeWhite:
-		| {
-				primary: { hex: string; rgb: string; hsl: string };
-				dark: { hex: string; rgb: string; hsl: string };
-		  }
-		| undefined = undefined;
-	let stateColor: { success: string; warning: string; error: string; info: string } | undefined = undefined;
-	let extendList: { color: string; alias: string }[] | undefined = undefined;
+	let primaryColors: PrimaryAndDarkColor | undefined = $state(undefined);
+	// primaryColors 转为数组，且 default 在第 6 项
+	let primaryColorsList = $derived(colorObjToArr(primaryColors ?? {}));
+	let darkColors: PrimaryAndDarkColor | undefined = $state(undefined);
+	let darkColorsList = $derived(colorObjToArr(darkColors ?? {}));
+	let themeBlack: { primary: string; dark: string } | undefined = $state(undefined);
+	let themeWhite: { primary: string; dark: string } | undefined = $state(undefined);
+	let stateColor: { success: string; warning: string; error: string; info: string } | undefined = $state(undefined);
+	let extendList: { color: string; alias: string }[] | undefined = $state(undefined);
 
 	const unsubscribe = currentColorStore.subscribe((value) => {
 		// 根据 $currentColorStore 从 themes 中获取对应的颜色对象
@@ -54,32 +49,36 @@
 			const colorArr: { n: number; hex: string; rgb: string; hsl: string }[] = [];
 			colorList.forEach((item, index) => {
 				// 第 0 项和最后一项的 key 为 50 和 950，其他项为 100-900，颜色有 hex、rgb、hsl 三种格式，注意 hsl 保留整数
-				let colorObj: { n: number; hex: string; rgb: string; hsl: string } = {
+				let colorObj: { n: number; hex: string; rgb: string; hsl: string; oklch: string } = {
 					n: 0,
 					hex: '',
 					rgb: '',
-					hsl: ''
+					hsl: '',
+					oklch: ''
 				};
 				if (index === 0) {
 					colorObj = {
 						n: 50,
 						hex: item,
 						rgb: colorConvertFunc(item).rgb,
-						hsl: colorConvertFunc(item).hsl
+						hsl: colorConvertFunc(item).hsl,
+						oklch: colorConvertFunc(item).oklch
 					};
 				} else if (index === 10) {
 					colorObj = {
 						n: 950,
 						hex: item,
 						rgb: colorConvertFunc(item).rgb,
-						hsl: colorConvertFunc(item).hsl
+						hsl: colorConvertFunc(item).hsl,
+						oklch: colorConvertFunc(item).oklch
 					};
 				} else {
 					colorObj = {
 						n: 100 * index,
 						hex: item,
 						rgb: colorConvertFunc(item).rgb,
-						hsl: colorConvertFunc(item).hsl
+						hsl: colorConvertFunc(item).hsl,
+						oklch: colorConvertFunc(item).oklch
 					};
 				}
 				colorArr.push(colorObj);
@@ -87,17 +86,12 @@
 			return colorArr;
 		};
 		if (!currentColorObj) return;
-		const primaryColorList = generatePalette(currentColorObj.color.primary.default);
-		const darkColorList = generatePalette(currentColorObj.color.dark.default);
-		primaryColors = createTWColorFunc(primaryColorList as string[]);
-		darkColors = createTWColorFunc(darkColorList as string[]);
+		primaryColors = currentColorObj.color.primary;
+		darkColors = currentColorObj.color.dark;
+
 		// 根据主题色生成主题黑和白
-		const primaryColorB = generateThemeBlack(currentColorObj.color.primary.default);
-		const darkColorB = generateThemeBlack(currentColorObj.color.dark.default);
-		themeBlack = { primary: primaryColorB, dark: darkColorB };
-		const primaryColorW = generateThemeWhite(currentColorObj.color.primary.default);
-		const darkColorW = generateThemeWhite(currentColorObj.color.dark.default);
-		themeWhite = { primary: primaryColorW, dark: darkColorW };
+		themeBlack = { primary: currentColorObj.color.primaryBlack, dark: currentColorObj.color.darkBlack };
+		themeWhite = { primary: currentColorObj.color.primaryWhite, dark: currentColorObj.color.darkWhite };
 		stateColor = currentColorObj.color.functional;
 		extendList = currentColorObj.color.extend;
 	});
@@ -129,249 +123,307 @@
 		: 'max-w-5xl'}"
 >
 	<blockquote>
-		切换亮暗模式，选择下列内置主题可查看配色。到<a href="/guide/generator" target="_blank">主题生成器</a
-		>可快速配置颜色系统并生成配置文件。具体使用方法请参考<a href="/guide/theme" target="_blank">主题配置</a>。
+		{isZh
+			? 'STDF 跟随 Tailwind CSS v4 推荐使用 oklch 颜色模式。'
+			: 'STDF follows Tailwind CSS v4 recommendation to use the oklch color mode.'}
 	</blockquote>
+	<div class="mb-4 text-xs">
+		{#if isZh}
+			切换亮暗模式，选择下列内置主题可查看配色。到<a href="/guide/generator" target="_blank">主题生成器</a
+			>可快速配置颜色系统并生成配置文件。具体使用方法请参考<a href="/guide/theme" target="_blank">主题配置</a>。
+		{:else}
+			Switch the light and dark mode, select the built-in theme to view the color. To <a href="/guide/generator" target="_blank"
+				>Theme Generator</a
+			>
+			quickly configure the color system and generate the configuration file. For specific usage methods, please refer to
+			<a href="/guide/theme" target="_blank">Theme Configuration</a>.
+		{/if}
+	</div>
 	<div class="inline-flex items-center gap-4">
 		<ModeSwitch />
 	</div>
 	<div class="flex items-center gap-4">
 		<ThemeSwitch />
 	</div>
-	<h2>概述</h2>
-	<p>使用合理的颜色系统，可以使整个应用配色更加统一和美观。借助 Tailwind 的配置文件，可以更加方便地实现这一功能，当然也包括暗模式。</p>
+	<h2>{isZh ? '概述' : 'Overview'}</h2>
 	<p>
-		STDF 颜色系统包含主题色、功能色、中性色、扩展色四个部分。其中<strong>主题色和功能色是必须的</strong
-		>；中性色一般使用默认配置即可；扩展色，也叫辅助色或装饰色，非必需，可根据实际情况自行添加。你可能需要根据你的应用修改成自己的颜色系统。
-	</p>
-	<blockquote>颜色有别于技术，是一种主观、感性、难量化的事物，所以颜色的搭配没有好坏之分，只有适合不适合。</blockquote>
-	<h2>主题色</h2>
-	<p>
-		主题色是应用中最核心、最高频使用的颜色，它可能用于任何地方，比如强调信息、引导操作，并在很大程度上决定了应用整体的颜色基调和配色风格。
+		{isZh
+			? '使用合理的颜色系统，可以使整个应用配色更加统一和美观。借助 Tailwind 的配置，可以更加方便地实现这一功能，当然也包括暗模式。'
+			: "Use a reasonable color system to make the entire application more unified and beautiful. With Tailwind's configuration, this function can be implemented more conveniently, including the dark mode."}
 	</p>
+	{#if isZh}
+		<p>
+			STDF 颜色系统包含主题色、功能色、中性色、扩展色四个部分。其中<strong>主题色和功能色是必须的</strong
+			>；中性色一般使用默认配置即可；扩展色，也叫辅助色或装饰色，非必需，可根据实际情况自行添加。你可能需要根据你的应用修改成自己的颜色系统。
+		</p>
+	{:else}
+		<p>
+			STDF color system includes four parts: theme color, functional color, neutral color, and extended color. Among them, <strong
+				>theme color and functional color are required</strong
+			>；neutral color generally uses the default configuration; extended color, also called auxiliary color or decorative color, is not
+			required, and can be added according to actual circumstances. You may need to modify it to your own color system according to your
+			application.
+		</p>
+	{/if}
+	<blockquote>
+		{isZh
+			? '颜色有别于技术，是一种主观、感性、难量化的事物，所以颜色的搭配没有好坏之分，只有适合不适合。'
+			: 'Color is different from technology, it is a subjective, emotional, and difficult to quantify thing, so there is no good or bad in color combination, only whether it is suitable or not.'}
+	</blockquote>
+	<h2>{isZh ? '主题色' : 'Theme Color'}</h2>
 	<p>
-		一般情况，会使用区别于主色的另一种颜色适配暗模式，一种做法是不改变色相，只是将主色变浅提亮使其突出显现在暗背景下；另一种做法是完全取另一种色相，STDF
-		推荐使用后者，以便暗模式下的主色更加明显。所以 STDF 内置的主题色分为亮暗模式。当然，如果你需要将亮暗模式都设置为相同色相也是可以的，STDF
-		提供的<a href="/guide/generator" target="_blank"> 主题生成器 </a>支持随意配置。
+		{isZh
+			? '主题色是应用中最核心、最高频使用的颜色，它可能用于任何地方，比如强调信息、引导操作，并在很大程度上决定了应用整体的颜色基调和配色风格。'
+			: 'Theme color is the most core and frequently used color in the application. It may be used anywhere, such as emphasizing information, guiding operations, and largely determining the color tone and color scheme of the application.'}
 	</p>
+	{#if isZh}
+		<p>
+			一般情况，会使用区别于主色的另一种颜色适配暗模式，一种做法是不改变色相，只是将主色变浅提亮使其突出显现在暗背景下；另一种做法是完全取另一种色相，STDF
+			推荐使用后者，以便暗模式下的主色更加明显。所以 STDF
+			内置的主题色分为亮暗模式。当然，如果你需要将亮暗模式都设置为相同色相也是可以的，STDF 提供的<a href="/guide/generator" target="_blank">
+				主题生成器
+			</a>支持随意配置。
+		</p>
+	{:else}
+		<p>
+			Generally, a different color from the main color is used to adapt to the dark mode. One approach is to keep the same hue but make the
+			main color lighter to stand out in the dark background; the other approach is to completely take another hue, STDF recommends the
+			latter, so that the main color in the dark mode is more obvious. Therefore, STDF provides two sets of theme colors: one for the light
+			mode and one for the dark mode. Of course, if you need to set both the light and dark modes to the same hue, the <a
+				href="/guide/generator"
+				target="_blank">Theme Generator</a
+			> supports arbitrary configuration.
+		</p>
+	{/if}
 	<div class="justify-between md:flex md:space-x-8">
-		<div class="flex h-40 flex-1 flex-col justify-between rounded p-4 text-white" style="background-color: {primaryColors?.[6]?.hex};">
-			<div class="font-bold">primary（亮模式）</div>
-			<div class="text-sm">
-				<div>{primaryColors?.[6]?.hex}</div>
-				<div class="text-xs">{primaryColors?.[6]?.rgb}</div>
-				<div class="text-xs">{primaryColors?.[6]?.hsl}</div>
-			</div>
+		<div class="flex h-32 flex-1 flex-col justify-between rounded-sm p-4 text-white" style="background-color: {primaryColors?.default};">
+			<div class="text-xl font-bold">{isZh ? 'primary（亮模式）' : 'primary (Light Mode)'}</div>
+			<div>{primaryColors?.default}</div>
 		</div>
 		<div
-			class="mt-4 flex h-40 flex-1 flex-col justify-between rounded p-4 text-black md:mt-0"
-			style="background-color: {darkColors?.[6]?.hex};"
+			class="mt-4 flex h-32 flex-1 flex-col justify-between rounded-sm p-4 text-black md:mt-0"
+			style="background-color: {darkColors?.default};"
 		>
-			<div class="font-bold">dark（暗模式）</div>
-			<div class="text-sm">
-				<div>{darkColors?.[6]?.hex}</div>
-				<div class="text-xs">{darkColors?.[6]?.rgb}</div>
-				<div class="text-xs">{darkColors?.[6]?.hsl}</div>
-			</div>
+			<div class="text-xl font-bold">{isZh ? 'dark（暗模式）' : 'dark (Dark Mode)'}</div>
+			<div>{darkColors?.default}</div>
 		</div>
 	</div>
-	<h3>梯度色板</h3>
-	<p>
-		Tailwind 内置了一套 <a href="https://tailwindcss.com/docs/customizing-colors" target="_blank">调色板</a
-		>，但这并不能满足自定义的主题色，STDF 参照 Tailwind 的调色板命名规则，使用一套内置算法动态地将主题色计算出 11 种颜色组成梯度色板。其中
-		600 号色作为默认颜色【省略 600 编号】，实际业务中使用淡颜色的场景会多一些，故淡颜色会多一些选择。
-	</p>
+	<h3>{isZh ? '梯度色板' : 'Gradient Color Palette'}</h3>
+	{#if isZh}
+		<p>
+			Tailwind 内置了一套 <a href="https://tailwindcss.com/docs/customizing-colors" target="_blank">调色板</a
+			>，但这并不能满足自定义的主题色，STDF 参照 Tailwind 的调色板命名规则，使用一套内置算法动态地将主题色计算出 11 种颜色组成梯度色板。其中
+			600 号色作为默认颜色【省略 600 编号】，实际业务中使用淡颜色的场景会多一些，故淡颜色会多一些选择。
+		</p>
+	{:else}
+		<p>
+			Tailwind provides a <a href="https://tailwindcss.com/docs/customizing-colors" target="_blank">color palette</a>, but it cannot meet
+			the custom theme color, STDF refers to Tailwind's color palette naming rules and uses a set of built-in algorithms to calculate the
+			theme color into 11 colors to form a gradient color palette. The 600th color is the default color [omitting the 600 number], and in
+			actual business, the scene of using light colors is more common, so there are more choices for light colors.
+		</p>
+	{/if}
 	<div class="justify-between space-y-8 md:flex md:space-x-8 md:space-y-0">
-		<div class="flex flex-1 flex-col justify-between rounded bg-white text-sm">
-			{#each primaryColors ?? [] as color, index}
+		<div class="flex flex-1 flex-col justify-between rounded-sm bg-white text-sm">
+			{#each primaryColorsList as item, index}
 				<div
-					class="p-4 transition hover:scale-105 hover:rounded {index >= 5 ? 'text-white' : 'text-black'}"
-					style="background-color: {color.hex};"
+					class="p-4 transition hover:scale-105 hover:rounded-sm {index >= 6 ? 'text-white' : 'text-black'}"
+					style="background-color: {item.value};"
 				>
 					<div class="flex items-center justify-between">
-						<div class="flex-1 text-left font-bold">primary{index === 6 ? '' : `-${color.n}`}</div>
-						<div class="text-right text-xs">
-							<div>{color.hex}</div>
-							<div>{color.rgb}</div>
-							<div>{color.hsl}</div>
+						<div class="flex-1 text-left font-bold">primary{index === 6 ? '' : `-${item.key}`}</div>
+						<div class="text-right">
+							<div>{item.value}</div>
 						</div>
 					</div>
 				</div>
 			{/each}
 		</div>
-		<div class="flex flex-1 flex-col justify-between rounded bg-white text-sm">
-			{#each darkColors ?? [] as color, index}
+		<div class="flex flex-1 flex-col justify-between rounded-sm bg-white text-sm">
+			{#each darkColorsList as item, index}
 				<div
-					class="p-4 transition hover:scale-105 hover:rounded {index >= 7 ? 'text-white' : 'text-black'}"
-					style="background-color: {color.hex};"
+					class="p-4 transition hover:scale-105 hover:rounded-sm {index >= 7 ? 'text-white' : 'text-black'}"
+					style="background-color: {item.value};"
 				>
 					<div class="flex items-center justify-between">
-						<div class="flex-1 text-left font-bold">dark{index === 6 ? '' : `-${color.n}`}</div>
-						<div class="text-right text-xs">
-							<div>{color.hex}</div>
-							<div>{color.rgb}</div>
-							<div>{color.hsl}</div>
+						<div class="flex-1 text-left font-bold">dark{index === 6 ? '' : `-${item.key}`}</div>
+						<div class="text-right">
+							<div>{item.value}</div>
 						</div>
 					</div>
 				</div>
 			{/each}
 		</div>
 	</div>
-	<h3>透明度</h3>
-	<p>某些应用场景中，需要使用到主题色的透明度。注意这与上述梯度色板的差异。</p>
+	<h3>{isZh ? '透明度' : 'Opacity'}</h3>
+	<p>
+		{isZh
+			? '某些应用场景中，需要使用到主题色的透明度。注意这与上述梯度色板的差异。'
+			: 'In some application scenarios, you need to use the opacity of the theme color. Note the difference from the above gradient color palette.'}
+	</p>
 	<div class="transparent-background justify-between space-y-8 md:flex md:space-x-8 md:space-y-0">
-		<div class="flex flex-1 flex-col justify-between rounded text-black">
-			{#each [0.5, 1, 2, 2.5, 3, 4, 5, 6, 7, 7.5, 8, 9, 9.5] as color}
-				<div class="p-4 transition hover:scale-105 hover:rounded" style="background-color: {rgbaFunc(primaryColors?.[6]?.rgb, color)};">
+		<div class="flex flex-1 flex-col justify-between rounded-sm text-black">
+			{#each [0.05, 0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8, 0.9, 0.95] as color}
+				<div
+					class="p-2 transition hover:scale-105 hover:rounded-sm"
+					style="background-color: {getOklchOpacity(primaryColors?.default ?? '', color)};"
+				>
 					<div class="flex items-center justify-between text-sm">
-						<div class="rounded bg-white px-2 py-1">primary/{color * 10}</div>
-						<div class="rounded bg-white px-2 py-1 text-right text-xs">
-							<div>{rgbaFunc(primaryColors?.[6]?.rgb, color)}</div>
-							<div>{hslaFunc(primaryColors?.[6]?.hsl, color)}</div>
+						<div class="rounded-sm bg-white px-2 py-1">primary/{color * 100}</div>
+						<div class="rounded-sm bg-white px-2 py-1 text-right">
+							<div>{getOklchOpacity(primaryColors?.default ?? '', color)}</div>
 						</div>
 					</div>
 				</div>
 			{/each}
 		</div>
-		<div class="flex flex-1 flex-col justify-between rounded text-black">
-			{#each [0.5, 1, 2, 2.5, 3, 4, 5, 6, 7, 7.5, 8, 9, 9.5] as color}
-				<div class="p-4 transition hover:scale-105 hover:rounded" style="background-color: {rgbaFunc(darkColors?.[6]?.rgb, color)};">
+		<div class="flex flex-1 flex-col justify-between rounded-sm text-black">
+			{#each [0.05, 0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8, 0.9, 0.95] as color}
+				<div
+					class="p-2 transition hover:scale-105 hover:rounded-sm"
+					style="background-color: {getOklchOpacity(darkColors?.default ?? '', color)};"
+				>
 					<div class="flex items-center justify-between text-sm">
-						<div class="rounded bg-white px-2 py-1">dark/{color * 10}</div>
-						<div class="rounded bg-white px-2 py-1 text-right text-xs">
-							<div>{rgbaFunc(darkColors?.[6]?.rgb, color)}</div>
-							<div>{hslaFunc(darkColors?.[6]?.hsl, color)}</div>
+						<div class="rounded-sm bg-white px-2 py-1">dark/{color * 100}</div>
+						<div class="rounded-sm bg-white px-2 py-1 text-right">
+							<div>{getOklchOpacity(darkColors?.default ?? '', color)}</div>
 						</div>
 					</div>
 				</div>
 			{/each}
 		</div>
 	</div>
-	<h3>主题黑白色</h3>
+	<h3>{isZh ? '主题黑白色' : 'Theme Black and White'}</h3>
 	<p>
-		通常情况下，设计中应避免大面积使用纯黑色【#000000】，使用接近纯黑的颜色。同时 STDF
-		会根据算法计算出两个接近纯黑但是带有主题色的黑色，方便设计搭配。同样也会计算出两个接近纯白但是带有主题色的白色。一般可用于多套主题搭配时的文字颜色，亮暗背景颜色等场景。
+		{isZh
+			? '通常情况下，设计中应避免大面积使用纯黑色【#000000】，使用接近纯黑的颜色。同时 STDF 会根据算法计算出两个接近纯黑但是带有主题色的黑色，方便设计搭配。同样也会计算出两个接近纯白但是带有主题色的白色。一般可用于多套主题搭配时的文字颜色，亮暗背景颜色等场景。'
+			: 'In most cases, designers should avoid using pure black [000000] on a large scale, and use a color close to pure black. At the same time, STDF will calculate two black colors close to pure black but with a theme color for design搭配。Similarly, it will calculate two white colors close to pure white but with a theme color. Generally, it can be used in the text color of multiple theme combinations, the light and dark background color, etc.'}
 	</p>
 	<div class="flex-wrap justify-around space-y-4 md:flex md:space-x-4 md:space-y-0">
 		{#each [themeBlack?.primary, themeBlack?.dark, themeWhite?.primary, themeWhite?.dark] as item, i}
 			<div
-				class="flex h-32 flex-1 flex-col justify-between rounded border p-4 {i === 0 || i === 1
+				class="flex h-24 flex-1 flex-col justify-between rounded-sm border p-2 {i === 0 || i === 1
 					? 'border-gray-700 text-white'
 					: 'border-gray-300 text-black'}"
-				style="background-color: {item?.hex};"
+				style="background-color: {item};"
 			>
 				<div class="font-bold">
 					{i === 0 ? 'primaryBlack' : i === 1 ? 'darkBlack' : i === 2 ? 'primaryWhite' : 'darkWhite'}
 				</div>
-				<div class="text-xs">
-					<div>{item?.hex}</div>
-					<div>{item?.rgb}</div>
-					<div>{item?.hsl}</div>
-				</div>
+				<div class="text-sm">{item}</div>
 			</div>
 		{/each}
 	</div>
-
-	<h2>功能色</h2>
-	<p>功能色是指用于特定场景、特定状态等特殊语义的颜色，通常包含成功、警告、错误、信息四种。当然也都支持类似主题色的透明度写法。</p>
+	<h2>{isZh ? '功能色' : 'Functional Color'}</h2>
+	<p>
+		{isZh
+			? '功能色是指用于特定场景、特定状态等特殊语义的颜色，通常包含成功、警告、错误、信息四种。当然也都支持类似主题色的透明度写法。'
+			: 'Functional color is a color used for specific scenarios, specific states, etc. It usually includes four types: success, warning, error, and information. Of course, it also supports the transparent writing method similar to the theme color.'}
+	</p>
 	<div class="flex-wrap justify-around space-y-4 md:flex md:space-x-4 md:space-y-0">
-		<div class="bg-success flex h-32 flex-1 flex-col justify-between rounded p-4 text-white">
-			<div class="font-bold">success</div>
-			<div class="text-xs">
-				<div>{stateColor?.success}</div>
-				<div>{colorConvertFunc(stateColor?.success).rgb}</div>
-				<div>{colorConvertFunc(stateColor?.success).hsl}</div>
-			</div>
-		</div>
-		<div class="bg-warning flex h-32 flex-1 flex-col justify-between rounded p-4 text-white">
-			<div class="font-bold">warning</div>
-			<div class="text-xs">
-				<div>{stateColor?.warning}</div>
-				<div>{colorConvertFunc(stateColor?.warning).rgb}</div>
-				<div>{colorConvertFunc(stateColor?.warning).hsl}</div>
-			</div>
-		</div>
-		<div class="bg-error flex h-32 flex-1 flex-col justify-between rounded p-4 text-white">
-			<div class="font-bold">error</div>
-			<div class="text-xs">
-				<div>{stateColor?.error}</div>
-				<div>{colorConvertFunc(stateColor?.error).rgb}</div>
-				<div>{colorConvertFunc(stateColor?.error).hsl}</div>
+		{#each [stateColor?.success, stateColor?.warning, stateColor?.error, stateColor?.info] as item, i}
+			<div class="flex h-24 flex-1 flex-col justify-between rounded-sm p-2 text-white" style="background-color: {item};">
+				<div class="font-bold">{i === 0 ? 'success' : i === 1 ? 'warning' : i === 2 ? 'error' : 'info'}</div>
+				<div class="text-sm">{item}</div>
 			</div>
-		</div>
-		<div class="bg-info flex h-32 flex-1 flex-col justify-between rounded p-4 text-white">
-			<div class="font-bold">info</div>
-			<div class="text-xs">
-				<div>{stateColor?.info}</div>
-				<div>{colorConvertFunc(stateColor?.info).rgb}</div>
-				<div>{colorConvertFunc(stateColor?.info).hsl}</div>
-			</div>
-		</div>
+		{/each}
 	</div>
-
-	<h2>中性色</h2>
-	<p>中性色包含一系列带透明度的黑白色和不同程度的灰色，用于配置亮色与暗模式不同背景、文字、分割线等颜色。</p>
+	<h2>{isZh ? '中性色' : 'Neutral Color'}</h2>
+	<p>
+		{isZh
+			? '中性色包含一系列带透明度的黑白色和不同程度的灰色，用于配置亮色与暗模式不同背景、文字、分割线等颜色。'
+			: 'Neutral color includes a series of black and white colors with different degrees of transparency and different degrees of gray, used to configure different background, text, and split line colors in the light and dark modes.'}
+	</p>
 	<p class="text-xs">
-		注：当下层为纯色时，带透明度的黑白色与灰色可能看起来一样但实际不一样，请注意区分使用。虽然灰色也可以使用透明度，但是需要透明度的地方一般通过黑白色配合透明度值使用。
+		{isZh
+			? '注：当下层为纯色时，带透明度的黑白色与灰色可能看起来一样但实际不一样，请注意区分使用。虽然灰色也可以使用透明度，但是需要透明度的地方一般通过黑白色配合透明度值使用。'
+			: 'Note: When the lower layer is a pure color, the black and white colors with transparency may look the same but are actually different, please pay attention to the difference in use. Although gray can also use transparency, but the places that need transparency usually use the black and white colors with transparency.'}
 	</p>
 	<div class="justify-between space-y-8 text-black md:flex md:space-x-8 md:space-y-0">
-		<div class="transparent-background flex flex-1 flex-col justify-between rounded text-sm">
-			{#each [0.5, 1, 2, 2.5, 3, 4, 5, 6, 7, 7.5, 8, 9, 9.5, 10] as color}
-				<div class="p-4 transition hover:scale-105 hover:rounded" style="background-color: rgba(0, 0, 0, {color / 10});">
+		<div class="transparent-background flex flex-1 flex-col justify-between rounded-sm text-sm">
+			{#each [0.5, 1, 2, 2.5, 3, 4, 5, 6, 7, 7.5, 8, 9, 9.5] as color}
+				<div class="p-2 transition hover:scale-105 hover:rounded-sm" style="background-color: oklch(0 0 0 / {color / 10});">
 					<div class="flex items-center justify-between">
-						<div class="rounded bg-white px-2 py-1 text-left">
-							black{color === 10 ? '' : `/${color * 10}`}
+						<div class="rounded-sm bg-white px-2 py-1 text-left">
+							black{`/${color * 10}`}
 						</div>
-						<div class="rounded bg-white px-2 py-1 text-xs">
-							<div class="flex-1 text-right">rgba(0, 0, 0, {color / 10})</div>
-							<div class="flex-1 text-right">hsla(0, 0%, 0%, {color / 10})</div>
+						<div class="rounded-sm bg-white px-2 py-1">
+							<div class="flex-1 text-right">oklch(0 0 0 / {color / 10})</div>
 						</div>
 					</div>
 				</div>
 			{/each}
+			<div class="p-2 transition hover:scale-105 hover:rounded-sm" style="background-color: oklch(0 0 0);">
+				<div class="flex items-center justify-between">
+					<div class="rounded-sm bg-white px-2 py-1 text-left">black</div>
+					<div class="rounded-sm bg-white px-2 py-1">
+						<div class="flex-1 text-right">oklch(0 0 0)</div>
+					</div>
+				</div>
+			</div>
 		</div>
 		<div class="transparent-background flex flex-1 flex-col justify-between rounded text-sm">
-			{#each [0.5, 1, 2, 2.5, 3, 4, 5, 6, 7, 7.5, 8, 9, 9.5, 10] as color}
-				<div class="p-4 transition hover:scale-105 hover:rounded" style="background-color: rgba(255, 255, 255, {color / 10});">
+			{#each [0.5, 1, 2, 2.5, 3, 4, 5, 6, 7, 7.5, 8, 9, 9.5] as color}
+				<div class="p-2 transition hover:scale-105 hover:rounded-sm" style="background-color: oklch(1 0 0 / {color / 10});">
 					<div class="flex items-center justify-between">
-						<div class="rounded bg-white px-2 py-1 text-left">
-							white{color === 10 ? '' : `/${color * 10}`}
+						<div class="rounded-sm bg-white px-2 py-1 text-left">
+							white{`/${color * 10}`}
 						</div>
-						<div class="rounded bg-white px-2 py-1 text-xs">
-							<div class="flex-1 text-right">rgba(255, 255, 255, {color / 10})</div>
-							<div class="flex-1 text-right">hsla(0, 100%, 0%, {color / 10})</div>
+						<div class="rounded-sm bg-white px-2 py-1">
+							<div class="flex-1 text-right">oklch(1 0 0 / {color / 10})</div>
 						</div>
 					</div>
 				</div>
 			{/each}
+			<div class="p-2 transition hover:scale-105 hover:rounded-sm" style="background-color: oklch(1 0 0);">
+				<div class="flex items-center justify-between">
+					<div class="rounded-sm bg-white px-2 py-1 text-left">white</div>
+					<div class="rounded-sm bg-white px-2 py-1">
+						<div class="flex-1 text-right">oklch(1 0 0)</div>
+					</div>
+				</div>
+			</div>
 		</div>
-		<div class="flex flex-1 flex-col justify-between rounded">
+		<div class="flex flex-1 flex-col justify-between rounded-sm">
 			<ColorCard colorList={colorGrayList} />
 		</div>
 	</div>
-
-	<h2>扩展色</h2>
-	<p>
-		扩展色是一些区分功能色与主题色的非必需装饰性颜色，主要是在需要多个颜色搭配的界面时使用。统一配置可以使全局搭配颜色更加协调，通过
-		Tailwind 配置之后写起来也更加方便。数量不限，使用方式不限，使用规则不限。但请注意使用<strong
-			>多主题时，不同主题的扩展色数量应保持一致。</strong
-		>STDF 内置主题都提供了三种扩展色，请根据你的实际配色方案搭配。当然也都支持类似主题色的透明度写法。
-	</p>
-	<p>
-		写扩展色类名时使用 extend0、extend1...
-		这种方式不方便记忆，推荐使用颜色的别名。别名的命名规则不限，如颜色名称、品牌、情绪、场景、编号、关联事物......皆可。如下面的
-		extend0、extend1、extend2 分别对应当前主题【{themes.find((item) => item.name === $currentColorStore)?.name_CN}】的三个扩展色。STDF
-		提供的<a href="/guide/generator" target="_blank"> 主题生成器 </a>也支持配置别名。
-	</p>
+	<h2>{isZh ? '扩展色' : 'Extended Color'}</h2>
+	{#if isZh}
+		<p>
+			扩展色是一些区分功能色与主题色的非必需装饰性颜色，主要是在需要多个颜色搭配的界面时使用。统一配置可以使全局搭配颜色更加协调，通过
+			Tailwind 配置之后写起来也更加方便。数量不限，使用方式不限，使用规则不限。但请注意使用<strong
+				>多主题时，不同主题的扩展色数量应保持一致。</strong
+			>STDF 内置主题都提供了三种扩展色，请根据你的实际配色方案搭配。当然也都支持类似主题色的透明度写法。
+		</p>
+		<p>
+			写扩展色类名时使用 extend0、extend1...
+			这种方式不方便记忆，推荐使用颜色的别名。别名的命名规则不限，如颜色名称、品牌、情绪、场景、编号、关联事物......皆可。如下面的
+			extend0、extend1、extend2 分别对应当前主题【{themes.find((item) => item.name === $currentColorStore)?.name_CN}】的三个扩展色。STDF
+			提供的<a href="/guide/generator" target="_blank"> 主题生成器 </a>也支持配置别名。
+		</p>
+	{:else}
+		<p>
+			Extended color is some non-essential decorative colors that are not required to distinguish between functional colors and theme
+			colors. Mainly used in interfaces that need multiple color combinations. Unifying the configuration can make the global color more
+			harmonious, and writing it is also more convenient after Tailwind configuration. The number is unlimited, the usage is unlimited, and
+			the usage rules are unlimited. But please note that when using multiple themes, the number of extended colors in different themes
+			should be kept consistent. STDF provides three extended colors for the built-in themes, please match according to your actual color
+			scheme. Of course, it also supports the transparent writing method similar to the theme color.
+		</p>
+		<p>
+			When writing the class name of the extended color, use extend0, extend1..., this method is not convenient to remember, it is
+			recommended to use the alias of the color. The naming rules of the alias are unlimited, such as the color name, brand, emotion, scene,
+			number, related things... Such as the following extend0, extend1, extend2, which correspond to the three extended colors of the
+			current theme [{themes.find((item) => item.name === $currentColorStore)?.name}]. STDF's
+			<a href="/guide/generator" target="_blank">Theme Generator</a> also supports configuration aliases.
+		</p>
+	{/if}
 	<div class="flex-wrap justify-around space-y-4 md:flex md:space-x-4 md:space-y-0">
 		{#each extendList ?? [] as extend}
-			<div class="flex h-32 flex-1 flex-col justify-between rounded p-4 text-white" style="background-color: {extend.color};">
+			<div class="flex h-24 flex-1 flex-col justify-between rounded-sm p-2 text-white" style="background-color: {extend.color};">
 				<div class="font-bold">{extend.alias}</div>
-				<div class="text-xs">
-					<div>{extend.color}</div>
-					<div>{colorConvertFunc(extend.color).rgb}</div>
-					<div>{colorConvertFunc(extend.color).hsl}</div>
-				</div>
+				<div>{extend.color}</div>
 			</div>
 		{/each}
 	</div>

docs/site/src/routes/guide/color/Color_en.svelte

@@ -1,407 +0,0 @@
-<script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
-	import ColorCard from '$lib/colorCard/ColorCard.svelte';
-	import ModeSwitch from '$lib/modeSwitch/ModeSwitch.svelte';
-	import ThemeSwitch from '$lib/themeSwitch/ThemeSwitch.svelte';
-	import themes from '../../../data/themes';
-	import { currentColorStore, isWideScreenStore } from '../../../store';
-	import { generatePalette, generateThemeBlack, generateThemeWhite, colorConvertFunc } from '../../../utils';
-	import hljs from 'highlight.js';
-	import { type ThemeProps } from 'stdf/theme';
-
-	const colorGrayList = [
-		{ key: 'gray-50', hex: '#f2f2f2' },
-		{ key: 'gray-100', hex: '#e6e6e6' },
-		{ key: 'gray-200', hex: '#cccccc' },
-		{ key: 'gray-300', hex: '#b3b3b3' },
-		{ key: 'gray-400', hex: '#999999' },
-		{ key: 'gray-500', hex: '#808080' },
-		{ key: 'gray-600', hex: '#666666' },
-		{ key: 'gray-700', hex: '#4D4D4D' },
-		{ key: 'gray-800', hex: '#333333' },
-		{ key: 'gray-900', hex: '#1A1A1A' },
-		{ key: 'gray-950', hex: '#0D0D0D' }
-	];
-	onMount(() => hljs.highlightAll());
-
-	let currentColorObj: ThemeProps | undefined = undefined;
-	let primaryColors: { n: number; hex: string; rgb: string; hsl: string }[] | undefined = undefined;
-	let darkColors: { n: number; hex: string; rgb: string; hsl: string }[] | undefined = undefined;
-	let themeBlack:
-		| {
-				primary: { hex: string; rgb: string; hsl: string };
-				dark: { hex: string; rgb: string; hsl: string };
-		  }
-		| undefined = undefined;
-	let themeWhite:
-		| {
-				primary: { hex: string; rgb: string; hsl: string };
-				dark: { hex: string; rgb: string; hsl: string };
-		  }
-		| undefined = undefined;
-	let stateColor: { success: string; warning: string; error: string; info: string } | undefined = undefined;
-	let extendList: { color: string; alias: string }[] | undefined = undefined;
-
-	const unsubscribe = currentColorStore.subscribe((value) => {
-		// 根据 $currentColorStore 从 themes 中获取对应的颜色对象
-		currentColorObj = themes.find((item) => item.name === value)?.theme;
-		// 传入数组，按照 Tailwind 规则生成颜色列表
-		const createTWColorFunc = (colorList: string[]) => {
-			if (colorList.length !== 11) {
-				console.error('Coloe list length must be 11');
-				return;
-			}
-			const colorArr: { n: number; hex: string; rgb: string; hsl: string }[] = [];
-			colorList.forEach((item, index) => {
-				// 第 0 项和最后一项的 key 为 50 和 950，其他项为 100-900，颜色有 hex、rgb、hsl 三种格式，注意 hsl 保留整数
-				let colorObj: { n: number; hex: string; rgb: string; hsl: string } = {
-					n: 0,
-					hex: '',
-					rgb: '',
-					hsl: ''
-				};
-				if (index === 0) {
-					colorObj = {
-						n: 50,
-						hex: item,
-						rgb: colorConvertFunc(item).rgb,
-						hsl: colorConvertFunc(item).hsl
-					};
-				} else if (index === 10) {
-					colorObj = {
-						n: 950,
-						hex: item,
-						rgb: colorConvertFunc(item).rgb,
-						hsl: colorConvertFunc(item).hsl
-					};
-				} else {
-					colorObj = {
-						n: 100 * index,
-						hex: item,
-						rgb: colorConvertFunc(item).rgb,
-						hsl: colorConvertFunc(item).hsl
-					};
-				}
-				colorArr.push(colorObj);
-			});
-			return colorArr;
-		};
-		if (!currentColorObj) return;
-		const primaryColorList = generatePalette(currentColorObj.color.primary.default);
-		const darkColorList = generatePalette(currentColorObj.color.dark.default);
-		primaryColors = createTWColorFunc(primaryColorList as string[]);
-		darkColors = createTWColorFunc(darkColorList as string[]);
-		// 根据主题色生成主题黑和白
-		const primaryColorB = generateThemeBlack(currentColorObj.color.primary.default);
-		const darkColorB = generateThemeBlack(currentColorObj.color.dark.default);
-		themeBlack = { primary: primaryColorB, dark: darkColorB };
-		const primaryColorW = generateThemeWhite(currentColorObj.color.primary.default);
-		const darkColorW = generateThemeWhite(currentColorObj.color.dark.default);
-		themeWhite = { primary: primaryColorW, dark: darkColorW };
-		stateColor = currentColorObj.color.functional;
-		extendList = currentColorObj.color.extend;
-	});
-	// svelte 组件销毁时取消订阅
-	onDestroy(() => {
-		unsubscribe();
-	});
-	// 传入 rgb(0, 98, 57) 这种格式与透明度，返回 rgba(0, 98, 57, 0.1) 这种格式
-	const rgbaFunc = (str = '#000', n = 0.1) => {
-		const arr = str.split(',');
-		const r = arr[0].split('(')[1];
-		const g = arr[1];
-		const b = arr[2].split(')')[0];
-		return `rgba(${r}, ${g}, ${b}, ${n / 10})`;
-	};
-	// 传入 hsl(157, 100%, 15%) 这种格式与透明度，返回 hsla(157, 100%, 15%, 0.1) 这种格式
-	const hslaFunc = (str = 'hsl(157, 100%, 15%)', n = 0.1) => {
-		const arr = str.split(',');
-		const h = arr[0].split('(')[1];
-		const s = arr[1];
-		const l = arr[2].split(')')[0];
-		return `hsla(${h}, ${s}, ${l}, ${n / 10})`;
-	};
-</script>
-
-<article
-	class="prose dark:prose-invert prose-strong:text-primary dark:prose-strong:text-dark pb-12 {$isWideScreenStore
-		? 'max-w-full'
-		: 'max-w-5xl'}"
->
-	<blockquote>
-		Switch light and dark mode, select the following built-in themes to view the color matching. You can quickly configure the color system
-		and generate a configuration file at <a href="/guide/generator" target="_blank">Theme Generator</a>. Please refer to
-		<a href="/guide/theme" target="_blank">Theme Configuration</a> for specific usage.
-	</blockquote>
-	<div class="inline-flex items-center gap-4">
-		<ModeSwitch />
-	</div>
-	<div class="flex items-center gap-4">
-		<ThemeSwitch />
-	</div>
-	<h2>Overview</h2>
-	<p>
-		Using a reasonable color system can make the entire application color matching more unified and beautiful. With the help of Tailwind's
-		configuration file, this function can be more convenient to achieve, including dark mode.
-	</p>
-	<p>
-		STDF's color system includes four parts: theme color, functional color, neutral color, and extended color. Among them,
-		<strong>theme color and functional color are required</strong>; neutral color generally uses the default configuration; extended color,
-		also called auxiliary color or decorative color, is not required, and can be added according to the actual situation. You may need to
-		modify your own color system according to your application.
-	</p>
-	<blockquote>
-		Colors are different from technology. They are subjective, perceptual, and difficult to quantify. Therefore, there is no good or bad in
-		color matching, only suitable or not.
-	</blockquote>
-	<h2>Theme Color</h2>
-	<p>
-		The theme color is the most core and high-frequency color used in the application. It may be used anywhere, such as emphasizing
-		information, guiding operations, and largely determining the overall color tone and color matching style of the application.
-	</p>
-	<p>
-		In general, another color that is different from the main color is used to adapt to the dark mode. One approach is not to change the
-		hue, but to make the main color lighter and brighter to make it stand out on the dark background; the other approach is to completely
-		take another hue. STDF recommends the latter, so that the main color in the dark color is more obvious. Therefore, the built-in theme
-		color of STDF is divided into light and dark colors. Of course, if you need to set the light and dark modes to the same hue, it is also
-		possible. STDF provides a <a href="/guide/generator" target="_blank">Theme Generator</a> that supports arbitrary configuration.
-	</p>
-	<div class="justify-between md:flex md:space-x-8">
-		<div class="flex h-40 flex-1 flex-col justify-between rounded p-4 text-white" style="background-color: {primaryColors?.[6]?.hex};">
-			<div class="font-bold">primary(Light mode)</div>
-			<div class="text-sm">
-				<div>{primaryColors?.[6]?.hex}</div>
-				<div class="text-xs">{primaryColors?.[6]?.rgb}</div>
-				<div class="text-xs">{primaryColors?.[6]?.hsl}</div>
-			</div>
-		</div>
-		<div
-			class="mt-4 flex h-40 flex-1 flex-col justify-between rounded p-4 text-black md:mt-0"
-			style="background-color: {darkColors?.[6]?.hex};"
-		>
-			<div class="font-bold">dark(Dark mode)</div>
-			<div class="text-sm">
-				<div>{darkColors?.[6]?.hex}</div>
-				<div class="text-xs">{darkColors?.[6]?.rgb}</div>
-				<div class="text-xs">{darkColors?.[6]?.hsl}</div>
-			</div>
-		</div>
-	</div>
-	<h3>Gradient Color Palette</h3>
-	<p>
-		Tailwind has built-in a <a href="https://tailwindcss.com/docs/customizing-colors" target="_blank">color palette</a>, but this cannot
-		meet the custom theme color. STDF refers to Tailwind's color palette naming rules, and uses a built-in algorithm to dynamically
-		calculate 11 colors of the theme color to form a gradient color palette. Among them, the 600 color is used as the default color
-		[omitting the 600 number]. In actual business, there will be more scenarios using light colors, so there will be more choices for light
-		colors.
-	</p>
-	<div class="justify-between space-y-8 md:flex md:space-x-8 md:space-y-0">
-		<div class="flex flex-1 flex-col justify-between rounded bg-white text-sm">
-			{#each primaryColors ?? [] as color, index}
-				<div
-					class="p-4 transition hover:scale-105 hover:rounded {index >= 5 ? 'text-white' : 'text-black'}"
-					style="background-color: {color.hex};"
-				>
-					<div class="flex items-center justify-between">
-						<div class="flex-1 text-left font-bold">primary{index === 6 ? '' : `-${color.n}`}</div>
-						<div class="text-right text-xs">
-							<div>{color.hex}</div>
-							<div>{color.rgb}</div>
-							<div>{color.hsl}</div>
-						</div>
-					</div>
-				</div>
-			{/each}
-		</div>
-		<div class="flex flex-1 flex-col justify-between rounded bg-white text-sm">
-			{#each darkColors ?? [] as color, index}
-				<div
-					class="p-4 transition hover:scale-105 hover:rounded {index >= 7 ? 'text-white' : 'text-black'}"
-					style="background-color: {color.hex};"
-				>
-					<div class="flex items-center justify-between">
-						<div class="flex-1 text-left font-bold">dark{index === 6 ? '' : `-${color.n}`}</div>
-						<div class="text-right text-xs">
-							<div>{color.hex}</div>
-							<div>{color.rgb}</div>
-							<div>{color.hsl}</div>
-						</div>
-					</div>
-				</div>
-			{/each}
-		</div>
-	</div>
-	<h3>Transparency</h3>
-	<p>
-		In some application scenarios, the transparency of the theme color is required. Note the difference from the gradient color palette.
-	</p>
-	<div class="transparent-background justify-between space-y-8 md:flex md:space-x-8 md:space-y-0">
-		<div class="flex flex-1 flex-col justify-between rounded text-black">
-			{#each [0.5, 1, 2, 2.5, 3, 4, 5, 6, 7, 7.5, 8, 9, 9.5] as color}
-				<div class="p-4 transition hover:scale-105 hover:rounded" style="background-color: {rgbaFunc(primaryColors?.[6]?.rgb, color)};">
-					<div class="flex items-center justify-between text-sm">
-						<div class="rounded bg-white px-2 py-1">primary/{color * 10}</div>
-						<div class="rounded bg-white px-2 py-1 text-right text-xs">
-							<div>{rgbaFunc(primaryColors?.[6]?.rgb, color)}</div>
-							<div>{hslaFunc(primaryColors?.[6]?.hsl, color)}</div>
-						</div>
-					</div>
-				</div>
-			{/each}
-		</div>
-		<div class="flex flex-1 flex-col justify-between rounded text-black">
-			{#each [0.5, 1, 2, 2.5, 3, 4, 5, 6, 7, 7.5, 8, 9, 9.5] as color}
-				<div class="p-4 transition hover:scale-105 hover:rounded" style="background-color: {rgbaFunc(darkColors?.[6]?.rgb, color)};">
-					<div class="flex items-center justify-between text-sm">
-						<div class="rounded bg-white px-2 py-1">dark/{color * 10}</div>
-						<div class="rounded bg-white px-2 py-1 text-right text-xs">
-							<div>{rgbaFunc(darkColors?.[6]?.rgb, color)}</div>
-							<div>{hslaFunc(darkColors?.[6]?.hsl, color)}</div>
-						</div>
-					</div>
-				</div>
-			{/each}
-		</div>
-	</div>
-	<h3>Theme Black and White</h3>
-	<p>
-		In general, pure black [#000000] should be avoided in the design, and colors close to pure black should be used. At the same time, STDF
-		will calculate two black colors close to pure black but with theme colors according to the algorithm, which is convenient for design
-		matching. Similarly, two white colors close to pure white but with theme colors will also be calculated. Generally, it can be used in
-		scenarios such as text color, light and dark background color when matching multiple themes.
-	</p>
-	<div class="flex-wrap justify-around space-y-4 md:flex md:space-x-4 md:space-y-0">
-		{#each [themeBlack?.primary, themeBlack?.dark, themeWhite?.primary, themeWhite?.dark] as item, i}
-			<div
-				class="flex h-32 flex-1 flex-col justify-between rounded border p-4 {i === 0 || i === 1
-					? 'border-gray-700 text-white'
-					: 'border-gray-300 text-black'}"
-				style="background-color: {item?.hex};"
-			>
-				<div class="font-bold">
-					{i === 0 ? 'primaryBlack' : i === 1 ? 'darkBlack' : i === 2 ? 'primaryWhite' : 'darkWhite'}
-				</div>
-				<div class="text-xs">
-					<div>{item?.hex}</div>
-					<div>{item?.rgb}</div>
-					<div>{item?.hsl}</div>
-				</div>
-			</div>
-		{/each}
-	</div>
-
-	<h2>Functional Color</h2>
-	<p>
-		The functional color refers to the color with specific semantics used in specific scenarios, specific states, etc., usually including
-		four types: success, warning, error, and information. Of course, it also supports the transparency writing method similar to the theme
-		color.
-	</p>
-	<div class="flex-wrap justify-around space-y-4 md:flex md:space-x-4 md:space-y-0">
-		<div class="bg-success flex h-32 flex-1 flex-col justify-between rounded p-4 text-white">
-			<div class="font-bold">success</div>
-			<div class="text-xs">
-				<div>{stateColor?.success}</div>
-				<div>{colorConvertFunc(stateColor?.success).rgb}</div>
-				<div>{colorConvertFunc(stateColor?.success).hsl}</div>
-			</div>
-		</div>
-		<div class="bg-warning flex h-32 flex-1 flex-col justify-between rounded p-4 text-white">
-			<div class="font-bold">warning</div>
-			<div class="text-xs">
-				<div>{stateColor?.warning}</div>
-				<div>{colorConvertFunc(stateColor?.warning).rgb}</div>
-				<div>{colorConvertFunc(stateColor?.warning).hsl}</div>
-			</div>
-		</div>
-		<div class="bg-error flex h-32 flex-1 flex-col justify-between rounded p-4 text-white">
-			<div class="font-bold">error</div>
-			<div class="text-xs">
-				<div>{stateColor?.error}</div>
-				<div>{colorConvertFunc(stateColor?.error).rgb}</div>
-				<div>{colorConvertFunc(stateColor?.error).hsl}</div>
-			</div>
-		</div>
-		<div class="bg-info flex h-32 flex-1 flex-col justify-between rounded p-4 text-white">
-			<div class="font-bold">info</div>
-			<div class="text-xs">
-				<div>{stateColor?.info}</div>
-				<div>{colorConvertFunc(stateColor?.info).rgb}</div>
-				<div>{colorConvertFunc(stateColor?.info).hsl}</div>
-			</div>
-		</div>
-	</div>
-
-	<h2>Neutral Color</h2>
-	<p>
-		The neutral color contains a series of black and white colors with transparency and different degrees of gray, which are used to
-		configure the background, text, dividing line, etc. of different light and dark modes.
-	</p>
-	<p class="text-xs">
-		Note: When the lower layer is a solid color, the black and white colors with transparency and gray may look the same but are actually
-	</p>
-	<div class="justify-between space-y-8 text-black md:flex md:space-x-8 md:space-y-0">
-		<div class="transparent-background flex flex-1 flex-col justify-between rounded text-sm">
-			{#each [0.5, 1, 2, 2.5, 3, 4, 5, 6, 7, 7.5, 8, 9, 9.5, 10] as color}
-				<div class="p-4 transition hover:scale-105 hover:rounded" style="background-color: rgba(0, 0, 0, {color / 10});">
-					<div class="flex items-center justify-between">
-						<div class="rounded bg-white px-2 py-1 text-left">
-							black{color === 10 ? '' : `/${color * 10}`}
-						</div>
-						<div class="rounded bg-white px-2 py-1 text-xs">
-							<div class="flex-1 text-right">rgba(0, 0, 0, {color / 10})</div>
-							<div class="flex-1 text-right">hsla(0, 0%, 0%, {color / 10})</div>
-						</div>
-					</div>
-				</div>
-			{/each}
-		</div>
-		<div class="transparent-background flex flex-1 flex-col justify-between rounded text-sm">
-			{#each [0.5, 1, 2, 2.5, 3, 4, 5, 6, 7, 7.5, 8, 9, 9.5, 10] as color}
-				<div class="p-4 transition hover:scale-105 hover:rounded" style="background-color: rgba(255, 255, 255, {color / 10});">
-					<div class="flex items-center justify-between">
-						<div class="rounded bg-white px-2 py-1 text-left">
-							white{color === 10 ? '' : `/${color * 10}`}
-						</div>
-						<div class="rounded bg-white px-2 py-1 text-xs">
-							<div class="flex-1 text-right">rgba(255, 255, 255, {color / 10})</div>
-							<div class="flex-1 text-right">hsla(0, 100%, 0%, {color / 10})</div>
-						</div>
-					</div>
-				</div>
-			{/each}
-		</div>
-		<div class="flex flex-1 flex-col justify-between rounded">
-			<ColorCard colorList={colorGrayList} />
-		</div>
-	</div>
-
-	<h2>Extended Color</h2>
-	<p>
-		The extended color is a non-essential decorative color that distinguishes between functional color and theme color. It is mainly used
-		when multiple colors need to be matched on the interface. Unified configuration can make the global matching color more coordinated, and
-		it is more convenient to write after configuring through Tailwind. The number is unlimited, the usage is unlimited, and the rules of use
-		are unlimited. But please note that when using <strong
-			>multiple themes, the number of extended colors of different themes should be consistent.</strong
-		> STDF's built-in themes provide three extended colors, please match according to your actual color scheme. Of course, it also supports the
-		transparency writing method similar to the theme color.
-	</p>
-	<p>
-		When writing the extended color class name, use extend0, extend1... This method is not convenient to remember, it is recommended to use
-		the alias of the color. The naming rules of the alias are not limited, such as color name, brand, emotion, scene, number, associated
-		things... are all available. As the following extend0, extend1, extend2 correspond to the three extended colors of the current theme [{themes?.find(
-			(item) => item.name === $currentColorStore
-		)?.name}]. STDF provides a <a href="/guide/generator" target="_blank"> Theme Generator </a> also supports configuration aliases.
-	</p>
-	<div class="flex-wrap justify-around space-y-4 md:flex md:space-x-4 md:space-y-0">
-		{#each extendList ?? [] as extend}
-			<div class="flex h-32 flex-1 flex-col justify-between rounded p-4 text-white" style="background-color: {extend.color};">
-				<div class="font-bold">{extend.alias}</div>
-				<div class="text-xs">
-					<div>{extend.color}</div>
-					<div>{colorConvertFunc(extend.color).rgb}</div>
-					<div>{colorConvertFunc(extend.color).hsl}</div>
-				</div>
-			</div>
-		{/each}
-	</div>
-</article>

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

@@ -5,7 +5,16 @@
 	import ModeSwitch from '$lib/modeSwitch/ModeSwitch.svelte';
 	import { currentColorStore } from '../../../store';
 	import themes, { type ThemeItem } from '../../../data/themes';
-	import { generatePalette, generateThemeBlack, generateThemeWhite, colorConvertFunc, throttle, hexToRgb } from '../../../utils';
+	import {
+		generatePalette,
+		generateThemeBlack,
+		generateThemeWhite,
+		colorConvertFunc,
+		throttle,
+		hexToRgb,
+		getOklchFunc,
+		getHexFunc
+	} from '../../../utils';
 	import colorList from '../../../data/color';
 	import GeneratorPreview from './GeneratorPreview.svelte';
 	import hljs from 'highlight.js';
@@ -26,7 +35,7 @@
 		let extendListStr = '	{';
 		extendList.forEach((item) => {
 			extendListStr += `
-			color: '${hexToRgb(item.color)}', // ${item.color} ${colorConvertFunc(item.color).hsl}
+			color: '${colorConvertFunc(item.color).oklch}', // ${item.color} ${colorConvertFunc(item.color).hsl}
 			alias: "${item.alias}",
 		},`;
 			extendListStr += `
@@ -34,29 +43,28 @@
 		});
 		// 如果 extendListStr 最后一个是换行符，则删除换行
 		extendListStr = extendListStr.slice(0, extendListStr.lastIndexOf('\n'));
-		// extendListStr = extendListStr.slice(0, extendListStr.lastIndexOf(',') + 1);
 		return extendListStr;
 	};
 	// 使用 extendList 返回 extendListStr2
 	const extendListStrFunc2 = (extendList: { color: string; alias: string }[]) => {
 		let extendListStr = '';
 		extendList.forEach((item, index) => {
-			extendListStr += `--theme-color-extend${index}: ${hexToRgb(item.color)};
+			extendListStr += `	--color-extend${index}: ${getOklchFunc(item.color)};
+	--color-${item.alias}: ${getOklchFunc(item.color)};
 `;
 		});
 		// 如果 extendListStr 最后一个是换行符，则删除换行
 		extendListStr = extendListStr.slice(0, extendListStr.lastIndexOf('\n'));
-		// extendListStr = extendListStr.slice(0, extendListStr.lastIndexOf(',') + 1);
 		return extendListStr;
 	};
 	const numbers = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 	let colors = $state([
-		{ type: 'primary', color: initTheme.theme.color.primary.default },
-		{ type: 'dark', color: initTheme.theme.color.dark.default },
-		{ type: 'success', color: initTheme.theme.color.functional.success },
-		{ type: 'warning', color: initTheme.theme.color.functional.warning },
-		{ type: 'error', color: initTheme.theme.color.functional.error },
-		{ type: 'info', color: initTheme.theme.color.functional.info }
+		{ type: 'primary', color: initTheme.theme.color.primary.default, hex: getHexFunc(initTheme.theme.color.primary.default) },
+		{ type: 'dark', color: initTheme.theme.color.dark.default, hex: getHexFunc(initTheme.theme.color.dark.default) },
+		{ type: 'success', color: initTheme.theme.color.functional.success, hex: getHexFunc(initTheme.theme.color.functional.success) },
+		{ type: 'warning', color: initTheme.theme.color.functional.warning, hex: getHexFunc(initTheme.theme.color.functional.warning) },
+		{ type: 'error', color: initTheme.theme.color.functional.error, hex: getHexFunc(initTheme.theme.color.functional.error) },
+		{ type: 'info', color: initTheme.theme.color.functional.info, hex: getHexFunc(initTheme.theme.color.functional.info) }
 	]);
 	let currentColorObj = {
 		name: '',
@@ -67,25 +75,24 @@
 			extend: [{ color: '', alias: '' }]
 		}
 	};
-	let primaryColors: { hex: string; hsl: string; n: number; rgb: string }[] = $state([]);
-	let darkColors: { hex: string; hsl: string; n: number; rgb: string }[] = $state([]);
+	let primaryColors: { hex: string; hsl: string; n: number; rgb: string; oklch: string }[] = $state([]);
+	let darkColors: { hex: string; hsl: string; n: number; rgb: string; oklch: string }[] = $state([]);
 	let themeBlack = $state({
-		primary: { hex: '', hsl: '', rgb: '' },
-		dark: { hex: '', hsl: '', rgb: '' }
+		primary: { hex: '', hsl: '', rgb: '', oklch: '' },
+		dark: { hex: '', hsl: '', rgb: '', oklch: '' }
 	});
 	let themeWhite = $state({
-		primary: { hex: '', hsl: '', rgb: '' },
-		dark: { hex: '', hsl: '', rgb: '' }
+		primary: { hex: '', hsl: '', rgb: '', oklch: '' },
+		dark: { hex: '', hsl: '', rgb: '', oklch: '' }
 	});
 	let stateColor = $state({ success: '', warning: '', error: '', info: '' });
-	let extendList: { color: string; alias: string }[] = $state(initTheme.theme.color.extend);
+	let extendList: { color: string; alias: string; hex: string }[] = $state(initTheme.theme.color.extend);
+
 	let name = $state(initTheme.name);
 	let showCopyTip = $state(false);
 	let showCopyTip2 = $state(false);
-	let extendListStr;
-	$effect(() => {
-		extendListStr = extendListStrFunc(extendList);
-	});
+	let extendListStr = $derived(extendListStrFunc(extendList));
+
 	let extendListStr2 = $derived(extendListStrFunc2(extendList));
 
 	let configStr = $derived(
@@ -94,40 +101,40 @@
 name: '${name}',
 color: {
 	primary: {
-		50: '${hexToRgb(primaryColors[0].hex)}', // ${primaryColors[0].hex} ${primaryColors[0].hsl}
-		100: '${hexToRgb(primaryColors[1].hex)}', // ${primaryColors[1].hex} ${primaryColors[1].hsl}
-		200: '${hexToRgb(primaryColors[2].hex)}', // ${primaryColors[2].hex} ${primaryColors[2].hsl}
-		300: '${hexToRgb(primaryColors[3].hex)}', // ${primaryColors[3].hex} ${primaryColors[3].hsl}
-		400: '${hexToRgb(primaryColors[4].hex)}', // ${primaryColors[4].hex} ${primaryColors[4].hsl}
-		500: '${hexToRgb(primaryColors[5].hex)}', // ${primaryColors[5].hex} ${primaryColors[5].hsl}
-		default: '${hexToRgb(primaryColors[6].hex)}', // ${primaryColors[6].hex} ${primaryColors[6].hsl}
-		700: '${hexToRgb(primaryColors[7].hex)}', // ${primaryColors[7].hex} ${primaryColors[7].hsl}
-		800: '${hexToRgb(primaryColors[8].hex)}', // ${primaryColors[8].hex} ${primaryColors[8].hsl}
-		900: '${hexToRgb(primaryColors[9].hex)}', // ${primaryColors[9].hex} ${primaryColors[9].hsl}
-		950: '${hexToRgb(primaryColors[10].hex)}', // ${primaryColors[10].hex} ${primaryColors[10].hsl}
+		50: '${primaryColors[0].oklch}', // ${primaryColors[0].hex} ${primaryColors[0].hsl}
+		100: '${primaryColors[1].oklch}', // ${primaryColors[1].hex} ${primaryColors[1].hsl}
+		200: '${primaryColors[2].oklch}', // ${primaryColors[2].hex} ${primaryColors[2].hsl}
+		300: '${primaryColors[3].oklch}', // ${primaryColors[3].hex} ${primaryColors[3].hsl}
+		400: '${primaryColors[4].oklch}', // ${primaryColors[4].hex} ${primaryColors[4].hsl}
+		500: '${primaryColors[5].oklch}', // ${primaryColors[5].hex} ${primaryColors[5].hsl}
+		default: '${primaryColors[6].oklch}', // ${primaryColors[6].hex} ${primaryColors[6].hsl}
+		700: '${primaryColors[7].oklch}', // ${primaryColors[7].hex} ${primaryColors[7].hsl}
+		800: '${primaryColors[8].oklch}', // ${primaryColors[8].hex} ${primaryColors[8].hsl}
+		900: '${primaryColors[9].oklch}', // ${primaryColors[9].hex} ${primaryColors[9].hsl}
+		950: '${primaryColors[10].oklch}', // ${primaryColors[10].hex} ${primaryColors[10].hsl}
 	},
 	dark: {
-		50: '${hexToRgb(darkColors[0].hex)}', // ${darkColors[0].hex} ${darkColors[0].hsl}
-		100: '${hexToRgb(darkColors[1].hex)}', // ${darkColors[1].hex} ${darkColors[1].hsl}
-		200: '${hexToRgb(darkColors[2].hex)}', // ${darkColors[2].hex} ${darkColors[2].hsl}
-		300: '${hexToRgb(darkColors[3].hex)}', // ${darkColors[3].hex} ${darkColors[3].hsl}
-		400: '${hexToRgb(darkColors[4].hex)}', // ${darkColors[4].hex} ${darkColors[4].hsl}
-		500: '${hexToRgb(darkColors[5].hex)}', // ${darkColors[5].hex} ${darkColors[5].hsl}
-		default: '${hexToRgb(darkColors[6].hex)}', // ${darkColors[6].hex} ${darkColors[6].hsl}
-		700: '${hexToRgb(darkColors[7].hex)}', // ${darkColors[7].hex} ${darkColors[7].hsl}
-		800: '${hexToRgb(darkColors[8].hex)}', // ${darkColors[8].hex} ${darkColors[8].hsl}
-		900: '${hexToRgb(darkColors[9].hex)}', // ${darkColors[9].hex} ${darkColors[9].hsl}
-		950: '${hexToRgb(darkColors[10].hex)}', // ${darkColors[10].hex} ${darkColors[10].hsl}
+		50: '${darkColors[0].oklch}', // ${darkColors[0].hex} ${darkColors[0].hsl}
+		100: '${darkColors[1].oklch}', // ${darkColors[1].hex} ${darkColors[1].hsl}
+		200: '${darkColors[2].oklch}', // ${darkColors[2].hex} ${darkColors[2].hsl}
+		300: '${darkColors[3].oklch}', // ${darkColors[3].hex} ${darkColors[3].hsl}
+		400: '${darkColors[4].oklch}', // ${darkColors[4].hex} ${darkColors[4].hsl}
+		500: '${darkColors[5].oklch}', // ${darkColors[5].hex} ${darkColors[5].hsl}
+		default: '${darkColors[6].oklch}', // ${darkColors[6].hex} ${darkColors[6].hsl}
+		700: '${darkColors[7].oklch}', // ${darkColors[7].hex} ${darkColors[7].hsl}
+		800: '${darkColors[8].oklch}', // ${darkColors[8].hex} ${darkColors[8].hsl}
+		900: '${darkColors[9].oklch}', // ${darkColors[9].hex} ${darkColors[9].hsl}
+		950: '${darkColors[10].oklch}', // ${darkColors[10].hex} ${darkColors[10].hsl}
 	},
-	primaryBlack: '${hexToRgb(themeBlack.primary.hex)}', // ${themeBlack.primary.hex} ${themeBlack.primary.hsl}
-	primaryWhite: '${hexToRgb(themeWhite.primary.hex)}', // ${themeWhite.primary.hex} ${themeWhite.primary.hsl}
-	darkBlack: '${hexToRgb(themeBlack.dark.hex)}', // ${themeBlack.dark.hex} ${themeBlack.dark.hsl}
-	darkWhite: '${hexToRgb(themeWhite.dark.hex)}', // ${themeWhite.dark.hex} ${themeWhite.dark.hsl}
+	primaryBlack: '${getOklchFunc(themeBlack.primary.hex)}', // ${themeBlack.primary.hex} ${themeBlack.primary.hsl}
+	primaryWhite: '${getOklchFunc(themeWhite.primary.hex)}', // ${themeWhite.primary.hex} ${themeWhite.primary.hsl}
+	darkBlack: '${getOklchFunc(themeBlack.dark.hex)}', // ${themeBlack.dark.hex} ${themeBlack.dark.hsl}
+	darkWhite: '${getOklchFunc(themeWhite.dark.hex)}', // ${themeWhite.dark.hex} ${themeWhite.dark.hsl}
 	functional: {
-		success: '${hexToRgb(stateColor.success)}', // ${stateColor.success} ${colorConvertFunc(stateColor.success).hsl}
-		warning: '${hexToRgb(stateColor.warning)}', // ${stateColor.warning} ${colorConvertFunc(stateColor.warning).hsl}
-		error: '${hexToRgb(stateColor.error)}', // ${stateColor.error} ${colorConvertFunc(stateColor.error).hsl}
-		info: '${hexToRgb(stateColor.info)}', // ${stateColor.info} ${colorConvertFunc(stateColor.info).hsl}
+		success: '${getOklchFunc(stateColor.success)}', // ${stateColor.success} ${colorConvertFunc(stateColor.success).hsl}
+		warning: '${getOklchFunc(stateColor.warning)}', // ${stateColor.warning} ${colorConvertFunc(stateColor.warning).hsl}
+		error: '${getOklchFunc(stateColor.error)}', // ${stateColor.error} ${colorConvertFunc(stateColor.error).hsl}
+		info: '${getOklchFunc(stateColor.info)}', // ${stateColor.info} ${colorConvertFunc(stateColor.info).hsl}
 	},
 	extend: [
 	${extendListStr}
@@ -139,38 +146,60 @@ color: {
 
 	let configStr2 = $derived(
 		hljs.highlight(
-			`/* ${isZh ? '初始 CSS 变量' : 'Initial CSS variables'} */
---theme-color-primary-50: ${hexToRgb(primaryColors[0].hex)};
---theme-color-primary-100: ${hexToRgb(primaryColors[1].hex)};
---theme-color-primary-200: ${hexToRgb(primaryColors[2].hex)};
---theme-color-primary-300: ${hexToRgb(primaryColors[3].hex)};
---theme-color-primary-400: ${hexToRgb(primaryColors[4].hex)};
---theme-color-primary-500: ${hexToRgb(primaryColors[5].hex)};
---theme-color-primary: ${hexToRgb(primaryColors[6].hex)};
---theme-color-primary-700: ${hexToRgb(primaryColors[7].hex)};
---theme-color-primary-800: ${hexToRgb(primaryColors[8].hex)};
---theme-color-primary-900: ${hexToRgb(primaryColors[9].hex)};
---theme-color-primary-950: ${hexToRgb(primaryColors[10].hex)};
---theme-color-dark-50: ${hexToRgb(darkColors[0].hex)};
---theme-color-dark-100: ${hexToRgb(darkColors[1].hex)};
---theme-color-dark-200: ${hexToRgb(darkColors[2].hex)};
---theme-color-dark-300: ${hexToRgb(darkColors[3].hex)};
---theme-color-dark-400: ${hexToRgb(darkColors[4].hex)};
---theme-color-dark-500: ${hexToRgb(darkColors[5].hex)};
---theme-color-dark: ${hexToRgb(darkColors[6].hex)};
---theme-color-dark-700: ${hexToRgb(darkColors[7].hex)};
---theme-color-dark-800: ${hexToRgb(darkColors[8].hex)};
---theme-color-dark-900: ${hexToRgb(darkColors[9].hex)};
---theme-color-dark-950: ${hexToRgb(darkColors[10].hex)};
---theme-color-primaryBlack: ${hexToRgb(themeBlack.primary.hex)};
---theme-color-primaryWhite: ${hexToRgb(themeWhite.primary.hex)};
---theme-color-darkBlack: ${hexToRgb(themeBlack.dark.hex)};
---theme-color-darkWhite: ${hexToRgb(themeWhite.dark.hex)};
---theme-color-functional-success: ${hexToRgb(stateColor.success)};
---theme-color-functional-warning: ${hexToRgb(stateColor.warning)};
---theme-color-functional-error: ${hexToRgb(stateColor.error)};
---theme-color-functional-info: ${hexToRgb(stateColor.info)};
-${extendListStr2}`,
+			`/* ${isZh ? '初始主题 CSS 变量' : 'Initial theme CSS variables'} */
+@theme {
+	--color-primary-50: ${primaryColors[0].oklch};
+	--color-primary-100: ${primaryColors[1].oklch};
+	--color-primary-200: ${primaryColors[2].oklch};
+	--color-primary-300: ${primaryColors[3].oklch};
+	--color-primary-400: ${primaryColors[4].oklch};
+	--color-primary-500: ${primaryColors[5].oklch};
+	--color-primary: ${primaryColors[6].oklch};
+	--color-primary-700: ${primaryColors[7].oklch};
+	--color-primary-800: ${primaryColors[8].oklch};
+	--color-primary-900: ${primaryColors[9].oklch};
+	--color-primary-950: ${primaryColors[10].oklch};
+
+	--color-dark-50: ${darkColors[0].oklch};
+	--color-dark-100: ${darkColors[1].oklch};
+	--color-dark-200: ${darkColors[2].oklch};
+	--color-dark-300: ${darkColors[3].oklch};
+	--color-dark-400: ${darkColors[4].oklch};
+	--color-dark-500: ${darkColors[5].oklch};
+	--color-dark: ${darkColors[6].oklch};
+	--color-dark-700: ${darkColors[7].oklch};
+	--color-dark-800: ${darkColors[8].oklch};
+	--color-dark-900: ${darkColors[9].oklch};
+	--color-dark-950: ${darkColors[10].oklch};
+
+	--color-primaryBlack: ${getOklchFunc(themeBlack.primary.hex)};
+	--color-primaryWhite: ${getOklchFunc(themeWhite.primary.hex)};
+	--color-darkBlack: ${getOklchFunc(themeBlack.dark.hex)};
+	--color-darkWhite: ${getOklchFunc(themeWhite.dark.hex)};
+
+	--color-success: ${getOklchFunc(stateColor.success)};
+	--color-warning: ${getOklchFunc(stateColor.warning)};
+	--color-error: ${getOklchFunc(stateColor.error)};
+	--color-info: ${getOklchFunc(stateColor.info)};
+	
+${extendListStr2}
+
+	--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;
+}
+`,
 			{ language: 'css', ignoreIllegals: true }
 		).value
 	);
@@ -183,35 +212,33 @@ ${extendListStr2}`,
 				console.error('颜色列表长度必须为 11');
 				return;
 			}
-			const colorArr: { hex: string; hsl: string; n: number; rgb: string }[] = [];
+			const colorArr: { hex: string; hsl: string; n: number; rgb: string; oklch: string }[] = [];
 			colorList.forEach((item, index) => {
 				// 第 0 项和最后一项的 key 为 50 和 950，其他项为 100-900，颜色有 hex、rgb、hsl 三种格式，注意 hsl 保留整数
-				let colorObj: { hex: string; hsl: string; n: number; rgb: string } = {
-					hex: '',
-					hsl: '',
-					n: 0,
-					rgb: ''
-				};
+				let colorObj: { hex: string; hsl: string; n: number; rgb: string; oklch: string } = { hex: '', hsl: '', n: 0, rgb: '', oklch: '' };
 				if (index === 0) {
 					colorObj = {
 						n: 50,
 						hex: item,
 						rgb: colorConvertFunc(item).rgb,
-						hsl: colorConvertFunc(item).hsl
+						hsl: colorConvertFunc(item).hsl,
+						oklch: colorConvertFunc(item).oklch
 					};
 				} else if (index === 10) {
 					colorObj = {
 						n: 950,
 						hex: item,
 						rgb: colorConvertFunc(item).rgb,
-						hsl: colorConvertFunc(item).hsl
+						hsl: colorConvertFunc(item).hsl,
+						oklch: colorConvertFunc(item).oklch
 					};
 				} else {
 					colorObj = {
 						n: 100 * index,
 						hex: item,
 						rgb: colorConvertFunc(item).rgb,
-						hsl: colorConvertFunc(item).hsl
+						hsl: colorConvertFunc(item).hsl,
+						oklch: colorConvertFunc(item).oklch
 					};
 				}
 				colorArr.push(colorObj);
@@ -225,6 +252,7 @@ ${extendListStr2}`,
 			hsl: string;
 			n: number;
 			rgb: string;
+			oklch: string;
 		}[];
 
 		darkColors = createTWColorFunc(darkColorList) as {
@@ -232,6 +260,7 @@ ${extendListStr2}`,
 			hsl: string;
 			n: number;
 			rgb: string;
+			oklch: string;
 		}[];
 
 		// 根据主题色生成主题黑和白
@@ -275,7 +304,8 @@ ${extendListStr2}`,
 		const newColors = [...colors];
 		const item = newColors.find((item) => item.type === type);
 		if (item) {
-			item.color = colorValue;
+			item.color = colorValue.indexOf('#') === 0 ? colorValue : getOklchFunc(colorValue);
+			item.hex = colorValue.indexOf('#') === 0 ? colorValue : getHexFunc(colorValue);
 		}
 		colors = newColors;
 		if (type === 'primary') {
@@ -323,18 +353,21 @@ ${extendListStr2}`,
 		newColors.forEach((item) => {
 			if (item.type === 'primary') {
 				item.color = currentColorObj.color.primary.default;
+				item.hex = getHexFunc(currentColorObj.color.primary.default);
 			} else if (item.type === 'dark') {
 				item.color = currentColorObj.color.dark.default;
+				item.hex = getHexFunc(currentColorObj.color.dark.default);
 			} else {
 				// 确保 item.type 是 functional 对象中的有效键
 				if (item.type in currentColorObj.color.functional) {
 					item.color = currentColorObj.color.functional[item.type as keyof typeof currentColorObj.color.functional];
+					item.hex = getHexFunc(currentColorObj.color.functional[item.type as keyof typeof currentColorObj.color.functional]);
 				}
 			}
 		});
 		colors = newColors;
 		name = currentColorObj.name;
-		extendList = currentColorObj.color.extend;
+		extendList = currentColorObj.color.extend.map((item) => ({ ...item, hex: getHexFunc(item.color) }));
 	});
 	// svelte 组件销毁时取消订阅
 	onDestroy(() => {
@@ -351,6 +384,8 @@ ${extendListStr2}`,
 		];
 		name = `${randomDarkColor.name}/${randomLightColor.name}`;
 		// 根据随机颜色生成主题
+		console.log(111, randomDarkColor);
+
 		changeFunc('primary', null, randomDarkColor.hex);
 		changeFunc('dark', null, randomLightColor.hex);
 		// 获取当前 extendList 的长度
@@ -362,10 +397,9 @@ ${extendListStr2}`,
 			.slice(0, extendListLength);
 		let newExtendList = [];
 		newExtendList = randomExtendList.map((item) => {
-			return { color: item.hex, alias: item.name };
+			return { color: item.hex, alias: item.name, hex: getHexFunc(item.hex) };
 		});
 		extendList = newExtendList;
-		extendListStr = extendListStrFunc(extendList);
 	};
 	// 重置事件
 	const resetFunc = () => {
@@ -377,7 +411,6 @@ ${extendListStr2}`,
 		let newExtendList = [...extendList];
 		newExtendList.splice(i, 1);
 		extendList = newExtendList;
-		extendListStr = extendListStrFunc(extendList);
 	};
 	// 选择 extendList 的颜色
 	const changeExtendFunc = (e: Event, i: number) => {
@@ -385,7 +418,6 @@ ${extendListStr2}`,
 		let newExtendList = [...extendList];
 		newExtendList[i].color = colorValue;
 		extendList = newExtendList;
-		extendListStr = extendListStrFunc(extendList);
 	};
 	// 输入 extendList 的别名
 	const inputExtendFunc = (e: Event, i: number) => {
@@ -393,14 +425,12 @@ ${extendListStr2}`,
 		let newExtendList = [...extendList];
 		newExtendList[i].alias = aliasValue;
 		extendList = newExtendList;
-		extendListStr = extendListStrFunc(extendList);
 	};
 	// 新增扩展色
 	const addExtendFunc = () => {
 		let newExtendList = [...extendList];
-		newExtendList.push({ color: '#000000', alias: '' });
+		newExtendList.push({ color: '#000000', alias: '', hex: getHexFunc('#000000') });
 		extendList = newExtendList;
-		extendListStr = extendListStrFunc(extendList);
 	};
 	// 监听窗口变化
 	const windowResizeFun = () => {
@@ -457,7 +487,7 @@ ${extendListStr2}`,
 			<div class="text-left">{isZh ? '主题名称' : 'Theme name'}</div>
 			<div class="flex-1">
 				<input
-					class="w-full rounded-sm bg-transparent px-1 py-1 text-sm outline outline-1 outline-black/10 focus:outline-none focus:outline-primary dark:outline-white/20 dark:focus:outline-dark"
+					class="focus:outline-primary dark:focus:outline-dark rounded-xs focus:outline-hidden w-full bg-transparent px-1 py-1 text-sm outline outline-black/10 dark:outline-white/20"
 					type="text"
 					bind:value={name}
 					placeholder={isZh ? '请输入主题名称' : 'Please enter theme name'}
@@ -466,44 +496,45 @@ ${extendListStr2}`,
 		</div>
 		<div class="mt-4 flex gap-2">
 			<div class="flex flex-col gap-4 text-center">
-				<!-- 输入框 -->
+				<!-- 输入框 主题色与功能色 -->
 				{#each colors as item, i}
-					<div class="flex justify-end gap-2 {i === 2 ? 'mt-6' : 'mt-0'} relative">
-						<div class="flex-1 text-right">{item.type}</div>
-						<input
-							type="color"
-							bind:value={item.color}
-							oninput={(e) => throttle(() => changeFunc(item.type, e, item.color), 100)()}
-							class="h-6 w-6 flex-none cursor-pointer"
-							style="background-color: {item.color};"
-							onclick={() => (showTip = false)}
-						/>
-						<div class="w-20 flex-none overflow-hidden text-left text-sm leading-6">
-							{item.color}
+					<div class="{i === 2 ? 'mt-6' : 'mt-0'} relative">
+						<!-- <div class="mb-1 text-left text-xs">{getOklchFunc(item.color)}</div> -->
+						<div class="flex items-center gap-2">
+							<input
+								type="color"
+								bind:value={item.hex}
+								oninput={(e) => throttle(() => changeFunc(item.type, e, item.color), 100)()}
+								class="h-6 w-6 flex-none cursor-pointer"
+								style="background-color: {item.color};"
+								onclick={() => (showTip = false)}
+							/>
+							<span>{item.type}</span>
 						</div>
 						{#if i === 0 && showTip}
-							<div class="pointer-events-none absolute right-[4.4rem] rotate-[135deg]">
+							<div class="pointer-events-none absolute left-2 top-0 rotate-[135deg]">
 								<div class="animate-bounce text-3xl">👇</div>
 							</div>
 						{/if}
 					</div>
 				{/each}
-				<div class="mt-6 flex flex-col gap-4 overflow-y-auto p-1" style="height: {windowHeight - 480}px;">
+				<!-- 扩展色 -->
+				<div class="mt-6 flex flex-col gap-4 overflow-y-auto" style="height: {windowHeight - 480}px;">
 					{#each extendList as item, i}
 						<div class="flex flex-col gap-2">
-							<div class="flex justify-end gap-2">
-								<div class="flex-1 text-right">extend{i}</div>
+							<div class="flex gap-2">
 								<input
 									type="color"
-									bind:value={item.color}
-									class="h-6 w-6 flex-none"
+									bind:value={item.hex}
+									class="h-6 w-6"
 									style="background-color: {item.color};"
-									oninput={(e) => throttle(() => changeExtendFunc(e, i))}
+									oninput={(e) => throttle(() => changeExtendFunc(e, i), 100)()}
 								/>
-								<div class="w-16 flex-none overflow-hidden text-left text-sm leading-6">
+								<div>extend{i}</div>
+								<!-- <div class="w-16 flex-none overflow-hidden text-left text-sm leading-6">
 									{item.color}
-								</div>
-								<button aria-label="delete" class="rounded bg-black/5 px-1 dark:bg-white/10" onclick={() => deleteFunc(i)}>
+								</div> -->
+								<button aria-label="delete" class="rounded-sm bg-black/5 px-1 dark:bg-white/10" onclick={() => deleteFunc(i)}>
 									<svg class="h-4 w-6 transition-all hover:scale-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 										<path
 											class="fill-error"
@@ -513,9 +544,9 @@ ${extendListStr2}`,
 									</svg>
 								</button>
 							</div>
-							<div class="flex">
+							<div class="flex px-0.5">
 								<input
-									class="h-6 w-full rounded-sm bg-transparent px-1 py-1 text-xs outline outline-1 outline-black/10 focus:outline-none focus:outline-primary dark:outline-white/20 dark:focus:outline-dark"
+									class="focus:outline-primary dark:focus:outline-dark rounded-xs focus:outline-hidden h-6 w-full bg-transparent px-1 py-1 text-xs outline outline-black/10 dark:outline-white/20"
 									type="text"
 									bind:value={item.alias}
 									placeholder={isZh ? `请输入 extend${i} 别名` : `Please enter extend${i} alias`}
@@ -526,7 +557,7 @@ ${extendListStr2}`,
 					{/each}
 					<div>
 						<button
-							class="items-centers flex w-full justify-center gap-2 rounded border border-primary py-1.5 text-sm text-black dark:border-dark dark:text-white"
+							class="items-centers border-primary dark:border-dark flex w-full justify-center gap-2 rounded-sm border py-1.5 text-sm text-black dark:text-white"
 							onclick={addExtendFunc}
 						>
 							<span>
@@ -547,8 +578,8 @@ ${extendListStr2}`,
 			<div class="mb-1 flex flex-1 justify-between gap-1">
 				{#each primaryColors as color, index}
 					<div
-						class="h-12 rounded {index >= 5 ? 'text-primaryWhite' : 'text-primaryBlack'}"
-						style="background-color: {color.hex};flex: {index === 6 ? '2' : '1'}"
+						class="h-12 rounded-sm {index >= 5 ? 'text-primaryWhite' : 'text-primaryBlack'}"
+						style="background-color: {color.oklch};flex: {index === 6 ? '2' : '1'}"
 					>
 						<div class="flex flex-col items-center justify-between">
 							<div class="flex-1 leading-10 mt-1{index === 6 ? ' text-xl font-bold' : ''}">
@@ -561,8 +592,8 @@ ${extendListStr2}`,
 			<div class="flex flex-1 justify-between gap-1">
 				{#each darkColors as color, index}
 					<div
-						class="h-12 rounded {index <= 6 ? 'text-darkBlack' : 'text-darkWhite'}"
-						style="background-color: {color.hex};flex: {index === 6 ? '2' : '1'};"
+						class="h-12 rounded-sm {index <= 6 ? 'text-darkBlack' : 'text-darkWhite'}"
+						style="background-color: {color.oklch};flex: {index === 6 ? '2' : '1'};"
 					>
 						<div class="flex items-center justify-between">
 							<div class="flex-1 leading-10 mt-1{index === 6 ? ' text-xl font-bold' : ''}">
@@ -576,8 +607,8 @@ ${extendListStr2}`,
 		<div class="mt-1 flex justify-between gap-1 px-4 text-center text-xs">
 			{#each [themeBlack.primary, themeBlack.dark, themeWhite.primary, themeWhite.dark] as item, i}
 				<div
-					class="h-12 flex-1 rounded border pt-4 {i === 0 || i === 1 ? 'border-gray-700 text-white' : 'border-gray-300 text-black'}"
-					style="background-color: {item.hex};"
+					class="h-12 flex-1 rounded-sm border pt-4 {i === 0 || i === 1 ? 'border-gray-700 text-white' : 'border-gray-300 text-black'}"
+					style="background-color: {item.oklch};"
 				>
 					<div>
 						{i === 0 ? 'primaryBlack' : i === 1 ? 'darkBlack' : i === 2 ? 'primaryWhite' : 'darkWhite'}
@@ -587,16 +618,16 @@ ${extendListStr2}`,
 		</div>
 		<!-- 功能色 -->
 		<div class="mt-1 flex justify-between gap-1 px-4 text-center text-xs text-white">
-			<div class="h-12 flex-1 rounded pt-4" style="background-color: {stateColor.success};">success</div>
-			<div class="h-12 flex-1 rounded pt-4" style="background-color: {stateColor.warning};">warning</div>
-			<div class="h-12 flex-1 rounded pt-4" style="background-color: {stateColor.error};">error</div>
-			<div class="h-12 flex-1 rounded pt-4" style="background-color: {stateColor.info};">info</div>
+			<div class="h-12 flex-1 rounded-sm pt-4" style="background-color: {stateColor.success};">success</div>
+			<div class="h-12 flex-1 rounded-sm pt-4" style="background-color: {stateColor.warning};">warning</div>
+			<div class="h-12 flex-1 rounded-sm pt-4" style="background-color: {stateColor.error};">error</div>
+			<div class="h-12 flex-1 rounded-sm pt-4" style="background-color: {stateColor.info};">info</div>
 		</div>
 		<!-- 扩展色 -->
 		<div class="mt-1 flex h-12 justify-between gap-1 px-4 text-center text-xs text-white">
 			{#if extendList}
 				{#each extendList as item, i}
-					<div class="flex h-12 flex-1 flex-col justify-center gap-1 rounded py-1" style="background-color: {item.color};">
+					<div class="flex h-12 flex-1 flex-col justify-center gap-1 rounded-sm py-1" style="background-color: {item.color};">
 						<div class="text-xs">extend{i}</div>
 						<div>{item.alias}</div>
 					</div>
@@ -604,17 +635,17 @@ ${extendListStr2}`,
 			{/if}
 		</div>
 		<!-- 配置文件 -->
-		<div class="mx-4 mt-1 flex" style="height:{windowHeight - 388}px;width:{windowWidth - 858}px">
+		<div class="mx-4 mt-1 flex" style="height:{windowHeight - 388}px;width:{windowWidth - 858 + 46}px">
 			<div class="bg-codeLight dark:bg-codeDark relative mr-1 grow">
-				<div class="overflow-auto rounded" style="height:{windowHeight - 388}px;width:{((windowWidth - 858) / 5) * 3 - 6}px">
-					<article class="prose max-w-none text-xs dark:prose-invert">
+				<div class="overflow-auto rounded-sm" style="height:{windowHeight - 388}px;width:{((windowWidth - 858) / 5) * 3 - 6 + 46}px">
+					<article class="prose dark:prose-invert max-w-none text-xs">
 						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 						<pre><code class="hljs" id="myCodeBlock">{@html configStr}</code></pre>
 					</article>
 				</div>
 				<button
 					aria-label="copy"
-					class="absolute right-0 top-0 rounded-bl bg-black/5 px-3 py-2 text-sm hover:opacity-80 dark:bg-white/10"
+					class="absolute right-0 top-0 rounded-bl-sm bg-black/5 px-3 py-2 text-sm hover:opacity-80 dark:bg-white/10"
 					id="copyButton"
 				>
 					<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -631,15 +662,15 @@ ${extendListStr2}`,
 				{/if}
 			</div>
 			<div class="bg-codeLight dark:bg-codeDark relative grow">
-				<div class="overflow-auto rounded" style="height:{windowHeight - 388}px;width:{((windowWidth - 858) / 5) * 2 + 4}px">
-					<article class="prose max-w-none text-xs dark:prose-invert">
+				<div class="overflow-auto rounded-sm" style="height:{windowHeight - 388}px;width:{((windowWidth - 858) / 5) * 2 + 4}px">
+					<article class="prose dark:prose-invert max-w-none text-xs">
 						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 						<pre><code class="hljs" id="myCodeBlock2">{@html configStr2}</code></pre>
 					</article>
 				</div>
 				<button
 					aria-label="copy"
-					class="absolute right-0 top-0 rounded-bl bg-black/5 px-3 py-2 text-sm hover:opacity-80 dark:bg-white/10"
+					class="absolute right-0 top-0 rounded-bl-sm bg-black/5 px-3 py-2 text-sm hover:opacity-80 dark:bg-white/10"
 					id="copyButton2"
 				>
 					<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -662,13 +693,13 @@ ${extendListStr2}`,
 			<div class="flex w-full justify-between pb-2">
 				<div>
 					<button
-						class="rounded bg-primary px-4 py-2 text-xs text-white hover:opacity-90 dark:bg-dark dark:text-black"
+						class="bg-primary dark:bg-dark rounded-sm px-4 py-2 text-xs text-white hover:opacity-90 dark:text-black"
 						onclick={randomFunc}
 					>
 						{isZh ? '随机主题' : 'Random theme'}
 					</button>
 					<button
-						class="ml-2 rounded border border-primary px-4 py-2 text-xs text-black hover:opacity-90 dark:border-dark dark:text-white"
+						class="border-primary dark:border-dark ml-2 rounded-sm border px-4 py-2 text-xs text-black hover:opacity-90 dark:text-white"
 						onclick={resetFunc}
 					>
 						{isZh ? '重置' : 'Reset'}
@@ -679,7 +710,7 @@ ${extendListStr2}`,
 				</div>
 			</div>
 			<div
-				class="h-96 w-[392px] overflow-auto border border-primary/20 bg-primaryWhite dark:border-dark/20 dark:border-gray-700 dark:bg-darkBlack"
+				class="border-primary/20 bg-primaryWhite dark:border-dark/20 dark:bg-darkBlack h-96 w-[392px] overflow-auto border dark:border-gray-700"
 				style="height:{windowHeight - 130}px"
 			>
 				<GeneratorPreview />

docs/site/src/routes/guide/generator/Calendar.svelte

@@ -59,7 +59,7 @@
 	// 圆角风格样式
 	// Rounded style style
 	const radiusClass = {
-		base: 'rounded',
+		sm: 'rounded-sm',
 		xl: 'rounded-xl',
 		'2xl': 'rounded-2xl',
 		none: 'rounded-none'
@@ -268,13 +268,13 @@
 								mode === 'range' &&
 								(selectedDateStr.indexOf(`${item.year}${item.month}${i.text}`) === selectedDateStr.length - 8 || i.end)}
 							class:!rounded-none={radius === 'none' && mode !== 'range'}
-							class:!rounded-l={radius === 'base' &&
+							class:!rounded-l-sm={radius === 'sm' &&
 								mode === 'range' &&
 								(selectedDateStr.indexOf(`${item.year}${item.month}${i.text}`) === 0 || i.start)}
-							class:!rounded-r={radius === 'base' &&
+							class:!rounded-r-sm={radius === 'sm' &&
 								mode === 'range' &&
 								(selectedDateStr.indexOf(`${item.year}${item.month}${i.text}`) === selectedDateStr.length - 8 || i.end)}
-							class:!rounded={radius === 'base' && mode !== 'range'}
+							class:!rounded-sm={radius === 'sm' && mode !== 'range'}
 						>
 							<div
 								class="{radiusClass[radius as keyof typeof radiusClass] ||

docs/site/src/utils/index.ts

@@ -1,4 +1,5 @@
 import Color from 'color';
+import { oklch, parse, formatHex } from 'culori';
 import codeGroupSvgData from './code-group-svg-data';
 import hljs from 'highlight.js';
 // @ts-expect-error - highlightjs-svelte 缺少类型定义
@@ -104,7 +105,7 @@ export const mdTextToHljs = (mdText: string) => {
 };
 
 /**
- * 传入解析出来的 md 文档字符，找到其中  ::: code-group ���  ::: 之间的代码块，并将其分组，实现代码块的 tab 分组显示，
+ * 传入解析出来的 md 文档字符，找到其中  ::: code-group 与  ::: 之间的代码块，并将其分组，实现代码块的 tab 分组显示，
  * 其中 label 标签中的内容为 tab 标签的标题，并在文字前面增加一个 icon 标签，icon 标签的 class 内容为 iconfont 的类名
  * @param {string} md - 解析出来的 md 文档字符
  * @returns {string} - 返回处理后的 md 文档字符
@@ -150,7 +151,7 @@ export const groupIconMdPlugin = (md: string) => {
 			arr.push({ label, code });
 		});
 		return `
-			<section class="flex flex-row flex-wrap bg-black/5 dark:bg-[#202020] rounded mb-4">
+			<section class="flex flex-row flex-wrap bg-black/5 dark:bg-[#202020] rounded-sm mb-4">
 				${arr.map((item) => item.label).join('')}
 				${arr.map((item) => item.code).join('')}
 			</section>
@@ -214,9 +215,49 @@ export const delParamsUrl = (url: string, name: string) => {
 	}
 };
 
+/**
+ * 传入 hex 格式的颜色值，将其转换成 oklch 格式，oklch(l c h),其中 lch 为 0-1 之间的值，保留三位小数
+ * @param {string} str - 颜色值
+ * @returns {string} - 返回 oklch 格式的颜色值
+ * @example
+ * getOklchFunc('#000') // 'oklch(0 0 0)'
+ */
+export const getOklchFunc = (str: string) => {
+	const l = oklch(parse(str))?.l || 0;
+	const c = oklch(parse(str))?.c || 0;
+	const h = oklch(parse(str))?.h || 0;
+	return `oklch(${parseFloat(l.toFixed(3))} ${parseFloat(c.toFixed(3))} ${parseFloat(h.toFixed(3))})`;
+};
+
+/**
+ * 传入 oklch 格式色值，将其转为成 hex 格式
+ * @param {string} str - 颜色值
+ * @returns {string} - 返回 hex 格式的颜色值
+ * @example
+ * getHexFunc('oklch(0 0 0)') // '#000000'
+ */
+export const getHexFunc = (oklchString: string) => {
+	// 解析字符串，提取 l, c, h 值
+	const match = oklchString.match(/oklch\(([\d.]+)\s+([\d.]+)\s+([\d.]+)\)/);
+	if (match) {
+		const [_, l, c, h] = match.map(Number); // 转换为数字
+		// 创建 OKLCH 对象
+		const oklchColor = { mode: 'oklch' as const, l, c, h };
+		// 转换为 HEX
+		const hexColor = formatHex(oklchColor);
+		return hexColor;
+	} else {
+		return oklchString;
+	}
+};
+
 const formats = ['hex', 'rgb', 'hsl'];
 /**
  * 获取颜色格式
+ * @param {string} format - 颜色格式
+ * @returns {string} - 返回颜色格式
+ * @example
+ * getFormat('hex') // hex
  */
 const getFormat = (format: string) => {
 	if (!format || formats.indexOf(format) < 0) {
@@ -250,7 +291,7 @@ const getColorString = (color: Color, format: string) => {
  * @returns {string} - 返回颜色字符串
  */
 const colorPalette = (originColor: string, i: number, format: string) => {
-	const color = Color(originColor);
+	const color = Color(originColor.indexOf('#') > -1 ? originColor : getHexFunc(originColor));
 	const h = color.hue();
 	const s = color.saturationv();
 	const v = color.value();
@@ -338,13 +379,18 @@ export const generatePalette = (
 /**
  * 根据给定颜色计算出主题黑
  * @param {string} color - 颜色值 hex 格式
- * @return {object} - 返回两项主题黑，包含 hex、rgb、hsl 三种格式的颜色值
+ * @return {object} - 返回两项主题黑，包含 hex、rgb、hsl、oklch 四种格式的颜色值
  * @example
  * generateThemeBlack('#0B24FB')
  */
 export const generateThemeBlack = (color: string) => {
 	// 将 hex 颜色转换成 hsl 格式
-	const colorHsl = Color(color).hsl().round().string();
+	const colorHsl = Color(color.indexOf('#') > -1 ? color : getHexFunc(color))
+		.hsl()
+		.round()
+		.string();
+	
+
 	// 将 hsl 格式的颜色值转换成数组
 	const colorHslArr = colorHsl.split(',');
 	// 将 colorHslArr 的 s 和 l 值分别改为 95% 和 5% 生成主题黑
@@ -355,20 +401,25 @@ export const generateThemeBlack = (color: string) => {
 	// 将 hsl 格式的颜色值转换成 hex 格式和 rgb 格式
 	const blackHex = Color(blackHsl).hex();
 	const blackRgb = Color(blackHsl).rgb().round().string();
-	// 返回主题黑
-	return { hex: blackHex, rgb: blackRgb, hsl: blackHsl };
+	// 将 hex 格式转换成 oklch 格式
+	const colorOklch = getOklchFunc(blackHex);
+	// 返回颜色值
+	return { hex: blackHex, rgb: blackRgb, hsl: blackHsl, oklch: colorOklch };
 };
 
 /**
  * 根据给定颜色计算出主题白
  * @param {string} color - 颜色值 hex 格式
- * @return {object} - 返回两项主题白，包含 hex��rgb、hsl 三种格式的颜色值
+ * @return {object} - 返回两项主题白，包含 hex、rgb、hsl 三种格式的颜色值
  * @example
  * generateThemeWhite('#0B24FB')
  */
 export const generateThemeWhite = (color: string) => {
 	// 将 hex 颜色转换成 hsl 格式
-	const colorHsl = Color(color).hsl().round().string();
+	const colorHsl = Color(color.indexOf('#') > -1 ? color : getHexFunc(color))
+		.hsl()
+		.round()
+		.string();
 	// 将 hsl 格式的颜色值转换成数组
 	const colorHslArr = colorHsl.split(',');
 	// 将 colorHslArr 的 s 和 l 值分别改为 95% 和 5% 生成主题黑
@@ -380,15 +431,15 @@ export const generateThemeWhite = (color: string) => {
 	const whiteHex = Color(whiteHsl).hex();
 	const whiteRgb = Color(whiteHsl).rgb().round().string();
 	// 返回主题白
-	return { hex: whiteHex, rgb: whiteRgb, hsl: whiteHsl };
+	return { hex: whiteHex, rgb: whiteRgb, hsl: whiteHsl, oklch: getOklchFunc(whiteHex) };
 };
 
 /**
  * 颜色转换函数
  * @param {string} str - 颜色值
- * @returns {object} - 返回 hex、rgb、hsl 三种格式的颜色值
+ * @returns {object} - 返回 hex、rgb、hsl、oklch 四种格式的颜色值
  * @example
- * colorConvertFunc('#000') // {hex: '#000000', rgb: 'rgb(0,0,0)', hsl: {h: 0, s: 0, l: 0}}
+ * colorConvertFunc('#000') // {hex: '#000000', rgb: 'rgb(0,0,0)', hsl: {h: 0, s: 0, l: 0}, oklch: 'oklch(0 0 0)'}
  */
 export const colorConvertFunc = (str: string = '#000') => {
 	// 传入 hsl(222, 100%, 98%) 这种字符，将其中的数字四舍五入取整后返回字符
@@ -400,12 +451,14 @@ export const colorConvertFunc = (str: string = '#000') => {
 		return `hsl(${h}, ${s}%, ${l}%)`;
 	};
 
-	const colorObj = Color(str);
+	const colorObj = Color(str.indexOf('#') > -1 ? str : getHexFunc(str));
+
 	return {
 		hex: colorObj.hex(),
 		rgb: colorObj.rgb().string(),
 		hsl: getHslFunc(colorObj.hsl().string()),
-		rgbStr: colorObj.rgb().array().join(', ')
+		rgbStr: colorObj.rgb().array().join(', '),
+		oklch: getOklchFunc(colorObj.hex())
 	};
 };
 
@@ -414,8 +467,40 @@ export const colorConvertFunc = (str: string = '#000') => {
  * @param {string} str - 颜色值
  * @returns {string} - 返回 rgb 格式的颜色值
  * @example
- * hexToRgb('#000') // ‘0,0,0’
+ * hexToRgb('#000') // '0,0,0'
  */
 export const hexToRgb = (str: string) => {
 	return Color(str).rgb().array().join(', ');
 };
+
+/**
+ * 将传入的对象转为数组，且 default 在第 6 项
+ * @param {object} obj - 需要转换的对象
+ * @returns {array} - 返回转换后的数组
+ * @example
+ * colorObjToArr({ 50: '#50', 100: '#100', 200: '#200', 300: '#300', 400: '#400', 500: '#500', 700: '#700', 800: '#800', 900: '#900', default: '#000' })
+ * [{key: '50', value: '#50'}, {key: '100', value: '#100'}, {key: '200', value: '#200'}, {key: '300', value: '#300'}, {key: '400', value: '#400'}, {key: '500', value: '#500'},{key: 'default', value: '#000'},{key: '700', value: '#700'},{key: '800', value: '#800'},{key: '900', value: '#900'}]
+ */
+export const colorObjToArr = (obj: Record<string, string>) => {
+	// 将 obj 转为数组
+	const arr = Object.entries(obj).map(([key, value]) => ({ key, value }));
+	// 将最后一项移动到第 6 项
+	const lastItem = arr.pop();
+	if (lastItem) {
+		arr.splice(6, 0, lastItem);
+	}
+	return arr;
+};
+
+/**
+ * 传入 oklch 格式的颜色值与透明度，返回带透明度的 oklch 格式
+ * @param {string} str - 颜色值
+ * @param {number} opacity - 透明度
+ * @returns {string} - 返回带透明度的 oklch 格式
+ * @example
+ * getOklchOpacity('oklch(0.5 0.5 0)', 0.5) // 'oklch(0.5 0.5 0 / 0.5)'
+ */
+export const getOklchOpacity = (str: string, opacity: number) => {
+	// 将最后一个 ) 替换为 【/ 透明度】
+	return str.replace(/\)$/, ` / ${opacity})`);
+};

docs/site/tailwind.config.ts

@@ -1,164 +0,0 @@
-import typography from '@tailwindcss/typography';
-import type { Config } from 'tailwindcss';
-
-export default {
-	content: ['./src/**/*.{html,svelte}', '../../packages/stdf/dist/**/*.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',
-			bug1: '#DC2828',
-			bug2: '#F09614',
-			bug3: '#FAE600',
-			bug4: '#37C7FF',
-			tailwind: '#60bbf2',
-			svelte: '#ff6937'
-		},
-		extend: {
-			spacing: {
-				13: '3.25rem',
-				17: '4.25rem',
-				21: '5.25rem',
-				25: '6.25rem',
-				33: '8.25rem',
-				37: '9.25rem',
-				40: '10rem',
-				41: '10.25rem',
-				49: '12.25rem',
-				61: '15.25rem',
-				62: '15.5rem',
-				65: '16.25rem',
-				66: '16.5rem',
-				78: '19.5rem',
-				81: '20.25rem',
-				82: '20.5rem',
-				86: '21.5rem',
-				92: '23rem',
-				98: '24.5rem',
-				102: '25.5rem',
-				106: '26.5rem'
-			},
-			keyframes: {
-				shake: {
-					'10%, 9%': { transform: 'translate3d(-1px, 0, 0)' },
-					'20%, 80%': { transform: 'translate3d(2px, 0, 0)' },
-					'30%, 50%, 70%': { transform: 'translate3d(-4px, 0, 0)' },
-					'40%, 60%': { transform: 'translate3d(4px, 0, 0)' }
-				},
-				lightning: {
-					'0%': { opacity: '0' },
-					'10%': { opacity: '1' },
-					'20%': { opacity: '0' },
-					'30%': { opacity: '1' },
-					'100%': { opacity: '0' }
-				},
-				path: {
-					'0%': { 'stroke-dashoffset': '400', fill: 'transparent' },
-					'31%': { 'stroke-dashoffset': '0', fill: 'transparent' },
-					'32%': { 'stroke-dashoffset': '0', fill: 'currentColor', opacity: '1' },
-					'33%': { opacity: '0' },
-					'35%': { opacity: '1' },
-					'37%': { opacity: '0' },
-					'39%': { opacity: '1' },
-					'41%': { opacity: '0' },
-					'43%': { opacity: '1' },
-					'44%': { 'stroke-dashoffset': '0', fill: 'currentColor' },
-					'99%': { 'stroke-dashoffset': '0', fill: 'currentColor' },
-					'100%': { 'stroke-dashoffset': '400', fill: 'transparent' }
-				},
-				dynamicsBg: {
-					'0%': { transform: 'rotate(360deg)', height: '14rem', width: '14rem' },
-					'50%': { height: '7rem', width: '7rem' },
-					'100%': { transform: 'rotate(0deg)', height: '14rem', width: '14rem' }
-				},
-				cloudMove: {
-					'0%': { transform: 'translateX(20%) translateY(-20%)' },
-					'50%': { transform: 'translateX(-100%) translateY(-20%)' },
-					'100%': { transform: 'translateX(20%) translateY(-20%)' }
-				},
-				starTwinkle: {
-					// 带一点点缩放和透明度变化的闪烁
-					'0%': { opacity: '1' },
-					'40%': { opacity: '1' },
-					'50%': { opacity: '0' },
-					'60%': { opacity: '1' },
-					'100%': { opacity: '1' }
-				}
-			},
-			animation: {
-				shake: 'shake 0.82s cubic-bezier(.36,.07,.19,.97) both', // 抖动动画
-				lightning: 'lightning 1s linear infinite', // 闪电动画
-				path: 'path 3s linear infinite', // 路径动画
-				dynamicsBg: 'dynamicsBg 8s linear infinite', // 动态背景动画
-				cloudMove: 'cloudMove 40s linear infinite', // 云移动动画
-				starTwinkle: 'starTwinkle 8s linear infinite', // 星星闪烁动画
-				starTwinkle2: 'starTwinkle 3s linear infinite', // 星星闪烁动画
-				starTwinkle3: 'starTwinkle 6s linear infinite', // 星星闪烁动画
-				starTwinkle4: 'starTwinkle 4s linear infinite' // 星星闪烁动画
-			},
-			typography: {
-				DEFAULT: {
-					css: {
-						pre: {
-							backgroundColor: 'transparent',
-							padding: '0'
-						}
-					}
-				}
-			}
-		}
-	},
-	darkMode: 'class',
-	plugins: [typography]
-} satisfies Config;

docs/site/vite.config.ts

@@ -1,10 +1,12 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
 import md from 'rollup-plugin-md-ts';
 
 export default defineConfig({
 	plugins: [
 		sveltekit(),
+		tailwindcss(),
 		md({
 			marked: {},
 			include: ['../mds/**/*.md', './src/pages/guide/**/*.md', '../../packages/**/*.md']