[doc]新增多个主题文件

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

@@ -0,0 +1,59 @@
+import type { ThemeProps } from 'stdf/theme';
+
+const Aqua: ThemeProps = {
+	name: 'Aqua',
+	color: {
+		primary: {
+			50: 'oklch(0.987 0.008 225.079)', // #F5FCFF hsl(198, 100%, 98%)
+			100: 'oklch(0.969 0.019 225.712)', // #E8F8FF hsl(198, 100%, 96%)
+			200: 'oklch(0.832 0.048 227.654)', // #A8CFE1 hsl(199, 49%, 77%)
+			300: 'oklch(0.699 0.07 233.534)', // #72A6C3 hsl(202, 40%, 61%)
+			400: 'oklch(0.575 0.083 237.386)', // #4580A4 hsl(203, 41%, 46%)
+			500: 'oklch(0.46 0.09 243.106)', // #235D86 hsl(205, 59%, 33%)
+			default: 'oklch(0.355 0.089 248.677)', // #0A3E68 hsl(207, 83%, 22%)
+			700: 'oklch(0.329 0.09 251.443)', // #073661 hsl(209, 87%, 20%)
+			800: 'oklch(0.302 0.09 253.945)', // #042E5A hsl(211, 92%, 18%)
+			900: 'oklch(0.277 0.09 255.696)', // #022753 hsl(213, 95%, 17%)
+			950: 'oklch(0.253 0.091 257.423)' // #00204D hsl(215, 100%, 15%)
+		},
+		dark: {
+			50: 'oklch(0.997 0.013 111.26)', // #FEFFF5 hsl(66, 100%, 98%)
+			100: 'oklch(0.992 0.03 110.976)', // #FDFFE8 hsl(65, 100%, 96%)
+			200: 'oklch(0.946 0.068 113.937)', // #ECF3BF hsl(68, 68%, 85%)
+			300: 'oklch(0.9 0.101 116.179)', // #DAE799 hsl(70, 62%, 75%)
+			400: 'oklch(0.857 0.13 118.796)', // #C7DC76 hsl(72, 59%, 66%)
+			500: 'oklch(0.812 0.152 121.068)', // #B3D055 hsl(74, 57%, 58%)
+			default: 'oklch(0.767 0.167 123.364)', // #9FC438 hsl(76, 56%, 49%)
+			700: 'oklch(0.673 0.157 125.534)', // #7FA624 hsl(78, 64%, 40%)
+			800: 'oklch(0.577 0.143 127.636)', // #618813 hsl(80, 76%, 30%)
+			900: 'oklch(0.479 0.124 129.495)', // #466A08 hsl(82, 86%, 22%)
+			950: 'oklch(0.381 0.104 130.976)' // #2E4D00 hsl(84, 100%, 15%)
+		},
+		primaryBlack: 'oklch(0.156 0.033 240.386)', // #010E19 hsl(207, 95%, 5%)
+		primaryWhite: 'oklch(0.961 0.001 286.375)', // #F2F2F3 hsl(207, 5%, 95%)
+		darkBlack: 'oklch(0.199 0.046 122.93)', // #121901 hsl(76, 95%, 5%)
+		darkWhite: 'oklch(0.964 0.001 106.424)', // #F3F3F2 hsl(76, 5%, 95%)
+		functional: {
+			success: 'oklch(0.577 0.18 144.916)', // #069327 hsl(134, 92%, 30%)
+			warning: 'oklch(0.615 0.147 54.981)', // #c66810 hsl(29, 85%, 42%)
+			error: 'oklch(0.559 0.203 26.879)', // #d12929 hsl(0, 67%, 49%)
+			info: 'oklch(0.455 0.194 263.236)' // #1649c0 hsl(222, 79%, 42%)
+		},
+		extend: [
+			{
+				color: 'oklch(0.345 0.194 290.65)', // #410093 hsl(267, 100%, 29%)
+				alias: 'Yahoo!'
+			},
+			{
+				color: 'oklch(0.651 0.212 142.608)', // oklch(0.651 0.212 142.608) hsl(120, 75%, 39%)
+				alias: 'WeChat'
+			},
+			{
+				color: 'oklch(0.689 0.196 21.407)', // #fd5c63 hsl(357, 98%, 68%)
+				alias: 'Airbnb'
+			}
+		]
+	}
+};
+
+export default Aqua;

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

