diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets
index e4222b68a6d645e1c1d137c10a11e8f2fe2fdcff..84668efa833c40a4764afe5bd13fbf4e1bda7c59 100644
--- a/.vscode/opendesign.token.code-snippets
+++ b/.vscode/opendesign.token.code-snippets
@@ -3,7 +3,7 @@
     "prefix": [
       "--o-color-primary1"
     ],
-    "body": "var(--o-color-primary1)",
+    "body": "--o-color-primary1",
     "description": "常规色: 用于按钮、文本、链接强调状态时常规颜色[light: #002fa7, dark: #406fe7]",
     "scope": "css,scss,less"
   },
@@ -11,7 +11,7 @@
     "prefix": [
       "--o-color-primary2"
     ],
-    "body": "var(--o-color-primary2)",
+    "body": "--o-color-primary2",
     "description": "悬浮色: 用于按钮、文本、链接强调状态时悬浮颜色[light: #406fe7, dark: #5988ff]",
     "scope": "css,scss,less"
   },
@@ -19,31 +19,63 @@
     "prefix": [
       "--o-color-primary3"
     ],
-    "body": "var(--o-color-primary3)",
-    "description": "聚焦色: 用于按钮、文本、链接强调状态时聚焦颜色[light: #00288d, 'dark: #002fa7]",
+    "body": "--o-color-primary3",
+    "description": "聚焦色: 用于按钮、文本、链接强调状态时聚焦颜色[light: #00288d, dark: #002fa7]",
     "scope": "css,scss,less"
   },
   "--o-color-primary4": {
     "prefix": [
       "--o-color-primary4"
     ],
-    "body": "var(--o-color-primary4)",
-    "description": "禁用色: 用于按钮、文本、链接强调状态时禁用颜色[light: #b2c0e4, 'dark: #0c2360]",
+    "body": "--o-color-primary4",
+    "description": "禁用色: 用于按钮、文本、链接强调状态时禁用颜色[light: #b2c0e4, dark: #0c2360]",
     "scope": "css,scss,less"
   },
   "--o-color-major1": {
     "prefix": [
       "--o-color-major1"
     ],
-    "body": "var(--o-color-major1)",
-    "description": "常规色: 用于按钮、文本、链接major状态时文本颜色[light: #feb32a, 'dark: #feb32a]",
+    "body": "--o-color-major1",
+    "description": "常规色: 用于按钮、文本、链接major状态时文本颜色[light: #feb32a, dark: #feb32a]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-normal1": {
+    "prefix": [
+      "--o-color-normal1"
+    ],
+    "body": "--o-color-normal1",
+    "description": "常规色: 用于按钮、文本、链接常态时常规颜色[light: var(--o-color-info1), dark: var(--o-color-info1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-normal2": {
+    "prefix": [
+      "--o-color-normal2"
+    ],
+    "body": "--o-color-normal2",
+    "description": "悬浮色: 用于按钮、文本、链接常态时悬浮颜色[light: var(--o-color-primary2), dark: var(--o-color-primary2)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-normal3": {
+    "prefix": [
+      "--o-color-normal3"
+    ],
+    "body": "--o-color-normal3",
+    "description": "聚焦色: 用于按钮、文本、链接常态时聚焦颜色[light: var(--o-color-primary3), dark: var(--o-color-primary3)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-normal4": {
+    "prefix": [
+      "--o-color-normal4"
+    ],
+    "body": "--o-color-normal4",
+    "description": "禁用色: 用于按钮、文本、链接常态时禁用颜色[light: var(--o-color-info4), dark: var(--o-color-info4)]",
     "scope": "css,scss,less"
   },
   "--o-color-success1": {
     "prefix": [
       "--o-color-success1"
     ],
-    "body": "var(--o-color-success1)",
+    "body": "--o-color-success1",
     "description": "常规色: 用于按钮、文本、链接成功状态时常规颜色[light: #6dc335, dark: #6dc335]",
     "scope": "css,scss,less"
   },
@@ -51,7 +83,7 @@
     "prefix": [
       "--o-color-success2"
     ],
-    "body": "var(--o-color-success2)",
+    "body": "--o-color-success2",
     "description": "悬浮色: 用于按钮、文本、链接成功状态时悬浮颜色[light: #93e95b, dark: #93e95b]",
     "scope": "css,scss,less"
   },
@@ -59,7 +91,7 @@
     "prefix": [
       "--o-color-success3"
     ],
-    "body": "var(--o-color-success3)",
+    "body": "--o-color-success3",
     "description": "聚焦色: 用于按钮、文本、链接成功状态时聚焦颜色[light: #62af30, dark: #62af30]",
     "scope": "css,scss,less"
   },
@@ -67,7 +99,7 @@
     "prefix": [
       "--o-color-success4"
     ],
-    "body": "var(--o-color-success4)",
+    "body": "--o-color-success4",
     "description": "禁用色: 用于按钮、文本、链接成功状态时禁用颜色[light: #c5e7ae, dark: #355f1a]",
     "scope": "css,scss,less"
   },
@@ -75,7 +107,7 @@
     "prefix": [
       "--o-color-warning1"
     ],
-    "body": "var(--o-color-warning1)",
+    "body": "--o-color-warning1",
     "description": "常规色: 用于按钮、文本、链接告警状态时常规颜色[light: #ff8e36, dark: #ff8e36]",
     "scope": "css,scss,less"
   },
@@ -83,7 +115,7 @@
     "prefix": [
       "--o-color-warning2"
     ],
-    "body": "var(--o-color-warning2)",
+    "body": "--o-color-warning2",
     "description": "悬浮色: 用于按钮、文本、链接告警状态时悬浮颜色[light: #ffb45c, dark: #ffb45c]",
     "scope": "css,scss,less"
   },
@@ -91,7 +123,7 @@
     "prefix": [
       "--o-color-warning3"
     ],
-    "body": "var(--o-color-warning3)",
+    "body": "--o-color-warning3",
     "description": "聚焦色: 用于按钮、文本、链接告警状态时聚焦颜色[light: #ff801c, dark: #ff801c]",
     "scope": "css,scss,less"
   },
@@ -99,7 +131,7 @@
     "prefix": [
       "--o-color-warning4"
     ],
-    "body": "var(--o-color-warning4)",
+    "body": "--o-color-warning4",
     "description": "禁用色: 用于按钮、文本、链接告警状态时禁用颜色[light: #ffd2af, dark: #b54f00]",
     "scope": "css,scss,less"
   },
@@ -107,7 +139,7 @@
     "prefix": [
       "--o-color-danger1"
     ],
-    "body": "var(--o-color-danger1)",
+    "body": "--o-color-danger1",
     "description": "常规色: 用于按钮、文本、链接错误状态时常规颜色[light: #f3524d, dark: #f3524d]",
     "scope": "css,scss,less"
   },
@@ -115,7 +147,7 @@
     "prefix": [
       "--o-color-danger2"
     ],
-    "body": "var(--o-color-danger2)",
+    "body": "--o-color-danger2",
     "description": "悬浮色: 用于按钮、文本、链接错误状态时悬浮颜色[light: #ff7873, dark: #ff7873]",
     "scope": "css,scss,less"
   },
@@ -123,7 +155,7 @@
     "prefix": [
       "--o-color-danger3"
     ],
-    "body": "var(--o-color-danger3)",
+    "body": "--o-color-danger3",
     "description": "聚焦色: 用于按钮、文本、链接错误状态时聚焦颜色[light: #f13b35, dark: #f13b35]",
     "scope": "css,scss,less"
   },
@@ -131,7 +163,7 @@
     "prefix": [
       "--o-color-danger4"
     ],
-    "body": "var(--o-color-danger4)",
+    "body": "--o-color-danger4",
     "description": "禁用色: 用于按钮、文本、链接错误状态时禁用颜色[light: #fabab8, dark: #850d09]",
     "scope": "css,scss,less"
   },
@@ -139,7 +171,7 @@
     "prefix": [
       "--o-color-info1"
     ],
-    "body": "var(--o-color-info1)",
+    "body": "--o-color-info1",
     "description": "常规色: 用于按钮、文本、链接信息状态时常规颜色[light: #e5e5e5, dark: #242424]",
     "scope": "css,scss,less"
   },
@@ -147,7 +179,7 @@
     "prefix": [
       "--o-color-info2"
     ],
-    "body": "var(--o-color-info2)",
+    "body": "--o-color-info2",
     "description": "悬浮色: 用于按钮、文本、链接信息状态时悬浮颜色[light: #e5e8f0, dark: #2e2e2e]",
     "scope": "css,scss,less"
   },
@@ -155,15 +187,15 @@
     "prefix": [
       "--o-color-info3"
     ],
-    "body": "var(--o-color-info3)",
-    "description": "聚焦色: 用于按钮、文本、链接信息状态时聚焦颜色[light: #cccccc, 'dark: #1e1e1e]",
+    "body": "--o-color-info3",
+    "description": "聚焦色: 用于按钮、文本、链接信息状态时聚焦颜色[light: #cccccc, dark: #1e1e1e]",
     "scope": "css,scss,less"
   },
   "--o-color-info4": {
     "prefix": [
       "--o-color-info4"
     ],
-    "body": "var(--o-color-info4)",
+    "body": "--o-color-info4",
     "description": "禁用色: 用于按钮、文本、链接信息状态时禁用颜色[light: #f7f8fa, dark: #151515]",
     "scope": "css,scss,less"
   },
@@ -171,7 +203,7 @@
     "prefix": [
       "--o-color-bg1"
     ],
-    "body": "var(--o-color-bg1)",
+    "body": "--o-color-bg1",
     "description": "一级容器背景色: 用于页面整体背景色[light: #f5f6f8, dark: #121212]",
     "scope": "css,scss,less"
   },
@@ -179,15 +211,15 @@
     "prefix": [
       "--o-color-bg2"
     ],
-    "body": "var(--o-color-bg2)",
-    "description": "二级容器背景色: 用于区块、卡片、弹出框、tooltip背景色[light: #ffffff, 'dark: #1e1e1e]",
+    "body": "--o-color-bg2",
+    "description": "二级容器背景色: 用于区块、卡片、弹出框、tooltip背景色[light: #ffffff, dark: #1e1e1e]",
     "scope": "css,scss,less"
   },
   "--o-color-bg3": {
     "prefix": [
       "--o-color-bg3"
     ],
-    "body": "var(--o-color-bg3)",
+    "body": "--o-color-bg3",
     "description": "三级容器背景色: 用于区块卡片背景色[light: #f7f8fa, dark: #242424]",
     "scope": "css,scss,less"
   },
@@ -195,7 +227,7 @@
     "prefix": [
       "--o-color-bg4"
     ],
-    "body": "var(--o-color-bg4)",
+    "body": "--o-color-bg4",
     "description": "四级容器背景色: 用于区块、卡片、表头背景色[light: #e5e8f0, dark: #2e2e2e]",
     "scope": "css,scss,less"
   },
@@ -203,7 +235,7 @@
     "prefix": [
       "--o-color-text1"
     ],
-    "body": "var(--o-color-text1)",
+    "body": "--o-color-text1",
     "description": "标题色: 用于强调、标题颜色[light: #000000, dark: #ffffff]",
     "scope": "css,scss,less"
   },
@@ -211,7 +243,7 @@
     "prefix": [
       "--o-color-text1-inverse"
     ],
-    "body": "var(--o-color-text1-inverse)",
+    "body": "--o-color-text1-inverse",
     "description": "标题反色: 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题[light: #ffffff, dark: #000000]",
     "scope": "css,scss,less"
   },
@@ -219,15 +251,15 @@
     "prefix": [
       "--o-color-text2"
     ],
-    "body": "var(--o-color-text2)",
-    "description": "正文色: 用于次强调、次级标题、正文颜色[light: #3f3f3f, 'dark: #e5e5e5]",
+    "body": "--o-color-text2",
+    "description": "正文色: 用于次强调、次级标题、正文颜色[light: #3f3f3f, dark: #e5e5e5]",
     "scope": "css,scss,less"
   },
   "--o-color-text2-inverse": {
     "prefix": [
       "--o-color-text2-inverse"
     ],
-    "body": "var(--o-color-text2-inverse)",
+    "body": "--o-color-text2-inverse",
     "description": "正文反色: 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文[light: #e5e5e5, dark: #3f3f3f]",
     "scope": "css,scss,less"
   },
@@ -235,15 +267,15 @@
     "prefix": [
       "--o-color-text3"
     ],
-    "body": "var(--o-color-text3)",
-    "description": "提示色: 用于提示文本颜色[light: #707070, 'dark: #b2b2b2]",
+    "body": "--o-color-text3",
+    "description": "提示色: 用于提示文本颜色[light: #707070, dark: #b2b2b2]",
     "scope": "css,scss,less"
   },
   "--o-color-text3-inverse": {
     "prefix": [
       "--o-color-text3-inverse"
     ],
-    "body": "var(--o-color-text3-inverse)",
+    "body": "--o-color-text3-inverse",
     "description": "提示反色: 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示[light: #b2b2b2, dark: #707070]",
     "scope": "css,scss,less"
   },
@@ -251,7 +283,7 @@
     "prefix": [
       "--o-color-text4"
     ],
-    "body": "var(--o-color-text4)",
+    "body": "--o-color-text4",
     "description": "置灰色: 用于禁用文本颜色[light: #cccccc, dark: #555555]",
     "scope": "css,scss,less"
   },
@@ -259,7 +291,7 @@
     "prefix": [
       "--o-color-text4-inverse"
     ],
-    "body": "var(--o-color-text4-inverse)",
+    "body": "--o-color-text4-inverse",
     "description": "置灰反色: 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本[light: #e5e5e5, dark: #2d2d2d]",
     "scope": "css,scss,less"
   },
@@ -267,7 +299,7 @@
     "prefix": [
       "--o-color-border1"
     ],
-    "body": "var(--o-color-border1)",
+    "body": "--o-color-border1",
     "description": "边框色: 较明显的边框[light: #707070, dark: #b2b2b2]",
     "scope": "css,scss,less"
   },
