From fe462d2965cc7b77ef9caa4d2375fa3338bdd9ba Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Wed, 8 Feb 2023 21:51:19 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Edark=20token?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/opendesign.token.code-snippets        | 186 +++---
 .../src/components/style/dark.token.css       | 590 +++++++++++++++++-
 .../opendesign/src/components/style/token.css | 131 ----
 packages/opendesign/src/tokens/color.json     | 395 ------------
 packages/opendesign/src/tokens/size.json      | 474 --------------
 packages/opendesign/src/tokens/tokens.json    | 280 ++++++---
 packages/portal/src/App.vue                   |   2 +
 packages/portal/src/components/TheAside.vue   |  24 +-
 packages/portal/src/components/TheHeader.vue  |   4 +-
 packages/portal/src/main.ts                   |   2 +-
 packages/portal/src/style.scss                |   3 +-
 11 files changed, 885 insertions(+), 1206 deletions(-)
 delete mode 100644 packages/opendesign/src/components/style/token.css
 delete mode 100644 packages/opendesign/src/tokens/color.json
 delete mode 100644 packages/opendesign/src/tokens/size.json

diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets
index e085d426..f46c4e84 100644
--- a/.vscode/opendesign.token.code-snippets
+++ b/.vscode/opendesign.token.code-snippets
@@ -4,7 +4,7 @@
       "--o-color-primary1"
     ],
     "body": "var(--o-color-primary1)",
-    "description": "常规色: 用于按钮、文本、链接强调状态时常规颜色[light: #002fa7, dark: #ff0000]",
+    "description": "常规色: 用于按钮、文本、链接强调状态时常规颜色[light: #002fa7, dark: #406fe7]",
     "scope": "css,scss,less"
   },
   "--o-color-primary2": {
@@ -12,7 +12,7 @@
       "--o-color-primary2"
     ],
     "body": "var(--o-color-primary2)",
-    "description": "悬浮色: 用于按钮、文本、链接强调状态时悬浮颜色[light: #406fe7]",
+    "description": "悬浮色: 用于按钮、文本、链接强调状态时悬浮颜色[light: #406fe7, dark: #5988ff]",
     "scope": "css,scss,less"
   },
   "--o-color-primary3": {
@@ -20,7 +20,7 @@
       "--o-color-primary3"
     ],
     "body": "var(--o-color-primary3)",
-    "description": "聚焦色: 用于按钮、文本、链接强调状态时聚焦颜色[light: #00288d]",
+    "description": "聚焦色: 用于按钮、文本、链接强调状态时聚焦颜色[light: #00288d, 'dark: #002fa7]",
     "scope": "css,scss,less"
   },
   "--o-color-primary4": {
@@ -28,7 +28,7 @@
       "--o-color-primary4"
     ],
     "body": "var(--o-color-primary4)",
-    "description": "禁用色: 用于按钮、文本、链接强调状态时禁用颜色[light: #b2c0e4]",
+    "description": "禁用色: 用于按钮、文本、链接强调状态时禁用颜色[light: #b2c0e4, 'dark: #0c2360]",
     "scope": "css,scss,less"
   },
   "--o-color-major1": {
@@ -36,7 +36,7 @@
       "--o-color-major1"
     ],
     "body": "var(--o-color-major1)",
-    "description": "常规色: 用于按钮、文本、链接major状态时文本颜色[light: #feb32a]",
+    "description": "常规色: 用于按钮、文本、链接major状态时文本颜色[light: #feb32a, 'dark: #feb32a]",
     "scope": "css,scss,less"
   },
   "--o-color-success1": {
@@ -44,7 +44,7 @@
       "--o-color-success1"
     ],
     "body": "var(--o-color-success1)",
-    "description": "常规色: 用于按钮、文本、链接成功状态时常规颜色[light: #6dc335]",
+    "description": "常规色: 用于按钮、文本、链接成功状态时常规颜色[light: #6dc335, dark: #6dc335]",
     "scope": "css,scss,less"
   },
   "--o-color-success2": {
@@ -52,7 +52,7 @@
       "--o-color-success2"
     ],
     "body": "var(--o-color-success2)",
-    "description": "悬浮色: 用于按钮、文本、链接成功状态时悬浮颜色[light: #93e95b]",
+    "description": "悬浮色: 用于按钮、文本、链接成功状态时悬浮颜色[light: #93e95b, dark: #93e95b]",
     "scope": "css,scss,less"
   },
   "--o-color-success3": {
@@ -60,7 +60,7 @@
       "--o-color-success3"
     ],
     "body": "var(--o-color-success3)",
-    "description": "聚焦色: 用于按钮、文本、链接成功状态时聚焦颜色[light: #62af30]",
+    "description": "聚焦色: 用于按钮、文本、链接成功状态时聚焦颜色[light: #62af30, dark: #62af30]",
     "scope": "css,scss,less"
   },
   "--o-color-success4": {
@@ -68,7 +68,7 @@
       "--o-color-success4"
     ],
     "body": "var(--o-color-success4)",
-    "description": "禁用色: 用于按钮、文本、链接成功状态时禁用颜色[light: #c5e7ae]",
+    "description": "禁用色: 用于按钮、文本、链接成功状态时禁用颜色[light: #c5e7ae, dark: #355f1a]",
     "scope": "css,scss,less"
   },
   "--o-color-warning1": {
@@ -76,7 +76,7 @@
       "--o-color-warning1"
     ],
     "body": "var(--o-color-warning1)",
-    "description": "常规色: 用于按钮、文本、链接告警状态时常规颜色[light: #ff8e36]",
+    "description": "常规色: 用于按钮、文本、链接告警状态时常规颜色[light: #ff8e36, dark: #ff8e36]",
     "scope": "css,scss,less"
   },
   "--o-color-warning2": {
@@ -84,7 +84,7 @@
       "--o-color-warning2"
     ],
     "body": "var(--o-color-warning2)",
-    "description": "悬浮色: 用于按钮、文本、链接告警状态时悬浮颜色[light: #ffb45c]",
+    "description": "悬浮色: 用于按钮、文本、链接告警状态时悬浮颜色[light: #ffb45c, dark: #ffb45c]",
     "scope": "css,scss,less"
   },
   "--o-color-warning3": {
@@ -92,7 +92,7 @@
       "--o-color-warning3"
     ],
     "body": "var(--o-color-warning3)",
-    "description": "聚焦色: 用于按钮、文本、链接告警状态时聚焦颜色[light: #ff801c]",
+    "description": "聚焦色: 用于按钮、文本、链接告警状态时聚焦颜色[light: #ff801c, dark: #ff801c]",
     "scope": "css,scss,less"
   },
   "--o-color-warning4": {
@@ -100,7 +100,7 @@
       "--o-color-warning4"
     ],
     "body": "var(--o-color-warning4)",
-    "description": "禁用色: 用于按钮、文本、链接告警状态时禁用颜色[light: #ffd2af]",
+    "description": "禁用色: 用于按钮、文本、链接告警状态时禁用颜色[light: #ffd2af, dark: #b54f00]",
     "scope": "css,scss,less"
   },
   "--o-color-danger1": {
@@ -108,7 +108,7 @@
       "--o-color-danger1"
     ],
     "body": "var(--o-color-danger1)",
-    "description": "常规色: 用于按钮、文本、链接错误状态时常规颜色[light: #f3524d]",
+    "description": "常规色: 用于按钮、文本、链接错误状态时常规颜色[light: #f3524d, dark: #f3524d]",
     "scope": "css,scss,less"
   },
   "--o-color-danger2": {
@@ -116,7 +116,7 @@
       "--o-color-danger2"
     ],
     "body": "var(--o-color-danger2)",
-    "description": "悬浮色: 用于按钮、文本、链接错误状态时悬浮颜色[light: #ff7873]",
+    "description": "悬浮色: 用于按钮、文本、链接错误状态时悬浮颜色[light: #ff7873, dark: #ff7873]",
     "scope": "css,scss,less"
   },
   "--o-color-danger3": {
@@ -124,7 +124,7 @@
       "--o-color-danger3"
     ],
     "body": "var(--o-color-danger3)",
-    "description": "聚焦色: 用于按钮、文本、链接错误状态时聚焦颜色[light: #f13b35]",
+    "description": "聚焦色: 用于按钮、文本、链接错误状态时聚焦颜色[light: #f13b35, dark: #f13b35]",
     "scope": "css,scss,less"
   },
   "--o-color-danger4": {
@@ -132,7 +132,7 @@
       "--o-color-danger4"
     ],
     "body": "var(--o-color-danger4)",
-    "description": "禁用色: 用于按钮、文本、链接错误状态时禁用颜色[light: #fabab8]",
+    "description": "禁用色: 用于按钮、文本、链接错误状态时禁用颜色[light: #fabab8, dark: #850d09]",
     "scope": "css,scss,less"
   },
   "--o-color-info1": {
@@ -140,7 +140,7 @@
       "--o-color-info1"
     ],
     "body": "var(--o-color-info1)",
-    "description": "常规色: 用于按钮、文本、链接信息状态时常规颜色[light: #e5e5e5]",
+    "description": "常规色: 用于按钮、文本、链接信息状态时常规颜色[light: #e5e5e5, dark: #242424]",
     "scope": "css,scss,less"
   },
   "--o-color-info2": {
@@ -148,7 +148,7 @@
       "--o-color-info2"
     ],
     "body": "var(--o-color-info2)",
-    "description": "悬浮色: 用于按钮、文本、链接信息状态时悬浮颜色[light: #e5e8f0]",
+    "description": "悬浮色: 用于按钮、文本、链接信息状态时悬浮颜色[light: #e5e8f0, dark: #2e2e2e]",
     "scope": "css,scss,less"
   },
   "--o-color-info3": {
@@ -156,7 +156,7 @@
       "--o-color-info3"
     ],
     "body": "var(--o-color-info3)",
-    "description": "聚焦色: 用于按钮、文本、链接信息状态时聚焦颜色[light: #cccccc]",
+    "description": "聚焦色: 用于按钮、文本、链接信息状态时聚焦颜色[light: #cccccc, 'dark: #1e1e1e]",
     "scope": "css,scss,less"
   },
   "--o-color-info4": {
@@ -164,7 +164,7 @@
       "--o-color-info4"
     ],
     "body": "var(--o-color-info4)",
-    "description": "禁用色: 用于按钮、文本、链接信息状态时禁用颜色[light: #f7f8fa]",
+    "description": "禁用色: 用于按钮、文本、链接信息状态时禁用颜色[light: #f7f8fa, dark: #151515]",
     "scope": "css,scss,less"
   },
   "--o-color-bg1": {
@@ -172,7 +172,7 @@
       "--o-color-bg1"
     ],
     "body": "var(--o-color-bg1)",
-    "description": "一级容器背景色: 用于页面整体背景色[light: #f5f6f8]",
+    "description": "一级容器背景色: 用于页面整体背景色[light: #f5f6f8, dark: #121212]",
     "scope": "css,scss,less"
   },
   "--o-color-bg2": {
@@ -180,7 +180,7 @@
       "--o-color-bg2"
     ],
     "body": "var(--o-color-bg2)",
-    "description": "二级容器背景色: 用于区块、卡片、弹出框、tooltip背景色[light: #ffffff]",
+    "description": "二级容器背景色: 用于区块、卡片、弹出框、tooltip背景色[light: #ffffff, 'dark: #1e1e1e]",
     "scope": "css,scss,less"
   },
   "--o-color-bg3": {
@@ -188,7 +188,7 @@
       "--o-color-bg3"
     ],
     "body": "var(--o-color-bg3)",
-    "description": "三级容器背景色: 用于区块卡片背景色[light: #f7f8fa]",
+    "description": "三级容器背景色: 用于区块卡片背景色[light: #f7f8fa, dark: #242424]",
     "scope": "css,scss,less"
   },
   "--o-color-bg4": {
@@ -196,7 +196,7 @@
       "--o-color-bg4"
     ],
     "body": "var(--o-color-bg4)",
-    "description": "四级容器背景色: 用于区块、卡片、表头背景色[light: #e5e8f0]",
+    "description": "四级容器背景色: 用于区块、卡片、表头背景色[light: #e5e8f0, dark: #2e2e2e]",
     "scope": "css,scss,less"
   },
   "--o-color-text1": {
@@ -204,7 +204,7 @@
       "--o-color-text1"
     ],
     "body": "var(--o-color-text1)",
