首页 发现 帮助
登录
safwan
/
stdf
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

[demo]v0.4.0

dufu1991 2 年之前
父节点
93eccd7d2b
当前提交
360d564ab5
共有 51 个文件被更改，包括 712 次插入 和 181 次删除
分列视图 显示文件统计
  1. 38 0
      demo/src/app.css
  2. 15 15
      demo/src/app.html
  3. 46 0
      demo/src/data/themes/AzurePink.js
  4. 46 0
      demo/src/data/themes/CamelliaRed.js
  5. 46 0
      demo/src/data/themes/Nintendo.js
  6. 46 0
      demo/src/data/themes/SmartLive.js
  7. 46 0
      demo/src/data/themes/chameleon.js
  8. 78 0
      demo/src/data/themes/index.js
  9. 1 0
      demo/src/lib/icons/ri-palette-line.svg
  10. 1 0
      demo/src/lib/icons/ri-user-add-line.svg
  11. 25 5
      demo/src/routes/+layout.svelte
  12. 1 1
      demo/src/routes/+page.svelte
  13. 64 0
      demo/src/routes/components/ThemeSwitch.svelte
  14. 50 7
      demo/src/routes/en_US/avatar/+page.svelte
  15. 1 1
      demo/src/routes/en_US/cell/+page.svelte
  16. 4 4
      demo/src/routes/en_US/checkbox/+page.svelte
  17. 3 3
      demo/src/routes/en_US/divider/+page.svelte
  18. 14 22
      demo/src/routes/en_US/grids/+page.svelte
  19. 6 6
      demo/src/routes/en_US/icon/+page.svelte
  20. 1 1
      demo/src/routes/en_US/input/+page.svelte
  21. 3 3
      demo/src/routes/en_US/loading/+page.svelte
  22. 2 2
      demo/src/routes/en_US/navBar/+page.svelte
  23. 1 1
      demo/src/routes/en_US/noticeBar/+page.svelte
  24. 1 1
      demo/src/routes/en_US/progress/+page.svelte
  25. 3 3
      demo/src/routes/en_US/radio/+page.svelte
  26. 1 1
      demo/src/routes/en_US/rate/+page.svelte
  27. 1 1
      demo/src/routes/en_US/slider/+page.svelte
  28. 1 1
      demo/src/routes/en_US/steps/+page.svelte
  29. 2 2
      demo/src/routes/en_US/swiper/+page.svelte
  30. 4 4
      demo/src/routes/en_US/tabBar/+page.svelte
  31. 1 1
      demo/src/routes/en_US/toast/+page.svelte
  32. 52 9
      demo/src/routes/zh_CN/avatar/+page.svelte
  33. 4 4
      demo/src/routes/zh_CN/button/+page.svelte
  34. 1 1
      demo/src/routes/zh_CN/cell/+page.svelte
  35. 4 4
      demo/src/routes/zh_CN/checkbox/+page.svelte
  36. 3 3
      demo/src/routes/zh_CN/divider/+page.svelte
  37. 14 22
      demo/src/routes/zh_CN/grids/+page.svelte
  38. 6 6
      demo/src/routes/zh_CN/icon/+page.svelte
  39. 1 1
      demo/src/routes/zh_CN/input/+page.svelte
  40. 4 4
      demo/src/routes/zh_CN/loading/+page.svelte
  41. 2 2
      demo/src/routes/zh_CN/navBar/+page.svelte
  42. 1 1
      demo/src/routes/zh_CN/noticeBar/+page.svelte
  43. 1 1
      demo/src/routes/zh_CN/progress/+page.svelte
  44. 3 3
      demo/src/routes/zh_CN/radio/+page.svelte
  45. 1 1
      demo/src/routes/zh_CN/rate/+page.svelte
  46. 1 1
      demo/src/routes/zh_CN/slider/+page.svelte
  47. 1 1
      demo/src/routes/zh_CN/steps/+page.svelte
  48. 2 2
      demo/src/routes/zh_CN/swiper/+page.svelte
  49. 4 4
      demo/src/routes/zh_CN/tabBar/+page.svelte
  50. 1 1
      demo/src/routes/zh_CN/toast/+page.svelte
  51. 54 25
      demo/tailwind.config.js

+ 38 - 0
demo/src/app.css
查看文件 

@@ -2,6 +2,44 @@
 
 @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;
 
+	}
 
+}
 
+
 
 @font-face {
 
 	font-family: 'Trueno';
 
 	src: url('/fonts/Trueno.otf') format('opentype');

+ 15 - 15
demo/src/app.html
查看文件 

@@ -1,18 +1,18 @@
 
 <!doctype html>
 
 <html>
 
-	<head>
 
-		<meta charset="UTF-8" />
 
-		<link rel="icon" type="image/svg+xml" href="/stdf_dark.svg" media="(prefers-color-scheme: dark)" />
 
-		<link rel="icon" type="image/svg+xml" href="/stdf.svg" media="(prefers-color-scheme: light)" />
 
-		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
 
-		<title>Demo STDF</title>
 
-		%sveltekit.head%
 
-	</head>
 
 
-	<body
 
-		data-sveltekit-preload-data="hover"
 
-		class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90 relative min-h-screen text-justify w-screen antialiased"
 
-	>
 
-		<main style="display: contents">%sveltekit.body%</main>
 
-	</body>
 
-</html>
 
+<head>
 
+	<meta charset="UTF-8" />
 
+	<link rel="icon" type="image/svg+xml" href="/stdf_dark.svg" media="(prefers-color-scheme: dark)" />
 
+	<link rel="icon" type="image/svg+xml" href="/stdf.svg" media="(prefers-color-scheme: light)" />
 
+	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
 
+	<title>Demo STDF</title>
 
+	%sveltekit.head%
 
+</head>
 
+
 
+<body data-sveltekit-preload-data="hover"
 
+	class="bg-primaryWhite dark:bg-darkBlack text-black dark:text-white relative min-h-screen text-justify w-screen antialiased">
 
+	<main style="display: contents">%sveltekit.body%</main>
 
+</body>
 
+
 
+</html>

+ 46 - 0
demo/src/data/themes/AzurePink.js
查看文件 

@@ -0,0 +1,46 @@
 
+export default {
 
+	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
 
+		},
 
+		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
 
+		},
 
+		primaryBlack: '1, 1, 25', // #010119
 
+		primaryWhite: '242, 242, 243', // #F2F2F3
 
+		darkBlack: '25, 1, 13', // #19010D
 
+		darkWhite: '243, 242, 242', // #F3F2F2
 
+		functional: {
 
+			success: '43, 164, 23', // #2ba417
 
+			warning: '227, 115, 24', // #e37318
 
+			error: '213, 73, 65', // #d54941
 
+			info: '0, 82, 217', // #0052d9
 
+		},
 
+		extend: [
 
+			{ color: '20, 40, 160', alias: 'Samsung' }, // #1428A0
 
+			{ color: '253, 73, 0', alias: 'Xiaomi' }, // #fd4900
 
+			{ color: '4, 106, 56', alias: 'OPPO' }, // ##046a38
 
+		],
 
+	},
 
+};

+ 46 - 0
demo/src/data/themes/CamelliaRed.js
查看文件 

@@ -0,0 +1,46 @@
 
+export default {
 
+	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
 
+		},
 
+		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
 
+		},
 
+		primaryBlack: '25, 1, 3', // #190103
 
+		primaryWhite: '243, 242, 242', // #F3F2F2
 
+		darkBlack: '16, 1, 25', // #100119
 
+		darkWhite: '242, 242, 243', // #F2F2F3
 
+		functional: {
 
+			success: '82, 196, 26', // #52c41a
 
+			warning: '250, 173, 20', // #faad14
 
+			error: '255, 77, 79', // #ff4d4f
 
+			info: '22, 119, 255', // #1677ff
 
+		},
 
+		extend: [
 
+			{ color: '59, 89, 152', alias: 'Facebook' }, // #3b5998
 
+			{ color: '237, 28, 22', alias: 'CocaCola' },
 
+			{ color: '0, 104, 181', alias: 'Intel' }, // #0068b5
 
+		],
 
+	},
 
+};

+ 46 - 0
demo/src/data/themes/Nintendo.js
查看文件 

@@ -0,0 +1,46 @@
 
+export default {
 
+	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
 
+		},
 
+		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
 
+		},
 
+		primaryBlack: '25, 1, 3', // #190103
 
+		primaryWhite: '243, 242, 242', // #F3F2F2
 
+		darkBlack: '1, 22, 25', // #011619
 
+		darkWhite: '242, 243, 243', // #F2F3F3
 
+		functional: {
 
+			success: '0, 180, 42', // #00b42a
 
+			warning: '255, 125, 0', // #ff7d00
 
+			error: '245, 63, 63', // #f53f3f
 
+			info: '22, 93, 255', // #165dff
 
+		},
 
+		extend: [
 
+			{ color: '0, 82, 217', alias: 'Tencent' }, // #0052d9
 
+			{ color: '26, 173, 25', alias: 'WeChat' }, // #1aad19
 
+			{ color: '243, 112, 33', alias: 'Hermès' }, // #f37021
 
+		],
 
+	},
 
+};

+ 46 - 0
demo/src/data/themes/SmartLive.js
查看文件 

@@ -0,0 +1,46 @@
 
+export default {
 
+	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
 
+		},
 
+		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
 
+		},
 