@@ -0,0 +1,59 @@
+import type { ThemeProps } from 'stdf/theme';
+
+const Azuper: ThemeProps = {
+	name: 'Azuper',
+	color: {
+		primary: {
+			50: 'oklch(0.987 0.008 225.079)', // #F5FCFF hsl(198, 100%, 98%)
+			100: 'oklch(0.967 0.019 230.689)', // #E8F7FF hsl(201, 100%, 96%)
+			200: 'oklch(0.827 0.048 234.484)', // #A9CCE1 hsl(203, 48%, 77%)
+			300: 'oklch(0.692 0.069 240.216)', // #74A2C3 hsl(205, 40%, 61%)
+			400: 'oklch(0.565 0.085 244.974)', // #487BA5 hsl(207, 39%, 47%)
+			500: 'oklch(0.45 0.094 249.497)', // #265887 hsl(209, 56%, 34%)
+			default: 'oklch(0.347 0.095 253.302)', // #0D3A69 hsl(211, 78%, 23%)
+			700: 'oklch(0.317 0.097 256.274)', // #093162 hsl(213, 83%, 21%)
+			800: 'oklch(0.291 0.098 258.443)', // #06295B hsl(215, 88%, 19%)
+			900: 'oklch(0.266 0.098 259.566)', // #032254 hsl(217, 93%, 17%)
+			950: 'oklch(0.241 0.099 260.073)' // #001B4D hsl(219, 100%, 15%)
+		},
+		dark: {
+			50: 'oklch(0.984 0.009 44.894)', // #FFF8F5 hsl(18, 100%, 98%)
+			100: 'oklch(0.963 0.02 45.262)', // #FFEFE8 hsl(18, 100%, 96%)
+			200: 'oklch(0.889 0.047 41.262)', // #F7D1C3 hsl(16, 77%, 87%)
+			300: 'oklch(0.817 0.075 38.298)', // #EFB3A0 hsl(14, 71%, 78%)
+			400: 'oklch(0.747 0.107 34.759)', // #E8947F hsl(12, 70%, 70%)
+			500: 'oklch(0.68 0.138 32.855)', // #E0755F hsl(10, 68%, 63%)
+			default: 'oklch(0.621 0.167 31.47)', // #D85742 hsl(8, 66%, 55%)
+			700: 'oklch(0.522 0.165 29.582)', // #B5372A hsl(6, 62%, 44%)
+			800: 'oklch(0.433 0.152 29.344)', // #921F16 hsl(4, 74%, 33%)
+			900: 'oklch(0.348 0.132 28.566)', // #6F0C09 hsl(2, 85%, 24%)
+			950: 'oklch(0.264 0.108 29.234)' // #4D0000 hsl(0, 100%, 15%)
+		},
+		primaryBlack: 'oklch(0.15 0.035 247.014)', // #010C19 hsl(211, 95%, 5%)
+		primaryWhite: 'oklch(0.961 0.001 286.375)', // #F2F2F3 hsl(211, 5%, 95%)
+		darkBlack: 'oklch(0.148 0.043 37.362)', // #190401 hsl(8, 95%, 5%)
+		darkWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(8, 5%, 95%)
+		functional: {
+			success: 'oklch(0.663 0.189 146.376)', // #21b043 hsl(134, 68%, 41%)
+			warning: 'oklch(0.652 0.163 41.893)', // #df6734 hsl(18, 73%, 54%)
+			error: 'oklch(0.616 0.196 13.669)', // #e14161 hsl(348, 73%, 57%)
+			info: 'oklch(0.523 0.229 273.504)' // #484eea hsl(238, 79%, 60%)
+		},
+		extend: [
+			{
+				color: 'oklch(0.492 0.217 261.351)', // oklch(0.492 0.217 261.351) hsl(217, 100%, 43%)
+				alias: 'Tencent'
+			},
+			{
+				color: 'oklch(0.654 0.154 241.655)', // #0099e5 hsl(200, 100%, 45%)
+				alias: '500px'
+			},
+			{
+				color: 'oklch(0.571 0.235 261.561)', // #1769ff hsl(219, 100%, 55%)
+				alias: 'Behance'
+			}
+		]
+	}
+};
+
+export default Azuper;

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

@@ -0,0 +1,59 @@
+import type { ThemeProps } from 'stdf/theme';
+
+const Citrus: ThemeProps = {
+	name: 'Citrus',
+	color: {
+		primary: {
+			50: 'oklch(0.985 0.008 236.556)', // #F5FBFF hsl(204, 100%, 98%)
+			100: 'oklch(0.963 0.019 240.727)', // #E8F5FF hsl(206, 100%, 96%)
+			200: 'oklch(0.818 0.048 241.473)', // #A9C8E0 hsl(206, 47%, 77%)
+			300: 'oklch(0.677 0.07 246.931)', // #749CC1 hsl(209, 38%, 61%)
+			400: 'oklch(0.548 0.088 251.698)', // #4974A3 hsl(211, 38%, 46%)
+			500: 'oklch(0.431 0.097 254.641)', // #275184 hsl(213, 54%, 34%)
+			default: 'oklch(0.324 0.099 258.036)', // #0E3265 hsl(215, 76%, 23%)
+			700: 'oklch(0.298 0.102 260.178)', // #0A2A5F hsl(217, 81%, 21%)
+			800: 'oklch(0.274 0.103 261.304)', // #062359 hsl(219, 87%, 19%)
+			900: 'oklch(0.251 0.105 262.192)', // #031C53 hsl(221, 93%, 17%)
+			950: 'oklch(0.229 0.106 261.947)' // #00164D hsl(223, 100%, 15%)
+		},
+		dark: {
+			50: 'oklch(0.997 0.013 106.635)', // #FFFFF5 hsl(60, 100%, 98%)
+			100: 'oklch(0.994 0.03 106.933)', // #FFFFE8 hsl(60, 100%, 96%)
+			200: 'oklch(0.967 0.08 105.52)', // #FBF8B9 hsl(57, 89%, 86%)
+			300: 'oklch(0.937 0.122 105)', // #F6EF8B hsl(56, 86%, 76%)
+			400: 'oklch(0.903 0.152 102.892)', // #F2E35E hsl(54, 85%, 66%)
+			500: 'oklch(0.867 0.168 100.267)', // #EDD533 hsl(52, 84%, 57%)
+			default: 'oklch(0.826 0.168 94.589)', // #E9C30A hsl(50, 92%, 48%)
+			700: 'oklch(0.707 0.144 91.085)', // #C29C06 hsl(48, 94%, 39%)
+			800: 'oklch(0.588 0.12 87.218)', // #9B7703 hsl(46, 96%, 31%)
+			900: 'oklch(0.47 0.096 83.886)', // #745501 hsl(44, 98%, 23%)
+			950: 'oklch(0.35 0.072 82.069)' // #4D3600 hsl(42, 100%, 15%)
+		},
+		primaryBlack: 'oklch(0.147 0.037 249.929)', // #010B19 hsl(215, 95%, 5%)
+		primaryWhite: 'oklch(0.961 0.001 286.375)', // #F2F2F3 hsl(215, 5%, 95%)
+		darkBlack: 'oklch(0.195 0.038 99.68)', // #191501 hsl(50, 95%, 5%)
+		darkWhite: 'oklch(0.964 0.001 106.424)', // #F3F3F2 hsl(50, 5%, 95%)
+		functional: {
+			success: 'oklch(0.637 0.184 146.403)', // #1ba73e hsl(135, 72%, 38%)
+			warning: 'oklch(0.495 0.128 47.783)', // #9a460e hsl(24, 83%, 33%)
+			error: 'oklch(0.504 0.203 28.76)', // #bd0a0a hsl(0, 90%, 39%)
+			info: 'oklch(0.466 0.24 284.096)' // #5628d7 hsl(256, 69%, 50%)
+		},
+		extend: [
+			{
+				color: 'oklch(0.703 0.149 235.113)', // oklch(0.703 0.149 235.059) hsl(197, 98%, 47%)
+				alias: 'Twitter'
+			},
+			{
+				color: 'oklch(0.702 0.194 38.137)', // oklch(0.702 0.194 38.137) hsl(15, 100%, 61%)
+				alias: 'Svelte'
+			},
+			{
+				color: 'oklch(0.716 0.171 53.446)', // #f38020 hsl(27, 90%, 54%)
+				alias: 'Cloudflare'
+			}
+		]
+	}
+};
+
+export default Citrus;

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