-    "description": "标题色: 用于强调、标题颜色[light: #000000]",
+    "description": "标题色: 用于强调、标题颜色[light: #000000, dark: #ffffff]",
     "scope": "css,scss,less"
   },
   "--o-color-text1-inverse": {
@@ -212,7 +212,7 @@
       "--o-color-text1-inverse"
     ],
     "body": "var(--o-color-text1-inverse)",
-    "description": "标题反色: 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题[light: #ffffff]",
+    "description": "标题反色: 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题[light: #ffffff, dark: #000000]",
     "scope": "css,scss,less"
   },
   "--o-color-text2": {
@@ -220,7 +220,7 @@
       "--o-color-text2"
     ],
     "body": "var(--o-color-text2)",
-    "description": "正文色: 用于次强调、次级标题、正文颜色[light: #3f3f3f]",
+    "description": "正文色: 用于次强调、次级标题、正文颜色[light: #3f3f3f, 'dark: #e5e5e5]",
     "scope": "css,scss,less"
   },
   "--o-color-text2-inverse": {
@@ -228,7 +228,7 @@
       "--o-color-text2-inverse"
     ],
     "body": "var(--o-color-text2-inverse)",
-    "description": "正文反色: 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文[light: #e5e5e5]",
+    "description": "正文反色: 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文[light: #e5e5e5, dark: #3f3f3f]",
     "scope": "css,scss,less"
   },
   "--o-color-text3": {
@@ -236,7 +236,7 @@
       "--o-color-text3"
     ],
     "body": "var(--o-color-text3)",
-    "description": "提示色: 用于提示文本颜色[light: #707070]",
+    "description": "提示色: 用于提示文本颜色[light: #707070, 'dark: #b2b2b2]",
     "scope": "css,scss,less"
   },
   "--o-color-text3-inverse": {
@@ -244,7 +244,7 @@
       "--o-color-text3-inverse"
     ],
     "body": "var(--o-color-text3-inverse)",
-    "description": "提示反色: 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示[light: #b2b2b2]",
+    "description": "提示反色: 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示[light: #b2b2b2, dark: #707070]",
     "scope": "css,scss,less"
   },
   "--o-color-text4": {
@@ -252,7 +252,7 @@
       "--o-color-text4"
     ],
     "body": "var(--o-color-text4)",
-    "description": "置灰色: 用于禁用文本颜色[light: #cccccc]",
+    "description": "置灰色: 用于禁用文本颜色[light: #cccccc, dark: #555555]",
     "scope": "css,scss,less"
   },
   "--o-color-text4-inverse": {
@@ -260,7 +260,7 @@
       "--o-color-text4-inverse"
     ],
     "body": "var(--o-color-text4-inverse)",
-    "description": "置灰反色: 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本[light: #e5e5e5]",
+    "description": "置灰反色: 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本[light: #e5e5e5, dark: #2d2d2d]",
     "scope": "css,scss,less"
   },
   "--o-color-border1": {
@@ -268,7 +268,7 @@
       "--o-color-border1"
     ],
     "body": "var(--o-color-border1)",
-    "description": "边框色: 较明显的边框[light: #707070]",
+    "description": "边框色: 较明显的边框[light: #707070, dark: #b2b2b2]",
     "scope": "css,scss,less"
   },
   "--o-color-border2": {
@@ -276,7 +276,7 @@
       "--o-color-border2"
     ],
     "body": "var(--o-color-border2)",
-    "description": "弱边框色: 较弱的边框[light: #e5e5e5]",
+    "description": "弱边框色: 较弱的边框[light: #e5e5e5, dark: #2d2d2d]",
     "scope": "css,scss,less"
   },
   "--o-color-division1": {
@@ -284,7 +284,7 @@
       "--o-color-division1"
     ],
     "body": "var(--o-color-division1)",
-    "description": "分隔线色1: 用于分隔线颜色[light: #707070]",
+    "description": "分隔线色1: 用于分隔线颜色[light: #707070, dark: #b2b2b2]",
     "scope": "css,scss,less"
   },
   "--o-color-mask1": {
@@ -292,7 +292,7 @@
       "--o-color-mask1"
     ],
     "body": "var(--o-color-mask1)",
-    "description": "遮罩色1: 用于弹窗遮罩色[light: rgba(0, 0, 0, 0.5)]",
+    "description": "遮罩色1: 用于弹窗遮罩色[light: rgba(0, 0, 0, 0.5), 'dark: rgba(0, 0, 0, 0.5)]",
     "scope": "css,scss,less"
   },
   "--o-shadow-1": {
@@ -300,7 +300,7 @@
       "--o-shadow-1"
     ],
     "body": "var(--o-shadow-1)",
-    "description": "阴影1: 用于卡片、小弹窗、楼层阴影[light: 0 1px 5px rgba(45, 47, 51, 0.1)]",
+    "description": "阴影1: 用于卡片、小弹窗、楼层阴影[light: 0 1px 5px rgba(45, 47, 51, 0.1), dark: 0 1px 7px rgba(0, 0, 0, 0.3)]",
     "scope": "css,scss,less"
   },
   "--o-shadow-2": {
@@ -308,7 +308,7 @@
       "--o-shadow-2"
     ],
     "body": "var(--o-shadow-2)",
-    "description": "阴影2: 用于卡片悬浮阴影[light: 0 6px 18px rgba(0, 47, 167, 0.14)]",
+    "description": "阴影2: 用于卡片悬浮阴影[light: 0 6px 18px rgba(0, 47, 167, 0.14), dark: 0 6px 18px rgba(0, 0, 0, 0.42)]",
     "scope": "css,scss,less"
   },
   "--o-shadow-3": {
@@ -316,7 +316,7 @@
       "--o-shadow-3"
     ],
     "body": "var(--o-shadow-3)",
-    "description": "阴影3: 用于提示阴影[light: 0 10px 32px rgba(45, 47, 51, 0.18)]",
+    "description": "阴影3: 用于提示阴影[light: 0 10px 32px rgba(45, 47, 51, 0.18), dark: 0 10px 32px rgba(0, 0, 0, 0.54)]",
     "scope": "css,scss,less"
   },
   "--o-gap-1": {
@@ -324,7 +324,7 @@
       "--o-gap-1"
     ],
     "body": "var(--o-gap-1)",
-    "description": "间距1: 用于组件之间的间距1[light: 4px]",
+    "description": "间距1: 用于组件之间的间距1[light: 4px, dark: 4px]",
     "scope": "css,scss,less"
   },
   "--o-gap-2": {
@@ -332,7 +332,7 @@
       "--o-gap-2"
     ],
     "body": "var(--o-gap-2)",
-    "description": "间距2: 用于组件之间的间距2[light: 8px]",
+    "description": "间距2: 用于组件之间的间距2[light: 8px, dark: 8px]",
     "scope": "css,scss,less"
   },
   "--o-gap-3": {
@@ -340,7 +340,7 @@
       "--o-gap-3"
     ],
     "body": "var(--o-gap-3)",
-    "description": "间距3: 用于组件之间的间距3[light: 12px]",
+    "description": "间距3: 用于组件之间的间距3[light: 12px, dark: 12px]",
     "scope": "css,scss,less"
   },
   "--o-gap-4": {
@@ -348,7 +348,7 @@
       "--o-gap-4"
     ],
     "body": "var(--o-gap-4)",
-    "description": "间距4: 用于组件之间的间距4[light: 16px]",
+    "description": "间距4: 用于组件之间的间距4[light: 16px, dark: 16px]",
     "scope": "css,scss,less"
   },
   "--o-gap-5": {
@@ -356,7 +356,7 @@
       "--o-gap-5"
     ],
     "body": "var(--o-gap-5)",
-    "description": "间距5: 用于组件之间的间距5[light: 24px]",
+    "description": "间距5: 用于组件之间的间距5[light: 24px, dark: 24px]",
     "scope": "css,scss,less"
   },
   "--o-gap-6": {
@@ -364,7 +364,7 @@
       "--o-gap-6"
     ],
     "body": "var(--o-gap-6)",
-    "description": "间距6: 用于组件之间的间距6[light: 32px]",
+    "description": "间距6: 用于组件之间的间距6[light: 32px, dark: 32px]",
     "scope": "css,scss,less"
   },
   "--o-gap-7": {
@@ -372,7 +372,7 @@
       "--o-gap-7"
     ],
     "body": "var(--o-gap-7)",
-    "description": "间距7: 用于组件之间的间距7[light: 40px]",
+    "description": "间距7: 用于组件之间的间距7[light: 40px, dark: 40px]",
     "scope": "css,scss,less"
   },
   "--o-gap-8": {
@@ -380,7 +380,7 @@
       "--o-gap-8"
     ],
     "body": "var(--o-gap-8)",
-    "description": "间距8: 用于组件之间的间距8[light: 64px]",
+    "description": "间距8: 用于组件之间的间距8[light: 64px, dark: 64px]",
     "scope": "css,scss,less"
   },
   "--o-size-l": {
@@ -388,7 +388,7 @@
       "--o-size-l"
     ],
     "body": "var(--o-size-l)",
-    "description": "大尺寸: 尺寸[light: 40px]",
+    "description": "大尺寸: 尺寸[light: 40px, dark: 40px]",
     "scope": "css,scss,less"
   },
   "--o-size-m": {
@@ -396,7 +396,7 @@
       "--o-size-m"
     ],
     "body": "var(--o-size-m)",
-    "description": "中尺寸: 尺寸[light: 32px]",
+    "description": "中尺寸: 尺寸[light: 32px, dark: 32px]",
     "scope": "css,scss,less"
   },
   "--o-size-s": {
@@ -404,7 +404,7 @@
       "--o-size-s"
     ],
     "body": "var(--o-size-s)",
-    "description": "小尺寸: 小尺寸[light: 24px]",
+    "description": "小尺寸: 小尺寸[light: 24px, dark: 24px]",
     "scope": "css,scss,less"
   },
   "--o-icon_size-l": {
@@ -412,7 +412,7 @@
       "--o-icon_size-l"
     ],
     "body": "var(--o-icon_size-l)",
-    "description": "大尺寸图标: 尺寸[light: 48px]",
+    "description": "大尺寸图标: 尺寸[light: 48px, dark: 48px]",
     "scope": "css,scss,less"
   },
   "--o-icon_size-m": {
@@ -420,7 +420,7 @@
       "--o-icon_size-m"
     ],
     "body": "var(--o-icon_size-m)",
-    "description": "中尺寸图标: 尺寸[light: 32px]",
+    "description": "中尺寸图标: 尺寸[light: 32px, dark: 32px]",
     "scope": "css,scss,less"
   },
   "--o-icon_size-s": {
@@ -428,7 +428,7 @@
       "--o-icon_size-s"
     ],
     "body": "var(--o-icon_size-s)",
-    "description": "小尺寸图标: 小尺寸[light: 24px]",
+    "description": "小尺寸图标: 小尺寸[light: 24px, dark: 24px]",
     "scope": "css,scss,less"
   },
   "--o-icon_size-xs": {
@@ -436,7 +436,7 @@
       "--o-icon_size-xs"
     ],
     "body": "var(--o-icon_size-xs)",
-    "description": "超小尺寸图标: 小尺寸[light: 16px]",
+    "description": "超小尺寸图标: 小尺寸[light: 16px, dark: 16px]",
     "scope": "css,scss,less"
   },
   "--o-font_size-display1": {
@@ -444,7 +444,7 @@
       "--o-font_size-display1"
     ],
     "body": "var(--o-font_size-display1)",
-    "description": "一级数据展示: 一级数据展示[light: 64px]",
+    "description": "一级数据展示: 一级数据展示[light: 64px, dark: 64px]",
     "scope": "css,scss,less"
   },
   "--o-font_size-display2": {
@@ -452,7 +452,7 @@
       "--o-font_size-display2"
     ],
     "body": "var(--o-font_size-display2)",
