diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets
index fa7f59cb7c136f55b2931408a6c1bd809fc52029..a9a68ebf0b4cccc8943657497d40332bc71b6271 100644
--- a/.vscode/opendesign.token.code-snippets
+++ b/.vscode/opendesign.token.code-snippets
@@ -1,4 +1,20 @@
 {
+  "--o-color-white": {
+    "prefix": [
+      "var(--o-color-white)"
+    ],
+    "body": "var(--o-color-white)",
+    "description": "[light: 255, 255, 255, dark: 255, 255, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-black": {
+    "prefix": [
+      "var(--o-color-black)"
+    ],
+    "body": "var(--o-color-black)",
+    "description": "[light: 0, 0, 0, dark: 0, 0, 0]",
+    "scope": "css,scss,less"
+  },
   "--o-blue-1": {
     "prefix": [
       "var(--o-blue-1)"
@@ -671,12 +687,20 @@
     "description": "四级填充/禁用[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-4))]",
     "scope": "css,scss,less"
   },
+  "--o-color-control-light": {
+    "prefix": [
+      "var(--o-color-control-light)"
+    ],
+    "body": "var(--o-color-control-light)",
+    "description": "很浅背景[light: rgb(var(--o-gray-1)), dark: rgb(var(--o-gray-1))]",
+    "scope": "css,scss,less"
+  },
   "--o-color-control1": {
     "prefix": [
       "var(--o-color-control1)"
     ],
     "body": "var(--o-color-control1)",
-    "description": "常规[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-3))]",
+    "description": "常规，常用于边框[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-3))]",
     "scope": "css,scss,less"
   },
   "--o-color-control2": {
@@ -708,7 +732,7 @@
       "var(--o-color-control1-light)"
     ],
     "body": "var(--o-color-control1-light)",
-    "description": "浅/控件常规[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-3))]",
+    "description": "常规-浅，常用于背景[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-3))]",
     "scope": "css,scss,less"
   },
   "--o-color-control2-light": {
@@ -716,7 +740,7 @@
       "var(--o-color-control2-light)"
     ],
     "body": "var(--o-color-control2-light)",
-    "description": "浅/控件悬浮[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-4))]",
+    "description": "悬浮-浅[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-4))]",
     "scope": "css,scss,less"
   },
   "--o-color-control3-light": {
@@ -724,7 +748,7 @@
       "var(--o-color-control3-light)"
     ],
     "body": "var(--o-color-control3-light)",
-    "description": "浅/控件激活[light: rgb(var(--o-mixedgray-5)), dark: rgb(var(--o-mixedgray-5))]",
+    "description": "激活-浅[light: rgb(var(--o-mixedgray-5)), dark: rgb(var(--o-mixedgray-5))]",
     "scope": "css,scss,less"
   },
   "--o-color-control4-light": {
@@ -732,7 +756,7 @@
       "var(--o-color-control4-light)"
     ],
     "body": "var(--o-color-control4-light)",
-    "description": "浅/控件禁用[light: rgb(var(--o-mixedgray-2)), dark: rgb(var(--o-mixedgray-2))]",
+    "description": "禁用-浅[light: rgb(var(--o-mixedgray-2)), dark: rgb(var(--o-mixedgray-2))]",
     "scope": "css,scss,less"
   },
   "--o-color-primary1": {
diff --git a/packages/docs/global.md b/packages/docs/global.md
index 08bd4deadf95f3bde030b94aa6d69e795a52f0ac..1e5d93e738d136a92049f43e0e2af9bbddd02a79 100644
--- a/packages/docs/global.md
+++ b/packages/docs/global.md
@@ -27,3 +27,9 @@
 # 变量定义都在 var.scss 里，同时使用最外层内定义；
 
 # 不同状态通过类改变变量值，而不是新定义多个变量；
+
+# 变量命名
+
+- 边框（bd） `--btn-bd: 1px solid var(--o-color-control1)`
+- 边框颜色（bd-color） `--btn-bd-color: var(--o-color-control1)`
+- 背景颜色（bg-color） `--btn-bg-color: var(--o-color-control1)`
diff --git a/packages/opendesign/src/components/button/OButton.vue b/packages/opendesign/src/components/button/OButton.vue
index ee2613676caed518ce760a161dacda1b2738e762..fe91c64799cd8576aa2a6f38347d02f56128b5be 100644
--- a/packages/opendesign/src/components/button/OButton.vue
+++ b/packages/opendesign/src/components/button/OButton.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { defaultSize } from '../_shared/global';
-import { buttonProps } from './types';
 import { IconLoading } from '../_shared/icons';
 import { getRoundClass } from '../_shared/style-class';
+import { buttonProps } from './types';
 
 const props = defineProps(buttonProps);
 
diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss
index 9032e6f6689e4deb3dbeb93d69d64504632458c6..4db5cd0305e19ac3bc1634af6ef5071de7a9d4fe 100644
--- a/packages/opendesign/src/components/button/style/index.scss
+++ b/packages/opendesign/src/components/button/style/index.scss
@@ -20,41 +20,41 @@
 
 .o-btn-outline {
   color: var(--btn-color);
-  border: 1px solid var(--btn-bd);
+  border: 1px solid var(--btn-bd-color);
   &:not(.o-btn-disabled) {
     &:hover {
       color: var(--btn-color-hover);
-      border: 1px solid var(--btn-bd-hover);
+      border: 1px solid var(--btn-bd-color-hover);
     }
 
     &:active {
       color: var(--btn-color-active);
-      border: 1px solid var(--btn-bd-active);
+      border: 1px solid var(--btn-bd-color-active);
     }
     &:focus-visible {
-      border: 1px solid var(--btn-bd-active);
+      border: 1px solid var(--btn-bd-color-active);
     }
   }
 }
 
 .o-btn-solid {
   color: var(--btn-color);
-  border: 1px solid var(--btn-bd);
-  background-color: var(--btn-bg);
+  border: 1px solid var(--btn-bd-color);
+  background-color: var(--btn-bg-color);
   &:not(.o-btn-disabled) {
     &:hover {
       color: var(--btn-color-hover);
-      border: 1px solid var(--btn-bd-hover);
-      background-color: var(--btn-bg-hover);
+      border: 1px solid var(--btn-bd-color-hover);
+      background-color: var(--btn-bg-color-hover);
     }
 
     &:active {
       color: var(--btn-color-active);
-      border: 1px solid var(--btn-bd-active);
-      background-color: var(--btn-bg-active);
+      border: 1px solid var(--btn-bd-color-active);
+      background-color: var(--btn-bg-color-active);
     }
     &:focus-visible {
-      border: 1px solid var(--btn-bd-active);
+      border: 1px solid var(--btn-bd-color-active);
     }
   }
 }
@@ -65,12 +65,12 @@
   &:not(.o-btn-disabled) {
     &:hover {
       color: var(--btn-color-hover);
-      background-color: var(--btn-bg-hover);
+      background-color: var(--btn-bg-color-hover);
     }
 
     &:active {
       color: var(--btn-color-active);
-      background-color: var(--btn-bg-active);
+      background-color: var(--btn-bg-color-active);
     }
   }
 }
diff --git a/packages/opendesign/src/components/button/style/var.scss b/packages/opendesign/src/components/button/style/var.scss
index 5ffb3c7a78045131722f5a59a8c3ce4e32815873..7617203b8662db06c8021717b2924edc9b2b7b18 100644
--- a/packages/opendesign/src/components/button/style/var.scss
+++ b/packages/opendesign/src/components/button/style/var.scss
@@ -3,29 +3,29 @@
   --btn-color-hover: var(--o-color-info1);
   --btn-color-active: var(--o-color-info1);
 
-  --btn-bd: var(--o-color-control1);
-  --btn-bd-hover: var(--o-color-control2);
-  --btn-bd-active: var(--o-color-control3);
+  --btn-bd-color: var(--o-color-control1);
+  --btn-bd-color-hover: var(--o-color-control2);
+  --btn-bd-color-active: var(--o-color-control3);
 
   &.o-btn-solid {
-    --btn-bg: var(--o-color-control1-light);
-    --btn-bg-hover: var(--o-color-control2-light);
-    --btn-bg-active: var(--o-color-control3-light);
+    --btn-bg-color: var(--o-color-control1-light);
+    --btn-bg-color-hover: var(--o-color-control2-light);
+    --btn-bg-color-active: var(--o-color-control3-light);
 
-    --btn-bd: var(--o-color-control1-light);
-    --btn-bd-hover: var(--o-color-control2-light);
-    --btn-bd-active: var(--o-color-control3-light);
+    --btn-bd-color: var(--o-color-control1-light);
+    --btn-bd-color-hover: var(--o-color-control2-light);
+    --btn-bd-color-active: var(--o-color-control3-light);
   }
 
   &.o-btn-text {
-    --btn-bg-hover: var(--o-color-control1-light);
-    --btn-bg-active: var(--o-color-control2-light);
+    --btn-bg-color-hover: var(--o-color-control1-light);
+    --btn-bg-color-active: var(--o-color-control2-light);
   }
 
   &.o-btn-disabled {
     --btn-color: var(--o-color-info4);
-    --btn-bg: var(--o-color-control4-light);
-    --btn-bd: var(--o-color-control4-light);
+    --btn-bg-color: var(--o-color-control4-light);
+    --btn-bd-color: var(--o-color-control4-light);
   }
 }
 .o-btn-primary {
@@ -33,29 +33,29 @@
   --btn-color-hover: var(--o-color-primary1);
   --btn-color-active: var(--o-color-primary1);
 
-  --btn-bd: var(--o-color-primary1);
-  --btn-bd-hover: var(--o-color-primary2);
-  --btn-bd-active: var(--o-color-primary3);
+  --btn-bd-color: var(--o-color-primary1);
+  --btn-bd-color-hover: var(--o-color-primary2);
+  --btn-bd-color-active: var(--o-color-primary3);
 
   &.o-btn-solid {
-    --btn-bg: var(--o-color-primary1);
-    --btn-bg-hover: var(--o-color-primary2);
-    --btn-bg-active: var(--o-color-primary3);
+    --btn-bg-color: var(--o-color-primary1);
+    --btn-bg-color-hover: var(--o-color-primary2);
+    --btn-bg-color-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);
+    --btn-bd-color: var(--o-color-primary1);
+    --btn-bd-color-hover: var(--o-color-primary2);
+    --btn-bd-color-active: var(--o-color-primary3);
   }
 
   &.o-btn-text {
-    --btn-bg-hover: var(--o-color-primary1-light);
-    --btn-bg-active: var(--o-color-primary2-light);
+    --btn-bg-color-hover: var(--o-color-primary1-light);
+    --btn-bg-color-active: var(--o-color-primary2-light);
   }
 
   &.o-btn-disabled {
     --btn-color: var(--o-color-primary4);
-    --btn-bg: var(--o-color-primary4);
-    --btn-bd: var(--o-color-primary4);
+    --btn-bg-color: var(--o-color-primary4);
+    --btn-bd-color: var(--o-color-primary4);
   }
 }
 .o-btn-success {
@@ -63,29 +63,29 @@
   --btn-color-hover: var(--o-color-success1);
   --btn-color-active: var(--o-color-success1);
 
-  --btn-bd: var(--o-color-success1);
-  --btn-bd-hover: var(--o-color-success2);
-  --btn-bd-active: var(--o-color-success3);
+  --btn-bd-color: var(--o-color-success1);
+  --btn-bd-color-hover: var(--o-color-success2);
+  --btn-bd-color-active: var(--o-color-success3);
 
   &.o-btn-solid {
-    --btn-bg: var(--o-color-success1);
-    --btn-bg-hover: var(--o-color-success2);
-    --btn-bg-active: var(--o-color-success3);
+    --btn-bg-color: var(--o-color-success1);
+    --btn-bg-color-hover: var(--o-color-success2);
+    --btn-bg-color-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);
+    --btn-bd-color: var(--o-color-success1);
+    --btn-bd-color-hover: var(--o-color-success2);
+    --btn-bd-color-active: var(--o-color-success3);
   }
 
   &.o-btn-text {
-    --btn-bg-hover: var(--o-color-success1-light);
-    --btn-bg-active: var(--o-color-success2-light);
+    --btn-bg-color-hover: var(--o-color-success1-light);
+    --btn-bg-color-active: var(--o-color-success2-light);
   }
 
   &.o-btn-disabled {
     --btn-color: var(--o-color-success4);
-    --btn-bg: var(--o-color-success4);
-    --btn-bd: var(--o-color-success4);
+    --btn-bg-color: var(--o-color-success4);
+    --btn-bd-color: var(--o-color-success4);
   }
 }
 .o-btn-warning {
@@ -93,29 +93,29 @@
   --btn-color-hover: var(--o-color-warning1);
   --btn-color-active: var(--o-color-warning1);
 
-  --btn-bd: var(--o-color-warning1);
-  --btn-bd-hover: var(--o-color-warning2);
-  --btn-bd-active: var(--o-color-warning3);
+  --btn-bd-color: var(--o-color-warning1);
+  --btn-bd-color-hover: var(--o-color-warning2);
+  --btn-bd-color-active: var(--o-color-warning3);
 
   &.o-btn-solid {
-    --btn-bg: var(--o-color-warning1);
-    --btn-bg-hover: var(--o-color-warning2);
-    --btn-bg-active: var(--o-color-warning3);
+    --btn-bg-color: var(--o-color-warning1);
+    --btn-bg-color-hover: var(--o-color-warning2);
+    --btn-bg-color-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);
+    --btn-bd-color: var(--o-color-warning1);
+    --btn-bd-color-hover: var(--o-color-warning2);
+    --btn-bd-color-active: var(--o-color-warning3);
   }
 
   &.o-btn-text {
-    --btn-bg-hover: var(--o-color-warning1-light);
-    --btn-bg-active: var(--o-color-warning2-light);
+    --btn-bg-color-hover: var(--o-color-warning1-light);
+    --btn-bg-color-active: var(--o-color-warning2-light);
   }
 
   &.o-btn-disabled {
     --btn-color: var(--o-color-warning4);
-    --btn-bg: var(--o-color-warning4);
-    --btn-bd: var(--o-color-warning4);
+    --btn-bg-color: var(--o-color-warning4);
+    --btn-bd-color: var(--o-color-warning4);
   }
 }
 .o-btn-danger {
@@ -123,29 +123,29 @@
   --btn-color-hover: var(--o-color-danger1);
   --btn-color-active: var(--o-color-danger1);
 
-  --btn-bd: var(--o-color-danger1);
-  --btn-bd-hover: var(--o-color-danger2);
-  --btn-bd-active: var(--o-color-danger3);
+  --btn-bd-color: var(--o-color-danger1);
+  --btn-bd-color-hover: var(--o-color-danger2);
+  --btn-bd-color-active: var(--o-color-danger3);
 
   &.o-btn-solid {
-    --btn-bg: var(--o-color-danger1);
-    --btn-bg-hover: var(--o-color-danger2);
-    --btn-bg-active: var(--o-color-danger3);
+    --btn-bg-color: var(--o-color-danger1);
+    --btn-bg-color-hover: var(--o-color-danger2);
+    --btn-bg-color-active: var(--o-color-danger3);
 
-    --btn-bd: var(--o-color-danger1);
-    --btn-bd-hover: var(--o-color-danger2);
-    --btn-bd-active: var(--o-color-danger3);
+    --btn-bd-color: var(--o-color-danger1);
+    --btn-bd-color-hover: var(--o-color-danger2);
+    --btn-bd-color-active: var(--o-color-danger3);
   }
 
   &.o-btn-text {
-    --btn-bg-hover: var(--o-color-danger1-light);
-    --btn-bg-active: var(--o-color-danger2-light);
+    --btn-bg-color-hover: var(--o-color-danger1-light);
+    --btn-bg-color-active: var(--o-color-danger2-light);
   }
 
   &.o-btn-disabled {
     --btn-color: var(--o-color-danger4);
-    --btn-bg: var(--o-color-danger4);
-    --btn-bd: var(--o-color-danger4);
+    --btn-bg-color: var(--o-color-danger4);
+    --btn-bd-color: var(--o-color-danger4);
   }
 }
 
diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts
index 7a86e12f7b1e20ae80d5efed881eded93b688778..71b02fa760ab0388f9a3e113edd405ec3bf2bcd3 100644
--- a/packages/opendesign/src/components/button/types.ts
+++ b/packages/opendesign/src/components/button/types.ts
@@ -1,5 +1,5 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import { SizeT, RoundT, VariantT } from '../_shared/global';
+import { SizeT, RoundT, ColorT, VariantT } from '../_shared/global';
 
 export type ButtonTypeT = 'primary' | 'outline' | 'text' | 'link'
 