@@ -0,0 +1,59 @@
+import type { ThemeProps } from 'stdf/theme';
+
+const GreenJade: ThemeProps = {
+	name: 'GreenJade',
+	color: {
+		primary: {
+			50: 'oklch(0.992 0.011 176.326)', // #F5FFFC hsl(162, 100%, 98%)
+			100: 'oklch(0.982 0.025 181.302)', // #E8FFFA hsl(167, 100%, 96%)
+			200: 'oklch(0.871 0.05 182.107)', // #B1E0D7 hsl(169, 43%, 79%)
+			300: 'oklch(0.765 0.067 183.674)', // #81C1B7 hsl(171, 34%, 63%)
+			400: 'oklch(0.662 0.075 185.315)', // #59A299 hsl(173, 29%, 49%)
+			500: 'oklch(0.561 0.075 188.146)', // #38837D hsl(175, 40%, 37%)
+			default: 'oklch(0.46 0.067 190.938)', // #1F6461 hsl(177, 53%, 26%)
+			700: 'oklch(0.44 0.068 193.584)', // #165E5D hsl(179, 62%, 23%)
+			800: 'oklch(0.416 0.066 196.348)', // #0E5758 hsl(181, 73%, 20%)
+			900: 'oklch(0.389 0.064 199.408)', // #064F52 hsl(182, 86%, 17%)
+			950: 'oklch(0.36 0.062 206.153)' // #00464D hsl(186, 100%, 15%)
+		},
+		dark: {
+			50: 'oklch(0.993 0.011 95.159)', // #FFFDF5 hsl(48, 100%, 98%)
+			100: 'oklch(0.984 0.024 94.062)', // #FFFAE8 hsl(47, 100%, 96%)
+			200: 'oklch(0.963 0.055 93.624)', // #FFF3CA hsl(46, 100%, 90%)
+			300: 'oklch(0.938 0.081 90.541)', // #FFE9AC hsl(44, 100%, 84%)
+			400: 'oklch(0.909 0.106 87.283)', // #FFDD8D hsl(42, 100%, 78%)
+			500: 'oklch(0.877 0.126 83.083)', // #FFCF6F hsl(40, 100%, 72%)
+			default: 'oklch(0.844 0.144 77.934)', // #FFBF51 hsl(38, 100%, 66%)
+			700: 'oklch(0.707 0.132 72.908)', // #D29232 hsl(36, 64%, 51%)
+			800: 'oklch(0.574 0.117 66.999)', // #A6691A hsl(34, 73%, 38%)
+			900: 'oklch(0.444 0.097 61.688)', // #79450A hsl(32, 85%, 26%)
+			950: 'oklch(0.315 0.075 58.16)' // #4D2600 hsl(30, 100%, 15%)
+		},
+		primaryBlack: 'oklch(0.193 0.032 191.218)', // #011918 hsl(177, 95%, 5%)
+		primaryWhite: 'oklch(0.963 0.001 197.138)', // #F2F3F3 hsl(177, 5%, 95%)
+		darkBlack: 'oklch(0.18 0.034 82.944)', // #191001 hsl(38, 95%, 5%)
+		darkWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(38, 5%, 95%)
+		functional: {
+			success: 'oklch(0.618 0.208 142.486)', // #09a207 hsl(119, 92%, 33%)
+			warning: 'oklch(0.677 0.149 65.479)', // #d4810c hsl(35, 89%, 44%)
+			error: 'oklch(0.554 0.224 28.911)', // #d70909 hsl(0, 92%, 44%)
+			info: 'oklch(0.419 0.238 264.463)' // #062ecb hsl(228, 94%, 41%)
+		},
+		extend: [
+			{
+				color: 'oklch(0.492 0.217 261.351)', // oklch(0.492 0.217 261.351) hsl(217, 100%, 43%)
+				alias: 'Tencent'
+			},
+			{
+				color: 'oklch(0.606 0.23 11.741)', // #ea1d5d hsl(341, 83%, 52%)
+				alias: 'Aparat'
+			},
+			{
+				color: 'oklch(0.588 0.134 239.667)', // #0085c3 hsl(199, 100%, 38%)
+				alias: 'Dell'
+			}
+		]
+	}
+};
+
+export default GreenJade;

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