-    "description": "二级数据展示: 二级数据展示[light: 54px]",
+    "description": "二级数据展示: 二级数据展示[light: 54px, dark: 54px]",
     "scope": "css,scss,less"
   },
   "--o-font_size-display3": {
@@ -460,7 +460,7 @@
       "--o-font_size-display3"
     ],
     "body": "var(--o-font_size-display3)",
-    "description": "三级数据展示: 三级数据展示[light: 36px]",
+    "description": "三级数据展示: 三级数据展示[light: 36px, dark: 36px]",
     "scope": "css,scss,less"
   },
   "--o-font_size-display4": {
@@ -468,7 +468,7 @@
       "--o-font_size-display4"
     ],
     "body": "var(--o-font_size-display4)",
-    "description": "四级数据展示: 四级数据展示[light: 28px]",
+    "description": "四级数据展示: 四级数据展示[light: 28px, dark: 28px]",
     "scope": "css,scss,less"
   },
   "--o-font_size-h1": {
@@ -476,7 +476,7 @@
       "--o-font_size-h1"
     ],
     "body": "var(--o-font_size-h1)",
-    "description": "一级标题: 一级标题[light: 24px]",
+    "description": "一级标题: 一级标题[light: 24px, dark: 24px]",
     "scope": "css,scss,less"
   },
   "--o-font_size-h2": {
@@ -484,7 +484,7 @@
       "--o-font_size-h2"
     ],
     "body": "var(--o-font_size-h2)",
-    "description": "二级标题: 二级标题[light: 20px]",
+    "description": "二级标题: 二级标题[light: 20px, dark: 20px]",
     "scope": "css,scss,less"
   },
   "--o-font_size-h3": {
@@ -492,7 +492,7 @@
       "--o-font_size-h3"
     ],
     "body": "var(--o-font_size-h3)",
-    "description": "三级标题: 三级标题[light: 18px]",
+    "description": "三级标题: 三级标题[light: 18px, dark: 18px]",
     "scope": "css,scss,less"
   },
   "--o-font_size-h4": {
@@ -500,7 +500,7 @@
       "--o-font_size-h4"
     ],
     "body": "var(--o-font_size-h4)",
-    "description": "四级标题: 四级标题[light: 16px]",
+    "description": "四级标题: 四级标题[light: 16px, dark: 16px]",
     "scope": "css,scss,less"
   },
   "--o-font_size-text": {
@@ -508,7 +508,7 @@
       "--o-font_size-text"
     ],
     "body": "var(--o-font_size-text)",
-    "description": "正文: 正文[light: 14px]",
+    "description": "正文: 正文[light: 14px, dark: 14px]",
     "scope": "css,scss,less"
   },
   "--o-font_size-tip1": {
@@ -516,7 +516,7 @@
       "--o-font_size-tip1"
     ],
     "body": "var(--o-font_size-tip1)",
-    "description": "提示文本1: 提示文本1[light: 12px]",
+    "description": "提示文本1: 提示文本1[light: 12px, dark: 12px]",
     "scope": "css,scss,less"
   },
   "--o-font_size-tip2": {
@@ -524,7 +524,7 @@
       "--o-font_size-tip2"
     ],
     "body": "var(--o-font_size-tip2)",
-    "description": "提示文本2: 提示文本2[light: 10px]",
+    "description": "提示文本2: 提示文本2[light: 10px, dark: 10px]",
     "scope": "css,scss,less"
   },
   "--o-line_height-display1": {
@@ -532,7 +532,7 @@
       "--o-line_height-display1"
     ],
     "body": "var(--o-line_height-display1)",
-    "description": "一级数据展示: 一级数据展示[light: 84px]",
+    "description": "一级数据展示: 一级数据展示[light: 84px, dark: 84px]",
     "scope": "css,scss,less"
   },
   "--o-line_height-display2": {
@@ -540,7 +540,7 @@
       "--o-line_height-display2"
     ],
     "body": "var(--o-line_height-display2)",
-    "description": "二级数据展示: 二级数据展示[light: 76px]",
+    "description": "二级数据展示: 二级数据展示[light: 76px, dark: 76px]",
     "scope": "css,scss,less"
   },
   "--o-line_height-display3": {
@@ -548,7 +548,7 @@
       "--o-line_height-display3"
     ],
     "body": "var(--o-line_height-display3)",
-    "description": "三级数据展示: 三级数据展示[light: 48px]",
+    "description": "三级数据展示: 三级数据展示[light: 48px, dark: 48px]",
     "scope": "css,scss,less"
   },
   "--o-line_height-display4": {
@@ -556,7 +556,7 @@
       "--o-line_height-display4"
     ],
     "body": "var(--o-line_height-display4)",
-    "description": "四级数据展示: 四级数据展示[light: 36px]",
+    "description": "四级数据展示: 四级数据展示[light: 36px, dark: 36px]",
     "scope": "css,scss,less"
   },
   "--o-line_height-h1": {
@@ -564,7 +564,7 @@
       "--o-line_height-h1"
     ],
     "body": "var(--o-line_height-h1)",
-    "description": "一级标题: 一级标题[light: 32px]",
+    "description": "一级标题: 一级标题[light: 32px, dark: 32px]",
     "scope": "css,scss,less"
   },
   "--o-line_height-h2": {
@@ -572,7 +572,7 @@
       "--o-line_height-h2"
     ],
     "body": "var(--o-line_height-h2)",
-    "description": "二级标题: 二级标题[light: 28px]",
+    "description": "二级标题: 二级标题[light: 28px, dark: 28px]",
     "scope": "css,scss,less"
   },
   "--o-line_height-h3": {
@@ -580,7 +580,7 @@
       "--o-line_height-h3"
     ],
     "body": "var(--o-line_height-h3)",
-    "description": "三级标题: 三级标题[light: 26px]",
+    "description": "三级标题: 三级标题[light: 26px, dark: 26px]",
     "scope": "css,scss,less"
   },
   "--o-line_height-h4": {
@@ -588,7 +588,7 @@
       "--o-line_height-h4"
     ],
     "body": "var(--o-line_height-h4)",
-    "description": "四级标题: 四级标题[light: 24px]",
+    "description": "四级标题: 四级标题[light: 24px, dark: 24px]",
     "scope": "css,scss,less"
   },
   "--o-line_height-text": {
@@ -596,7 +596,7 @@
       "--o-line_height-text"
     ],
     "body": "var(--o-line_height-text)",
-    "description": "正文: 正文[light: 22px]",
+    "description": "正文: 正文[light: 22px, dark: 22px]",
     "scope": "css,scss,less"
   },
   "--o-line_height-tip1": {
@@ -604,7 +604,7 @@
       "--o-line_height-tip1"
     ],
     "body": "var(--o-line_height-tip1)",
-    "description": "提示文本1: 提示文本1[light: 18px]",
+    "description": "提示文本1: 提示文本1[light: 18px, dark: 18px]",
     "scope": "css,scss,less"
   },
   "--o-line_height-tip2": {
@@ -612,7 +612,7 @@
       "--o-line_height-tip2"
     ],
     "body": "var(--o-line_height-tip2)",
-    "description": "提示文本2: 提示文本2[light: 14px]",
+    "description": "提示文本2: 提示文本2[light: 14px, dark: 14px]",
     "scope": "css,scss,less"
   },
   "--o-radius-l": {
@@ -620,7 +620,7 @@
       "--o-radius-l"
     ],
     "body": "var(--o-radius-l)",
-    "description": "大尺寸圆角: 大尺寸圆角[light: 16px]",
+    "description": "大尺寸圆角: 大尺寸圆角[light: 16px, dark: 16px]",
     "scope": "css,scss,less"
   },
   "--o-radius-m": {
@@ -628,7 +628,7 @@
       "--o-radius-m"
     ],
     "body": "var(--o-radius-m)",
-    "description": "中尺寸圆角: 中尺寸圆角[light: 8px]",
+    "description": "中尺寸圆角: 中尺寸圆角[light: 8px, dark: 8px]",
     "scope": "css,scss,less"
   },
   "--o-radius-s": {
@@ -636,7 +636,7 @@
       "--o-radius-s"
     ],
     "body": "var(--o-radius-s)",
-    "description": "小尺寸圆角: 小尺寸圆角[light: 4px]",
+    "description": "小尺寸圆角: 小尺寸圆角[light: 4px, dark: 4px]",
     "scope": "css,scss,less"
   },
   "--o-duration-s": {
@@ -644,7 +644,7 @@
       "--o-duration-s"
     ],
     "body": "var(--o-duration-s)",
-    "description": "持续时间: 用于退出屏幕的动画[light: 200ms]",
+    "description": "持续时间: 用于退出屏幕的动画[light: 200ms, dark: 200ms]",
     "scope": "css,scss,less"
   },
   "--o-duration-m1": {
@@ -652,7 +652,7 @@
       "--o-duration-m1"
     ],
     "body": "var(--o-duration-m1)",
-    "description": "持续时间: 用于当曲线为standard-in时进入屏幕的动画[light: 250ms]",
+    "description": "持续时间: 用于当曲线为standard-in时进入屏幕的动画[light: 250ms, dark: 250ms]",
     "scope": "css,scss,less"
   },
   "--o-duration-m2": {
@@ -660,7 +660,7 @@
       "--o-duration-m2"
     ],
     "body": "var(--o-duration-m2)",
-    "description": "持续时间: 用于当曲线为standard时开始、结束的动画[light: 300ms]",
+    "description": "持续时间: 用于当曲线为standard时开始、结束的动画[light: 300ms, dark: 300ms]",
     "scope": "css,scss,less"
   },
   "--o-duration-m3": {
@@ -668,7 +668,7 @@
       "--o-duration-m3"
     ],
     "body": "var(--o-duration-m3)",
-    "description": "持续时间: 用于当曲线为emphasized-in时进入屏幕的动画[light: 400ms]",
+    "description": "持续时间: 用于当曲线为emphasized-in时进入屏幕的动画[light: 400ms, dark: 400ms]",
     "scope": "css,scss,less"
   },
   "--o-duration-l": {
@@ -676,7 +676,7 @@
       "--o-duration-l"
     ],
     "body": "var(--o-duration-l)",
-    "description": "持续时间: 用于当曲线为emphasized时开始、结束的动画[light: 500ms]",
+    "description": "持续时间: 用于当曲线为emphasized时开始、结束的动画[light: 500ms, dark: 500ms]",
     "scope": "css,scss,less"
   },
   "--o-duration-xl": {
@@ -684,7 +684,7 @@
       "--o-duration-xl"
     ],
     "body": "var(--o-duration-xl)",
-    "description": "持续时间: 用于当曲线为emphasized时，轮播切换动画[light: 1000ms]",
+    "description": "持续时间: 用于当曲线为emphasized时，轮播切换动画[light: 1000ms, dark: 1000ms]",
     "scope": "css,scss,less"
   },
   "--o-easing-linear": {
@@ -692,7 +692,7 @@
       "--o-easing-linear"
     ],
     "body": "var(--o-easing-linear)",
-    "description": "线性动画曲线: 线性曲线[light: cubic-bezier(0, 0, 1, 1)]",
+    "description": "线性动画曲线: 线性曲线[light: cubic-bezier(0, 0, 1, 1), dark: cubic-bezier(0, 0, 1, 1)]",
     "scope": "css,scss,less"
   },
   "--o-easing-standard": {
@@ -700,7 +700,7 @@
       "--o-easing-standard"
     ],
     "body": "var(--o-easing-standard)",
-    "description": "动画曲线: 用于组件[light: cubic-bezier(0.2, 0, 0, 1)]",
+    "description": "动画曲线: 用于组件[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
     "scope": "css,scss,less"
   },
   "--o-easing-standard-in": {
@@ -708,7 +708,7 @@
       "--o-easing-standard-in"
     ],
     "body": "var(--o-easing-standard-in)",
-    "description": "动画曲线: 用于组件[light: cubic-bezier(0, 0, 0, 1)]",
+    "description": "动画曲线: 用于组件[light: cubic-bezier(0, 0, 0, 1), dark: cubic-bezier(0, 0, 0, 1)]",
     "scope": "css,scss,less"
   },
   "--o-easing-standard-out": {
@@ -716,7 +716,7 @@
       "--o-easing-standard-out"
     ],
     "body": "var(--o-easing-standard-out)",