+		primaryBlack: '13, 1, 25', // #0D0119
 
+		primaryWhite: '242, 242, 243', // #F2F2F3
 
+		darkBlack: '25, 24, 1', // #191801
 
+		darkWhite: '243, 243, 242', // #F3F3F2
 
+		functional: {
 
+			success: '21, 91, 54', // #155b36
 
+			warning: '208, 126, 11', // #d07e0b
 
+			error: '218, 20, 20', // #da1414
 
+			info: '99, 176, 227', // #63b0e3
 
+		},
 
+		extend: [
 
+			{ color: '118, 185, 0', alias: 'NVIDIA' }, // #76b900
 
+			{ color: '251, 114, 153', alias: 'bilibili' }, // #fb7299
 
+			{ color: '22, 119, 255', alias: 'AliPay' }, // #1677ff
 
+		],
 
+	},
 
+};

+ 46 - 0
demo/src/data/themes/chameleon.js
查看文件 

@@ -0,0 +1,46 @@
 
+export default {
 
+	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
 
+		},
 
+		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
 
+		},
 
+		primaryBlack: '1, 25, 12', // #01190C
 
+		primaryWhite: '242, 243, 242', // #F2F3F2
 
+		darkBlack: '25, 1, 23', // #190117
 
+		darkWhite: '243, 242, 243', // #F3F2F3
 
+		functional: {
 
+			success: '103, 194, 58', // #67c23a
 
+			warning: '230, 162, 60', // #e6a23c
 
+			error: '245, 108, 108', // #f56c6c
 
+			info: '144, 147, 153', // #909399
 
+		},
 
+		extend: [
 
+			{ color: '56, 189, 248', alias: 'Tailwind' }, // #38bdf8
 
+			{ color: '194, 12, 12', alias: 'NetEaseCloudMusic' }, // #c20c0c
 
+			{ color: '65, 95, 255', alias: 'vivo' }, // #415fff
 
+		],
 
+	},
 
+};

+ 78 - 0
demo/src/data/themes/index.js
查看文件 

@@ -0,0 +1,78 @@
 
+import { stdfTheme } from '../../../../packages/stdf/theme';
 
+import chameleonTheme from './chameleon';
 
+import AzurePink from './AzurePink';
 
+import SmartLive from './SmartLive';
 
+import CamelliaRed from './CamelliaRed';
 
+import Nintendo from './Nintendo';
 
+
 