@@ -4,6 +4,14 @@ import AzurePink from './azurePink.js';
 import SmartLive from './smartLive.js';
 import CamelliaRed from './camelliaRed.js';
 import Nintendo from './nintendo.js';
+import Skybloom from './skybloom.js';
+import Aqua from './aqua.js';
+import KleinH from './kleinH.js';
+import Azuper from './azuper.js';
+import Citrus from './citrus.js';
+import Lavender from './lavender.js';
+import TealMedley from './tealMedley.js';
+import GreenJade from './greenJade.js';
 
 export default [
 	{ name_CN: 'STDF', name: STDFTheme.name, theme: STDFTheme },
@@ -11,5 +19,13 @@ export default [
 	{ 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 }
+	{ name_CN: '蓝采绿', name: Aqua.name, theme: Aqua },
+	{ name_CN: '山茶红', name: CamelliaRed.name, theme: CamelliaRed },
+	{ name_CN: '蓝粉梦', name: Skybloom.name, theme: Skybloom },
+	{ name_CN: '克莱仕', name: KleinH.name, theme: KleinH },
+	{ name_CN: '石青柿', name: Azuper.name, theme: Azuper },
+	{ name_CN: '青佛手', name: Citrus.name, theme: Citrus },
+	{ name_CN: '以初紫', name: Lavender.name, theme: Lavender },
+	{ name_CN: '青什锦', name: TealMedley.name, theme: TealMedley },
+	{ name_CN: '绿玉子', name: GreenJade.name, theme: GreenJade }
 ];

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

@@ -0,0 +1,59 @@
+import type { ThemeProps } from 'stdf/theme';
+
+const KleinH: ThemeProps = {
+	name: 'KleinH',
+	color: {
+		primary: {
+			50: 'oklch(0.983 0.009 247.912)', // #F5FAFF hsl(210, 100%, 98%)
+			100: 'oklch(0.957 0.021 254.913)', // #E8F2FF hsl(214, 100%, 96%)
+			200: 'oklch(0.817 0.061 257.788)', // #ABC5EB hsl(216, 62%, 80%)
+			300: 'oklch(0.681 0.099 261.163)', // #7699D6 hsl(218, 54%, 65%)
+			400: 'oklch(0.559 0.134 262.606)', // #4871C2 hsl(220, 50%, 52%)
+			500: 'oklch(0.446 0.164 263.584)', // #214BAD hsl(222, 68%, 40%)
+			default: 'oklch(0.355 0.183 263.561)', // #022A99 hsl(224, 97%, 30%)
+			700: 'oklch(0.316 0.17 263.812)', // #012086 hsl(226, 99%, 27%)
+			800: 'oklch(0.28 0.155 264.078)', // #011873 hsl(228, 98%, 23%)
+			900: 'oklch(0.242 0.139 263.958)', // #001060 hsl(230, 100%, 19%)
+			950: 'oklch(0.207 0.12 264.016)' // #000A4D hsl(232, 100%, 15%)
+		},
+		dark: {
+			50: 'oklch(0.991 0.01 87.47)', // #FFFCF5 hsl(42, 100%, 98%)
+			100: 'oklch(0.978 0.022 83.264)', // #FFF7E8 hsl(39, 100%, 96%)
+			200: 'oklch(0.935 0.058 80.464)', // #FEE6BE hsl(38, 97%, 87%)
+			300: 'oklch(0.886 0.094 74.988)', // #FED193 hsl(35, 98%, 79%)
+			400: 'oklch(0.837 0.125 70.641)', // #FDBB69 hsl(33, 97%, 70%)
+			500: 'oklch(0.786 0.153 63.13)', // #FDA140 hsl(31, 98%, 62%)
+			default: 'oklch(0.734 0.178 54.177)', // #FC8416 hsl(29, 98%, 54%)
+			700: 'oklch(0.625 0.159 50.796)', // #D0650E hsl(27, 87%, 44%)
+			800: 'oklch(0.515 0.137 47.874)', // #A44907 hsl(25, 92%, 34%)
+			900: 'oklch(0.405 0.113 45.466)', // #783003 hsl(23, 95%, 24%)
+			950: 'oklch(0.295 0.084 45.171)' // #4D1B00 hsl(21, 100%, 15%)
+		},
+		primaryBlack: 'oklch(0.133 0.043 259.636)', // #010719 hsl(224, 95%, 5%)
+		primaryWhite: 'oklch(0.961 0.001 286.375)', // #F2F2F3 hsl(224, 5%, 95%)
+		darkBlack: 'oklch(0.17 0.034 67.389)', // #190C01 hsl(29, 95%, 5%)
+		darkWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(29, 5%, 95%)
+		functional: {
+			success: 'oklch(0.439 0.132 145.643)', // #07641d hsl(134, 87%, 21%)
+			warning: 'oklch(0.566 0.171 39.514)', // #c54711 hsl(18, 84%, 42%)
+			error: 'oklch(0.497 0.177 16.155)', // #b0213e hsl(348, 68%, 41%)
+			info: 'oklch(0.573 0.096 219.542)' // #1d859f hsl(192, 69%, 37%)
+		},
+		extend: [
+			{
+				color: 'oklch(0.686 0.139 231.254)', // #00a8e0 hsl(195, 100%, 44%)
+				alias: 'AT&T'
+			},
+			{
+				color: 'oklch(0.651 0.212 142.608)', // oklch(0.651 0.212 142.608) hsl(120, 75%, 39%)
+				alias: 'WeChat'
+			},
+			{
+				color: 'oklch(0.652 0.199 0.712)', // #ea4c89 hsl(337, 79%, 61%)
+				alias: 'Dribbble'
+			}
+		]
+	}
+};
+
+export default KleinH;

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

@@ -0,0 +1,59 @@
+import type { ThemeProps } from 'stdf/theme';
+
+const Lavender: ThemeProps = {
+	name: 'Lavender',
+	color: {
+		primary: {
+			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.842 0.065 314.453)', // #DBBFE9 hsl(280, 49%, 83%)
+			300: 'oklch(0.739 0.091 312.314)', // #BE9AD4 hsl(277, 40%, 72%)
+			400: 'oklch(0.641 0.109 310.145)', // #A179BE hsl(275, 35%, 61%)
+			500: 'oklch(0.551 0.124 307.99)', // #865CA9 hsl(273, 31%, 51%)
+			default: 'oklch(0.467 0.13 305.627)', // #6C4393 hsl(271, 37%, 42%)
+			700: 'oklch(0.392 0.138 302.664)', // #552C81 hsl(269, 49%, 34%)
+			800: 'oklch(0.326 0.14 298.682)', // #401970 hsl(267, 64%, 27%)
+			900: 'oklch(0.269 0.132 293.856)', // #2D0B5E hsl(265, 79%, 21%)
+			950: 'oklch(0.216 0.123 289.042)' // #1D004D hsl(263, 100%, 15%)
+		},
+		dark: {
+			50: 'oklch(0.971 0.017 349.48)', // #FFF1F7 hsl(334, 100%, 97%)
+			100: 'oklch(0.953 0.029 347.076)', // #FFE8F3 hsl(331, 100%, 96%)
+			200: 'oklch(0.926 0.042 344.642)', // #FCDCED hsl(328, 84%, 93%)
+			300: 'oklch(0.901 0.053 344.002)', // #F9D1E7 hsl(327, 77%, 90%)
+			400: 'oklch(0.874 0.065 342.674)', // #F5C5E1 hsl(325, 71%, 87%)
+			500: 'oklch(0.85 0.078 340.995)', // #F2BADD hsl(323, 68%, 84%)
+			default: 'oklch(0.826 0.092 339.861)', // #EFAFD9 hsl(321, 67%, 81%)
+			700: 'oklch(0.654 0.135 340.177)', // #C66DAA hsl(319, 44%, 60%)
+			800: 'oklch(0.512 0.156 340.793)', // #9E3A81 hsl(317, 46%, 42%)
+			900: 'oklch(0.391 0.15 340.551)', // #75155D hsl(315, 70%, 27%)
+			950: 'oklch(0.284 0.123 340.171)' // #4D003C hsl(313, 100%, 15%)
+		},
+		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.146 0.057 343.966)', // #190110 hsl(321, 95%, 5%)
+		darkWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(321, 5%, 95%)
+		functional: {
+			success: 'oklch(0.784 0.194 147.722)', // #4ad96b hsl(134, 65%, 57%)
+			warning: 'oklch(0.693 0.147 42.888)', // #e67a4c hsl(18, 76%, 60%)
+			error: 'oklch(0.639 0.192 24.341)', // #e94e4e hsl(0, 78%, 61%)
+			info: 'oklch(0.613 0.168 270.082)' // #5e7ae8 hsl(228, 75%, 64%)
+		},
+		extend: [
+			{
+				color: 'oklch(0.492 0.217 261.351)', // oklch(0.492 0.217 261.351) hsl(217, 100%, 43%)
+				alias: 'Tencent'
+			},
+			{
+				color: 'oklch(0.651 0.212 142.608)', // oklch(0.651 0.212 142.608) hsl(120, 75%, 39%)
+				alias: 'WeChat'
+			},
+			{
+				color: 'oklch(0.343 0.077 256.446)', // #1c3960 hsl(214, 55%, 24%)
+				alias: 'Ford'
+			}
+		]
+	}
+};
+
+export default Lavender;

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