-    "description": "动画曲线: 用于组件[light: cubic-bezier(0.3, 0, 1, 1)]",
+    "description": "动画曲线: 用于组件[light: cubic-bezier(0.3, 0, 1, 1), dark: cubic-bezier(0.3, 0, 1, 1)]",
     "scope": "css,scss,less"
   },
   "--o-easing-emphasized": {
@@ -724,7 +724,7 @@
       "--o-easing-emphasized"
     ],
     "body": "var(--o-easing-emphasized)",
-    "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.2, 0, 0, 1)]",
+    "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
     "scope": "css,scss,less"
   },
   "--o-easing-emphasized-in": {
@@ -732,7 +732,7 @@
       "--o-easing-emphasized-in"
     ],
     "body": "var(--o-easing-emphasized-in)",
-    "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.3, 0, 0.8, 0.15)]",
+    "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.3, 0, 0.8, 0.15), dark: cubic-bezier(0.3, 0, 0.8, 0.15)]",
     "scope": "css,scss,less"
   },
   "--o-easing-emphasized-out": {
@@ -740,7 +740,7 @@
       "--o-easing-emphasized-out"
     ],
     "body": "var(--o-easing-emphasized-out)",
-    "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.05, 0.7, 0.1, 1)]",
+    "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.05, 0.7, 0.1, 1), dark: 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/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css
index e259341a..6054226e 100644
--- a/packages/opendesign/src/components/style/dark.token.css
+++ b/packages/opendesign/src/components/style/dark.token.css
@@ -6,5 +6,593 @@
    * @group primary
    * @description 用于按钮、文本、链接强调状态时常规颜色
    */
