[stdf]Update Tailwind v4. Optimized color configuration with new brand-specific color variables

packages/stdf/src/app.css

@@ -3,53 +3,60 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-	--color-primary-50: oklch(0.985 0.015 268.66);
-	--color-primary-100: oklch(0.9789 0.009857 267.36);
-	--color-primary-200: oklch(0.8474 0.0736 271.19);
-	--color-primary-300: oklch(0.74.1 0.1299 272.23);
-	--color-primary-400: oklch(0.6339 0.1927 271.59);
-	--color-primary-500: oklch(0.5358 0.252 268.66);
-	--color-primary: oklch(0.4666 0.2959 264.89);
-	--color-primary-700: oklch(0.3975 0.2599 264.88);
-	--color-primary-800: oklch(0.3314 0.2205 264.83);
-	--color-primary-900: oklch(0.2603 0.1784 264.43);
-	--color-primary-950: oklch(0.1923 0.1299 266.64);
-	--color-dark-50: oklch(0.9953 0.0119 101.47);
-	--color-dark-100: oklch(0.9861 0.0252 97.11);
-	--color-dark-200: oklch(0.9647 0.0592 95.88);
-	--color-dark-300: oklch(0.9385 0.0887 92.95);
-	--color-dark-400: oklch(0.9096 0.1145 89.71);
-	--color-dark-500: oklch(0.8801 0.1364 86.37);
-	--color-dark: oklch(0.8446 0.1525 80.6);
-	--color-dark-700: oklch(0.7103 0.1366 75.73);
-	--color-dark-800: oklch(0.5798 0.1182 70.17);
-	--color-dark-900: oklch(0.4494 0.0968 65.21);
-	--color-dark-950: oklch(0.3213 0.0737 62.38);
-	--color-primaryBlack: oklch(0.1163 0.0536 267.09);
-	--color-primaryWhite: oklch(0.9614 0.0013 286.38);
-	--color-darkBlack: oklch(0.1832 0.0349 86.63);
-	--color-darkWhite: oklch(0.9619 0.0011 17.18);
-	--color-success: oklch(0.7041 0.1417 167.08);
-	--color-warning: oklch(0.5582 0.153956 47.1861);
-	--color-error: oklch(0.5636 0.2231 28.46);
-	--color-info: oklch(0.4818 0.1402 261.52);
-	--color-extend0: oklch(0.7028 0.1492 235.06);
-	--color-extend1: oklch(0.7021 0.1938 38.14);
-	--color-extend2: oklch(0.4815 0.10687 161.2119);
+	--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.9612 0 0);
-	--color-gray-100: oklch(0.9249 0 0);
-	--color-gray-200: oklch(0.8452 0 0);
-	--color-gray-300: oklch(0.7668 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.5999 0 0);
-	--color-gray-600: oklch(0.5103 0 0);
-	--color-gray-700: oklch(0.4202 0 0);
-	--color-gray-800: oklch(0.3211 0 0);
-	--color-gray-900: oklch(0.2178 0 0);
-	--color-gray-950: oklch(0.1591 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;
 
 	--font-Trueno: 'Trueno', Trueno;

packages/stdf/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'
+			}
 		]
 	}
 };

packages/stdf/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'
+			}
 		]
 	}
 };

packages/stdf/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.754 0.139 232.661)', // #38bdf8 hsl(198, 93%, 60%)
+				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'
+			}
 		]
 	}
 };

packages/stdf/src/data/themes/index.ts

@@ -4,76 +4,12 @@ import AzurePink from './azurePink.js';
 import SmartLive from './smartLive.js';
 import CamelliaRed from './camelliaRed.js';
 import Nintendo from './nintendo.js';
-import type { ThemeProps } from '../../lib/theme/types.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) => {
-		if (Array.isArray(item)) return;
-		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 default [
-	{ 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) }
+	{ 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 }
 ];

packages/stdf/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'
+			}
 		]
 	}
 };

packages/stdf/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'
+			}
 		]
 	}
 };

packages/stdf/src/lib/theme/stdf.ts

@@ -4,45 +4,54 @@ const STDFTheme: ThemeProps = {
 	name: 'STDF',
 	color: {
 		primary: {
-			50: '245, 248, 255',
-			100: '232, 238, 255',
-			200: '187, 203, 254',
-			300: '143, 165, 253',
-			400: '99, 124, 253',
-			500: '55, 81, 252',
-			default: '11, 36, 251',
-			700: '7, 20, 207',
-			800: '4, 9, 164',
-			900: '1, 1, 120',
-			950: '3, 0, 77'
+			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',
-			100: '255, 251, 232',
-			200: '255, 244, 199',
-			300: '255, 234, 166',
-			400: '255, 222, 133',
-			500: '255, 209, 100',
-			default: '255, 192, 67',
-			700: '210, 148, 41',
-			800: '166, 108, 22',
-			900: '121, 72, 8',
-			950: '77, 41, 0'
+			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',
-		primaryWhite: '242, 242, 243',
-		darkBlack: '25, 17, 1',
-		darkWhite: '243, 242, 242',
+		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',
-			warning: '185, 80, 0',
-			error: '218, 20, 20',
-			info: '46, 90, 172'
+			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' },
-			{ color: '255, 105, 55', alias: 'Svelte' },
-			{ color: '0, 112, 74', alias: 'Starbucks' }
+			{
+				color: 'oklch(0.703 0.149 235.059)', // #00acee hsl(197, 100%, 47%)
+				alias: 'Twitter'
+			},
+			{
+				color: 'oklch(0.702 0.194 38.137)', // #ff6937 hsl(15, 100%, 61%)
+				alias: 'Svelte'
+			},
+			{
+				color: 'oklch(0.482 0.107 161.212)', // #00704a hsl(160, 100%, 22%)
+				alias: 'Starbucks'
+			}
 		]
 	}
 };