@@ -0,0 +1,59 @@
+import type { ThemeProps } from 'stdf/theme';
+
+const Skybloom: ThemeProps = {
+	name: 'Skybloom',
+	color: {
+		primary: {
+			50: 'oklch(0.987 0.008 225.079)', // #F5FCFF hsl(198, 100%, 98%)
+			100: 'oklch(0.969 0.019 225.712)', // #E8F8FF hsl(198, 100%, 96%)
+			200: 'oklch(0.863 0.05 229.685)', // #B1D9ED hsl(200, 63%, 81%)
+			300: 'oklch(0.759 0.075 234.966)', // #81B9DA hsl(202, 55%, 68%)
+			400: 'oklch(0.66 0.098 240.067)', // #569AC8 hsl(204, 51%, 56%)
+			500: 'oklch(0.566 0.115 244.99)', // #317CB5 hsl(206, 57%, 45%)
+			default: 'oklch(0.479 0.13 251.007)', // #125FA3 hsl(208, 80%, 36%)
+			700: 'oklch(0.42 0.122 253.316)', // #0C4D8D hsl(210, 84%, 30%)
+			800: 'oklch(0.359 0.116 256.313)', // #073B78 hsl(212, 89%, 25%)
+			900: 'oklch(0.303 0.105 257.617)', // #032C62 hsl(214, 94%, 20%)
+			950: 'oklch(0.251 0.093 258.021)' // #001F4D hsl(216, 100%, 15%)
+		},
+		dark: {
+			50: 'oklch(0.975 0.012 23.703)', // #FFF4F3 hsl(5, 100%, 98%)
+			100: 'oklch(0.949 0.025 17.604)', // #FFE8E8 hsl(0, 100%, 96%)
+			200: 'oklch(0.92 0.038 17.861)', // #FDDBDB hsl(0, 90%, 93%)
+			300: 'oklch(0.89 0.05 15.051)', // #FACED0 hsl(357, 82%, 89%)
+			400: 'oklch(0.861 0.063 12.376)', // #F8C1C6 hsl(355, 80%, 87%)
+			500: 'oklch(0.832 0.076 10.667)', // #F5B4BC hsl(353, 77%, 83%)
+			default: 'oklch(0.807 0.089 9.599)', // #F3A8B3 hsl(351, 76%, 81%)
+			700: 'oklch(0.635 0.124 9.491)', // #C9687A hsl(349, 47%, 60%)
+			800: 'oklch(0.493 0.139 10.638)', // #A0374E hsl(347, 49%, 42%)
+			900: 'oklch(0.374 0.131 12.448)', // #76142D hsl(345, 71%, 27%)
+			950: 'oklch(0.268 0.107 13.338)' // #4D0016 hsl(343, 100%, 15%)
+		},
+		primaryBlack: 'oklch(0.156 0.033 240.386)', // #010E19 hsl(208, 95%, 5%)
+		primaryWhite: 'oklch(0.961 0.001 286.375)', // #F2F2F3 hsl(208, 5%, 95%)
+		darkBlack: 'oklch(0.14 0.05 14.109)', // #190104 hsl(351, 95%, 5%)
+		darkWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(351, 5%, 95%)
+		functional: {
+			success: 'oklch(0.7 0.181 152.201)', // #0fbd63 hsl(149, 85%, 40%)
+			warning: 'oklch(0.534 0.132 51.034)', // #a75211 hsl(26, 82%, 36%)
+			error: 'oklch(0.58 0.211 10.496)', // #d9265c hsl(342, 70%, 50%)
+			info: 'oklch(0.458 0.218 283.692)' // #5231c9 hsl(253, 61%, 49%)
+		},
+		extend: [
+			{
+				color: 'oklch(0.703 0.149 235.113)', // oklch(0.703 0.149 235.059) hsl(197, 98%, 47%)
+				alias: 'Twitter'
+			},
+			{
+				color: 'oklch(0.702 0.194 38.137)', // oklch(0.702 0.194 38.137) hsl(15, 100%, 61%)
+				alias: 'Svelte'
+			},
+			{
+				color: 'oklch(0.518 0.199 259.881)', // #0e5fd8 hsl(216, 88%, 45%)
+				alias: 'Philips'
+			}
+		]
+	}
+};
+
+export default Skybloom;

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