-  --o-color-primary1: #ff0000;
+  --o-color-primary1: #406fe7;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group primary
+   * @description 用于按钮、文本、链接强调状态时悬浮颜色
+   */
+  --o-color-primary2: #5988ff;
+  /**
+   * @name 常规色
+   * @type color
+   * @group success
+   * @description 用于按钮、文本、链接成功状态时常规颜色
+   */
+  --o-color-success1: #6dc335;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group success
+   * @description 用于按钮、文本、链接成功状态时悬浮颜色
+   */
+  --o-color-success2: #93e95b;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group success
+   * @description 用于按钮、文本、链接成功状态时聚焦颜色
+   */
+  --o-color-success3: #62af30;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group success
+   * @description 用于按钮、文本、链接成功状态时禁用颜色
+   */
+  --o-color-success4: #355f1a;
+  /**
+   * @name 常规色
+   * @type color
+   * @group warning
+   * @description 用于按钮、文本、链接告警状态时常规颜色
+   */
+  --o-color-warning1: #ff8e36;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group warning
+   * @description 用于按钮、文本、链接告警状态时悬浮颜色
+   */
+  --o-color-warning2: #ffb45c;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group warning
+   * @description 用于按钮、文本、链接告警状态时聚焦颜色
+   */
+  --o-color-warning3: #ff801c;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group warning
+   * @description 用于按钮、文本、链接告警状态时禁用颜色
+   */
+  --o-color-warning4: #b54f00;
+  /**
+   * @name 常规色
+   * @type color
+   * @group danger
+   * @description 用于按钮、文本、链接错误状态时常规颜色
+   */
+  --o-color-danger1: #f3524d;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group danger
+   * @description 用于按钮、文本、链接错误状态时悬浮颜色
+   */
+  --o-color-danger2: #ff7873;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group danger
+   * @description 用于按钮、文本、链接错误状态时聚焦颜色
+   */
+  --o-color-danger3: #f13b35;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group danger
+   * @description 用于按钮、文本、链接错误状态时禁用颜色
+   */
+  --o-color-danger4: #850d09;
+  /**
+   * @name 常规色
+   * @type color
+   * @group info
+   * @description 用于按钮、文本、链接信息状态时常规颜色
+   */
+  --o-color-info1: #242424;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group info
+   * @description 用于按钮、文本、链接信息状态时悬浮颜色
+   */
+  --o-color-info2: #2e2e2e;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group info
+   * @description 用于按钮、文本、链接信息状态时禁用颜色
+   */
+  --o-color-info4: #151515;
+  /**
+   * @name 一级容器背景色
+   * @type color
+   * @group background
+   * @description 用于页面整体背景色
+   */
+  --o-color-bg1: #121212;
+  /**
+   * @name 三级容器背景色
+   * @type color
+   * @group background
+   * @description 用于区块卡片背景色
+   */
+  --o-color-bg3: #242424;
+  /**
+   * @name 四级容器背景色
+   * @type color
+   * @group background
+   * @description 用于区块、卡片、表头背景色
+   */
+  --o-color-bg4: #2e2e2e;
+  /**
+   * @name 标题色
+   * @type color
+   * @group text
+   * @description 用于强调、标题颜色
+   */
+  --o-color-text1: #ffffff;
+  /**
+   * @name 标题反色
+   * @type color
+   * @group text
+   * @description 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题
+   */
+  --o-color-text1-inverse: #000000;
+  /**
+   * @name 正文反色
+   * @type color
+   * @group text
+   * @description 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文
+   */
+  --o-color-text2-inverse: #3f3f3f;
+  /**
+   * @name 提示反色
+   * @type color
+   * @group text
+   * @description 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示
+   */
+  --o-color-text3-inverse: #707070;
+  /**
+   * @name 置灰色
+   * @type color
+   * @group text
+   * @description 用于禁用文本颜色
+   */
+  --o-color-text4: #555555;
+  /**
+   * @name 置灰反色
+   * @type color
+   * @group text
+   * @description 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本
+   */
+  --o-color-text4-inverse: #2d2d2d;
+  /**
+   * @name 边框色
+   * @type color
+   * @group border
+   * @description 较明显的边框
+   */
+  --o-color-border1: #b2b2b2;
+  /**
+   * @name 弱边框色
+   * @type color
+   * @group border
+   * @description 较弱的边框
+   */
+  --o-color-border2: #2d2d2d;
+  /**
+   * @name 分隔线色1
+   * @type color
+   * @group division
+   * @description 用于分隔线颜色
+   */
+  --o-color-division1: #b2b2b2;
+  /**
+   * @name 阴影1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 1px 7px rgba(0, 0, 0, 0.3);
+  /**
+   * @name 阴影2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 6px 18px rgba(0, 0, 0, 0.42);
+  /**
+   * @name 阴影3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 10px 32px rgba(0, 0, 0, 0.54);
+  /**
+   * @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 size
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 16px;
+  /**
+   * @name 中尺寸圆角
+   * @type size
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 8px;
+  /**
+   * @name 小尺寸圆角
+   * @type size
+   * @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);
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/style/token.css b/packages/opendesign/src/components/style/token.css
deleted file mode 100644
index 22bef0aa..00000000
--- a/packages/opendesign/src/components/style/token.css
+++ /dev/null
@@ -1,131 +0,0 @@
-/* 全局变量，不随皮肤变化 */
-:root {
-  --o-size-l: 40px;
-  --o-size-m: 32px;
-  --o-size-s: 24px;
-
-  /* Exit */
-  --o-duration-s: 200ms;
-  /* Enter for standard-in */
-  --o-duration-m1: 250ms;
-  /* Begin and End for standard */
-  --o-duration-m2: 300ms;
-  /* Enter for emphasized-in */
-  --o-duration-m3: 400ms;
-  /* Begin and End for emphasized */
-  --o-duration-l: 500ms;
-  /* 轮播切换 for emphasized */
-  --o-duration-xl: 1000ms;
-
-  --o-easing-linear: cubic-bezier(0, 0, 1, 1);
-  /* 用于组件 */
-  --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
-  --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
-  --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
-  /* 用于大卡片、场景切换 */
-  --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
-  --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
-  --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
-}
-
-:root,
-:root[theme="light"] {
-  /* 品牌色 */
-  --o-color-primary1: #002fa7;
-  --o-color-primary2: #406fe7;
-  --o-color-primary3: #00288d;
-  --o-color-primary4: #b2c0e4;
-  /* 辅助色 */
-  --o-color-major1: #feb32a;
-  /* 成功色 */
-  --o-color-success1: #6dc335;
-  --o-color-success2: #93e95b;
-  --o-color-success3: #62af30;
-  --o-color-success4: #c5e7ae;
-  /* 告警色 */
-  --o-color-warning1: #ff8e36;
-  --o-color-warning2: #ffb45c;
-  --o-color-warning3: #ff801c;
-  --o-color-warning4: #ffd2af;
-  /* 错误色 */
-  --o-color-danger1: #f3524d;
-  --o-color-danger2: #ff7873;
-  --o-color-danger3: #f13b35;
-  --o-color-danger4: #fabab8;
-  /* info色 */
-  --o-color-info1: #e5e5e5;
-  --o-color-info2: #e5e8f0;
-  --o-color-info3: #cccccc;
-  --o-color-info4: #f7f8fa;
-  /* 背景色 */
-  --o-color-bg1: #f5f6f8;
-  --o-color-bg2: #ffffff;
-  --o-color-bg3: #f7f8fa;
-  --o-color-bg4: #e5e8f0;
-  /* 文字色 */
-  --o-color-text1: #000000;
-  --o-color-text1-inverse: #ffffff;
-  --o-color-text2: #3f3f3f;
-  --o-color-text2-inverse: #e5e5e5;
-  --o-color-text3: #707070;
-  --o-color-text3-inverse: #b2b2b2;
-  --o-color-text4: #cccccc;
-  --o-color-text4-inverse: #e5e5e5;
-  /* 遮罩色 */
-  --o-color-mask1: rgba(0, 0, 0, 0.5);
-  /* 边框色 */
-  --o-color-border1: #707070;
-  --o-color-border2: #e5e5e5;
-  /* 分隔线色 */
-  --o-color-division1: #707070;
-  /* 字号 */
-  --o-font_size-display1: 64px;
-  --o-font_size-display2: 54px;
-  --o-font_size-display3: 36px;
-  --o-font_size-display4: 28px;
-  --o-font_size-h1: 24px;
-  --o-font_size-h2: 20px;
-  --o-font_size-h3: 18px;
-  --o-font_size-h4: 16px;
-  --o-font_size-text: 14px;
-  --o-font_size-tip1: 12px;
-  --o-font_size-tip2: 10px;
-  /* 行高 */
-  --o-line_height-display1: 84px;
-  --o-line_height-display2: 76px;
-  --o-line_height-display3: 48px;
-  --o-line_height-display4: 36px;
-  --o-line_height-h1: 32px;
-  --o-line_height-h2: 28px;
-  --o-line_height-h3: 26px;
-  --o-line_height-h4: 24px;
-  --o-line_height-text: 22px;
-  --o-line_height-tip1: 18px;
-  --o-line_height-tip2: 14px;
-  /* 间距（组件间） */
-  --o-gap-1: 4px;
-  --o-gap-2: 8px;
-  --o-gap-3: 12px;
-  --o-gap-4: 16px;
-  --o-gap-5: 24px;
-  --o-gap-6: 32px;
-  --o-gap-7: 40px;
-  --o-gap-8: 64px;
-  /* 图标尺寸 */
-  --o-icon_size-l: 48px;
-  --o-icon_size-m: 32px;
-  --o-icon_size-s: 24px;
-  --o-icon_size-xs: 16px;
-  /* 圆角 */
-  --o-radius-l: 16px;
-  --o-radius-m: 8px;
-  --o-radius-s: 4px;
-  /* 阴影 */
-  --o-shadow-1: 0 1px 5px rgba(45, 47, 51, 0.1);
-  --o-shadow-2: 0 6px 18px rgba(0, 47, 167, 0.14);
-  --o-shadow-3: 0 10px 32px rgba(45, 47, 51, 0.18);
-}
-
-:root[theme="dark"] {
-  --o-color-primary1: red;
-}
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/color.json b/packages/opendesign/src/tokens/color.json
deleted file mode 100644
index 9002c83d..00000000
--- a/packages/opendesign/src/tokens/color.json
+++ /dev/null
@@ -1,395 +0,0 @@
-{
-  "primary": {
-    "name": "主色",
-    "type": "color",
-    "value": [
-      {
-        "key": "color-primary1",
-        "name": "常规色",
-        "description": "用于按钮、文本、链接强调状态时常规颜色",
-        "value": {
-          "light": "#002fa7",
-          "dark": "#ff0000"
-        }
-      },
-      {
-        "key": "color-primary2",
-        "name": "悬浮色",
-        "description": "用于按钮、文本、链接强调状态时悬浮颜色",
-        "value": {
-          "light": "#406fe7"
-        }
-      },
-      {
-        "key": "color-primary3",
-        "name": "聚焦色",
-        "description": "用于按钮、文本、链接强调状态时聚焦颜色",
-        "value": {
-          "light": "#00288d"
-        }
-      },
-      {
-        "key": "color-primary4",
-        "name": "禁用色",
-        "description": "用于按钮、文本、链接强调状态时禁用颜色",
-        "value": {
-          "light": "#b2c0e4"
-        }
-      }
-    ]
-  },
-  "major": {
-    "name": "辅色",
-    "type": "color",
-    "value": [
-      {
-        "key": "color-major1",
-        "name": "常规色",
-        "description": "用于按钮、文本、链接major状态时文本颜色",
-        "value": {
-          "light": "#feb32a"
-        }
-      }
-    ]
-  },
-  "success": {
-    "name": "成功色",
-    "type": "color",
-    "value": [
-      {
-        "key": "color-success1",
-        "name": "常规色",
-        "description": "用于按钮、文本、链接成功状态时常规颜色",
-        "value": {
-          "light": "#6dc335"
-        }
-      },
-      {
-        "key": "color-success2",
-        "name": "悬浮色",
-        "description": "用于按钮、文本、链接成功状态时悬浮颜色",
-        "value": {
-          "light": "#93e95b"
-        }
-      },
-      {
-        "key": "color-success3",
-        "name": "聚焦色",
-        "description": "用于按钮、文本、链接成功状态时聚焦颜色",
-        "value": {
-          "light": "#62af30"
-        }
-      },
-      {
-        "key": "color-success4",
-        "name": "禁用色",
-        "description": "用于按钮、文本、链接成功状态时禁用颜色",
-        "value": {
-          "light": "#c5e7ae"
-        }
-      }
-    ]
-  },
-  "warning": {
-    "name": "告警色",
-    "type": "color",
-    "value": [
-      {
-        "key": "color-warning1",
-        "name": "常规色",
-        "description": "用于按钮、文本、链接告警状态时常规颜色",
-        "value": {
-          "light": "#ff8e36"
-        }
-      },
-      {
-        "key": "color-warning2",
-        "name": "悬浮色",
-        "description": "用于按钮、文本、链接告警状态时悬浮颜色",
-        "value": {
-          "light": "#ffb45c"
-        }
-      },
-      {
-        "key": "color-warning3",
-        "name": "聚焦色",
-        "description": "用于按钮、文本、链接告警状态时聚焦颜色",
-        "value": {
-          "light": "#ff801c"
-        }
-      },
-      {
-        "key": "color-warning4",
-        "name": "禁用色",
-        "description": "用于按钮、文本、链接告警状态时禁用颜色",
-        "value": {
-          "light": "#ffd2af"
-        }
-      }
-    ]
-  },
-  "danger": {
-    "name": "错误色",
-    "type": "color",
-    "value": [
-      {
-        "key": "color-danger1",
-        "name": "常规色",
-        "description": "用于按钮、文本、链接错误状态时常规颜色",
-        "value": {
-          "light": "#f3524d"
-        }
-      },
-      {
-        "key": "color-danger2",
-        "name": "悬浮色",
-        "description": "用于按钮、文本、链接错误状态时悬浮颜色",
-        "value": {
-          "light": "#ff7873"
-        }
-      },
-      {
-        "key": "color-danger3",
-        "name": "聚焦色",
-        "description": "用于按钮、文本、链接错误状态时聚焦颜色",
-        "value": {
-          "light": "#f13b35"
-        }
-      },
-      {
-        "key": "color-danger4",
-        "name": "禁用色",
-        "description": "用于按钮、文本、链接错误状态时禁用颜色",
-        "value": {
-          "light": "#fabab8"
-        }
-      }
-    ]
-  },
-  "info": {
-    "name": "信息色",
-    "type": "color",
-    "value": [
-      {
-        "key": "color-info1",
-        "name": "常规色",
-        "description": "用于按钮、文本、链接信息状态时常规颜色",
-        "value": {
-          "light": "#e5e5e5"
-        }
-      },
-      {
-        "key": "color-info2",
-        "name": "悬浮色",
-        "description": "用于按钮、文本、链接信息状态时悬浮颜色",
-        "value": {
-          "light": "#e5e8f0"
-        }
-      },
-      {
-        "key": "color-info3",
-        "name": "聚焦色",
-        "description": "用于按钮、文本、链接信息状态时聚焦颜色",
-        "value": {
-          "light": "#cccccc"
-        }
-      },
-      {
-        "key": "color-info4",
-        "name": "禁用色",
-        "description": "用于按钮、文本、链接信息状态时禁用颜色",
-        "value": {
-          "light": "#f7f8fa"
-        }
-      }
-    ]
-  },
-  "background": {
-    "name": "背景色",
-    "type": "color",
-    "value": [
-      {
-        "key": "color-bg1",
-        "name": "一级容器背景色",
-        "description": "用于页面整体背景色",
-        "value": {
-          "light": "#f5f6f8"
-        }
-      },
-      {
-        "key": "color-bg2",
-        "name": "二级容器背景色",
-        "description": "用于区块、卡片、弹出框、tooltip背景色",
-        "value": {
-          "light": "#ffffff"
-        }
-      },
-      {
-        "key": "color-bg3",
-        "name": "三级容器背景色",
-        "description": "用于区块卡片背景色",
-        "value": {
-          "light": "#f7f8fa"
-        }
-      },
-      {
-        "key": "color-bg4",
-        "name": "四级容器背景色",
-        "description": "用于区块、卡片、表头背景色",
-        "value": {
-          "light": "#e5e8f0"
-        }
-      }
-    ]
-  },
-  "text": {
-    "name": "文字色",
-    "type": "color",
-    "value": [
-      {
-        "key": "color-text1",
-        "name": "标题色",
-        "description": "用于强调、标题颜色",
-        "value": {
-          "light": "#000000"
-        }
-      },
-      {
-        "key": "color-text1-inverse",
-        "name": "标题反色",
-        "description": "用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题",
-        "value": {
-          "light": "#ffffff"
-        }
-      },
-      {
-        "key": "color-text2",
-        "name": "正文色",
-        "description": "用于次强调、次级标题、正文颜色",
-        "value": {
-          "light": "#3f3f3f"
-        }
-      },
-      {
-        "key": "color-text2-inverse",
-        "name": "正文反色",
-        "description": "用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文",
-        "value": {
-          "light": "#e5e5e5"
-        }
-      },
-      {
-        "key": "color-text3",
-        "name": "提示色",
-        "description": "用于提示文本颜色",
-        "value": {
-          "light": "#707070"
-        }
-      },
-      {
-        "key": "color-text3-inverse",
-        "name": "提示反色",
-        "description": "用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示",
-        "value": {
-          "light": "#b2b2b2"
-        }
-      },
-      {
-        "key": "color-text4",
-        "name": "置灰色",
-        "description": "用于禁用文本颜色",
-        "value": {
-          "light": "#cccccc"
-        }
-      },
-      {
-        "key": "color-text4-inverse",
-        "name": "置灰反色",
-        "description": "用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本",
-        "value": {
-          "light": "#e5e5e5"
-        }
-      }
-    ]
-  },
-  "border": {
-    "name": "边框色",
-    "type": "color",
-    "value": [
-      {
-        "key": "color-border1",
-        "name": "边框色",
-        "description": "较明显的边框",
-        "value": {
-          "light": "#707070"
-        }
-      },
-      {
-        "key": "color-border2",
-        "name": "弱边框色",
-        "description": "较弱的边框",
-        "value": {
-          "light": "#e5e5e5"
-        }
-      }
-    ]
-  },
-  "division": {
-    "name": "分隔线色",
-    "type": "color",
-    "value": [
-      {
-        "key": "color-division1",
-        "name": "分隔线色1",
-        "description": "用于分隔线颜色",
-        "value": {
-          "light": "#707070"
-        }
-      }
-    ]
-  },
-  "mask": {
-    "name": "遮罩色",
-    "type": "mask",
-    "value": [
-      {
-        "key": "color-mask1",
-        "name": "遮罩色1",
-        "description": "用于弹窗遮罩色",
-        "value": {
-          "light": "rgba(0, 0, 0, 0.5)"
-        }
-      }
-    ]
-  },
-  "shadow": {
-    "name": "阴影色",
-    "type": "shadow",
-    "value": [
-      {
-        "key": "shadow-1",
-        "name": "阴影色1",
-        "description": "用于卡片、小弹窗、楼层阴影",
-        "value": {
-          "light": "0 1px 5px rgba(45, 47, 51, 0.1)"
-        }
-      },
-      {
-        "key": "shadow-2",
-        "name": "阴影色2",
-        "description": "用于卡片悬浮阴影",
-        "value": {
-          "light": "0 6px 18px rgba(0, 47, 167, 0.14)"
-        }
-      },
-      {
-        "key": "shadow-3",
-        "name": "阴影色3",
-        "description": "用于提示阴影",
-        "value": {
-          "light": "0 10px 32px rgba(45, 47, 51, 0.18)"
-        }
-      }
-    ]
-  }
-}
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/size.json b/packages/opendesign/src/tokens/size.json
deleted file mode 100644
index 96c21c36..00000000
--- a/packages/opendesign/src/tokens/size.json
+++ /dev/null
@@ -1,474 +0,0 @@
-{
-  "gap": {
-    "name": "间距",
-    "type": "gap",
-    "value": [
-      {
-        "key": "gap-1",
-        "name": "间距1",
-        "description": "用于组件之间的间距1",
-        "value": {
-          "light": "4px"
-        }
-      },
-      {
-        "key": "gap-2",
-        "name": "间距2",
-        "description": "用于组件之间的间距2",
-        "value": {
-          "light": "8px"
-        }
-      },
-      {
-        "key": "gap-3",
-        "name": "间距3",
-        "description": "用于组件之间的间距3",
-        "value": {
-          "light": "12px"
-        }
-      },
-      {
-        "key": "gap-4",
-        "name": "间距4",
-        "description": "用于组件之间的间距4",
-        "value": {
-          "light": "16px"
-        }
-      },
-      {
-        "key": "gap-5",
-        "name": "间距5",
-        "description": "用于组件之间的间距5",
-        "value": {
-          "light": "24px"
-        }
-      },
-      {
-        "key": "gap-6",
-        "name": "间距6",
-        "description": "用于组件之间的间距6",
-        "value": {
-          "light": "32px"
-        }
-      },
-      {
-        "key": "gap-7",
-        "name": "间距7",
-        "description": "用于组件之间的间距7",
-        "value": {
-          "light": "40px"
-        }
-      },
-      {
-        "key": "gap-8",
-        "name": "间距8",
-        "description": "用于组件之间的间距8",
-        "value": {
-          "light": "64px"
-        }
-      }
-    ]
-  },
-  "size": {
-    "name": "组件尺寸",
-    "type": "size",
-    "value": [
-      {
-        "key": "size-l",
-        "name": "大尺寸",
-        "description": "尺寸",
-        "value": {
-          "light": "40px"
-        }
-      },
-      {
-        "key": "size-m",
-        "name": "中尺寸",
-        "description": "尺寸",
-        "value": {
-          "light": "32px"
-        }
-      },
-      {
-        "key": "size-s",
-        "name": "小尺寸",
-        "description": "小尺寸",
-        "value": {
-          "light": "24px"
-        }
-      }
-    ]
-  },
-  "icon_size": {
-    "name": "图标尺寸",
-    "type": "size",
-    "value": [
-      {
-        "key": "icon_size-l",
-        "name": "大尺寸图标",
-        "description": "尺寸",
-        "value": {
-          "light": "48px"
-        }
-      },
-      {
-        "key": "icon_size-m",
-        "name": "中尺寸图标",
-        "description": "尺寸",
-        "value": {
-          "light": "32px"
-        }
-      },
-      {
-        "key": "icon_size-s",
-        "name": "小尺寸图标",
-        "description": "小尺寸",
-        "value": {
-          "light": "24px"
-        }
-      },
-      {
-        "key": "icon_size-xs",
-        "name": "超小尺寸图标",
-        "description": "小尺寸",
-        "value": {
-          "light": "16px"
-        }
-      }
-    ]
-  },
-  "font_size": {
-    "name": "文本尺寸",
-    "type": "font",
-    "value": [
-      {
-        "key": "font_size-display1",
-        "name": "一级数据展示",
-        "description": "一级数据展示",
-        "value": {
-          "light": "64px"
-        }
-      },
-      {
-        "key": "font_size-display2",
-        "name": "二级数据展示",
-        "description": "二级数据展示",
-        "value": {
-          "light": "54px"
-        }
-      },
-      {
-        "key": "font_size-display3",
-        "name": "三级数据展示",
-        "description": "三级数据展示",
-        "value": {
-          "light": "36px"
-        }
-      },
-      {
-        "key": "font_size-display4",
-        "name": "四级数据展示",
-        "description": "四级数据展示",
-        "value": {
-          "light": "28px"
-        }
-      },
-      {
-        "key": "font_size-h1",
-        "name": "一级标题",
-        "description": "一级标题",
-        "value": {
-          "light": "24px"
-        }
-      },
-      {
-        "key": "font_size-h2",
-        "name": "二级标题",
-        "description": "二级标题",
-        "value": {
-          "light": "20px"
-        }
-      },
-      {
-        "key": "font_size-h3",
-        "name": "三级标题",
-        "description": "三级标题",
-        "value": {
-          "light": "18px"
-        }
-      },
-      {
-        "key": "font_size-h4",
-        "name": "四级标题",
-        "description": "四级标题",
-        "value": {
-          "light": "16px"
-        }
-      },
-      {
-        "key": "font_size-text",
-        "name": "正文",
-        "description": "正文",
-        "value": {
-          "light": "14px"
-        }
-      },
-      {
-        "key": "font_size-tip1",
-        "name": "提示文本1",
-        "description": "提示文本1",
-        "value": {
-          "light": "12px"
-        }
-      },
-      {
-        "key": "font_size-tip2",
-        "name": "提示文本2",
-        "description": "提示文本2",
-        "value": {
-          "light": "10px"
-        }
-      }
-    ]
-  },
-  "line_height": {
-    "name": "文本行高",
-    "type": "font",
-    "value": [
-      {
-        "key": "line_height-display1",
-        "name": "一级数据展示",
-        "description": "一级数据展示",
-        "value": {
-          "light": "84px"
-        }
-      },
-      {
-        "key": "line_height-display2",
-        "name": "二级数据展示",
-        "description": "二级数据展示",
-        "value": {
-          "light": "76px"
-        }
-      },
-      {
-        "key": "line_height-display3",
-        "name": "三级数据展示",
-        "description": "三级数据展示",
-        "value": {
-          "light": "48px"
-        }
-      },
-      {
-        "key": "line_height-display4",
-        "name": "四级数据展示",
-        "description": "四级数据展示",
-        "value": {
-          "light": "36px"
-        }
-      },
-      {
-        "key": "line_height-h1",
-        "name": "一级标题",
-        "description": "一级标题",
-        "value": {
-          "light": "32px"
-        }
-      },
-      {
-        "key": "line_height-h2",
-        "name": "二级标题",
-        "description": "二级标题",
-        "value": {
-          "light": "28px"
-        }
-      },
-      {
-        "key": "line_height-h3",
-        "name": "三级标题",
-        "description": "三级标题",
-        "value": {
-          "light": "26px"
-        }
-      },
-      {
-        "key": "line_height-h4",
-        "name": "四级标题",
-        "description": "四级标题",
-        "value": {
-          "light": "24px"
-        }
-      },
-      {
-        "key": "line_height-text",
-        "name": "正文",
-        "description": "正文",
-        "value": {
-          "light": "22px"
-        }
-      },
-      {
-        "key": "line_height-tip1",
-        "name": "提示文本1",
-        "description": "提示文本1",
-        "value": {
-          "light": "18px"
-        }
-      },
-      {
-        "key": "line_height-tip2",
-        "name": "提示文本2",
-        "description": "提示文本2",
-        "value": {
-          "light": "14px"
-        }
-      }
-    ]
-  },
-  "radius": {
-    "name": "圆角尺寸",
-    "type": "radius",
-    "value": [
-      {
-        "key": "radius-l",
-        "name": "大尺寸圆角",
-        "description": "大尺寸圆角",
-        "value": {
-          "light": "16px"
-        }
-      },
-      {
-        "key": "radius-m",
-        "name": "中尺寸圆角",
-        "description": "中尺寸圆角",
-        "value": {
-          "light": "8px"
-        }
-      },
-      {
-        "key": "radius-s",
-        "name": "小尺寸圆角",
-        "description": "小尺寸圆角",
-        "value": {
-          "light": "4px"
-        }
-      }
-    ]
-  },
-  "duration": {
-    "name": "动画持续时间",
-    "type": "animation",
-    "value": [
-      {
-        "key": "duration-s",
-        "name": "持续时间",
-        "description": "用于退出屏幕的动画",
-        "value": {
-          "light": "200ms"
-        }
-      },
-      {
-        "key": "duration-m1",
-        "name": "持续时间",
-        "description": "用于当曲线为standard-in时进入屏幕的动画",
-        "value": {
-          "light": "250ms"
-        }
-      },
-      {
-        "key": "duration-m2",
-        "name": "持续时间",
-        "description": "用于当曲线为standard时开始、结束的动画",
-        "value": {
-          "light": "300ms"
-        }
-      },
-      {
-        "key": "duration-m3",
-        "name": "持续时间",
-        "description": "用于当曲线为emphasized-in时进入屏幕的动画",
-        "value": {
-          "light": "400ms"
-        }
-      },
-      {
-        "key": "duration-l",
-        "name": "持续时间",
-        "description": "用于当曲线为emphasized时开始、结束的动画",
-        "value": {
-          "light": "500ms"
-        }
-      },
-      {
-        "key": "duration-xl",
-        "name": "持续时间",
-        "description": "用于当曲线为emphasized时，轮播切换动画",
-        "value": {
-          "light": "1000ms"
-        }
-      }
-    ]
-  },
-  "easing": {
-    "name": "动画曲线",
-    "type": "animation",
-    "value": [
-      {
-        "key": "easing-linear",
-        "name": "线性动画曲线",
-        "description": "线性曲线",
-        "value": {
-          "light": "cubic-bezier(0, 0, 1, 1)"
-        }
-      },
-      {
-        "key": "easing-standard",
-        "name": "动画曲线",
-        "description": "用于组件",
-        "value": {
-          "light": "cubic-bezier(0.2, 0, 0, 1)"
-        }
-      },
-      {
-        "key": "easing-standard-in",
-        "name": "动画曲线",
-        "description": "用于组件",
-        "value": {
-          "light": "cubic-bezier(0, 0, 0, 1)"
-        }
-      },
-      {
-        "key": "easing-standard-out",
-        "name": "动画曲线",
-        "description": "用于组件",
-        "value": {
-          "light": "cubic-bezier(0.3, 0, 1, 1)"
-        }
-      },
-      {
-        "key": "easing-emphasized",
-        "name": "动画曲线",
-        "description": "用于大卡片、场景切换",
-        "value": {
-          "light": "cubic-bezier(0.2, 0, 0, 1)"
-        }
-      },
-      {
-        "key": "easing-emphasized-in",
-        "name": "动画曲线",
-        "description": "用于大卡片、场景切换",
-        "value": {
-          "light": "cubic-bezier(0.3, 0, 0.8, 0.15)"
-        }
-      },
-      {
-        "key": "easing-emphasized-out",
-        "name": "动画曲线",
-        "description": "用于大卡片、场景切换",
-        "value": {
-          "light": "cubic-bezier(0.05, 0.7, 0.1, 1)"
-        }
-      }
-    ]
-  }
-}
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/tokens.json b/packages/opendesign/src/tokens/tokens.json
index 274d3099..b5378a07 100644
--- a/packages/opendesign/src/tokens/tokens.json
+++ b/packages/opendesign/src/tokens/tokens.json
@@ -10,7 +10,7 @@
         "description": "用于按钮、文本、链接强调状态时常规颜色",
         "value": {
           "light": "#002fa7",
-          "dark": "#ff0000"
+          "dark": "#406fe7"
         }
       },
       {
@@ -18,7 +18,8 @@
         "name": "悬浮色",
         "description": "用于按钮、文本、链接强调状态时悬浮颜色",
         "value": {
-          "light": "#406fe7"
+          "light": "#406fe7",
+          "dark": "#5988ff"
         }
       },
       {
@@ -26,7 +27,8 @@
         "name": "聚焦色",
         "description": "用于按钮、文本、链接强调状态时聚焦颜色",
         "value": {
-          "light": "#00288d"
+          "light": "#00288d",
+          "'dark": "#002fa7"
         }
       },
       {
@@ -34,7 +36,8 @@
         "name": "禁用色",
         "description": "用于按钮、文本、链接强调状态时禁用颜色",
         "value": {
-          "light": "#b2c0e4"
+          "light": "#b2c0e4",
+          "'dark": "#0c2360"
         }
       }
     ]