@@ -8,7 +8,7 @@ export const buttonProps = {
    * 颜色类型：ColorT
    */
   color: {
-    type: String as PropType<'normal' | 'primary' | 'success' | 'warning' | 'danger'>,
+    type: String as PropType<ColorT>,
     default: 'normal'
   },
   /**
diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index 3dfc5f43d372832af42345f8647a2e0bf5bb22a8..04fe8a061615599cc8471443002a701db1bd3d64 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -165,6 +165,7 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     :disabled="props.disabled"
     :readonly="props.readonly"
     :clearable="false"
+    type="text"
     @input="onInput"
     @change="onChange"
     @blur="onBlur"
@@ -173,67 +174,77 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     @update:model-value="onUpdateModelValue"
   >
     <template v-if="['both', 'left'].includes(props.controls)" #prepend>
-      <div
-        v-if="props.controls === 'both'"
-        class="o-input-number-btn both-left"
-        :class="{
-          'is-disabled': !canMinus,
-        }"
-        @click="(e) => controlClick('minus', e)"
-      >
-        <slot name="minus"><IconMinus /></slot>
-      </div>
-      <div v-if="props.controls === 'left'" class="o-input-number-btn is-vertical">
-        <div
-          class="o-input-number-btn-plus"
-          :class="{
-            'is-disabled': !canAdd,
-          }"
-          @click="(e) => controlClick('plus', e)"
-        >
-          <slot name="add"><IconChevronUp class="o-input-number-icon-plus" /></slot>
-        </div>
+      <div class="o-input-number-btn-wrap">
         <div
-          class="o-input-number-btn-minus"
+          v-if="props.controls === 'both'"
+          class="o-input-number-btn both-left"
+          tabindex="-1"
           :class="{
             'is-disabled': !canMinus,
           }"
           @click="(e) => controlClick('minus', e)"
         >
-          <slot name="minus"><IconChevronDown class="o-input-number-icon-minus" /></slot>
+          <slot name="minus"><IconMinus /></slot>
         </div>
+        <template v-if="props.controls === 'left'">
+          <div
+            class="o-input-number-btn plus"
+            :class="{
+              'is-disabled': !canAdd,
+            }"
+            tabindex="-1"
+            @click="(e) => controlClick('plus', e)"
+          >
+            <slot name="add"><IconChevronUp class="o-input-number-icon-plus" /></slot>
+          </div>
+          <div
+            class="o-input-number-btn minus"
+            :class="{
+              'is-disabled': !canMinus,
+            }"
+            tabindex="-1"
+            @click="(e) => controlClick('minus', e)"
+          >
+            <slot name="minus"><IconChevronDown class="o-input-number-icon-minus" /></slot>
+          </div>
+        </template>
       </div>
     </template>
     <template v-if="['both', 'right'].includes(props.controls)" #append>
-      <div
-        v-if="props.controls === 'both'"
-        class="o-input-number-btn both-right"
-        :class="{
-          'is-disabled': !canAdd,
-        }"
-        @click="(e) => controlClick('plus', e)"
-      >
-        <slot name="add"><IconAdd /></slot>
-      </div>
-      <div v-if="props.controls === 'right'" class="o-input-number-btn is-vertical">
+      <div class="o-input-number-btn-wrap">
         <div
-          class="o-input-number-btn-plus"
+          v-if="props.controls === 'both'"
+          class="o-input-number-btn both-right"
           :class="{
             'is-disabled': !canAdd,
           }"
+          tabindex="-1"
           @click="(e) => controlClick('plus', e)"
         >
-          <slot name="add"><IconChevronUp class="o-input-number-icon-plus" /></slot>
-        </div>
-        <div
-          class="o-input-number-btn-minus"
-          :class="{
-            'is-disabled': !canMinus,
-          }"
-          @click="(e) => controlClick('minus', e)"
-        >
-          <slot name="minus"><IconChevronDown class="o-input-number-icon-minus" /></slot>
+          <slot name="add"><IconAdd /></slot>
         </div>
+        <template v-else-if="props.controls === 'right'">
+          <div
+            class="o-input-number-btn plus"
+            tabindex="-1"
+            :class="{
+              'is-disabled': !canAdd,
+            }"
+            @click="(e) => controlClick('plus', e)"
+          >
+            <slot name="add"><IconChevronUp class="o-input-number-icon-plus" /></slot>
+          </div>
+          <div
+            class="o-input-number-btn minus"
+            tabindex="-1"
+            :class="{
+              'is-disabled': !canMinus,
+            }"
+            @click="(e) => controlClick('minus', e)"
+          >
+            <slot name="minus"><IconChevronDown class="o-input-number-icon-minus" /></slot>
+          </div>
+        </template>
       </div>
     </template>
     <template v-if="$slots.prefix" #prefix>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
index 5f173de75ef83080bd4ecf77ff4377851b466927..281aedf324096239e7d84518f4ac06acd878f752 100644
--- a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
@@ -11,7 +11,7 @@ const val3 = ref(3333);
 const val4 = ref('1px');
 </script>
 <template>
-  <h4>Color</h4>
+  <h4>Base</h4>
   <div>val1:{{ val1 }}</div>
   <section>
     <div class="col">
@@ -27,29 +27,37 @@ const val4 = ref('1px');
       <OInputNumber :default-value="val1" style="width: 150px" />
     </div>
   </section>
-  <h4>Color</h4>
+  <h4>Color & Variant</h4>
   <section>
-    <div>
-      <p>normal</p>
-      <OInputNumber v-model="val1" style="width: 150px" color="normal" />
-    </div>
-    <div>
-      <p>success</p>
-      <OInputNumber v-model="val1" style="width: 150px" color="success" />
+    <div class="row">
+      <div>
+        <p>normal</p>
+        <OInputNumber v-model="val1" style="width: 150px" color="normal" />
+      </div>
+      <div>
+        <p>success</p>
+        <OInputNumber v-model="val1" style="width: 150px" color="success" />
+      </div>
+      <div>
+        <p>warning</p>
+        <OInputNumber v-model="val1" style="width: 150px" color="warning" />
+      </div>
+      <div>
+        <p>danger</p>
+        <OInputNumber v-model="val1" style="width: 150px" color="danger" />
+      </div>
     </div>
-    <div>
-      <p>warning</p>
-      <OInputNumber v-model="val1" style="width: 150px" color="warning" />
-    </div>
-    <div>
-      <p>danger</p>
-      <OInputNumber v-model="val1" style="width: 150px" color="danger" />
+    <div class="row">
+      <OInputNumber v-model="val1" style="width: 150px" color="normal" variant="solid" />
+      <OInputNumber v-model="val1" style="width: 150px" color="success" variant="solid" />
+      <OInputNumber v-model="val1" style="width: 150px" color="warning" variant="solid" />
+      <OInputNumber v-model="val1" style="width: 150px" color="danger" variant="solid" />
     </div>
   </section>
   <section>
     <div class="col">
       readonly:
-      <OInputNumber v-model="val1" readonly />
+      <OInputNumber v-model="val1" readonly :max="5" :min="0" />
     </div>
     <div class="col">
       controls none:
@@ -61,7 +69,7 @@ const val4 = ref('1px');
     </div>
     <div class="right">
       controls left:
-      <OInputNumber v-model="val1" controls="right" :max="5" />
+      <OInputNumber v-model="val1" controls="right" :max="5" :min="0" />
     </div>
   </section>
   <h4>Size</h4>
@@ -96,14 +104,22 @@ const val4 = ref('1px');
   </section>
   <h4>Disabled</h4>
   <section>
-    <div>val1:{{ val1 }}</div>
-    <OInputNumber v-model="val1" disabled />
-    <OInputNumber v-model="val1" disabled style="width: 150px">
-      <template #prefix>$</template>
-    </OInputNumber>
-    <OInputNumber v-model="val1" disabled style="width: 150px">
-      <template #suffix> 元 </template>
-    </OInputNumber>
+    <div class="row">
+      <OInputNumber v-model="val1" disabled />
+      <OInputNumber v-model="val1" disabled style="width: 150px">
+        <template #prefix>$</template>
+      </OInputNumber>
+      <OInputNumber v-model="val1" disabled style="width: 150px">
+        <template #suffix> 元 </template>
+      </OInputNumber>
+    </div>
+
+    <div class="row">
+      <OInputNumber v-model="val1" style="width: 150px" color="normal" variant="solid" disabled />
+      <OInputNumber v-model="val1" style="width: 150px" color="success" variant="solid" disabled />
+      <OInputNumber v-model="val1" style="width: 150px" color="warning" variant="solid" disabled />
+      <OInputNumber v-model="val1" style="width: 150px" color="danger" variant="solid" disabled />
+    </div>
   </section>
 
   <h4>Step & min & max</h4>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
index 982b54537de8d1c4848b309f206f00fd0bb1a62f..db24829e0df5ff929b4d58d7b8c5b9b6df3fbc05 100644
--- a/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
@@ -6,7 +6,7 @@ const val1 = ref('');
 const val2 = ref(1000);
 </script>
 <template>
-  <h4>Prefix & Suffix</h4>
+  <h4>add & minus</h4>
   <section>
     <OInputNumber v-model:value="val1" style="width: 150px">
       <template #minus>Plus</template>
@@ -20,6 +20,9 @@ const val2 = ref(1000);
       <template #minus>+</template>
       <template #add>-</template>
     </OInputNumber>
+  </section>
+  <h4>Prefix & Suffix</h4>
+  <section>
     <OInputNumber v-model:value="val2" style="width: 150px">
       <template #prefix> $ </template>
     </OInputNumber>
@@ -27,15 +30,5 @@ const val2 = ref(1000);
       <template #suffix> 元 </template>
     </OInputNumber>
   </section>
-
-  <h4>Prepend & Append</h4>
-  <section>
-    <OInputNumber v-model:value="val2">
-      <template #prepend>+86</template>
-    </OInputNumber>
-    <OInputNumber v-model:value="val2">
-      <template #append>RMB</template>
-    </OInputNumber>
-  </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss
index 7943e6c45e987a357fe78d7a5022a039f738a05f..dfaa0ad717f9d3ad2c0e1a202b78d50f8ef9cbf3 100644
--- a/packages/opendesign/src/components/input-number/style/index.scss
+++ b/packages/opendesign/src/components/input-number/style/index.scss
@@ -15,42 +15,19 @@
     }
   }
 }
-.o-input-number-btn {
+
+.o-input-number-btn-wrap {
   user-select: none;
-  align-items: center;
   justify-content: center;
   display: flex;
   min-width: var(--input-height);
   font-size: 16px;
   flex-wrap: wrap;
   color: var(--input-number-btn-color);
-
-  &.both-left,
-  &.both-right {
-    background-color: var(--input-number-btn-bg);
-
-    &:hover {
-      color: var(--input-number-btn-color-hover);
-      background-color: var(--input-number-btn-bg-hover);
-    }
-    &.is-disabled {
-      cursor: not-allowed;
-      background-color: var(--input-number-btn-bg-disabled);
-      color: var(--input-number-btn-color-disabled);
-    }
-  }
-
-  .o-input-round-pill & {
-    &.both-right {
-      padding-right: 2px;
-    }
-    &.both-left {
-      padding-left: 2px;
-    }
-  }
 }
-.o-input-number-btn-minus,
-.o-input-number-btn-plus {
+
+.o-input-number-btn,
+.o-input-number-btn {
   width: 100%;
   height: 50%;
   display: inline-flex;
@@ -59,16 +36,32 @@
   font-size: 16px;
   overflow: hidden;
   position: relative;
-  background-color: var(--input-number-btn-bg);
-
+  background-color: var(--input-number-btn-bg-color);
+  &.both-left,
+  &.both-right {
+    height: 100%;
+  }
   &:hover {
     color: var(--input-number-btn-color-hover);
-    background-color: var(--input-number-btn-bg-hover);
+    background-color: var(--input-number-btn-bg-color-hover);
+  }
+  &:focus {
+    color: var(--input-number-btn-color-active);
+    background-color: var(--input-number-btn-bg-color-active);
   }
   &.is-disabled {
     cursor: not-allowed;
-    background-color: var(--input-number-btn-bg-disabled);
     color: var(--input-number-btn-color-disabled);
+    background-color: var(--input-number-btn-bg-color-disabled);
+  }
+
+  .o-input-round-pill & {
+    &.both-right {
+      padding-right: var(--input-number-btn-pill-fix);
+    }
+    &.both-left {
+      padding-left: var(--input-number-btn-pill-fix);
+    }
   }
 }
 .o-input-number-icon-minus {
diff --git a/packages/opendesign/src/components/input-number/style/var.scss b/packages/opendesign/src/components/input-number/style/var.scss
index 499a7735cb4f7cbf50f79165fb93a40315770170..61c6c487dba7a9a675e88ad07410bc6a9d52689d 100644
--- a/packages/opendesign/src/components/input-number/style/var.scss
+++ b/packages/opendesign/src/components/input-number/style/var.scss
@@ -1,8 +1,11 @@
 .o-input-number {
-  --input-number-btn-color: var(--o-color-text3);
-  --input-number-btn-color-hover: var(--o-color-primary1);
-  --input-number-btn-color-disabled: var(--o-color-text4);
-  --input-number-btn-bg: var(--o-color-bg2);
-  --input-number-btn-bg-hover: var(--o-color-normal1);
-  --input-number-btn-bg-disabled: var(--o-color-normal4);
+  --input-number-btn-color: var(--o-color-info3);
+  --input-number-btn-color-hover: var(--o-color-info1);
+  --input-number-btn-color-active: var(--o-color-info1);
+  --input-number-btn-color-disabled: var(--o-color-info4);
+  --input-number-btn-bg-color: transparent;
+  --input-number-btn-bg-color-hover: var(--o-color-control1-light);
+  --input-number-btn-bg-color-active: var(--o-color-control2-light);
+  --input-number-btn-bg-color-disabled: var(--o-color-control4-light);
+  --input-number-btn-pill-fix: 2px;
 }
diff --git a/packages/opendesign/src/components/input-number/types.ts b/packages/opendesign/src/components/input-number/types.ts
index 916981831810e7b2c96af976c5c206003604bc5b..44b250ddfa504942db570f672d2ff43637d1a648 100644
--- a/packages/opendesign/src/components/input-number/types.ts
+++ b/packages/opendesign/src/components/input-number/types.ts
@@ -1,91 +1,6 @@
 import { ExtractPropTypes, PropType } from 'vue';
 import { SizeT, RoundT } from '../_shared/global';
 
-// interface InputPropT {
-//   /**
-//    * 数字输入框的值
-//    * v-model
-//    */
-//   modelValue?: string | number;
-//   /**
-//    * 数字输入框的默认值
-//    * 非受控
-//    */
-//   defaultValue?: string | number;
-//   /**
-//    * 按钮点击时步长
-//    */
-//   step?: number;
-//   /**
-//    * 最小值
-//    */
-//   min?: number;
-//   /**
-//    * 最大值
-//    */
-//   max?: number;
-//   /**
-//    * 样式尺寸
-//    */
-//   size?: SizeT;
-//   /**
-//    * 形状
-//    */
-//   shape?: ShapeT;
-//   /**
-//    * 提示文本
-//    */
-//   placeholder?: string;
-//   /**
-//    * 状态，显示指定，用于非表单场景
-//    */
-//   status?: 'success' | 'warning' | 'error';
-//   /**
-//    * 是否禁用
-//    */
-//   disabled?: boolean;
-//   /**
-//    * 是否只读
-//    */
-//   readonly?: boolean;
-//   /**
-//    * 是否可以清除
-//    */
-//   clearable?: boolean;
-//   /**
-//    * 控制按钮位置
-//    */
-//   controls?: 'both' | 'right' | 'left' | 'none';
-//   /**
-//    * 是否在输入合法时，更新modelvalue
-//    */
-//   updateOnInput?: boolean;
-//   /**
-//    * 解析输入框的值
-//    */
-//   parse?: (value: string) => string;
-//   /**
-//    * 对值格式化，控制显示格式
-//    * 需搭配parse处理，保证值的正确性
-//    */
-//   format?: (value: string | number) => string | number;
-// }
-// const props = withDefaults(defineProps<InputPropT>(), {
-//   modelValue: undefined,
-//   defaultValue: undefined,
-//   step: 1,
-//   min: undefined,
-//   max: undefined,
-//   size: undefined,
-//   shape: undefined,
-//   placeholder: '',
-//   clearable: true,
-//   parse: undefined,
-//   format: undefined,
-//   status: undefined,
-//   controls: 'both',
-//   updateOnInput: true,
-// });
 export const inputNumberPorps = {
   /**
    * 下拉框的值
@@ -164,26 +79,12 @@ export const inputNumberPorps = {
   readonly: {
     type: Boolean,
   },
-  /**
-   * 是否可以清除
-   */
-  clearable: {
-    type: Boolean,
-    default: true
-  },
   /**
    * 是否自动增加宽度
    */
   autoWidth: {
     type: Boolean,
   },
-  /**
-   * 是否是密码输入
-   */
-  type: {
-    type: String as PropType<'text' | 'password'>,
-    default: 'text'
-  },
   /**
    * 解析输入框的值
    */
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index 2c364e0dd154fdd641b2ed87b054a5ab11a69414..08103797bfce370c0211c2dd84e734e972c59dff 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -149,6 +149,7 @@ const round = getRoundClass(props, 'input');
     class="o-input"
     :class="[
       `o-input-${props.color}`,
+      `o-input-${props.variant}`,
       `o-input-size-${props.size || defaultSize}`,
       round.class.value,
       {
@@ -171,6 +172,7 @@ const round = getRoundClass(props, 'input');
         'has-append': $slots.append,
         'is-focus': isFocus,
         'is-readonly': props.readonly,
+        'is-disabled': props.disabled,
       }"
     >
       <div v-if="$slots.prefix" class="o-input-prefix">
diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
index d5abeee00d7f4d0f21a1ab706d377a4e343b23e3..0bab9619230b70fbb9646cf3f3d7a7c16e2437c8 100644
--- a/packages/opendesign/src/components/input/__demo__/InputBasic.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
@@ -17,31 +17,64 @@ setTimeout(() => {
   <h4>type</h4>
   <section>
     <div>
-      <section>
+      <div class="row">
         <p>text:</p>
         <OInput v-model="val3" />
         <p>password:</p>
         <OInput v-model="val3" type="password" />
-      </section>
+      </div>
     </div>
   </section>
-  <h4>color</h4>
+  <h4>color & variant</h4>
   <section>
-    <div>
-      <p>color: normal</p>
-      <OInput v-model="val1" placeholder="outline input" />
+    <div class="row">
+      <OInput v-model="val1" placeholder="outline + normal" />
+      <OInput v-model="val1" placeholder="outline + success" color="success" />
+      <OInput v-model="val1" placeholder="outline + warning" color="warning" />
+      <OInput v-model="val1" placeholder="outline + danger" color="danger" />
     </div>
-    <div>
-      <p>color: success</p>
-      <OInput v-model="val1" placeholder="outline input" color="success" />
+    <div class="row">
+      <OInput v-model="val1" color="normal" placeholder="outline + normal">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="success" placeholder="outline + success">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="warning" placeholder="outline + warning">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="danger" placeholder="outline + danger">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
     </div>
-    <div>
-      <p>color: warning</p>
-      <OInput v-model="val1" placeholder="outline input" color="warning" />
+    <div class="row">
+      <OInput v-model="val1" variant="solid" placeholder="solid + normal" />
+      <OInput v-model="val1" variant="solid" placeholder="solid + success" color="success" />
+      <OInput v-model="val1" variant="solid" placeholder="solid + warning" color="warning" />
+      <OInput v-model="val1" variant="solid" placeholder="solid + danger" color="danger" />
     </div>
-    <div>
-      <p>color: danger</p>
-      <OInput v-model="val1" placeholder="outline input" color="danger" />
+
+    <div class="row">
+      <OInput v-model="val1" color="normal" variant="solid" placeholder="solid + normal">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="success" variant="solid" placeholder="solid + success">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="warning" variant="solid" placeholder="solid + warning">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="danger" variant="solid" placeholder="solid + danger">
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
     </div>
   </section>
   <h4>Size</h4>
@@ -70,21 +103,37 @@ setTimeout(() => {
   </section>
   <h4>Disabled</h4>
   <section>
-    <div>val1:{{ val1 }}</div>
-    <OInput v-model="val2" disabled />
-    <OInput v-model="val2" disabled>
-      <template #prefix>
-        <IconDone />
-      </template>
-    </OInput>
-    <OInput v-model="val2" disabled>
-      <template #suffix>
-        <IconDone />
-      </template>
-    </OInput>
-    <OInput v-model="val2" :clearable="false" disabled>
-      <template #suffix> 元 </template>
-    </OInput>
+    <div class="row">
+      <OInput v-model="val3" placeholder="outline + normal" disabled />
+      <OInput v-model="val3" placeholder="outline + success" color="success" disabled />
+      <OInput v-model="val3" placeholder="outline + warning" color="warning" disabled />
+      <OInput v-model="val3" placeholder="outline + danger" color="danger" disabled />
+    </div>
+    <div class="row">
+      <OInput v-model="val3" variant="solid" placeholder="solid + normal" disabled />
+      <OInput v-model="val3" variant="solid" placeholder="solid + success" color="success" disabled />
+      <OInput v-model="val3" variant="solid" placeholder="solid + warning" color="warning" disabled />
+      <OInput v-model="val3" variant="solid" placeholder="solid + danger" color="danger" disabled />
+    </div>
+
+    <div class="row">
+      <OInput v-model="val1" color="normal" variant="solid" placeholder="solid + normal" disabled>
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="success" variant="solid" placeholder="solid + success" disabled>
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="warning" variant="solid" placeholder="solid + warning" disabled>
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+      <OInput v-model="val1" color="danger" variant="solid" placeholder="solid + danger" disabled>
+        <template #prepend>+86</template>
+        <template #append>手机</template>
+      </OInput>
+    </div>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input/__demo__/InputRound.vue b/packages/opendesign/src/components/input/__demo__/InputRound.vue
index 94ad560565c5c41f631b2ce9a4dfa29673fd98da..441d6d0956b8b905264d121bacc72be52ee2c5b7 100644
--- a/packages/opendesign/src/components/input/__demo__/InputRound.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputRound.vue
@@ -26,7 +26,7 @@ const onClick = () => {
           <template #prepend>+86</template>
           <template #append>手机</template>
         </OInput>
-        <OInput v-model="val1" round="pill">
+        <OInput v-model="val1" round="pill" color="danger">
           <template #prepend>+86</template>
           <template #append>手机</template>
         </OInput>
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index b5c7237b08ea9997685ec795d214de18e351e748..b0f610e407719b8451c6ae85f31452ef7abe768d 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -8,6 +8,9 @@
   font-size: var(--input-text-size);
   line-height: var(--input-text-height);
 }
+.o-input-disabled {
+  --input-color: var(--input-color-disabled);
+}
 .o-input-wrap {
   display: flex;
   padding: var(--input-padding);
@@ -15,19 +18,24 @@
   overflow: hidden;
   position: relative;
   border-radius: var(--input-radius);
-  border: 1px solid var(--input-bd);
-  background-color: var(--input-bg);
+  border: 1px solid var(--input-bd-color);
+  background-color: var(--input-bg-color);
 
-  &:not(.is-readonly) {
+  &:not(.is-readonly):not(.is-disabled) {
     &:hover {
-      border-color: var(--input-bd-hover);
-      background-color: var(--input-bg-hover);
+      border-color: var(--input-bd-color-hover);
+      background-color: var(--input-bg-color-hover);
     }
     &.is-focus {
-      border-color: var(--input-bd-focus);
-      background-color: var(--input-bg-focus);
+      border-color: var(--input-bd-color-focus);
+      background-color: var(--input-bg-color-focus);
     }
   }
+  &.is-disabled {
+    border-color: var(--input-bd-color-disabled);
+    background-color: var(--input-bg-color-disabled);
+    cursor: not-allowed;
+  }
 
   &.has-prepend {
     border-top-left-radius: 0;
@@ -46,7 +54,6 @@
   cursor: inherit;
   background-color: transparent;
   display: inline-flex;
-  // caret-color: var(--o-color-primary1);
   padding: 0;
   line-height: inherit;
   height: 100%;
@@ -67,7 +74,7 @@
   align-items: center;
   justify-content: center;
   color: var(--input-icon-color);
-  background-color: var(--input-icon-bg);
+  background-color: var(--input-icon-bg-color);
   border-radius: 50%;
 
   &:hover {
@@ -79,13 +86,6 @@
   }
 }
 
-.o-input-disabled {
-  .o-input-wrap {
-    color: var(--input-color-disabled);
-    cursor: not-allowed;
-  }
-}
-
 .o-input-clearable {
   &:hover {
     .o-input-suffix-wrap {
@@ -124,17 +124,40 @@
 .o-input-prepend {
   display: flex;
   align-items: center;
+  background-color: var(--input-prepend-append-bg-color);
+  border: 1px solid var(--input-prepend-append-bd-color);
 }
 
 .o-input-append {
-  border: 1px solid var(--o-color-border2);
-  border-left: 0;
   flex-shrink: 0;
   padding: var(--input-append-padding);
   border-top-right-radius: var(--input-radius);
   border-bottom-right-radius: var(--input-radius);
 }
 
+.o-input-prepend {
+  flex-shrink: 0;
+  padding: var(--input-prepend-padding);
+  border-top-left-radius: var(--input-radius);
+  border-bottom-left-radius: var(--input-radius);
+}
+.o-input-solid {
+  .o-input-prepend {
+    border-width: 0 1px 0 0;
+  }
+  .o-input-append {
+    border-width: 0 0 0 1px;
+  }
+}
+
+.o-input-outline {
+  .o-input-prepend {
+    border-right: 0;
+  }
+  .o-input-append {
+    border-left: 0;
+  }
+}
 .o-input-input-wrap {
   position: relative;
 }
@@ -150,12 +173,3 @@
   top: 100%;
   pointer-events: none;
 }
-
-.o-input-prepend {
-  border: 1px solid var(--o-color-border2);
-  border-right: 0;
-  flex-shrink: 0;
-  padding: var(--input-prepend-padding);
-  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 d2cbce0e7fbc3b801902d25acbc33ba7946d5b65..798ccc51a26bbd9778a89f4ef5175752aade01a0 100644
--- a/packages/opendesign/src/components/input/style/var.scss
+++ b/packages/opendesign/src/components/input/style/var.scss
@@ -1,12 +1,99 @@
 .o-input {
-  --input-placeholder: var(--o-color-text4);
-  --input-color: var(--o-color-text2);
-  --input-color-disabled: var(--o-color-text4);
+  --input-color: var(--o-color-info2);
+  --input-color-disabled: var(--o-color-info4);
+  --input-placeholder: var(--o-color-info4);
 
-  --input-bg: var(--o-color-bg2);
-  --input-bg-hover: var(--o-color-bg2);
-  --input-bg-focus: var(--o-color-bg2);
+  --input-bg-color: transparent;
+  --input-bg-color-hover: transparent;
+  --input-bg-color-focus: var(--o-color-control-white);
+
+  --input-prepend-append-bd-color: var(--o-color-control1);
+}
+
+.o-input-normal {
+  --input-bd-color: var(--o-color-control1);
+  --input-bd-color-hover: var(--o-color-primary2);
+  --input-bd-color-focus: var(--o-color-primary3);
+  --input-bd-color-disabled: var(--o-color-control4);
+  &.o-input-solid {
+    --input-bd-color: var(--o-color-control1-light);
+    --input-bd-color-hover: var(--o-color-control2-light);
+    --input-bd-color-focus: var(--o-color-primary3-light);
+    --input-bd-color-disabled: var(--o-color-control4-light);
+
+    --input-bg-color: var(--o-color-control1-light);
+    --input-bg-color-hover: var(--o-color-control2-light);
+    --input-bg-color-disabled: var(--o-color-control4-light);
+
+    --input-prepend-append-bd-color: var(--o-color-control2-light);
+    &.o-input-disabled {
+      --input-prepend-append-bd-color: var(--o-color-control4-light);
+    }
+  }
+}
+
+.o-input-success {
+  --input-bd-color: var(--o-color-success1);
+  --input-bd-color-hover: var(--o-color-success2);
+  --input-bd-color-focus: var(--o-color-success3);
+  --input-bd-color-disabled: var(--o-color-success4);
+
+  &.o-input-solid {
+    --input-bd-color: var(--o-color-success1-light);
+    --input-bd-color-hover: var(--o-color-success2-light);
+    --input-bd-color-focus: var(--o-color-success3-light);
+    --input-bd-color-disabled: var(--o-color-success4-light);
+
+    --input-bg-color: var(--o-color-success1-light);
+    --input-bg-color-hover: var(--o-color-success2-light);
+    --input-bg-color-disabled: var(--o-color-success4-light);
+  }
+}
+
+.o-input-warning {
+  --input-bd-color: var(--o-color-warning1);
+  --input-bd-color-hover: var(--o-color-warning2);
+  --input-bd-color-focus: var(--o-color-warning3);
+  --input-bd-color-disabled: var(--o-color-warning4);
+
+  &.o-input-solid {
+    --input-bd-color: var(--o-color-warning1-light);
+    --input-bd-color-hover: var(--o-color-warning2-light);
+    --input-bd-color-focus: var(--o-color-warning3-light);
+    --input-bd-color-disabled: var(--o-color-warning4-light);
+
+    --input-bg-color: var(--o-color-warning1-light);
+    --input-bg-color-hover: var(--o-color-warning2-light);
+    --input-bg-color-disabled: var(--o-color-warning4-light);
+  }
 }
+
+.o-input-danger {
+  --input-bd-color: var(--o-color-danger1);
+  --input-bd-color-hover: var(--o-color-danger2);
+  --input-bd-color-focus: var(--o-color-danger3);
+  --input-bd-color-disabled: var(--o-color-danger4);
+
+  &.o-input-solid {
+    --input-bd-color: var(--o-color-danger1-light);
+    --input-bd-color-hover: var(--o-color-danger2-light);
+    --input-bd-color-focus: var(--o-color-danger3-light);
+    --input-bd-color-disabled: var(--o-color-danger4-light);
+
+    --input-bg-color: var(--o-color-danger1-light);
+    --input-bg-color-hover: var(--o-color-danger2-light);
+    --input-bg-color-disabled: var(--o-color-danger4-light);
+  }
+}
+
+.o-input-solid {
+  --input-prepend-append-bg-color: var(--o-color-control1-light);
+}
+
+.o-input-disabled {
+  --input-color: var(--o-color-info4);
+}
+
 .o-input-size-small {
   --input-height: var(--o-size-s);
   --input-text-size: var(--o-font_size-tip1);
@@ -16,11 +103,13 @@
   --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);
@@ -36,6 +125,7 @@
     --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);
@@ -45,6 +135,7 @@
   --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;
@@ -54,33 +145,3 @@
 .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
index 2ce3efbb591af31126ccbafc370b337430daf83b..b37c7ccf1fcb8d7ac9d431813afabb4547845c55 100644
--- a/packages/opendesign/src/components/input/types.ts
+++ b/packages/opendesign/src/components/input/types.ts
@@ -1,5 +1,5 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import type { SizeT, ShapeT, RoundT } from '../_shared/global';
+import type { SizeT, RoundT, VariantT } from '../_shared/global';
 
 export const inputProps = {
   /**
@@ -22,12 +22,6 @@ export const inputProps = {
   size: {
     type: String as PropType<SizeT>,
   },
-  /**
-   * 形状
-   */
-  shape: {
-    type: String as PropType<ShapeT>,
-  },
   /**
    * 圆角值
    */
@@ -41,6 +35,13 @@ export const inputProps = {
     type: String as PropType<'normal' | 'success' | 'warning' | 'danger'>,
     default: 'normal'
   },
+  /**
+   * 按钮类型：ColorT
+   */
+  variant: {
+    type: String as PropType<VariantT>,
+    default: 'outline'
+  },
   /**
    * 提示文本
    */
diff --git a/packages/opendesign/src/components/link/OLink.vue b/packages/opendesign/src/components/link/OLink.vue
index b11216b89d793d475273b61af1f98d6c593bd474..c29be9b2920be8298e19f74583dab6bb57c4f78b 100644
--- a/packages/opendesign/src/components/link/OLink.vue
+++ b/packages/opendesign/src/components/link/OLink.vue
@@ -1,48 +1,9 @@
 <script setup lang="ts">
-import { StatusT } from '../_shared/global';
 import { IconLinkPrefix, IconLinkArrow, IconLoading } from '../_shared/icons';
 
-interface LinkPropsT {
-  /**
-   * 包含超链接指向的 URL 或 URL 片段。
-   */
-  href?: string;
-  /**
-   * 指定在何处显示链接的资源。
-   */
-  target?: '_blank' | '_parent' | '_self' | '_top';
-  /**
-   * 是否为loading状态
-   */
-  loading?: boolean;
-  /**
-   * 链接类型
-   */
-  status?: StatusT;
-  /**
-   * 是否禁用
-   */
-  disabled?: boolean;
-  /**
-   * 前缀图标
-   */
-  iconPrefix?: boolean;
-  /**
-   * 图标箭头
-   */
-  iconArrow?: boolean;
-  /**
-   * hover时是否显示背景
-   */
-  hoverable?: boolean;
-}
+import { linkProps } from './types';
 
-const props = withDefaults(defineProps<LinkPropsT>(), {
-  href: '',
-  target: undefined,
-  icon: false,
-  status: 'normal',
-});
+const props = defineProps(linkProps);
 
 const emits = defineEmits<{ (e: 'click', val: MouseEvent): void }>();
 const onClick = (e: MouseEvent) => {
@@ -61,11 +22,17 @@ const onClick = (e: MouseEvent) => {
     class="o-link"
     :href="props.href"
     :target="props.target"
-    :class="[{ 'is-disabled': props.disabled, 'o-link-hoverable': props.hoverable }, `o-link-${props.status}`]"
+    :class="[
+      {
+        'o-link-disabled': props.disabled,
+        'o-link-hoverable': props.hoverable,
+      },
+      `o-link-${props.color}`,
+    ]"
     v-bind="$attrs"
     @click="onClick"
   >
-    <span v-if="props.icon || $slots.icon || props.loading" class="o-link-icon prefix">
+    <span v-if="props.iconPrefix || $slots.iconPrefix || props.loading" class="o-link-icon prefix">
       <IconLoading v-if="props.loading" class="o-rotating" />
       <slot v-else-if="$slots.icon" name="icon"></slot>
       <IconLinkPrefix v-else />
diff --git a/packages/opendesign/src/components/link/__demo__/LinkBasic.vue b/packages/opendesign/src/components/link/__demo__/LinkBasic.vue
index 1a689b2bcd79a47fb7d948b46b635c7bd825ce7a..2dc69c75994b6e7ca3cbb6ab05729c96f16c3edc 100644
--- a/packages/opendesign/src/components/link/__demo__/LinkBasic.vue
+++ b/packages/opendesign/src/components/link/__demo__/LinkBasic.vue
@@ -21,35 +21,48 @@ const onLinkClick2 = () => {
   <h4>基本</h4>
   <section>
     <OLink :href="link">普通链接</OLink>
-    <OLink :href="link" status="primary">高亮链接</OLink>
     <OLink :href="link" target="_blank">新页签打开的链接</OLink>
     <OLink :href="link" disabled>禁用链接</OLink>
   </section>
-
+  <h4>样式</h4>
+  <section>
+    <div class="row">
+      <OLink :href="link">普通链接</OLink>
+      <OLink :href="link" hoverable>hoverable</OLink>
+      <OLink :href="link" disabled>禁用链接</OLink>
+    </div>
+    <div class="row">
+      <OLink color="success">success链接</OLink>
+      <OLink color="success" hoverable>hoverable</OLink>
+      <OLink color="success" :href="link" disabled>禁用链接</OLink>
+    </div>
+    <div class="row">
+      <OLink color="primary">primary链接</OLink>
+      <OLink color="primary" hoverable>hoverable</OLink>
+      <OLink color="primary" :href="link" disabled>禁用链接</OLink>
+    </div>
+    <div class="row">
+      <OLink color="warning">warning链接</OLink>
+      <OLink color="warning" hoverable>hoverable</OLink>
+      <OLink color="warning" :href="link" disabled>禁用链接</OLink>
+    </div>
+    <div class="row">
+      <OLink color="danger">danger链接</OLink>
+      <OLink color="danger" hoverable>hoverable</OLink>
+      <OLink color="danger" :href="link" disabled>禁用链接</OLink>
+    </div>
+  </section>
   <h4>图标</h4>
   <section>
     <OLink :href="link" icon-prefix status="primary">图标链接1</OLink>
     <OLink :href="link" icon-arrow>图标链接2</OLink>
     <OLink :href="link">
-      <template #icon><IconDone /></template>自定义图标链接1
+      <template #iconPrefix><IconDone /></template>自定义图标链接1
     </OLink>
     <OLink :href="link">
       自定义图标链接2<template #iconSuffix><IconAdd /></template>
     </OLink>
   </section>
-  <h4>样式</h4>
-  <section>
-    <OLink :href="link">普通链接</OLink>
-    <OLink :href="link" hoverable>hoverable链接</OLink>
-    <OLink status="primary">primary链接</OLink>
-    <OLink status="primary" hoverable>hoverable</OLink>
-    <OLink status="warning">warning链接</OLink>
-    <OLink status="warning" hoverable>hoverable</OLink>
-    <OLink status="danger">danger链接</OLink>
-    <OLink status="danger" hoverable>hoverable</OLink>
-    <OLink status="success">success链接</OLink>
-    <OLink status="success" hoverable>hoverable</OLink>
-  </section>
   <h4>点击事件</h4>
   <section>
     <OLink :loading="!loading">loading</OLink>
diff --git a/packages/opendesign/src/components/link/style/index.scss b/packages/opendesign/src/components/link/style/index.scss
index bd197baed952dd680426ecce4b7d0d15aeaf044d..b4337165b6d27837b66a556757c92340aac55e9c 100644
--- a/packages/opendesign/src/components/link/style/index.scss
+++ b/packages/opendesign/src/components/link/style/index.scss
@@ -4,22 +4,30 @@
   cursor: pointer;
   text-decoration: none;
   padding: 0 2px;
+  color: var(--link-color);
 
-  &:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-    .o-link-icon.arrow svg {
-      transform: translateX(4px);
+  &:not(.o-link-disabled) {
+    &:hover {
+      text-decoration: underline;
+      color: var(--link-color-hover);
+      text-underline-offset: 4px;
+      .o-link-icon.arrow svg {
+        transform: translateX(4px);
+      }
     }
-  }
 
-  &.is-disabled {
-    color: var(--link-color_disabled);
-    cursor: not-allowed;
-    text-decoration: none;
+    &:active {
+      color: var(--link-color-active);
+    }
   }
 }
 
+.o-link-disabled {
+  cursor: not-allowed;
+  text-decoration: none;
+  color: var(--link-color-disabled);
+}
+
 .o-link-icon {
   &.prefix {
     margin-right: 2px;
@@ -33,79 +41,16 @@
   }
 }
 
-.o-link-normal:not(.is-disabled) {
-  color: var(--link-color);
-  &:hover {
-    color: var(--link-color_hover);
-  }
-  &:active {
-    color: var(--link-color_active);
-  }
-}
-
-.o-link-primary:not(.is-disabled) {
-  color: var(--link-primary);
-
-  &:hover {
-    color: var(--link-primary_hover);
-  }
-  &:active {
-    color: var(--link-primary_active);
-  }
-}
-
-.o-link-success:not(.is-disabled) {
-  color: var(--link-success);
-
-  &:hover {
-    color: var(--link-success_hover);
-  }
-  &:active {
-    color: var(--link-success_active);
-  }
-}
-
-.o-link-warning:not(.is-disabled) {
-  color: var(--link-warning);
-
-  &:hover {
-    color: var(--link-warning_hover);
-  }
-  &:active {
-    color: var(--link-warning_active);
-  }
-}
-
-.o-link-danger:not(.is-disabled) {
-  color: var(--link-danger);
-
-  &:hover {
-    color: var(--link-danger_hover);
-  }
-  &:active {
-    color: var(--link-danger_active);
-  }
-}
-
-.o-link-hoverable:not(.is-disabled) {
-  &.o-link-primary {
-    color: var(--link-primary);
-  }
-  &.o-link-success {
-    color: var(--link-success);
-  }
-  &.o-link-warning {
-    color: var(--link-warning);
-  }
-  &.o-link-danger {
-    color: var(--link-danger);
-  }
-
-  &:hover {
-    text-decoration: none;
-    background-color: var(--link-bg_hover);
-  }
-  &:active {
-    background-color: var(--link-bg_active);
+.o-link-hoverable {
+  &:not(.is-disabled) {
+    &:hover {
+      text-decoration: none;
+      color: var(--link-color);
+      background-color: var(--link-bg-color-hover);
+    }
+    &:active {
+      color: var(--link-color);
+      background-color: var(--link-bg-color-active);
+    }
   }
 }
diff --git a/packages/opendesign/src/components/link/style/var.scss b/packages/opendesign/src/components/link/style/var.scss
index 692deb786b4dcfa6b257df1dd96d03c646c058a4..917457ec2c1bb50269a969dfd2268bed7eb037c6 100644
--- a/packages/opendesign/src/components/link/style/var.scss
+++ b/packages/opendesign/src/components/link/style/var.scss
@@ -1,28 +1,44 @@
-.o-link {
-  --link-color: var(--o-color-text2);
-  --link-color_hover: var(--o-color-primary2);
-  --link-color_active: var(--o-color-primary1);
-  --link-color_disabled: var(--o-color-info3);
-
-  --link-primary: var(--o-color-primary1);
-  --link-primary_hover: var(--o-color-primary3);
-  --link-primary_active: var(--o-color-primary2);
-
-  --link-success: var(--o-color-success1);
-  --link-success_hover: var(--o-color-success3);
-  --link-success_active: var(--o-color-success2);
+.o-link-normal {
+  --link-color: var(--o-color-info2);
+  --link-color-hover: var(--o-color-primary2);
+  --link-color-active: var(--o-color-primary3);
+  --link-color-disabled: var(--o-color-info4);
+  --link-bg-color-hover: var(--o-color-control1-light);
+  --link-bg-color-active: var(--o-color-control2-light);
+}
 
-  --link-warning: var(--o-color-warning1);
-  --link-warning_hover: var(--o-color-warning3);
-  --link-warning_active: var(--o-color-warning2);
+.o-link-primary {
+  --link-color: var(--o-color-primary1);
+  --link-color-hover: var(--o-color-primary2);
+  --link-color-active: var(--o-color-primary3);
+  --link-color-disabled: var(--o-color-primary4);
+  --link-bg-color-hover: var(--o-color-primary1-light);
+  --link-bg-color-active: var(--o-color-primary2-light);
+}
 
-  --link-danger: var(--o-color-danger1);
-  --link-danger_hover: var(--o-color-danger3);
-  --link-danger_active: var(--o-color-danger2);
+.o-link-success {
+  --link-color: var(--o-color-success1);
+  --link-color-hover: var(--o-color-success2);
+  --link-color-active: var(--o-color-success3);
+  --link-color-disabled: var(--o-color-success4);
+  --link-bg-color-hover: var(--o-color-success1-light);
+  --link-bg-color-active: var(--o-color-success2-light);
+}
 
-  --link-bg_hover: var(--o-color-bg1);
-  --link-bg_active: var(--o-color-bg1);
+.o-link-warning {
+  --link-color: var(--o-color-warning1);
+  --link-color-hover: var(--o-color-warning2);
+  --link-color-active: var(--o-color-warning3);
+  --link-color-disabled: var(--o-color-warning4);
+  --link-bg-color-hover: var(--o-color-warning1-light);
+  --link-bg-color-active: var(--o-color-warning2-light);
+}
 
-  --link-text-size: var(--o-font_size-text);
-  --link-text-height: var(--o-line_height-text);
+.o-link-danger {
+  --link-color: var(--o-color-danger1);
+  --link-color-hover: var(--o-color-danger2);
+  --link-color-active: var(--o-color-danger3);
+  --link-color-disabled: var(--o-color-danger4);
+  --link-bg-color-hover: var(--o-color-danger1-light);
+  --link-bg-color-active: var(--o-color-danger2-light);
 }
diff --git a/packages/opendesign/src/components/link/types.ts b/packages/opendesign/src/components/link/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cc397dc32a073a07723211552d32097147247ea5
--- /dev/null
+++ b/packages/opendesign/src/components/link/types.ts
@@ -0,0 +1,56 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { ColorT } from '../_shared/global';
+
+export const linkProps = {
+  /**
+   * 包含超链接指向的 URL 或 URL 片段。
+   */
+  href: {
+    type: String,
+  },
+  /**
+   * 指定在何处显示链接的资源。
+   */
+  target: {
+    type: String as PropType<'_blank' | '_parent' | '_self' | '_top'>,
+  },
+  /**
+   * 是否为loading状态
+   */
+  loading: {
+    type: Boolean,
+  },
+  /**
+   * 链接颜色
+   */
+  color: {
+    type: String as PropType<ColorT>,
+    default: 'normal'
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+  },
+  /**
+   * 前缀图标
+   */
+  iconPrefix: {
+    type: Boolean,
+  },
+  /**
+   * 图标箭头
+   */
+  iconArrow: {
+    type: Boolean,
+  },
+  /**
+   * hover时是否显示背景
+   */
+  hoverable: {
+    type: Boolean,
+  },
+};
+
+export type LinkPropsT = ExtractPropTypes<typeof linkProps>;
diff --git a/packages/opendesign/src/components/option/OOption.vue b/packages/opendesign/src/components/option/OOption.vue
index 4ec51e94488563b911f1ca82f0be2b55dfac1f3d..6f22108438f30efbaa5bf11d2ece999347f3c64b 100644
--- a/packages/opendesign/src/components/option/OOption.vue
+++ b/packages/opendesign/src/components/option/OOption.vue
@@ -1,17 +1,9 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 import { selectOptionInjectKey } from '../select/provide';
+import { optionProps } from './types';
 
-interface OptionPropT {
-  label?: string;
-  value: string | number;
-  disabled?: boolean;
-}
-
-const props = withDefaults(defineProps<OptionPropT>(), {
-  value: '',
-  label: '',
-});
+const props = defineProps(optionProps);
 
 const selectInject = inject(selectOptionInjectKey, null);
 
@@ -46,7 +38,16 @@ const clickOption = () => {
 };
 </script>
 <template>
-  <div class="o-option" :class="{ active: currentVal === props.value, 'is-disabled': props.disabled }" @click="clickOption">
+  <div
+    class="o-option"
+    :class="[
+      {
+        active: currentVal === props.value,
+        'o-option-disabled': props.disabled,
+      },
+    ]"
+    @click="clickOption"
+  >
     <slot>{{ props.label || `${props.value}` }}</slot>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/option/style/index.scss b/packages/opendesign/src/components/option/style/index.scss
index ab688a641fd993a3aaebf3fb258cd5d559451625..3a0d32779242ea6376ef32ab41314956d6713a8b 100644
--- a/packages/opendesign/src/components/option/style/index.scss
+++ b/packages/opendesign/src/components/option/style/index.scss
@@ -1,33 +1,28 @@
 @use './var.scss';
 
 .o-option {
-  cursor: pointer;
+  display: flex;
+  align-items: center;
   padding: var(--option-padding);
-  background-color: var(--option-bg);
-
+  background-color: var(--option-bg-color);
   font-size: var(--option-text-size);
   line-height: var(--option-text-height);
-  display: flex;
-  align-items: center;
+  cursor: pointer;
 
-  &:hover {
-    background-color: var(--option-bg_hover);
-    color: var(--option-color_hover);
-  }
-  &.active {
-    color: var(--option-color_active);
-    background-color: var(--option-bg_active);
-  }
-  &.is-disabled {
-    cursor: not-allowed;
-    color: var(--option-color_disabled);
-    background-color: var(--option-bg_disabled);
+  &:not(.o-option-disabled) {
+    &:hover {
+      background-color: var(--option-bg-color-hover);
+      color: var(--option-color-hover);
+    }
+    &.active {
+      color: var(--option-color-active);
+      background-color: var(--option-bg-color-active);
+    }
   }
 }
-.o-options-size-small {
-  .o-option {
-    padding: var(--option-padding-s);
-    font-size: var(--option-text-size_small);
-    line-height: var(--option-text-height_small);
-  }
+
+.o-option-disabled {
+  cursor: not-allowed;
+  color: var(--option-color-disabled);
+  background-color: var(--option-bg-color-disabled);
 }
diff --git a/packages/opendesign/src/components/option/style/var.scss b/packages/opendesign/src/components/option/style/var.scss
index ed3568f97a97c7e1339920ba4b35188ff43f380d..6def4083642800c98f4946938cb40c1af857a3ae 100644
--- a/packages/opendesign/src/components/option/style/var.scss
+++ b/packages/opendesign/src/components/option/style/var.scss
@@ -1,20 +1,18 @@
 .o-option {
-  --option-color: var(--o-color-text2);
-  --option-color_hover: var(--o-color-text2-inverse);
-  --option-color_active: var(--o-color-text2-inverse);
-  --option-color_disabled: var(--o-color-text4);
+  --option-color: var(--o-color-info2);
+  --option-color-hover: var(--o-color-info1-inverse);
+  --option-color-active: var(--o-color-info1-inverse);
+  --option-color-disabled: var(--o-color-info4);
 
-  --option-bg: transparent;
-  --option-bg_hover: var(--o-color-primary3);
-  --option-bg_active: var(--o-color-primary2);
-  --option-bg_disabled: transparent;
+  --option-bg-color: transparent;
+  --option-bg-color-hover: var(--o-color-primary3-light);
+  --option-bg-color-active: var(--o-color-primary2-light);
+  --option-bg-color-disabled: var(--o-color-control4-light);
 
   --option-text-size: var(--o-font_size-text);
   --option-text-height: var(--o-line_height-text);
 
-  --option-text-size_small: var(--o-font_size-tip1);
-  --option-text-height_small: var(--o-line_height-tip1);
-
-  --option-padding: 5px 16px;
-  --option-padding-s: 3px 8px;
+  --option-padding: 5px 12px;
+  --option-text-size: var(--o-font_size-text);
+  --option-text-height: var(--o-line_height-text);
 }
diff --git a/packages/opendesign/src/components/option/types.ts b/packages/opendesign/src/components/option/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b33342d45c507e6550ab5ba8b21a0d8cdfbb5579
--- /dev/null
+++ b/packages/opendesign/src/components/option/types.ts
@@ -0,0 +1,26 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const optionProps = {
+  /**
+   * 显示文本
+   */
+  label: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 值
+   */
+  value: {
+    type: [String, Number] as PropType<string | number>,
+    default: ''
+  },
+  /**
+   * 禁用
+   */
+  disabled: {
+    type: Boolean
+  },
+};
+
+export type OptionPropsT = ExtractPropTypes<typeof optionProps>;
diff --git a/packages/opendesign/src/components/popover/OPopover.vue b/packages/opendesign/src/components/popover/OPopover.vue
index b553756e159c875b01b20c53d2dd59edf1d6ec57..05d911702e6573a25a51e016fba7cbe1a533ba0d 100644
--- a/packages/opendesign/src/components/popover/OPopover.vue
+++ b/packages/opendesign/src/components/popover/OPopover.vue
@@ -4,62 +4,12 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { PropType, ComponentPublicInstance, ref } from 'vue';
-import { OPopup, PopupPositionT, PopupTriggerT } from '../popup';
+import { ComponentPublicInstance, ref } from 'vue';
+import { OPopup } from '../popup';
 import { OChildOnly } from '../child-only';
+import { popoverProps } from './types';
 
-const props = defineProps({
-  /**
-   * 弹出位置
-   */
-  position: {
-    type: String as PropType<PopupPositionT>,
-    default: 'top',
-  },
-  /**
-   * 触发事件
-   * 'hover','click','focus','contextMenu'
-   */
-  trigger: {
-    type: [String, Array<String>] as PropType<PopupTriggerT | PopupTriggerT[]>,
-    default: 'hover',
-  },
-  /**
-   * 触发元素或组件
-   */
-  target: {
-    type: [String, Object] as PropType<string | ComponentPublicInstance | HTMLElement | null>,
-    default: null,
-  },
-  /**
-   * 是否可见
-   * v-model
-   */
-  visible: {
-    type: Boolean,
-  },
-  /**
-   * 挂载容器，默认为body
-   */
-  wrapper: {
-    type: [String, Object] as PropType<string | HTMLElement>,
-    default: document.body,
-  },
-  /**
-   * 是否在隐藏时卸载
-   */
-  unmountOnHide: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * 距离触发元素的偏移量
-   */
-  offset: {
-    type: Number,
-    default: 8,
-  },
-});
+const props = defineProps(popoverProps);
 
 const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
 const updateVisible = (val: boolean) => {
diff --git a/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
index 1756d6c9a015157512b1fc72e11cddf58033a02d..5e26d8b18d0eb736952507508bd25ae997af25a9 100644
--- a/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
+++ b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
@@ -83,7 +83,7 @@ const btn12 = ref(null);
 </template>
 <style lang="scss" scoped>
 .position-wrap {
-  padding: 100px;
+  padding: 200px;
   height: 50vh;
   overflow: auto;
   border: 1px solid #333;
diff --git a/packages/opendesign/src/components/popover/style/index.scss b/packages/opendesign/src/components/popover/style/index.scss
index b25cd1c71e2eb428c66798422521cd3c959c7794..217994943a776a0f4b6be26697e83fd9d0c21984 100644
--- a/packages/opendesign/src/components/popover/style/index.scss
+++ b/packages/opendesign/src/components/popover/style/index.scss
@@ -1,27 +1,27 @@
 @use './var.scss';
 
 .o-popover-wrap {
-  background-color: var(--popup-bg);
-  box-shadow: var(--popup-shadow);
+  background-color: var(--popover-bg-color);
+  box-shadow: var(--popover-shadow);
   padding: 4px 8px;
-  border-radius: var(--popup-radius);
-  border: 1px solid var(--popup-border-color);
+  border-radius: var(--popover-radius);
+  border: var(--popover-bd);
   min-width: 120px;
 }
 .o-popover-anchor {
-  border: 1px solid var(--popup-border-color);
+  border: var(--popover-bd);
   border-bottom: none;
   border-right: none;
   border-top-left-radius: 2px;
   width: 8px;
   height: 8px;
-  background-color: var(--popup-bg);
+  background-color: var(--popover-bg-color);
 }
 
 .o-popup-pos-left,
 .o-popup-pos-lb,
 .o-popup-pos-lt {
-  .o-popup-anchor {
+  .o-popover-anchor {
     transform: translate(50%, -50%) rotate(135deg);
   }
 }
@@ -29,7 +29,7 @@
 .o-popup-pos-top,
 .o-popup-pos-tl,
 .o-popup-pos-tr {
-  .o-popup-anchor {
+  .o-popover-anchor {
     transform: translate(-50%, 50%) rotate(225deg);
   }
 }
@@ -37,7 +37,7 @@
 .o-popup-pos-right,
 .o-popup-pos-rt,
 .o-popup-pos-rb {
-  .o-popup-anchor {
+  .o-popover-anchor {
     transform: translate(-50%, -50%) rotate(-45deg);
   }
 }
@@ -45,7 +45,7 @@
 .o-popup-pos-bottom,
 .o-popup-pos-bl,
 .o-popup-pos-br {
-  .o-popup-anchor {
+  .o-popover-anchor {
     transform: translate(-50%, -50%) rotate(45deg);
   }
 }
diff --git a/packages/opendesign/src/components/popover/style/var.scss b/packages/opendesign/src/components/popover/style/var.scss
index 2125f46d90f0e817bbd77c9efb78f0a457c4a5b3..406aacefc9f402368603e7a80160d8060338f522 100644
--- a/packages/opendesign/src/components/popover/style/var.scss
+++ b/packages/opendesign/src/components/popover/style/var.scss
@@ -1,6 +1,6 @@
 .o-popover {
-  --popup-bg: var(--o-color-bg2);
-  --popup-shadow: var(--o-shadow-1);
-  --popup-radius: var(--o-radius-s);
-  --popup-border-color: var(--o-color-border2);
+  --popover-bg-color: var(--o-color-fill2);
+  --popover-shadow: var(--o-shadow-1);
+  --popover-radius: var(--o-radius-s);
+  --popover-bd: none;
 }
diff --git a/packages/opendesign/src/components/popover/types.ts b/packages/opendesign/src/components/popover/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9bd9aae6e1550132cd6fcc408093e320f61458f9
--- /dev/null
+++ b/packages/opendesign/src/components/popover/types.ts
@@ -0,0 +1,23 @@
+import { ExtractPropTypes } from 'vue';
+
+import { popupProps } from '../popup/types';
+
+const { position, trigger, target, visible, wrapper, unmountOnHide } = popupProps;
+
+export const popoverProps = {
+  position,
+  trigger,
+  target,
+  visible,
+  wrapper,
+  unmountOnHide,
+  /**
+   * 距离触发元素的偏移量
+   */
+  offset: {
+    type: Number,
+    default: 8,
+  },
+};
+
+export type PopupPropsT = ExtractPropTypes<typeof popoverProps>;
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 17fcb0b23effcce9e9b7530212bd4e29b8f53151..f14b4f1c0ae075f25c2e00acedb3451d21cbc816 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -4,8 +4,8 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance, computed } from 'vue';
-import { propupProps } from './types';
+import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, ComponentPublicInstance, computed } from 'vue';
+import { popupProps } from './types';
 import { isElement, getScrollParents } from '../_shared/dom';
 import { throttleRAF } from '../_shared/utils';
 import { isArray } from '../_shared/is';
@@ -18,7 +18,7 @@ import { OChildOnly } from '../child-only';
 
 // TODO 处理嵌套
 
-const props = defineProps(propupProps);
+const props = defineProps(popupProps);
 
 const emits = defineEmits<{ (e: 'update:visible', val: boolean): void; (e: 'change', val: boolean): void }>();
 const triggers = isArray(props.trigger) ? props.trigger : [props.trigger];
diff --git a/packages/opendesign/src/components/popup/__demo__/IndexPopup.vue b/packages/opendesign/src/components/popup/__demo__/IndexPopup.vue
index d873b04c6f14973a1445f0e94e8fbfd38dcdda92..3d634ebf6928e2363793e7b8da9d9256bccbe589 100644
--- a/packages/opendesign/src/components/popup/__demo__/IndexPopup.vue
+++ b/packages/opendesign/src/components/popup/__demo__/IndexPopup.vue
@@ -14,4 +14,12 @@ import PopupTarget from './PopupTarget.vue';
     <PopupVisible />
   </div>
 </template>
-<style lang="scss"></style>
+<style lang="scss">
+.popup-box {
+  background-color: var(--o-color-fill2);
+  box-shadow: var(--o-shadow-1);
+  padding: 4px 8px;
+  border-radius: var(--o-radius-m);
+  border: 1px solid red;
+}
+</style>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
index 666274aae6b14b8902bd7f91201340c03f342378..5e1c16a403be7a5470baa2c0852dfb3c081c7c1e 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -94,13 +94,6 @@ setTimeout(() => {
   </div>
 </template>
 <style lang="scss" scoped>
-.popup-box {
-  background-color: var(--popup-bg);
-  box-shadow: var(--popup-shadow);
-  padding: 4px 8px;
-  border-radius: var(--popup-radius);
-  border: 1px solid red;
-}
 #wrap {
   height: 50vh;
   width: 50vw;
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
index 3c80f817624502b795e28fedc46b8c330d0d770b..9248cdc915af325b51822c5bcd1f2a44279c5dd9 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
@@ -100,13 +100,6 @@ const btn12 = ref(null);
   </div>
 </template>
 <style lang="scss" scoped>
-.popup-box {
-  background-color: var(--popup-bg);
-  box-shadow: var(--popup-shadow);
-  padding: 4px 8px;
-  border-radius: var(--popup-radius);
-  border: 1px solid red;
-}
 .position-wrap {
   padding: 100px;
   height: 50vh;
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupTarget.vue b/packages/opendesign/src/components/popup/__demo__/PopupTarget.vue
index ef9ad9ffb1599684a1077fead2f92d546155cb75..dd4ea8de3e4ad15383548e14b7f276399b9e4c36 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupTarget.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupTarget.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { OButton } from '../../button';
 import '../../button/style';
 import { OPopup } from '../index';
 
@@ -15,13 +13,6 @@ const content = 'this is popup content';
   </OPopup>
 </template>
 <style lang="scss" scoped>
-.popup-box {
-  background-color: var(--popup-bg);
-  box-shadow: var(--popup-shadow);
-  padding: 4px 8px;
-  border-radius: var(--popup-radius);
-  border: 1px solid red;
-}
 #wrap {
   height: 50vh;
   width: 50vw;
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
index a2d75fb3f8737d07dfaed0aa2cf4c8566d5c4bdf..8ab1c7fac86a180886da57d4da37c82cf4f0a889 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
@@ -32,11 +32,4 @@ setTimeout(() => {
 .btn {
   margin-left: 100px;
 }
-.popup-box {
-  background-color: var(--popup-bg);
-  box-shadow: var(--popup-shadow);
-  padding: 4px 8px;
-  border-radius: var(--popup-radius);
-  border: 1px solid red;
-}
 </style>
diff --git a/packages/opendesign/src/components/popup/style/var.scss b/packages/opendesign/src/components/popup/style/var.scss
index 0183f05a31f458d40ced05a5230e901904a2f7ac..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/packages/opendesign/src/components/popup/style/var.scss
+++ b/packages/opendesign/src/components/popup/style/var.scss
@@ -1,6 +0,0 @@
-.o-popup {
-  --popup-bg: var(--o-color-bg2);
-  --popup-shadow: var(--o-shadow-1);
-  --popup-gap: 4px;
-  --popup-radius: var(--o-radius-s);
-}
diff --git a/packages/opendesign/src/components/popup/types.ts b/packages/opendesign/src/components/popup/types.ts
index 38e11f56bc77343efcf09b43b85a739b2be6aebb..423e2e3ae253e3cc72e849930e4b69387e9a4969 100644
--- a/packages/opendesign/src/components/popup/types.ts
+++ b/packages/opendesign/src/components/popup/types.ts
@@ -4,7 +4,7 @@ export type PopupPositionT = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'lef
 
 export type PopupTriggerT = 'hover' | 'click' | 'focus' | 'contextmenu' | 'none';
 
-export const propupProps = {
+export const popupProps = {
   /**
    * 弹出位置
    */
@@ -113,4 +113,4 @@ export const propupProps = {
   },
 };
 
-export type PopupPropsT = ExtractPropTypes<typeof propupProps>;
\ No newline at end of file
+export type PopupPropsT = ExtractPropTypes<typeof popupProps>;
\ No newline at end of file
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index d8e82025110439e34c16cd10593ccaa4167d0856..6a59675b1ddc9662d6afb0fb227e87ec98a3c8e9 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -1,86 +1,35 @@
 <script setup lang="ts">
-import { provide, ref } from 'vue';
-import { defaultSize, defaultShape } from '../_shared/global';
-import type { SizeT, ShapeT } from '../_shared/global';
-import { IconArrowTraingleDown } from '../icons';
-import { OPopup, PopupPositionT, PopupTriggerT } from '../popup';
+import { computed, provide, ref } from 'vue';
+import { defaultSize } from '../_shared/global';
+import { IconArrowTraingleDown, IconX } from '../icons';
+import { OPopup } from '../popup';
 import { selectOptionInjectKey } from './provide';
-import { SelectOptionT } from './types';
+import { SelectOptionT, selectProps } from './types';
+import { getRoundClass } from '../_shared/style-class';
 
-interface SelectPropT {
-  /**
-   * 下拉框的值
-   * v-model
-   */
-  modelValue: string | number;
-  /**
-   * 大小
-   */
-  size?: SizeT;
-  /**
-   * 形状
-   */
-  shape?: ShapeT;
-  /**
-   * 提示文本
-   */
-  placeholder?: string;
-  /**
-   * 下拉选项触发方式
-   */
-  trigger?: PopupTriggerT;
-  /**
-   * 是否禁用
-   */
-  disabled?: boolean;
-  /**
-   * 下拉选项位置
-   */
-  optionPosition?: PopupPositionT;
-  /**
-   * 下拉选项宽度自适应规则
-   * 'auto':自动 | 'min-width':最小宽度与选择框一致 | 'width': 宽度与选择框一致
-   */
-  optionWidthMode?: 'auto' | 'min-width' | 'width';
-  /**
-   * 下拉容器自定义类
-   */
-  optionWrapClass?: string;
-  /**
-   * 是否在结束选择时，卸载下拉选项
-   * v-model
-   */
-  unmountOnHide?: boolean;
-  /**
-   * 默认初始值对应的label显示，不传则使用modelValue
-   * 当unmountOnClose为true时，存在初始值对应label无法获取问题，可使用该属性指定初始值
-   */
-  defaultLabel?: string;
-  /**
-   * 过渡名称
-   */
-  transition?: string;
-}
-const props = withDefaults(defineProps<SelectPropT>(), {
-  modelValue: '',
-  size: undefined,
-  shape: undefined,
-  placeholder: 'please select...',
-  trigger: 'click',
-  optionPosition: 'bl',
-  optionWidthMode: 'min-width',
-  optionWrapClass: '',
-  defaultLabel: '',
-  unmountOnHide: true,
-  transition: undefined,
-});
-
-const activeLabel = ref(props.defaultLabel || props.modelValue);
-const activeVal = ref(props.modelValue);
+const props = defineProps(selectProps);
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string | number): void;
   (e: 'change', value: string | number): void;
+  (e: 'clear', evt: Event): void;
 }>();
+
+const round = getRoundClass(props, 'select');
+
+const activeLabel = ref(props.defaultLabel || props.modelValue);
+const activeVal = ref(props.modelValue);
+
+const isClearable = computed(() => props.clearable && !props.disabled);
+console.log(isClearable.value);
+
+// 清除值
+const clearClick = (e: Event) => {
+  e.stopPropagation();
+  activeLabel.value = '';
+  activeVal.value = '';
+  emits('clear', e);
+};
+
 const selectRef = ref<HTMLElement>();
 
 const showOption = ref(false);
@@ -106,21 +55,32 @@ provide(selectOptionInjectKey, {
     ref="selectRef"
     class="o-select"
     :class="[
+      `o-select-${props.color}`,
+      `o-select-${props.variant}`,
       `o-select-size-${props.size || defaultSize}`,
-      `o-select-shape-${props.shape || defaultShape}`,
-      { 'is-selecting': showOption, 'is-disabled': props.disabled },
+      round.class.value,
+      {
+        'is-selecting': showOption,
+        'o-select-disabled': props.disabled,
+        'o-input-clearable': isClearable && activeVal !== '',
+      },
     ]"
+    :style="round.style.value"
   >
     <input :value="activeLabel" type="text" :placeholder="props.placeholder" class="o-select-input" readonly />
     <span class="o-select-suffix">
-      <slot name="suffix">
-        <span class="o-select-icon-arrow" :class="{ active: showOption }">
-          <IconArrowTraingleDown />
-        </span>
-      </slot>
+      <span class="o-select-suffix-wrap">
+        <slot name="suffix">
+          <span class="o-select-icon-arrow" :class="{ active: showOption }">
+            <IconArrowTraingleDown />
+          </span>
+        </slot>
+      </span>
+      <div v-if="isClearable" class="o-select-clear" @click="clearClick"><IconX class="o-select-clear-icon" /></div>
     </span>
 
     <OPopup
+      v-if="!props.disabled"
       v-model:visible="showOption"
       :transition="props.transition"
       :unmount-on-hide="props.unmountOnHide"
@@ -131,7 +91,7 @@ provide(selectOptionInjectKey, {
       :adjust-min-width="props.optionWidthMode === 'min-width'"
       :adjust-width="props.optionWidthMode === 'width'"
     >
-      <div class="o-select-options" :class="[`o-options-size-${props.size}`, props.optionWrapClass]">
+      <div class="o-select-options" :class="[`o-select-options-size-${props.size || defaultSize}`, props.optionWrapClass]">
         <slot></slot>
       </div>
     </OPopup>
diff --git a/packages/opendesign/src/components/select/__demo__/IndexSelect.vue b/packages/opendesign/src/components/select/__demo__/IndexSelect.vue
index 736151f7d54067994409454ffd004544cebbf4f6..4f307888bd309056c69a387687996c99c2de71f8 100644
--- a/packages/opendesign/src/components/select/__demo__/IndexSelect.vue
+++ b/packages/opendesign/src/components/select/__demo__/IndexSelect.vue
@@ -2,15 +2,17 @@
 import '../style';
 import '../../option/style';
 
-import SelectSizeShape from './SelectSizeShape.vue';
-import SelectDisabled from './SelectDisabled.vue';
+import SelectBasic from './SelectBasic.vue';
 import SelectPopupposition from './SelectPopupposition.vue';
 </script>
 <template>
   <div class="page-demo">
-    <SelectSizeShape />
-    <SelectDisabled />
+    <SelectBasic />
     <SelectPopupposition />
   </div>
 </template>
-<style lang="scss"></style>
+<style lang="scss">
+.page-demo {
+  padding-bottom: 100px;
+}
+</style>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectBasic.vue b/packages/opendesign/src/components/select/__demo__/SelectBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dc46b0d3a113c48f6eee3f928ac0d2a63c2a7fcd
--- /dev/null
+++ b/packages/opendesign/src/components/select/__demo__/SelectBasic.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSelect } from '../index';
+import { OOption } from '../../option';
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
+];
+const selectVal1 = ref('');
+const selectVal2 = ref(options[0].value);
+</script>
+<template>
+  <h4>Color & Variant</h4>
+  <section>
+    <div>Outline</div>
+    <div class="row">
+      <OSelect v-model="selectVal1" placeholder="normal + outline">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+      <OSelect v-model="selectVal1" color="success" placeholder="normal + success">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+      <OSelect v-model="selectVal1" color="warning" placeholder="normal + warning">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+      <OSelect v-model="selectVal1" color="danger" placeholder="normal + danger">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+    </div>
+    <div>Solid</div>
+    <div class="row">
+      <OSelect v-model="selectVal1" placeholder="normal + outline" variant="solid">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+      <OSelect v-model="selectVal1" color="success" variant="solid" placeholder="normal + success">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+      <OSelect v-model="selectVal1" color="warning" variant="solid" placeholder="normal + warning">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+      <OSelect v-model="selectVal1" color="danger" variant="solid" placeholder="normal + danger">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+    </div>
+  </section>
+  <h4>Round & Size</h4>
+  <section>
+    <div>default</div>
+    <div class="row">
+      <OSelect v-model="selectVal1" size="small">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+
+      <OSelect v-model="selectVal1">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+
+      <OSelect v-model="selectVal1" size="large">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+    </div>
+    <div>round="pill"</div>
+    <div class="row">
+      <OSelect v-model="selectVal1" size="small" round="pill">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+
+      <OSelect v-model="selectVal1" round="pill">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+
+      <OSelect v-model="selectVal1" size="large" round="pill">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+    </div>
+    <div>round="12px"</div>
+    <div class="row">
+      <OSelect v-model="selectVal1" size="small" round="12px">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+
+      <OSelect v-model="selectVal1" round="12px">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+
+      <OSelect v-model="selectVal1" size="large" round="12px">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+    </div>
+  </section>
+  <h4>Disabled</h4>
+  <section>
+    <div>Select disabled</div>
+    <div class="row">
+      <OSelect v-model="selectVal1" placeholder="normal + outline" disabled>
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+      <OSelect v-model="selectVal1" color="success" placeholder="normal + success" disabled>
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+      <OSelect v-model="selectVal1" color="warning" placeholder="normal + warning" disabled>
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+      <OSelect v-model="selectVal1" color="danger" placeholder="normal + danger" disabled>
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+    </div>
+    <div class="row">
+      <OSelect v-model="selectVal1" placeholder="normal + outline" variant="solid" disabled>
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+      <OSelect v-model="selectVal1" color="success" variant="solid" placeholder="normal + success" disabled>
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+      <OSelect v-model="selectVal1" color="warning" variant="solid" placeholder="normal + warning" disabled>
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+      <OSelect v-model="selectVal1" color="danger" variant="solid" placeholder="normal + danger" disabled>
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </OSelect>
+    </div>
+    <div>Option disabled</div>
+    <div class="row">
+      <OSelect v-model="selectVal1" placeholder="normal + outline">
+        <OOption :label="options[0].label" :value="options[0].value" />
+        <OOption :label="options[1].label" :value="options[1].value" disabled />
+        <OOption :label="options[2].label" :value="options[2].value" disabled />
+        <OOption :label="options[3].label" :value="options[3].value" />
+      </OSelect>
+    </div>
+  </section>
+  <h4>Clearable</h4>
+  <section>
+    <OSelect v-model="selectVal1" placeholder="select..." clearable>
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" />
+      <OOption :label="options[2].label" :value="options[2].value" />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue b/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue
deleted file mode 100644
index ac3c4203e7475a40b788c74ce6674fa1cacba20a..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OSelect } from '../index';
-import { OOption } from '../../option';
-
-const selectVal = ref('opt1');
-const selectVal2 = ref('');
-const options = [
-  { label: 'option 1', value: 'opt1' },
-  { label: 'option 2', value: 'opt2' },
-  { label: 'option 3', value: 'opt3' },
-  { label: 'option 4', value: 'opt4' },
-];
-</script>
-<template>
-  <h4>Disabled</h4>
-  <section>
-    <OSelect v-model="selectVal2" disabled>
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-      <OOption :label="options[2].label" :value="options[2].value" disabled />
-      <OOption :label="options[3].label" :value="options[3].value" />
-    </OSelect>
-
-    <OSelect v-model="selectVal">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-      <OOption :label="options[2].label" :value="options[2].value" />
-      <OOption :label="options[3].label" :value="options[3].value" />
-    </OSelect>
-
-    <OSelect v-model="selectVal2">
-      <OOption :value="options[0].value" />
-      <OOption :value="options[1].value" disabled />
-    </OSelect>
-  </section>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue b/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
index 0fc7aaab5a83c04588b09285ab5b2a8f5f58ae73..e8cbd05de08f134427194c486add727b5367edbf 100644
--- a/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
+++ b/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
@@ -3,98 +3,88 @@ import { ref } from 'vue';
 import { OSelect } from '../index';
 import { OOption } from '../../option';
 
-const selectVal = ref('opt1');
+const selectVal = ref('option 1');
 const selectVal2 = ref('');
 const options = [
   { label: 'option 1', value: 'opt1' },
   { label: 'option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
 ];
 </script>
 <template>
   <h4>Option Position</h4>
   <section>
     <div>
-      <span>TL:</span
-      ><OSelect v-model="selectVal" option-position="tl">
-        <OOption :label="options[0].label" :value="options[0].value" />
-        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <span>TL:</span>
+      <OSelect v-model="selectVal" option-position="tl">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
     <div>
-      <span>TOP:</span
-      ><OSelect v-model="selectVal2" option-position="top" trigger="hover">
-        <OOption :value="options[0].value" />
-        <OOption :value="options[1].value" disabled />
+      <span>TOP:</span>
+      <OSelect v-model="selectVal2" option-position="top" trigger="hover" placeholder="on hover">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
     <div>
-      <span>TR:</span
-      ><OSelect v-model="selectVal2" option-position="tr">
-        <OOption :label="options[0].label" :value="options[0].value" />
-        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <span>TR:</span>
+      <OSelect v-model="selectVal2" option-position="tr">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
     <div>
-      <span>BL:</span
-      ><OSelect v-model="selectVal2" option-position="bl">
-        <OOption :label="options[0].label" :value="options[0].value" />
-        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <span>BL:</span>
+      <OSelect v-model="selectVal2" option-position="bl">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
     <div>
-      <span>BOTTOM:</span
-      ><OSelect v-model="selectVal2" option-position="bottom">
-        <OOption :label="options[0].label" :value="options[0].value" />
-        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <span>BOTTOM:</span>
+      <OSelect v-model="selectVal2" option-position="bottom">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
     <div>
-      <span>BR:</span
-      ><OSelect v-model="selectVal2" option-position="br">
-        <OOption :label="options[0].label" :value="options[0].value" />
-        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <span>BR:</span>
+      <OSelect v-model="selectVal2" option-position="br">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
     <div>
-      <span>LT:</span
-      ><OSelect v-model="selectVal2" option-position="lt">
-        <OOption :label="options[0].label" :value="options[0].value" />
-        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <span>LT:</span>
+      <OSelect v-model="selectVal2" option-position="lt">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
     <div>
-      <span>LEFT:</span
-      ><OSelect v-model="selectVal2" option-position="left">
-        <OOption :label="options[0].label" :value="options[0].value" />
-        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <span>LEFT:</span>
+      <OSelect v-model="selectVal2" option-position="left">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
     <div>
-      <span>LB:</span
-      ><OSelect v-model="selectVal2" option-position="lb">
-        <OOption :label="options[0].label" :value="options[0].value" />
-        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <span>LB:</span>
+      <OSelect v-model="selectVal2" option-position="lb">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
     <div>
-      <span>RT:</span
-      ><OSelect v-model="selectVal2" option-position="rt">
-        <OOption :label="options[0].label" :value="options[0].value" />
-        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <span>RT:</span>
+      <OSelect v-model="selectVal2" option-position="rt">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
     <div>
-      <span>RIGHT:</span
-      ><OSelect v-model="selectVal2" option-position="right">
-        <OOption :label="options[0].label" :value="options[0].value" />
-        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <span>RIGHT:</span>
+      <OSelect v-model="selectVal2" option-position="right">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
     <div>
-      <span>RB:</span
-      ><OSelect v-model="selectVal2" option-position="rb">
-        <OOption :label="options[0].label" :value="options[0].value" />
-        <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <span>RB:</span>
+      <OSelect v-model="selectVal2" option-position="rb">
+        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
     </div>
   </section>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectSize.vue b/packages/opendesign/src/components/select/__demo__/SelectSize.vue
deleted file mode 100644
index b07a073441a5ca0b22c5f7bef829353d9ecbbf02..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/select/__demo__/SelectSize.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OSelect } from '../index';
-import { OOption } from '../../option';
-const selectVal2 = ref('');
-const options = [
-  { label: 'option 1', value: 'opt1' },
-  { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
-  { label: 'option 3', value: 'opt3' },
-  { label: 'option 4', value: 'opt4' },
-];
-const selectVal = ref(options[0].value);
-</script>
-<template>
-  <h4>Size</h4>
-  <section>
-    <OSelect v-model="selectVal" size="large" :default-label="options[0].label">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" />
-      <OOption :label="options[2].label" :value="options[2].value" />
-      <OOption :label="options[3].label" :value="options[3].value" />
-    </OSelect>
-
-    <OSelect v-model="selectVal2" placeholder="click to select...">
-      <OOption :value="options[0].value" />
-      <OOption :value="options[1].value" disabled />
-    </OSelect>
-
-    <OSelect v-model="selectVal2" size="small">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-      <OOption :label="options[2].label" :value="options[2].value" />
-      <OOption :label="options[3].label" :value="options[3].value" />
-    </OSelect>
-  </section>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectSizeShape.vue b/packages/opendesign/src/components/select/__demo__/SelectSizeShape.vue
deleted file mode 100644
index 16ed27a7e77cc174dbfdc68296f996967346dd9c..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/select/__demo__/SelectSizeShape.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OSelect } from '../index';
-import { OOption } from '../../option';
-const selectVal2 = ref('');
-const options = [
-  { label: 'option 1', value: 'opt1' },
-  { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
-  { label: 'option 3', value: 'opt3' },
-  { label: 'option 4', value: 'opt4' },
-];
-const selectVal = ref(options[0].value);
-</script>
-<template>
-  <h4>Size</h4>
-  <section>
-    <OSelect v-model="selectVal" size="large" :default-label="options[0].label">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" />
-      <OOption :label="options[2].label" :value="options[2].value" />
-      <OOption :label="options[3].label" :value="options[3].value" />
-    </OSelect>
-
-    <OSelect v-model="selectVal2" placeholder="click to select...">
-      <OOption :value="options[0].value" />
-      <OOption :value="options[1].value" disabled />
-    </OSelect>
-
-    <OSelect v-model="selectVal2" size="small">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-      <OOption :label="options[2].label" :value="options[2].value" />
-      <OOption :label="options[3].label" :value="options[3].value" />
-    </OSelect>
-  </section>
-  <h4>Round</h4>
-  <section>
-    <OSelect v-model="selectVal" size="large" :default-label="options[0].label" shape="round">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" />
-      <OOption :label="options[2].label" :value="options[2].value" />
-      <OOption :label="options[3].label" :value="options[3].value" />
-    </OSelect>
-
-    <OSelect v-model="selectVal2" shape="round">
-      <OOption :value="options[0].value" />
-      <OOption :value="options[1].value" disabled />
-    </OSelect>
-
-    <OSelect v-model="selectVal2" size="small" shape="round">
-      <OOption :label="options[0].label" :value="options[0].value" />
-      <OOption :label="options[1].label" :value="options[1].value" disabled />
-      <OOption :label="options[2].label" :value="options[2].value" />
-      <OOption :label="options[3].label" :value="options[3].value" />
-    </OSelect>
-  </section>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/select/style/index.scss b/packages/opendesign/src/components/select/style/index.scss
index 122ad90c9b5785a97c5e4f20e62b7e498efc4736..8f149a7bbf7ef19aea51b5c95e66d2265ad5c6b2 100644
--- a/packages/opendesign/src/components/select/style/index.scss
+++ b/packages/opendesign/src/components/select/style/index.scss
@@ -1,45 +1,32 @@
 @use './var.scss';
 
 .o-select {
-  border: 1px solid var(--select-border);
-  border-radius: 4px;
-  padding: 0 12px;
-  cursor: pointer;
-  color: var(--select-color);
   display: inline-flex;
-  height: var(--select-height-m);
+  padding: var(--select-padding);
+  color: var(--select-color);
+  height: var(--select-height);
+  border-radius: var(--select-radius);
+  border: 1px solid var(--select-bd-color);
+  background-color: var(--select-bg-color);
+  cursor: pointer;
 
-  &:hover {
-    border-color: var(--select-border_hover);
-    background-color: var(--select-bg_hover);
+  &:not(.o-select-disabled) {
+    &:hover {
+      border-color: var(--select-bd-color-hover);
+      background-color: var(--select-bg-color-hover);
+    }
+    &.is-selecting {
+      border-color: var(--select-bd-color-focus);
+      background-color: var(--select-bg-color-focus);
+    }
   }
-  &.is-selecting {
-    border-color: var(--select-border_hover);
-    background-color: var(--select-bg_hover);
-  }
-  &.is-disabled {
-    cursor: not-allowed;
-    border-color: var(--select-border_disabled);
-    background-color: var(--select-bg_disabled);
-    color: var(--select-color_disabled);
-  }
-}
-.o-select-size-small {
-  padding: 0 6px 0 12px;
-  height: var(--select-height-s);
-  border-radius: var(--select-radius-s);
-}
-
-.o-select-size-medium {
-  padding: 4px 8px 4px 12px;
-  height: var(--select-height-m);
-  border-radius: var(--select-radius-m);
 }
 
-.o-select-size-large {
-  padding: 4px 12px 4px 16px;
-  height: var(--select-height-l);
-  border-radius: var(--select-radius-l);
+.o-select-disabled {
+  cursor: not-allowed;
+  color: var(--select-color-disabled);
+  border-color: var(--select-bd-color-disabled);
+  background-color: var(--select-bg-color-disabled);
 }
 
 .o-select-input {
@@ -51,11 +38,15 @@
   background-color: transparent;
   display: inline-flex;
   width: 100%;
+  font-size: var(--select-text-size);
+  line-height: var(--select-text-height);
 }
 .o-select-suffix {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   flex-shrink: 0;
+  position: relative;
 }
 .o-select-icon-arrow {
   font-size: 24px;
@@ -69,14 +60,47 @@
   &.active {
     transform: rotateX(180deg);
   }
-}
-.o-select-shape-round {
-  border-radius: 100px;
+  .o-select-disabled & {
+    color: var(--select-icon-color-disabled);
+  }
 }
 
 .o-select-options {
   background-color: var(--select-options-bg);
   box-shadow: var(--select-options-shadow);
   border-radius: var(--select-options-radius);
-  border: var(--select-options-border);
+  border: var(--select-options-bd);
+}
+
+.o-select-clear {
+  position: absolute;
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+  opacity: 0;
+  transform: scale(0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--input-icon-color);
+  background-color: var(--input-icon-bg-color);
+  border-radius: 50%;
+  z-index: 1;
+}
+.o-select-suffix-wrap {
+  transition: all var(var(--o-duration-m1)) var(--o-easing-standard-out);
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.o-input-clearable {
+  &:hover {
+    .o-select-suffix-wrap {
+      visibility: hidden;
+      opacity: 0;
+    }
+    .o-select-clear {
+      visibility: visible;
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
 }
diff --git a/packages/opendesign/src/components/select/style/var.scss b/packages/opendesign/src/components/select/style/var.scss
index 3788e559e340edeb8d8c7a98a1c158801905a709..7b80cec8034814cd1a2832675cfdd5d622835790 100644
--- a/packages/opendesign/src/components/select/style/var.scss
+++ b/packages/opendesign/src/components/select/style/var.scss
@@ -2,32 +2,124 @@
   --select-text-size: var(--o-font_size-text);
   --select-text-height: var(--o-line_height-text);
 
-  --select-height-s: var(--o-size-s);
-  --select-height-m: var(--o-size-m);
-  --select-height-l: var(--o-size-l);
+  --select-color: var(--o-color-info2);
+  --select-color-disabled: var(--o-color-info4);
 
-  --select-radius-s: var(--o-radius-s);
-  --select-radius-m: var(--o-radius-s);
-  --select-radius-l: var(--o-radius-s);
+  --select-bg-color: transparent;
+  --select-bg-color-hover: transparent;
+  --select-bg-color-focus: var(--o-color-control-light);
 
-  --select-border: var(--o-color-info1);
-  --select-border_hover: var(--o-color-primary2);
-  --select-border_active: var(--o-color-primary3);
-  --select-border_disabled: var(--o-color-info1);
-
-  --select-bg: var(--o-color-bg1);
-  --select-bg_hover: var(--o-color-bg2);
-  --select-bg_disabled: var(--o-color-info4);
-
-  --select-color: var(--o-color-text2);
-  --select-color_disabled: var(--o-color-text4);
-
-  --select-icon-color: var(--o-color-text3);
+  --select-icon-color: var(--o-color-info3);
+  --select-icon-color-disabled: var(--o-color-info4);
+  --input-icon-bg-color: var(--o-color-control1-light);
 }
 
 .o-select-options {
-  --select-options-bg: var(--o-color-bg2);
+  --select-options-bg: var(--o-color-control-light);
   --select-options-shadow: none;
-  --select-options-border: 1px solid var(--o-color-primary2);
+  --select-options-bd: 1px solid var(--o-color-primary2);
   --select-options-radius: var(--o-radius-s);
 }
+
+.o-select-normal {
+  --select-bd-color: var(--o-color-control1);
+  --select-bd-color-hover: var(--o-color-primary2);
+  --select-bd-color-focus: var(--o-color-primary3);
+  --select-bd-color-disabled: var(--o-color-control4);
+
+  &.o-select-solid {
+    --select-bd-color: var(--o-color-control1-light);
+    --select-bd-color-hover: var(--o-color-control2-light);
+
+    --select-bg-color: var(--o-color-control1-light);
+    --select-bg-color-hover: var(--o-color-control2-light);
+    --select-bg-color-disabled: var(--o-color-control4-light);
+  }
+}
+
+.o-select-success {
+  --select-bd-color: var(--o-color-success1);
+  --select-bd-color-hover: var(--o-color-success2);
+  --select-bd-color-focus: var(--o-color-success3);
+  --select-bd-color-disabled: var(--o-color-success4);
+
+  &.o-select-solid {
+    --select-bd-color: var(--o-color-success1-light);
+    --select-bd-color-hover: var(--o-color-success2-light);
+
+    --select-bg-color: var(--o-color-success1-light);
+    --select-bg-color-hover: var(--o-color-success2-light);
+    --select-bg-color-disabled: var(--o-color-success4-light);
+  }
+}
+
+.o-select-warning {
+  --select-bd-color: var(--o-color-warning1);
+  --select-bd-color-hover: var(--o-color-warning2);
+  --select-bd-color-focus: var(--o-color-warning3);
+  --select-bd-color-disabled: var(--o-color-warning4);
+
+  &.o-select-solid {
+    --select-bd-color: var(--o-color-warning1-light);
+    --select-bd-color-hover: var(--o-color-warning2-light);
+
+    --select-bg-color: var(--o-color-warning1-light);
+    --select-bg-color-hover: var(--o-color-warning2-light);
+    --select-bg-color-disabled: var(--o-color-warning4-light);
+  }
+}
+
+.o-select-danger {
+  --select-bd-color: var(--o-color-danger1);
+  --select-bd-color-hover: var(--o-color-danger2);
+  --select-bd-color-focus: var(--o-color-danger3);
+  --select-bd-color-disabled: var(--o-color-danger4);
+
+  &.o-select-solid {
+    --select-bd-color: var(--o-color-danger1-light);
+    --select-bd-color-hover: var(--o-color-danger2-light);
+
+    --select-bg-color: var(--o-color-danger1-light);
+    --select-bg-color-hover: var(--o-color-danger2-light);
+    --select-bg-color-disabled: var(--o-color-danger4-light);
+  }
+}
+
+.o-select-size-small {
+  --select-height: var(--o-size-s);
+  --select-text-size: var(--o-font_size-tip1);
+  --select-text-height: var(--o-line_height-tip1);
+  --select-padding: 0 6px 0 8px;
+  --select-radius: var(--o-radius-s);
+}
+.o-select-size-medium {
+  --select-height: var(--o-size-m);
+  --select-text-size: var(--o-font_size-text);
+  --select-text-height: var(--o-line_height-text);
+  --select-padding: 4px 8px 4px 12px;
+  --select-radius: var(--o-radius-m);
+}
+.o-select-size-large {
+  --select-height: var(--o-size-l);
+  --select-text-size: var(--o-font_size-h4);
+  --select-text-height: var(--o-line_height-h4);
+  --select-padding: 4px 12px 4px 16px;
+  --select-radius: var(--o-radius-l);
+}
+.o-select-round-pill {
+  --select-radius: var(--o-size-l);
+}
+
+.o-option {
+  .o-select-options-size-small & {
+    --option-padding: 3px 8px;
+    --option-text-size: var(--o-font_size-tip1);
+    --option-text-height: var(--o-line_height-tip1);
+  }
+
+  .o-select-options-size-large & {
+    --option-padding: 7px 16px;
+    --option-text-size: var(--o-font_size-h4);
+    --option-text-height: var(--o-line_height-h4);
+  }
+}
diff --git a/packages/opendesign/src/components/select/types.ts b/packages/opendesign/src/components/select/types.ts
index 859f1ef1de9eb8fed66aa5dd32c2d52f832f96f6..dc3adb8c4b6c26c79351a4fcd64f4b61c70adf0d 100644
--- a/packages/opendesign/src/components/select/types.ts
+++ b/packages/opendesign/src/components/select/types.ts
@@ -1,3 +1,120 @@
+import { PopupPositionT, PopupTriggerT } from '../popup';
+import { ExtractPropTypes, PropType } from 'vue';
+import type { SizeT, RoundT, VariantT } from '../_shared/global';
+
+export const selectProps = {
+  /**
+   * 下拉框的值
+   * v-model
+   */
+  modelValue: {
+    type: [String, Number] as PropType<string | number>,
+  },
+  /**
+   * 下拉框的默认值
+   * 非受控
+   */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /**
+   * 大小
+   */
+  size: {
+    type: String as PropType<SizeT>,
+  },
+  /**
+   * 圆角值
+   */
+  round: {
+    type: String as PropType<RoundT>
+  },
+  /**
+   * 颜色类型
+   */
+  color: {
+    type: String as PropType<'normal' | 'success' | 'warning' | 'danger'>,
+    default: 'normal'
+  },
+  /**
+   * 按钮类型：ColorT
+   */
+  variant: {
+    type: String as PropType<VariantT>,
+    default: 'outline'
+  },
+  /**
+   * 提示文本
+   */
+  placeholder: {
+    type: String,
+    default: 'please select...'
+  },
+  /**
+   * 是否可以清除
+   */
+  clearable: {
+    type: Boolean,
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+  },
+  /**
+   * 下拉选项触发方式
+   */
+  trigger: {
+    type: String as PropType<PopupTriggerT>,
+    default: 'click'
+  },
+  /**
+   * 下拉选项位置
+   */
+  optionPosition: {
+    type: String as PropType<PopupPositionT>,
+    default: 'bl'
+  },
+  /**
+   * 下拉选项宽度自适应规则
+   * 'auto':自动 | 'min-width':最小宽度与选择框一致 | 'width': 宽度与选择框一致
+   */
+  optionWidthMode: {
+    type: String as PropType<'auto' | 'min-width' | 'width'>,
+    default: 'min-width'
+  },
+  /**
+   * 下拉容器自定义类
+   */
+  optionWrapClass: {
+    type: String,
+  },
+  /**
+   * 是否在结束选择时，卸载下拉选项
+   * v-model
+   */
+  unmountOnHide: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 默认初始值对应的label显示，不传则使用modelValue
+   * 当unmountOnClose为true时，存在初始值对应label无法获取问题，可使用该属性指定初始值
+   */
+  defaultLabel: {
+    type: String,
+  },
+  /**
+   * 过渡名称
+   */
+  transition: {
+    type: String,
+  },
+};
+
+export type SelectPropsT = ExtractPropTypes<typeof selectProps>;
+
 export interface SelectOptionT {
   label: string;
   value: string | number;
diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css
index 72e07e8bbf0b961965f28a5ed46b3f92856b8709..978c7c178e10abacb8eed76e0501bf5db37adca1 100644
--- a/packages/opendesign/src/components/style/dark.token.css
+++ b/packages/opendesign/src/components/style/dark.token.css
@@ -1,5 +1,19 @@
 /* theme: dark */
 :root[theme="dark"] {
+  /**
+   * @name 
+   * @type palette
+   * @group base
+   * @description 
+   */
+  --o-color-white: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group base
+   * @description 
+   */
+  --o-color-black: 0, 0, 0;
   /**
    * @name 
    * @type palette
@@ -592,7 +606,14 @@
    * @name 
    * @type color
    * @group control
-   * @description 常规
+   * @description 很浅背景
+   */
+  --o-color-control-light: rgb(var(--o-gray-1));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规，常用于边框
    */
   --o-color-control1: rgb(var(--o-mixedgray-3));
   /**
@@ -620,28 +641,28 @@
    * @name 
    * @type color
    * @group control
-   * @description 浅/控件常规
+   * @description 常规-浅，常用于背景
    */
   --o-color-control1-light: rgb(var(--o-mixedgray-3));
   /**
    * @name 
    * @type color
    * @group control
-   * @description 浅/控件悬浮
+   * @description 悬浮-浅
    */
   --o-color-control2-light: rgb(var(--o-mixedgray-4));
   /**
    * @name 
    * @type color
    * @group control
-   * @description 浅/控件激活
+   * @description 激活-浅
    */
   --o-color-control3-light: rgb(var(--o-mixedgray-5));
   /**
    * @name 
    * @type color
    * @group control
-   * @description 浅/控件禁用
+   * @description 禁用-浅
    */
   --o-color-control4-light: rgb(var(--o-mixedgray-2));
   /**
diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css
index 0f947c26b12ef5f01f15a8f53d9fb0ebbddc8471..1df9a2b33a2371abf1d5dfebb94e7129042cd110 100644
--- a/packages/opendesign/src/components/style/default-light.token.css
+++ b/packages/opendesign/src/components/style/default-light.token.css
@@ -1,6 +1,20 @@
 /* theme: default|light */
 :root,
 :root[theme="light"] {
+  /**
+   * @name 
+   * @type palette
+   * @group base
+   * @description 
+   */
+  --o-color-white: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group base
+   * @description 
+   */
+  --o-color-black: 0, 0, 0;
   /**
    * @name 
    * @type palette
@@ -593,7 +607,14 @@
    * @name 
    * @type color
    * @group control
-   * @description 常规
+   * @description 很浅背景
+   */
+  --o-color-control-light: rgb(var(--o-gray-1));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规，常用于边框
    */
   --o-color-control1: rgb(var(--o-mixedgray-3));
   /**
@@ -621,28 +642,28 @@
    * @name 
    * @type color
    * @group control
-   * @description 浅/控件常规
+   * @description 常规-浅，常用于背景
    */
   --o-color-control1-light: rgb(var(--o-mixedgray-3));
   /**
    * @name 
    * @type color
    * @group control
-   * @description 浅/控件悬浮
+   * @description 悬浮-浅
    */
   --o-color-control2-light: rgb(var(--o-mixedgray-4));
   /**
    * @name 
    * @type color
    * @group control
-   * @description 浅/控件激活
+   * @description 激活-浅
    */
   --o-color-control3-light: rgb(var(--o-mixedgray-5));
   /**
    * @name 
    * @type color
    * @group control
-   * @description 浅/控件禁用
+   * @description 禁用-浅
    */
   --o-color-control4-light: rgb(var(--o-mixedgray-2));
   /**
diff --git a/packages/opendesign/src/components/textarea/OTextarea.vue b/packages/opendesign/src/components/textarea/OTextarea.vue
index e20e96dc98ed0110876190738bfb0499cd9b9480..8d55aa7968ab21d0d34a5c129935646bc423cb16 100644
--- a/packages/opendesign/src/components/textarea/OTextarea.vue
+++ b/packages/opendesign/src/components/textarea/OTextarea.vue
@@ -1,99 +1,15 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
-import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
+import { defaultSize, defaultShape } from '../_shared/global';
 import { isFunction } from '../_shared/is';
 import { IconX } from '../icons';
 import { trigger } from '../_shared/event';
 import { toInputString } from './textarea';
 import { OResizeObserver } from '../resize-observer';
+import { textareaProps } from './types';
+import { getRoundClass } from '../_shared/style-class';
 
-interface InputPropT {
-  /**
-   * 下拉框的值
-   * v-model
-   */
-  modelValue?: string;
-  /**
-   * 下拉框的默认值
-   * 非受控
-   */
-  defaultValue?: string;
-  /**
-   * 大小
-   */
-  size?: SizeT;
-  /**
-   * 形状
-   */
-  shape?: ShapeT;
-  /**
-   * 提示文本
-   */
-  placeholder?: string;
-  /**
-   * 状态，显示指定，用于非表单场景
-   */
-  status?: 'success' | 'warning' | 'error';
-  /**
-   * 是否禁用
-   */
-  disabled?: boolean;
-  /**
-   * 是否只读
-   */
-  readonly?: boolean;
-  /**
-   * 是否可以清除
-   */
-  clearable?: boolean;
-  /**
-   * 是否支持调整尺寸
-   */
-  resize?: 'both' | 'horizontal' | 'vertical' | 'none';
-  /**
-   * 显示的行数
-   */
-  rows?: number;
-  /**
-   * 显示的行数
-   */
-  cols?: number;
-  /**
-   * 最大字符长度
-   */
-  maxLength?: number;
-  /**
-   * 超过最大字符长度时是否允许输入
-   */
-  inputOutLimit?: boolean;
-  /**
-   * 是否自动计算高度
-   */
-  autoHeight?: boolean;
-  /**
-   * 获取长度方法
-   */
-  getLength?: (val: string) => number;
-  /**
-   * 高度自适应
-   */
-  autoResize?: boolean;
-}
-const props = withDefaults(defineProps<InputPropT>(), {
-  modelValue: undefined,
-  defaultValue: '',
-  size: undefined,
-  shape: undefined,
-  placeholder: '',
-  clearable: true,
-  status: undefined,
-  resize: 'vertical',
-  rows: 3,
-  cols: 20,
-  maxLength: undefined,
-  getLength: undefined,
-  inputOutLimit: true,
-});
+const props = defineProps(textareaProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string): void;
@@ -136,9 +52,10 @@ const getValueLength = (val: string) => {
 const currentLength = computed(() => getValueLength(realValue.value));
 const isOutLengthLimit = computed(() => (props.maxLength !== undefined ? currentLength.value > props.maxLength : false));
 
-const status = computed(() => {
-  return props.status ?? (isOutLengthLimit.value ? 'error' : '');
+const color = computed(() => {
+  return isOutLengthLimit.value ? 'danger' : props.color;
 });
+const round = getRoundClass(props, 'textarea');
 
 // 是否聚焦状态
 const isFocus = ref(false);
@@ -229,21 +146,24 @@ const onMirrorResize = (en: ResizeObserverEntry) => {
   <label
     class="o-textarea"
     :class="[
+      `o-textarea-${color}`,
+      `o-textarea-${props.variant}`,
       `o-textarea-size-${props.size || defaultSize}`,
-      `o-textarea-shape-${props.shape || defaultShape}`,
-      status ? `o-textarea-status-${status}` : '',
+      round.class.value,
       {
         'o-textarea-disabled': props.disabled,
         'o-textarea-focus': isFocus,
         'o-textarea-auto-height': props.autoHeight,
       },
     ]"
+    :style="round.style.value"
     @mousedown="onMouseDown"
   >
     <div
       class="o-textarea-wrap"
       :class="{
         'o-textarea-clearable': props.clearable && realValue !== '' && !props.disabled,
+        'is-focus': isFocus,
       }"
     >
       <textarea
@@ -257,7 +177,7 @@ const onMirrorResize = (en: ResizeObserverEntry) => {
           resize: resizeValue,
           height: textareaHeight + 'px',
         }"
-        :maxlength="props.inputOutLimit ? '' : props.maxLength"
+        :maxlength="props.inputOnOutLimit ? '' : props.maxLength"
         :rows="props.rows"
         :cols="props.cols"
         @focus="onFocus"
diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
index 7a0cf621044f97eca4f1edc6380b1ce2b3f6925d..605910e6b9f158187c96a5a9b95835e93e62991e 100644
--- a/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
+++ b/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
@@ -2,7 +2,8 @@
 import { ref } from 'vue';
 import { OTextarea } from '../index';
 
-const val1 = ref('this is input value');
+const val1 = ref('');
+const val3 = ref('');
 const val2 = ref('this is input value');
 setTimeout(() => {
   // val1.value += '---';
@@ -13,55 +14,64 @@ const printEvent = (event: string, val?: string | number) => {
 };
 </script>
 <template>
-  <h4>Size</h4>
-  <div>
-    <div>val1:{{ val1 }}</div>
-    <section style="align-items: flex-start">
-      <OTextarea
-        v-model="val1"
-        size="small"
-        @blur="(v) => printEvent('blur', v)"
-        @change="(v) => printEvent('change', v)"
-        @input="(v) => printEvent('input', v)"
-        @focus="(v) => printEvent('focus', v)"
-        @keydown="(v) => printEvent('keydown', v)"
-      />
-      <OTextarea v-model="val1" size="normal" />
-      <OTextarea v-model="val1" size="large" />
-    </section>
-  </div>
-  <h4>Round</h4>
-  <div>
-    <div>val1:{{ val1 }}</div>
-    <section style="align-items: flex-start">
-      <OTextarea v-model="val1" size="small" shape="round" />
-      <OTextarea v-model="val1" size="normal" resize="both" shape="round" />
-      <OTextarea v-model="val1" size="large" shape="round" />
-    </section>
-  </div>
-  <h4>Status</h4>
+  <h4>Color & Variant</h4>
   <section>
-    <div>
-      <div>success:</div>
-      <OTextarea v-model="val1" status="success" />
+    <div>Outline</div>
+    <div class="row">
+      <OTextarea v-model="val1" placeholder="normal + outline" />
+      <OTextarea v-model="val1" color="success" placeholder="success + outline" />
+      <OTextarea v-model="val1" color="warning" placeholder="warning + outline" />
+      <OTextarea v-model="val1" color="danger" placeholder="danger + outline" />
     </div>
-    <div>
-      <div>warning:</div>
-      <OTextarea v-model="val1" status="warning" />
-    </div>
-    <div>
-      <div>error:(default)</div>
-      <OTextarea v-model="val1" status="error" />
+    <div>Solid</div>
+    <div class="row">
+      <OTextarea v-model="val3" variant="solid" placeholder="normal + solid" />
+      <OTextarea v-model="val3" variant="solid" color="success" placeholder="success + solid" />
+      <OTextarea v-model="val3" variant="solid" color="warning" placeholder="warning + solid" />
+      <OTextarea v-model="val3" variant="solid" color="danger" placeholder="danger + solid" />
     </div>
   </section>
-  <h4>Disabled & Readonly</h4>
+  <h4>Size & Round</h4>
   <div>
-    <div>val1:{{ val1 }}</div>
     <section>
-      <OTextarea v-model="val1" disabled />
-      <OTextarea v-model="val1" readonly />
+      <div>default</div>
+      <div class="row" style="align-items: flex-start">
+        <OTextarea v-model="val1" size="small" />
+        <OTextarea v-model="val1" size="medium" resize="both" />
+        <OTextarea v-model="val1" size="large" />
+      </div>
+      <div>round="pill"</div>
+      <div class="row" style="align-items: flex-start">
+        <OTextarea v-model="val1" size="small" round="pill" />
+        <OTextarea v-model="val1" size="medium" resize="both" round="pill" />
+        <OTextarea v-model="val1" size="large" round="pill" />
+      </div>
+      <div>round="12px"</div>
+      <div class="row" style="align-items: flex-start">
+        <OTextarea v-model="val1" size="small" round="12px" />
+        <OTextarea v-model="val1" size="medium" resize="both" round="12px" />
+        <OTextarea v-model="val1" size="large" round="12px" />
+      </div>
     </section>
   </div>
+
+  <h4>Disabled</h4>
+  <section>
+    <div>Outline</div>
+    <div class="row">
+      <OTextarea v-model="val1" placeholder="normal + outline" disabled />
+      <OTextarea v-model="val1" color="success" placeholder="success + outline" disabled />
+      <OTextarea v-model="val1" color="warning" placeholder="warning + outline" disabled />
+      <OTextarea v-model="val1" color="danger" placeholder="danger + outline" disabled />
+    </div>
+    <div>Solid</div>
+    <div class="row">
+      <OTextarea v-model="val3" variant="solid" placeholder="normal + solid" disabled />
+      <OTextarea v-model="val3" variant="solid" color="success" placeholder="success + solid" disabled />
+      <OTextarea v-model="val3" variant="solid" color="warning" placeholder="warning + solid" disabled />
+      <OTextarea v-model="val3" variant="solid" color="danger" placeholder="danger + solid" disabled />
+    </div>
+  </section>
   <h4>Resize</h4>
   <section>
     <div>
@@ -85,16 +95,17 @@ const printEvent = (event: string, val?: string | number) => {
   <section>
     <div>
       <div>MaxLength: 10 | val2:{{ val2 }}</div>
-      <OTextarea v-model="val1" :max-length="10" />
+      <OTextarea v-model="val2" :max-length="10" />
     </div>
     <div>
       <div>input-out-limit：超出长度时不能输入</div>
-      <OTextarea v-model="val1" :max-length="10" :input-out-limit="false" />
+      <OTextarea v-model="val2" :max-length="10" :input-out-limit="false" />
     </div>
   </section>
   <h4>Clearable</h4>
   <section>
-    <OTextarea v-model="val1" :max-length="10" size="large" shape="round" :clearable="false" />
+    <div>clearable="false"</div>
+    <OTextarea v-model="val1" :max-length="10" size="large" :clearable="false" />
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/textarea/style/index.scss b/packages/opendesign/src/components/textarea/style/index.scss
index 491ac990e9885cd077d8c147ca7c05603b323a42..44b280e43982300dc7ba3c7289af9107cb1e2d88 100644
--- a/packages/opendesign/src/components/textarea/style/index.scss
+++ b/packages/opendesign/src/components/textarea/style/index.scss
@@ -11,21 +11,25 @@
 .o-textarea-wrap {
   display: flex;
   border-radius: var(--textarea-radius);
-  border: 1px solid var(--textarea-border);
-  background-color: var(--textarea-bg);
+  border: 1px solid var(--textarea-bd-color);
+  background-color: var(--textarea-bg-color);
   position: relative;
   flex-direction: column;
   justify-items: stretch;
   &:hover {
-    border-color: var(--textarea-border-hover);
-    background-color: var(--textarea-bg-hover);
+    border-color: var(--textarea-bd-color-hover);
+    background-color: var(--textarea-bg-color-hover);
   }
   &.is-focus {
-    border-color: var(--textarea-border-focus);
-    background-color: var(--textarea-bg-focus);
+    border-color: var(--textarea-bd-color-focus);
+    background-color: var(--textarea-bg-color-focus);
+  }
+}
+.o-textarea-round-pill {
+  .o-textarea-wrap {
+    border-radius: var(--textarea-radius-pill);
   }
 }
-
 .o-textarea-textarea {
   padding: var(--textarea-padding-v) var(--textarea-padding-h);
   outline: none;
@@ -35,7 +39,6 @@
   background-color: transparent;
   display: inline-flex;
   width: 100%;
-  caret-color: var(--o-color-primary1);
   line-height: inherit;
   min-height: calc(var(--textarea-text-height) + var(--textarea-padding-v) * 2);
 
@@ -58,7 +61,7 @@
   align-items: center;
   justify-content: center;
   color: var(--textarea-icon-color);
-  background-color: var(--textarea-icon-bg);
+  background-color: var(--textarea-icon-bg-color);
 
   &:hover {
     color: var(--textarea-icon-color-hover);
@@ -86,8 +89,8 @@
   .o-textarea-wrap {
     color: var(--textarea-color-disabled);
     cursor: not-allowed;
-    border-color: var(--textarea-border-disabled);
-    background-color: var(--textarea-bg-disabled);
+    border-color: var(--textarea-bd-color-disabled);
+    background-color: var(--textarea-bg-color-disabled);
   }
 }
 
@@ -117,64 +120,4 @@
   left: 100%;
   top: 0;
   pointer-events: none;
-  background-color: rgba($color: #ff0000, $alpha: 0.5);
-}
-
-.o-textarea-size-small {
-  --textarea-text-size: var(--textarea-text-size-s);
-  --textarea-text-height: var(--textarea-text-height-s);
-  --textarea-padding-v: 2px;
-  --textarea-padding-h: 8px;
-  --textarea-padding: 2px 8px;
-  --textarea-radius: var(--textarea-radius-s);
-  &.o-textarea-shape-round {
-    --textarea-radius: 12px;
-  }
-}
-.o-textarea-size-medium {
-  --textarea-text-size: var(--textarea-text-size-m);
-  --textarea-text-height: var(--textarea-text-height-m);
-  --textarea-padding-v: 4px;
-  --textarea-padding-h: 12px;
-  --textarea-padding: 4px 12px;
-  --textarea-radius: var(--textarea-radius-m);
-  &.o-textarea-shape-round {
-    --textarea-radius: 16px;
-  }
-}
-.o-textarea-size-large {
-  --textarea-text-size: var(--textarea-text-size-l);
-  --textarea-text-height: var(--textarea-text-height-l);
-  --textarea-padding-v: 6px;
-  --textarea-padding-h: 12px;
-  --textarea-padding: 6px 12px;
-  --textarea-radius: var(--textarea-radius-l);
-  &.o-textarea-shape-round {
-    --textarea-radius: 20px;
-  }
-}
-
-.o-textarea-status-success {
-  --textarea-border: var(--textarea-border-success);
-  --textarea-border-hover: var(--textarea-border-success-hover);
-  --textarea-border-focus: var(--textarea-border-success-focus);
-  --textarea-bg: var(--textarea-bg-success);
-  --textarea-bg-hover: var(--textarea-bg-success-hover);
-  --textarea-bg-focus: var(--textarea-bg-success-focus);
-}
-.o-textarea-status-warning {
-  --textarea-border: var(--textarea-border-warning);
-  --textarea-border-hover: var(--textarea-border-warning-hover);
-  --textarea-border-focus: var(--textarea-border-warning-focus);
-  --textarea-bg: var(--textarea-bg-warning);
-  --textarea-bg-hover: var(--textarea-bg-warning-hover);
-  --textarea-bg-focus: var(--textarea-bg-warning-focus);
-}
-.o-textarea-status-error {
-  --textarea-border: var(--textarea-border-error);
-  --textarea-border-hover: var(--textarea-border-error-hover);
-  --textarea-border-focus: var(--textarea-border-error-focus);
-  --textarea-bg: var(--textarea-bg-error);
-  --textarea-bg-hover: var(--textarea-bg-error-hover);
-  --textarea-bg-focus: var(--textarea-bg-error-focus);
 }
diff --git a/packages/opendesign/src/components/textarea/style/var.scss b/packages/opendesign/src/components/textarea/style/var.scss
index 3bba34f5326662378b883d571b65b616fc407980..ebb1365a46924c9682869d6d961f145fbc10fec5 100644
--- a/packages/opendesign/src/components/textarea/style/var.scss
+++ b/packages/opendesign/src/components/textarea/style/var.scss
@@ -1,54 +1,107 @@
 .o-textarea {
-  --textarea-text-size-s: var(--o-font_size-tip1);
-  --textarea-text-height-s: var(--o-line_height-tip1);
-  --textarea-text-size-m: var(--o-font_size-text);
-  --textarea-text-height-m: var(--o-line_height-text);
-  --textarea-text-size-l: var(--o-font_size-h4);
-  --textarea-text-height-l: var(--o-line_height-h4);
-
-  --textarea-radius-s: var(--o-radius-s);
-  --textarea-radius-m: var(--o-radius-s);
-  --textarea-radius-l: var(--o-radius-s);
-
-  --textarea-border: var(--o-color-info1);
-  --textarea-border-hover: var(--o-color-primary2);
-  --textarea-border-focus: var(--o-color-primary3);
-  --textarea-border-disabled: var(--o-color-info1);
-
-  --textarea-bg: var(--o-color-bg1);
-  --textarea-bg-hover: var(--o-color-bg3);
-  --textarea-bg-focus: var(--o-color-bg3);
-  --textarea-bg-disabled: var(--o-color-info4);
-
-  --textarea-color: var(--o-color-text2);
-  --textarea-color-disabled: var(--o-color-text4);
-
-  --textarea-icon-color: var(--o-color-text3);
-  --textarea-icon-bg: var(--o-color-bg4);
-  --textarea-icon-color-hover: var(--o-color-primary1);
+  --textarea-color: var(--o-color-info2);
+  --textarea-color-disabled: var(--o-color-info4);
+
+  --textarea-radius-pill-s: 16px;
+  --textarea-radius-pill-m: 16px;
+  --textarea-radius-pill-l: 16px;
+
+  --textarea-bg-color: transparent;
+  --textarea-bg-color-hover: transparent;
+  --textarea-bg-color-focus: var(--o-color-control-light);
 
-  --textarea-border-success: var(--o-color-success1);
-  --textarea-border-success-hover: var(--o-color-success2);
-  --textarea-border-success-focus: var(--o-color-success3);
-  --textarea-border-warning: var(--o-color-warning1);
-  --textarea-border-warning-hover: var(--o-color-warning2);
-  --textarea-border-warning-focus: var(--o-color-warning3);
-  --textarea-border-error: var(--o-color-danger1);
-  --textarea-border-error-hover: var(--o-color-danger2);
-  --textarea-border-error-focus: var(--o-color-danger3);
-
-  --textarea-bg-success: var(--o-color-bg1);
-  --textarea-bg-success-hover: var(--o-color-bg1);
-  --textarea-bg-success-focus: var(--o-color-bg1);
-  --textarea-bg-warning: var(--o-color-bg1);
-  --textarea-bg-warning-hover: var(--o-color-bg1);
-  --textarea-bg-warning-focus: var(--o-color-bg1);
-  --textarea-bg-error: var(--o-color-bg1);
-  --textarea-bg-error-hover: var(--o-color-bg1);
-  --textarea-bg-error-focus: var(--o-color-bg1);
+  --textarea-icon-color: var(--o-color-control3);
+  --textarea-icon-color-hover: var(--o-color-primary1);
+  --textarea-icon-bg-color: var(--o-color-control1-light);
 
   --textarea-limit-color: var(--o-color-text3);
   --textarea-limit-color-error: var(--o-color-danger1);
   --textarea-limit-text-size: var(--o-font_size-tip2);
   --textarea-limit-text-height: var(--o-line_height-tip2);
 }
+
+.o-textarea-normal {
+  --textarea-bd-color: var(--o-color-control1);
+  --textarea-bd-color-hover: var(--o-color-primary2);
+  --textarea-bd-color-focus: var(--o-color-primary3);
+  --textarea-bd-color-disabled: var(--o-color-control4);
+
+  &.o-textarea-solid {
+    --textarea-bd-color: var(--o-color-control1-light);
+    --textarea-bd-color-hover: var(--o-color-control2-light);
+
+    --textarea-bg-color: var(--o-color-control1-light);
+    --textarea-bg-color-hover: var(--o-color-control2-light);
+    --textarea-bg-color-disabled: var(--o-color-control4-light);
+  }
+}
+.o-textarea-success {
+  --textarea-bd-color: var(--o-color-success1);
+  --textarea-bd-color-hover: var(--o-color-success2);
+  --textarea-bd-color-focus: var(--o-color-success3);
+  --textarea-bd-color-disabled: var(--o-color-success4);
+
+  &.o-textarea-solid {
+    --textarea-bd-color: var(--o-color-success1-light);
+    --textarea-bd-color-hover: var(--o-color-success2-light);
+
+    --textarea-bg-color: var(--o-color-success1-light);
+    --textarea-bg-color-hover: var(--o-color-success2-light);
+    --textarea-bg-color-disabled: var(--o-color-success4-light);
+  }
+}
+.o-textarea-warning {
+  --textarea-bd-color: var(--o-color-warning1);
+  --textarea-bd-color-hover: var(--o-color-warning2);
+  --textarea-bd-color-focus: var(--o-color-warning3);
+  --textarea-bd-color-disabled: var(--o-color-warning4);
+
+  &.o-textarea-solid {
+    --textarea-bd-color: var(--o-color-warning1-light);
+    --textarea-bd-color-hover: var(--o-color-warning2-light);
+
+    --textarea-bg-color: var(--o-color-warning1-light);
+    --textarea-bg-color-hover: var(--o-color-warning2-light);
+    --textarea-bg-color-disabled: var(--o-color-warning4-light);
+  }
+}
+.o-textarea-danger {
+  --textarea-bd-color: var(--o-color-danger1);
+  --textarea-bd-color-hover: var(--o-color-danger2);
+  --textarea-bd-color-focus: var(--o-color-danger3);
+  --textarea-bd-color-disabled: var(--o-color-danger4);
+
+  &.o-textarea-solid {
+    --textarea-bd-color: var(--o-color-danger1-light);
+    --textarea-bd-color-hover: var(--o-color-danger2-light);
+
+    --textarea-bg-color: var(--o-color-danger1-light);
+    --textarea-bg-color-hover: var(--o-color-danger2-light);
+    --textarea-bg-color-disabled: var(--o-color-danger4-light);
+  }
+}
+
+.o-textarea-size-small {
+  --textarea-text-size: var(--o-font_size-tip1);
+  --textarea-text-height: var(--o-line_height-tip1);
+  --textarea-padding-v: 2px;
+  --textarea-padding-h: 8px;
+  --textarea-radius: var(--o-radius-s);
+  --textarea-radius-pill: 12px;
+}
+.o-textarea-size-medium {
+  --textarea-text-size: var(--o-font_size-text);
+  --textarea-text-height: var(--o-line_height-text);
+  --textarea-padding-v: 4px;
+  --textarea-padding-h: 12px;
+  --textarea-radius: var(--o-radius-m);
+  --textarea-radius-pill: 16px;
+}
+.o-textarea-size-large {
+  --textarea-text-size: var(--o-font_size-h4);
+  --textarea-text-height: var(--o-line_height-h4);
+  --textarea-padding-v: 6px;
+  --textarea-padding-h: 12px;
+  --textarea-radius: var(--o-radius-l);
+  --textarea-radius-pill: 20px;
+}
diff --git a/packages/opendesign/src/components/textarea/types.ts b/packages/opendesign/src/components/textarea/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ce95ceb9d3b5a6a5cb1806ffcdb6216d4e578cd5
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/types.ts
@@ -0,0 +1,131 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import type { SizeT, RoundT, VariantT } from '../_shared/global';
+
+export const textareaProps = {
+  /**
+   * 下拉框的值
+   * v-model
+   */
+  modelValue: {
+    type: [String, Number] as PropType<string | number>,
+  },
+  /**
+   * 下拉框的默认值
+   * 非受控
+   */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /**
+   * 大小
+   */
+  size: {
+    type: String as PropType<SizeT>,
+  },
+  /**
+   * 圆角值
+   */
+  round: {
+    type: String as PropType<RoundT>
+  },
+  /**
+   * 颜色类型
+   */
+  color: {
+    type: String as PropType<'normal' | 'success' | 'warning' | 'danger'>,
+    default: 'normal'
+  },
+  /**
+   * 按钮类型：ColorT
+   */
+  variant: {
+    type: String as PropType<VariantT>,
+    default: 'outline'
+  },
+  /**
+   * 提示文本
+   */
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+  },
+  /**
+   * 是否只读
+   */
+  readonly: {
+    type: Boolean,
+  },
+  /**
+   * 是否可以清除
+   */
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否自动增加宽度
+   */
+  autoWidth: {
+    type: Boolean,
+  },
+  /**
+   * 是否支持调整尺寸
+   */
+  resize: {
+    type: String as PropType<'both' | 'horizontal' | 'vertical' | 'none'>,
+    default: 'vertical'
+  },
+  /**
+   * 显示的行数
+   */
+  rows: {
+    type: Number,
+    default: 3
+  },
+  /**
+   * 显示的行数
+   */
+  cols: {
+    type: Number,
+    default: 20
+  },
+  /**
+   * 最大字符长度
+   */
+  maxLength: {
+    type: Number,
+  },
+  /**
+   * 超过最大字符长度时是否允许输入
+   */
+  inputOnOutLimit: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否自动计算高度
+   */
+  autoHeight: {
+    type: Boolean,
+  },
+  /**
+   * 高度自适应
+   */
+  autoResize: {
+    type: Boolean,
+  },
+  /**
+   * 获取长度方法
+   */
+  getLength: {
+    type: Function as PropType<(val: string) => Number>,
+  },
+};
+
+export type TextareaPropsT = ExtractPropTypes<typeof textareaProps>;
diff --git a/packages/opendesign/src/tokens/opendesign-token.json b/packages/opendesign/src/tokens/opendesign-token.json
index 74b6839efdb831f456c8bf8a6fbc09fc41614dc7..efa7b3b8de5a04bceae06ac308f9780ccebbafad 100644
--- a/packages/opendesign/src/tokens/opendesign-token.json
+++ b/packages/opendesign/src/tokens/opendesign-token.json
@@ -1,4 +1,25 @@
 {
+  "base": {
+    "name": "基础色(不同皮肤色相不变)",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "color-white",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "255, 255, 255"
+        }
+      },
+      {
+        "key": "color-black",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "0, 0, 0"
+        }
+      }
+    ]
+  },
   "blue": {
     "name": "蓝色",
     "type": "palette",
@@ -6,7 +27,6 @@
     "value": [
       {
         "key": "blue-1",
-        "colorType": "Blue",
         "value": {
           "light": "232, 243, 255",
           "dark": "0, 13, 77"
@@ -14,7 +34,6 @@
       },
       {
         "key": "blue-2",
-        "colorType": "Blue",
         "value": {
           "light": "190, 218, 255",
           "dark": "4, 27, 121"
@@ -22,7 +41,6 @@
       },
       {
         "key": "blue-3",
-        "colorType": "Blue",
         "value": {
           "light": "148, 191, 255",
           "dark": "14, 50, 166"
@@ -30,7 +48,6 @@
       },
       {
         "key": "blue-4",
-        "colorType": "Blue",
         "value": {
           "light": "106, 161, 255",
           "dark": "29, 77, 210"
@@ -38,7 +55,6 @@
       },
       {
         "key": "blue-5",
-        "colorType": "Blue",
         "value": {
           "light": "64, 128, 255",
           "dark": "48, 111, 255"
@@ -46,7 +62,6 @@
       },
       {
         "key": "blue-6",
-        "colorType": "Blue",
         "value": {
           "light": "22, 93, 255",
           "dark": "60, 126, 255"
@@ -54,7 +69,6 @@
       },
       {
         "key": "blue-7",
-        "colorType": "Blue",
         "value": {
           "light": "14, 66, 210",
           "dark": "104, 159, 255"
@@ -62,7 +76,6 @@
       },
       {
         "key": "blue-8",
-        "colorType": "Blue",
         "value": {
           "light": "7, 44, 166",
           "dark": "147, 190, 255"
@@ -70,7 +83,6 @@
       },
       {
         "key": "blue-9",
-        "colorType": "Blue",
         "value": {
           "light": "3, 26, 121",
           "dark": "190, 218, 255"
@@ -78,7 +90,6 @@
       },
       {
         "key": "blue-10",
-        "colorType": "Blue",
         "value": {
           "light": "0, 13, 77",
           "dark": "234, 244, 255"
@@ -93,7 +104,6 @@
     "value": [
       {
         "key": "yellow-1",
-        "colorType": "Yellow",
         "value": {
           "light": "254, 255, 232",
           "dark": "77, 56, 0"
@@ -101,7 +111,6 @@
       },
       {
         "key": "yellow-2",
-        "colorType": "Yellow",
         "value": {
           "light": "254, 254, 190",
           "dark": "120, 94, 7"
@@ -109,7 +118,6 @@
       },
       {
         "key": "yellow-3",
-        "colorType": "Yellow",
         "value": {
           "light": "253, 250, 148",
           "dark": "163, 134, 20"
@@ -117,7 +125,6 @@
       },
       {
         "key": "yellow-4",
-        "colorType": "Yellow",
         "value": {
           "light": "252, 242, 107",
           "dark": "207, 179, 37"
@@ -125,7 +132,6 @@
       },
       {
         "key": "yellow-5",
-        "colorType": "Yellow",
         "value": {
           "light": "251, 232, 66",
           "dark": "250, 225, 60"
@@ -133,7 +139,6 @@
       },
       {
         "key": "yellow-6",
-        "colorType": "Yellow",
         "value": {
           "light": "250, 220, 25",
           "dark": "251, 233, 75"
@@ -141,7 +146,6 @@
       },
       {
         "key": "yellow-7",
-        "colorType": "Yellow",
         "value": {
           "light": "207, 175, 15",
           "dark": "252, 243, 116"
@@ -149,7 +153,6 @@
       },
       {
         "key": "yellow-8",
-        "colorType": "Yellow",
         "value": {
           "light": "163, 132, 8",
           "dark": "253, 250, 157"
@@ -157,7 +160,6 @@
       },
       {
         "key": "yellow-9",
-        "colorType": "Yellow",
         "value": {
           "light": "120, 93, 3",
           "dark": "254, 254, 198"
@@ -165,7 +167,6 @@
       },
       {
         "key": "yellow-10",
-        "colorType": "Yellow",
         "value": {
           "light": "77, 56, 0",
           "dark": "254, 255, 240"
@@ -180,7 +181,6 @@
     "value": [
       {
         "key": "green-1",
-        "colorType": "Green",
         "value": {
           "light": "232, 255, 234",
           "dark": "0, 77, 28"
@@ -188,7 +188,6 @@
       },
       {
         "key": "green-2",
-        "colorType": "Green",
         "value": {
           "light": "175, 240, 181",
           "dark": "4, 102, 37"
@@ -196,7 +195,6 @@
       },
       {
         "key": "green-3",
-        "colorType": "Green",
         "value": {
           "light": "123, 225, 136",
           "dark": "10, 128, 45"
@@ -204,7 +202,6 @@
       },
       {
         "key": "green-4",
-        "colorType": "Green",
         "value": {
           "light": "76, 210, 99",
           "dark": "18, 154, 55"
@@ -212,7 +209,6 @@
       },
       {
         "key": "green-5",
-        "colorType": "Green",
         "value": {
           "light": "35, 195, 67",
           "dark": "29, 180, 64"
@@ -220,7 +216,6 @@
       },
       {
         "key": "green-6",
-        "colorType": "Green",
         "value": {
           "light": "0, 180, 42",
           "dark": "39, 195, 70"
@@ -228,7 +223,6 @@
       },
       {
         "key": "green-7",
-        "colorType": "Green",
         "value": {
           "light": "0, 154, 41",
           "dark": "80, 210, 102"
@@ -236,7 +230,6 @@
       },
       {
         "key": "green-8",
-        "colorType": "Green",
         "value": {
           "light": "0, 128, 38",
           "dark": "126, 225, 139"
@@ -244,7 +237,6 @@
       },
       {
         "key": "green-9",
-        "colorType": "Green",
         "value": {
           "light": "0, 102, 34",
           "dark": "178, 240, 183"
@@ -252,7 +244,6 @@
       },
       {
         "key": "green-10",
-        "colorType": "Green",
         "value": {
           "light": "0, 77, 28",
           "dark": "235, 255, 236"
@@ -267,7 +258,6 @@
     "value": [
       {
         "key": "orange-1",
-        "colorType": "Orange",
         "value": {
           "light": "255, 247, 232",
           "dark": "77, 27, 0"
@@ -275,7 +265,6 @@
       },
       {
         "key": "orange-2",
-        "colorType": "Orange",
         "value": {
           "light": "255, 228, 186",
           "dark": "121, 48, 4"
@@ -283,7 +272,6 @@
       },
       {
         "key": "orange-3",
-        "colorType": "Orange",
         "value": {
           "light": "255, 207, 139",
           "dark": "166, 75, 10"
@@ -291,7 +279,6 @@
       },
       {
         "key": "orange-4",
-        "colorType": "Orange",
         "value": {
           "light": "255, 182, 93",
           "dark": "210, 105, 19"
@@ -299,7 +286,6 @@
       },
       {
         "key": "orange-5",
-        "colorType": "Orange",
         "value": {
           "light": "255, 154, 46",
           "dark": "255, 141, 31"
@@ -307,7 +293,6 @@
       },
       {
         "key": "orange-6",
-        "colorType": "Orange",
         "value": {
           "light": "255, 125, 0",
           "dark": "255, 150, 38"
@@ -315,7 +300,6 @@
       },
       {
         "key": "orange-7",
-        "colorType": "Orange",
         "value": {
           "light": "210, 95, 0",
           "dark": "255, 179, 87"
@@ -323,7 +307,6 @@
       },
       {
         "key": "orange-8",
-        "colorType": "Orange",
         "value": {
           "light": "166, 69, 0",
           "dark": "255, 205, 135"
@@ -331,7 +314,6 @@
       },
       {
         "key": "orange-9",
-        "colorType": "Orange",
         "value": {
           "light": "121, 46, 0",
           "dark": "255, 227, 184"
@@ -339,7 +321,6 @@
       },
       {
         "key": "orange-10",
-        "colorType": "Orange",
         "value": {
           "light": "77, 27, 0",
           "dark": "255, 247, 232"
@@ -354,7 +335,6 @@
     "value": [
       {
         "key": "red-1",
-        "colorType": "Red",
         "value": {
           "light": "255, 236, 232",
           "dark": "77, 0, 10"
@@ -362,7 +342,6 @@
       },
       {
         "key": "red-2",
-        "colorType": "Red",
         "value": {
           "light": "253, 205, 197",
           "dark": "119, 6, 17"
@@ -370,7 +349,6 @@
       },
       {
         "key": "red-3",
-        "colorType": "Red",
         "value": {
           "light": "251, 172, 163",
           "dark": "161, 22, 31"
@@ -378,7 +356,6 @@
       },
       {
         "key": "red-4",
-        "colorType": "Red",
         "value": {
           "light": "249, 137, 129",
           "dark": "203, 46, 52"
@@ -386,7 +363,6 @@
       },
       {
         "key": "red-5",
-        "colorType": "Red",
         "value": {
           "light": "247, 101, 96",
           "dark": "245, 78, 78"
@@ -394,7 +370,6 @@
       },
       {
         "key": "red-6",
-        "colorType": "Red",
         "value": {
           "light": "245, 63, 63",
           "dark": "247, 105, 101"
@@ -402,7 +377,6 @@
       },
       {
         "key": "red-7",
-        "colorType": "Red",
         "value": {
           "light": "203, 39, 45",
           "dark": "249, 141, 134"
@@ -410,7 +384,6 @@
       },
       {
         "key": "red-8",
-        "colorType": "Red",
         "value": {
           "light": "161, 21, 30",
           "dark": "251, 176, 167"
@@ -418,7 +391,6 @@
       },
       {
         "key": "red-9",
-        "colorType": "Red",
         "value": {
           "light": "119, 8, 19",
           "dark": "253, 209, 202"
@@ -426,7 +398,6 @@
       },
       {
         "key": "red-10",
-        "colorType": "Red",
         "value": {
           "light": "77, 0, 10",
           "dark": "255, 240, 236"
@@ -441,7 +412,6 @@
     "value": [
       {
         "key": "gray-1",
-        "colorType": "Gray",
         "value": {
           "light": "255, 255, 255",
           "dark": "0, 0, 0"
@@ -449,7 +419,6 @@
       },
       {
         "key": "gray-2",
-        "colorType": "Gray",
         "value": {
           "light": "238, 238, 238",
           "dark": "36, 36, 36"
@@ -457,7 +426,6 @@
       },
       {
         "key": "gray-3",
-        "colorType": "Gray",
         "value": {
           "light": "221, 221, 221",
           "dark": "57, 57, 57"
@@ -465,7 +433,6 @@
       },
       {
         "key": "gray-4",
-        "colorType": "Gray",
         "value": {
           "light": "198, 198, 198",
           "dark": "94, 94, 94"
@@ -473,7 +440,6 @@
       },
       {
         "key": "gray-5",
-        "colorType": "Gray",
         "value": {
           "light": "139, 139, 139",
           "dark": "119, 119, 122"
@@ -481,7 +447,6 @@
       },
       {
         "key": "gray-6",
-        "colorType": "Gray",
         "value": {
           "light": "119, 119, 119",
           "dark": "166, 166, 166"
@@ -489,7 +454,6 @@
       },
       {
         "key": "gray-7",
-        "colorType": "Gray",
         "value": {
           "light": "94, 94, 94",
           "dark": "221, 221, 221"
@@ -497,7 +461,6 @@
       },
       {
         "key": "gray-8",
-        "colorType": "Gray",
         "value": {
           "light": "75, 75, 75",
           "dark": "238, 238, 238"
@@ -505,7 +468,6 @@
       },
       {
         "key": "gray-9",
-        "colorType": "Gray",
         "value": {
           "light": "44, 44, 44",
           "dark": "243, 243, 243"
@@ -513,7 +475,6 @@
       },
       {
         "key": "gray-10",
-        "colorType": "Gray",
         "value": {
           "light": "0, 0, 0",
           "dark": "255, 255, 255"
@@ -528,7 +489,6 @@
     "value": [
       {
         "key": "mixedgray-1",
-        "colorType": "Mixedgray",
         "value": {
           "light": "247, 248, 250",
           "dark": "23, 23, 26"
@@ -536,7 +496,6 @@
       },
       {
         "key": "mixedgray-2",
-        "colorType": "Mixedgray",
         "value": {
           "light": "242, 243, 245",
           "dark": "46, 46, 48"
@@ -544,7 +503,6 @@
       },
       {
         "key": "mixedgray-3",
-        "colorType": "Mixedgray",
         "value": {
           "light": "229, 230, 235",
           "dark": "72, 72, 73"
@@ -552,7 +510,6 @@
       },
       {
         "key": "mixedgray-4",
-        "colorType": "Mixedgray",
         "value": {
           "light": "201, 205, 212",
           "dark": "95, 95, 96"
@@ -560,7 +517,6 @@
       },
       {
         "key": "mixedgray-5",
-        "colorType": "Mixedgray",
         "value": {
           "light": "169, 174, 184",
           "dark": "120, 120, 122"
@@ -568,7 +524,6 @@
       },
       {
         "key": "mixedgray-6",
-        "colorType": "Mixedgray",
         "value": {
           "light": "134, 144, 156",
           "dark": "146, 146, 147"
@@ -576,7 +531,6 @@
       },
       {
         "key": "mixedgray-7",
-        "colorType": "Mixedgray",
         "value": {
           "light": "107, 119, 133",
           "dark": "171, 171, 172"
@@ -584,7 +538,6 @@
       },
       {
         "key": "mixedgray-8",
-        "colorType": "Mixedgray",
         "value": {
           "light": "78, 89, 105",
           "dark": "197, 197, 197"
@@ -592,7 +545,6 @@
       },
       {
         "key": "mixedgray-9",
-        "colorType": "Mixedgray",
         "value": {
           "light": "39, 46, 59",
           "dark": "223, 223, 223"
@@ -600,7 +552,6 @@
       },
       {
         "key": "mixedgray-10",
-        "colorType": "Mixedgray",
         "value": {
           "light": "29, 33, 41",
           "dark": "246, 246, 246"
@@ -746,9 +697,17 @@
     "type": "color",
     "typeName": "颜色",
     "value": [
+      {
+        "key": "color-control-light",
+        "description": "很浅背景",
+        "value": {
+          "light": "rgb(var(--o-gray-1))",
+          "dark": "rgb(var(--o-gray-1))"
+        }
+      },
       {
         "key": "color-control1",
-        "description": "常规",
+        "description": "常规，常用于边框",
         "value": {
           "light": "rgb(var(--o-mixedgray-3))",
           "dark": "rgb(var(--o-mixedgray-3))"
@@ -780,7 +739,7 @@
       },
       {
         "key": "color-control1-light",
-        "description": "浅/控件常规",
+        "description": "常规-浅，常用于背景",
         "value": {
           "light": "rgb(var(--o-mixedgray-3))",
           "dark": "rgb(var(--o-mixedgray-3))"
@@ -788,7 +747,7 @@
       },
       {
         "key": "color-control2-light",
-        "description": "浅/控件悬浮",
+        "description": "悬浮-浅",
         "value": {
           "light": "rgb(var(--o-mixedgray-4))",
           "dark": "rgb(var(--o-mixedgray-4))"
@@ -796,7 +755,7 @@
       },
       {
         "key": "color-control3-light",
-        "description": "浅/控件激活",
+        "description": "激活-浅",
         "value": {
           "light": "rgb(var(--o-mixedgray-5))",
           "dark": "rgb(var(--o-mixedgray-5))"
@@ -804,7 +763,7 @@
       },
       {
         "key": "color-control4-light",
-        "description": "浅/控件禁用",
+        "description": "禁用-浅",
         "value": {
           "light": "rgb(var(--o-mixedgray-2))",
           "dark": "rgb(var(--o-mixedgray-2))"
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 99d7b1e8df468eda819fbb9f322bcfbcfb6ee121..4f1533f3c28469cc30d0494558d166078488ef9c 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -102,7 +102,7 @@ export const routes = [
   {
     path: '/tabs',
     name: 'Tabs',
-    label: '标签页',
+    label: '页签',
     component: () => import('@components/tabs/__demo__/IndexTabs.vue'),
   },
   {