@@ -0,0 +1,59 @@
+import type { ThemeProps } from 'stdf/theme';
+
+const TealMedley: ThemeProps = {
+	name: 'TealMedley',
+	color: {
+		primary: {
+			50: 'oklch(0.991 0.01 204.917)', // #F5FEFF hsl(186, 100%, 98%)
+			100: 'oklch(0.977 0.021 207.588)', // #E8FCFF hsl(188, 100%, 96%)
+			200: 'oklch(0.877 0.046 213.81)', // #B5DFE9 hsl(192, 54%, 81%)
+			300: 'oklch(0.78 0.063 217.138)', // #89C2D2 hsl(193, 45%, 68%)
+			400: 'oklch(0.686 0.076 222.122)', // #62A5BC hsl(195, 40%, 56%)
+			500: 'oklch(0.595 0.084 226.019)', // #4089A5 hsl(197, 44%, 45%)
+			default: 'oklch(0.509 0.088 231.916)', // #256E8F hsl(199, 59%, 35%)
+			700: 'oklch(0.448 0.086 236.944)', // #195B7E hsl(201, 67%, 30%)
+			800: 'oklch(0.389 0.085 242.356)', // #0E496E hsl(203, 77%, 24%)
+			900: 'oklch(0.334 0.081 245.985)', // #06395D hsl(205, 88%, 19%)
+			950: 'oklch(0.28 0.078 249.311)' // #002A4D hsl(207, 100%, 15%)
+		},
+		dark: {
+			50: 'oklch(0.971 0.015 33.071)', // #FFF2EF hsl(11, 100%, 97%)
+			100: 'oklch(0.957 0.021 31.78)', // #FFECE8 hsl(10, 100%, 96%)
+			200: 'oklch(0.932 0.028 28.52)', // #FBE2DE hsl(8, 78%, 93%)
+			300: 'oklch(0.905 0.036 24.203)', // #F7D7D4 hsl(5, 69%, 90%)
+			400: 'oklch(0.879 0.042 23.456)', // #F2CDCA hsl(5, 61%, 87%)
+			500: 'oklch(0.852 0.051 21.242)', // #EEC2C0 hsl(3, 58%, 84%)
+			default: 'oklch(0.825 0.059 18.425)', // #EAB7B7 hsl(0, 55%, 82%)
+			700: 'oklch(0.642 0.102 17.954)', // #C37275 hsl(358, 40%, 61%)
+			800: 'oklch(0.49 0.126 19.197)', // #9B3D43 hsl(356, 44%, 42%)
+			900: 'oklch(0.369 0.126 21.232)', // #741720 hsl(354, 67%, 27%)
+			950: 'oklch(0.265 0.107 22.403)' // #4D000A hsl(352, 100%, 15%)
+		},
+		primaryBlack: 'oklch(0.167 0.03 228.62)', // #011119 hsl(199, 95%, 5%)
+		primaryWhite: 'oklch(0.961 0.001 286.375)', // #F2F2F3 hsl(199, 5%, 95%)
+		darkBlack: 'oklch(0.138 0.051 27.08)', // #190101 hsl(0, 95%, 5%)
+		darkWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(0, 5%, 95%)
+		functional: {
+			success: 'oklch(0.608 0.142 148.314)', // #38994f hsl(134, 46%, 41%)
+			warning: 'oklch(0.776 0.119 100.626)', // #c7b857 hsl(52, 50%, 56%)
+			error: 'oklch(0.66 0.146 21.85)', // #dd6969 hsl(0, 63%, 64%)
+			info: 'oklch(0.559 0.131 271.419)' // #596dc0 hsl(228, 45%, 55%)
+		},
+		extend: [
+			{
+				color: 'oklch(0.492 0.217 261.351)', // oklch(0.492 0.217 261.351) hsl(217, 100%, 43%)
+				alias: 'Tencent'
+			},
+			{
+				color: 'oklch(0.424 0.097 251.575)', // #205081 hsl(210, 60%, 32%)
+				alias: 'Bitbucket'
+			},
+			{
+				color: 'oklch(0.364 0.191 266.82)', // #1428a0 hsl(231, 78%, 35%)
+				alias: 'Samsung'
+			}
+		]
+	}
+};
+
+export default TealMedley;

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