@@ -275,7 +307,7 @@
     "prefix": [
       "--o-color-border2"
     ],
-    "body": "var(--o-color-border2)",
+    "body": "--o-color-border2",
     "description": "弱边框色: 较弱的边框[light: #e5e5e5, dark: #2d2d2d]",
     "scope": "css,scss,less"
   },
@@ -283,7 +315,7 @@
     "prefix": [
       "--o-color-division1"
     ],
-    "body": "var(--o-color-division1)",
+    "body": "--o-color-division1",
     "description": "分隔线色1: 用于分隔线颜色[light: #707070, dark: #b2b2b2]",
     "scope": "css,scss,less"
   },
@@ -291,23 +323,23 @@
     "prefix": [
       "--o-color-mask1"
     ],
-    "body": "var(--o-color-mask1)",
-    "description": "遮罩色1: 用于弹窗遮罩色[light: rgba(0, 0, 0, 0.5), 'dark: rgba(0, 0, 0, 0.5)]",
+    "body": "--o-color-mask1",
+    "description": "遮罩色1: 用于弹窗遮罩色[light: rgba(0, 0, 0, 0.5), dark: rgba(0, 0, 0, 0.5)]",
     "scope": "css,scss,less"
   },
   "--o-color-mask2": {
     "prefix": [
       "--o-color-mask2"
     ],
-    "body": "var(--o-color-mask2)",
-    "description": "遮罩色2: 用于loading遮罩色[light: rgba(0, 0, 0, 0.1), 'dark: rgba(0, 0, 0, 0.1)]",
+    "body": "--o-color-mask2",
+    "description": "遮罩色2: 用于loading遮罩色[light: rgba(0, 0, 0, 0.1), dark: rgba(0, 0, 0, 0.1)]",
     "scope": "css,scss,less"
   },
   "--o-shadow-1": {
     "prefix": [
       "--o-shadow-1"
     ],
-    "body": "var(--o-shadow-1)",
+    "body": "--o-shadow-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"
   },
@@ -315,7 +347,7 @@
     "prefix": [
       "--o-shadow-2"
     ],
-    "body": "var(--o-shadow-2)",
+    "body": "--o-shadow-2",
     "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"
   },
@@ -323,7 +355,7 @@
     "prefix": [
       "--o-shadow-3"
     ],
-    "body": "var(--o-shadow-3)",
+    "body": "--o-shadow-3",
     "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"
   },
@@ -331,7 +363,7 @@
     "prefix": [
       "--o-gap-1"
     ],
-    "body": "var(--o-gap-1)",
+    "body": "--o-gap-1",
     "description": "间距1: 用于组件之间的间距1[light: 4px, dark: 4px]",
     "scope": "css,scss,less"
   },
@@ -339,7 +371,7 @@
     "prefix": [
       "--o-gap-2"
     ],
-    "body": "var(--o-gap-2)",
+    "body": "--o-gap-2",
     "description": "间距2: 用于组件之间的间距2[light: 8px, dark: 8px]",
     "scope": "css,scss,less"
   },
@@ -347,7 +379,7 @@
     "prefix": [
       "--o-gap-3"
     ],
-    "body": "var(--o-gap-3)",
+    "body": "--o-gap-3",
     "description": "间距3: 用于组件之间的间距3[light: 12px, dark: 12px]",
     "scope": "css,scss,less"
   },
@@ -355,7 +387,7 @@
     "prefix": [
       "--o-gap-4"
     ],
-    "body": "var(--o-gap-4)",
+    "body": "--o-gap-4",
     "description": "间距4: 用于组件之间的间距4[light: 16px, dark: 16px]",
     "scope": "css,scss,less"
   },
@@ -363,7 +395,7 @@
     "prefix": [
       "--o-gap-5"
     ],
-    "body": "var(--o-gap-5)",
+    "body": "--o-gap-5",
     "description": "间距5: 用于组件之间的间距5[light: 24px, dark: 24px]",
     "scope": "css,scss,less"
   },
@@ -371,7 +403,7 @@
     "prefix": [
       "--o-gap-6"
     ],
-    "body": "var(--o-gap-6)",
+    "body": "--o-gap-6",
     "description": "间距6: 用于组件之间的间距6[light: 32px, dark: 32px]",
     "scope": "css,scss,less"
   },
@@ -379,7 +411,7 @@
     "prefix": [
       "--o-gap-7"
     ],
-    "body": "var(--o-gap-7)",
+    "body": "--o-gap-7",
     "description": "间距7: 用于组件之间的间距7[light: 40px, dark: 40px]",
     "scope": "css,scss,less"
   },
@@ -387,7 +419,7 @@
     "prefix": [
       "--o-gap-8"
     ],
-    "body": "var(--o-gap-8)",
+    "body": "--o-gap-8",
     "description": "间距8: 用于组件之间的间距8[light: 64px, dark: 64px]",
     "scope": "css,scss,less"
   },
@@ -395,7 +427,7 @@
     "prefix": [
       "--o-size-l"
     ],
-    "body": "var(--o-size-l)",
+    "body": "--o-size-l",
     "description": "大尺寸: 尺寸[light: 40px, dark: 40px]",
     "scope": "css,scss,less"
   },
@@ -403,7 +435,7 @@
     "prefix": [
       "--o-size-m"
     ],
-    "body": "var(--o-size-m)",
+    "body": "--o-size-m",
     "description": "中尺寸: 尺寸[light: 32px, dark: 32px]",
     "scope": "css,scss,less"
   },
@@ -411,7 +443,7 @@
     "prefix": [
       "--o-size-s"
     ],
-    "body": "var(--o-size-s)",
+    "body": "--o-size-s",
     "description": "小尺寸: 小尺寸[light: 24px, dark: 24px]",
     "scope": "css,scss,less"
   },
@@ -419,7 +451,7 @@
     "prefix": [
       "--o-icon_size-l"
     ],
-    "body": "var(--o-icon_size-l)",
+    "body": "--o-icon_size-l",
     "description": "大尺寸图标: 尺寸[light: 48px, dark: 48px]",
     "scope": "css,scss,less"
   },
@@ -427,7 +459,7 @@
     "prefix": [
       "--o-icon_size-m"
     ],
-    "body": "var(--o-icon_size-m)",
+    "body": "--o-icon_size-m",
     "description": "中尺寸图标: 尺寸[light: 32px, dark: 32px]",
     "scope": "css,scss,less"
   },
@@ -435,7 +467,7 @@
     "prefix": [
       "--o-icon_size-s"
     ],
-    "body": "var(--o-icon_size-s)",
+    "body": "--o-icon_size-s",
     "description": "小尺寸图标: 小尺寸[light: 24px, dark: 24px]",
     "scope": "css,scss,less"
   },
@@ -443,7 +475,7 @@
     "prefix": [
       "--o-icon_size-xs"
     ],
-    "body": "var(--o-icon_size-xs)",
+    "body": "--o-icon_size-xs",
     "description": "超小尺寸图标: 小尺寸[light: 16px, dark: 16px]",
     "scope": "css,scss,less"
   },
@@ -451,7 +483,7 @@
     "prefix": [
       "--o-font_size-display1"
     ],
-    "body": "var(--o-font_size-display1)",
+    "body": "--o-font_size-display1",
     "description": "一级数据展示: 一级数据展示[light: 64px, dark: 64px]",
     "scope": "css,scss,less"
   },
@@ -459,7 +491,7 @@
     "prefix": [
       "--o-font_size-display2"
     ],
-    "body": "var(--o-font_size-display2)",
+    "body": "--o-font_size-display2",
     "description": "二级数据展示: 二级数据展示[light: 54px, dark: 54px]",
     "scope": "css,scss,less"
   },
@@ -467,7 +499,7 @@
     "prefix": [
       "--o-font_size-display3"
     ],
-    "body": "var(--o-font_size-display3)",
+    "body": "--o-font_size-display3",
     "description": "三级数据展示: 三级数据展示[light: 36px, dark: 36px]",
     "scope": "css,scss,less"
   },
@@ -475,7 +507,7 @@
     "prefix": [
       "--o-font_size-display4"
     ],
-    "body": "var(--o-font_size-display4)",
+    "body": "--o-font_size-display4",
     "description": "四级数据展示: 四级数据展示[light: 28px, dark: 28px]",
     "scope": "css,scss,less"
   },
@@ -483,7 +515,7 @@
     "prefix": [
       "--o-font_size-h1"
     ],
-    "body": "var(--o-font_size-h1)",
+    "body": "--o-font_size-h1",
     "description": "一级标题: 一级标题[light: 24px, dark: 24px]",
     "scope": "css,scss,less"
   },
@@ -491,7 +523,7 @@
     "prefix": [
       "--o-font_size-h2"
     ],
-    "body": "var(--o-font_size-h2)",
+    "body": "--o-font_size-h2",
     "description": "二级标题: 二级标题[light: 20px, dark: 20px]",
     "scope": "css,scss,less"
   },
@@ -499,7 +531,7 @@
     "prefix": [
       "--o-font_size-h3"
     ],
-    "body": "var(--o-font_size-h3)",
+    "body": "--o-font_size-h3",
     "description": "三级标题: 三级标题[light: 18px, dark: 18px]",
     "scope": "css,scss,less"
   },
@@ -507,7 +539,7 @@
     "prefix": [
       "--o-font_size-h4"
     ],
-    "body": "var(--o-font_size-h4)",
+    "body": "--o-font_size-h4",
     "description": "四级标题: 四级标题[light: 16px, dark: 16px]",
     "scope": "css,scss,less"
   },
@@ -515,7 +547,7 @@
     "prefix": [
       "--o-font_size-text"
     ],
-    "body": "var(--o-font_size-text)",
+    "body": "--o-font_size-text",
     "description": "正文: 正文[light: 14px, dark: 14px]",
     "scope": "css,scss,less"
   },
@@ -523,7 +555,7 @@
     "prefix": [
       "--o-font_size-tip1"
     ],
-    "body": "var(--o-font_size-tip1)",
+    "body": "--o-font_size-tip1",
     "description": "提示文本1: 提示文本1[light: 12px, dark: 12px]",
     "scope": "css,scss,less"
   },
@@ -531,7 +563,7 @@
     "prefix": [
       "--o-font_size-tip2"
     ],
-    "body": "var(--o-font_size-tip2)",
+    "body": "--o-font_size-tip2",
     "description": "提示文本2: 提示文本2[light: 10px, dark: 10px]",
     "scope": "css,scss,less"
   },
@@ -539,7 +571,7 @@
     "prefix": [
       "--o-line_height-display1"
     ],
-    "body": "var(--o-line_height-display1)",
+    "body": "--o-line_height-display1",
     "description": "一级数据展示: 一级数据展示[light: 84px, dark: 84px]",
     "scope": "css,scss,less"
   },
@@ -547,7 +579,7 @@
     "prefix": [
       "--o-line_height-display2"
     ],
-    "body": "var(--o-line_height-display2)",
+    "body": "--o-line_height-display2",
     "description": "二级数据展示: 二级数据展示[light: 76px, dark: 76px]",
     "scope": "css,scss,less"
   },
@@ -555,7 +587,7 @@
     "prefix": [
       "--o-line_height-display3"
     ],
-    "body": "var(--o-line_height-display3)",
+    "body": "--o-line_height-display3",
     "description": "三级数据展示: 三级数据展示[light: 48px, dark: 48px]",
     "scope": "css,scss,less"
   },
@@ -563,7 +595,7 @@
     "prefix": [
       "--o-line_height-display4"
     ],
-    "body": "var(--o-line_height-display4)",
+    "body": "--o-line_height-display4",
     "description": "四级数据展示: 四级数据展示[light: 36px, dark: 36px]",
     "scope": "css,scss,less"
   },
@@ -571,7 +603,7 @@
     "prefix": [
       "--o-line_height-h1"
     ],
-    "body": "var(--o-line_height-h1)",
+    "body": "--o-line_height-h1",
     "description": "一级标题: 一级标题[light: 32px, dark: 32px]",
     "scope": "css,scss,less"
   },
@@ -579,7 +611,7 @@
     "prefix": [
       "--o-line_height-h2"
     ],
-    "body": "var(--o-line_height-h2)",
+    "body": "--o-line_height-h2",
     "description": "二级标题: 二级标题[light: 28px, dark: 28px]",
     "scope": "css,scss,less"
   },
@@ -587,7 +619,7 @@
     "prefix": [
       "--o-line_height-h3"
     ],
-    "body": "var(--o-line_height-h3)",
+    "body": "--o-line_height-h3",
     "description": "三级标题: 三级标题[light: 26px, dark: 26px]",
     "scope": "css,scss,less"
   },
@@ -595,7 +627,7 @@
     "prefix": [
       "--o-line_height-h4"
     ],
-    "body": "var(--o-line_height-h4)",
+    "body": "--o-line_height-h4",
     "description": "四级标题: 四级标题[light: 24px, dark: 24px]",
     "scope": "css,scss,less"
   },
@@ -603,7 +635,7 @@
     "prefix": [
       "--o-line_height-text"
     ],
-    "body": "var(--o-line_height-text)",
+    "body": "--o-line_height-text",
     "description": "正文: 正文[light: 22px, dark: 22px]",
     "scope": "css,scss,less"
   },
@@ -611,7 +643,7 @@
     "prefix": [
       "--o-line_height-tip1"
     ],
-    "body": "var(--o-line_height-tip1)",
+    "body": "--o-line_height-tip1",
     "description": "提示文本1: 提示文本1[light: 18px, dark: 18px]",
     "scope": "css,scss,less"
   },
@@ -619,7 +651,7 @@
     "prefix": [
       "--o-line_height-tip2"
     ],
-    "body": "var(--o-line_height-tip2)",
+    "body": "--o-line_height-tip2",
     "description": "提示文本2: 提示文本2[light: 14px, dark: 14px]",
     "scope": "css,scss,less"
   },
@@ -627,31 +659,31 @@
     "prefix": [
       "--o-radius-l"
     ],