packages/stdf/src/lib/theme/switchTheme.ts

@@ -1,32 +1,13 @@
 import type { ThemeProps } from './types.js';
 
-/**
- * 传入 hex 格式的颜色值，返回 rgb '255, 255, 255' 格式的字符串
- * Pass in the color value of hex format and return the string of rgb '255, 255, 255' format
- * @example
- * hexToRgb('#ffffff') // '255, 255, 255'
- */
-const hexToRgb = (hex: string): string => {
-	if (!/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(hex)) {
-		return hex;
-	}
-	hex = hex.replace('#', '');
-	const r = parseInt(hex.substring(0, 2), 16);
-	const g = parseInt(hex.substring(2, 4), 16);
-	const b = parseInt(hex.substring(4, 6), 16);
-	return r + ', ' + g + ', ' + b;
-};
-
 /**
  * 给 HTML 元素设置 CSS 变量，用于切换主题
  * Let the HTML element set the CSS variable for switching themes
  * @example
- * setPropertyFunc('--theme-primary', '#000000');
+ * setPropertyFunc('--primary', '#000000');
  */
 const setPropertyFunc: (name: string, value: string) => void = (name, value) => {
-	// 防止传入的是 hex 格式，做一下处理 hexToRgb
-	// Prevent passing in hex format and do some processing hexToRgb
-	document.documentElement.style.setProperty(name, hexToRgb(value));
+	document.documentElement.style.setProperty(name, value);
 };
 
 /**
@@ -39,23 +20,24 @@ const setPropertyFunc: (name: string, value: string) => void = (name, value) =>
 const switchTheme = (theme: ThemeProps): void => {
 	const { color } = theme;
 	for (const [key, value] of Object.entries(color.primary)) {
-		setPropertyFunc(key === 'default' ? '--theme-color-primary' : `--theme-color-primary-${key}`, value);
+		setPropertyFunc(key === 'default' ? '--color-primary' : `--color-primary-${key}`, value);
 	}
 	for (const [key, value] of Object.entries(color.dark)) {
-		setPropertyFunc(key === 'default' ? '--theme-color-dark' : `--theme-color-dark-${key}`, value);
+		setPropertyFunc(key === 'default' ? '--color-dark' : `--color-dark-${key}`, value);
 	}
-	setPropertyFunc('--theme-color-functional-success', color.functional.success);
-	setPropertyFunc('--theme-color-functional-warning', color.functional.warning);
-	setPropertyFunc('--theme-color-functional-error', color.functional.error);
-	setPropertyFunc('--theme-color-functional-info', color.functional.info);
-	setPropertyFunc('--theme-color-primaryBlack', color.primaryBlack);
-	setPropertyFunc('--theme-color-primaryWhite', color.primaryWhite);
-	setPropertyFunc('--theme-color-darkBlack', color.darkBlack);
-	setPropertyFunc('--theme-color-darkWhite', color.darkWhite);
+	setPropertyFunc('--color-success', color.functional.success);
+	setPropertyFunc('--color-warning', color.functional.warning);
+	setPropertyFunc('--color-error', color.functional.error);
+	setPropertyFunc('--color-info', color.functional.info);
+	setPropertyFunc('--color-primaryBlack', color.primaryBlack);
+	setPropertyFunc('--color-primaryWhite', color.primaryWhite);
+	setPropertyFunc('--color-darkBlack', color.darkBlack);
+	setPropertyFunc('--color-darkWhite', color.darkWhite);
 	if (color.extend.length > 0) {
 		color.extend.forEach((item, i) => {
 			if ('color' in item) {
-				setPropertyFunc(`--theme-color-extend${i}`, item.color);
+				setPropertyFunc(`--color-extend${i}`, item.color);
+				setPropertyFunc(`--color-${item.alias}`, item.color);
 			}
 		});
 	}

packages/stdf/src/routes/components/ThemeSwitch.svelte

@@ -13,11 +13,10 @@
 		currentColor = item.name;
 		switchTheme(item.theme);
 	};
-	const bgFunc = (str: string) => (str.charAt(0) === '#' ? str : `rgb(${str})`);
 </script>
 
 <div class="my-4 flex flex-col flex-wrap gap-2">
-	{#each themes as item}
+	{#each themes as item (item.name)}
 		<button
 			class="flex items-center justify-between gap-2 border p-2 {currentColor === item.name
 				? 'border-primary dark:border-dark'
@@ -36,21 +35,21 @@
 			<div class="flex justify-between gap-2">
 				<!-- theme  -->
 				<div class="rounded-xs flex overflow-hidden">
-					<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="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="rounded-xs h-3 w-3" style="background-color: {bgFunc(item.theme.color.functional.success)};"></div>
-						<div class="rounded-xs h-3 w-3" style="background-color: {bgFunc(item.theme.color.functional.warning)};"></div>
-						<div class="rounded-xs h-3 w-3" style="background-color: {bgFunc(item.theme.color.functional.error)};"></div>
-						<div class="rounded-xs h-3 w-3" 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 gap-0.5">
-						{#each item.theme.color?.extend ?? [] as child}
-							<div class="rounded-xs h-3 w-3" style="background-color: {bgFunc(child.color)};"></div>
+						{#each item.theme.color?.extend ?? [] as child (child.alias)}
+							<div class="rounded-xs h-3 w-3" style="background-color: {child.color};"></div>
 						{/each}
 					</div>
 				</div>

packages/stdf/tailwind.config.ts

@@ -1,76 +0,0 @@
-export default {
-	content: ['./src/**/*.{html,js,svelte,ts}'],
-	theme: {
-		colors: {
-			// 主题色
-			// Theme Color
-			primary: {
-				50: 'rgba(var(--theme-color-primary-50), <alpha-value>)',
-				100: 'rgba(var(--theme-color-primary-100), <alpha-value>)',
-				200: 'rgba(var(--theme-color-primary-200), <alpha-value>)',
-				300: 'rgba(var(--theme-color-primary-300), <alpha-value>)',
-				400: 'rgba(var(--theme-color-primary-400), <alpha-value>)',
-				500: 'rgba(var(--theme-color-primary-500), <alpha-value>)',
-				DEFAULT: 'rgba(var(--theme-color-primary), <alpha-value>)',
-				700: 'rgba(var(--theme-color-primary-700), <alpha-value>)',
-				800: 'rgba(var(--theme-color-primary-800), <alpha-value>)',
-				900: 'rgba(var(--theme-color-primary-900), <alpha-value>)',
-				950: 'rgba(var(--theme-color-primary-950), <alpha-value>)'
-			},
-			dark: {
-				50: 'rgba(var(--theme-color-dark-50), <alpha-value>)',
-				100: 'rgba(var(--theme-color-dark-100), <alpha-value>)',
-				200: 'rgba(var(--theme-color-dark-200), <alpha-value>)',
-				300: 'rgba(var(--theme-color-dark-300), <alpha-value>)',
-				400: 'rgba(var(--theme-color-dark-400), <alpha-value>)',
-				500: 'rgba(var(--theme-color-dark-500), <alpha-value>)',
-				DEFAULT: 'rgba(var(--theme-color-dark), <alpha-value>)',
-				700: 'rgba(var(--theme-color-dark-700), <alpha-value>)',
-				800: 'rgba(var(--theme-color-dark-800), <alpha-value>)',
-				900: 'rgba(var(--theme-color-dark-900), <alpha-value>)',
-				950: 'rgba(var(--theme-color-dark-950), <alpha-value>)'
-			},
-			primaryBlack: 'rgba(var(--theme-color-primaryBlack), <alpha-value>)',
-			primaryWhite: 'rgba(var(--theme-color-primaryWhite), <alpha-value>)',
-			darkBlack: 'rgba(var(--theme-color-darkBlack), <alpha-value>)',
-			darkWhite: 'rgba(var(--theme-color-darkWhite), <alpha-value>)',
-
-			// 功能色
-			// Functional Color
-			success: 'rgba(var(--theme-color-functional-success), <alpha-value>)',
-			warning: 'rgba(var(--theme-color-functional-warning), <alpha-value>)',
-			error: 'rgba(var(--theme-color-functional-error), <alpha-value>)',
-			info: 'rgba(var(--theme-color-functional-info), <alpha-value>)',
-
-			// 扩展色
-			// Extended Color
-			extend0: 'rgba(var(--theme-color-extend0), <alpha-value>)',
-			extend1: 'rgba(var(--theme-color-extend1), <alpha-value>)',
-			extend2: 'rgba(var(--theme-color-extend2), <alpha-value>)',
-
-			// 中性色
-			// Neutral Color
-			black: '#000000',
-			white: '#ffffff',
-			gray: {
-				50: '#f2f2f2',
-				100: '#e6e6e6',
-				200: '#cccccc',
-				300: '#b3b3b3',
-				400: '#999999',
-				500: '#808080',
-				600: '#666666',
-				700: '#4D4D4D',
-				800: '#333333',
-				900: '#1A1A1A',
-				950: '#0D0D0D'
-			},
-			transparent: 'transparent'
-		},
-		extend: {
-			fontFamily: { Trueno: 'Trueno' }
-		}
-	},
-	darkMode: 'class',
-	plugins: []
-};