@@ -37,12 +37,12 @@
 <div class="flex {vertical ? 'flex-col gap-1' : 'flex-row gap-2'} my-2 flex-wrap">
 	{#each themes as item}
 		<button
-			class="flex items-center justify-between gap-1 border p-1 {$currentColorStore === item.name
+			class="flex items-center justify-between gap-0.5 border px-0.5 py-1 {$currentColorStore === item.name
 				? 'border-primary dark:border-dark'
 				: 'border-gray-100 dark:border-gray-700'} cursor-pointer rounded-sm"
 			on:click={(e) => selectColorFunc(e, item)}
 		>
-			<div class="size-4 {$currentColorStore === item.name ? 'fill-primary dark:fill-dark' : 'fill-gray-300 dark:fill-gray-700'}">
+			<div class="size-3 {$currentColorStore === item.name ? 'fill-primary dark:fill-dark' : 'fill-gray-300 dark:fill-gray-700'}">
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 					<path
 						d="M12 2C17.5222 2 22 5.97778 22 10.8889C22 13.9556 19.5111 16.4444 16.4444 16.4444H14.4778C13.5556 16.4444 12.8111 17.1889 12.8111 18.1111C12.8111 18.5333 12.9778 18.9222 13.2333 19.2111C13.5 19.5111 13.6667 19.9 13.6667 20.3333C13.6667 21.2556 12.9 22 12 22C6.47778 22 2 17.5222 2 12C2 6.47778 6.47778 2 12 2ZM7.5 12C8.32843 12 9 11.3284 9 10.5C9 9.67157 8.32843 9 7.5 9C6.67157 9 6 9.67157 6 10.5C6 11.3284 6.67157 12 7.5 12ZM16.5 12C17.3284 12 18 11.3284 18 10.5C18 9.67157 17.3284 9 16.5 9C15.6716 9 15 9.67157 15 10.5C15 11.3284 15.6716 12 16.5 12ZM12 9C12.8284 9 13.5 8.32843 13.5 7.5C13.5 6.67157 12.8284 6 12 6C11.1716 6 10.5 6.67157 10.5 7.5C10.5 8.32843 11.1716 9 12 9Z"
@@ -54,21 +54,21 @@
 			<div class="flex justify-between gap-1">
 				<!-- theme  -->
 				<div class="rounded-xs flex overflow-hidden">
-					<div class="bg-primary w-4" style="background-color: {item.theme.color.primary.default};"></div>
-					<div class="bg-dark w-4" style="background-color: {item.theme.color.dark.default};"></div>
+					<div class="bg-primary w-3" style="background-color: {item.theme.color.primary.default};"></div>
+					<div class="bg-dark w-3" style="background-color: {item.theme.color.dark.default};"></div>
 				</div>
-				<div class="flex flex-col justify-between gap-0.5">
+				<div class="flex flex-col justify-between gap-px">
 					<!-- Functional -->