@@ -49,7 +52,8 @@
         "name": "常规色",
         "description": "用于按钮、文本、链接major状态时文本颜色",
         "value": {
-          "light": "#feb32a"
+          "light": "#feb32a",
+          "'dark": "#feb32a"
         }
       }
     ]
@@ -64,7 +68,8 @@
         "name": "常规色",
         "description": "用于按钮、文本、链接成功状态时常规颜色",
         "value": {
-          "light": "#6dc335"
+          "light": "#6dc335",
+          "dark": "#6dc335"
         }
       },
       {
@@ -72,7 +77,8 @@
         "name": "悬浮色",
         "description": "用于按钮、文本、链接成功状态时悬浮颜色",
         "value": {
-          "light": "#93e95b"
+          "light": "#93e95b",
+          "dark": "#93e95b"
         }
       },
       {
@@ -80,7 +86,8 @@
         "name": "聚焦色",
         "description": "用于按钮、文本、链接成功状态时聚焦颜色",
         "value": {
-          "light": "#62af30"
+          "light": "#62af30",
+          "dark": "#62af30"
         }
       },
       {
@@ -88,7 +95,8 @@
         "name": "禁用色",
         "description": "用于按钮、文本、链接成功状态时禁用颜色",
         "value": {
-          "light": "#c5e7ae"
+          "light": "#c5e7ae",
+          "dark": "#355f1a"
         }
       }
     ]
@@ -103,7 +111,8 @@
         "name": "常规色",
         "description": "用于按钮、文本、链接告警状态时常规颜色",
         "value": {
-          "light": "#ff8e36"
+          "light": "#ff8e36",
+          "dark": "#ff8e36"
         }
       },
       {
@@ -111,7 +120,8 @@
         "name": "悬浮色",
         "description": "用于按钮、文本、链接告警状态时悬浮颜色",
         "value": {
-          "light": "#ffb45c"
+          "light": "#ffb45c",
+          "dark": "#ffb45c"
         }
       },
       {
@@ -119,7 +129,8 @@
         "name": "聚焦色",
         "description": "用于按钮、文本、链接告警状态时聚焦颜色",
         "value": {
-          "light": "#ff801c"
+          "light": "#ff801c",
+          "dark": "#ff801c"
         }
       },
       {
@@ -127,7 +138,8 @@
         "name": "禁用色",
         "description": "用于按钮、文本、链接告警状态时禁用颜色",
         "value": {
-          "light": "#ffd2af"
+          "light": "#ffd2af",
+          "dark": "#b54f00"
         }
       }
     ]