+/**
 
+ * 传入 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 => {
 
+	// 如果传入的是 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 => {
 
+	const obj = theme.color;
 
+	const primary = obj.primary;
 
+	for (const key in primary) {
 
+		if (Object.hasOwnProperty.call(primary, key)) {
 
+			const element = primary[key];
 
+			if (typeof element === 'string' && element.includes(',')) {
 
+				primary[key] = rgbToHex(element);
 
+			}
 
+		}
 
+	}
 
+	const dark = obj.dark;
 
+	for (const key in dark) {
 
+		if (Object.hasOwnProperty.call(dark, key)) {
 
+			const element = dark[key];
 
+			if (typeof element === 'string' && element.includes(',')) {
 
+				dark[key] = 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 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: chameleonTheme.name, theme: rgbToHexFunc(chameleonTheme) },
 
+	{ name_CN: '慧活力', name: SmartLive.name, theme: rgbToHexFunc(SmartLive) },
 
+	{ name_CN: '山茶红', name: CamelliaRed.name, theme: rgbToHexFunc(CamelliaRed) },
 
+];

+ 1 - 0
demo/src/lib/icons/ri-palette-line.svg
查看文件 

@@ -0,0 +1 @@
 
+<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 2ZM10.8111 18.1111C10.8111 16.0843 12.451 14.4444 14.4778 14.4444H16.4444C18.4065 14.4444 20 12.851 20 10.8889C20 7.1392 16.4677 4 12 4C7.58235 4 4 7.58235 4 12C4 16.19 7.2226 19.6285 11.324 19.9718C10.9948 19.4168 10.8111 18.7761 10.8111 18.1111ZM7.5 12C6.67157 12 6 11.3284 6 10.5C6 9.67157 6.67157 9 7.5 9C8.32843 9 9 9.67157 9 10.5C9 11.3284 8.32843 12 7.5 12ZM16.5 12C15.6716 12 15 11.3284 15 10.5C15 9.67157 15.6716 9 16.5 9C17.3284 9 18 9.67157 18 10.5C18 11.3284 17.3284 12 16.5 12ZM12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5C13.5 8.32843 12.8284 9 12 9Z"></path></svg>

+ 1 - 0
demo/src/lib/icons/ri-user-add-line.svg
查看文件 

@@ -0,0 +1 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 14.252V16.3414C13.3744 16.1203 12.7013 16 12 16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14C12.6906 14 13.3608 14.0875 14 14.252ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM18 17V14H20V17H23V19H20V22H18V19H15V17H18Z"></path></svg>

+ 25 - 5
demo/src/routes/+layout.svelte
查看文件 

@@ -7,6 +7,7 @@
 
 	import en_US from '../../../packages/stdf/lang/en_US';
 
 	import '../app.css';
 
 	import menuList from '../data/menuList';
 
+	import ThemeSwitch from './components/ThemeSwitch.svelte';
 
 
 	// 循环 menuList，将所有元素的 childs 组成一个数组
 
 	// Cycle menuList, and combine the childs of all elements into an array
 
@@ -49,8 +50,8 @@
 
 		document.documentElement.classList.remove('dark');
 
 	}
 
 
-	//手动切换主题
 
-	// manually switch theme
 
+	//手动切换亮暗模式
 
+	// manually switch light and dark mode
 
 	const toggleFun = () => {
 
 		if (theme === 'dark') {
 
 			// 切换到light
 
@@ -120,10 +121,17 @@
 
 			goto(`/${englishMode ? 'en_US' : 'zh_CN'}/${nav}`);
 
 		}
 
 	});
 
+
 
+	let showTheme = false;
 
+	// 切换主题
 
+	// switch theme
 
+	const switchThemeFunc = () => {
 
+		showTheme = !showTheme;
 
+	};
 
 </script>
 
 
-<main class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90 relative min-h-screen text-justify w-screen antialiased">
 
-	<div class="sticky z-10 top-0">
 
+<main class="bg-primaryWhite dark:bg-darkBlack text-black dark:text-white relative min-h-screen text-justify w-screen antialiased">
 
+	<div class="sticky z-[100] top-0">
 
 		<NavBar
 
 			title={$page.url.pathname === '/'
 
 				? isZh
 
@@ -133,7 +141,7 @@
 
 				  (isZh ? '示例' : ' Demo')}
 
 			left={showLeft ? 'back' : ''}
 
 			rightSlot
 
-			injClass="bg-white/60 dark:bg-gray1/60 backdrop-blur"
 
+			injClass="bg-white/60 dark:bg-black/60 backdrop-blur"
 
 			on:clickleft={() => window.history.back()}
 
 		>
 
 			<div slot="right" class="flex text-center">
 
@@ -158,8 +166,20 @@
 
 				<div class="h-12 w-10 leading-10" on:click={toggleFun}>
 
 					<Icon name={theme === 'dark' ? 'ri-moon-fill' : 'ri-sun-line'} theme={true} />
 
 				</div>
 
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
 
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
 
+				<div class="h-12 w-10 leading-10" on:click={switchThemeFunc}>
 
+					<Icon name="ri-palette-line" theme={true} />
 
+				</div>
 
 			</div>
 
 		</NavBar>
 
 	</div>
 
 	<slot />
 
+	<div
 
+		class="fixed z-[1000] {showTheme
 
+			? 'right-0'
 
+			: '-right-80'} transition-all duration-500 top-12 bg-white dark:bg-black px-4 shadow rounded-xl"
 
+	>
 
+		<ThemeSwitch />
 
+	</div>
 
 </main>

+ 1 - 1
demo/src/routes/+page.svelte
查看文件 

@@ -36,7 +36,7 @@
 
 <div class="flex flex-col py-4">
 
 	<div>
 
 		{#each menuList as menu}
 
-			<div class="text-sm px-4 mt-8 mb-2 text-gray6">{isZh ? menu.class : menu.class_en}</div>
 
+			<div class="text-sm px-4 mt-8 mb-2 text-gray-500">{isZh ? menu.class : menu.class_en}</div>
 
 			<CellGroup>
 
 				{#each menu.childs as child, i}
 
 					<a href={(isZh ? 'zh_CN/' : 'en_US/') + child.nav}>

+ 64 - 0
demo/src/routes/components/ThemeSwitch.svelte
查看文件 

@@ -0,0 +1,64 @@
 
+<script>
 
+	import { switchTheme } from '../../../../packages/stdf/theme';
 
+	import themes from '../../data/themes';
 
+
 
+	const isZh = sessionStorage.getItem('lang') === 'zh_CN';
 
+
 
+	let currentColor = 'STDF';
 
+
 
+	const selectColorFunc = (e, item) => {
 
+		// 阻止冒泡
 
+		// Prevent bubbling
 
+		e.stopPropagation();
 
+		currentColor = item.name;
 
+		switchTheme(item.theme);
 
+	};
 
+	const bgFunc = str => {
 
+		return str.charAt(0) === '#' ? str : `rgb(${str})`;
 
+	};
 
+</script>
 
+
 
+<div class="flex flex-col gap-2 flex-wrap my-4">
 
+	{#each themes as item}
 
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
 
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
 
+		<div
 
+			class="flex p-2 gap-2 justify-between items-center border {currentColor === item.name
 
+				? 'border-primary dark:border-dark'
 
+				: 'border-gray-100 dark:border-gray-700'} rounded-md cursor-pointer"
 
+			on:click={e => selectColorFunc(e, item)}
 
+		>
 
+			<div class="w-5 h-5 {currentColor === 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"
 
+					>
 
+					</path>
 
+				</svg>
 
+			</div>
 
+			<div class="whitespace-nowrap">{isZh ? item.name_CN : item.name}</div>
 
+			<div class="flex gap-2 justify-between">
 
+				<!-- theme  -->
 
+				<div class="flex rounded-sm overflow-hidden">
 
+					<div class="w-6 bg-primary" style="background-color: {bgFunc(item.theme.color.primary.default)};"></div>
 
+					<div class="w-6 bg-dark" style="background-color: {bgFunc(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="w-3 h-3 rounded-sm" style="background-color: {bgFunc(item.theme.color.functional.success)};"></div>
 
+						<div class="w-3 h-3 rounded-sm" style="background-color: {bgFunc(item.theme.color.functional.warning)};"></div>
 
+						<div class="w-3 h-3 rounded-sm" style="background-color: {bgFunc(item.theme.color.functional.error)};"></div>
 
+						<div class="w-3 h-3 rounded-sm" style="background-color: {bgFunc(item.theme.color.functional.info)};"></div>
 
+					</div>
 
+					<!-- Extended -->
 
+					<div class="flex gap-0.5">
 
+						{#each item.theme.color.extend as child}
 
+							<div class="w-3 h-3 rounded-sm" style="background-color: {bgFunc(child.color)};"></div>
 
+						{/each}
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	{/each}
 
+</div>

+ 50 - 7
demo/src/routes/en_US/avatar/+page.svelte
查看文件 

@@ -1,6 +1,6 @@
 
 <!-- Avatar Demo -->
 
 <script>
 
-	import { Avatar } from '../../../../../packages/stdf/components';
 
+	import { Avatar, Avatars, Divider } from '../../../../../packages/stdf/components';
 
 
 	const icons = [
 
 		{ icon: { name: 'ri-aliens-fill', theme: true, top: -1, size: 16 }, size: 'xs' },
 
@@ -8,19 +8,32 @@
 
 		{ icon: { name: 'ri-shield-user-line', theme: true, top: 0, size: 32 }, size: 'md' },
 
 		{ icon: { name: 'ri-emotion-line', theme: true, top: -1, size: 46 }, size: 'lg' },
 
 	];
 
+
 
+	const data = [
 
+		{ image: '/assets/images/dota_火女.png' },
 
+		{ image: '/assets/images/dota_火枪.png' },
 
+		{ image: '/assets/images/dota_小牛.png' },
 
+		{ image: '/assets/images/wall_1.jpg' },
 
+		{ image: '/assets/images/dota_斯温.png' },
 
+		{ image: '/assets/images/dota_水人.png' },
 
+		{ image: '/assets/images/wall_2.jpg' },
 
+		{ image: '/assets/images/wall_3.jpg' },
 
+		{ image: '/assets/images/wall_4.jpg' },
 
+		{ image: '/assets/images/avatar_1.jpg' },
 
+		{ image: '/assets/images/dota_火枪.png' },
 
+		{ image: '/assets/images/dota_小牛.png' },
 
+		{ image: '/assets/images/dota_斯温.png' },
 
+	];
 
 </script>
 
 
 <div class="py-8 px-4">
 
 	<div class="font-bold">Different rounded corners</div>
 
 	<div class="flex justify-between mt-4 mb-8">
 
-		<Avatar />
 
 		<Avatar radius="none" />
 
-		<Avatar radius="full" />
 
-	</div>
 
-	<div class="flex justify-between mt-4 mb-8">
 
+		<Avatar />
 
 		<Avatar radius="xl" />
 
 		<Avatar radius="2xl" />
 
-		<Avatar radius="3xl" />
 
+		<Avatar radius="full" />
 
 	</div>
 
 
 	<div class="font-bold">Different picture types and size</div>
 
@@ -44,7 +57,7 @@
 
 		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="solid" />
 
 		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="dashed" />
 
 		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="dotted" />
 
-		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="solid" injClass="border-[red] dark:border-[green]" />
 
+		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="solid" injClass="border-[red] dark:border-extend1" />
 
 	</div>
 
 
 	<div class="font-bold">Replace text</div>
 
@@ -79,4 +92,34 @@
 
 			<Avatar radius="full" size="xl" alt="A" altSize="xl" />
 
 		</div>
 
 	</div>
 
+
 
+	<Divider />
 
+
 
+	<div class="font-bold text-2xl my-4">Avatar group</div>
 
+	<div class="font-bold mt-6 mb-2">Default</div>
 
+	<Avatars {data}></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">smaller</div>
 
+	<Avatars {data} size="sm" lineWidth="1"></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">loose</div>
 
+	<Avatars {data} compact={4}></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">Border thick point</div>
 
+	<Avatars {data} lineWidth="8"></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">Make the corners smaller</div>
 
+	<Avatars {data} radius="2xl"></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">Reverse</div>
 
+	<Avatars {data} reverse></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">A maximum of 6 are displayed</div>
 
+	<Avatars {data} max={6}></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">Top layer display increase</div>
 
+	<Avatars {data} top="add"></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">Do not show top layer</div>
 
+	<Avatars {data} top="none"></Avatars>
 
 </div>

+ 1 - 1
demo/src/routes/en_US/cell/+page.svelte
查看文件 

@@ -117,7 +117,7 @@
 
 	</div>
 
 	<div>
 
 		<Cell title="Custom text color" injClass="text-primary dark:text-dark" />
 
-		<Cell title="Custom background color" injClass="!bg-purple/20 active:!bg-purple/10" line={false} />
 
+		<Cell title="Custom background color" injClass="!bg-extend0/20 active:!bg-extend0/10" line={false} />
 
 	</div>
 
 	<div>
 
 		<Cell love title="Love version" />

+ 4 - 4
demo/src/routes/en_US/checkbox/+page.svelte
查看文件 

@@ -190,7 +190,7 @@
 
 					class={`border py-0.5 px-5 text-sm rounded ${
 
 						checkeds.includes(item.name)
 
 							? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
 
-							: 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
 
+							: 'bg-gray-100 dark:bg-gray-600 border-gray-200 dark:border-gray-500'
 
 					}`}
 
 				>
 
 					{item.label}
 
@@ -211,7 +211,7 @@
 
 					class={`border py-0.5 px-1 m-1 text-sm rounded ${
 
 						checkInlines.includes(item)
 
 							? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
 
-							: 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
 
+							: 'bg-gray-100 dark:bg-gray-600 border-gray-200 dark:border-gray-500'
 
 					}`}
 
 				>
 
 					{item}
 
@@ -245,7 +245,7 @@
 
 			<Checkbox {checkeds} name={item.name} textPosition="l">
 
 				{item.label}
 
 				{#if i !== dota.length - 1}
 
-					<div class="h-px mt-1 bg-gray9 dark:bg-gray5" />
 
+					<div class="h-px mt-1 bg-gray-200 dark:bg-gray-800" />
 
 				{/if}
 
 			</Checkbox>
 
 		{/each}
 
@@ -261,7 +261,7 @@
 
 						<div class="text-xs">{voice}</div>
 
 					{/each}
 
 					{#if i !== dotaVoices.length - 1}
 
-						<div class="h-px mt-1 bg-gray9 dark:bg-gray5" />
 
+						<div class="h-px mt-1 bg-gray-200 dark:bg-gray-800" />
 
 					{/if}
 
 				</div>
 
 			</Checkbox>

+ 3 - 3
demo/src/routes/en_US/divider/+page.svelte
查看文件 

@@ -43,7 +43,7 @@
 
 	<div>
 
 		<div class="p-4 font-bold">Custom color</div>
 
 		<Divider injClass="border-blue dark:border-yellow" />
 
-		<Divider text="Custom line" injClass="border-[red] dark:border-[green]" />
 
+		<Divider text="Custom line" injClass="border-[red] dark:border-extend1" />
 
 		<Divider text="Custom text" injClass="text-[red]" />
 
 		<Divider text="Custom lines and text" injClass="border-[red] text-[blue] dark:text-[yellow]" />
 
 		<Divider line="dashed" text="Custom dotted line" injClass="border-[#FF5722]" />
 
@@ -70,9 +70,9 @@
 
 			Increase
 
 			<Divider layout="v" mx="4" />
 
 			customize
 
-			<Divider layout="v" mx="4" injClass="border-[red] dark:border-[green]" />
 
+			<Divider layout="v" mx="4" injClass="border-[red] dark:border-extend1" />
 
 			color
 
-			<Divider line="dashed" layout="v" mx="4" injClass="border-[red] dark:border-[green]" />
 
+			<Divider line="dashed" layout="v" mx="4" injClass="border-[red] dark:border-extend1" />
 
 			Line style
 
 		</div>
 
 	</div>

+ 14 - 22
demo/src/routes/en_US/grids/+page.svelte
查看文件 

@@ -9,7 +9,7 @@
 
 		curentIndex === devices.length - 1 ? (curentIndex = 0) : curentIndex++;
 
 	};
 
 	let color = false;
 
-	$: colorCss = `${color ? ' bg-gradient-to-tr from-purple/70 to-orange/70' : ' bg-gray8 dark:bg-gray4'}`;
 
+	$: colorCss = `${color ? ' bg-gradient-to-tr from-extend0/70 to-extend2/70' : ' bg-gray-100 dark:bg-gray-700'}`;
 
 	const changeColorFun = e => {
 
 		color = e.detail;
 
 	};
 
@@ -112,23 +112,23 @@
 
 		<Grids cols={5} mx="0" my="0">
 
 			<Grid row={3}>
 
 				<div
 
-					class="flex flex-col justify-between bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center shadow dark:shadow-white/10"
 
+					class="flex flex-col justify-between bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center shadow dark:shadow-white/10"
 
 				>
 
 					<div>{weekDay}</div>
 
 					<div class="text-4xl">{day}</div>
 
-					<div class="text-gray6">{month}</div>
 
+					<div class="text-gray-600">{month}</div>
 
 				</div>
 
 			</Grid>
 
 			<Grid row={2}>
 
 				<div
 
-					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xl font-bold text-center flex flex-col justify-center shadow dark:shadow-white/10"
 
+					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xl font-bold text-center flex flex-col justify-center shadow dark:shadow-white/10"
 
 				>
 
 					{time}
 
 				</div>
 
 			</Grid>
 
 			<Grid row={2}>
 
 				<div
 
-					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
+					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
 				>
 
 					<div class="flex justify-center">
 
 						<Switch inside="slot" radius="full" on:change={changeColorFun}>
 
@@ -145,16 +145,12 @@
 
 			</Grid>
 
 
 			<Grid row={2} col={2}>
 
-				<div
 
-					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10"
 
-				>
 
+				<div class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10">
 
 					<Button fill="lineTheme" radius="full" on:click={changeDeviceFun}>Switching</Button>
 
 				</div>
 
 			</Grid>
 
 			<Grid row={2} col={2}>
 
-				<div
 
-					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex justify-around shadow dark:shadow-white/10 py-1"
 
-				>
 
+				<div class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex justify-around shadow dark:shadow-white/10 py-1">
 
 					<div class="flex flex-col justify-center">
 
 						{#if currentDevice === 'iOS'}
 
 							<Icon name="ri-apple-fill" size={30} />
 
@@ -200,7 +196,7 @@
 
 			</Grid>
 
 			<Grid row={2}>
 
 				<div
 
-					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
+					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
 				>
 
 					<div class="flex justify-center">
 
 						<Switch inside="slot" radius="full">
 
@@ -217,7 +213,7 @@
 
 			</Grid>
 
 			<Grid row={4}>
 
 				<div
 
-					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10"
 
+					class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10"
 
 				>
 
 					<div class="w-1/2 overflow-hidden">
 
 						<img class="block dark:hidden" src="/assets/stdf_512px.png" alt="" />
 
@@ -227,20 +223,16 @@
 
 				</div>
 
 			</Grid>
 
 			<Grid row={3}>
 
-				<div
 
-					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
-				>
 
+				<div class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10">
 
 					<div>92%</div>
 
 					<div class="animate-pulse">
 
-						<Icon name="ri-battery-2-charge-line" size={30} injClass="text-[green]" />
 
+						<Icon name="ri-battery-2-charge-line" size={30} injClass="text-extend1" />
 
 					</div>
 
 					<div>charging</div>
 
 				</div>
 
 			</Grid>
 
 			<Grid row={2}>
 
-				<div
 
-					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10"
 
-				>
 
+				<div class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10">
 
 					{#if currentDevice === 'iOS'}
 
 						<Icon name="ri-smartphone-line" size={30} />
 
 					{:else if currentDevice === 'Android'}
 
@@ -256,7 +248,7 @@
 
 			</Grid>
 
 			<Grid row={2}>
 
 				<div
 
-					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10 py-1"
 
+					class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10 py-1"
 
 				>
 
 					<div>
 
 						<Icon name="ri-sun-line" size={20} />
 
@@ -268,7 +260,7 @@
 
 			</Grid>
 
 			<Grid row={2}>
 
 				<div
 
-					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
+					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
 				>
 
 					<div class="flex justify-center">
 
 						<Switch inside="slot" radius="full">

+ 6 - 6
demo/src/routes/en_US/icon/+page.svelte
查看文件 

@@ -12,7 +12,7 @@
 
 			{#each icons as icon}
 
 				<div class="py-2 text-center flex-1">
 
 					<Icon name={icon} />
 
-					<div class="text-xs mt-2 text-gray6">{icon}</div>
 
+					<div class="text-xs mt-2">{icon}</div>
 
 				</div>
 
 			{/each}
 
 		</div>
 
@@ -33,7 +33,7 @@
 
 			{#each icons as icon, i}
 
 				<div class="py-2 text-center flex-1">
 
 					<Icon name={icon} size={18 + i * 6} />
 
-					<div class="text-xs mt-2 text-gray6">{18 + i * 6}</div>
 
+					<div class="text-xs mt-2">{18 + i * 6}</div>
 
 				</div>
 
 			{/each}
 
 		</div>
 
@@ -44,26 +44,26 @@
 
 			{#each icons as icon, i}
 
 				<div class="py-2 text-center flex-1">
 
 					<Icon name={icon} alpha={Number((0.2 + i * 0.2).toFixed(1))} />
 
-					<div class="text-xs mt-2 text-gray6">{(0.2 + i * 0.2).toFixed(1)}</div>
 
+					<div class="text-xs mt-2">{(0.2 + i * 0.2).toFixed(1)}</div>
 
 				</div>
 
 			{/each}
 
 		</div>
 
 	</div>
 
 	<div>
 
 		<div class="mb-2 font-bold text-xl">
 
-			Custom color<span class="ml-2 text-xs text-gray6 font-normal">By injClass</span>
 
+			Custom color<span class="ml-2 text-xs font-normal">By injClass</span>
 
 		</div>
 
 		<div class="flex flex-wrap justify-between">
 
 			{#each icons as icon}
 
 				<div class="py-2 text-center flex-1">
 
-					<Icon name={icon} injClass="text-[red] dark:text-green" />
 
+					<Icon name={icon} injClass="text-[red] dark:text-extend1" />
 
 				</div>
 
 			{/each}
 
 		</div>
 
 	</div>
 
 	<div>
 
 		<div class="mb-2 font-bold text-xl">
 
-			Custom color<span class="ml-2 text-xs text-gray6 font-normal">by slot</span>
 
+			Custom color<span class="ml-2 text-xs font-normal">by slot</span>
 
 		</div>
 
 		<div class="flex flex-wrap justify-between">
 
 			{#each icons as icon}

+ 1 - 1
demo/src/routes/en_US/input/+page.svelte
查看文件 

@@ -239,7 +239,7 @@
 
 >
 
 	<div slot="label5">
 
 		{#if mobileLength === 11}
 
-			<Icon name="ri-check-fill" injClass="text-[green]" size={14} />
 
+			<Icon name="ri-check-fill" injClass="text-extend1" size={14} />
 
 		{:else if mobileLength === 0}
 
 			<!-- none -->
 
 		{:else}

+ 3 - 3
demo/src/routes/en_US/loading/+page.svelte
查看文件 

@@ -53,7 +53,7 @@
 
 							<div class="text-xs text-center mt-4">{'1_' + i}</div>
 
 						</div>
 
 						<div
 
-							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
 
+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray-800 dark:bg-gray-100 text-white dark:text-black"
 
 						>
 
 							<div class="w-[30px] h-[30px]">
 
 								<Loading type={'1_' + i} inverse bind:speed />
 
@@ -61,7 +61,7 @@
 
 							<div class="text-xs text-center mt-4">{'1_' + i}</div>
 
 						</div>
 
 						<div
 
-							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
 
+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray-800 dark:bg-gray-100 text-white dark:text-black"
 
 						>
 
 							<div class="w-[30px] h-[30px]">
 
 								<Loading type={'1_' + i} theme inverse bind:speed />
 
@@ -96,7 +96,7 @@
 
 							<div class="text-xs text-center mt-4">{'2_' + i}</div>
 
 						</div>
 
 						<div
 
-							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
 
+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray-800 dark:bg-gray-100 text-white dark:text-black"
 
 						>
 
 							<div class="w-[30px] h-[30px]">
 
 								<Loading type={'2_' + i} inverse bind:speed />

+ 2 - 2
demo/src/routes/en_US/navBar/+page.svelte
查看文件 

@@ -38,10 +38,10 @@
 
 		rights={icons3}
 
 	/>
 
 
-	<NavBar title="Customize the background color by injClass" injClass="bg-[wheat] dark:bg-[purple]" />
 
+	<NavBar title="Customize the background color by injClass" injClass="bg-[wheat] dark:bg-extend0" />
 
 
 	<NavBar titleSlot>
 
-		<div slot="title" class="text-[red] dark:text-[green]">Customize text colors by slot</div>
 
+		<div slot="title" class="text-[red] dark:text-extend1">Customize text colors by slot</div>
 
 	</NavBar>
 
 
 	<NavBar titleSlot rightSlot>

+ 1 - 1
demo/src/routes/en_US/noticeBar/+page.svelte
查看文件 

@@ -59,5 +59,5 @@
 
 <div class="m-4 mt-8 font-bold text-lg">Custom style</div>
 
 <NoticeBar injClass="!text-error !bg-error/10" {textList}></NoticeBar>
 
 <NoticeBar leftIcon={{ name: 'ri-check-line', size: 16, top: -1 }} injClass="!text-success !bg-success/10" {textList}></NoticeBar>
 
-<NoticeBar injClass="!text-purple !bg-purple/10" {textList}></NoticeBar>
 
+<NoticeBar injClass="!text-extend0 !bg-extend0/10" {textList}></NoticeBar>
 
 <div class="pb-8"></div>

+ 1 - 1
demo/src/routes/en_US/progress/+page.svelte
查看文件 

@@ -79,7 +79,7 @@
 
 	<div class="flex flex-col space-y-4">
 
 		<Progress injClass="bg-success dark:bg-error" />
 
 		<Progress injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
 
-		<Progress percentPosition="block" injClass="bg-orange" />
 
+		<Progress percentPosition="block" injClass="bg-extend2" />
 
 		<Progress trackInjClass="!bg-primary/20 dark:!bg-dark/20" />
 
 	</div>

+ 3 - 3
demo/src/routes/en_US/radio/+page.svelte
查看文件 

@@ -105,7 +105,7 @@
 
 					class={`border py-0.5 px-5 text-sm rounded ${
 
 						value === item.name
 
 							? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
 
-							: 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
 
+							: 'bg-gray-100 dark:bg-gray-600 border-gray-200 dark:border-gray-500'
 
 					}`}
 
 				>
 
 					{item.label}
 
@@ -137,7 +137,7 @@
 
 			<Radio name={item.name} textPosition="l">
 
 				{item.label}
 
 				{#if i !== dota.length - 1}
 
-					<div class="h-px mt-1 bg-gray8 dark:bg-gray5" />
 
+					<div class="h-px mt-1 bg-gray-100 dark:bg-gray-800" />
 
 				{/if}
 
 			</Radio>
 
 		{/each}
 
@@ -153,7 +153,7 @@
 
 						<div class="text-xs">{voice}</div>
 
 					{/each}
 
 					{#if i !== dotaVoices.length - 1}
 
-						<div class="h-px mt-1 bg-gray8 dark:bg-gray5" />
 
+						<div class="h-px mt-1 bg-gray-100 dark:bg-gray-800" />
 
 					{/if}
 
 				</div>
 
 			</Radio>

+ 1 - 1
demo/src/routes/en_US/rate/+page.svelte
查看文件 

@@ -22,7 +22,7 @@
 
 </div>
 
 <div class="mx-4 mt-8 font-bold text-lg">Custom score</div>
 
 <div class="p-4">
 
-	<Rate total={8} />
 
+	<Rate total={12} />
 
 </div>
 
 <div class="mx-4 mt-8 font-bold text-lg">Set unselected transparency</div>
 
 <div class="p-4">

+ 1 - 1
demo/src/routes/en_US/slider/+page.svelte
查看文件 

@@ -107,7 +107,7 @@
 
 			<div class="flex justify-between items-end overflow-hidden" style="transform: translateY(-30px);">
 
 				{#each barList as item, i}
 
 					<div
 
-						class={`w-1 rounded-full${i / 40 < valueBar / 100 ? ' bg-primary dark:bg-dark' : ' bg-gray8 dark:bg-gray6'}`}
 
+						class={`w-1 rounded-full${i / 40 < valueBar / 100 ? ' bg-primary dark:bg-dark' : ' bg-gray-200 dark:bg-gray-500'}`}
 
 						style="height: {item}px"
 
 					/>
 
 				{/each}

+ 1 - 1
demo/src/routes/en_US/steps/+page.svelte
查看文件 

@@ -255,7 +255,7 @@
 
 <div class="mt-8 px-4 mb-4 font-bold text-lg">The content area injects elements</div>
 
 <Steps steps={steps9} {current} vertical />
 
 
-<div class="flex sticky bottom-0 z-10 bg-white/60 dark:bg-gray1/60 backdrop-blur">
 
+<div class="flex sticky bottom-0 z-10 bg-white/50 dark:bg-black/50 backdrop-blur">
 
 	<div class="flex-1">
 
 		<Button fill="lineTheme" on:click={preFun}>Previous step</Button>
 
 	</div>

+ 2 - 2
demo/src/routes/en_US/swiper/+page.svelte
查看文件 

@@ -70,13 +70,13 @@
 
 	Specifies the color behind the indicator
 
 	<p class="font-thin text-xs mb-2">injection Class</p>
 
 </div>
 
-<Swiper {data} indicateInjClass="from-black/0 to-purple/50" />
 
+<Swiper {data} indicateInjClass="from-black/0 to-extend0/50" />
 
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">
 
 	Specify indicator color
 
 	<p class="font-thin text-xs mb-2">Remove the background color at the same time</p>
 
 </div>
 
-<Swiper {data} indicateInjClass="bg-none" indicateColor="bg-orange" indicateActiveColor="bg-green" />
 
+<Swiper {data} indicateInjClass="bg-none" indicateColor="bg-extend2" indicateActiveColor="bg-extend1" />
 
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">Specifies the container aspect ratio</div>
 
 <Swiper {data} aspectRatio={[4, 1]} />

+ 4 - 4
demo/src/routes/en_US/tabBar/+page.svelte
查看文件 

@@ -89,15 +89,15 @@
 
 		</div>
 
 		<div>
 
 			<div class="font-bold px-4 mb-2">customize Tab</div>
 
-			<TabBar {labels} tabInjClass="text-purple dark:text-orange" activeTabInjClass="!text-primary dark:!text-dark" />
 
+			<TabBar {labels} tabInjClass="text-extend0 dark:text-extend2" activeTabInjClass="!text-primary dark:!text-dark" />
 
 		</div>
 
 		<div>
 
 			<div class="font-bold px-4 mb-2">Custom selection Tab</div>
 
-			<TabBar {labels} activeTabInjClass="text-green dark:text-orange" />
 
+			<TabBar {labels} activeTabInjClass="text-extend0 dark:text-extend1" />
 
 		</div>
 
 		<div>
 
 			<div class="font-bold px-4 mb-2">Custom line</div>
 
-			<TabBar {labels} line activeInjClass="bg-[red] dark:bg-[green]" />
 
+			<TabBar {labels} line activeInjClass="bg-extend0 dark:bg-extend1" />
 
 		</div>
 
 		<div>
 
 			<div class="font-bold px-4 mb-2">Care edition</div>
 
@@ -111,5 +111,5 @@
 
 	</div>
 
 </div>
 
 <div class="fixed w-full bottom-0">
 
-	<TabBar labels={labels4} injClass="bg-white/60 dark:bg-gray1/60 backdrop-blur" />
 
+	<TabBar labels={labels4} injClass="bg-white/50 dark:bg-black/50 backdrop-blur" />
 
 </div>

+ 1 - 1
demo/src/routes/en_US/toast/+page.svelte
查看文件 

@@ -168,7 +168,7 @@
 
 	<Toast bind:visible={visible26} radius="xl" message="Rounded corners were added" />
 
 </div>
 
 
-<div class="flex sticky bottom-0 z-10 bg-white/60 dark:bg-gray1/60 backdrop-blur">
 
+<div class="flex sticky bottom-0 z-10 bg-white/50 dark:bg-black/50 backdrop-blur">
 
 	<div class="flex-1">
 
 		<Button fill="lineTheme" on:click={() => (visible5 = false)}>Manual shutdown</Button>
 
 	</div>

+ 52 - 9
demo/src/routes/zh_CN/avatar/+page.svelte
查看文件 

@@ -1,6 +1,6 @@
 
 <!-- Avatar Demo -->
 
 <script>
 
-	import { Avatar } from '../../../../../packages/stdf/components';
 
+	import { Avatar, Avatars, Divider } from '../../../../../packages/stdf/components';
 
 
 	const icons = [
 
 		{ icon: { name: 'ri-aliens-fill', theme: true, top: -1, size: 16 }, size: 'xs' },
 
@@ -8,19 +8,32 @@
 
 		{ icon: { name: 'ri-shield-user-line', theme: true, top: 0, size: 32 }, size: 'md' },
 
 		{ icon: { name: 'ri-emotion-line', theme: true, top: -1, size: 46 }, size: 'lg' },
 
 	];
 
+
 
+	const data = [
 
+		{ image: '/assets/images/dota_火女.png' },
 
+		{ image: '/assets/images/dota_火枪.png' },
 
+		{ image: '/assets/images/dota_小牛.png' },
 
+		{ image: '/assets/images/wall_1.jpg' },
 
+		{ image: '/assets/images/dota_斯温.png' },
 
+		{ image: '/assets/images/dota_水人.png' },
 
+		{ image: '/assets/images/wall_2.jpg' },
 
+		{ image: '/assets/images/wall_3.jpg' },
 
+		{ image: '/assets/images/wall_4.jpg' },
 
+		{ image: '/assets/images/avatar_1.jpg' },
 
+		{ image: '/assets/images/dota_火枪.png' },
 
+		{ image: '/assets/images/dota_小牛.png' },
 
+		{ image: '/assets/images/dota_斯温.png' },
 
+	];
 
 </script>
 
 
 <div class="py-8 px-4">
 
 	<div class="font-bold">不同圆角</div>
 
 	<div class="flex justify-between mt-4 mb-8">
 
-		<Avatar />
 
 		<Avatar radius="none" />
 
-		<Avatar radius="full" />
 
-	</div>
 
-	<div class="flex justify-between mt-4 mb-8">
 
+		<Avatar />
 
 		<Avatar radius="xl" />
 
 		<Avatar radius="2xl" />
 
-		<Avatar radius="3xl" />
 
+		<Avatar radius="full" />
 
 	</div>
 
 
 	<div class="font-bold">不同图片类型与大小</div>
 
@@ -44,7 +57,7 @@
 
 		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="solid" />
 
 		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="dashed" />
 
 		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="dotted" />
 
-		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="solid" injClass="border-[red] dark:border-[green]" />
 
+		<Avatar image="/assets/images/avatar_2.png" imgSize="m" line="solid" injClass="border-[red] dark:border-extend1" />
 
 	</div>
 
 
 	<div class="font-bold">替换文本</div>
 
@@ -65,18 +78,48 @@
 
 	<div class="font-bold">不同大小</div>
 
 	<div class="flex justify-between">
 
 		<div class="flex flex-col items-center space-y-4 mt-4 mb-8">
 
-			<Avatar size="xs" icon={{ name: 'ri-bear-smile-line', size: 16, theme: true }} />
 
+			<Avatar size="xs" icon={{ name: 'ri-bear-smile-line', theme: true }} />
 
 			<Avatar size="sm" image="/assets/images/avatar_1.jpg" />
 
 			<Avatar line="solid" />
 
 			<Avatar size="lg" image="/assets/images/avatar_2.png" imgSize="m" />
 
 			<Avatar size="xl" alt="张" altSize="xl" />
 
 		</div>
 
 		<div class="flex flex-col items-center space-y-4 mt-4 mb-8">
 
-			<Avatar radius="full" size="xs" icon={{ name: 'ri-bear-smile-line', size: 16, theme: true }} />
 
+			<Avatar radius="full" size="xs" icon={{ name: 'ri-bear-smile-line', theme: true }} />
 
 			<Avatar radius="full" size="sm" image="/assets/images/avatar_1.jpg" />
 
 			<Avatar radius="full" line="solid" />
 
 			<Avatar radius="full" size="lg" image="/assets/images/avatar_2.png" imgSize="m" />
 
 			<Avatar radius="full" size="xl" alt="张" altSize="xl" />
 
 		</div>
 
 	</div>
 
+
 
+	<Divider />
 
+
 
+	<div class="font-bold text-2xl my-4">头像组</div>
 
+	<div class="font-bold mt-6 mb-2">默认</div>
 
+	<Avatars {data}></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">小点</div>
 
+	<Avatars {data} size="sm" lineWidth="1"></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">宽松一点</div>
 
+	<Avatars {data} compact={4}></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">边框粗点</div>
 
+	<Avatars {data} lineWidth="8"></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">圆角小点</div>
 
+	<Avatars {data} radius="2xl"></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">反向</div>
 
+	<Avatars {data} reverse></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">最多显示 6 个</div>
 
+	<Avatars {data} max={6}></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">顶层显示增加</div>
 
+	<Avatars {data} top="add"></Avatars>
 
+
 
+	<div class="font-bold mt-6 mb-2">不显示顶层</div>
 
+	<Avatars {data} top="none"></Avatars>
 
 </div>

+ 4 - 4
demo/src/routes/zh_CN/button/+page.svelte
查看文件 

@@ -122,11 +122,11 @@
 
 		<div class="p-4 font-bold">按钮组</div>
 
 		<Button fill="lineTheme" heightIn="0" group>
 
 			<div class="flex">
 
-				<div class="flex-1 border-r py-2 active:opacity-80">
 
+				<div class="flex-1 border-r border-primary dark:border-dark py-2 active:opacity-80">
 
 					<Icon name="ri-apps-2-line" size={18} top={-2} />
 
 					应用
 
 				</div>
 
-				<div class="flex-1 border-r py-2 active:opacity-80">
 
+				<div class="flex-1 border-r border-primary dark:border-dark py-2 active:opacity-80">
 
 					<Icon name="ri-star-line" size={18} top={-2} />
 
 					收藏
 
 				</div>
 
@@ -140,11 +140,11 @@
 
 		</Button>
 
 		<Button radius="full" heightIn="0" group>
 
 			<div class="flex">
 
-				<div class="flex-1 border-r py-2 active:opacity-80">
 
+				<div class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80">
 
 					<Icon name="ri-apps-2-line" size={18} top={-2} />
 
 					应用
 
 				</div>
 
-				<div class="flex-1 border-r py-2 active:opacity-80">
 
+				<div class="flex-1 border-r border-white dark:border-black py-2 active:opacity-80">
 
 					<Icon name="ri-star-line" size={18} top={-2} />
 
 					收藏
 
 				</div>

+ 1 - 1
demo/src/routes/zh_CN/cell/+page.svelte
查看文件 

@@ -101,7 +101,7 @@
 
 	</div>
 
 	<div>
 
 		<Cell title="自定义文字颜色" injClass="text-primary dark:text-dark" />
 
-		<Cell title="自定义背景颜色" injClass="!bg-purple/20 active:!bg-purple/10" line={false} />
 
+		<Cell title="自定义背景颜色" injClass="!bg-extend0/20 active:!bg-extend0/10" line={false} />
 
 	</div>
 
 	<div>
 
 		<Cell love title="关爱版" />

+ 4 - 4
demo/src/routes/zh_CN/checkbox/+page.svelte
查看文件 

@@ -182,7 +182,7 @@
 
 					class={`border py-0.5 px-5 text-sm rounded ${
 
 						checkeds.includes(item.name)
 
 							? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
 
-							: 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
 
+							: 'bg-gray-100 dark:bg-gray-600 border-gray-200 dark:border-gray-500'
 
 					}`}
 
 				>
 
 					{item.label}
 
@@ -203,7 +203,7 @@
 
 					class={`border py-0.5 px-1 m-1 text-sm rounded ${
 
 						checkInlines.includes(item)
 
 							? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
 
-							: 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
 
+							: 'bg-gray-100 dark:bg-gray-600 border-gray-200 dark:border-gray-500'
 
 					}`}
 
 				>
 
 					{item}
 
@@ -237,7 +237,7 @@
 
 			<Checkbox {checkeds} name={item.name} textPosition="l">
 
 				{item.label}
 
 				{#if i !== dota.length - 1}
 
-					<div class="h-px mt-1 bg-gray9 dark:bg-gray5" />
 
+					<div class="h-px mt-1 bg-gray-200 dark:bg-gray-800" />
 
 				{/if}
 
 			</Checkbox>
 
 		{/each}
 
@@ -253,7 +253,7 @@
 
 						<div class="text-xs">{voice}</div>
 
 					{/each}
 
 					{#if i !== dotaVoices.length - 1}
 
-						<div class="h-px mt-1 bg-gray9 dark:bg-gray5" />
 
+						<div class="h-px mt-1 bg-gray-200 dark:bg-gray-800" />
 
 					{/if}
 
 				</div>
 
 			</Checkbox>

+ 3 - 3
demo/src/routes/zh_CN/divider/+page.svelte
查看文件 

@@ -43,7 +43,7 @@
 
 	<div>
 
 		<div class="p-4 font-bold">自定义颜色</div>
 
 		<Divider injClass="border-blue dark:border-yellow" />
 
-		<Divider text="自定义线条" injClass="border-[red] dark:border-[green]" />
 
+		<Divider text="自定义线条" injClass="border-[red] dark:border-extend1" />
 
 		<Divider text="自定义文字" injClass="text-[red]" />
 
 		<Divider text="自定义线条与文字" injClass="border-[red] text-[blue] dark:text-[yellow]" />
 
 		<Divider line="dashed" text="自定义虚线" injClass="border-[#FF5722]" />
 
@@ -69,9 +69,9 @@
 
 			加大间距
 
 			<Divider layout="v" mx="4" />
 
 			自定义
 
-			<Divider layout="v" mx="4" injClass="border-[red] dark:border-[green]" />
 
+			<Divider layout="v" mx="4" injClass="border-[red] dark:border-extend1" />
 
 			颜色
 
-			<Divider line="dashed" layout="v" mx="4" injClass="border-[red] dark:border-[green]" />
 
+			<Divider line="dashed" layout="v" mx="4" injClass="border-[red] dark:border-extend1" />
 
 			与线条风格
 
 		</div>
 
 	</div>

+ 14 - 22
demo/src/routes/zh_CN/grids/+page.svelte
查看文件 

@@ -9,7 +9,7 @@
 
 		curentIndex === devices.length - 1 ? (curentIndex = 0) : curentIndex++;
 
 	};
 
 	let color = false;
 
-	$: colorCss = `${color ? ' bg-gradient-to-tr from-purple/70 to-orange/70' : ' bg-gray8 dark:bg-gray4'}`;
 
+	$: colorCss = `${color ? ' bg-gradient-to-tr from-extend0/70 to-extend2/70' : ' bg-gray-100 dark:bg-gray-700'}`;
 
 	const changeColorFun = e => {
 
 		color = e.detail;
 
 	};
 
@@ -112,23 +112,23 @@
 
 		<Grids cols={5} mx="0" my="0">
 
 			<Grid row={3}>
 
 				<div
 
-					class="flex flex-col justify-between bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center shadow dark:shadow-white/10"
 
+					class="flex flex-col justify-between bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center shadow dark:shadow-white/10"
 
 				>
 
 					<div>{weekDay}</div>
 
 					<div class="text-4xl">{day}</div>
 
-					<div class="text-gray6">{month}</div>
 
+					<div class="text-gray-600">{month}</div>
 
 				</div>
 
 			</Grid>
 
 			<Grid row={2}>
 
 				<div
 
-					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xl font-bold text-center flex flex-col justify-center shadow dark:shadow-white/10"
 
+					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xl font-bold text-center flex flex-col justify-center shadow dark:shadow-white/10"
 
 				>
 
 					{time}
 
 				</div>
 
 			</Grid>
 
 			<Grid row={2}>
 
 				<div
 
-					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
+					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
 				>
 
 					<div class="flex justify-center">
 
 						<Switch inside="slot" radius="full" on:change={changeColorFun}>
 
@@ -145,16 +145,12 @@
 
 			</Grid>
 
 
 			<Grid row={2} col={2}>
 
-				<div
 
-					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10"
 
-				>
 
+				<div class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10">
 
 					<Button fill="lineTheme" radius="full" on:click={changeDeviceFun}>切换设备</Button>
 
 				</div>
 
 			</Grid>
 
 			<Grid row={2} col={2}>
 
-				<div
 
-					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex justify-around shadow dark:shadow-white/10 py-1"
 
-				>
 
+				<div class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex justify-around shadow dark:shadow-white/10 py-1">
 
 					<div class="flex flex-col justify-center">
 
 						{#if currentDevice === 'iOS'}
 
 							<Icon name="ri-apple-fill" size={30} />
 
@@ -200,7 +196,7 @@
 
 			</Grid>
 
 			<Grid row={2}>
 
 				<div
 
-					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
+					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
 				>
 
 					<div class="flex justify-center">
 
 						<Switch inside="slot" radius="full">
 
@@ -217,7 +213,7 @@
 
 			</Grid>
 
 			<Grid row={4}>
 
 				<div
 
-					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10"
 
+					class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10"
 
 				>
 
 					<div class="w-1/2 overflow-hidden">
 
 						<img class="block dark:hidden" src="/assets/stdf_512px.png" alt="" />
 
@@ -227,20 +223,16 @@
 
 				</div>
 
 			</Grid>
 
 			<Grid row={3}>
 
-				<div
 
-					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
-				>
 
+				<div class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10">
 
 					<div>92%</div>
 
 					<div class="animate-pulse">
 
-						<Icon name="ri-battery-2-charge-line" size={30} injClass="text-[green]" />
 
+						<Icon name="ri-battery-2-charge-line" size={30} injClass="text-extend1" />
 
 					</div>
 
 					<div>充电中</div>
 
 				</div>
 
 			</Grid>
 
 			<Grid row={2}>
 
-				<div
 
-					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10"
 
-				>
 
+				<div class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10">
 
 					{#if currentDevice === 'iOS'}
 
 						<Icon name="ri-smartphone-line" size={30} />
 
 					{:else if currentDevice === 'Android'}
 
@@ -256,7 +248,7 @@
 
 			</Grid>
 
 			<Grid row={2}>
 
 				<div
 
-					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10 py-1"
 
+					class="bg-white dark:bg-black h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10 py-1"
 
 				>
 
 					<div>
 
 						<Icon name="ri-sun-line" size={20} />
 
@@ -268,7 +260,7 @@
 
 			</Grid>
 
 			<Grid row={2}>
 
 				<div
 
-					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
+					class="bg-white dark:bg-black p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
 
 				>
 
 					<div class="flex justify-center">
 
 						<Switch inside="slot" radius="full">

+ 6 - 6
demo/src/routes/zh_CN/icon/+page.svelte
查看文件 

@@ -13,7 +13,7 @@
 
 			{#each icons as icon}
 
 				<div class="py-2 text-center flex-1">
 
 					<Icon name={icon} />
 
-					<div class="text-xs mt-2 text-gray6">{icon}</div>
 
+					<div class="text-xs mt-2">{icon}</div>
 
 				</div>
 
 			{/each}
 
 		</div>
 
@@ -36,7 +36,7 @@
 
 			{#each icons as icon, i}
 
 				<div class="py-2 text-center flex-1">
 
 					<Icon name={icon} size={18 + i * 6} />
 
-					<div class="text-xs mt-2 text-gray6">{18 + i * 6}</div>
 
+					<div class="text-xs mt-2">{18 + i * 6}</div>
 
 				</div>
 
 			{/each}
 
 		</div>
 
@@ -48,7 +48,7 @@
 
 			{#each icons as icon, i}
 
 				<div class="py-2 text-center flex-1">
 
 					<Icon name={icon} alpha={Number((0.2 + i * 0.2).toFixed(1))} />
 
-					<div class="text-xs mt-2 text-gray6">{(0.2 + i * 0.2).toFixed(1)}</div>
 
+					<div class="text-xs mt-2">{(0.2 + i * 0.2).toFixed(1)}</div>
 
 				</div>
 
 			{/each}
 
 		</div>
 
@@ -56,12 +56,12 @@
 
 	<!-- 自定义颜色（通过 injClass） -->
 
 	<div>
 
 		<div class="mb-2 font-bold text-xl">
 
-			自定义颜色<span class="ml-2 text-xs text-gray6 font-normal">通过 injClass</span>
 
+			自定义颜色<span class="ml-2 text-xs font-normal">通过 injClass</span>
 
 		</div>
 
 		<div class="flex flex-wrap justify-between">
 
 			{#each icons as icon}
 
 				<div class="py-2 text-center flex-1">
 
-					<Icon name={icon} injClass="text-[red] dark:text-green" />
 
+					<Icon name={icon} injClass="text-[red] dark:text-extend1" />
 
 				</div>
 
 			{/each}
 
 		</div>
 
@@ -69,7 +69,7 @@
 
 	<!-- 自定义颜色（通过 slot） -->
 
 	<div>
 
 		<div class="mb-2 font-bold text-xl">
 
-			自定义颜色<span class="ml-2 text-xs text-gray6 font-normal">通过 slot</span>
 
+			自定义颜色<span class="ml-2 text-xs font-normal">通过 slot</span>
 
 		</div>
 
 		<div class="flex flex-wrap justify-between">
 
 			{#each icons as icon}

+ 1 - 1
demo/src/routes/zh_CN/input/+page.svelte
查看文件 

@@ -232,7 +232,7 @@
 
 >
 
 	<div slot="label5">
 
 		{#if mobileLength === 11}
 
-			<Icon name="ri-check-fill" injClass="text-[green]" size={14} />
 
+			<Icon name="ri-check-fill" injClass="text-extend1" size={14} />
 
 		{:else if mobileLength === 0}
 
 			<!-- none -->
 
 		{:else}

+ 4 - 4
demo/src/routes/zh_CN/loading/+page.svelte
查看文件 

@@ -53,7 +53,7 @@
 
 							<div class="text-xs text-center mt-4">{'1_' + i}</div>
 
 						</div>
 
 						<div
 
-							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
 
+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray-800 dark:bg-gray-100 text-white dark:text-black"
 
 						>
 
 							<div class="w-[30px] h-[30px]">
 
 								<Loading type={'1_' + i} inverse bind:speed />
 
@@ -61,7 +61,7 @@
 
 							<div class="text-xs text-center mt-4">{'1_' + i}</div>
 
 						</div>
 
 						<div
 
-							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
 
+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray-800 dark:bg-gray-100 text-white dark:text-black"
 
 						>
 
 							<div class="w-[30px] h-[30px]">
 
 								<Loading type={'1_' + i} theme inverse bind:speed />
 
@@ -96,7 +96,7 @@
 
 							<div class="text-xs text-center mt-4">{'2_' + i}</div>
 
 						</div>
 
 						<div
 
-							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
 
+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray-800 dark:bg-gray-100 text-white dark:text-black"
 
 						>
 
 							<div class="w-[30px] h-[30px]">
 
 								<Loading type={'2_' + i} inverse bind:speed />
 
@@ -142,7 +142,7 @@
 
 	</Tabs>
 
 </div>
 
 <!-- 固定在底部的按钮组，控制速度 -->
 
-<div class="sticky bottom-0 left-0 w-full flex gap-3 justify-between px-2 z-10 bg-white/90 dark:bg-black/90">
 
+<div class="sticky bottom-0 left-0 w-full flex gap-3 justify-between px-2 z-10 bg-white/60 dark:bg-black/60 backdrop-blur">
 
 	{#each speedBtns as item}
 
 		<div class="flex-1">
 
 			<Button fill={speed === item ? 'base' : 'lineTheme'} size="full" injClass="text-xs px-2" on:click={() => (speed = item)}>

+ 2 - 2
demo/src/routes/zh_CN/navBar/+page.svelte
查看文件 

@@ -34,10 +34,10 @@
 
 	<!-- 无底部分割线，文字过长 -->
 
 	<NavBar title="无左侧与底分割线，文字过长长长长长长长" left="" line={false} rights={icons3} />
 
 	<!-- 自定义背景颜色 -->
 
-	<NavBar title="自定义背景颜色 by injClass" injClass="bg-[wheat] dark:bg-[purple]" />
 
+	<NavBar title="自定义背景颜色 by injClass" injClass="bg-[wheat] dark:bg-extend0" />
 
 	<!-- 自定义文字颜色 -->
 
 	<NavBar titleSlot>
 
-		<div slot="title" class="text-[red] dark:text-[green]">自定义文字颜色 by slot</div>
 
+		<div slot="title" class="text-[red] dark:text-extend1">自定义文字颜色 by slot</div>
 
 	</NavBar>
 
 	<!-- 插槽渲染标题区域 -->
 
 	<NavBar titleSlot rightSlot>

+ 1 - 1
demo/src/routes/zh_CN/noticeBar/+page.svelte
查看文件 

@@ -56,5 +56,5 @@
 
 <div class="m-4 mt-8 font-bold text-lg">自定义样式</div>
 
 <NoticeBar injClass="!text-error !bg-error/10" {textList}></NoticeBar>
 
 <NoticeBar leftIcon={{ name: 'ri-check-line', size: 16, top: -1 }} injClass="!text-success !bg-success/10" {textList}></NoticeBar>
 
-<NoticeBar injClass="!text-purple !bg-purple/10" {textList}></NoticeBar>
 
+<NoticeBar injClass="!text-extend0 !bg-extend0/10" {textList}></NoticeBar>
 
 <div class="pb-8"></div>

+ 1 - 1
demo/src/routes/zh_CN/progress/+page.svelte
查看文件 

@@ -79,7 +79,7 @@
 
 	<div class="flex flex-col space-y-4">
 
 		<Progress injClass="bg-success dark:bg-error" />
 
 		<Progress injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
 
-		<Progress percentPosition="block" injClass="bg-orange" />
 
+		<Progress percentPosition="block" injClass="bg-extend2" />
 
 		<Progress trackInjClass="!bg-primary/20 dark:!bg-dark/20" />
 
 	</div>

+ 3 - 3
demo/src/routes/zh_CN/radio/+page.svelte
查看文件 

@@ -98,7 +98,7 @@
 
 					class={`border py-0.5 px-5 text-sm rounded ${
 
 						value === item.name
 
 							? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
 
-							: 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
 
+							: 'bg-gray-100 dark:bg-gray-600 border-gray-200 dark:border-gray-500'
 
 					}`}
 
 				>
 
 					{item.label}
 
@@ -130,7 +130,7 @@
 
 			<Radio name={item.name} textPosition="l">
 
 				{item.label}
 
 				{#if i !== dota.length - 1}
 
-					<div class="h-px mt-1 bg-gray8 dark:bg-gray5" />
 
+					<div class="h-px mt-1 bg-gray-100 dark:bg-gray-800" />
 
 				{/if}
 
 			</Radio>
 
 		{/each}
 
@@ -146,7 +146,7 @@
 
 						<div class="text-xs">{voice}</div>
 
 					{/each}
 
 					{#if i !== dotaVoices.length - 1}
 
-						<div class="h-px mt-1 bg-gray8 dark:bg-gray5" />
 
+						<div class="h-px mt-1 bg-gray-100 dark:bg-gray-800" />
 
 					{/if}
 
 				</div>
 
 			</Radio>

+ 1 - 1
demo/src/routes/zh_CN/rate/+page.svelte
查看文件 

@@ -22,7 +22,7 @@
 
 </div>
 
 <div class="mx-4 mt-8 font-bold text-lg">自定义总分</div>
 
 <div class="p-4">
 
-	<Rate total={8} />
 
+	<Rate total={12} />
 
 </div>
 
 <div class="mx-4 mt-8 font-bold text-lg">设置未选中透明度</div>
 
 <div class="p-4">

+ 1 - 1
demo/src/routes/zh_CN/slider/+page.svelte
查看文件 

@@ -107,7 +107,7 @@
 
 			<div class="flex justify-between items-end overflow-hidden" style="transform: translateY(-30px);">
 
 				{#each barList as item, i}
 
 					<div
 
-						class={`w-1 rounded-full${i / 40 < valueBar / 100 ? ' bg-primary dark:bg-dark' : ' bg-gray8 dark:bg-gray6'}`}
 
+						class={`w-1 rounded-full${i / 40 < valueBar / 100 ? ' bg-primary dark:bg-dark' : ' bg-gray-200 dark:bg-gray-500'}`}
 
 						style="height: {item}px"
 
 					/>
 
 				{/each}

+ 1 - 1
demo/src/routes/zh_CN/steps/+page.svelte
查看文件 

@@ -255,7 +255,7 @@
 
 <div class="mt-8 px-4 mb-4 font-bold text-lg">内容区域注入元素</div>
 
 <Steps steps={steps9} {current} vertical />
 
 
-<div class="flex sticky bottom-0 z-10 bg-white/60 dark:bg-gray1/60 backdrop-blur">
 
+<div class="flex sticky bottom-0 z-10 bg-white/50 dark:bg-black/50 backdrop-blur">
 
 	<div class="flex-1">
 
 		<Button fill="lineTheme" on:click={preFun}>上一步</Button>
 
 	</div>

+ 2 - 2
demo/src/routes/zh_CN/swiper/+page.svelte
查看文件 

@@ -70,13 +70,13 @@
 
 	指定指示器背景色
 
 	<p class="font-thin text-xs mb-2">注入 Class</p>
 
 </div>
 
-<Swiper {data} indicateInjClass="from-black/0 to-purple/50" />
 
+<Swiper {data} indicateInjClass="from-black/0 to-extend0/50" />
 
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">
 
 	指定指示器颜色
 
 	<p class="font-thin text-xs mb-2">同时去除背景色</p>
 
 </div>
 
-<Swiper {data} indicateInjClass="bg-none" indicateColor="bg-orange" indicateActiveColor="bg-green" />
 
+<Swiper {data} indicateInjClass="bg-none" indicateColor="bg-extend2" indicateActiveColor="bg-extend1" />
 
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">指定容器宽高比</div>
 
 <Swiper {data} aspectRatio={[4, 1]} />

+ 4 - 4
demo/src/routes/zh_CN/tabBar/+page.svelte
查看文件 

@@ -89,15 +89,15 @@
 
 		</div>
 
 		<div>
 
 			<div class="font-bold px-4 mb-2">自定义 Tab</div>
 
-			<TabBar {labels} tabInjClass="text-purple dark:text-orange" activeTabInjClass="!text-primary dark:!text-dark" />
 
+			<TabBar {labels} tabInjClass="text-extend0 dark:text-extend2" activeTabInjClass="!text-primary dark:!text-dark" />
 
 		</div>
 
 		<div>
 
 			<div class="font-bold px-4 mb-2">自定义选定 Tab</div>
 
-			<TabBar {labels} activeTabInjClass="text-green dark:text-orange" />
 
+			<TabBar {labels} activeTabInjClass="text-extend0 dark:text-extend1" />
 
 		</div>
 
 		<div>
 
 			<div class="font-bold px-4 mb-2">自定义线条</div>
 
-			<TabBar {labels} line activeInjClass="bg-[red] dark:bg-[green]" />
 
+			<TabBar {labels} line activeInjClass="bg-extend0 dark:bg-extend1" />
 
 		</div>
 
 		<div>
 
 			<div class="font-bold px-4 mb-2">关爱版</div>
 
@@ -111,5 +111,5 @@
 
 	</div>
 
 </div>
 
 <div class="fixed w-full bottom-0">
 
-	<TabBar labels={labels4} injClass="bg-white/60 dark:bg-gray1/60 backdrop-blur" />
 
+	<TabBar labels={labels4} injClass="bg-white/50 dark:bg-black/50 backdrop-blur" />
 
 </div>

+ 1 - 1
demo/src/routes/zh_CN/toast/+page.svelte
查看文件 

@@ -160,7 +160,7 @@
 
 	<Toast bind:visible={visible26} radius="xl" message="加大了圆角" />
 
 </div>
 
 
-<div class="flex sticky bottom-0 z-10 bg-white/60 dark:bg-gray1/60 backdrop-blur">
 
+<div class="flex sticky bottom-0 z-10 bg-white/50 dark:bg-black/50 backdrop-blur">
 
 	<div class="flex-1">
 
 		<Button fill="lineTheme" on:click={() => (visible5 = false)}>手动关闭</Button>
 
 	</div>

+ 54 - 25
demo/tailwind.config.js
查看文件 

@@ -5,38 +5,67 @@ export default {
 
 		colors: {
 
 			// 主题色
 
 			// Theme Color
 
-			primary: '#0B24FB',
 
-			dark: '#FFC043',
 
-			blue: '#0B24FB', // primary 别名 alias
 
-			yellow: '#FFC043', // dark 别名 alias
 
-
 
-			// 扩展色
 
-			// Extended Color
 
-			purple: '#7356BF',
 
-			green: '#05944F',
 
-			orange: '#FF6937',
 
+			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: '#11BB8D',
 
-			warning: '#B95000',
 
-			error: '#DA1414',
 
-			info: '#2E5AAC',
 
+			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: '#fff',
 
-			gray1: '#23262B',
 
-			gray2: '#2A2B2F',
 
-			gray3: '#303239',
 
-			gray4: '#373940',
 
-			gray5: '#414249',
 
-			gray6: '#747B84',
 
-			gray7: '#DADEE3',
 
-			gray8: '#EBEEF2',
 
-			gray9: '#F4F6F9',
 
-			gray10: '#FAFAFB',
 
+			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: {