-					<div class="flex gap-0.5">
-						<div class="size-2 rounded" style="background-color: {item.theme.color.functional.success};"></div>
-						<div class="size-2 rounded" style="background-color: {item.theme.color.functional.warning};"></div>
-						<div class="size-2 rounded" style="background-color: {item.theme.color.functional.error};"></div>
-						<div class="size-2 rounded" style="background-color: {item.theme.color.functional.info};"></div>
+					<div class="flex gap-px">
+						<div class="size-1.5 rounded" style="background-color: {item.theme.color.functional.success};"></div>
+						<div class="size-1.5 rounded" style="background-color: {item.theme.color.functional.warning};"></div>
+						<div class="size-1.5 rounded" style="background-color: {item.theme.color.functional.error};"></div>
+						<div class="size-1.5 rounded" style="background-color: {item.theme.color.functional.info};"></div>
 					</div>
 					<!-- Extended -->
-					<div class="flex justify-between gap-0.5">
+					<div class="flex justify-between gap-px">
 						{#each item.theme.color.extend as child}
-							<div class="size-2 rounded" style="background-color: {child.color};"></div>
+							<div class="size-1.5 rounded" style="background-color: {child.color};"></div>
 						{/each}
 					</div>
 				</div>

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

@@ -221,8 +221,8 @@
 		{
 			title: 'Fast',
 			titleZh: '快速',
-			desc: '脚手架快速开发，无虚拟 DOM，性能卓越。',
-			descEn: 'Quick dev with CLI, no vDOM, high performance.',
+			desc: '配套脚手架，无虚拟 DOM，性能卓越。',
+			descEn: 'With CLI, no vDOM, high performance.',
 			icon: '/assets/images/home/f.jpeg',
 			shwTip: false
 		}
@@ -514,10 +514,29 @@
 					href="/guide"
 					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">
-						<Confetti infinite rounded />
-					</span>
+					<div class="group flex items-center gap-1">
+						{isZh ? '开始使用' : 'Get Started'}
+						<div class="size-3 translate-y-px">
+							<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+								<rect
+									x="6"
+									y="14"
+									width="10"
+									height="2"
+									fill="currentColor"
+									class="group-hover:scale-x-135 transition-all duration-500 group-hover:-translate-x-2 group-hover:-translate-y-2"
+								/>
+								<path
+									d="M8.48535 7.07129L1.41406 14.1426L0 12.7275L5.65625 7.07031L0 1.41406L1.41406 0L8.48535 7.07129Z"
+									fill="currentColor"
+									class="transition-all duration-500 group-hover:translate-x-2"
+								/>
+							</svg>
+						</div>
+						<span class="absolute left-1/2 top-0 hidden group-hover:block">
+							<Confetti infinite rounded />
+						</span>
+					</div>
 				</a>
 				<!-- use:link -->
 				<a
@@ -557,7 +576,7 @@
 				</a>
 			</div>
 		</div>
-		<div class="group relative mt-10 hidden basis-3/5 xl:mt-0 xl:block">
+		<div class="relative mt-10 hidden basis-3/5 xl:mt-0 xl:block">
 			<div class="animate-elementUpDownMove1 -translate-x-18 absolute inset-1/2 size-20 -translate-y-12">
 				{#if avatar}
 					<Avatar size="md" radius={avatarRadius} image={avatar} injClass="shadow-lg dark:shadow-white/10" />
@@ -624,9 +643,20 @@
 			<div class="animate-elementUpDownMove5 h-54 -translate-x-110 absolute inset-1/2 w-[390px] translate-y-16 overflow-hidden">
 				<Swiper {...swiperOption} />
 			</div>
-			<div class="animate-elementUpDownMove1 -translate-y-74 absolute inset-1/2 w-64 translate-x-32">
+			<div class="animate-elementUpDownMove1 -translate-y-74 group absolute inset-1/2 w-64 translate-x-32">
 				<Button heightIn="2" onclick={randomThemeFunc}>
-					{isZh ? '随机主题' : 'Random Theme'}
+					<span class="transition-all duration-500 group-hover:translate-x-1">
+						{themes.find((item) => item.name === $currentColorStore)?.[isZh ? 'name_CN' : 'name']}
+					</span>
+					<span
+						class="ml-1 size-4 -translate-x-4 text-white opacity-0 transition-all delay-100 duration-500 group-hover:translate-x-0 group-hover:opacity-100 dark:text-black"
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+							<path
+								d="M1.99974 13.0001L1.9996 11.0002L18.1715 11.0002L14.2218 7.05044L15.636 5.63623L22 12.0002L15.636 18.3642L14.2218 16.9499L18.1716 13.0002L1.99974 13.0001Z"
+							></path>
+						</svg>
+					</span>
 				</Button>
 			</div>
 		</div>
@@ -754,8 +784,8 @@
 		</div>
 	</div>
 </div>
-<div class="bg-white dark:bg-black">
-	<div class="mx-auto grid max-w-[1536px] grid-cols-2 gap-10 pb-16 pt-20 text-left md:grid-cols-4 md:px-10">
+<div class="bg-gray-100 dark:bg-gray-950">
+	<div class="mx-auto grid max-w-[1536px] grid-cols-2 gap-10 px-6 py-10 md:grid-cols-4 md:px-20">
 		{#each bottomInfo as item}
 			<div>
 				<div class="mb-2 text-lg font-bold">{isZh ? item.title : item.title_en}</div>
@@ -771,7 +801,7 @@
 	</div>
 </div>
 
-<div class="border-t border-black/10 bg-white py-4 text-center text-xs dark:border-white/10 dark:bg-black">
+<div class="py-4 text-center text-xs">
 	<div class="flex justify-center gap-1">
 		<div>STDF DESIGN • MADE BY DUFU</div>
 		<div>