@@ -142,7 +154,8 @@
         "name": "常规色",
         "description": "用于按钮、文本、链接错误状态时常规颜色",
         "value": {
-          "light": "#f3524d"
+          "light": "#f3524d",
+          "dark": "#f3524d"
         }
       },
       {
@@ -150,7 +163,8 @@
         "name": "悬浮色",
         "description": "用于按钮、文本、链接错误状态时悬浮颜色",
         "value": {
-          "light": "#ff7873"
+          "light": "#ff7873",
+          "dark": "#ff7873"
         }
       },
       {
@@ -158,7 +172,8 @@
         "name": "聚焦色",
         "description": "用于按钮、文本、链接错误状态时聚焦颜色",
         "value": {
-          "light": "#f13b35"
+          "light": "#f13b35",
+          "dark": "#f13b35"
         }
       },
       {
@@ -166,7 +181,8 @@
         "name": "禁用色",
         "description": "用于按钮、文本、链接错误状态时禁用颜色",
         "value": {
-          "light": "#fabab8"
+          "light": "#fabab8",
+          "dark": "#850d09"
         }
       }
     ]
@@ -181,7 +197,8 @@
         "name": "常规色",
         "description": "用于按钮、文本、链接信息状态时常规颜色",
         "value": {
-          "light": "#e5e5e5"
+          "light": "#e5e5e5",
+          "dark": "#242424"
         }
       },
       {
@@ -189,7 +206,8 @@
         "name": "悬浮色",
         "description": "用于按钮、文本、链接信息状态时悬浮颜色",
         "value": {
-          "light": "#e5e8f0"
+          "light": "#e5e8f0",
+          "dark": "#2e2e2e"
         }
       },
       {
@@ -197,7 +215,8 @@
         "name": "聚焦色",
         "description": "用于按钮、文本、链接信息状态时聚焦颜色",
         "value": {
-          "light": "#cccccc"
+          "light": "#cccccc",
+          "'dark": "#1e1e1e"
         }
       },
       {
@@ -205,7 +224,8 @@
         "name": "禁用色",
         "description": "用于按钮、文本、链接信息状态时禁用颜色",
         "value": {
-          "light": "#f7f8fa"
+          "light": "#f7f8fa",
+          "dark": "#151515"
         }
       }
     ]
@@ -220,7 +240,8 @@
         "name": "一级容器背景色",
         "description": "用于页面整体背景色",
         "value": {
-          "light": "#f5f6f8"
+          "light": "#f5f6f8",
+          "dark": "#121212"
         }
       },
       {
@@ -228,7 +249,8 @@
         "name": "二级容器背景色",
         "description": "用于区块、卡片、弹出框、tooltip背景色",
         "value": {
-          "light": "#ffffff"
+          "light": "#ffffff",
+          "'dark": "#1e1e1e"
         }
       },
       {
@@ -236,7 +258,8 @@
         "name": "三级容器背景色",
         "description": "用于区块卡片背景色",
         "value": {
-          "light": "#f7f8fa"
+          "light": "#f7f8fa",
+          "dark": "#242424"
         }
       },
       {
@@ -244,7 +267,8 @@
         "name": "四级容器背景色",
         "description": "用于区块、卡片、表头背景色",
         "value": {
-          "light": "#e5e8f0"
+          "light": "#e5e8f0",
+          "dark": "#2e2e2e"
         }
       }
     ]
@@ -259,7 +283,8 @@
         "name": "标题色",
         "description": "用于强调、标题颜色",
         "value": {
-          "light": "#000000"
+          "light": "#000000",
+          "dark": "#ffffff"
         }
       },
       {
@@ -267,7 +292,8 @@
         "name": "标题反色",
         "description": "用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题",
         "value": {
-          "light": "#ffffff"
+          "light": "#ffffff",
+          "dark": "#000000"
         }
       },
       {
@@ -275,7 +301,8 @@
         "name": "正文色",
         "description": "用于次强调、次级标题、正文颜色",
         "value": {
-          "light": "#3f3f3f"
+          "light": "#3f3f3f",
+          "'dark": "#e5e5e5"
         }
       },
       {
@@ -283,7 +310,8 @@
         "name": "正文反色",
         "description": "用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文",
         "value": {
-          "light": "#e5e5e5"
+          "light": "#e5e5e5",
+          "dark": "#3f3f3f"
         }
       },
       {
@@ -291,7 +319,8 @@
         "name": "提示色",
         "description": "用于提示文本颜色",
         "value": {
-          "light": "#707070"
+          "light": "#707070",
+          "'dark": "#b2b2b2"
         }
       },
       {
@@ -299,7 +328,8 @@
         "name": "提示反色",
         "description": "用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示",
         "value": {
-          "light": "#b2b2b2"
+          "light": "#b2b2b2",
+          "dark": "#707070"
         }
       },
       {
@@ -307,7 +337,8 @@
         "name": "置灰色",
         "description": "用于禁用文本颜色",
         "value": {
-          "light": "#cccccc"
+          "light": "#cccccc",
+          "dark": "#555555"
         }
       },
       {
@@ -315,7 +346,8 @@
         "name": "置灰反色",
         "description": "用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本",
         "value": {
-          "light": "#e5e5e5"
+          "light": "#e5e5e5",
+          "dark": "#2d2d2d"
         }
       }
     ]
@@ -330,7 +362,8 @@
         "name": "边框色",
         "description": "较明显的边框",
         "value": {
-          "light": "#707070"
+          "light": "#707070",
+          "dark": "#b2b2b2"
         }
       },
       {
@@ -338,7 +371,8 @@
         "name": "弱边框色",
         "description": "较弱的边框",
         "value": {
-          "light": "#e5e5e5"
+          "light": "#e5e5e5",
+          "dark": "#2d2d2d"
         }
       }
     ]
@@ -353,7 +387,8 @@
         "name": "分隔线色1",
         "description": "用于分隔线颜色",
         "value": {
-          "light": "#707070"
+          "light": "#707070",
+          "dark": "#b2b2b2"
         }
       }
     ]
@@ -368,7 +403,8 @@
         "name": "遮罩色1",
         "description": "用于弹窗遮罩色",
         "value": {
-          "light": "rgba(0, 0, 0, 0.5)"
+          "light": "rgba(0, 0, 0, 0.5)",
+          "'dark": "rgba(0, 0, 0, 0.5)"
         }
       }
     ]
@@ -383,7 +419,8 @@
         "name": "阴影1",
         "description": "用于卡片、小弹窗、楼层阴影",
         "value": {
-          "light": "0 1px 5px rgba(45, 47, 51, 0.1)"
+          "light": "0 1px 5px rgba(45, 47, 51, 0.1)",
+          "dark": "0 1px 7px rgba(0, 0, 0, 0.3)"
         }
       },
       {
@@ -391,7 +428,8 @@
         "name": "阴影2",
         "description": "用于卡片悬浮阴影",
         "value": {
-          "light": "0 6px 18px rgba(0, 47, 167, 0.14)"
+          "light": "0 6px 18px rgba(0, 47, 167, 0.14)",
+          "dark": "0 6px 18px rgba(0, 0, 0, 0.42)"
         }
       },
       {
@@ -399,7 +437,8 @@
         "name": "阴影3",
         "description": "用于提示阴影",
         "value": {
-          "light": "0 10px 32px rgba(45, 47, 51, 0.18)"
+          "light": "0 10px 32px rgba(45, 47, 51, 0.18)",
+          "dark": "0 10px 32px rgba(0, 0, 0, 0.54)"
         }
       }
     ]
@@ -414,7 +453,8 @@
         "name": "间距1",
         "description": "用于组件之间的间距1",
         "value": {
-          "light": "4px"
+          "light": "4px",
+          "dark": "4px"
         }
       },
       {
@@ -422,7 +462,8 @@
         "name": "间距2",
         "description": "用于组件之间的间距2",
         "value": {
-          "light": "8px"
+          "light": "8px",
+          "dark": "8px"
         }
       },
       {
@@ -430,7 +471,8 @@
         "name": "间距3",
         "description": "用于组件之间的间距3",
         "value": {
-          "light": "12px"
+          "light": "12px",
+          "dark": "12px"
         }
       },
       {
@@ -438,7 +480,8 @@
         "name": "间距4",
         "description": "用于组件之间的间距4",
         "value": {
-          "light": "16px"
+          "light": "16px",
+          "dark": "16px"
         }
       },
       {
@@ -446,7 +489,8 @@
         "name": "间距5",
         "description": "用于组件之间的间距5",
         "value": {
-          "light": "24px"
+          "light": "24px",
+          "dark": "24px"
         }
       },
       {
@@ -454,7 +498,8 @@
         "name": "间距6",
         "description": "用于组件之间的间距6",
         "value": {
-          "light": "32px"
+          "light": "32px",
+          "dark": "32px"
         }
       },
       {
@@ -462,7 +507,8 @@
         "name": "间距7",
         "description": "用于组件之间的间距7",
         "value": {
-          "light": "40px"
+          "light": "40px",
+          "dark": "40px"
         }
       },
       {
@@ -470,7 +516,8 @@
         "name": "间距8",
         "description": "用于组件之间的间距8",
         "value": {
-          "light": "64px"
+          "light": "64px",
+          "dark": "64px"
         }
       }
     ]
@@ -485,7 +532,8 @@
         "name": "大尺寸",
         "description": "尺寸",
         "value": {
-          "light": "40px"
+          "light": "40px",
+          "dark": "40px"
         }
       },
       {
@@ -493,7 +541,8 @@
         "name": "中尺寸",
         "description": "尺寸",
         "value": {
-          "light": "32px"
+          "light": "32px",
+          "dark": "32px"
         }
       },
       {
@@ -501,7 +550,8 @@
         "name": "小尺寸",
         "description": "小尺寸",
         "value": {
-          "light": "24px"
+          "light": "24px",
+          "dark": "24px"
         }
       }
     ]
@@ -516,7 +566,8 @@
         "name": "大尺寸图标",
         "description": "尺寸",
         "value": {
-          "light": "48px"
+          "light": "48px",
+          "dark": "48px"
         }
       },
       {
@@ -524,7 +575,8 @@
         "name": "中尺寸图标",
         "description": "尺寸",
         "value": {
-          "light": "32px"
+          "light": "32px",
+          "dark": "32px"
         }
       },
       {
@@ -532,7 +584,8 @@
         "name": "小尺寸图标",
         "description": "小尺寸",
         "value": {
-          "light": "24px"
+          "light": "24px",
+          "dark": "24px"
         }
       },
       {
@@ -540,7 +593,8 @@
         "name": "超小尺寸图标",
         "description": "小尺寸",
         "value": {
-          "light": "16px"
+          "light": "16px",
+          "dark": "16px"
         }
       }
     ]
@@ -555,7 +609,8 @@
         "name": "一级数据展示",
         "description": "一级数据展示",
         "value": {
-          "light": "64px"
+          "light": "64px",
+          "dark": "64px"
         }
       },
       {
@@ -563,7 +618,8 @@
         "name": "二级数据展示",
         "description": "二级数据展示",
         "value": {
-          "light": "54px"
+          "light": "54px",
+          "dark": "54px"
         }
       },
       {
@@ -571,7 +627,8 @@
         "name": "三级数据展示",
         "description": "三级数据展示",
         "value": {
-          "light": "36px"
+          "light": "36px",
+          "dark": "36px"
         }
       },
       {
@@ -579,7 +636,8 @@
         "name": "四级数据展示",
         "description": "四级数据展示",
         "value": {
-          "light": "28px"
+          "light": "28px",
+          "dark": "28px"
         }
       },
       {
@@ -587,7 +645,8 @@
         "name": "一级标题",
         "description": "一级标题",
         "value": {
-          "light": "24px"
+          "light": "24px",
+          "dark": "24px"
         }
       },
       {
@@ -595,7 +654,8 @@
         "name": "二级标题",
         "description": "二级标题",
         "value": {
-          "light": "20px"
+          "light": "20px",
+          "dark": "20px"
         }
       },
       {
@@ -603,7 +663,8 @@
         "name": "三级标题",
         "description": "三级标题",
         "value": {
-          "light": "18px"
+          "light": "18px",
+          "dark": "18px"
         }
       },
       {
@@ -611,7 +672,8 @@
         "name": "四级标题",
         "description": "四级标题",
         "value": {
-          "light": "16px"
+          "light": "16px",
+          "dark": "16px"
         }
       },
       {
@@ -619,7 +681,8 @@
         "name": "正文",
         "description": "正文",
         "value": {
-          "light": "14px"
+          "light": "14px",
+          "dark": "14px"
         }
       },
       {
@@ -627,7 +690,8 @@
         "name": "提示文本1",
         "description": "提示文本1",
         "value": {
-          "light": "12px"
+          "light": "12px",
+          "dark": "12px"
         }
       },
       {
@@ -635,7 +699,8 @@
         "name": "提示文本2",
         "description": "提示文本2",
         "value": {
-          "light": "10px"
+          "light": "10px",
+          "dark": "10px"
         }
       }
     ]