-    "body": "var(--o-radius-l)",
-    "description": "大尺寸圆角: 大尺寸圆角[light: 16px, dark: 16px]",
+    "body": "--o-radius-l",
+    "description": "大尺寸圆角: 大尺寸圆角[light: 8px, dark: 8px]",
     "scope": "css,scss,less"
   },
   "--o-radius-m": {
     "prefix": [
       "--o-radius-m"
     ],
-    "body": "var(--o-radius-m)",
-    "description": "中尺寸圆角: 中尺寸圆角[light: 8px, dark: 8px]",
+    "body": "--o-radius-m",
+    "description": "中尺寸圆角: 中尺寸圆角[light: 4px, dark: 4px]",
     "scope": "css,scss,less"
   },
   "--o-radius-s": {
     "prefix": [
       "--o-radius-s"
     ],
-    "body": "var(--o-radius-s)",
-    "description": "小尺寸圆角: 小尺寸圆角[light: 4px, dark: 4px]",
+    "body": "--o-radius-s",
+    "description": "小尺寸圆角: 小尺寸圆角[light: 2px, dark: 2px]",
     "scope": "css,scss,less"
   },
   "--o-duration-s": {
     "prefix": [
       "--o-duration-s"
     ],
-    "body": "var(--o-duration-s)",
+    "body": "--o-duration-s",
     "description": "持续时间: 用于退出屏幕的动画[light: 200ms, dark: 200ms]",
     "scope": "css,scss,less"
   },
@@ -659,7 +691,7 @@
     "prefix": [
       "--o-duration-m1"
     ],
-    "body": "var(--o-duration-m1)",
+    "body": "--o-duration-m1",
     "description": "持续时间: 用于当曲线为standard-in时进入屏幕的动画[light: 250ms, dark: 250ms]",
     "scope": "css,scss,less"
   },
@@ -667,7 +699,7 @@
     "prefix": [
       "--o-duration-m2"
     ],
-    "body": "var(--o-duration-m2)",
+    "body": "--o-duration-m2",
     "description": "持续时间: 用于当曲线为standard时开始、结束的动画[light: 300ms, dark: 300ms]",
     "scope": "css,scss,less"
   },
@@ -675,7 +707,7 @@
     "prefix": [
       "--o-duration-m3"
     ],
-    "body": "var(--o-duration-m3)",
+    "body": "--o-duration-m3",
     "description": "持续时间: 用于当曲线为emphasized-in时进入屏幕的动画[light: 400ms, dark: 400ms]",
     "scope": "css,scss,less"
   },
@@ -683,7 +715,7 @@
     "prefix": [
       "--o-duration-l"
     ],
-    "body": "var(--o-duration-l)",
+    "body": "--o-duration-l",
     "description": "持续时间: 用于当曲线为emphasized时开始、结束的动画[light: 500ms, dark: 500ms]",
     "scope": "css,scss,less"
   },
@@ -691,7 +723,7 @@
     "prefix": [
       "--o-duration-xl"
     ],
-    "body": "var(--o-duration-xl)",
+    "body": "--o-duration-xl",
     "description": "持续时间: 用于当曲线为emphasized时，轮播切换动画[light: 1000ms, dark: 1000ms]",
     "scope": "css,scss,less"
   },
@@ -699,7 +731,7 @@
     "prefix": [
       "--o-easing-linear"
     ],
-    "body": "var(--o-easing-linear)",
+    "body": "--o-easing-linear",
     "description": "线性动画曲线: 线性曲线[light: cubic-bezier(0, 0, 1, 1), dark: cubic-bezier(0, 0, 1, 1)]",
     "scope": "css,scss,less"
   },
@@ -707,7 +739,7 @@
     "prefix": [
       "--o-easing-standard"
     ],
-    "body": "var(--o-easing-standard)",
+    "body": "--o-easing-standard",
     "description": "动画曲线: 用于组件[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
     "scope": "css,scss,less"
   },
@@ -715,7 +747,7 @@
     "prefix": [
       "--o-easing-standard-in"
     ],
-    "body": "var(--o-easing-standard-in)",
+    "body": "--o-easing-standard-in",
     "description": "动画曲线: 用于组件[light: cubic-bezier(0, 0, 0, 1), dark: cubic-bezier(0, 0, 0, 1)]",
     "scope": "css,scss,less"
   },
@@ -723,7 +755,7 @@
     "prefix": [
       "--o-easing-standard-out"
     ],
-    "body": "var(--o-easing-standard-out)",
+    "body": "--o-easing-standard-out",
     "description": "动画曲线: 用于组件[light: cubic-bezier(0.3, 0, 1, 1), dark: cubic-bezier(0.3, 0, 1, 1)]",
     "scope": "css,scss,less"
   },
@@ -731,7 +763,7 @@
     "prefix": [
       "--o-easing-emphasized"
     ],
-    "body": "var(--o-easing-emphasized)",
+    "body": "--o-easing-emphasized",
     "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
     "scope": "css,scss,less"
   },
@@ -739,7 +771,7 @@
     "prefix": [
       "--o-easing-emphasized-in"
     ],
-    "body": "var(--o-easing-emphasized-in)",
+    "body": "--o-easing-emphasized-in",
     "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"
   },
@@ -747,7 +779,7 @@
     "prefix": [
       "--o-easing-emphasized-out"
     ],
-    "body": "var(--o-easing-emphasized-out)",
+    "body": "--o-easing-emphasized-out",
     "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"
   }
diff --git a/packages/docs/global.md b/packages/docs/global.md
index aaf6bca07bb5f9b12042d24b87ac68673baa4478..8ff2322724e21fb4702d6945657dbf17d01e59ac 100644
--- a/packages/docs/global.md
+++ b/packages/docs/global.md
@@ -17,9 +17,9 @@
 | initCloseIcon      | (icon: Component) | --     | 设置全局关闭图标       |
 | initAddIcon        | (icon: Component) | --     | 设置全局添加图标       |
 
-| 方法名  | 参数                                    | 默认值    |
-| :------ | :-------------------------------------- | :-------- |
-| color   | undefined primary success warning error | undefined |
-| variant | fill outline text                       | outline   |
-| rounded | undefined string 'pill'                 | undefined |
-| size    | small medium large                      | medium    |
+| 方法名  | 参数                                  | 默认值    |
+| :------ | :------------------------------------ | :-------- |
+| color   | normal primary success warning danger | normal    |
+| variant | fill outline text                     | outline   |
+| rounded | undefined string 'pill'               | undefined |
+| size    | small normal large                    | normal    |
diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts
index cdb820ccd04cc62a879851f42e538e3ef1aa8e0f..37880a80096335fe83913ccb388016cd6f6431a6 100644
--- a/packages/opendesign/src/components/_shared/global.ts
+++ b/packages/opendesign/src/components/_shared/global.ts
@@ -1,21 +1,36 @@
 import { ref } from 'vue';
 
 // 尺寸
