From 2f4150aebde15e06b5572b95c9d169d430d4b3c8 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 18 Jan 2023 10:39:31 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=BE=93=E5=87=BA?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/style/default-light.token.css  |  2 +-
 packages/scripts/src/gen-tokens/index.ts      | 51 ++++++++++---------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css
index a30bb4c0..c9578325 100644
--- a/packages/opendesign/src/components/style/default-light.token.css
+++ b/packages/opendesign/src/components/style/default-light.token.css
@@ -1,4 +1,4 @@
-/* theme: default,light */
+/* theme: default|light */
 :root,
 :root[theme="light"] {
   /**
diff --git a/packages/scripts/src/gen-tokens/index.ts b/packages/scripts/src/gen-tokens/index.ts
index 2d675c87..bef5a48e 100644
--- a/packages/scripts/src/gen-tokens/index.ts
+++ b/packages/scripts/src/gen-tokens/index.ts
@@ -76,6 +76,30 @@ async function readTokens(configFile: string) {
   };
 }
 
+function tokenCssTemplate(themeArray: string[], flatToken: Array<FlatTokenT>) {
+  const content = flatToken.map(item => {
+    const { prefix: p, key, value, name = '', type = '', description = '', group = '' } = item;
+    return `  /**
+   * @name ${name}
+   * @type ${type}
+   * @group ${group}
+   * @description ${description}
+   */
+  ${p}${key}: ${value};`;
+  });
+
+  const selector = themeArray.map(t => {
+    if (t === 'default') {
+      return ':root';
+    }
+    return `:root[theme="${t}"]`;
+  });
+
+  return `/* theme: ${themeArray.join('|')} */
+${selector.join(',\n')} {
+${content.join('\n')}
+}`;
+}
 function generateTokenCss(tokenData: { tokens: TokenListT, prefix: string }, outDir: string) {
 
   const { tokens, prefix = '--o-' } = tokenData;
@@ -97,33 +121,12 @@ function generateTokenCss(tokenData: { tokens: TokenListT, prefix: string }, out
       });
     });
 
-    const content = flatToken.map(item => {
-      const { prefix: p, key, value, name = '', type = '', description = '', group = '' } = item;
-      return `  /**
-   * @name ${name}
-   * @type ${type}
-   * @group ${group}
-   * @description ${description}
-   */
-  ${p}${key}: ${value};`;
-    });
+    const themeArray = Array.isArray(theme) ? theme : [theme];
 
-    const themeStr = Array.isArray(theme) ? theme : [theme];
-    const selector = themeStr.map(t => {
-      if (t === 'default') {
-        return ':root';
-      }
-      return `:root[theme="${t}"]`;
-    });
+    const content = tokenCssTemplate(themeArray, flatToken);
 
-    fs.outputFileSync(path.join(outDir, `${themeStr.join('-')}.token.css`), `/* theme: ${theme} */
-${selector.join(',\n')} {
-${content.join('\n')}
-}`);
+    fs.outputFileSync(path.join(outDir, `${themeArray.join('-')}.token.css`), content);
   });
-
-
-
 }
 
 
-- 
Gitee


From 1d8966ec912d411fe9e9265b96454ae1e4c7ff0f Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 18 Jan 2023 15:00:30 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=94=AF=E6=8C=81token=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/opendesign.token.code-snippets        | 746 ++++++++++++++++++
 .../opendesign/src/components/select/index.ts |   1 -
 .../src/components/style/dark.token.css       | 646 +--------------
 .../tokens/{light.color.json => color.json}   | 241 ++++--
 .../opendesign/src/tokens/dark.color.json     | 314 --------
 packages/opendesign/src/tokens/size.json      | 318 +++++---
 .../opendesign/src/tokens/token.config.ts     |  15 +-
 packages/scripts/src/gen-tokens/index.ts      | 219 +++--
 packages/scripts/src/index.ts                 |   4 +-
 9 files changed, 1276 insertions(+), 1228 deletions(-)
 create mode 100644 .vscode/opendesign.token.code-snippets
 rename packages/opendesign/src/tokens/{light.color.json => color.json} (63%)
 delete mode 100644 packages/opendesign/src/tokens/dark.color.json

diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets
new file mode 100644
index 00000000..23dab612
--- /dev/null
+++ b/.vscode/opendesign.token.code-snippets
@@ -0,0 +1,746 @@
+{
+  "--o-color-primary1": {
+    "prefix": [
+      "--o-color-primary1"
+    ],
+    "body": "var(--o-color-primary1)",
+    "description": "常规色: 用于按钮、文本、链接强调状态时常规颜色[light: #002fa7, dark: #ff0000]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary2": {
+    "prefix": [
+      "--o-color-primary2"
+    ],
+    "body": "var(--o-color-primary2)",
+    "description": "悬浮色: 用于按钮、文本、链接强调状态时悬浮颜色[light: #406fe7]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary3": {
+    "prefix": [
+      "--o-color-primary3"
+    ],
+    "body": "var(--o-color-primary3)",
+    "description": "聚焦色: 用于按钮、文本、链接强调状态时聚焦颜色[light: #00288d]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary4": {
+    "prefix": [
+      "--o-color-primary4"
+    ],
+    "body": "var(--o-color-primary4)",
+    "description": "禁用色: 用于按钮、文本、链接强调状态时禁用颜色[light: #b2c0e4]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-major1": {
+    "prefix": [
+      "--o-color-major1"
+    ],
+    "body": "var(--o-color-major1)",
+    "description": "常规色: 用于按钮、文本、链接major状态时文本颜色[light: #feb32a]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success1": {
+    "prefix": [
+      "--o-color-success1"
+    ],
+    "body": "var(--o-color-success1)",
+    "description": "常规色: 用于按钮、文本、链接成功状态时常规颜色[light: #6dc335]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success2": {
+    "prefix": [
+      "--o-color-success2"
+    ],
+    "body": "var(--o-color-success2)",
+    "description": "悬浮色: 用于按钮、文本、链接成功状态时悬浮颜色[light: #93e95b]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success3": {
+    "prefix": [
+      "--o-color-success3"
+    ],
+    "body": "var(--o-color-success3)",
+    "description": "聚焦色: 用于按钮、文本、链接成功状态时聚焦颜色[light: #62af30]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success4": {
+    "prefix": [
+      "--o-color-success4"
+    ],
+    "body": "var(--o-color-success4)",
+    "description": "禁用色: 用于按钮、文本、链接成功状态时禁用颜色[light: #c5e7ae]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning1": {
+    "prefix": [
+      "--o-color-warning1"
+    ],
+    "body": "var(--o-color-warning1)",
+    "description": "常规色: 用于按钮、文本、链接告警状态时常规颜色[light: #ff8e36]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning2": {
+    "prefix": [
+      "--o-color-warning2"
+    ],
+    "body": "var(--o-color-warning2)",
+    "description": "悬浮色: 用于按钮、文本、链接告警状态时悬浮颜色[light: #ffb45c]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning3": {
+    "prefix": [
+      "--o-color-warning3"
+    ],
+    "body": "var(--o-color-warning3)",
+    "description": "聚焦色: 用于按钮、文本、链接告警状态时聚焦颜色[light: #ff801c]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning4": {
+    "prefix": [
+      "--o-color-warning4"
+    ],
+    "body": "var(--o-color-warning4)",
+    "description": "禁用色: 用于按钮、文本、链接告警状态时禁用颜色[light: #ffd2af]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger1": {
+    "prefix": [
+      "--o-color-danger1"
+    ],
+    "body": "var(--o-color-danger1)",
+    "description": "常规色: 用于按钮、文本、链接错误状态时常规颜色[light: #f3524d]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger2": {
+    "prefix": [
+      "--o-color-danger2"
+    ],
+    "body": "var(--o-color-danger2)",
+    "description": "悬浮色: 用于按钮、文本、链接错误状态时悬浮颜色[light: #ff7873]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger3": {
+    "prefix": [
+      "--o-color-danger3"
+    ],
+    "body": "var(--o-color-danger3)",
+    "description": "聚焦色: 用于按钮、文本、链接错误状态时聚焦颜色[light: #f13b35]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger4": {
+    "prefix": [
+      "--o-color-danger4"
+    ],
+    "body": "var(--o-color-danger4)",
+    "description": "禁用色: 用于按钮、文本、链接错误状态时禁用颜色[light: #fabab8]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info1": {
+    "prefix": [
+      "--o-color-info1"
+    ],
+    "body": "var(--o-color-info1)",
+    "description": "常规色: 用于按钮、文本、链接信息状态时常规颜色[light: #e5e5e5]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info2": {
+    "prefix": [
+      "--o-color-info2"
+    ],
+    "body": "var(--o-color-info2)",
+    "description": "悬浮色: 用于按钮、文本、链接信息状态时悬浮颜色[light: #e5e8f0]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info3": {
+    "prefix": [
+      "--o-color-info3"
+    ],
+    "body": "var(--o-color-info3)",
+    "description": "聚焦色: 用于按钮、文本、链接信息状态时聚焦颜色[light: #cccccc]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info4": {
+    "prefix": [
+      "--o-color-info4"
+    ],
+    "body": "var(--o-color-info4)",
+    "description": "禁用色: 用于按钮、文本、链接信息状态时禁用颜色[light: #f7f8fa]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-bg1": {
+    "prefix": [
+      "--o-color-bg1"
+    ],
+    "body": "var(--o-color-bg1)",
+    "description": "一级容器背景色: 用于页面整体背景色[light: #f5f6f8]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-bg2": {
+    "prefix": [
+      "--o-color-bg2"
+    ],
+    "body": "var(--o-color-bg2)",
+    "description": "二级容器背景色: 用于区块、卡片、弹出框、tooltip背景色[light: #ffffff]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-bg3": {
+    "prefix": [
+      "--o-color-bg3"
+    ],
+    "body": "var(--o-color-bg3)",
+    "description": "三级容器背景色: 用于区块卡片背景色[light: #f7f8fa]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-bg4": {
+    "prefix": [
+      "--o-color-bg4"
+    ],
+    "body": "var(--o-color-bg4)",
+    "description": "四级容器背景色: 用于区块、卡片、表头背景色[light: #e5e8f0]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-text1": {
+    "prefix": [
+      "--o-color-text1"
+    ],
+    "body": "var(--o-color-text1)",
+    "description": "标题色: 用于强调、标题颜色[light: #000000]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-text1_inverse": {
+    "prefix": [
+      "--o-color-text1_inverse"
+    ],
+    "body": "var(--o-color-text1_inverse)",
+    "description": "标题反色: 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题[light: #ffffff]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-text2": {
+    "prefix": [
+      "--o-color-text2"
+    ],
+    "body": "var(--o-color-text2)",
+    "description": "正文色: 用于次强调、次级标题、正文颜色[light: #3f3f3f]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-text2_inverse": {
+    "prefix": [
+      "--o-color-text2_inverse"
+    ],
+    "body": "var(--o-color-text2_inverse)",
+    "description": "正文反色: 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文[light: #e5e5e5]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-text3": {
+    "prefix": [
+      "--o-color-text3"
+    ],
+    "body": "var(--o-color-text3)",
+    "description": "提示色: 用于提示文本颜色[light: #707070]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-text3_inverse": {
+    "prefix": [
+      "--o-color-text3_inverse"
+    ],
+    "body": "var(--o-color-text3_inverse)",
+    "description": "提示反色: 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示[light: #b2b2b2]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-text4": {
+    "prefix": [
+      "--o-color-text4"
+    ],
+    "body": "var(--o-color-text4)",
+    "description": "置灰色: 用于禁用文本颜色[light: #cccccc]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-text4_inverse": {
+    "prefix": [
+      "--o-color-text4_inverse"
+    ],
+    "body": "var(--o-color-text4_inverse)",
+    "description": "置灰反色: 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本[light: #e5e5e5]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-border1": {
+    "prefix": [
+      "--o-color-border1"
+    ],
+    "body": "var(--o-color-border1)",
+    "description": "边框色: 较明显的边框[light: #707070]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-border2": {
+    "prefix": [
+      "--o-color-border2"
+    ],
+    "body": "var(--o-color-border2)",
+    "description": "弱边框色: 较弱的边框[light: #e5e5e5]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-division1": {
+    "prefix": [
+      "--o-color-division1"
+    ],
+    "body": "var(--o-color-division1)",
+    "description": "分隔线色1: 用于分隔线颜色[light: #707070]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-mask1": {
+    "prefix": [
+      "--o-color-mask1"
+    ],
+    "body": "var(--o-color-mask1)",
+    "description": "遮罩色1: 用于弹窗遮罩色[light: rgba(0, 0, 0, 0.5)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-1": {
+    "prefix": [
+      "--o-shadow-1"
+    ],
+    "body": "var(--o-shadow-1)",
+    "description": "阴影色1: 用于卡片、小弹窗、楼层阴影[light: 0 1px 5px rgba(45, 47, 51, 0.1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-2": {
+    "prefix": [
+      "--o-shadow-2"
+    ],
+    "body": "var(--o-shadow-2)",
+    "description": "阴影色2: 用于卡片悬浮阴影[light: 0 6px 18px rgba(0, 47, 167, 0.14)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-3": {
+    "prefix": [
+      "--o-shadow-3"
+    ],
+    "body": "var(--o-shadow-3)",
+    "description": "阴影色3: 用于提示阴影[light: 0 10px 32px rgba(45, 47, 51, 0.18)]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-1": {
+    "prefix": [
+      "--o-gap-1"
+    ],
+    "body": "var(--o-gap-1)",
+    "description": "间距1: 用于组件之间的间距1[light: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-2": {
+    "prefix": [
+      "--o-gap-2"
+    ],
+    "body": "var(--o-gap-2)",
+    "description": "间距2: 用于组件之间的间距2[light: 8px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-3": {
+    "prefix": [
+      "--o-gap-3"
+    ],
+    "body": "var(--o-gap-3)",
+    "description": "间距3: 用于组件之间的间距3[light: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-4": {
+    "prefix": [
+      "--o-gap-4"
+    ],
+    "body": "var(--o-gap-4)",
+    "description": "间距4: 用于组件之间的间距4[light: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-5": {
+    "prefix": [
+      "--o-gap-5"
+    ],
+    "body": "var(--o-gap-5)",
+    "description": "间距5: 用于组件之间的间距5[light: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-6": {
+    "prefix": [
+      "--o-gap-6"
+    ],
+    "body": "var(--o-gap-6)",
+    "description": "间距6: 用于组件之间的间距6[light: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-7": {
+    "prefix": [
+      "--o-gap-7"
+    ],
+    "body": "var(--o-gap-7)",
+    "description": "间距7: 用于组件之间的间距7[light: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-8": {
+    "prefix": [
+      "--o-gap-8"
+    ],
+    "body": "var(--o-gap-8)",
+    "description": "间距8: 用于组件之间的间距8[light: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-size-l": {
+    "prefix": [
+      "--o-size-l"
+    ],
+    "body": "var(--o-size-l)",
+    "description": "大尺寸: 尺寸[light: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-size-m": {
+    "prefix": [
+      "--o-size-m"
+    ],
+    "body": "var(--o-size-m)",
+    "description": "中尺寸: 尺寸[light: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-size-s": {
+    "prefix": [
+      "--o-size-s"
+    ],
+    "body": "var(--o-size-s)",
+    "description": "小尺寸: 小尺寸[light: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-l": {
+    "prefix": [
+      "--o-icon_size-l"
+    ],
+    "body": "var(--o-icon_size-l)",
+    "description": "大尺寸图标: 尺寸[light: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-m": {
+    "prefix": [
+      "--o-icon_size-m"
+    ],
+    "body": "var(--o-icon_size-m)",
+    "description": "中尺寸图标: 尺寸[light: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-s": {
+    "prefix": [
+      "--o-icon_size-s"
+    ],
+    "body": "var(--o-icon_size-s)",
+    "description": "小尺寸图标: 小尺寸[light: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-xs": {
+    "prefix": [
+      "--o-icon_size-xs"
+    ],
+    "body": "var(--o-icon_size-xs)",
+    "description": "超小尺寸图标: 小尺寸[light: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display1": {
+    "prefix": [
+      "--o-font_size-display1"
+    ],
+    "body": "var(--o-font_size-display1)",
+    "description": "一级数据展示: 一级数据展示[light: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display2": {
+    "prefix": [
+      "--o-font_size-display2"
+    ],
+    "body": "var(--o-font_size-display2)",
+    "description": "二级数据展示: 二级数据展示[light: 54px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display3": {
+    "prefix": [
+      "--o-font_size-display3"
+    ],
+    "body": "var(--o-font_size-display3)",
+    "description": "三级数据展示: 三级数据展示[light: 36px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display4": {
+    "prefix": [
+      "--o-font_size-display4"
+    ],
+    "body": "var(--o-font_size-display4)",
+    "description": "四级数据展示: 四级数据展示[light: 28px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h1": {
+    "prefix": [
+      "--o-font_size-h1"
+    ],
+    "body": "var(--o-font_size-h1)",
+    "description": "一级标题: 一级标题[light: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h2": {
+    "prefix": [
+      "--o-font_size-h2"
+    ],
+    "body": "var(--o-font_size-h2)",
+    "description": "二级标题: 二级标题[light: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h3": {
+    "prefix": [
+      "--o-font_size-h3"
+    ],
+    "body": "var(--o-font_size-h3)",
+    "description": "三级标题: 三级标题[light: 18px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h4": {
+    "prefix": [
+      "--o-font_size-h4"
+    ],
+    "body": "var(--o-font_size-h4)",
+    "description": "四级标题: 四级标题[light: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-text": {
+    "prefix": [
+      "--o-font_size-text"
+    ],
+    "body": "var(--o-font_size-text)",
+    "description": "正文: 正文[light: 14px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-tip1": {
+    "prefix": [
+      "--o-font_size-tip1"
+    ],
+    "body": "var(--o-font_size-tip1)",
+    "description": "提示文本1: 提示文本1[light: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-tip2": {
+    "prefix": [
+      "--o-font_size-tip2"
+    ],
+    "body": "var(--o-font_size-tip2)",
+    "description": "提示文本2: 提示文本2[light: 10px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display1": {
+    "prefix": [
+      "--o-line_height-display1"
+    ],
+    "body": "var(--o-line_height-display1)",
+    "description": "一级数据展示: 一级数据展示[light: 84px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display2": {
+    "prefix": [
+      "--o-line_height-display2"
+    ],
+    "body": "var(--o-line_height-display2)",
+    "description": "二级数据展示: 二级数据展示[light: 76px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display3": {
+    "prefix": [
+      "--o-line_height-display3"
+    ],
+    "body": "var(--o-line_height-display3)",
+    "description": "三级数据展示: 三级数据展示[light: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display4": {
+    "prefix": [
+      "--o-line_height-display4"
+    ],
+    "body": "var(--o-line_height-display4)",
+    "description": "四级数据展示: 四级数据展示[light: 36px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h1": {
+    "prefix": [
+      "--o-line_height-h1"
+    ],
+    "body": "var(--o-line_height-h1)",
+    "description": "一级标题: 一级标题[light: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h2": {
+    "prefix": [
+      "--o-line_height-h2"
+    ],
+    "body": "var(--o-line_height-h2)",
+    "description": "二级标题: 二级标题[light: 28px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h3": {
+    "prefix": [
+      "--o-line_height-h3"
+    ],
+    "body": "var(--o-line_height-h3)",
+    "description": "三级标题: 三级标题[light: 26px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h4": {
+    "prefix": [
+      "--o-line_height-h4"
+    ],
+    "body": "var(--o-line_height-h4)",
+    "description": "四级标题: 四级标题[light: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-text": {
+    "prefix": [
+      "--o-line_height-text"
+    ],
+    "body": "var(--o-line_height-text)",
+    "description": "正文: 正文[light: 22px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-tip1": {
+    "prefix": [
+      "--o-line_height-tip1"
+    ],
+    "body": "var(--o-line_height-tip1)",
+    "description": "提示文本1: 提示文本1[light: 18px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-tip2": {
+    "prefix": [
+      "--o-line_height-tip2"
+    ],
+    "body": "var(--o-line_height-tip2)",
+    "description": "提示文本2: 提示文本2[light: 14px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-l": {
+    "prefix": [
+      "--o-radius-l"
+    ],
+    "body": "var(--o-radius-l)",
+    "description": "大尺寸圆角: 大尺寸圆角[light: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-m": {
+    "prefix": [
+      "--o-radius-m"
+    ],
+    "body": "var(--o-radius-m)",
+    "description": "中尺寸圆角: 中尺寸圆角[light: 8px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-s": {
+    "prefix": [
+      "--o-radius-s"
+    ],
+    "body": "var(--o-radius-s)",
+    "description": "小尺寸圆角: 小尺寸圆角[light: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-s": {
+    "prefix": [
+      "--o-duration-s"
+    ],
+    "body": "var(--o-duration-s)",
+    "description": "持续时间: 用于退出屏幕的动画[light: 200ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m1": {
+    "prefix": [
+      "--o-duration-m1"
+    ],
+    "body": "var(--o-duration-m1)",
+    "description": "持续时间: 用于当曲线为standard-in时进入屏幕的动画[light: 250ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m2": {
+    "prefix": [
+      "--o-duration-m2"
+    ],
+    "body": "var(--o-duration-m2)",
+    "description": "持续时间: 用于当曲线为standard时开始、结束的动画[light: 300ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m3": {
+    "prefix": [
+      "--o-duration-m3"
+    ],
+    "body": "var(--o-duration-m3)",
+    "description": "持续时间: 用于当曲线为emphasized-in时进入屏幕的动画[light: 400ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-l": {
+    "prefix": [
+      "--o-duration-l"
+    ],
+    "body": "var(--o-duration-l)",
+    "description": "持续时间: 用于当曲线为emphasized时开始、结束的动画[light: 500ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-xl": {
+    "prefix": [
+      "--o-duration-xl"
+    ],
+    "body": "var(--o-duration-xl)",
+    "description": "持续时间: 用于当曲线为emphasized时，轮播切换动画[light: 1000ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-linear": {
+    "prefix": [
+      "--o-easing-linear"
+    ],
+    "body": "var(--o-easing-linear)",
+    "description": "线性动画曲线: 线性曲线[light: cubic-bezier(0, 0, 1, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard": {
+    "prefix": [
+      "--o-easing-standard"
+    ],
+    "body": "var(--o-easing-standard)",
+    "description": "动画曲线: 用于组件[light: cubic-bezier(0.2, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard-in": {
+    "prefix": [
+      "--o-easing-standard-in"
+    ],
+    "body": "var(--o-easing-standard-in)",
+    "description": "动画曲线: 用于组件[light: cubic-bezier(0, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard-out": {
+    "prefix": [
+      "--o-easing-standard-out"
+    ],
+    "body": "var(--o-easing-standard-out)",
+    "description": "动画曲线: 用于组件[light: cubic-bezier(0.3, 0, 1, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized": {
+    "prefix": [
+      "--o-easing-emphasized"
+    ],
+    "body": "var(--o-easing-emphasized)",
+    "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.2, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized-in": {
+    "prefix": [
+      "--o-easing-emphasized-in"
+    ],
+    "body": "var(--o-easing-emphasized-in)",
+    "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.3, 0, 0.8, 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized-out": {
+    "prefix": [
+      "--o-easing-emphasized-out"
+    ],
+    "body": "var(--o-easing-emphasized-out)",
+    "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.05, 0.7, 0.1, 1)]",
+    "scope": "css,scss,less"
+  }
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/select/index.ts b/packages/opendesign/src/components/select/index.ts
index c3485864..898c93e9 100644
--- a/packages/opendesign/src/components/select/index.ts
+++ b/packages/opendesign/src/components/select/index.ts
@@ -6,5 +6,4 @@ const OSelect = Object.assign(_OSelect, {
     app.component(_OSelect.name, _OSelect);
   },
 });
-
 export { OSelect };
diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css
index 809e1646..e259341a 100644
--- a/packages/opendesign/src/components/style/dark.token.css
+++ b/packages/opendesign/src/components/style/dark.token.css
@@ -6,649 +6,5 @@
    * @group primary
    * @description 用于按钮、文本、链接强调状态时常规颜色
    */
-  --o-primary1: #002fa7;
-  /**
-   * @name 悬浮色
-   * @type color
-   * @group primary
-   * @description 用于按钮、文本、链接强调状态时悬浮颜色
-   */
-  --o-primary2: #406fe7;
-  /**
-   * @name 聚焦色
-   * @type color
-   * @group primary
-   * @description 用于按钮、文本、链接强调状态时聚焦颜色
-   */
-  --o-primary3: #00288d;
-  /**
-   * @name 禁用色
-   * @type color
-   * @group primary
-   * @description 用于按钮、文本、链接强调状态时禁用颜色
-   */
-  --o-primary4: #b2c0e4;
-  /**
-   * @name 常规色
-   * @type color
-   * @group major
-   * @description 用于按钮、文本、链接major状态时文本颜色
-   */
-  --o-major1: #feb32a;
-  /**
-   * @name 常规色
-   * @type color
-   * @group success
-   * @description 用于按钮、文本、链接成功状态时常规颜色
-   */
-  --o-success1: #6dc335;
-  /**
-   * @name 悬浮色
-   * @type color
-   * @group success
-   * @description 用于按钮、文本、链接成功状态时悬浮颜色
-   */
-  --o-success2: #93e95b;
-  /**
-   * @name 聚焦色
-   * @type color
-   * @group success
-   * @description 用于按钮、文本、链接成功状态时聚焦颜色
-   */
-  --o-success3: #62af30;
-  /**
-   * @name 禁用色
-   * @type color
-   * @group success
-   * @description 用于按钮、文本、链接成功状态时禁用颜色
-   */
-  --o-success4: #c5e7ae;
-  /**
-   * @name 常规色
-   * @type color
-   * @group warning
-   * @description 用于按钮、文本、链接告警状态时常规颜色
-   */
-  --o-warning1: #ff8e36;
-  /**
-   * @name 悬浮色
-   * @type color
-   * @group warning
-   * @description 用于按钮、文本、链接告警状态时悬浮颜色
-   */
-  --o-warning2: #ffb45c;
-  /**
-   * @name 聚焦色
-   * @type color
-   * @group warning
-   * @description 用于按钮、文本、链接告警状态时聚焦颜色
-   */
-  --o-warning3: #ff801c;
-  /**
-   * @name 禁用色
-   * @type color
-   * @group warning
-   * @description 用于按钮、文本、链接告警状态时禁用颜色
-   */
-  --o-warning4: #ffd2af;
-  /**
-   * @name 常规色
-   * @type color
-   * @group danger
-   * @description 用于按钮、文本、链接错误状态时常规颜色
-   */
-  --o-danger1: #f3524d;
-  /**
-   * @name 悬浮色
-   * @type color
-   * @group danger
-   * @description 用于按钮、文本、链接错误状态时悬浮颜色
-   */
-  --o-danger2: #ff7873;
-  /**
-   * @name 聚焦色
-   * @type color
-   * @group danger
-   * @description 用于按钮、文本、链接错误状态时聚焦颜色
-   */
-  --o-danger3: #f13b35;
-  /**
-   * @name 禁用色
-   * @type color
-   * @group danger
-   * @description 用于按钮、文本、链接错误状态时禁用颜色
-   */
-  --o-danger4: #fabab8;
-  /**
-   * @name 常规色
-   * @type color
-   * @group info
-   * @description 用于按钮、文本、链接信息状态时常规颜色
-   */
-  --o-info1: #e5e5e5;
-  /**
-   * @name 悬浮色
-   * @type color
-   * @group info
-   * @description 用于按钮、文本、链接信息状态时悬浮颜色
-   */
-  --o-info2: #e5e8f0;
-  /**
-   * @name 聚焦色
-   * @type color
-   * @group info
-   * @description 用于按钮、文本、链接信息状态时聚焦颜色
-   */
-  --o-info3: #cccccc;
-  /**
-   * @name 禁用色
-   * @type color
-   * @group info
-   * @description 用于按钮、文本、链接信息状态时禁用颜色
-   */
-  --o-info4: #f7f8fa;
-  /**
-   * @name 一级容器背景色
-   * @type color
-   * @group background
-   * @description 用于页面整体背景色
-   */
-  --o-bg1: #f5f6f8;
-  /**
-   * @name 二级容器背景色
-   * @type color
-   * @group background
-   * @description 用于区块、卡片、弹出框、tooltip背景色
-   */
-  --o-bg2: #ffffff;
-  /**
-   * @name 三级容器背景色
-   * @type color
-   * @group background
-   * @description 用于区块卡片背景色
-   */
-  --o-bg3: #f7f8fa;
-  /**
-   * @name 四级容器背景色
-   * @type color
-   * @group background
-   * @description 用于区块、卡片、表头背景色
-   */
-  --o-bg4: #e5e8f0;
-  /**
-   * @name 标题色
-   * @type color
-   * @group text
-   * @description 用于强调、标题颜色
-   */
-  --o-text1: #000000;
-  /**
-   * @name 标题反色
-   * @type color
-   * @group text
-   * @description 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题
-   */
-  --o-text1_inverse: #ffffff;
-  /**
-   * @name 正文色
-   * @type color
-   * @group text
-   * @description 用于次强调、次级标题、正文颜色
-   */
-  --o-text2: #3f3f3f;
-  /**
-   * @name 正文反色
-   * @type color
-   * @group text
-   * @description 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文
-   */
-  --o-text2_inverse: #e5e5e5;
-  /**
-   * @name 提示色
-   * @type color
-   * @group text
-   * @description 用于提示文本颜色
-   */
-  --o-text3: #707070;
-  /**
-   * @name 提示反色
-   * @type color
-   * @group text
-   * @description 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示
-   */
-  --o-text3_inverse: #b2b2b2;
-  /**
-   * @name 置灰色
-   * @type color
-   * @group text
-   * @description 用于禁用文本颜色
-   */
-  --o-text4: #cccccc;
-  /**
-   * @name 置灰反色
-   * @type color
-   * @group text
-   * @description 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本
-   */
-  --o-text4_inverse: #e5e5e5;
-  /**
-   * @name 边框色
-   * @type color
-   * @group border
-   * @description 较明显的边框
-   */
-  --o-border1: #707070;
-  /**
-   * @name 弱边框色
-   * @type color
-   * @group border
-   * @description 较弱的边框
-   */
-  --o-border2: #e5e5e5;
-  /**
-   * @name 分隔线色1
-   * @type color
-   * @group division
-   * @description 用于分隔线颜色
-   */
-  --o-division1: #707070;
-  /**
-   * @name 遮罩色1
-   * @type mask
-   * @group mask
-   * @description 用于弹窗遮罩色
-   */
-  --o-mask1: rgba(0, 0, 0, 0.5);
-  /**
-   * @name 阴影色1
-   * @type shadow
-   * @group shadow
-   * @description 用于卡片、小弹窗、楼层阴影
-   */
-  --o-shadow-1: 0 1px 5px rgba(45, 47, 51, 0.1);
-  /**
-   * @name 阴影色2
-   * @type shadow
-   * @group shadow
-   * @description 用于卡片悬浮阴影
-   */
-  --o-shadow-2: 0 6px 18px rgba(0, 47, 167, 0.14);
-  /**
-   * @name 阴影色3
-   * @type shadow
-   * @group shadow
-   * @description 用于提示阴影
-   */
-  --o-shadow-3: 0 10px 32px rgba(45, 47, 51, 0.18);
-  /**
-   * @name 间距1
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距1
-   */
-  --o-gap-1: 4px;
-  /**
-   * @name 间距2
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距2
-   */
-  --o-gap-2: 8px;
-  /**
-   * @name 间距3
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距3
-   */
-  --o-gap-3: 12px;
-  /**
-   * @name 间距4
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距4
-   */
-  --o-gap-4: 16px;
-  /**
-   * @name 间距5
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距5
-   */
-  --o-gap-5: 24px;
-  /**
-   * @name 间距6
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距6
-   */
-  --o-gap-6: 32px;
-  /**
-   * @name 间距7
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距7
-   */
-  --o-gap-7: 40px;
-  /**
-   * @name 间距8
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距8
-   */
-  --o-gap-8: 64px;
-  /**
-   * @name 大尺寸
-   * @type size
-   * @group size
-   * @description 尺寸
-   */
-  --o-size-l: 40px;
-  /**
-   * @name 中尺寸
-   * @type size
-   * @group size
-   * @description 尺寸
-   */
-  --o-size-m: 32px;
-  /**
-   * @name 小尺寸
-   * @type size
-   * @group size
-   * @description 小尺寸
-   */
-  --o-size-s: 24px;
-  /**
-   * @name 大尺寸图标
-   * @type size
-   * @group icon_size
-   * @description 尺寸
-   */
-  --o-icon_size-l: 48px;
-  /**
-   * @name 中尺寸图标
-   * @type size
-   * @group icon_size
-   * @description 尺寸
-   */
-  --o-icon_size-m: 32px;
-  /**
-   * @name 小尺寸图标
-   * @type size
-   * @group icon_size
-   * @description 小尺寸
-   */
-  --o-icon_size-s: 24px;
-  /**
-   * @name 超小尺寸图标
-   * @type size
-   * @group icon_size
-   * @description 小尺寸
-   */
-  --o-icon_size-xs: 16px;
-  /**
-   * @name 一级数据展示
-   * @type font
-   * @group font_size
-   * @description 一级数据展示
-   */
-  --o-font_size-display1: 64px;
-  /**
-   * @name 二级数据展示
-   * @type font
-   * @group font_size
-   * @description 二级数据展示
-   */
-  --o-font_size-display2: 54px;
-  /**
-   * @name 三级数据展示
-   * @type font
-   * @group font_size
-   * @description 三级数据展示
-   */
-  --o-font_size-display3: 36px;
-  /**
-   * @name 四级数据展示
-   * @type font
-   * @group font_size
-   * @description 四级数据展示
-   */
-  --o-font_size-display4: 28px;
-  /**
-   * @name 一级标题
-   * @type font
-   * @group font_size
-   * @description 一级标题
-   */
-  --o-font_size-h1: 24px;
-  /**
-   * @name 二级标题
-   * @type font
-   * @group font_size
-   * @description 二级标题
-   */
-  --o-font_size-h2: 20px;
-  /**
-   * @name 三级标题
-   * @type font
-   * @group font_size
-   * @description 三级标题
-   */
-  --o-font_size-h3: 18px;
-  /**
-   * @name 四级标题
-   * @type font
-   * @group font_size
-   * @description 四级标题
-   */
-  --o-font_size-h4: 16px;
-  /**
-   * @name 正文
-   * @type font
-   * @group font_size
-   * @description 正文
-   */
-  --o-font_size-text: 14px;
-  /**
-   * @name 提示文本1
-   * @type font
-   * @group font_size
-   * @description 提示文本1
-   */
-  --o-font_size-tip1: 12px;
-  /**
-   * @name 提示文本2
-   * @type font
-   * @group font_size
-   * @description 提示文本2
-   */
-  --o-font_size-tip2: 10px;
-  /**
-   * @name 一级数据展示
-   * @type font
-   * @group line_height
-   * @description 一级数据展示
-   */
-  --o-line_height-display1: 84px;
-  /**
-   * @name 二级数据展示
-   * @type font
-   * @group line_height
-   * @description 二级数据展示
-   */
-  --o-line_height-display2: 76px;
-  /**
-   * @name 三级数据展示
-   * @type font
-   * @group line_height
-   * @description 三级数据展示
-   */
-  --o-line_height-display3: 48px;
-  /**
-   * @name 四级数据展示
-   * @type font
-   * @group line_height
-   * @description 四级数据展示
-   */
-  --o-line_height-display4: 36px;
-  /**
-   * @name 一级标题
-   * @type font
-   * @group line_height
-   * @description 一级标题
-   */
-  --o-line_height-h1: 32px;
-  /**
-   * @name 二级标题
-   * @type font
-   * @group line_height
-   * @description 二级标题
-   */
-  --o-line_height-h2: 28px;
-  /**
-   * @name 三级标题
-   * @type font
-   * @group line_height
-   * @description 三级标题
-   */
-  --o-line_height-h3: 26px;
-  /**
-   * @name 四级标题
-   * @type font
-   * @group line_height
-   * @description 四级标题
-   */
-  --o-line_height-h4: 24px;
-  /**
-   * @name 正文
-   * @type font
-   * @group line_height
-   * @description 正文
-   */
-  --o-line_height-text: 22px;
-  /**
-   * @name 提示文本1
-   * @type font
-   * @group line_height
-   * @description 提示文本1
-   */
-  --o-line_height-tip1: 18px;
-  /**
-   * @name 提示文本2
-   * @type font
-   * @group line_height
-   * @description 提示文本2
-   */
-  --o-line_height-tip2: 14px;
-  /**
-   * @name 大尺寸圆角
-   * @type radius
-   * @group radius
-   * @description 大尺寸圆角
-   */
-  --o-radius-l: 16px;
-  /**
-   * @name 中尺寸圆角
-   * @type radius
-   * @group radius
-   * @description 中尺寸圆角
-   */
-  --o-radius-m: 8px;
-  /**
-   * @name 小尺寸圆角
-   * @type radius
-   * @group radius
-   * @description 小尺寸圆角
-   */
-  --o-radius-s: 4px;
-  /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于退出屏幕的动画
-   */
-  --o-duration-s: 200ms;
-  /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为standard-in时进入屏幕的动画
-   */
-  --o-duration-m1: 250ms;
-  /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为standard时开始、结束的动画
-   */
-  --o-duration-m2: 300ms;
-  /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为emphasized-in时进入屏幕的动画
-   */
-  --o-duration-m3: 400ms;
-  /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为emphasized时开始、结束的动画
-   */
-  --o-duration-l: 500ms;
-  /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为emphasized时，轮播切换动画
-   */
-  --o-duration-xl: 1000ms;
-  /**
-   * @name 线性动画曲线
-   * @type animation
-   * @group easing
-   * @description 线性曲线
-   */
-  --o-easing-linear: cubic-bezier(0, 0, 1, 1);
-  /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于组件
-   */
-  --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
-  /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于组件
-   */
-  --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
-  /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于组件
-   */
-  --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
-  /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于大卡片、场景切换
-   */
-  --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
-  /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于大卡片、场景切换
-   */
-  --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
-  /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于大卡片、场景切换
-   */
-  --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --o-color-primary1: #ff0000;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/light.color.json b/packages/opendesign/src/tokens/color.json
similarity index 63%
rename from packages/opendesign/src/tokens/light.color.json
rename to packages/opendesign/src/tokens/color.json
index 223032ba..14451c5d 100644
--- a/packages/opendesign/src/tokens/light.color.json
+++ b/packages/opendesign/src/tokens/color.json
@@ -5,27 +5,36 @@
     "value": [
       {
         "key": "color-primary1",
-        "value": "#002fa7",
         "name": "常规色",
-        "description": "用于按钮、文本、链接强调状态时常规颜色"
+        "description": "用于按钮、文本、链接强调状态时常规颜色",
+        "value": {
+          "light": "#002fa7",
+          "dark": "#ff0000"
+        }
       },
       {
         "key": "color-primary2",
-        "value": "#406fe7",
         "name": "悬浮色",
-        "description": "用于按钮、文本、链接强调状态时悬浮颜色"
+        "description": "用于按钮、文本、链接强调状态时悬浮颜色",
+        "value": {
+          "light": "#406fe7"
+        }
       },
       {
         "key": "color-primary3",
-        "value": "#00288d",
         "name": "聚焦色",
-        "description": "用于按钮、文本、链接强调状态时聚焦颜色"
+        "description": "用于按钮、文本、链接强调状态时聚焦颜色",
+        "value": {
+          "light": "#00288d"
+        }
       },
       {
         "key": "color-primary4",
-        "value": "#b2c0e4",
         "name": "禁用色",
-        "description": "用于按钮、文本、链接强调状态时禁用颜色"
+        "description": "用于按钮、文本、链接强调状态时禁用颜色",
+        "value": {
+          "light": "#b2c0e4"
+        }
       }
     ]
   },
@@ -35,9 +44,11 @@
     "value": [
       {
         "key": "color-major1",
-        "value": "#feb32a",
         "name": "常规色",
-        "description": "用于按钮、文本、链接major状态时文本颜色"
+        "description": "用于按钮、文本、链接major状态时文本颜色",
+        "value": {
+          "light": "#feb32a"
+        }
       }
     ]
   },
@@ -47,27 +58,35 @@
     "value": [
       {
         "key": "color-success1",
-        "value": "#6dc335",
         "name": "常规色",
-        "description": "用于按钮、文本、链接成功状态时常规颜色"
+        "description": "用于按钮、文本、链接成功状态时常规颜色",
+        "value": {
+          "light": "#6dc335"
+        }
       },
       {
         "key": "color-success2",
-        "value": "#93e95b",
         "name": "悬浮色",
-        "description": "用于按钮、文本、链接成功状态时悬浮颜色"
+        "description": "用于按钮、文本、链接成功状态时悬浮颜色",
+        "value": {
+          "light": "#93e95b"
+        }
       },
       {
         "key": "color-success3",
-        "value": "#62af30",
         "name": "聚焦色",
-        "description": "用于按钮、文本、链接成功状态时聚焦颜色"
+        "description": "用于按钮、文本、链接成功状态时聚焦颜色",
+        "value": {
+          "light": "#62af30"
+        }
       },
       {
         "key": "color-success4",
-        "value": "#c5e7ae",
         "name": "禁用色",
-        "description": "用于按钮、文本、链接成功状态时禁用颜色"
+        "description": "用于按钮、文本、链接成功状态时禁用颜色",
+        "value": {
+          "light": "#c5e7ae"
+        }
       }
     ]
   },
@@ -77,27 +96,35 @@
     "value": [
       {
         "key": "color-warning1",
-        "value": "#ff8e36",
         "name": "常规色",
-        "description": "用于按钮、文本、链接告警状态时常规颜色"
+        "description": "用于按钮、文本、链接告警状态时常规颜色",
+        "value": {
+          "light": "#ff8e36"
+        }
       },
       {
         "key": "color-warning2",
-        "value": "#ffb45c",
         "name": "悬浮色",
-        "description": "用于按钮、文本、链接告警状态时悬浮颜色"
+        "description": "用于按钮、文本、链接告警状态时悬浮颜色",
+        "value": {
+          "light": "#ffb45c"
+        }
       },
       {
         "key": "color-warning3",
-        "value": "#ff801c",
         "name": "聚焦色",
-        "description": "用于按钮、文本、链接告警状态时聚焦颜色"
+        "description": "用于按钮、文本、链接告警状态时聚焦颜色",
+        "value": {
+          "light": "#ff801c"
+        }
       },
       {
         "key": "color-warning4",
-        "value": "#ffd2af",
         "name": "禁用色",
-        "description": "用于按钮、文本、链接告警状态时禁用颜色"
+        "description": "用于按钮、文本、链接告警状态时禁用颜色",
+        "value": {
+          "light": "#ffd2af"
+        }
       }
     ]
   },
@@ -107,27 +134,35 @@
     "value": [
       {
         "key": "color-danger1",
-        "value": "#f3524d",
         "name": "常规色",
-        "description": "用于按钮、文本、链接错误状态时常规颜色"
+        "description": "用于按钮、文本、链接错误状态时常规颜色",
+        "value": {
+          "light": "#f3524d"
+        }
       },
       {
         "key": "color-danger2",
-        "value": "#ff7873",
         "name": "悬浮色",
-        "description": "用于按钮、文本、链接错误状态时悬浮颜色"
+        "description": "用于按钮、文本、链接错误状态时悬浮颜色",
+        "value": {
+          "light": "#ff7873"
+        }
       },
       {
         "key": "color-danger3",
-        "value": "#f13b35",
         "name": "聚焦色",
-        "description": "用于按钮、文本、链接错误状态时聚焦颜色"
+        "description": "用于按钮、文本、链接错误状态时聚焦颜色",
+        "value": {
+          "light": "#f13b35"
+        }
       },
       {
         "key": "color-danger4",
-        "value": "#fabab8",
         "name": "禁用色",
-        "description": "用于按钮、文本、链接错误状态时禁用颜色"
+        "description": "用于按钮、文本、链接错误状态时禁用颜色",
+        "value": {
+          "light": "#fabab8"
+        }
       }
     ]
   },
@@ -137,27 +172,35 @@
     "value": [
       {
         "key": "color-info1",
-        "value": "#e5e5e5",
         "name": "常规色",
-        "description": "用于按钮、文本、链接信息状态时常规颜色"
+        "description": "用于按钮、文本、链接信息状态时常规颜色",
+        "value": {
+          "light": "#e5e5e5"
+        }
       },
       {
         "key": "color-info2",
-        "value": "#e5e8f0",
         "name": "悬浮色",
-        "description": "用于按钮、文本、链接信息状态时悬浮颜色"
+        "description": "用于按钮、文本、链接信息状态时悬浮颜色",
+        "value": {
+          "light": "#e5e8f0"
+        }
       },
       {
         "key": "color-info3",
-        "value": "#cccccc",
         "name": "聚焦色",
-        "description": "用于按钮、文本、链接信息状态时聚焦颜色"
+        "description": "用于按钮、文本、链接信息状态时聚焦颜色",
+        "value": {
+          "light": "#cccccc"
+        }
       },
       {
         "key": "color-info4",
-        "value": "#f7f8fa",
         "name": "禁用色",
-        "description": "用于按钮、文本、链接信息状态时禁用颜色"
+        "description": "用于按钮、文本、链接信息状态时禁用颜色",
+        "value": {
+          "light": "#f7f8fa"
+        }
       }
     ]
   },
@@ -167,27 +210,35 @@
     "value": [
       {
         "key": "color-bg1",
-        "value": "#f5f6f8",
         "name": "一级容器背景色",
-        "description": "用于页面整体背景色"
+        "description": "用于页面整体背景色",
+        "value": {
+          "light": "#f5f6f8"
+        }
       },
       {
         "key": "color-bg2",
-        "value": "#ffffff",
         "name": "二级容器背景色",
-        "description": "用于区块、卡片、弹出框、tooltip背景色"
+        "description": "用于区块、卡片、弹出框、tooltip背景色",
+        "value": {
+          "light": "#ffffff"
+        }
       },
       {
         "key": "color-bg3",
-        "value": "#f7f8fa",
         "name": "三级容器背景色",
-        "description": "用于区块卡片背景色"
+        "description": "用于区块卡片背景色",
+        "value": {
+          "light": "#f7f8fa"
+        }
       },
       {
         "key": "color-bg4",
-        "value": "#e5e8f0",
         "name": "四级容器背景色",
-        "description": "用于区块、卡片、表头背景色"
+        "description": "用于区块、卡片、表头背景色",
+        "value": {
+          "light": "#e5e8f0"
+        }
       }
     ]
   },
@@ -197,51 +248,67 @@
     "value": [
       {
         "key": "color-text1",
-        "value": "#000000",
         "name": "标题色",
-        "description": "用于强调、标题颜色"
+        "description": "用于强调、标题颜色",
+        "value": {
+          "light": "#000000"
+        }
       },
       {
         "key": "color-text1_inverse",
-        "value": "#ffffff",
         "name": "标题反色",
-        "description": "用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题"
+        "description": "用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题",
+        "value": {
+          "light": "#ffffff"
+        }
       },
       {
         "key": "color-text2",
-        "value": "#3f3f3f",
         "name": "正文色",
-        "description": "用于次强调、次级标题、正文颜色"
+        "description": "用于次强调、次级标题、正文颜色",
+        "value": {
+          "light": "#3f3f3f"
+        }
       },
       {
         "key": "color-text2_inverse",
-        "value": "#e5e5e5",
         "name": "正文反色",
-        "description": "用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文"
+        "description": "用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文",
+        "value": {
+          "light": "#e5e5e5"
+        }
       },
       {
         "key": "color-text3",
-        "value": "#707070",
         "name": "提示色",
-        "description": "用于提示文本颜色"
+        "description": "用于提示文本颜色",
+        "value": {
+          "light": "#707070"
+        }
       },
       {
         "key": "color-text3_inverse",
-        "value": "#b2b2b2",
         "name": "提示反色",
-        "description": "用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示"
+        "description": "用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示",
+        "value": {
+          "light": "#b2b2b2"
+        }
       },
       {
         "key": "color-text4",
-        "value": "#cccccc",
         "name": "置灰色",
-        "description": "用于禁用文本颜色"
+        "description": "用于禁用文本颜色",
+        "value": {
+          "light": "#cccccc"
+        }
       },
       {
         "key": "color-text4_inverse",
-        "value": "#e5e5e5",
         "name": "置灰反色",
-        "description": "用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本"
+        "description": "用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本",
+        "value": {
+          "light": "#e5e5e5"
+        }
       }
     ]
   },
@@ -251,15 +318,19 @@
     "value": [
       {
         "key": "color-border1",
-        "value": "#707070",
         "name": "边框色",
-        "description": "较明显的边框"
+        "description": "较明显的边框",
+        "value": {
+          "light": "#707070"
+        }
       },
       {
         "key": "color-border2",
-        "value": "#e5e5e5",
         "name": "弱边框色",
-        "description": "较弱的边框"
+        "description": "较弱的边框",
+        "value": {
+          "light": "#e5e5e5"
+        }
       }
     ]
   },
@@ -269,9 +340,11 @@
     "value": [
       {
         "key": "color-division1",
-        "value": "#707070",
         "name": "分隔线色1",
-        "description": "用于分隔线颜色"
+        "description": "用于分隔线颜色",
+        "value": {
+          "light": "#707070"
+        }
       }
     ]
   },
@@ -281,9 +354,11 @@
     "value": [
       {
         "key": "color-mask1",
-        "value": "rgba(0, 0, 0, 0.5)",
         "name": "遮罩色1",
-        "description": "用于弹窗遮罩色"
+        "description": "用于弹窗遮罩色",
+        "value": {
+          "light": "rgba(0, 0, 0, 0.5)"
+        }
       }
     ]
   },
@@ -293,21 +368,27 @@
     "value": [
       {
         "key": "shadow-1",
-        "value": "0 1px 5px rgba(45, 47, 51, 0.1)",
         "name": "阴影色1",
-        "description": "用于卡片、小弹窗、楼层阴影"
+        "description": "用于卡片、小弹窗、楼层阴影",
+        "value": {
+          "light": "0 1px 5px rgba(45, 47, 51, 0.1)"
+        }
       },
       {
         "key": "shadow-2",
-        "value": "0 6px 18px rgba(0, 47, 167, 0.14)",
         "name": "阴影色2",
-        "description": "用于卡片悬浮阴影"
+        "description": "用于卡片悬浮阴影",
+        "value": {
+          "light": "0 6px 18px rgba(0, 47, 167, 0.14)"
+        }
       },
       {
         "key": "shadow-3",
-        "value": "0 10px 32px rgba(45, 47, 51, 0.18)",
         "name": "阴影色3",
-        "description": "用于提示阴影"
+        "description": "用于提示阴影",
+        "value": {
+          "light": "0 10px 32px rgba(45, 47, 51, 0.18)"
+        }
       }
     ]
   }
diff --git a/packages/opendesign/src/tokens/dark.color.json b/packages/opendesign/src/tokens/dark.color.json
deleted file mode 100644
index e920354c..00000000
--- a/packages/opendesign/src/tokens/dark.color.json
+++ /dev/null
@@ -1,314 +0,0 @@
-{
-  "primary": {
-    "name": "主色",
-    "type": "color",
-    "value": [
-      {
-        "key": "primary1",
-        "value": "#002fa7",
-        "name": "常规色",
-        "description": "用于按钮、文本、链接强调状态时常规颜色"
-      },
-      {
-        "key": "primary2",
-        "value": "#406fe7",
-        "name": "悬浮色",
-        "description": "用于按钮、文本、链接强调状态时悬浮颜色"
-      },
-      {
-        "key": "primary3",
-        "value": "#00288d",
-        "name": "聚焦色",
-        "description": "用于按钮、文本、链接强调状态时聚焦颜色"
-      },
-      {
-        "key": "primary4",
-        "value": "#b2c0e4",
-        "name": "禁用色",
-        "description": "用于按钮、文本、链接强调状态时禁用颜色"
-      }
-    ]
-  },
-  "major": {
-    "name": "辅色",
-    "type": "color",
-    "value": [
-      {
-        "key": "major1",
-        "value": "#feb32a",
-        "name": "常规色",
-        "description": "用于按钮、文本、链接major状态时文本颜色"
-      }
-    ]
-  },
-  "success": {
-    "name": "成功色",
-    "type": "color",
-    "value": [
-      {
-        "key": "success1",
-        "value": "#6dc335",
-        "name": "常规色",
-        "description": "用于按钮、文本、链接成功状态时常规颜色"
-      },
-      {
-        "key": "success2",
-        "value": "#93e95b",
-        "name": "悬浮色",
-        "description": "用于按钮、文本、链接成功状态时悬浮颜色"
-      },
-      {
-        "key": "success3",
-        "value": "#62af30",
-        "name": "聚焦色",
-        "description": "用于按钮、文本、链接成功状态时聚焦颜色"
-      },
-      {
-        "key": "success4",
-        "value": "#c5e7ae",
-        "name": "禁用色",
-        "description": "用于按钮、文本、链接成功状态时禁用颜色"
-      }
-    ]
-  },
-  "warning": {
-    "name": "告警色",
-    "type": "color",
-    "value": [
-      {
-        "key": "warning1",
-        "value": "#ff8e36",
-        "name": "常规色",
-        "description": "用于按钮、文本、链接告警状态时常规颜色"
-      },
-      {
-        "key": "warning2",
-        "value": "#ffb45c",
-        "name": "悬浮色",
-        "description": "用于按钮、文本、链接告警状态时悬浮颜色"
-      },
-      {
-        "key": "warning3",
-        "value": "#ff801c",
-        "name": "聚焦色",
-        "description": "用于按钮、文本、链接告警状态时聚焦颜色"
-      },
-      {
-        "key": "warning4",
-        "value": "#ffd2af",
-        "name": "禁用色",
-        "description": "用于按钮、文本、链接告警状态时禁用颜色"
-      }
-    ]
-  },
-  "danger": {
-    "name": "错误色",
-    "type": "color",
-    "value": [
-      {
-        "key": "danger1",
-        "value": "#f3524d",
-        "name": "常规色",
-        "description": "用于按钮、文本、链接错误状态时常规颜色"
-      },
-      {
-        "key": "danger2",
-        "value": "#ff7873",
-        "name": "悬浮色",
-        "description": "用于按钮、文本、链接错误状态时悬浮颜色"
-      },
-      {
-        "key": "danger3",
-        "value": "#f13b35",
-        "name": "聚焦色",
-        "description": "用于按钮、文本、链接错误状态时聚焦颜色"
-      },
-      {
-        "key": "danger4",
-        "value": "#fabab8",
-        "name": "禁用色",
-        "description": "用于按钮、文本、链接错误状态时禁用颜色"
-      }
-    ]
-  },
-  "info": {
-    "name": "信息色",
-    "type": "color",
-    "value": [
-      {
-        "key": "info1",
-        "value": "#e5e5e5",
-        "name": "常规色",
-        "description": "用于按钮、文本、链接信息状态时常规颜色"
-      },
-      {
-        "key": "info2",
-        "value": "#e5e8f0",
-        "name": "悬浮色",
-        "description": "用于按钮、文本、链接信息状态时悬浮颜色"
-      },
-      {
-        "key": "info3",
-        "value": "#cccccc",
-        "name": "聚焦色",
-        "description": "用于按钮、文本、链接信息状态时聚焦颜色"
-      },
-      {
-        "key": "info4",
-        "value": "#f7f8fa",
-        "name": "禁用色",
-        "description": "用于按钮、文本、链接信息状态时禁用颜色"
-      }
-    ]
-  },
-  "background": {
-    "name": "背景色",
-    "type": "color",
-    "value": [
-      {
-        "key": "bg1",
-        "value": "#f5f6f8",
-        "name": "一级容器背景色",
-        "description": "用于页面整体背景色"
-      },
-      {
-        "key": "bg2",
-        "value": "#ffffff",
-        "name": "二级容器背景色",
-        "description": "用于区块、卡片、弹出框、tooltip背景色"
-      },
-      {
-        "key": "bg3",
-        "value": "#f7f8fa",
-        "name": "三级容器背景色",
-        "description": "用于区块卡片背景色"
-      },
-      {
-        "key": "bg4",
-        "value": "#e5e8f0",
-        "name": "四级容器背景色",
-        "description": "用于区块、卡片、表头背景色"
-      }
-    ]
-  },
-  "text": {
-    "name": "文字色",
-    "type": "color",
-    "value": [
-      {
-        "key": "text1",
-        "value": "#000000",
-        "name": "标题色",
-        "description": "用于强调、标题颜色"
-      },
-      {
-        "key": "text1_inverse",
-        "value": "#ffffff",
-        "name": "标题反色",
-        "description": "用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题"
-      },
-      {
-        "key": "text2",
-        "value": "#3f3f3f",
-        "name": "正文色",
-        "description": "用于次强调、次级标题、正文颜色"
-      },
-      {
-        "key": "text2_inverse",
-        "value": "#e5e5e5",
-        "name": "正文反色",
-        "description": "用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文"
-      },
-      {
-        "key": "text3",
-        "value": "#707070",
-        "name": "提示色",
-        "description": "用于提示文本颜色"
-      },
-      {
-        "key": "text3_inverse",
-        "value": "#b2b2b2",
-        "name": "提示反色",
-        "description": "用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示"
-      },
-      {
-        "key": "text4",
-        "value": "#cccccc",
-        "name": "置灰色",
-        "description": "用于禁用文本颜色"
-      },
-      {
-        "key": "text4_inverse",
-        "value": "#e5e5e5",
-        "name": "置灰反色",
-        "description": "用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本"
-      }
-    ]
-  },
-  "border": {
-    "name": "边框色",
-    "type": "color",
-    "value": [
-      {
-        "key": "border1",
-        "value": "#707070",
-        "name": "边框色",
-        "description": "较明显的边框"
-      },
-      {
-        "key": "border2",
-        "value": "#e5e5e5",
-        "name": "弱边框色",
-        "description": "较弱的边框"
-      }
-    ]
-  },
-  "division": {
-    "name": "分隔线色",
-    "type": "color",
-    "value": [
-      {
-        "key": "division1",
-        "value": "#707070",
-        "name": "分隔线色1",
-        "description": "用于分隔线颜色"
-      }
-    ]
-  },
-  "mask": {
-    "name": "遮罩色",
-    "type": "mask",
-    "value": [
-      {
-        "key": "mask1",
-        "value": "rgba(0, 0, 0, 0.5)",
-        "name": "遮罩色1",
-        "description": "用于弹窗遮罩色"
-      }
-    ]
-  },
-  "shadow": {
-    "name": "阴影色",
-    "type": "shadow",
-    "value": [
-      {
-        "key": "shadow-1",
-        "value": "0 1px 5px rgba(45, 47, 51, 0.1)",
-        "name": "阴影色1",
-        "description": "用于卡片、小弹窗、楼层阴影"
-      },
-      {
-        "key": "shadow-2",
-        "value": "0 6px 18px rgba(0, 47, 167, 0.14)",
-        "name": "阴影色2",
-        "description": "用于卡片悬浮阴影"
-      },
-      {
-        "key": "shadow-3",
-        "value": "0 10px 32px rgba(45, 47, 51, 0.18)",
-        "name": "阴影色3",
-        "description": "用于提示阴影"
-      }
-    ]
-  }
-}
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/size.json b/packages/opendesign/src/tokens/size.json
index 831ad5ac..96c21c36 100644
--- a/packages/opendesign/src/tokens/size.json
+++ b/packages/opendesign/src/tokens/size.json
@@ -5,51 +5,67 @@
     "value": [
       {
         "key": "gap-1",
-        "value": "4px",
         "name": "间距1",
-        "description": "用于组件之间的间距1"
+        "description": "用于组件之间的间距1",
+        "value": {
+          "light": "4px"
+        }
       },
       {
         "key": "gap-2",
-        "value": "8px",
         "name": "间距2",
-        "description": "用于组件之间的间距2"
+        "description": "用于组件之间的间距2",
+        "value": {
+          "light": "8px"
+        }
       },
       {
         "key": "gap-3",
-        "value": "12px",
         "name": "间距3",
-        "description": "用于组件之间的间距3"
+        "description": "用于组件之间的间距3",
+        "value": {
+          "light": "12px"
+        }
       },
       {
         "key": "gap-4",
-        "value": "16px",
         "name": "间距4",
-        "description": "用于组件之间的间距4"
+        "description": "用于组件之间的间距4",
+        "value": {
+          "light": "16px"
+        }
       },
       {
         "key": "gap-5",
-        "value": "24px",
         "name": "间距5",
-        "description": "用于组件之间的间距5"
+        "description": "用于组件之间的间距5",
+        "value": {
+          "light": "24px"
+        }
       },
       {
         "key": "gap-6",
-        "value": "32px",
         "name": "间距6",
-        "description": "用于组件之间的间距6"
+        "description": "用于组件之间的间距6",
+        "value": {
+          "light": "32px"
+        }
       },
       {
         "key": "gap-7",
-        "value": "40px",
         "name": "间距7",
-        "description": "用于组件之间的间距7"
+        "description": "用于组件之间的间距7",
+        "value": {
+          "light": "40px"
+        }
       },
       {
         "key": "gap-8",
-        "value": "64px",
         "name": "间距8",
-        "description": "用于组件之间的间距8"
+        "description": "用于组件之间的间距8",
+        "value": {
+          "light": "64px"
+        }
       }
     ]
   },
@@ -59,21 +75,27 @@
     "value": [
       {
         "key": "size-l",
-        "value": "40px",
         "name": "大尺寸",
-        "description": "尺寸"
+        "description": "尺寸",
+        "value": {
+          "light": "40px"
+        }
       },
       {
         "key": "size-m",
-        "value": "32px",
         "name": "中尺寸",
-        "description": "尺寸"
+        "description": "尺寸",
+        "value": {
+          "light": "32px"
+        }
       },
       {
         "key": "size-s",
-        "value": "24px",
         "name": "小尺寸",
-        "description": "小尺寸"
+        "description": "小尺寸",
+        "value": {
+          "light": "24px"
+        }
       }
     ]
   },
@@ -83,27 +105,35 @@
     "value": [
       {
         "key": "icon_size-l",
-        "value": "48px",
         "name": "大尺寸图标",
-        "description": "尺寸"
+        "description": "尺寸",
+        "value": {
+          "light": "48px"
+        }
       },
       {
         "key": "icon_size-m",
-        "value": "32px",
         "name": "中尺寸图标",
-        "description": "尺寸"
+        "description": "尺寸",
+        "value": {
+          "light": "32px"
+        }
       },
       {
         "key": "icon_size-s",
-        "value": "24px",
         "name": "小尺寸图标",
-        "description": "小尺寸"
+        "description": "小尺寸",
+        "value": {
+          "light": "24px"
+        }
       },
       {
         "key": "icon_size-xs",
-        "value": "16px",
         "name": "超小尺寸图标",
-        "description": "小尺寸"
+        "description": "小尺寸",
+        "value": {
+          "light": "16px"
+        }
       }
     ]
   },
@@ -113,69 +143,91 @@
     "value": [
       {
         "key": "font_size-display1",
-        "value": "64px",
         "name": "一级数据展示",
-        "description": "一级数据展示"
+        "description": "一级数据展示",
+        "value": {
+          "light": "64px"
+        }
       },
       {
         "key": "font_size-display2",
-        "value": "54px",
         "name": "二级数据展示",
-        "description": "二级数据展示"
+        "description": "二级数据展示",
+        "value": {
+          "light": "54px"
+        }
       },
       {
         "key": "font_size-display3",
-        "value": "36px",
         "name": "三级数据展示",
-        "description": "三级数据展示"
+        "description": "三级数据展示",
+        "value": {
+          "light": "36px"
+        }
       },
       {
         "key": "font_size-display4",
-        "value": "28px",
         "name": "四级数据展示",
-        "description": "四级数据展示"
+        "description": "四级数据展示",
+        "value": {
+          "light": "28px"
+        }
       },
       {
         "key": "font_size-h1",
-        "value": "24px",
         "name": "一级标题",
-        "description": "一级标题"
+        "description": "一级标题",
+        "value": {
+          "light": "24px"
+        }
       },
       {
         "key": "font_size-h2",
-        "value": "20px",
         "name": "二级标题",
-        "description": "二级标题"
+        "description": "二级标题",
+        "value": {
+          "light": "20px"
+        }
       },
       {
         "key": "font_size-h3",
-        "value": "18px",
         "name": "三级标题",
-        "description": "三级标题"
+        "description": "三级标题",
+        "value": {
+          "light": "18px"
+        }
       },
       {
         "key": "font_size-h4",
-        "value": "16px",
         "name": "四级标题",
-        "description": "四级标题"
+        "description": "四级标题",
+        "value": {
+          "light": "16px"
+        }
       },
       {
         "key": "font_size-text",
-        "value": "14px",
         "name": "正文",
-        "description": "正文"
+        "description": "正文",
+        "value": {
+          "light": "14px"
+        }
       },
       {
         "key": "font_size-tip1",
-        "value": "12px",
         "name": "提示文本1",
-        "description": "提示文本1"
+        "description": "提示文本1",
+        "value": {
+          "light": "12px"
+        }
       },
       {
         "key": "font_size-tip2",
-        "value": "10px",
         "name": "提示文本2",
-        "description": "提示文本2"
+        "description": "提示文本2",
+        "value": {
+          "light": "10px"
+        }
       }
     ]
   },
@@ -185,69 +237,91 @@
     "value": [
       {
         "key": "line_height-display1",
-        "value": "84px",
         "name": "一级数据展示",
-        "description": "一级数据展示"
+        "description": "一级数据展示",
+        "value": {
+          "light": "84px"
+        }
       },
       {
         "key": "line_height-display2",
-        "value": "76px",
         "name": "二级数据展示",
-        "description": "二级数据展示"
+        "description": "二级数据展示",
+        "value": {
+          "light": "76px"
+        }
       },
       {
         "key": "line_height-display3",
-        "value": "48px",
         "name": "三级数据展示",
-        "description": "三级数据展示"
+        "description": "三级数据展示",
+        "value": {
+          "light": "48px"
+        }
       },
       {
         "key": "line_height-display4",
-        "value": "36px",
         "name": "四级数据展示",
-        "description": "四级数据展示"
+        "description": "四级数据展示",
+        "value": {
+          "light": "36px"
+        }
       },
       {
         "key": "line_height-h1",
-        "value": "32px",
         "name": "一级标题",
-        "description": "一级标题"
+        "description": "一级标题",
+        "value": {
+          "light": "32px"
+        }
       },
       {
         "key": "line_height-h2",
-        "value": "28px",
         "name": "二级标题",
-        "description": "二级标题"
+        "description": "二级标题",
+        "value": {
+          "light": "28px"
+        }
       },
       {
         "key": "line_height-h3",
-        "value": "26px",
         "name": "三级标题",
-        "description": "三级标题"
+        "description": "三级标题",
+        "value": {
+          "light": "26px"
+        }
       },
       {
         "key": "line_height-h4",
-        "value": "24px",
         "name": "四级标题",
-        "description": "四级标题"
+        "description": "四级标题",
+        "value": {
+          "light": "24px"
+        }
       },
       {
         "key": "line_height-text",
-        "value": "22px",
         "name": "正文",
-        "description": "正文"
+        "description": "正文",
+        "value": {
+          "light": "22px"
+        }
       },
       {
         "key": "line_height-tip1",
-        "value": "18px",
         "name": "提示文本1",
-        "description": "提示文本1"
+        "description": "提示文本1",
+        "value": {
+          "light": "18px"
+        }
       },
       {
         "key": "line_height-tip2",
-        "value": "14px",
         "name": "提示文本2",
-        "description": "提示文本2"
+        "description": "提示文本2",
+        "value": {
+          "light": "14px"
+        }
       }
     ]
   },
@@ -257,21 +331,27 @@
     "value": [
       {
         "key": "radius-l",
-        "value": "16px",
         "name": "大尺寸圆角",
-        "description": "大尺寸圆角"
+        "description": "大尺寸圆角",
+        "value": {
+          "light": "16px"
+        }
       },
       {
         "key": "radius-m",
-        "value": "8px",
         "name": "中尺寸圆角",
-        "description": "中尺寸圆角"
+        "description": "中尺寸圆角",
+        "value": {
+          "light": "8px"
+        }
       },
       {
         "key": "radius-s",
-        "value": "4px",
         "name": "小尺寸圆角",
-        "description": "小尺寸圆角"
+        "description": "小尺寸圆角",
+        "value": {
+          "light": "4px"
+        }
       }
     ]
   },
@@ -281,39 +361,51 @@
     "value": [
       {
         "key": "duration-s",
-        "value": "200ms",
         "name": "持续时间",
-        "description": "用于退出屏幕的动画"
+        "description": "用于退出屏幕的动画",
+        "value": {
+          "light": "200ms"
+        }
       },
       {
         "key": "duration-m1",
-        "value": "250ms",
         "name": "持续时间",
-        "description": "用于当曲线为standard-in时进入屏幕的动画"
+        "description": "用于当曲线为standard-in时进入屏幕的动画",
+        "value": {
+          "light": "250ms"
+        }
       },
       {
         "key": "duration-m2",
-        "value": "300ms",
         "name": "持续时间",
-        "description": "用于当曲线为standard时开始、结束的动画"
+        "description": "用于当曲线为standard时开始、结束的动画",
+        "value": {
+          "light": "300ms"
+        }
       },
       {
         "key": "duration-m3",
-        "value": "400ms",
         "name": "持续时间",
-        "description": "用于当曲线为emphasized-in时进入屏幕的动画"
+        "description": "用于当曲线为emphasized-in时进入屏幕的动画",
+        "value": {
+          "light": "400ms"
+        }
       },
       {
         "key": "duration-l",
-        "value": "500ms",
         "name": "持续时间",
-        "description": "用于当曲线为emphasized时开始、结束的动画"
+        "description": "用于当曲线为emphasized时开始、结束的动画",
+        "value": {
+          "light": "500ms"
+        }
       },
       {
         "key": "duration-xl",
-        "value": "1000ms",
         "name": "持续时间",
-        "description": "用于当曲线为emphasized时，轮播切换动画"
+        "description": "用于当曲线为emphasized时，轮播切换动画",
+        "value": {
+          "light": "1000ms"
+        }
       }
     ]
   },
@@ -323,45 +415,59 @@
     "value": [
       {
         "key": "easing-linear",
-        "value": "cubic-bezier(0, 0, 1, 1)",
         "name": "线性动画曲线",
-        "description": "线性曲线"
+        "description": "线性曲线",
+        "value": {
+          "light": "cubic-bezier(0, 0, 1, 1)"
+        }
       },
       {
         "key": "easing-standard",
-        "value": "cubic-bezier(0.2, 0, 0, 1)",
         "name": "动画曲线",
-        "description": "用于组件"
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)"
+        }
       },
       {
         "key": "easing-standard-in",
-        "value": "cubic-bezier(0, 0, 0, 1)",
         "name": "动画曲线",
-        "description": "用于组件"
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0, 0, 0, 1)"
+        }
       },
       {
         "key": "easing-standard-out",
-        "value": "cubic-bezier(0.3, 0, 1, 1)",
         "name": "动画曲线",
-        "description": "用于组件"
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 1, 1)"
+        }
       },
       {
         "key": "easing-emphasized",
-        "value": "cubic-bezier(0.2, 0, 0, 1)",
         "name": "动画曲线",
-        "description": "用于大卡片、场景切换"
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)"
+        }
       },
       {
         "key": "easing-emphasized-in",
-        "value": "cubic-bezier(0.3, 0, 0.8, 0.15)",
         "name": "动画曲线",
-        "description": "用于大卡片、场景切换"
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 0.8, 0.15)"
+        }
       },
       {
         "key": "easing-emphasized-out",
-        "value": "cubic-bezier(0.05, 0.7, 0.1, 1)",
         "name": "动画曲线",
-        "description": "用于大卡片、场景切换"
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.05, 0.7, 0.1, 1)"
+        }
       }
     ]
   }
diff --git a/packages/opendesign/src/tokens/token.config.ts b/packages/opendesign/src/tokens/token.config.ts
index 5a553d80..f1bb31d4 100644
--- a/packages/opendesign/src/tokens/token.config.ts
+++ b/packages/opendesign/src/tokens/token.config.ts
@@ -1,15 +1,8 @@
 module.exports = {
   prefix: '--o-',
   output: '../components/style/',
-  globalTokenFile: ['./size.json'],
-  tokens: [
-    {
-      theme: ['default', 'light'],
-      file: ['./light.color.json']
-    },
-    {
-      theme: 'dark',
-      file: ['./dark.color.json']
-    }
-  ]
+  themes: ['light', 'dark'],
+  defaultTheme: 'light',
+  tokenFile: ['./color.json', './size.json'],
+  codeSnippetsFile: '../../../../.vscode/opendesign.token.code-snippets'
 };
\ No newline at end of file
diff --git a/packages/scripts/src/gen-tokens/index.ts b/packages/scripts/src/gen-tokens/index.ts
index bef5a48e..c4a87c6c 100644
--- a/packages/scripts/src/gen-tokens/index.ts
+++ b/packages/scripts/src/gen-tokens/index.ts
@@ -1,24 +1,39 @@
 import path from 'path';
 import fs from 'fs-extra';
 
-export interface TokenOptionsT {
-  config: string
-}
 export interface TokenConfigT {
   output: string,
   prefix: string,
-  tokens: Array<{ theme: string, file: Array<string> }>,
-  globalTokenFile: Array<string>,
+  themes: string[],
+  defaultTheme: string,
+  tokenFile: string[],
+  codeSnippetsFile: string
 }
 interface FlatTokenT {
   prefix: string,
   catgName: string,
   key: string,
-  value: string,
+  tokenKey: string,
+  name: string,
+  type: string,
+  group: string,
+  description: string,
+  themes: string[],
+  value: {
+    [key: string]: string
+  }
+}
+interface ThemeTokenT {
+  prefix: string,
+  catgName: string,
+  key: string,
+  tokenKey: string,
   name: string,
   type: string,
   group: string,
-  description: string
+  description: string,
+  themes: string[],
+  value: string
 }
 
 export interface TokenT {
@@ -27,65 +42,99 @@ export interface TokenT {
     type: string,
     value: Array<{
       key: string,
-      value: string,
       name: string,
-      description: string
+      description: string,
+      value: {
+        [key: string]: string
+      }
     }>
   }
 }
 
-type TokenListT = Array<{ theme: string, tokens: TokenT }>
-
-const base = process.cwd();
-
-async function readTokens(configFile: string) {
-  const cfg = path.resolve(base, configFile || './token.config.ts');
-  const configData: TokenConfigT = await require(cfg);
-  const { prefix, tokens, output, globalTokenFile = [] } = configData;
-  let tokenData: TokenListT = [];
-
-  if (Array.isArray(tokens)) {
-    tokenData = tokens.map(tk => {
+/**
+ * 读取配置文件
+ */
+async function readConfig(cfg: string) {
+  const base = process.cwd();
+  const configFile = path.resolve(base, cfg || './token.config.ts');
+  const configData: TokenConfigT = await require(configFile);
+  const cfgDir = path.dirname(configFile);
 
-      const files = tk.file.concat(globalTokenFile);
-      const themeToken = {};
+  const { tokenFile, output = './', codeSnippetsFile } = configData;
 
-      files.forEach(f => {
-        const fpath = path.resolve(path.dirname(cfg), f);
-        try {
-          const content = require(fpath);
-          Object.assign(themeToken, content);
-        } catch (error) {
-          console.warn('load token eror:', fpath);
-        }
-      });
+  configData.output = path.resolve(cfgDir, output);
 
-      return {
-        theme: tk.theme,
-        tokens: themeToken
-      };
+  if (codeSnippetsFile) {
+    configData.codeSnippetsFile = path.resolve(cfgDir, codeSnippetsFile);
+  }
 
-    });
+  if (Array.isArray(tokenFile)) {
+    configData.tokenFile = tokenFile.map(item => path.resolve(cfgDir, item));
+  } else if (typeof tokenFile === 'string') {
+    configData.tokenFile = [path.resolve(cfgDir, tokenFile)];
   }
 
-  const outDir = path.resolve(path.dirname(cfg), output);
   return {
-    prefix,
-    tokens: tokenData,
-    outDir
+    file: configFile,
+    data: configData
   };
 }
+/**
+ * 读取tokens
+ */
+async function readTokens(configData: TokenConfigT) {
+  console.warn('reading tokens...');
+
+  const { prefix, tokenFile } = configData;
+  const tokens: Record<string, FlatTokenT> = {};
+
+  tokenFile.forEach(tk => {
+    try {
+      const tokenContent: TokenT = require(tk);
+      Object.keys(tokenContent).forEach(k => {
+        const catg = tokenContent[k];
+        catg.value.forEach(item => {
+          const { key, value, ...rest } = item;
+          const tokenKey = `${prefix}${item.key}`;
+
+          if (tokens[key]) {
+            console.warn('重复定义的token:', tokenKey);
+          }
+
+          tokens[key] = {
+            key,
+            tokenKey,
+            value,
+            prefix,
+            type: catg.type,
+            group: k,
+            catgName: catg.name,
+            themes: Object.keys(value),
+            ...rest,
+          };
+        });
+      });
+
+    } catch (error) {
+      console.warn('load token eror:', tk);
+    }
+  });
 
-function tokenCssTemplate(themeArray: string[], flatToken: Array<FlatTokenT>) {
-  const content = flatToken.map(item => {
-    const { prefix: p, key, value, name = '', type = '', description = '', group = '' } = item;
+  return tokens;
+}
+/**
+ * 生成css的模板
+ */
+function tokenCssTemplate(themeArray: string[], tokens: Array<ThemeTokenT>) {
+  const content = tokens.map(item => {
+    const { tokenKey, value, name = '', type = '', description = '', group = '' } = item;
     return `  /**
    * @name ${name}
    * @type ${type}
    * @group ${group}
    * @description ${description}
    */
-  ${p}${key}: ${value};`;
+  ${tokenKey}: ${value};`;
   });
 
   const selector = themeArray.map(t => {
@@ -100,37 +149,69 @@ ${selector.join(',\n')} {
 ${content.join('\n')}
 }`;
 }
-function generateTokenCss(tokenData: { tokens: TokenListT, prefix: string }, outDir: string) {
-
-  const { tokens, prefix = '--o-' } = tokenData;
-
-  tokens.forEach(tk => {
-    const flatToken: Array<FlatTokenT> = [];
-    const { theme } = tk;
-
-    Object.keys(tk.tokens).forEach(k => {
-      const catg = tk.tokens[k];
-      catg.value.forEach(item => {
-        flatToken.push({
-          ...item,
-          prefix,
-          type: catg.type,
-          group: k,
-          catgName: catg.name
+
+/**
+ * 生成token.css
+ */
+function generateTokenCss(tokens: Record<string, FlatTokenT>, themes: string[], defaultTheme: string, outDir: string) {
+  const themeToken: Record<string, Array<ThemeTokenT>> = {};
+
+  Object.keys(tokens).forEach(k => {
+    const token = tokens[k];
+    const { value, ...rest } = token;
+
+    themes.forEach(theme => {
+      if (!themeToken[theme]) {
+        themeToken[theme] = [];
+      }
+      if (value[theme]) {
+        themeToken[theme].push({
+          value: value[theme],
+          ...rest
         });
-      });
+      }
     });
+  });
 
-    const themeArray = Array.isArray(theme) ? theme : [theme];
-
-    const content = tokenCssTemplate(themeArray, flatToken);
+  themes.forEach(theme => {
+    let themeArray = [theme];
+    if (theme === defaultTheme) {
+      themeArray.unshift('default');
+    }
+    const content = tokenCssTemplate(themeArray, themeToken[theme]);
 
     fs.outputFileSync(path.join(outDir, `${themeArray.join('-')}.token.css`), content);
+    console.log(`[${themeArray.join('|')}] theme token file generated!`);
+  });
+}
+
+function generateCodeSnippets(tokens: Record<string, FlatTokenT>, outFile: string) {
+  const snippets: Record<string, any> = {};
+  Object.keys(tokens).forEach(k => {
+    const token = tokens[k];
+    const { value, tokenKey, name, description } = token;
+    const themes = Object.keys(value).map(theme => `${theme}: ${value[theme]}`);
+    const desc = `${name}: ${description}[${themes.join(', ')}]`;
+
+    snippets[tokenKey] = {
+      prefix: [tokenKey],
+      body: `var(${tokenKey})`,
+      description: desc,
+      scope: 'css,scss,less'
+    };
   });
+  fs.outputFileSync(outFile, JSON.stringify(snippets, null, '  '));
+  console.log('code snippets generated!');
 }
 
+export default async function main(options: { config: string }) {
+  const { data } = await readConfig(options.config);
+
+  const tokens = await readTokens(data);
 
-export default async function main(options: TokenOptionsT) {
-  const { tokens, prefix, outDir } = await readTokens(options.config);
-  generateTokenCss({ tokens, prefix }, outDir);
+  generateTokenCss(tokens, data.themes, data.defaultTheme, data.output);
+
+  if (data.codeSnippetsFile) {
+    generateCodeSnippets(tokens, data.codeSnippetsFile);
+  }
 }
\ No newline at end of file
diff --git a/packages/scripts/src/index.ts b/packages/scripts/src/index.ts
index 3ab0a286..08e0a8b8 100644
--- a/packages/scripts/src/index.ts
+++ b/packages/scripts/src/index.ts
@@ -5,7 +5,7 @@ import { Command } from 'commander';
 import buildIcons from './gen-icons';
 import buildComponents from './build-components';
 import buildStyle from './build-style';
-import genTokens, { TokenOptionsT } from './gen-tokens';
+import genTokens from './gen-tokens';
 
 const program = new Command();
 
@@ -37,7 +37,7 @@ program.command('build:style')
 program.command('gen:token')
   .description('generate opendesign tokens')
   .option('-c, --config <configFile>', 'config file')
-  .action((options: TokenOptionsT) => {
+  .action((options) => {
     genTokens(options);
   });
 
-- 
Gitee