@@ -650,7 +715,8 @@
         "name": "一级数据展示",
         "description": "一级数据展示",
         "value": {
-          "light": "84px"
+          "light": "84px",
+          "dark": "84px"
         }
       },
       {
@@ -658,7 +724,8 @@
         "name": "二级数据展示",
         "description": "二级数据展示",
         "value": {
-          "light": "76px"
+          "light": "76px",
+          "dark": "76px"
         }
       },
       {
@@ -666,7 +733,8 @@
         "name": "三级数据展示",
         "description": "三级数据展示",
         "value": {
-          "light": "48px"
+          "light": "48px",
+          "dark": "48px"
         }
       },
       {
@@ -674,7 +742,8 @@
         "name": "四级数据展示",
         "description": "四级数据展示",
         "value": {
-          "light": "36px"
+          "light": "36px",
+          "dark": "36px"
         }
       },
       {
@@ -682,7 +751,8 @@
         "name": "一级标题",
         "description": "一级标题",
         "value": {
-          "light": "32px"
+          "light": "32px",
+          "dark": "32px"
         }
       },
       {
@@ -690,7 +760,8 @@
         "name": "二级标题",
         "description": "二级标题",
         "value": {
-          "light": "28px"
+          "light": "28px",
+          "dark": "28px"
         }
       },
       {
@@ -698,7 +769,8 @@
         "name": "三级标题",
         "description": "三级标题",
         "value": {
-          "light": "26px"
+          "light": "26px",
+          "dark": "26px"
         }
       },
       {
@@ -706,7 +778,8 @@
         "name": "四级标题",
         "description": "四级标题",
         "value": {
-          "light": "24px"
+          "light": "24px",
+          "dark": "24px"
         }
       },
       {
@@ -714,7 +787,8 @@
         "name": "正文",
         "description": "正文",
         "value": {
-          "light": "22px"
+          "light": "22px",
+          "dark": "22px"
         }
       },
       {
@@ -722,7 +796,8 @@
         "name": "提示文本1",
         "description": "提示文本1",
         "value": {
-          "light": "18px"
+          "light": "18px",
+          "dark": "18px"
         }
       },
       {
@@ -730,7 +805,8 @@
         "name": "提示文本2",
         "description": "提示文本2",
         "value": {
-          "light": "14px"
+          "light": "14px",
+          "dark": "14px"
         }
       }
     ]
@@ -745,7 +821,8 @@
         "name": "大尺寸圆角",
         "description": "大尺寸圆角",
         "value": {
-          "light": "16px"
+          "light": "16px",
+          "dark": "16px"
         }
       },
       {
@@ -753,7 +830,8 @@
         "name": "中尺寸圆角",
         "description": "中尺寸圆角",
         "value": {
-          "light": "8px"
+          "light": "8px",
+          "dark": "8px"
         }
       },
       {
@@ -761,7 +839,8 @@
         "name": "小尺寸圆角",
         "description": "小尺寸圆角",
         "value": {
-          "light": "4px"
+          "light": "4px",
+          "dark": "4px"
         }
       }
     ]
@@ -776,7 +855,8 @@
         "name": "持续时间",
         "description": "用于退出屏幕的动画",
         "value": {
-          "light": "200ms"
+          "light": "200ms",
+          "dark": "200ms"
         }
       },
       {
@@ -784,7 +864,8 @@
         "name": "持续时间",
         "description": "用于当曲线为standard-in时进入屏幕的动画",
         "value": {
-          "light": "250ms"
+          "light": "250ms",
+          "dark": "250ms"
         }
       },
       {
@@ -792,7 +873,8 @@
         "name": "持续时间",
         "description": "用于当曲线为standard时开始、结束的动画",
         "value": {
-          "light": "300ms"
+          "light": "300ms",
+          "dark": "300ms"
         }
       },
       {
@@ -800,7 +882,8 @@
         "name": "持续时间",
         "description": "用于当曲线为emphasized-in时进入屏幕的动画",
         "value": {
-          "light": "400ms"
+          "light": "400ms",
+          "dark": "400ms"
         }
       },
       {
@@ -808,7 +891,8 @@
         "name": "持续时间",
         "description": "用于当曲线为emphasized时开始、结束的动画",
         "value": {
-          "light": "500ms"
+          "light": "500ms",
+          "dark": "500ms"
         }
       },
       {
@@ -816,7 +900,8 @@
         "name": "持续时间",
         "description": "用于当曲线为emphasized时，轮播切换动画",
         "value": {
-          "light": "1000ms"
+          "light": "1000ms",
+          "dark": "1000ms"
         }
       }
     ]
@@ -831,7 +916,8 @@
         "name": "线性动画曲线",
         "description": "线性曲线",
         "value": {
-          "light": "cubic-bezier(0, 0, 1, 1)"
+          "light": "cubic-bezier(0, 0, 1, 1)",
+          "dark": "cubic-bezier(0, 0, 1, 1)"
         }
       },
       {
@@ -839,7 +925,8 @@
         "name": "动画曲线",
         "description": "用于组件",
         "value": {
-          "light": "cubic-bezier(0.2, 0, 0, 1)"
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
         }
       },
       {
@@ -847,7 +934,8 @@
         "name": "动画曲线",
         "description": "用于组件",
         "value": {
-          "light": "cubic-bezier(0, 0, 0, 1)"
+          "light": "cubic-bezier(0, 0, 0, 1)",
+          "dark": "cubic-bezier(0, 0, 0, 1)"
         }
       },
       {
@@ -855,7 +943,8 @@
         "name": "动画曲线",
         "description": "用于组件",
         "value": {
-          "light": "cubic-bezier(0.3, 0, 1, 1)"
+          "light": "cubic-bezier(0.3, 0, 1, 1)",
+          "dark": "cubic-bezier(0.3, 0, 1, 1)"
         }
       },
       {
@@ -863,7 +952,8 @@
         "name": "动画曲线",
         "description": "用于大卡片、场景切换",
         "value": {
-          "light": "cubic-bezier(0.2, 0, 0, 1)"
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
         }
       },
       {
@@ -871,7 +961,8 @@
         "name": "动画曲线",
         "description": "用于大卡片、场景切换",
         "value": {
-          "light": "cubic-bezier(0.3, 0, 0.8, 0.15)"
+          "light": "cubic-bezier(0.3, 0, 0.8, 0.15)",
+          "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)"
         }
       },
       {
@@ -879,9 +970,10 @@
         "name": "动画曲线",
         "description": "用于大卡片、场景切换",
         "value": {
-          "light": "cubic-bezier(0.05, 0.7, 0.1, 1)"
+          "light": "cubic-bezier(0.05, 0.7, 0.1, 1)",
+          "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)"
         }
       }
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/packages/portal/src/App.vue b/packages/portal/src/App.vue
index fe5970b1..ebb7d14d 100644
--- a/packages/portal/src/App.vue
+++ b/packages/portal/src/App.vue
@@ -37,5 +37,7 @@ body {
 .app-body {
   margin-top: var(--app-header-height);
   margin-left: var(--app-aside-width);
+  min-height: calc(100vh - 48px);
+  background-color: var(--o-color-bg1);
 }
 </style>
diff --git a/packages/portal/src/components/TheAside.vue b/packages/portal/src/components/TheAside.vue
index c5bca828..66203d4e 100644
--- a/packages/portal/src/components/TheAside.vue
+++ b/packages/portal/src/components/TheAside.vue
@@ -30,41 +30,37 @@ const navClick = (item: typeof navList[0]) => {
 };
 </script>
 <template>
-  <div class="the-aside">
+  <aside class="the-aside">
     <div class="aside-title">
       {{ title }}
     </div>
     <div class="nav-list">
-      <div
-        v-for="item in navList"
-        :key="item.path"
-        class="nav-item"
-        :class="{ active: currentNav === item.name }"
-        @click="navClick(item)"
-      >
+      <div v-for="item in navList" :key="item.path" class="nav-item" :class="{ active: currentNav === item.name }" @click="navClick(item)">
         {{ item.label }}
       </div>
     </div>
-  </div>
+  </aside>
 </template>
 <style lang="scss" scoped>
 .the-aside {
-  background-color: #f6f6f6;
-  color: #333;
+  background-color: var(--o-color-bg3);
+  color: var(--o-color-text1);
+  border-right: 1px solid var(--o-color-border2);
 }
 .aside-title {
   padding: 8px;
   text-align: center;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--o-color-border2);
 }
 .nav-item {
   padding: 8px 16px;
   cursor: pointer;
   &:hover {
-    background-color: #eee;
+    background-color: var(--o-color-bg4);
   }
   &.active {
-    background-color: #ddd;
+    color: var(--o-color-primary1);
+    background-color: var(--o-color-bg4);
   }
 }
 </style>
diff --git a/packages/portal/src/components/TheHeader.vue b/packages/portal/src/components/TheHeader.vue
index 15178d66..53473da4 100644
--- a/packages/portal/src/components/TheHeader.vue
+++ b/packages/portal/src/components/TheHeader.vue
@@ -19,11 +19,11 @@ const globalSetting = () => {
 </template>
 <style lang="scss" scoped>
 .the-header {
-  color: #333;
+  color: var(--o-color-text1);
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #f6f6f6;
+  background-color: var(--o-color-bg3);
   box-shadow: 0px 2px 8px rgba($color: #000000, $alpha: 0.1);
 }
 .tools {
diff --git a/packages/portal/src/main.ts b/packages/portal/src/main.ts
index 4ecaba73..b2e966ea 100644
--- a/packages/portal/src/main.ts
+++ b/packages/portal/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue';
 import './style.scss';
 import 'normalize.css';
 import '@opensig/opendesign/src/components/style/default-light.token.css';
-import '@opensig/opendesign/src/components/style';
+import '@opensig/opendesign/src/components/style/dark.token.css';
 
 
 import { router } from '@/router';
diff --git a/packages/portal/src/style.scss b/packages/portal/src/style.scss
index 3b5b7159..295babb0 100644
--- a/packages/portal/src/style.scss
+++ b/packages/portal/src/style.scss
@@ -33,9 +33,10 @@ body {
 
 .page-demo {
   padding: 8px 24px;
+  color: var(--o-color-text1);
 }
 section {
-  border: 1px solid #eee;
+  border: 1px solid var(--o-color-border2);
   padding: var(--o-gap-4);
 
   h4 {
-- 
Gitee


From 74d15cd4caf7176c9c2bb81d85676f3dc685ad36 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Wed, 8 Feb 2023 21:53:37 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E5=8E=BB=E6=8E=89pagedemo=E5=AD=97?=
 =?UTF-8?q?=E4=BD=93=E9=BB=98=E8=AE=A4=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/portal/src/style.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/portal/src/style.scss b/packages/portal/src/style.scss
index 295babb0..7d087b9a 100644
--- a/packages/portal/src/style.scss
+++ b/packages/portal/src/style.scss
@@ -33,7 +33,9 @@ body {
 
 .page-demo {
   padding: 8px 24px;
-  color: var(--o-color-text1);
+  h4 {
+    color: var(--o-color-text1);
+  }
 }
 section {
   border: 1px solid var(--o-color-border2);
-- 
Gitee


From 3a8cf99acca516ca208deb01b26d9ed774da0b49 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Wed, 8 Feb 2023 21:57:31 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E5=85=A8=E5=B1=80=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=BC=95=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/tag/index.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 packages/opendesign/src/components/tag/index.ts

diff --git a/packages/opendesign/src/components/tag/index.ts b/packages/opendesign/src/components/tag/index.ts
new file mode 100644
index 00000000..c8883279
--- /dev/null
+++ b/packages/opendesign/src/components/tag/index.ts
@@ -0,0 +1,11 @@
+import type { App } from 'vue';
+
+import _OTag from './OTag.vue';
+
+const OTag = Object.assign(_OTag, {
+  install(app: App) {
+    app.component(_OTag.name, _OTag);
+  },
+});
+
+export { OTag };
-- 
Gitee