-export type SizeT = 'large' | 'normal' | 'small';
-export const defaultSize = ref<SizeT>('normal');
-export function initSize(type: SizeT) {
-  defaultSize.value = type;
+export type SizeT = 'large' | 'medium' | 'small';
+export const defaultSize = ref<SizeT>('medium');
+export function initSize(val: SizeT) {
+  defaultSize.value = val;
 }
 
+// 圆角
+export type RoundT = 'pill' | string;
+export const defaultRound = ref<{ m: string, s: string, l: string } | null>();
+
+export function initRound(m: string, s: string, l: string) {
+  defaultRound.value = {
+    m, s, l
+  };
+}
+
+// 方向
+export type DirectionT = 'horizontal' | 'vertical';
+
+export type VariantT = 'fill' | 'outline' | 'text';
+
+export type ColorT = 'normal' | 'primary' | 'success' | 'warning' | 'danger';
+
+
+// todo 废弃
 // 形状
 export type ShapeT = 'round' | 'normal';
 export const defaultShape = ref<ShapeT>('normal');
 export function initShape(type: ShapeT) {
   defaultShape.value = type;
 }
-
-// 方向
-export type DirectionT = 'horizontal' | 'vertical';
-
 // 状态
 export type StatusT = 'normal' | 'primary' | 'warning' | 'danger' | 'success';
diff --git a/packages/opendesign/src/components/_shared/style-class.ts b/packages/opendesign/src/components/_shared/style-class.ts
new file mode 100644
index 0000000000000000000000000000000000000000..14a0a193d3868cbd57476b8d7cd094764398e47b
--- /dev/null
+++ b/packages/opendesign/src/components/_shared/style-class.ts
@@ -0,0 +1,37 @@
+import { computed, StyleValue } from 'vue';
+import { defaultRound } from '../_shared/global';
+
+export function getRoundClass(props: any, name: string) {
+
+  return {
+    class: computed(() => {
+
+      if (props.round) {
+        if (props.round === 'pill') {
+          return `o-${name}-round-pill`;
+        } else {
+          return `o-${name}-round-diy`;
+        }
+      } else {
+        if (defaultRound.value) {
+          return `o-${name}-round-diy`;
+        }
+      }
+      return '';
+    }),
+    style: computed(() => {
+      const rlt: StyleValue = {};
+
+      const round = props.round || defaultRound.value;
+
+      if (round) {
+        if (round !== 'pill') {
+          return {
+            [`--${name}-radius`]: props.round
+          };
+        }
+      }
+      return rlt;
+    })
+  };
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/button/OButton.vue b/packages/opendesign/src/components/button/OButton.vue
index 19b6fba01ecc7edb7c9f57655f60a02cf1c09158..ee2613676caed518ce760a161dacda1b2738e762 100644
--- a/packages/opendesign/src/components/button/OButton.vue
+++ b/packages/opendesign/src/components/button/OButton.vue
@@ -1,45 +1,28 @@
 <script setup lang="ts">
-import { defaultSize, defaultShape } from '../_shared/global';
-import type { SizeT, ShapeT } from '../_shared/global';
-import { ButtonTypeT } from './types';
+import { defaultSize } from '../_shared/global';
+import { buttonProps } from './types';
 import { IconLoading } from '../_shared/icons';
+import { getRoundClass } from '../_shared/style-class';
 
-interface ButtonPropT {
-  /**
-   * 按钮类型："outline" | "primary" | "text" | "link"
-   */
-  type?: ButtonTypeT;
-  /**
-   * 按钮尺寸："normal" | "small" | "large"
-   */
-  size?: SizeT;
-  /**
-   * 按钮形状："normal" | "round"
-   */
-  shape?: ShapeT;
-  /**
-   * 是否为loading状态
-   */
-  loading?: boolean;
-}
-const props = withDefaults(defineProps<ButtonPropT>(), {
-  type: 'outline',
-  size: undefined,
-  shape: undefined,
-});
+const props = defineProps(buttonProps);
+
+const round = getRoundClass(props, 'btn');
 </script>
 <template>
   <button
     type="button"
     class="o-btn"
     :class="[
-      `o-btn-${props.type}`,
-      `o-btn-size-${props.size || defaultSize}`,
-      `o-btn-shape-${props.shape || defaultShape}`,
+      `o-btn-${props.color}`,
+      `o-btn-${props.size || defaultSize}`,
+      `o-btn-${props.variant}`,
+      round.class.value,
       {
         'o-btn-icon-only': $slots.icon && !$slots.default,
+        'o-btn-disabled': props.disabled,
       },
     ]"
+    :style="round.style.value"
   >
     <span v-if="$slots.icon || props.loading" class="o-btn-icon prefix" :class="{ loading: props.loading }">
       <IconLoading v-if="props.loading" class="o-rotating" />
diff --git a/packages/opendesign/src/components/button/__demo__/BtnBasic.vue b/packages/opendesign/src/components/button/__demo__/BtnBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..86eb0e508fb6c59cb77462a2893bf53a8584cd4b
--- /dev/null
+++ b/packages/opendesign/src/components/button/__demo__/BtnBasic.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { OButton } from '../index';
+</script>
+<template>
+  <h4>Variant & Color</h4>
+  <section style="align-items: flex-start">
+    <div>
+      <p>color: normal</p>
+      <section>
+        <OButton variant="outline">Outline Button</OButton>
+        <OButton variant="fill">Fill Button</OButton>
+        <OButton variant="text">Text Button</OButton>
+      </section>
+    </div>
+    <div>
+      <p>color: primary</p>
+      <section>
+        <OButton variant="outline" color="primary">Outline Button</OButton>
+        <OButton variant="fill" color="primary">Fill Button</OButton>
+        <OButton variant="text" color="primary">Text Button</OButton>
+      </section>
+    </div>
+    <div>
+      <p>color: success</p>
+      <section>
+        <OButton variant="outline" color="success">Outline Button</OButton>
+        <OButton variant="fill" color="success">Fill Button</OButton>
+        <OButton variant="text" color="success">Text Button</OButton>
+      </section>
+    </div>
+    <div>
+      <p>color: warning</p>
+      <section>
+        <OButton variant="outline" color="warning">Outline Button</OButton>
+        <OButton variant="fill" color="warning">Fill Button</OButton>
+        <OButton variant="text" color="warning">Text Button</OButton>
+      </section>
+    </div>
+    <div>
+      <p>color: danger</p>
+      <section>
+        <OButton variant="outline" color="danger">Outline Button</OButton>
+        <OButton variant="fill" color="danger">Fill Button</OButton>
+        <OButton variant="text" color="danger">Text Button</OButton>
+      </section>
+    </div>
+  </section>
+  <h4>Disabled</h4>
+  <section>
+    <OButton variant="outline" disabled>Outline Button</OButton>
+    <OButton variant="fill" disabled>Fill Button</OButton>
+    <OButton variant="text" disabled>Text Button</OButton>
+  </section>
+
+  <h4>Size</h4>
+  <section>
+    <OButton color="normal" size="small">Primary Button</OButton>
+    <OButton color="normal" size="medium">Success Button</OButton>
+    <OButton color="normal" size="large">Warning Button</OButton>
+
+    <OButton color="primary" size="small">Primary Button</OButton>
+    <OButton color="primary" size="medium">Success Button</OButton>
+    <OButton color="primary" size="large">Warning Button</OButton>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue b/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue
deleted file mode 100644
index 61b52abf6dcba00276f62db2b80cfb6c722605ad..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import { OButton } from '../index';
-const btnClick = () => {
-  alert('clicked');
-};
-</script>
-<template>
-  <h4>Disabled</h4>
-  <section>
-    <OButton type="primary" disabled @click="btnClick">Primary Button</OButton>
-    <OButton type="outline" disabled>Outline Button</OButton>
-    <OButton type="text" disabled>Text Button</OButton>
-    <OButton type="link" disabled>Link Button</OButton>
-  </section>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnRound.vue b/packages/opendesign/src/components/button/__demo__/BtnRound.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b157d978775d42c4bfaa22792350c55daa547a28
--- /dev/null
+++ b/packages/opendesign/src/components/button/__demo__/BtnRound.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { OButton } from '../index';
+import { IconAdd } from '../../icons';
+import { ref } from 'vue';
+
+const r = ref(12);
+const onClick = () => {
+  if (r.value <= 0) {
+    r.value += 16;
+  } else {
+    r.value -= 2;
+  }
+};
+</script>
+<template>
+  <h4>Shape</h4>
+  <section>
+    <div>
+      <p>round="pill"</p>
+      <section>
+        <OButton type="primary" size="large" round="pill">
+          <template #icon><IconAdd /></template>
+        </OButton>
+        <OButton type="outline" round="pill">
+          <template #icon><IconAdd /></template>
+        </OButton>
+        <OButton type="outline" size="small" round="pill">
+          <template #icon><IconAdd /></template>
+        </OButton>
+
+        <OButton type="primary" size="large" round="pill">
+          <template #icon><IconAdd /></template>Round Button
+        </OButton>
+        <OButton type="outline" round="pill">
+          <template #icon><IconAdd /></template>Round Button
+        </OButton>
+        <OButton type="outline" size="small" round="pill">
+          <template #icon><IconAdd /></template>Round Button
+        </OButton>
+      </section>
+    </div>
+    <div>
+      <p>round="{{ r }}"</p>
+      <section>
+        <OButton type="primary" size="large" :round="r + 'px'" @click="onClick">
+          <template #icon><IconAdd /></template>Round Button
+        </OButton>
+        <OButton type="outline" :round="r + 'px'">
+          <template #icon><IconAdd /></template>Round Button
+        </OButton>
+        <OButton type="outline" size="small" :round="r + 'px'">
+          <template #icon><IconAdd /></template>Round Button
+        </OButton>
+      </section>
+    </div>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnShape.vue b/packages/opendesign/src/components/button/__demo__/BtnShape.vue
deleted file mode 100644
index 5d4bdc614a696ee35690e0e316c3a3d99f30e6da..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/button/__demo__/BtnShape.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { OButton } from '../index';
-import { IconAdd } from '../../icons';
-</script>
-<template>
-  <h4>Shape</h4>
-  <section>
-    <OButton type="primary" size="large" shape="round">
-      <template #icon><IconAdd /></template>
-    </OButton>
-    <OButton type="outline" shape="round">
-      <template #icon><IconAdd /></template>
-    </OButton>
-    <OButton type="outline" size="small" shape="round">
-      <template #icon><IconAdd /></template>
-    </OButton>
-
-    <OButton type="primary" size="large" shape="round">
-      <template #icon><IconAdd /></template>Round Button
-    </OButton>
-    <OButton type="outline" shape="round">
-      <template #icon><IconAdd /></template>Round Button
-    </OButton>
-    <OButton type="outline" size="small" shape="round">
-      <template #icon><IconAdd /></template>Round Button
-    </OButton>
-  </section>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnSize.vue b/packages/opendesign/src/components/button/__demo__/BtnSize.vue
deleted file mode 100644
index 2f9c544f24c6a597f27955ded7f025edf8034e83..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/button/__demo__/BtnSize.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { OButton } from '../index';
-</script>
-<template>
-  <h4>Size</h4>
-  <section>
-    <OButton type="primary" size="large"> Large Button </OButton>
-    <OButton type="primary" size="normal"> Normal Button </OButton>
-    <OButton type="primary" size="small"> Small Button </OButton>
-  </section>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnType.vue b/packages/opendesign/src/components/button/__demo__/BtnType.vue
deleted file mode 100644
index 7b2e6b84f15463fd6f6c361c10bc6f854fb9e145..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/button/__demo__/BtnType.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { OButton } from '../index';
-</script>
-<template>
-  <h4>Type</h4>
-  <section>
-    <OButton type="primary">Primary Button</OButton>
-    <OButton type="outline">Outline Button</OButton>
-    <OButton type="text">Text Button</OButton>
-    <OButton type="link">Link Button</OButton>
-  </section>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/__demo__/IndexBtn.vue b/packages/opendesign/src/components/button/__demo__/IndexBtn.vue
index 746b2cd9bdf8281bac105d3b4c2cccc63d3423eb..f2bccf9e1e1c82335120bb7c3fadf01b462a9312 100644
--- a/packages/opendesign/src/components/button/__demo__/IndexBtn.vue
+++ b/packages/opendesign/src/components/button/__demo__/IndexBtn.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
 import '../style';
 
-import BtnType from './BtnType.vue';
-import BtnSize from './BtnSize.vue';
-import BtnDisabled from './BtnDisabled.vue';
+import BtnBasic from './BtnBasic.vue';
 import BtnIcon from './BtnIcon.vue';
-import BtnShape from './BtnShape.vue';
+import BtnRound from './BtnRound.vue';
 import BtnLoading from './BtnLoading.vue';
 </script>
 <template>
   <div class="page-demo">
-    <BtnType />
-    <BtnShape />
-    <BtnSize />
-    <BtnDisabled />
+    <BtnBasic />
+    <BtnRound />
     <BtnIcon />
     <BtnLoading />
   </div>
diff --git a/packages/opendesign/src/components/button/index.ts b/packages/opendesign/src/components/button/index.ts
index 4eefc068f28cd4257ef986d73ecbea97c1407054..5a101088b34b315850bd14990cd01341499392a7 100644
--- a/packages/opendesign/src/components/button/index.ts
+++ b/packages/opendesign/src/components/button/index.ts
@@ -1,7 +1,6 @@
 import _OButton from './OButton.vue';
 import type { App } from 'vue';
 
-export * from './types';
 
 const OButton = Object.assign(_OButton, {
   install(app: App) {
@@ -12,3 +11,4 @@ const OButton = Object.assign(_OButton, {
 export {
   OButton,
 };
+export * from './types';
diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss
index 6b21916b23d0d141664ce94da200b701c362b165..c927724f084b16cba49ef98bbe5c69f7c2baa344 100644
--- a/packages/opendesign/src/components/button/style/index.scss
+++ b/packages/opendesign/src/components/button/style/index.scss
@@ -2,9 +2,8 @@
 
 .o-btn {
   outline: none;
+  background-color: transparent;
   border: 1px solid transparent;
-  font-size: var(--btn-text-size);
-  line-height: var(--btn-text-height);
   transition: all var(--o-duration-s) var(--o-easing-standard);
   white-space: nowrap;
   cursor: pointer;
@@ -12,128 +11,116 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-
-  &:focus-visible {
-    outline: 4px solid var(--btn-primary_hover);
-    outline-offset: 1px;
-  }
-
-  &:disabled {
-    color: var(--btn-color_disabled);
-    cursor: not-allowed;
-  }
 }
-
-.o-btn-size-small {
-  padding: 0 7px;
-  height: var(--btn-height-s);
-  border-radius: var(--btn-radius-s);
-  &.o-btn-icon-only {
-    width: var(--btn-height-s);
-  }
-  .o-btn-icon {
-    margin-right: 2px;
-  }
+.o-btn-disabled {
+  cursor: not-allowed;
 }
 
-.o-btn-size-normal {
-  padding: 4px 15px;
-  height: var(--btn-height-m);
-  border-radius: var(--btn-radius-m);
-  &.o-btn-icon-only {
-    width: var(--btn-height-m);
-  }
-}
-
-.o-btn-size-large {
-  padding: 4px 19px;
-  height: var(--btn-height-l);
-  border-radius: var(--btn-radius-l);
-
-  &.o-btn-icon-only {
-    width: var(--btn-height-l);
-  }
-}
-
-.o-btn-primary {
-  color: var(--btn-color-inverse);
-  background-color: var(--btn-primary);
-
-  &:not(:disabled) {
+.o-btn-outline {
+  color: var(--btn-color);
+  border: 1px solid var(--btn-bd);
+  &:not(.o-btn-disabled) {
     &:hover {
-      background-color: var(--btn-primary_hover);
+      color: var(--btn-color-hover);
+      border: 1px solid var(--btn-bd-hover);
     }
 
     &:active {
-      background-color: var(--btn-primary_active);
+      color: var(--btn-color-active);
+      border: 1px solid var(--btn-bd-active);
+    }
+    &:focus-visible {
+      border: 1px solid var(--btn-bd-active);
     }
-  }
-
-  &:disabled {
-    border-color: var(--btn-bg);
-    background-color: var(--btn-bg_disabled);
   }
 }
 
-.o-btn-outline {
+.o-btn-fill {
   color: var(--btn-color);
-  background-color: transparent;
-  border-color: var(--btn-bg);
-
-  &:not(:disabled) {
+  border: 1px solid var(--btn-bd);
+  background-color: var(--btn-bg);
+  &:not(.o-btn-disabled) {
     &:hover {
-      color: var(--btn-primary_hover);
-      border-color: var(--btn-primary_hover);
+      color: var(--btn-color-hover);
+      border: 1px solid var(--btn-bd-hover);
+      background-color: var(--btn-bg-active);
     }
 
     &:active {
-      color: var(--btn-primary_active);
-      border-color: var(--btn-primary_active);
+      color: var(--btn-color-active);
+      border: 1px solid var(--btn-bd-active);
+      background-color: var(--btn-bg-active);
+    }
+    &:focus-visible {
+      border: 1px solid var(--btn-bd-active);
     }
-  }
-
-  &:disabled {
-    background-color: var(--btn-bg_disabled);
   }
 }
-
 .o-btn-text {
   color: var(--btn-color);
-  background-color: transparent;
 
-  &:not(:disabled) {
+  &:not(.o-btn-disabled) {
     &:hover {
-      background-color: var(--btn-bg_hover);
+      color: var(--btn-color-hover);
+      background-color: var(--btn-bg-hover);
     }
 
     &:active {
-      background-color: var(--btn-bg_active);
+      color: var(--btn-color-active);
+      background-color: var(--btn-bg-active);
     }
   }
 }
 
-.o-btn-link {
-  color: var(--btn-primary);
-  background-color: transparent;
+.o-btn-small {
+  padding: 0 7px;
+  height: var(--o-size-s);
+  font-size: var(--o-font_size-tip1);
+  line-height: var(--o-line_height-tip1);
+  border-radius: var(--btn-radius);
 
-  &:not(:disabled) {
-    &:hover {
-      color: var(--btn-primary_hover);
-    }
+  &.o-btn-icon-only {
+    width: var(--o-size-s);
+  }
+  .o-btn-icon {
+    margin-right: 2px;
+  }
+}
 
-    &:active {
-      color: var(--btn-primary_active);
-    }
+.o-btn-medium {
+  padding: 0 15px;
+  height: var(--o-size-m);
+  font-size: var(--o-font_size-text);
+  line-height: var(--o-line_height-text);
+  border-radius: var(--btn-radius);
+
+  &.o-btn-icon-only {
+    width: var(--o-size-m);
+  }
+}
+
+.o-btn-large {
+  padding: 0 19px;
+  height: var(--o-size-l);
+  font-size: var(--o-font_size-h4);
+  line-height: var(--o-line_height-h4);
+  border-radius: var(--btn-radius);
+
+  &.o-btn-icon-only {
+    width: var(--o-size-l);
   }
 }
 
+.o-btn-round-pill {
+  border-radius: var(--o-size-l);
+}
+
 .o-btn-icon-only {
   padding: 0;
 }
 .o-btn-icon {
   display: inline-flex;
   align-items: center;
-  // vertical-align: middle;
   margin-right: 6px;
   > svg {
     vertical-align: top;
@@ -146,7 +133,3 @@
     justify-content: center;
   }
 }
-
-.o-btn-shape-round {
-  border-radius: var(--btn-height-l);
-}
diff --git a/packages/opendesign/src/components/button/style/var.scss b/packages/opendesign/src/components/button/style/var.scss
index 91ef35036c4541250c9138ae707b9246be3808cd..1fb355be75d6d5dafc53009f100b7463b5503dd8 100644
--- a/packages/opendesign/src/components/button/style/var.scss
+++ b/packages/opendesign/src/components/button/style/var.scss
@@ -1,25 +1,95 @@
-.o-btn {
-  --btn-primary: var(--o-color-primary1);
-  --btn-primary_hover: var(--o-color-primary2);
-  --btn-primary_active: var(--o-color-primary3);
+.o-btn-normal {
+  --btn-color: var(--o-color-text2);
+  --btn-color-hover: var(--o-color-primary2);
+  --btn-color-active: var(--o-color-primary3);
 
-  --btn-bg: var(--o-color-info1);
-  --btn-bg_hover: var(--o-color-info2);
-  --btn-bg_active: var(--o-color-info3);
-  --btn-bg_disabled: var(--o-color-info4);
+  --btn-bg: var(--o-color-normal1);
+  --btn-bg-hover: var(--o-color-primary2);
+  --btn-bg-active: var(--o-color-primary3);
 
-  --btn-color: var(--o-color-text2);
-  --btn-color-inverse: var(--o-color-text2-inverse);
-  --btn-color_disabled: var(--o-color-text4);
+  --btn-bd: var(--o-color-normal1);
+  --btn-bd-hover: var(--o-color-primary2);
+  --btn-bd-active: var(--o-color-primary3);
+}
+.o-btn-primary {
+  --btn-color: var(--o-color-primary1);
+  --btn-color-hover: var(--o-color-primary2);
+  --btn-color-active: var(--o-color-primary3);
+
+  --btn-bg: var(--o-color-primary1);
+  --btn-bg-hover: var(--o-color-primary2);
+  --btn-bg-active: var(--o-color-primary3);
+
+  --btn-bd: var(--o-color-primary1);
+  --btn-bd-hover: var(--o-color-primary2);
+  --btn-bd-active: var(--o-color-primary3);
+}
+.o-btn-success {
+  --btn-color: var(--o-color-success1);
+  --btn-color-hover: var(--o-color-success2);
+  --btn-color-active: var(--o-color-success3);
 
-  --btn-text-size: var(--o-font_size-text);
-  --btn-text-height: var(--o-line_height-text);
+  --btn-bg: var(--o-color-success1);
+  --btn-bg-hover: var(--o-color-success2);
+  --btn-bg-active: var(--o-color-success3);
+
+  --btn-bd: var(--o-color-success1);
+  --btn-bd-hover: var(--o-color-success2);
+  --btn-bd-active: var(--o-color-success3);
+}
+.o-btn-warning {
+  --btn-color: var(--o-color-warning1);
+  --btn-color-hover: var(--o-color-warning2);
+  --btn-color-active: var(--o-color-warning3);
+
+  --btn-bg: var(--o-color-warning1);
+  --btn-bg-hover: var(--o-color-warning2);
+  --btn-bg-active: var(--o-color-warning3);
+
+  --btn-bd: var(--o-color-warning1);
+  --btn-bd-hover: var(--o-color-warning2);
+  --btn-bd-active: var(--o-color-warning3);
+}
+.o-btn-danger {
+  --btn-color: var(--o-color-danger1);
+  --btn-color-hover: var(--o-color-danger2);
+  --btn-color-active: var(--o-color-danger3);
 
-  --btn-height-s: var(--o-size-s);
-  --btn-height-m: var(--o-size-m);
-  --btn-height-l: var(--o-size-l);
+  --btn-bg: var(--o-color-danger1);
+  --btn-bg-hover: var(--o-color-danger2);
+  --btn-bg-active: var(--o-color-danger3);
 
-  --btn-radius-s: var(--o-radius-s);
-  --btn-radius-m: var(--o-radius-s);
-  --btn-radius-l: var(--o-radius-s);
+  --btn-bd: var(--o-color-danger1);
+  --btn-bd-hover: var(--o-color-danger2);
+  --btn-bd-active: var(--o-color-danger3);
+}
+
+.o-btn-fill {
+  --btn-color: var(--o-color-text1-inverse);
+  --btn-color-hover: var(--o-color-text1-inverse);
+  --btn-color-active: var(--o-color-text1-inverse);
+
+  &.o-btn-normal:not(.o-btn-disabled) {
+    --btn-color: var(--o-color-text2);
+  }
+}
+
+.o-btn-disabled {
+  --btn-color: var(--o-color-text4);
+  --btn-bg: var(--o-color-normal4);
+  --btn-bd: var(--o-color-normal4);
+}
+.o-btn-text {
+  --btn-color-hover: var(--o-color-text1-inverse);
+  --btn-color-active: var(--o-color-text1-inverse);
+}
+
+.o-btn-small {
+  --btn-radius: var(--o-radius-s);
+}
+.o-btn-medium {
+  --btn-radius: var(--o-radius-m);
+}
+.o-btn-large {
+  --btn-radius: var(--o-radius-l);
 }
diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts
index 4850609928c4d4be3545bf950735a584f54d494e..71b02fa760ab0388f9a3e113edd405ec3bf2bcd3 100644
--- a/packages/opendesign/src/components/button/types.ts
+++ b/packages/opendesign/src/components/button/types.ts
@@ -1 +1,47 @@
-export type ButtonTypeT = 'primary' | 'outline' | 'text' | 'link'
\ No newline at end of file
+import { ExtractPropTypes, PropType } from 'vue';
+import { SizeT, RoundT, ColorT, VariantT } from '../_shared/global';
+
+export type ButtonTypeT = 'primary' | 'outline' | 'text' | 'link'
+
+export const buttonProps = {
+  /**
+   * 颜色类型：ColorT
+   */
+  color: {
+    type: String as PropType<ColorT>,
+    default: 'normal'
+  },
+  /**
+   * 按钮类型：ColorT
+   */
+  variant: {
+    type: String as PropType<VariantT>,
+    default: 'outline'
+  },
+  /**
+   * 按钮尺寸：SizeT
+   */
+  size: {
+    type: String as PropType<SizeT>
+  },
+  /**
+   * 圆角值
+   */
+  round: {
+    type: String as PropType<RoundT>
+  },
+  /**
+   * 是否为loading状态
+   */
+  loading: {
+    type: Boolean
+  },
+  /**
+   * 是否为禁用状态
+   */
+  disabled: {
+    type: Boolean
+  },
+};
+
+export type ButtonPropsT = ExtractPropTypes<typeof buttonProps>;
diff --git a/packages/opendesign/src/components/form/OForm.vue b/packages/opendesign/src/components/form/OForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..740610efd166a1170d6d9ae8d53db15d9f7818d2
--- /dev/null
+++ b/packages/opendesign/src/components/form/OForm.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+</script>
+<template>
+  <div class="o-form"></div>
+</template>
diff --git a/packages/opendesign/src/components/form/__demo__/FormBasic.vue b/packages/opendesign/src/components/form/__demo__/FormBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af2f495ff8874f22388cae6639ca47dec1effb4e
--- /dev/null
+++ b/packages/opendesign/src/components/form/__demo__/FormBasic.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="page-demo"></div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/form/__demo__/IndexForm.vue b/packages/opendesign/src/components/form/__demo__/IndexForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8bc968ef82cb015567eddcc78abb779cb2f0d2a1
--- /dev/null
+++ b/packages/opendesign/src/components/form/__demo__/IndexForm.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import '../style';
+import '../../option/style';
+
+import InputBasic from './InputBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <InputBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/form/form.ts b/packages/opendesign/src/components/form/form.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e21489896f2623584380b61ba9e26e7d313968df
--- /dev/null
+++ b/packages/opendesign/src/components/form/form.ts
@@ -0,0 +1,8 @@
+import { isNull, isUndefined } from '../_shared/is';
+
+export function toInputString(val: unknown): string {
+  if (isUndefined(val) || isNull(val) || (typeof val === 'number' && isNaN(val as number))) {
+    return '';
+  }
+  return String(val);
+}
diff --git a/packages/opendesign/src/components/form/index.ts b/packages/opendesign/src/components/form/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..02f3334b803fe8b4991f0de43b40dc1131d97d59
--- /dev/null
+++ b/packages/opendesign/src/components/form/index.ts
@@ -0,0 +1,9 @@
+import _OForm from './OForm.vue';
+import type { App } from 'vue';
+
+const OForm = Object.assign(_OForm, {
+  install(app: App) {
+    app.component(_OForm.name, _OForm);
+  },
+});
+export { OForm };
diff --git a/packages/opendesign/src/components/form/style/index.scss b/packages/opendesign/src/components/form/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3a33a0936677a4f2f68f190d61376956d18cc734
--- /dev/null
+++ b/packages/opendesign/src/components/form/style/index.scss
@@ -0,0 +1,10 @@
+@use './var.scss';
+
+.o-form {
+  cursor: pointer;
+  color: var(--input-color);
+  display: inline-flex;
+  height: var(--input-height);
+  font-size: var(--input-text-size);
+  line-height: var(--input-text-height);
+}
diff --git a/packages/opendesign/src/components/form/style/index.ts b/packages/opendesign/src/components/form/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716
--- /dev/null
+++ b/packages/opendesign/src/components/form/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/form/style/var.scss b/packages/opendesign/src/components/form/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..447b3517ff17b483ae4bc3b79ea36e91e1de1148
--- /dev/null
+++ b/packages/opendesign/src/components/form/style/var.scss
@@ -0,0 +1,2 @@
+.o-form {
+}
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index 9a2d7f9a6dfd0b497a92c921116a7b0d52c8b33a..4a33ae5174fcc95c54a9e32916e6f1c8b934a551 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -1,82 +1,16 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
-import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
+import { defaultSize } from '../_shared/global';
 import { isFunction } from '../_shared/is';
 import { IconX } from '../icons';
 import { trigger } from '../_shared/event';
 import { Enter } from '../_shared/keycode';
 import { toInputString } from './input';
 import { OResizeObserver } from '../resize-observer';
+import { inputPorps } from './types';
+import { getRoundClass } from '../_shared/style-class';
 
-interface InputPropT {
-  /**
-   * 下拉框的值
-   * v-model
-   */
-  modelValue?: string | number;
-  /**
-   * 下拉框的默认值
-   * 非受控
-   */
-  defaultValue?: string | number;
-  /**
-   * 大小
-   */
-  size?: SizeT;
-  /**
-   * 形状
-   */
-  shape?: ShapeT;
-  /**
-   * 提示文本
-   */
-  placeholder?: string;
-  /**
-   * 状态，显示指定，用于非表单场景
-   */
-  status?: 'success' | 'warning' | 'error';
-  /**
-   * 是否禁用
-   */
-  disabled?: boolean;
-  /**
-   * 是否只读
-   */
-  readonly?: boolean;
-  /**
-   * 是否可以清除
-   */
-  clearable?: boolean;
-  /**
-   * 是否自动增加宽度
-   */
-  autoWidth?: boolean;
-  /**
-   * 是否是密码输入
-   */
-  type?: 'text' | 'password';
-  /**
-   * 解析输入框的值
-   */
-  parse?: (value: string) => string;
-  /**
-   * 对值格式化，控制显示格式
-   * 需搭配parse处理，保证值的正确性
-   */
-  format?: (value: string | number) => string | number;
-}
-const props = withDefaults(defineProps<InputPropT>(), {
-  modelValue: undefined,
-  defaultValue: '',
-  size: undefined,
-  shape: undefined,
-  placeholder: '',
-  type: 'text',
-  clearable: true,
-  parse: undefined,
-  format: undefined,
-  status: undefined,
-});
+const props = defineProps(inputPorps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string): void;
@@ -207,19 +141,22 @@ const onMouseDown = (e: MouseEvent) => {
 const onMirrorResize = (en: ResizeObserverEntry) => {
   inputWidth.value = en.target.clientWidth;
 };
+const round = getRoundClass(props, 'input');
+console.log(round.class.value);
 </script>
 <template>
   <label
     class="o-input"
     :class="[
+      `o-input-${props.color}`,
       `o-input-size-${props.size || defaultSize}`,
-      `o-input-shape-${props.shape || defaultShape}`,
-      props.status ? `o-input-status-${props.status}` : '',
+      round.class.value,
       {
         'o-input-disabled': props.disabled,
         'o-input-focus': isFocus,
       },
     ]"
+    :style="round.style.value"
     @mousedown="onMouseDown"
   >
     <span v-if="$slots.prepend" class="o-input-prepend">
@@ -238,7 +175,7 @@ const onMirrorResize = (en: ResizeObserverEntry) => {
       <div v-if="$slots.prefix" class="o-input-prefix">
         <slot name="prefix"></slot>
       </div>
-      <div class="o-input-auto-wrap">
+      <div class="o-input-input-wrap">
         <input
           ref="inputRef"
           :value="displayValue"
diff --git a/packages/opendesign/src/components/input/__demo__/IndexInput.vue b/packages/opendesign/src/components/input/__demo__/IndexInput.vue
index d9f6fe6da12ecad011379ff4e6b869e9efd7f91d..550adcad57c78eaa2eda37f221d0112f77e08cda 100644
--- a/packages/opendesign/src/components/input/__demo__/IndexInput.vue
+++ b/packages/opendesign/src/components/input/__demo__/IndexInput.vue
@@ -3,6 +3,8 @@ import '../style';
 import '../../option/style';
 
 import InputBasic from './InputBasic.vue';
+import InputRound from './InputRound.vue';
+
 import InputEvent from './InputEvent.vue';
 import InputSlot from './InputSlot.vue';
 import InputMethod from './InputMethod.vue';
@@ -11,8 +13,9 @@ import InputAutoWidth from './InputAutoWidth.vue';
 <template>
   <div class="page-demo">
     <InputBasic />
-    <InputEvent />
+    <InputRound />
     <InputSlot />
+    <InputEvent />
     <InputMethod />
     <InputAutoWidth />
   </div>
diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
index 765a1904eafefd75b415477791d3da6aae8063bf..f7fcc2447bffd513dc87a890259711b82d0ca3fa 100644
--- a/packages/opendesign/src/components/input/__demo__/InputBasic.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
@@ -6,70 +6,50 @@ import { IconDone } from '../../icons';
 const val1 = ref('');
 const val2 = ref('this is input value');
 const val3 = ref(`${12345}`);
-const val4 = ref(12345);
 setTimeout(() => {
   val2.value += '---';
 }, 2000);
-
-const printEvent = (event: string, val?: string | number) => {
-  console.log(`[${event}]`, val);
-};
 </script>
 <template>
-  <h4>Basic</h4>
+  <div>val1:{{ val1 }}</div>
+  <div>val2:{{ val2 }}</div>
+  <div>val3:{{ val3 }}</div>
+  <h4>type</h4>
   <section>
-    <div>val1:{{ val1 }}</div>
-    <OInput v-model="val1" />
-    <div>val2:{{ val2 }}</div>
-    <OInput
-      v-model="val2"
-      @blur="(v) => printEvent('blur', v)"
-      @change="(v) => printEvent('change', v)"
-      @input="(v) => printEvent('input', v)"
-      @focus="(v) => printEvent('focus', v)"
-      @clear="(v) => printEvent('clear')"
-      @press-enter="(v) => printEvent('press-enter', v)"
-    />
-    <OInput v-model="val3" />
-    <OInput v-model="val3" type="password" />
+    <div>
+      <section>
+        <p>text:</p>
+        <OInput v-model="val3" />
+        <p>password:</p>
+        <OInput v-model="val3" type="password" />
+      </section>
+    </div>
+  </section>
+  <h4>color</h4>
+  <section>
+    <div>
+      <p>color: normal</p>
+      <OInput v-model="val1" placeholder="outline input" />
+    </div>
+    <div>
+      <p>color: success</p>
+      <OInput v-model="val1" placeholder="outline input" color="success" />
+    </div>
+    <div>
+      <p>color: warning</p>
+      <OInput v-model="val1" placeholder="outline input" color="warning" />
+    </div>
+    <div>
+      <p>color: danger</p>
+      <OInput v-model="val1" placeholder="outline input" color="danger" />
+    </div>
   </section>
   <h4>Size</h4>
   <section>
-    <div>val1:{{ val1 }}</div>
     <OInput v-model="val2" size="small" />
     <OInput v-model="val2" />
     <OInput v-model="val3" size="large" />
   </section>
-  <h4>Shape</h4>
-  <section>
-    <div>val1:{{ val1 }}</div>
-    <OInput v-model="val2" size="small" shape="round" />
-    <OInput v-model="val2" shape="round" />
-    <OInput v-model="val3" size="large" shape="round" />
-    <OInput v-model="val2" disabled shape="round">
-      <template #prefix><IconDone /></template>
-      <template #suffix> 元 </template>
-    </OInput>
-    <OInput v-model="val2" shape="round" size="small">
-      <template #prepend>+86</template>
-      <template #append>手机</template>
-    </OInput>
-    <OInput v-model="val2" shape="round">
-      <template #prepend>+86</template>
-      <template #append>手机</template>
-    </OInput>
-    <OInput v-model="val2" shape="round" size="large">
-      <template #prepend>+86</template>
-      <template #append>手机</template>
-    </OInput>
-  </section>
-  <h4>Status</h4>
-  <section>
-    <div>val1:{{ val1 }}</div>
-    <OInput v-model="val2" status="success" />
-    <OInput v-model="val2" status="warning" />
-    <OInput v-model="val2" status="error" />
-  </section>
   <h4>Disabled</h4>
   <section>
     <div>val1:{{ val1 }}</div>
diff --git a/packages/opendesign/src/components/input/__demo__/InputRound.vue b/packages/opendesign/src/components/input/__demo__/InputRound.vue
new file mode 100644
index 0000000000000000000000000000000000000000..94ad560565c5c41f631b2ce9a4dfa29673fd98da
--- /dev/null
+++ b/packages/opendesign/src/components/input/__demo__/InputRound.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { OInput } from '../index';
+import { ref } from 'vue';
+const val1 = ref('');
+
+const r = ref(12);
+const placeholder = 'please input';
+const onClick = () => {
+  if (r.value <= 0) {
+    r.value += 16;
+  } else {
+    r.value -= 2;
+  }
+};
+</script>
+<template>
+  <h4>Round</h4>
+  <section>
+    <div>
+      <p>round="pill"</p>
+      <section>
+        <OInput v-model="val1" :placeholder="placeholder" round="pill" size="small" />
+        <OInput v-model="val1" :placeholder="placeholder" round="pill" />
+        <OInput v-model="val1" :placeholder="placeholder" round="pill" size="large" />
+        <OInput v-model="val1" round="pill" size="small">
+          <template #prepend>+86</template>
+          <template #append>手机</template>
+        </OInput>
+        <OInput v-model="val1" round="pill">
+          <template #prepend>+86</template>
+          <template #append>手机</template>
+        </OInput>
+        <OInput v-model="val1" round="pill" size="large">
+          <template #prepend>+86</template>
+          <template #append>手机</template>
+        </OInput>
+      </section>
+    </div>
+    <div>
+      <p class="btn" @click="onClick">round="{{ r }}"</p>
+      <section>
+        <OInput v-model="val1" :placeholder="placeholder" :round="r + 'px'" size="small" />
+        <OInput v-model="val1" :placeholder="placeholder" :round="r + 'px'" />
+        <OInput v-model="val1" :placeholder="placeholder" :round="r + 'px'" size="large" />
+
+        <OInput v-model="val1" :round="r + 'px'" size="small">
+          <template #prepend>+86</template>
+          <template #append>手机</template>
+        </OInput>
+        <OInput v-model="val1" :round="r + 'px'">
+          <template #prepend>+86</template>
+          <template #append>手机</template>
+        </OInput>
+        <OInput v-model="val1" :round="r + 'px'" size="large">
+          <template #prepend>+86</template>
+          <template #append>手机</template>
+        </OInput>
+      </section>
+    </div>
+  </section>
+</template>
+<style lang="scss">
+.btn {
+  cursor: pointer;
+  user-select: none;
+}
+</style>
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index 3a970d9ff3238599e1a5996840f92e48ed09d208..76a127cab13e99fa6d86aedc9efad7e37db2c8f5 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -8,22 +8,22 @@
   font-size: var(--input-text-size);
   line-height: var(--input-text-height);
 }
-
 .o-input-wrap {
   display: flex;
   padding: var(--input-padding);
-  border-radius: var(--input-radius);
-  border: 1px solid var(--input-border);
-  background-color: var(--input-bg);
   width: 100%;
   overflow: hidden;
   position: relative;
+  border-radius: var(--input-radius);
+  border: 1px solid var(--input-bd);
+  background-color: var(--input-bg);
+
   &:hover {
-    border-color: var(--input-border-hover);
+    border-color: var(--input-bd-hover);
     background-color: var(--input-bg-hover);
   }
   &.is-focus {
-    border-color: var(--input-border-focus);
+    border-color: var(--input-bd-focus);
     background-color: var(--input-bg-focus);
   }
 
@@ -44,12 +44,16 @@
   cursor: inherit;
   background-color: transparent;
   display: inline-flex;
-  caret-color: var(--o-color-primary1);
+  // caret-color: var(--o-color-primary1);
   padding: 0;
   line-height: inherit;
   height: 100%;
   width: 100%;
   font-size: inherit;
+  min-width: 20px;
+  &::-webkit-input-placeholder {
+    color: var(--input-placeholder);
+  }
 }
 
 .o-input-clear {
@@ -80,8 +84,6 @@
   .o-input-wrap {
     color: var(--input-color-disabled);
     cursor: not-allowed;
-    border-color: var(--input-border-disabled);
-    background-color: var(--input-bg-disabled);
   }
 }
 
@@ -130,11 +132,11 @@
   border-left: 0;
   flex-shrink: 0;
   padding: var(--input-append-padding);
-  border-top-right-radius: var(--input-append-prepend-border-radius);
-  border-bottom-right-radius: var(--input-append-prepend-border-radius);
+  border-top-right-radius: var(--input-radius);
+  border-bottom-right-radius: var(--input-radius);
 }
 
-.o-input-auto-wrap {
+.o-input-input-wrap {
   position: relative;
 }
 .o-input-mirror {
@@ -155,76 +157,6 @@
   border-right: 0;
   flex-shrink: 0;
   padding: var(--input-prepend-padding);
-  border-top-left-radius: var(--input-append-prepend-border-radius);
-  border-bottom-left-radius: var(--input-append-prepend-border-radius);
-}
-.o-input-size-small {
-  --input-height: var(--input-height-s);
-  --input-text-size: var(--input-text-size-s);
-  --input-text-height: var(--input-text-height-s);
-  --input-append-prepend-border-radius: var(--input-radius-s);
-  --input-padding: 0 8px;
-  --input-radius: var(--input-radius-s);
-  --input-append-padding: 0 4px;
-  --input-prepend-padding: 0 4px;
-  &.o-input-shape-round {
-    --input-append-padding: 0 6px 0 4px;
-    --input-prepend-padding: 0 4px 0 6px;
-  }
-}
-.o-input-size-normal {
-  --input-height: var(--input-height-m);
-  --input-text-size: var(--input-text-size-m);
-  --input-text-height: var(--input-text-height-m);
-  --input-append-prepend-border-radius: var(--input-radius-m);
-  --input-padding: 0 12px;
-  --input-radius: var(--input-radius-m);
-  --input-append-padding: 0 8px;
-  --input-prepend-padding: 0 8px;
-  &.o-input-shape-round {
-    --input-append-padding: 0 12px 0 8px;
-    --input-prepend-padding: 0 8px 0 12px;
-  }
-}
-.o-input-size-large {
-  --input-height: var(--input-height-l);
-  --input-text-size: var(--input-text-size-l);
-  --input-text-height: var(--input-text-height-l);
-  --input-append-prepend-border-radius: var(--input-radius-l);
-  --input-padding: 0 16px;
-  --input-radius: var(--input-radius-l);
-  --input-append-padding: 0 12px;
-  --input-prepend-padding: 0 12px;
-  &.o-input-shape-round {
-    --input-append-padding: 0 16px 0 12px;
-    --input-prepend-padding: 0 12px 0 16px;
-  }
-}
-.o-input-shape-round {
-  --input-radius: 100px;
-  --input-append-prepend-border-radius: 100px;
-}
-.o-input-status-success {
-  --input-border: var(--input-border-success);
-  --input-border-hover: var(--input-border-success-hover);
-  --input-border-focus: var(--input-border-success-focus);
-  --input-bg: var(--input-bg-success);
-  --input-bg-hover: var(--input-bg-success-hover);
-  --input-bg-focus: var(--input-bg-success-focus);
-}
-.o-input-status-warning {
-  --input-border: var(--input-border-warning);
-  --input-border-hover: var(--input-border-warning-hover);
-  --input-border-focus: var(--input-border-warning-focus);
-  --input-bg: var(--input-bg-warning);
-  --input-bg-hover: var(--input-bg-warning-hover);
-  --input-bg-focus: var(--input-bg-warning-focus);
-}
-.o-input-status-error {
-  --input-border: var(--input-border-error);
-  --input-border-hover: var(--input-border-error-hover);
-  --input-border-focus: var(--input-border-error-focus);
-  --input-bg: var(--input-bg-error);
-  --input-bg-hover: var(--input-bg-error-hover);
-  --input-bg-focus: var(--input-bg-error-focus);
+  border-top-left-radius: var(--input-radius);
+  border-bottom-left-radius: var(--input-radius);
 }
diff --git a/packages/opendesign/src/components/input/style/var.scss b/packages/opendesign/src/components/input/style/var.scss
index b32fc21ee802b05449561529bc9d54c4039c73fe..d2cbce0e7fbc3b801902d25acbc33ba7946d5b65 100644
--- a/packages/opendesign/src/components/input/style/var.scss
+++ b/packages/opendesign/src/components/input/style/var.scss
@@ -1,57 +1,86 @@
 .o-input {
-  --input-text-size-s: var(--o-font_size-tip1);
-  --input-text-height-s: var(--o-line_height-tip1);
-  --input-text-size-m: var(--o-font_size-text);
-  --input-text-height-m: var(--o-line_height-text);
-  --input-text-size-l: var(--o-font_size-h4);
-  --input-text-height-l: var(--o-line_height-h4);
-
-  --input-height-s: var(--o-size-s);
-  --input-height-m: var(--o-size-m);
-  --input-height-l: var(--o-size-l);
-
-  --input-radius-s: var(--o-radius-s);
-  --input-radius-m: var(--o-radius-s);
-  --input-radius-l: var(--o-radius-s);
-
-  --input-border: var(--o-color-info1);
-  --input-border-hover: var(--o-color-primary2);
-  --input-border-focus: var(--o-color-primary3);
-  --input-border-disabled: var(--o-color-info1);
-
-  --input-bg: var(--o-color-bg1);
-  --input-bg-hover: var(--o-color-bg3);
-  --input-bg-focus: var(--o-color-bg3);
-  --input-bg-disabled: var(--o-color-info4);
-
+  --input-placeholder: var(--o-color-text4);
   --input-color: var(--o-color-text2);
   --input-color-disabled: var(--o-color-text4);
 
-  --input-icon-color: var(--o-color-text3);
-  --input-icon-color-hover: var(--o-color-primary1);
-  --input-icon-bg: var(--o-color-bg4);
-
-  --input-border-success: var(--o-color-success1);
-  --input-border-success-hover: var(--o-color-success2);
-  --input-border-success-focus: var(--o-color-success3);
-  --input-border-warning: var(--o-color-warning1);
-  --input-border-warning-hover: var(--o-color-warning2);
-  --input-border-warning-focus: var(--o-color-warning3);
-  --input-border-error: var(--o-color-danger1);
-  --input-border-error-hover: var(--o-color-danger2);
-  --input-border-error-focus: var(--o-color-danger3);
-
-  --input-bg-success: var(--o-color-bg1);
-  --input-bg-success-hover: var(--o-color-bg1);
-  --input-bg-success-focus: var(--o-color-bg1);
-  --input-bg-warning: var(--o-color-bg1);
-  --input-bg-warning-hover: var(--o-color-bg1);
-  --input-bg-warning-focus: var(--o-color-bg1);
-  --input-bg-error: var(--o-color-bg1);
-  --input-bg-error-hover: var(--o-color-bg1);
-  --input-bg-error-focus: var(--o-color-bg1);
-
-  --input-color-success: var(--o-color-text2);
-  --input-color-warning: var(--o-color-text2);
-  --input-color-error: var(--o-color-text2);
+  --input-bg: var(--o-color-bg2);
+  --input-bg-hover: var(--o-color-bg2);
+  --input-bg-focus: var(--o-color-bg2);
+}
+.o-input-size-small {
+  --input-height: var(--o-size-s);
+  --input-text-size: var(--o-font_size-tip1);
+  --input-text-height: var(--o-line_height-tip1);
+
+  --input-padding: 0 8px;
+  --input-append-padding: 0 4px;
+  --input-prepend-padding: 0 4px;
+  --input-radius: var(--o-radius-s);
+  &.o-input-round-pill {
+    --input-append-padding: 0 6px 0 4px;
+    --input-prepend-padding: 0 4px 0 6px;
+  }
+}
+.o-input-size-medium {
+  --input-height: var(--o-size-m);
+  --input-text-size: var(--o-font_size-text);
+  --input-text-height: var(--o-line_height-text);
+
+  --input-padding: 0 12px;
+  --input-append-padding: 0 8px;
+  --input-prepend-padding: 0 8px;
+  --input-radius: var(--o-radius-m);
+
+  &.o-input-round-pill {
+    --input-append-padding: 0 12px 0 8px;
+    --input-prepend-padding: 0 8px 0 12px;
+  }
+}
+.o-input-size-large {
+  --input-height: var(--o-size-l);
+  --input-text-size: var(--o-font_size-h4);
+  --input-text-height: var(--o-font_size-h4);
+
+  --input-padding: 0 16px;
+  --input-append-padding: 0 12px;
+  --input-prepend-padding: 0 12px;
+  --input-radius: var(--o-radius-l);
+  &.o-input-round-pill {
+    --input-append-padding: 0 16px 0 12px;
+    --input-prepend-padding: 0 12px 0 16px;
+  }
+}
+
+.o-input-round-pill {
+  --input-radius: var(--o-size-l);
+}
+
+.o-input-normal {
+  --input-bd: var(--o-color-normal1);
+  --input-bd-hover: var(--o-color-normal2);
+  --input-bd-focus: var(--o-color-normal2);
+}
+.o-input-success {
+  --input-bd: var(--o-color-success4);
+  --input-bd-hover: var(--o-color-success1);
+  --input-bd-focus: var(--o-color-success1);
+}
+.o-input-warning {
+  --input-bd: var(--o-color-warning4);
+  --input-bd-hover: var(--o-color-warning1);
+  --input-bd-focus: var(--o-color-warning1);
+}
+.o-input-danger {
+  --input-bd: var(--o-color-danger4);
+  --input-bd-hover: var(--o-color-danger1);
+  --input-bd-focus: var(--o-color-danger1);
+}
+.o-input-disabled {
+  --input-bd: var(--o-color-normal1);
+  --input-bd-hover: var(--o-color-normal1);
+  --input-bd-focus: var(--o-color-normal1);
+
+  --input-bg: var(--o-color-normal4);
+  --input-bg-hover: var(--o-color-normal4);
+  --input-bg-focus: var(--o-color-normal4);
 }
diff --git a/packages/opendesign/src/components/input/types.ts b/packages/opendesign/src/components/input/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f03e64bbcc7cd72788cfa6a680baa5e92c05d9cd
--- /dev/null
+++ b/packages/opendesign/src/components/input/types.ts
@@ -0,0 +1,103 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { SizeT, ShapeT, ColorT, RoundT } from '../_shared/global';
+
+export const inputPorps = {
+  /**
+   * 下拉框的值
+   * v-model
+   */
+  modelValue: {
+    type: [String, Number] as PropType<string | number>,
+  },
+  /**
+   * 下拉框的默认值
+   * 非受控
+   */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /**
+   * 大小
+   */
+  size: {
+    type: String as PropType<SizeT>,
+  },
+  /**
+   * 形状
+   */
+  shape: {
+    type: String as PropType<ShapeT>,
+  },
+  /**
+   * 圆角值
+   */
+  round: {
+    type: String as PropType<RoundT>
+  },
+  /**
+   * 颜色类型：ColorT
+   */
+  color: {
+    type: String as PropType<ColorT>,
+    default: 'normal'
+  },
+  /**
+   * 提示文本
+   */
+  placeholder: {
+    type: String,
+  },
+  /**
+   * 状态，显示指定，用于非表单场景
+   */
+  status: {
+    type: String as PropType<'success' | 'warning' | 'error'>,
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+  },
+  /**
+   * 是否只读
+   */
+  readonly: {
+    type: Boolean,
+  },
+  /**
+   * 是否可以清除
+   */
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否自动增加宽度
+   */
+  autoWidth: {
+    type: Boolean,
+  },
+  /**
+   * 是否是密码输入
+   */
+  type: {
+    type: String as PropType<'text' | 'password'>,
+    default: 'text'
+  },
+  /**
+   * 解析输入框的值
+   */
+  parse: {
+    type: Function as PropType<(value: string) => string>,
+  },
+  /**
+   * 对值格式化，控制显示格式
+   * 需搭配parse处理，保证值的正确性
+   */
+  format: {
+    type: Function as PropType<(value: string | number) => string | number>,
+  },
+};
+
+export type InputPorpsT = ExtractPropTypes<typeof inputPorps>;
diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css
index 6054226e4cdb7fa63910710ff72fb2f4dfe20c5b..b5711226a8c97e665bbcfb2d67c3f563e6b54653 100644
--- a/packages/opendesign/src/components/style/dark.token.css
+++ b/packages/opendesign/src/components/style/dark.token.css
@@ -14,6 +14,55 @@
    * @description 用于按钮、文本、链接强调状态时悬浮颜色
    */
   --o-color-primary2: #5988ff;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group primary
+   * @description 用于按钮、文本、链接强调状态时聚焦颜色
+   */
+  --o-color-primary3: #002fa7;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group primary
+   * @description 用于按钮、文本、链接强调状态时禁用颜色
+   */
+  --o-color-primary4: #0c2360;
+  /**
+   * @name 常规色
+   * @type color
+   * @group major
+   * @description 用于按钮、文本、链接major状态时文本颜色
+   */
+  --o-color-major1: #feb32a;
+  /**
+   * @name 常规色
+   * @type color
+   * @group normal
+   * @description 用于按钮、文本、链接常态时常规颜色
+   */
+  --o-color-normal1: var(--o-color-info1);
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group normal
+   * @description 用于按钮、文本、链接常态时悬浮颜色
+   */
+  --o-color-normal2: var(--o-color-primary2);
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group normal
+   * @description 用于按钮、文本、链接常态时聚焦颜色
+   */
+  --o-color-normal3: var(--o-color-primary3);
+  /**
+   * @name 禁用色
+   * @type color
+   * @group normal
+   * @description 用于按钮、文本、链接常态时禁用颜色
+   */
+  --o-color-normal4: var(--o-color-info4);
   /**
    * @name 常规色
    * @type color
@@ -112,6 +161,13 @@
    * @description 用于按钮、文本、链接信息状态时悬浮颜色
    */
   --o-color-info2: #2e2e2e;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group info
+   * @description 用于按钮、文本、链接信息状态时聚焦颜色
+   */
+  --o-color-info3: #1e1e1e;
   /**
    * @name 禁用色
    * @type color
@@ -126,6 +182,13 @@
    * @description 用于页面整体背景色
    */
   --o-color-bg1: #121212;
+  /**
+   * @name 二级容器背景色
+   * @type color
+   * @group background
+   * @description 用于区块、卡片、弹出框、tooltip背景色
+   */
+  --o-color-bg2: #1e1e1e;
   /**
    * @name 三级容器背景色
    * @type color
@@ -154,6 +217,13 @@
    * @description 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题
    */
   --o-color-text1-inverse: #000000;
+  /**
+   * @name 正文色
+   * @type color
+   * @group text
+   * @description 用于次强调、次级标题、正文颜色
+   */
+  --o-color-text2: #e5e5e5;
   /**
    * @name 正文反色
    * @type color
@@ -161,6 +231,13 @@
    * @description 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文
    */
   --o-color-text2-inverse: #3f3f3f;
+  /**
+   * @name 提示色
+   * @type color
+   * @group text
+   * @description 用于提示文本颜色
+   */
+  --o-color-text3: #b2b2b2;
   /**
    * @name 提示反色
    * @type color
@@ -203,6 +280,20 @@
    * @description 用于分隔线颜色
    */
   --o-color-division1: #b2b2b2;
+  /**
+   * @name 遮罩色1
+   * @type color
+   * @group mask
+   * @description 用于弹窗遮罩色
+   */
+  --o-color-mask1: rgba(0, 0, 0, 0.5);
+  /**
+   * @name 遮罩色2
+   * @type color
+   * @group mask
+   * @description 用于loading遮罩色
+   */
+  --o-color-mask2: rgba(0, 0, 0, 0.1);
   /**
    * @name 阴影1
    * @type shadow
@@ -489,21 +580,21 @@
    * @group radius
    * @description 大尺寸圆角
    */
-  --o-radius-l: 16px;
+  --o-radius-l: 8px;
   /**
    * @name 中尺寸圆角
    * @type size
    * @group radius
    * @description 中尺寸圆角
    */
-  --o-radius-m: 8px;
+  --o-radius-m: 4px;
   /**
    * @name 小尺寸圆角
    * @type size
    * @group radius
    * @description 小尺寸圆角
    */
-  --o-radius-s: 4px;
+  --o-radius-s: 2px;
   /**
    * @name 持续时间
    * @type animation
diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css
index 0677d8d0f6b491907cc66ab29735325594c514ef..6985f044064d6db9ee77eeb667be9d6fa950bc59 100644
--- a/packages/opendesign/src/components/style/default-light.token.css
+++ b/packages/opendesign/src/components/style/default-light.token.css
@@ -36,6 +36,34 @@
    * @description 用于按钮、文本、链接major状态时文本颜色
    */
   --o-color-major1: #feb32a;
+  /**
+   * @name 常规色
+   * @type color
+   * @group normal
+   * @description 用于按钮、文本、链接常态时常规颜色
+   */
+  --o-color-normal1: var(--o-color-info1);
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group normal
+   * @description 用于按钮、文本、链接常态时悬浮颜色
+   */
+  --o-color-normal2: var(--o-color-primary2);
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group normal
+   * @description 用于按钮、文本、链接常态时聚焦颜色
+   */
+  --o-color-normal3: var(--o-color-primary3);
+  /**
+   * @name 禁用色
+   * @type color
+   * @group normal
+   * @description 用于按钮、文本、链接常态时禁用颜色
+   */
+  --o-color-normal4: var(--o-color-info4);
   /**
    * @name 常规色
    * @type color
@@ -553,21 +581,21 @@
    * @group radius
    * @description 大尺寸圆角
    */
-  --o-radius-l: 16px;
+  --o-radius-l: 8px;
   /**
    * @name 中尺寸圆角
    * @type size
    * @group radius
    * @description 中尺寸圆角
    */
-  --o-radius-m: 8px;
+  --o-radius-m: 4px;
   /**
    * @name 小尺寸圆角
    * @type size
    * @group radius
    * @description 小尺寸圆角
    */
-  --o-radius-s: 4px;
+  --o-radius-s: 2px;
   /**
    * @name 持续时间
    * @type animation
diff --git a/packages/opendesign/src/components/table/style/index.ts b/packages/opendesign/src/components/table/style/index.ts
index 6bc955b97aa166fe766467fdded425b0e4437895..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/table/style/index.ts
+++ b/packages/opendesign/src/components/table/style/index.ts
@@ -1,3 +1,2 @@
 import '../../style';
-import '../../pagination/style';
 import './index.scss';
diff --git a/packages/opendesign/src/icons/svgs/stroke/add.svg b/packages/opendesign/src/icons/svgs/fill/add.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/add.svg
rename to packages/opendesign/src/icons/svgs/fill/add.svg
diff --git a/packages/opendesign/src/icons/svgs/stroke/chevron-down.svg b/packages/opendesign/src/icons/svgs/fill/chevron-down.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/chevron-down.svg
rename to packages/opendesign/src/icons/svgs/fill/chevron-down.svg
diff --git a/packages/opendesign/src/icons/svgs/stroke/chevron-left.svg b/packages/opendesign/src/icons/svgs/fill/chevron-left.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/chevron-left.svg
rename to packages/opendesign/src/icons/svgs/fill/chevron-left.svg
diff --git a/packages/opendesign/src/icons/svgs/stroke/chevron-right.svg b/packages/opendesign/src/icons/svgs/fill/chevron-right.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/chevron-right.svg
rename to packages/opendesign/src/icons/svgs/fill/chevron-right.svg
diff --git a/packages/opendesign/src/icons/svgs/stroke/chevron-up.svg b/packages/opendesign/src/icons/svgs/fill/chevron-up.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/chevron-up.svg
rename to packages/opendesign/src/icons/svgs/fill/chevron-up.svg
diff --git a/packages/opendesign/src/icons/svgs/stroke/done.svg b/packages/opendesign/src/icons/svgs/fill/done.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/done.svg
rename to packages/opendesign/src/icons/svgs/fill/done.svg
diff --git a/packages/opendesign/src/icons/svgs/stroke/ellipsis.svg b/packages/opendesign/src/icons/svgs/fill/ellipsis.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/ellipsis.svg
rename to packages/opendesign/src/icons/svgs/fill/ellipsis.svg
diff --git a/packages/opendesign/src/icons/svgs/stroke/filter.svg b/packages/opendesign/src/icons/svgs/fill/filter.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/filter.svg
rename to packages/opendesign/src/icons/svgs/fill/filter.svg
diff --git a/packages/opendesign/src/icons/svgs/stroke/loading.svg b/packages/opendesign/src/icons/svgs/fill/loading.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/loading.svg
rename to packages/opendesign/src/icons/svgs/fill/loading.svg
diff --git a/packages/opendesign/src/icons/svgs/stroke/minus.svg b/packages/opendesign/src/icons/svgs/fill/minus.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/minus.svg
rename to packages/opendesign/src/icons/svgs/fill/minus.svg
diff --git a/packages/opendesign/src/icons/svgs/stroke/refresh.svg b/packages/opendesign/src/icons/svgs/fill/refresh.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/refresh.svg
rename to packages/opendesign/src/icons/svgs/fill/refresh.svg
diff --git a/packages/opendesign/src/icons/svgs/stroke/search.svg b/packages/opendesign/src/icons/svgs/fill/search.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/search.svg
rename to packages/opendesign/src/icons/svgs/fill/search.svg
diff --git a/packages/opendesign/src/icons/svgs/stroke/x.svg b/packages/opendesign/src/icons/svgs/fill/x.svg
similarity index 100%
rename from packages/opendesign/src/icons/svgs/stroke/x.svg
rename to packages/opendesign/src/icons/svgs/fill/x.svg
diff --git a/packages/opendesign/src/tokens/tokens.json b/packages/opendesign/src/tokens/tokens.json
index fe7e48fec09deb9667c9dedcfc9a0282682608c0..6d7dadb1b74a01f880d9b56c3eff39d06f6dd8e3 100644
--- a/packages/opendesign/src/tokens/tokens.json
+++ b/packages/opendesign/src/tokens/tokens.json
@@ -28,7 +28,7 @@
         "description": "用于按钮、文本、链接强调状态时聚焦颜色",
         "value": {
           "light": "#00288d",
-          "'dark": "#002fa7"
+          "dark": "#002fa7"
         }
       },
       {
@@ -37,7 +37,7 @@
         "description": "用于按钮、文本、链接强调状态时禁用颜色",
         "value": {
           "light": "#b2c0e4",
-          "'dark": "#0c2360"
+          "dark": "#0c2360"
         }
       }
     ]
@@ -53,7 +53,50 @@
         "description": "用于按钮、文本、链接major状态时文本颜色",
         "value": {
           "light": "#feb32a",
-          "'dark": "#feb32a"
+          "dark": "#feb32a"
+        }
+      }
+    ]
+  },
+  "normal": {
+    "name": "常态色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-normal1",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接常态时常规颜色",
+        "value": {
+          "light": "var(--o-color-info1)",
+          "dark": "var(--o-color-info1)"
+        }
+      },
+      {
+        "key": "color-normal2",
+        "name": "悬浮色",
+        "description": "用于按钮、文本、链接常态时悬浮颜色",
+        "value": {
+          "light": "var(--o-color-primary2)",
+          "dark": "var(--o-color-primary2)"
+        }
+      },
+      {
+        "key": "color-normal3",
+        "name": "聚焦色",
+        "description": "用于按钮、文本、链接常态时聚焦颜色",
+        "value": {
+          "light": "var(--o-color-primary3)",
+          "dark": "var(--o-color-primary3)"
+        }
+      },
+      {
+        "key": "color-normal4",
+        "name": "禁用色",
+        "description": "用于按钮、文本、链接常态时禁用颜色",
+        "value": {
+          "light": "var(--o-color-info4)",
+          "dark": "var(--o-color-info4)"
         }
       }
     ]
@@ -216,7 +259,7 @@
         "description": "用于按钮、文本、链接信息状态时聚焦颜色",
         "value": {
           "light": "#cccccc",
-          "'dark": "#1e1e1e"
+          "dark": "#1e1e1e"
         }
       },
       {
@@ -250,7 +293,7 @@
         "description": "用于区块、卡片、弹出框、tooltip背景色",
         "value": {
           "light": "#ffffff",
-          "'dark": "#1e1e1e"
+          "dark": "#1e1e1e"
         }
       },
       {
@@ -302,7 +345,7 @@
         "description": "用于次强调、次级标题、正文颜色",
         "value": {
           "light": "#3f3f3f",
-          "'dark": "#e5e5e5"
+          "dark": "#e5e5e5"
         }
       },
       {
@@ -320,7 +363,7 @@
         "description": "用于提示文本颜色",
         "value": {
           "light": "#707070",
-          "'dark": "#b2b2b2"
+          "dark": "#b2b2b2"
         }
       },
       {
@@ -404,7 +447,7 @@
         "description": "用于弹窗遮罩色",
         "value": {
           "light": "rgba(0, 0, 0, 0.5)",
-          "'dark": "rgba(0, 0, 0, 0.5)"
+          "dark": "rgba(0, 0, 0, 0.5)"
         }
       },
       {
@@ -413,7 +456,7 @@
         "description": "用于loading遮罩色",
         "value": {
           "light": "rgba(0, 0, 0, 0.1)",
-          "'dark": "rgba(0, 0, 0, 0.1)"
+          "dark": "rgba(0, 0, 0, 0.1)"
         }
       }
     ]
@@ -830,8 +873,8 @@
         "name": "大尺寸圆角",
         "description": "大尺寸圆角",
         "value": {
-          "light": "16px",
-          "dark": "16px"
+          "light": "8px",
+          "dark": "8px"
         }
       },
       {
@@ -839,8 +882,8 @@
         "name": "中尺寸圆角",
         "description": "中尺寸圆角",
         "value": {
-          "light": "8px",
-          "dark": "8px"
+          "light": "4px",
+          "dark": "4px"
         }
       },
       {
@@ -848,8 +891,8 @@
         "name": "小尺寸圆角",
         "description": "小尺寸圆角",
         "value": {
-          "light": "4px",
-          "dark": "4px"
+          "light": "2px",
+          "dark": "2px"
         }
       }
     ]
diff --git a/packages/portal/src/App.vue b/packages/portal/src/App.vue
index ebb7d14da20ba89072fbda30d2d214cdfa2b71e9..23013dd56f78f998ad543410c172804e5be95c72 100644
--- a/packages/portal/src/App.vue
+++ b/packages/portal/src/App.vue
@@ -38,6 +38,6 @@ body {
   margin-top: var(--app-header-height);
   margin-left: var(--app-aside-width);
   min-height: calc(100vh - 48px);
-  background-color: var(--o-color-bg1);
+  // background-color: var(--o-color-bg1);
 }
 </style>
diff --git a/packages/portal/src/pages/TheIcons.vue b/packages/portal/src/pages/TheIcons.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0b521627415e8f02ad00e5a66c7f9739d56375ad
--- /dev/null
+++ b/packages/portal/src/pages/TheIcons.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import * as OIcons from '@components/icons';
+import '@components/style';
+import { shallowRef } from 'vue';
+console.log(OIcons);
+
+const stokes = shallowRef<any[]>([]);
+const fills = shallowRef<any[]>([]);
+const colors = shallowRef<any[]>([]);
+Object.keys(OIcons).forEach((k) => {
+  const c = OIcons[k];
+  if (c.svgType === 'stroke') {
+    stokes.value.push(c);
+  } else if (c.svgType === 'fill') {
+    fills.value.push(c);
+  } else {
+    colors.value.push(c);
+  }
+});
+</script>
+<template>
+  <div class="page-demo">
+    <h4>Stoke</h4>
+    <div class="icon-list">
+      <div v-for="icon in stokes" :key="icon" class="icon-item">
+        <component
+          :is="icon"
+          :class="{
+            'o-rotating': icon.name === 'IconLoading',
+          }"
+        />
+        <div class="icon-name">{{ icon.name }}</div>
+      </div>
+    </div>
+
+    <h4>Fill</h4>
+    <div class="icon-list">
+      <div v-for="icon in fills" :key="icon" class="icon-item">
+        <component
+          :is="icon"
+          :class="{
+            'o-rotating': icon.name === 'IconLoading',
+          }"
+        />
+        <div class="icon-name">{{ icon.name }}</div>
+      </div>
+    </div>
+
+    <h4>Color</h4>
+    <div class="icon-list">
+      <div v-for="icon in colors" :key="icon" class="icon-item">
+        <component
+          :is="icon"
+          :class="{
+            'o-rotating': icon.name === 'IconLoading',
+          }"
+        />
+        <div class="icon-name">{{ icon.name }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.icon-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.icon-item {
+  color: #000;
+  font-size: 32px;
+  width: 140px;
+  border: 1px solid #ccc;
+  text-align: center;
+  margin: 4px;
+  padding: 8px;
+  > svg {
+    margin: 16px;
+    stroke-width: 1px;
+  }
+}
+.icon-name {
+  font-size: 16px;
+  word-wrap: break-word;
+}
+</style>
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 3cf315c75e3a4b05383701247d74f0d6e1dfcad7..7a7b826164a5dd6f106217233d080557092db3ff 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -8,120 +8,126 @@ export const routes = [
     label: '首页',
     component: TheHome,
   },
+  {
+    path: '/icons',
+    name: 'Icons',
+    label: '图标',
+    component: () => import('./pages/TheIcons.vue'),
+  },
   {
     path: '/button',
     name: 'Button',
     label: '按钮',
-    component: () => import('@demo/button/__demo__/IndexBtn.vue'),
+    component: () => import('@components/button/__demo__/IndexBtn.vue'),
   },
   {
     path: '/link',
     name: 'Link',
     label: '链接',
-    component: () => import('@demo/link/__demo__/IndexLink.vue'),
+    component: () => import('@components/link/__demo__/IndexLink.vue'),
   },
 
   {
     path: '/switch',
     name: 'Switch',
     label: '开关',
-    component: () => import('@demo/switch/__demo__/IndexSwitch.vue'),
+    component: () => import('@components/switch/__demo__/IndexSwitch.vue'),
   },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
     label: 'resize监听',
-    component: () => import('@demo/resize-observer/__demo__/IndexResize.vue'),
+    component: () => import('@components/resize-observer/__demo__/IndexResize.vue'),
   },
   {
     path: '/intersection-observer',
     name: 'IntersectionObserver',
     label: 'Intersection监听',
-    component: () => import('@demo/intersection-observer/__demo__/IndexIntersection.vue'),
+    component: () => import('@components/intersection-observer/__demo__/IndexIntersection.vue'),
   },
   {
     path: '/child-only',
     name: 'ChildOnly',
     label: '只渲染一个子元素',
-    component: () => import('@demo/child-only/__demo__/IndexChildOnly.vue'),
+    component: () => import('@components/child-only/__demo__/IndexChildOnly.vue'),
   },
   {
     path: '/popup',
     name: 'Popup',
     label: '弹层',
-    component: () => import('@demo/popup/__demo__/IndexPopup.vue'),
+    component: () => import('@components/popup/__demo__/IndexPopup.vue'),
   },
   {
     path: '/popover',
     name: 'Popover',
     label: '弹出框',
-    component: () => import('@demo/popover/__demo__/IndexPopover.vue'),
+    component: () => import('@components/popover/__demo__/IndexPopover.vue'),
   },
   {
     path: '/input',
     name: 'Input',
     label: '输入框',
-    component: () => import('@demo/input/__demo__/IndexInput.vue'),
+    component: () => import('@components/input/__demo__/IndexInput.vue'),
   },
   {
     path: '/input-number',
     name: 'InputNumber',
     label: '数字输入框',
-    component: () => import('@demo/input-number/__demo__/IndexInputNumber.vue'),
+    component: () => import('@components/input-number/__demo__/IndexInputNumber.vue'),
   },
   {
     path: '/textarea',
     name: 'Textarea',
     label: '文本域',
-    component: () => import('@demo/textarea/__demo__/IndexTextarea.vue'),
+    component: () => import('@components/textarea/__demo__/IndexTextarea.vue'),
   },
   {
     path: '/select',
     name: 'Select',
     label: '下拉框',
-    component: () => import('@demo/select/__demo__/IndexSelect.vue'),
+    component: () => import('@components/select/__demo__/IndexSelect.vue'),
   },
   {
     path: '/radio',
     name: 'Radio',
     label: '单选',
-    component: () => import('@demo/radio/__demo__/IndexRadio.vue'),
+    component: () => import('@components/radio/__demo__/IndexRadio.vue'),
   },
   {
     path: '/checkbox',
     name: 'Checkbox',
     label: '多选',
-    component: () => import('@demo/checkbox/__demo__/IndexCheckbox.vue'),
+    component: () => import('@components/checkbox/__demo__/IndexCheckbox.vue'),
   },
   {
     path: '/tabs',
     name: 'Tabs',
     label: '标签页',
-    component: () => import('@demo/tabs/__demo__/IndexTabs.vue'),
+    component: () => import('@components/tabs/__demo__/IndexTabs.vue'),
   },
   {
     path: '/table',
     name: 'Table',
     label: '表格',
-    component: () => import('@demo/table/__demo__/IndexTable.vue'),
+    component: () => import('@components/table/__demo__/IndexTable.vue'),
   },
   {
     path: '/pagination',
     name: 'Pagination',
     label: '分页',
-    component: () => import('@demo/pagination/__demo__/IndexPagination.vue'),
+    component: () => import('@components/pagination/__demo__/IndexPagination.vue'),
   },
   {
     path: '/divider',
     name: 'Divider',
     label: '分割线',
-    component: () => import('@demo/divider/__demo__/IndexDivider.vue'),
+    component: () => import('@components/divider/__demo__/IndexDivider.vue'),
   },
   {
     path: '/tag',
     name: 'Tag',
     label: '标签',
-    component: () => import('@demo/tag/__demo__/IndexTag.vue'),
+    component: () => import('@components/tag/__demo__/IndexTag.vue'),
   },
 ];
 
diff --git a/packages/portal/vite.config.ts b/packages/portal/vite.config.ts
index 597e4b93ccb0ea80b2bdd98a22e630a877ba62f1..6a09736603bf05fb03d1a07ffc84c82929daa112 100644
--- a/packages/portal/vite.config.ts
+++ b/packages/portal/vite.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@/': `${path.resolve(__dirname, './src')}/`,
-      '@demo': path.resolve(__dirname, '../opendesign/src/components'),
+      '@components': path.resolve(__dirname, '../opendesign/src/components'),
     },
   },
 });
diff --git a/packages/scripts/src/gen-icons/config.ts b/packages/scripts/src/gen-icons/config.ts
index 38ae7dcde6ff1cec8ec805d4ee4a43e6eeca8edf..27921adda06684c521f1e5e73dc8ba0108e9a32f 100644
--- a/packages/scripts/src/gen-icons/config.ts
+++ b/packages/scripts/src/gen-icons/config.ts
@@ -27,6 +27,8 @@ const svgoConfig: Config = {
       params: {
         attrs: [
           'class',
+          'path:fill:currentColor',
+          'path:stroke:currentColor'
         ],
       },
     },
@@ -46,6 +48,7 @@ const template = ({ name, componentName, svg, type }: { name: string, componentN
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: '${componentName}',
+  svgType: '${type}',
   setup() {
     const classnames = ['o-icon', '${name}', 'type-${type}'];
     return {
diff --git a/packages/scripts/src/gen-tokens/index.ts b/packages/scripts/src/gen-tokens/index.ts
index c4a87c6ca93bb42837282661e056c57a78a67208..cf373deca88ad2793c678dca376f362d6f999579 100644
--- a/packages/scripts/src/gen-tokens/index.ts
+++ b/packages/scripts/src/gen-tokens/index.ts
@@ -195,7 +195,7 @@ function generateCodeSnippets(tokens: Record<string, FlatTokenT>, outFile: strin
 
     snippets[tokenKey] = {
       prefix: [tokenKey],
-      body: `var(${tokenKey})`,
+      body: tokenKey,
       description: desc,
       scope: 'css,scss,less'
     };