From 0fef0a5a6f142a42145c166786bd2012d6fbd7bb Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 20 Feb 2023 10:45:01 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dinput-number?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/input-number/OInputNumber.vue  |  93 +-------
 .../__demo__/InputNumberBasic.vue             |  48 ++++-
 .../src/components/input-number/index.ts      |   1 +
 .../components/input-number/style/index.scss  |  16 +-
 .../components/input-number/style/var.scss    |   6 +-
 .../src/components/input-number/types.ts      | 202 ++++++++++++++++++
 .../src/components/input/OInput.vue           |   7 +-
 .../components/input/__demo__/InputBasic.vue  |  18 ++
 .../opendesign/src/components/input/index.ts  |   1 +
 .../src/components/input/style/index.scss     |  19 +-
 .../opendesign/src/components/input/types.ts  |  10 +-
 .../src/components/select/style/index.scss    |   2 +-
 .../src/components/switch/style/index.scss    |   4 +-
 .../src/components/tag/style/index.scss       |   2 +-
 .../src/components/textarea/style/index.scss  |   2 +-
 15 files changed, 300 insertions(+), 131 deletions(-)
 create mode 100644 packages/opendesign/src/components/input-number/types.ts

diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index 973cccfd..3dfc5f43 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -1,96 +1,13 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
-import { defaultSize, SizeT, ShapeT } from '../_shared/global';
+import { defaultSize } from '../_shared/global';
 import { IconMinus, IconAdd, IconChevronDown, IconChevronUp } from '../icons';
 import { OInput } from '../input';
 import { isValidNumber, correctValue, getRealValue } from './input-number';
 import { isFunction, isUndefined } from '../_shared/is';
+import { inputNumberPorps } from './types';
 
-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,
-});
+const props = defineProps(inputNumberPorps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', value: number): void;
@@ -242,9 +159,9 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     class="o-input-number"
     :class="[`o-input-number-size-${props.size || defaultSize}`, { 'is-invalid': !isValid }]"
     :size="props.size"
-    :shape="props.shape"
     :placeholder="props.placeholder"
-    :status="props.status"
+    :color="props.color"
+    :round="props.round"
     :disabled="props.disabled"
     :readonly="props.readonly"
     :clearable="false"
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
index 28b350bb..5f173de7 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>Basic</h4>
+  <h4>Color</h4>
   <div>val1:{{ val1 }}</div>
   <section>
     <div class="col">
@@ -27,6 +27,25 @@ const val4 = ref('1px');
       <OInputNumber :default-value="val1" style="width: 150px" />
     </div>
   </section>
+  <h4>Color</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>
+    <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>
+  </section>
   <section>
     <div class="col">
       readonly:
@@ -52,15 +71,28 @@ const val4 = ref('1px');
     <OInputNumber v-model="val2" />
     <OInputNumber v-model="val3" size="large" />
   </section>
-  <h4>Shape</h4>
+  <h4>Round</h4>
   <section>
-    <OInputNumber v-model="val2" size="small" shape="round" />
-    <OInputNumber v-model="val2" shape="round" />
-    <OInputNumber v-model="val3" size="large" shape="round" />
+    <div>
+      <p>pill</p>
+      <section>
+        <OInputNumber v-model="val2" size="small" round="pill" />
+        <OInputNumber v-model="val2" round="pill" />
+        <OInputNumber v-model="val3" size="large" round="pill" />
 
-    <OInputNumber v-model="val2" size="small" shape="round" controls="none" />
-    <OInputNumber v-model="val2" shape="round" controls="none" />
-    <OInputNumber v-model="val3" size="large" shape="round" controls="none" />
+        <OInputNumber v-model="val2" size="small" round="pill" controls="none" />
+        <OInputNumber v-model="val2" round="pill" controls="none" />
+        <OInputNumber v-model="val3" size="large" round="pill" controls="none" />
+      </section>
+    </div>
+    <div>
+      <p>16px</p>
+      <section>
+        <OInputNumber v-model="val2" size="small" round="16px" controls="none" />
+        <OInputNumber v-model="val2" round="16px" controls="none" />
+        <OInputNumber v-model="val3" size="large" round="16px" controls="none" />
+      </section>
+    </div>
   </section>
   <h4>Disabled</h4>
   <section>
diff --git a/packages/opendesign/src/components/input-number/index.ts b/packages/opendesign/src/components/input-number/index.ts
index a5f64acd..e1a463aa 100644
--- a/packages/opendesign/src/components/input-number/index.ts
+++ b/packages/opendesign/src/components/input-number/index.ts
@@ -7,3 +7,4 @@ const OInputNumber = Object.assign(_OInputNumber, {
   },
 });
 export { OInputNumber };
+export * from './types';
diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss
index 666fea56..7943e6c4 100644
--- a/packages/opendesign/src/components/input-number/style/index.scss
+++ b/packages/opendesign/src/components/input-number/style/index.scss
@@ -3,7 +3,7 @@
 .o-input-number {
   .o-input-prepend,
   .o-input-append {
-    font-size: 14px;
+    font-size: var(--o-font_size-text);
     padding: 0;
     align-items: stretch;
     overflow: hidden;
@@ -21,15 +21,17 @@
   justify-content: center;
   display: flex;
   min-width: var(--input-height);
-  font-size: var(--input-number-icon-size);
+  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);
+      background-color: var(--input-number-btn-bg-hover);
     }
     &.is-disabled {
       cursor: not-allowed;
@@ -38,7 +40,7 @@
     }
   }
 
-  .o-input-shape-round & {
+  .o-input-round-pill & {
     &.both-right {
       padding-right: 2px;
     }
@@ -57,9 +59,11 @@
   font-size: 16px;
   overflow: hidden;
   position: relative;
+  background-color: var(--input-number-btn-bg);
+
   &:hover {
     color: var(--input-number-btn-color-hover);
-    background-color: var(--input-number-btn-bg);
+    background-color: var(--input-number-btn-bg-hover);
   }
   &.is-disabled {
     cursor: not-allowed;
@@ -79,7 +83,7 @@
 .o-input-number-size-small {
   width: 90px;
 }
-.o-input-number-size-normal {
+.o-input-number-size-medium {
   width: 120px;
 }
 .o-input-number-size-large {
diff --git a/packages/opendesign/src/components/input-number/style/var.scss b/packages/opendesign/src/components/input-number/style/var.scss
index bea38d14..499a7735 100644
--- a/packages/opendesign/src/components/input-number/style/var.scss
+++ b/packages/opendesign/src/components/input-number/style/var.scss
@@ -1,8 +1,8 @@
 .o-input-number {
-  --input-number-icon-size: 16px;
   --input-number-btn-color: var(--o-color-text3);
   --input-number-btn-color-hover: var(--o-color-primary1);
-  --input-number-btn-bg: var(--o-color-bg2);
-  --input-number-btn-bg-disabled: var(--o-color-info4);
   --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);
 }
diff --git a/packages/opendesign/src/components/input-number/types.ts b/packages/opendesign/src/components/input-number/types.ts
new file mode 100644
index 00000000..91698183
--- /dev/null
+++ b/packages/opendesign/src/components/input-number/types.ts
@@ -0,0 +1,202 @@
+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 = {
+  /**
+   * 下拉框的值
+   * v-model
+   */
+  modelValue: {
+    type: [String, Number] as PropType<string | number>,
+  },
+  /**
+   * 下拉框的默认值
+   * 非受控
+   */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /**
+   * 按钮点击时步长
+   */
+  step: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * 最小值
+   */
+  min: {
+    type: Number,
+  },
+  /**
+   * 最大值
+   */
+  max: {
+    type: Number,
+  },
+  /**
+   * 大小
+   */
+  size: {
+    type: String as PropType<SizeT>,
+  },
+  /**
+   * 控制按钮位置
+   */
+  controls: {
+    type: String as PropType<'both' | 'right' | 'left' | 'none'>,
+    default: 'both'
+  },
+  /**
+   * 圆角值
+   */
+  round: {
+    type: String as PropType<RoundT>
+  },
+  /**
+   * 颜色类型：ColorT
+   */
+  color: {
+    type: String as PropType<'normal' | 'success' | 'warning' | 'danger'>,
+    default: 'normal'
+  },
+  /**
+   * 提示文本
+   */
+  placeholder: {
+    type: String,
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+  },
+  /**
+   * 是否只读
+   */
+  readonly: {
+    type: Boolean,
+  },
+  /**
+   * 是否可以清除
+   */
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否自动增加宽度
+   */
+  autoWidth: {
+    type: Boolean,
+  },
+  /**
+   * 是否是密码输入
+   */
+  type: {
+    type: String as PropType<'text' | 'password'>,
+    default: 'text'
+  },
+  /**
+   * 解析输入框的值
+   */
+  parse: {
+    type: Function as PropType<(value: string) => string>,
+  },
+  /**
+   * 对值格式化，控制显示格式
+   * 需搭配parse处理，保证值的正确性
+   */
+  format: {
+    type: Function as PropType<(value: string | number) => string | number>,
+  },
+};
+
+export type InputNumberPorpsT = ExtractPropTypes<typeof inputNumberPorps>;
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index 4a33ae51..8915aad5 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -48,6 +48,7 @@ const displayValue = computed(() => {
 // 是否聚焦状态
 const isFocus = ref(false);
 let lastValue: string = realValue.value;
+const isClearable = computed(() => props.clearable && !props.disabled && !props.readonly);
 
 function updateValue(val: string) {
   const value = isFunction(props.parse) ? props.parse(val) : val;
@@ -142,7 +143,6 @@ const onMirrorResize = (en: ResizeObserverEntry) => {
   inputWidth.value = en.target.clientWidth;
 };
 const round = getRoundClass(props, 'input');
-console.log(round.class.value);
 </script>
 <template>
   <label
@@ -165,11 +165,12 @@ console.log(round.class.value);
     <div
       class="o-input-wrap"
       :class="{
-        'o-input-clearable': props.clearable && realValue !== '' && !props.disabled,
+        'o-input-clearable': isClearable && realValue !== '',
         'has-suffix': $slots.suffix,
         'has-prepend': $slots.prepend,
         'has-append': $slots.append,
         'is-focus': isFocus,
+        'is-readonly': props.readonly,
       }"
     >
       <div v-if="$slots.prefix" class="o-input-prefix">
@@ -205,7 +206,7 @@ console.log(round.class.value);
         <span v-if="$slots.suffix" class="o-input-suffix-wrap">
           <slot name="suffix"></slot>
         </span>
-        <div v-if="props.clearable" class="o-input-clear" @click="clearClick"><IconX class="o-input-clear-icon" /></div>
+        <div v-if="isClearable" class="o-input-clear" @click="clearClick"><IconX class="o-input-clear-icon" /></div>
       </div>
     </div>
     <span v-if="$slots.append" class="o-input-append">
diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
index f7fcc244..d5abeee0 100644
--- a/packages/opendesign/src/components/input/__demo__/InputBasic.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
@@ -50,6 +50,24 @@ setTimeout(() => {
     <OInput v-model="val2" />
     <OInput v-model="val3" size="large" />
   </section>
+  <h4>Readonly</h4>
+  <section>
+    <div>val1:{{ val1 }}</div>
+    <OInput v-model="val2" readonly />
+    <OInput v-model="val2" readonly>
+      <template #prefix>
+        <IconDone />
+      </template>
+    </OInput>
+    <OInput v-model="val2" readonly>
+      <template #suffix>
+        <IconDone />
+      </template>
+    </OInput>
+    <OInput v-model="val2" :clearable="false" readonly>
+      <template #suffix> 元 </template>
+    </OInput>
+  </section>
   <h4>Disabled</h4>
   <section>
     <div>val1:{{ val1 }}</div>
diff --git a/packages/opendesign/src/components/input/index.ts b/packages/opendesign/src/components/input/index.ts
index ab9ff675..8b7f59f5 100644
--- a/packages/opendesign/src/components/input/index.ts
+++ b/packages/opendesign/src/components/input/index.ts
@@ -7,3 +7,4 @@ const OInput = Object.assign(_OInput, {
   },
 });
 export { OInput };
+export * from './types';
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index 76a127ca..b5c7237b 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -18,13 +18,15 @@
   border: 1px solid var(--input-bd);
   background-color: var(--input-bg);
 
-  &:hover {
-    border-color: var(--input-bd-hover);
-    background-color: var(--input-bg-hover);
-  }
-  &.is-focus {
-    border-color: var(--input-bd-focus);
-    background-color: var(--input-bg-focus);
+  &:not(.is-readonly) {
+    &:hover {
+      border-color: var(--input-bd-hover);
+      background-color: var(--input-bg-hover);
+    }
+    &.is-focus {
+      border-color: var(--input-bd-focus);
+      background-color: var(--input-bg-focus);
+    }
   }
 
   &.has-prepend {
@@ -78,9 +80,6 @@
 }
 
 .o-input-disabled {
-  .o-input-clear {
-    display: none;
-  }
   .o-input-wrap {
     color: var(--input-color-disabled);
     cursor: not-allowed;
diff --git a/packages/opendesign/src/components/input/types.ts b/packages/opendesign/src/components/input/types.ts
index f03e64bb..6c4cd98c 100644
--- a/packages/opendesign/src/components/input/types.ts
+++ b/packages/opendesign/src/components/input/types.ts
@@ -35,10 +35,10 @@ export const inputPorps = {
     type: String as PropType<RoundT>
   },
   /**
-   * 颜色类型：ColorT
+   * 颜色类型
    */
   color: {
-    type: String as PropType<ColorT>,
+    type: String as PropType<'normal' | 'success' | 'warning' | 'danger'>,
     default: 'normal'
   },
   /**
@@ -47,12 +47,6 @@ export const inputPorps = {
   placeholder: {
     type: String,
   },
-  /**
-   * 状态，显示指定，用于非表单场景
-   */
-  status: {
-    type: String as PropType<'success' | 'warning' | 'error'>,
-  },
   /**
    * 是否禁用
    */
diff --git a/packages/opendesign/src/components/select/style/index.scss b/packages/opendesign/src/components/select/style/index.scss
index b66148cc..122ad90c 100644
--- a/packages/opendesign/src/components/select/style/index.scss
+++ b/packages/opendesign/src/components/select/style/index.scss
@@ -30,7 +30,7 @@
   border-radius: var(--select-radius-s);
 }
 
-.o-select-size-normal {
+.o-select-size-medium {
   padding: 4px 8px 4px 12px;
   height: var(--select-height-m);
   border-radius: var(--select-radius-m);
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
index f8a15e73..9642e003 100644
--- a/packages/opendesign/src/components/switch/style/index.scss
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -64,7 +64,7 @@
   }
 }
 
-.o-switch-size-normal {
+.o-switch-size-medium {
   min-width: 40px;
   height: 20px;
   border-radius: 2px;
@@ -94,7 +94,7 @@
   }
 }
 
-.o-switch-size-normal.o-switch-shape-round {
+.o-switch-size-medium.o-switch-shape-round {
   border-radius: 10px;
 }
 
diff --git a/packages/opendesign/src/components/tag/style/index.scss b/packages/opendesign/src/components/tag/style/index.scss
index 18bb1c1a..2476fe19 100644
--- a/packages/opendesign/src/components/tag/style/index.scss
+++ b/packages/opendesign/src/components/tag/style/index.scss
@@ -23,7 +23,7 @@
   --tag-radius: var(--tag-radius-s);
 }
 
-.o-tag-size-normal {
+.o-tag-size-medium {
   --tag-padding: 4px 15px;
   --tag-height: var(--tag-height-m);
   --tag-radius: var(--tag-radius-m);
diff --git a/packages/opendesign/src/components/textarea/style/index.scss b/packages/opendesign/src/components/textarea/style/index.scss
index 1ce6ab27..491ac990 100644
--- a/packages/opendesign/src/components/textarea/style/index.scss
+++ b/packages/opendesign/src/components/textarea/style/index.scss
@@ -131,7 +131,7 @@
     --textarea-radius: 12px;
   }
 }
-.o-textarea-size-normal {
+.o-textarea-size-medium {
   --textarea-text-size: var(--textarea-text-size-m);
   --textarea-text-height: var(--textarea-text-height-m);
   --textarea-padding-v: 4px;
-- 
Gitee


From 07daa0a92d74db481a39bdc02d4a82c34178d0c9 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 22 Feb 2023 14:47:17 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=AE=8C=E6=88=90token=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/opendesign.token.code-snippets        |  912 ++++++++------
 packages/docs/global.md                       |    4 +
 .../src/components/button/style/index.scss    |    1 -
 .../src/components/input/OInput.vue           |    4 +-
 .../opendesign/src/components/input/types.ts  |    6 +-
 .../src/components/style/dark.token.css       |  896 ++++++--------
 .../components/style/default-light.token.css  | 1092 +++++++++--------
 .../src/tokens/opendesign-token.json          |  893 ++++++++++++++
 .../opendesign/src/tokens/token.config.ts     |    2 +-
 packages/opendesign/src/tokens/tokens.json    |    2 +-
 packages/scripts/src/gen-tokens/index.ts      |    8 +-
 11 files changed, 2380 insertions(+), 1440 deletions(-)
 create mode 100644 packages/opendesign/src/tokens/opendesign-token.json

diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets
index 84668efa..ca7871c7 100644
--- a/.vscode/opendesign.token.code-snippets
+++ b/.vscode/opendesign.token.code-snippets
@@ -1,786 +1,914 @@
 {
-  "--o-color-primary1": {
+  "--o-blue-1": {
     "prefix": [
-      "--o-color-primary1"
+      "var(--o-blue-1)"
     ],
-    "body": "--o-color-primary1",
-    "description": "常规色: 用于按钮、文本、链接强调状态时常规颜色[light: #002fa7, dark: #406fe7]",
+    "body": "var(--o-blue-1)",
+    "description": "[light: 232, 243, 255, dark: 0, 13, 77]",
     "scope": "css,scss,less"
   },
-  "--o-color-primary2": {
+  "--o-blue-2": {
     "prefix": [
-      "--o-color-primary2"
+      "var(--o-blue-2)"
     ],
-    "body": "--o-color-primary2",
-    "description": "悬浮色: 用于按钮、文本、链接强调状态时悬浮颜色[light: #406fe7, dark: #5988ff]",
+    "body": "var(--o-blue-2)",
+    "description": "[light: 190, 218, 255, dark: 4, 27, 121]",
     "scope": "css,scss,less"
   },
-  "--o-color-primary3": {
+  "--o-blue-3": {
     "prefix": [
-      "--o-color-primary3"
+      "var(--o-blue-3)"
     ],
-    "body": "--o-color-primary3",
-    "description": "聚焦色: 用于按钮、文本、链接强调状态时聚焦颜色[light: #00288d, dark: #002fa7]",
+    "body": "var(--o-blue-3)",
+    "description": "[light: 148, 191, 255, dark: 14, 50, 166]",
     "scope": "css,scss,less"
   },
-  "--o-color-primary4": {
+  "--o-blue-4": {
     "prefix": [
-      "--o-color-primary4"
+      "var(--o-blue-4)"
     ],
-    "body": "--o-color-primary4",
-    "description": "禁用色: 用于按钮、文本、链接强调状态时禁用颜色[light: #b2c0e4, dark: #0c2360]",
+    "body": "var(--o-blue-4)",
+    "description": "[light: 106, 161, 255, dark: 29, 77, 210]",
     "scope": "css,scss,less"
   },
-  "--o-color-major1": {
+  "--o-blue-5": {
     "prefix": [
-      "--o-color-major1"
+      "var(--o-blue-5)"
     ],
-    "body": "--o-color-major1",
-    "description": "常规色: 用于按钮、文本、链接major状态时文本颜色[light: #feb32a, dark: #feb32a]",
+    "body": "var(--o-blue-5)",
+    "description": "[light: 64, 128, 255, dark: 48, 111, 255]",
     "scope": "css,scss,less"
   },
-  "--o-color-normal1": {
+  "--o-blue-6": {
     "prefix": [
-      "--o-color-normal1"
+      "var(--o-blue-6)"
     ],
-    "body": "--o-color-normal1",
-    "description": "常规色: 用于按钮、文本、链接常态时常规颜色[light: var(--o-color-info1), dark: var(--o-color-info1)]",
+    "body": "var(--o-blue-6)",
+    "description": "[light: 22, 93, 255, dark: 60, 126, 255]",
     "scope": "css,scss,less"
   },
-  "--o-color-normal2": {
+  "--o-blue-7": {
     "prefix": [
-      "--o-color-normal2"
+      "var(--o-blue-7)"
     ],
-    "body": "--o-color-normal2",
-    "description": "悬浮色: 用于按钮、文本、链接常态时悬浮颜色[light: var(--o-color-primary2), dark: var(--o-color-primary2)]",
+    "body": "var(--o-blue-7)",
+    "description": "[light: 14, 66, 210, dark: 104, 159, 255]",
     "scope": "css,scss,less"
   },
-  "--o-color-normal3": {
+  "--o-blue-8": {
     "prefix": [
-      "--o-color-normal3"
+      "var(--o-blue-8)"
     ],
-    "body": "--o-color-normal3",
-    "description": "聚焦色: 用于按钮、文本、链接常态时聚焦颜色[light: var(--o-color-primary3), dark: var(--o-color-primary3)]",
+    "body": "var(--o-blue-8)",
+    "description": "[light: 7, 44, 166, dark: 147, 190, 255]",
     "scope": "css,scss,less"
   },
-  "--o-color-normal4": {
+  "--o-blue-9": {
     "prefix": [
-      "--o-color-normal4"
+      "var(--o-blue-9)"
     ],
-    "body": "--o-color-normal4",
-    "description": "禁用色: 用于按钮、文本、链接常态时禁用颜色[light: var(--o-color-info4), dark: var(--o-color-info4)]",
+    "body": "var(--o-blue-9)",
+    "description": "[light: 3, 26, 121, dark: 190, 218, 255]",
     "scope": "css,scss,less"
   },
-  "--o-color-success1": {
+  "--o-blue-10": {
     "prefix": [
-      "--o-color-success1"
+      "var(--o-blue-10)"
     ],
-    "body": "--o-color-success1",
-    "description": "常规色: 用于按钮、文本、链接成功状态时常规颜色[light: #6dc335, dark: #6dc335]",
+    "body": "var(--o-blue-10)",
+    "description": "[light: 0, 13, 77, dark: 234, 244, 255]",
     "scope": "css,scss,less"
   },
-  "--o-color-success2": {
+  "--o-yellow-1": {
     "prefix": [
-      "--o-color-success2"
+      "var(--o-yellow-1)"
     ],
-    "body": "--o-color-success2",
-    "description": "悬浮色: 用于按钮、文本、链接成功状态时悬浮颜色[light: #93e95b, dark: #93e95b]",
+    "body": "var(--o-yellow-1)",
+    "description": "[light: 254, 255, 232, dark: 77, 56, 0]",
     "scope": "css,scss,less"
   },
-  "--o-color-success3": {
+  "--o-yellow-2": {
     "prefix": [
-      "--o-color-success3"
+      "var(--o-yellow-2)"
     ],
-    "body": "--o-color-success3",
-    "description": "聚焦色: 用于按钮、文本、链接成功状态时聚焦颜色[light: #62af30, dark: #62af30]",
+    "body": "var(--o-yellow-2)",
+    "description": "[light: 254, 254, 190, dark: 120, 94, 7]",
     "scope": "css,scss,less"
   },
-  "--o-color-success4": {
+  "--o-yellow-3": {
     "prefix": [
-      "--o-color-success4"
+      "var(--o-yellow-3)"
     ],
-    "body": "--o-color-success4",
-    "description": "禁用色: 用于按钮、文本、链接成功状态时禁用颜色[light: #c5e7ae, dark: #355f1a]",
+    "body": "var(--o-yellow-3)",
+    "description": "[light: 253, 250, 148, dark: 163, 134, 20]",
     "scope": "css,scss,less"
   },
-  "--o-color-warning1": {
+  "--o-yellow-4": {
     "prefix": [
-      "--o-color-warning1"
+      "var(--o-yellow-4)"
     ],
-    "body": "--o-color-warning1",
-    "description": "常规色: 用于按钮、文本、链接告警状态时常规颜色[light: #ff8e36, dark: #ff8e36]",
+    "body": "var(--o-yellow-4)",
+    "description": "[light: 252, 242, 107, dark: 207, 179, 37]",
     "scope": "css,scss,less"
   },
-  "--o-color-warning2": {
+  "--o-yellow-5": {
     "prefix": [
-      "--o-color-warning2"
+      "var(--o-yellow-5)"
     ],
-    "body": "--o-color-warning2",
-    "description": "悬浮色: 用于按钮、文本、链接告警状态时悬浮颜色[light: #ffb45c, dark: #ffb45c]",
+    "body": "var(--o-yellow-5)",
+    "description": "[light: 251, 232, 66, dark: 250, 225, 60]",
     "scope": "css,scss,less"
   },
-  "--o-color-warning3": {
+  "--o-yellow-6": {
     "prefix": [
-      "--o-color-warning3"
+      "var(--o-yellow-6)"
     ],
-    "body": "--o-color-warning3",
-    "description": "聚焦色: 用于按钮、文本、链接告警状态时聚焦颜色[light: #ff801c, dark: #ff801c]",
+    "body": "var(--o-yellow-6)",
+    "description": "[light: 250, 220, 25, dark: 251, 233, 75]",
     "scope": "css,scss,less"
   },
-  "--o-color-warning4": {
+  "--o-yellow-7": {
     "prefix": [
-      "--o-color-warning4"
+      "var(--o-yellow-7)"
     ],
-    "body": "--o-color-warning4",
-    "description": "禁用色: 用于按钮、文本、链接告警状态时禁用颜色[light: #ffd2af, dark: #b54f00]",
+    "body": "var(--o-yellow-7)",
+    "description": "[light: 207, 175, 15, dark: 252, 243, 116]",
     "scope": "css,scss,less"
   },
-  "--o-color-danger1": {
+  "--o-yellow-8": {
     "prefix": [
-      "--o-color-danger1"
+      "var(--o-yellow-8)"
     ],
-    "body": "--o-color-danger1",
-    "description": "常规色: 用于按钮、文本、链接错误状态时常规颜色[light: #f3524d, dark: #f3524d]",
+    "body": "var(--o-yellow-8)",
+    "description": "[light: 163, 132, 8, dark: 253, 250, 157]",
     "scope": "css,scss,less"
   },
-  "--o-color-danger2": {
+  "--o-yellow-9": {
     "prefix": [
-      "--o-color-danger2"
+      "var(--o-yellow-9)"
     ],
-    "body": "--o-color-danger2",
-    "description": "悬浮色: 用于按钮、文本、链接错误状态时悬浮颜色[light: #ff7873, dark: #ff7873]",
+    "body": "var(--o-yellow-9)",
+    "description": "[light: 120, 93, 3, dark: 254, 254, 198]",
     "scope": "css,scss,less"
   },
-  "--o-color-danger3": {
+  "--o-yellow-10": {
     "prefix": [
-      "--o-color-danger3"
+      "var(--o-yellow-10)"
     ],
-    "body": "--o-color-danger3",
-    "description": "聚焦色: 用于按钮、文本、链接错误状态时聚焦颜色[light: #f13b35, dark: #f13b35]",
+    "body": "var(--o-yellow-10)",
+    "description": "[light: 77, 56, 0, dark: 254, 255, 240]",
     "scope": "css,scss,less"
   },
-  "--o-color-danger4": {
+  "--o-green-1": {
     "prefix": [
-      "--o-color-danger4"
+      "var(--o-green-1)"
     ],
-    "body": "--o-color-danger4",
-    "description": "禁用色: 用于按钮、文本、链接错误状态时禁用颜色[light: #fabab8, dark: #850d09]",
+    "body": "var(--o-green-1)",
+    "description": "[light: 232, 255, 234, dark: 0, 77, 28]",
     "scope": "css,scss,less"
   },
-  "--o-color-info1": {
+  "--o-green-2": {
     "prefix": [
-      "--o-color-info1"
+      "var(--o-green-2)"
     ],
-    "body": "--o-color-info1",
-    "description": "常规色: 用于按钮、文本、链接信息状态时常规颜色[light: #e5e5e5, dark: #242424]",
+    "body": "var(--o-green-2)",
+    "description": "[light: 175, 240, 181, dark: 4, 102, 37]",
     "scope": "css,scss,less"
   },
-  "--o-color-info2": {
+  "--o-green-3": {
     "prefix": [
-      "--o-color-info2"
+      "var(--o-green-3)"
     ],
-    "body": "--o-color-info2",
-    "description": "悬浮色: 用于按钮、文本、链接信息状态时悬浮颜色[light: #e5e8f0, dark: #2e2e2e]",
+    "body": "var(--o-green-3)",
+    "description": "[light: 123, 225, 136, dark: 10, 128, 45]",
     "scope": "css,scss,less"
   },
-  "--o-color-info3": {
+  "--o-green-4": {
     "prefix": [
-      "--o-color-info3"
+      "var(--o-green-4)"
     ],
-    "body": "--o-color-info3",
-    "description": "聚焦色: 用于按钮、文本、链接信息状态时聚焦颜色[light: #cccccc, dark: #1e1e1e]",
+    "body": "var(--o-green-4)",
+    "description": "[light: 76, 210, 99, dark: 18, 154, 55]",
     "scope": "css,scss,less"
   },
-  "--o-color-info4": {
+  "--o-green-5": {
+    "prefix": [
+      "var(--o-green-5)"
+    ],
+    "body": "var(--o-green-5)",
+    "description": "[light: 35, 195, 67, dark: 29, 180, 64]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-6": {
+    "prefix": [
+      "var(--o-green-6)"
+    ],
+    "body": "var(--o-green-6)",
+    "description": "[light: 0, 180, 42, dark: 39, 195, 70]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-7": {
+    "prefix": [
+      "var(--o-green-7)"
+    ],
+    "body": "var(--o-green-7)",
+    "description": "[light: 0, 154, 41, dark: 80, 210, 102]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-8": {
+    "prefix": [
+      "var(--o-green-8)"
+    ],
+    "body": "var(--o-green-8)",
+    "description": "[light: 0, 128, 38, dark: 126, 225, 139]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-9": {
+    "prefix": [
+      "var(--o-green-9)"
+    ],
+    "body": "var(--o-green-9)",
+    "description": "[light: 0, 102, 34, dark: 178, 240, 183]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-10": {
+    "prefix": [
+      "var(--o-green-10)"
+    ],
+    "body": "var(--o-green-10)",
+    "description": "[light: 0, 77, 28, dark: 235, 255, 236]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-1": {
+    "prefix": [
+      "var(--o-orange-1)"
+    ],
+    "body": "var(--o-orange-1)",
+    "description": "[light: 255, 247, 232, dark: 77, 27, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-2": {
+    "prefix": [
+      "var(--o-orange-2)"
+    ],
+    "body": "var(--o-orange-2)",
+    "description": "[light: 255, 228, 186, dark: 121, 48, 4]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-3": {
     "prefix": [
-      "--o-color-info4"
+      "var(--o-orange-3)"
     ],
-    "body": "--o-color-info4",
-    "description": "禁用色: 用于按钮、文本、链接信息状态时禁用颜色[light: #f7f8fa, dark: #151515]",
+    "body": "var(--o-orange-3)",
+    "description": "[light: 255, 207, 139, dark: 166, 75, 10]",
     "scope": "css,scss,less"
   },
-  "--o-color-bg1": {
+  "--o-orange-4": {
     "prefix": [
-      "--o-color-bg1"
+      "var(--o-orange-4)"
     ],
-    "body": "--o-color-bg1",
-    "description": "一级容器背景色: 用于页面整体背景色[light: #f5f6f8, dark: #121212]",
+    "body": "var(--o-orange-4)",
+    "description": "[light: 255, 182, 93, dark: 210, 105, 19]",
     "scope": "css,scss,less"
   },
-  "--o-color-bg2": {
+  "--o-orange-5": {
     "prefix": [
-      "--o-color-bg2"
+      "var(--o-orange-5)"
     ],
-    "body": "--o-color-bg2",
-    "description": "二级容器背景色: 用于区块、卡片、弹出框、tooltip背景色[light: #ffffff, dark: #1e1e1e]",
+    "body": "var(--o-orange-5)",
+    "description": "[light: 255, 154, 46, dark: 255, 141, 31]",
     "scope": "css,scss,less"
   },
-  "--o-color-bg3": {
+  "--o-orange-6": {
     "prefix": [
-      "--o-color-bg3"
+      "var(--o-orange-6)"
     ],
-    "body": "--o-color-bg3",
-    "description": "三级容器背景色: 用于区块卡片背景色[light: #f7f8fa, dark: #242424]",
+    "body": "var(--o-orange-6)",
+    "description": "[light: 255, 125, 0, dark: 255, 150, 38]",
     "scope": "css,scss,less"
   },
-  "--o-color-bg4": {
+  "--o-orange-7": {
     "prefix": [
-      "--o-color-bg4"
+      "var(--o-orange-7)"
     ],
-    "body": "--o-color-bg4",
-    "description": "四级容器背景色: 用于区块、卡片、表头背景色[light: #e5e8f0, dark: #2e2e2e]",
+    "body": "var(--o-orange-7)",
+    "description": "[light: 210, 95, 0, dark: 255, 179, 87]",
     "scope": "css,scss,less"
   },
-  "--o-color-text1": {
+  "--o-orange-8": {
     "prefix": [
-      "--o-color-text1"
+      "var(--o-orange-8)"
     ],
-    "body": "--o-color-text1",
-    "description": "标题色: 用于强调、标题颜色[light: #000000, dark: #ffffff]",
+    "body": "var(--o-orange-8)",
+    "description": "[light: 166, 69, 0, dark: 255, 205, 135]",
     "scope": "css,scss,less"
   },
-  "--o-color-text1-inverse": {
+  "--o-orange-9": {
     "prefix": [
-      "--o-color-text1-inverse"
+      "var(--o-orange-9)"
     ],
-    "body": "--o-color-text1-inverse",
-    "description": "标题反色: 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题[light: #ffffff, dark: #000000]",
+    "body": "var(--o-orange-9)",
+    "description": "[light: 121, 46, 0, dark: 255, 227, 184]",
     "scope": "css,scss,less"
   },
-  "--o-color-text2": {
+  "--o-orange-10": {
     "prefix": [
-      "--o-color-text2"
+      "var(--o-orange-10)"
     ],
-    "body": "--o-color-text2",
-    "description": "正文色: 用于次强调、次级标题、正文颜色[light: #3f3f3f, dark: #e5e5e5]",
+    "body": "var(--o-orange-10)",
+    "description": "[light: 77, 27, 0, dark: 255, 247, 232]",
     "scope": "css,scss,less"
   },
-  "--o-color-text2-inverse": {
+  "--o-red-1": {
     "prefix": [
-      "--o-color-text2-inverse"
+      "var(--o-red-1)"
     ],
-    "body": "--o-color-text2-inverse",
-    "description": "正文反色: 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文[light: #e5e5e5, dark: #3f3f3f]",
+    "body": "var(--o-red-1)",
+    "description": "[light: 255, 236, 232, dark: 77, 0, 10]",
     "scope": "css,scss,less"
   },
-  "--o-color-text3": {
+  "--o-red-2": {
     "prefix": [
-      "--o-color-text3"
+      "var(--o-red-2)"
     ],
-    "body": "--o-color-text3",
-    "description": "提示色: 用于提示文本颜色[light: #707070, dark: #b2b2b2]",
+    "body": "var(--o-red-2)",
+    "description": "[light: 253, 205, 197, dark: 119, 6, 17]",
     "scope": "css,scss,less"
   },
-  "--o-color-text3-inverse": {
+  "--o-red-3": {
     "prefix": [
-      "--o-color-text3-inverse"
+      "var(--o-red-3)"
     ],
-    "body": "--o-color-text3-inverse",
-    "description": "提示反色: 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示[light: #b2b2b2, dark: #707070]",
+    "body": "var(--o-red-3)",
+    "description": "[light: 251, 172, 163, dark: 161, 22, 31]",
     "scope": "css,scss,less"
   },
-  "--o-color-text4": {
+  "--o-red-4": {
     "prefix": [
-      "--o-color-text4"
+      "var(--o-red-4)"
     ],
-    "body": "--o-color-text4",
-    "description": "置灰色: 用于禁用文本颜色[light: #cccccc, dark: #555555]",
+    "body": "var(--o-red-4)",
+    "description": "[light: 249, 137, 129, dark: 203, 46, 52]",
     "scope": "css,scss,less"
   },
-  "--o-color-text4-inverse": {
+  "--o-red-5": {
     "prefix": [
-      "--o-color-text4-inverse"
+      "var(--o-red-5)"
     ],
-    "body": "--o-color-text4-inverse",
-    "description": "置灰反色: 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本[light: #e5e5e5, dark: #2d2d2d]",
+    "body": "var(--o-red-5)",
+    "description": "[light: 247, 101, 96, dark: 245, 78, 78]",
     "scope": "css,scss,less"
   },
-  "--o-color-border1": {
+  "--o-red-6": {
     "prefix": [
-      "--o-color-border1"
+      "var(--o-red-6)"
     ],
-    "body": "--o-color-border1",
-    "description": "边框色: 较明显的边框[light: #707070, dark: #b2b2b2]",
+    "body": "var(--o-red-6)",
+    "description": "[light: 245, 63, 63, dark: 247, 105, 101]",
     "scope": "css,scss,less"
   },
-  "--o-color-border2": {
+  "--o-red-7": {
     "prefix": [
-      "--o-color-border2"
+      "var(--o-red-7)"
     ],
-    "body": "--o-color-border2",
-    "description": "弱边框色: 较弱的边框[light: #e5e5e5, dark: #2d2d2d]",
+    "body": "var(--o-red-7)",
+    "description": "[light: 203, 39, 45, dark: 249, 141, 134]",
     "scope": "css,scss,less"
   },
-  "--o-color-division1": {
+  "--o-red-8": {
     "prefix": [
-      "--o-color-division1"
+      "var(--o-red-8)"
     ],
-    "body": "--o-color-division1",
-    "description": "分隔线色1: 用于分隔线颜色[light: #707070, dark: #b2b2b2]",
+    "body": "var(--o-red-8)",
+    "description": "[light: 161, 21, 30, dark: 251, 176, 167]",
     "scope": "css,scss,less"
   },
-  "--o-color-mask1": {
+  "--o-red-9": {
     "prefix": [
-      "--o-color-mask1"
+      "var(--o-red-9)"
     ],
-    "body": "--o-color-mask1",
-    "description": "遮罩色1: 用于弹窗遮罩色[light: rgba(0, 0, 0, 0.5), dark: rgba(0, 0, 0, 0.5)]",
+    "body": "var(--o-red-9)",
+    "description": "[light: 119, 8, 19, dark: 253, 209, 202]",
     "scope": "css,scss,less"
   },
-  "--o-color-mask2": {
+  "--o-red-10": {
     "prefix": [
-      "--o-color-mask2"
+      "var(--o-red-10)"
     ],
-    "body": "--o-color-mask2",
-    "description": "遮罩色2: 用于loading遮罩色[light: rgba(0, 0, 0, 0.1), dark: rgba(0, 0, 0, 0.1)]",
+    "body": "var(--o-red-10)",
+    "description": "[light: 77, 0, 10, dark: 255, 240, 236]",
     "scope": "css,scss,less"
   },
-  "--o-shadow-1": {
+  "--o-gray-1": {
     "prefix": [
-      "--o-shadow-1"
+      "var(--o-gray-1)"
     ],
-    "body": "--o-shadow-1",
-    "description": "阴影1: 用于卡片、小弹窗、楼层阴影[light: 0 1px 5px rgba(45, 47, 51, 0.1), dark: 0 1px 7px rgba(0, 0, 0, 0.3)]",
+    "body": "var(--o-gray-1)",
+    "description": "[light: 255, 255, 255, dark: 0, 0, 0]",
     "scope": "css,scss,less"
   },
-  "--o-shadow-2": {
+  "--o-gray-2": {
     "prefix": [
-      "--o-shadow-2"
+      "var(--o-gray-2)"
     ],
-    "body": "--o-shadow-2",
-    "description": "阴影2: 用于卡片悬浮阴影[light: 0 6px 18px rgba(0, 47, 167, 0.14), dark: 0 6px 18px rgba(0, 0, 0, 0.42)]",
+    "body": "var(--o-gray-2)",
+    "description": "[light: 238, 238, 238, dark: 36, 36, 36]",
     "scope": "css,scss,less"
   },
-  "--o-shadow-3": {
+  "--o-gray-3": {
     "prefix": [
-      "--o-shadow-3"
+      "var(--o-gray-3)"
     ],
-    "body": "--o-shadow-3",
-    "description": "阴影3: 用于提示阴影[light: 0 10px 32px rgba(45, 47, 51, 0.18), dark: 0 10px 32px rgba(0, 0, 0, 0.54)]",
+    "body": "var(--o-gray-3)",
+    "description": "[light: 221, 221, 221, dark: 57, 57, 57]",
     "scope": "css,scss,less"
   },
-  "--o-gap-1": {
+  "--o-gray-4": {
     "prefix": [
-      "--o-gap-1"
+      "var(--o-gray-4)"
     ],
-    "body": "--o-gap-1",
-    "description": "间距1: 用于组件之间的间距1[light: 4px, dark: 4px]",
+    "body": "var(--o-gray-4)",
+    "description": "[light: 198, 198, 198, dark: 94, 94, 94]",
     "scope": "css,scss,less"
   },
-  "--o-gap-2": {
+  "--o-gray-5": {
     "prefix": [
-      "--o-gap-2"
+      "var(--o-gray-5)"
     ],
-    "body": "--o-gap-2",
-    "description": "间距2: 用于组件之间的间距2[light: 8px, dark: 8px]",
+    "body": "var(--o-gray-5)",
+    "description": "[light: 139, 139, 139, dark: 119, 119, 122]",
     "scope": "css,scss,less"
   },
-  "--o-gap-3": {
+  "--o-gray-6": {
     "prefix": [
-      "--o-gap-3"
+      "var(--o-gray-6)"
     ],
-    "body": "--o-gap-3",
-    "description": "间距3: 用于组件之间的间距3[light: 12px, dark: 12px]",
+    "body": "var(--o-gray-6)",
+    "description": "[light: 119, 119, 119, dark: 166, 166, 166]",
     "scope": "css,scss,less"
   },
-  "--o-gap-4": {
+  "--o-gray-7": {
     "prefix": [
-      "--o-gap-4"
+      "var(--o-gray-7)"
     ],
-    "body": "--o-gap-4",
-    "description": "间距4: 用于组件之间的间距4[light: 16px, dark: 16px]",
+    "body": "var(--o-gray-7)",
+    "description": "[light: 94, 94, 94, dark: 221, 221, 221]",
     "scope": "css,scss,less"
   },
-  "--o-gap-5": {
+  "--o-gray-8": {
     "prefix": [
-      "--o-gap-5"
+      "var(--o-gray-8)"
     ],
-    "body": "--o-gap-5",
-    "description": "间距5: 用于组件之间的间距5[light: 24px, dark: 24px]",
+    "body": "var(--o-gray-8)",
+    "description": "[light: 75, 75, 75, dark: 238, 238, 238]",
     "scope": "css,scss,less"
   },
-  "--o-gap-6": {
+  "--o-gray-9": {
     "prefix": [
-      "--o-gap-6"
+      "var(--o-gray-9)"
     ],
-    "body": "--o-gap-6",
-    "description": "间距6: 用于组件之间的间距6[light: 32px, dark: 32px]",
+    "body": "var(--o-gray-9)",
+    "description": "[light: 44, 44, 44, dark: 243, 243, 243]",
     "scope": "css,scss,less"
   },
-  "--o-gap-7": {
+  "--o-gray-10": {
     "prefix": [
-      "--o-gap-7"
+      "var(--o-gray-10)"
     ],
-    "body": "--o-gap-7",
-    "description": "间距7: 用于组件之间的间距7[light: 40px, dark: 40px]",
+    "body": "var(--o-gray-10)",
+    "description": "[light: 0, 0, 0, dark: 255, 255, 255]",
     "scope": "css,scss,less"
   },
-  "--o-gap-8": {
+  "--o-mixedgray-1": {
     "prefix": [
-      "--o-gap-8"
+      "var(--o-mixedgray-1)"
     ],
-    "body": "--o-gap-8",
-    "description": "间距8: 用于组件之间的间距8[light: 64px, dark: 64px]",
+    "body": "var(--o-mixedgray-1)",
+    "description": "[light: 247, 248, 250, dark: 23, 23, 26]",
     "scope": "css,scss,less"
   },
-  "--o-size-l": {
+  "--o-mixedgray-2": {
     "prefix": [
-      "--o-size-l"
+      "var(--o-mixedgray-2)"
     ],
-    "body": "--o-size-l",
-    "description": "大尺寸: 尺寸[light: 40px, dark: 40px]",
+    "body": "var(--o-mixedgray-2)",
+    "description": "[light: 242, 243, 245, dark: 46, 46, 48]",
     "scope": "css,scss,less"
   },
-  "--o-size-m": {
+  "--o-mixedgray-3": {
     "prefix": [
-      "--o-size-m"
+      "var(--o-mixedgray-3)"
     ],
-    "body": "--o-size-m",
-    "description": "中尺寸: 尺寸[light: 32px, dark: 32px]",
+    "body": "var(--o-mixedgray-3)",
+    "description": "[light: 229, 230, 235, dark: 72, 72, 73]",
     "scope": "css,scss,less"
   },
-  "--o-size-s": {
+  "--o-mixedgray-4": {
     "prefix": [
-      "--o-size-s"
+      "var(--o-mixedgray-4)"
     ],
-    "body": "--o-size-s",
-    "description": "小尺寸: 小尺寸[light: 24px, dark: 24px]",
+    "body": "var(--o-mixedgray-4)",
+    "description": "[light: 201, 205, 212, dark: 95, 95, 96]",
     "scope": "css,scss,less"
   },
-  "--o-icon_size-l": {
+  "--o-mixedgray-5": {
     "prefix": [
-      "--o-icon_size-l"
+      "var(--o-mixedgray-5)"
     ],
-    "body": "--o-icon_size-l",
-    "description": "大尺寸图标: 尺寸[light: 48px, dark: 48px]",
+    "body": "var(--o-mixedgray-5)",
+    "description": "[light: 169, 174, 184, dark: 120, 120, 122]",
     "scope": "css,scss,less"
   },
-  "--o-icon_size-m": {
+  "--o-mixedgray-6": {
     "prefix": [
-      "--o-icon_size-m"
+      "var(--o-mixedgray-6)"
     ],
-    "body": "--o-icon_size-m",
-    "description": "中尺寸图标: 尺寸[light: 32px, dark: 32px]",
+    "body": "var(--o-mixedgray-6)",
+    "description": "[light: 134, 144, 156, dark: 146, 146, 147]",
     "scope": "css,scss,less"
   },
-  "--o-icon_size-s": {
+  "--o-mixedgray-7": {
     "prefix": [
-      "--o-icon_size-s"
+      "var(--o-mixedgray-7)"
     ],
-    "body": "--o-icon_size-s",
-    "description": "小尺寸图标: 小尺寸[light: 24px, dark: 24px]",
+    "body": "var(--o-mixedgray-7)",
+    "description": "[light: 107, 119, 133, dark: 171, 171, 172]",
     "scope": "css,scss,less"
   },
-  "--o-icon_size-xs": {
+  "--o-mixedgray-8": {
     "prefix": [
-      "--o-icon_size-xs"
+      "var(--o-mixedgray-8)"
     ],
-    "body": "--o-icon_size-xs",
-    "description": "超小尺寸图标: 小尺寸[light: 16px, dark: 16px]",
+    "body": "var(--o-mixedgray-8)",
+    "description": "[light: 78, 89, 105, dark: 197, 197, 197]",
     "scope": "css,scss,less"
   },
-  "--o-font_size-display1": {
+  "--o-mixedgray-9": {
     "prefix": [
-      "--o-font_size-display1"
+      "var(--o-mixedgray-9)"
     ],
-    "body": "--o-font_size-display1",
-    "description": "一级数据展示: 一级数据展示[light: 64px, dark: 64px]",
+    "body": "var(--o-mixedgray-9)",
+    "description": "[light: 39, 46, 59, dark: 223, 223, 223]",
     "scope": "css,scss,less"
   },
-  "--o-font_size-display2": {
+  "--o-mixedgray-10": {
     "prefix": [
-      "--o-font_size-display2"
+      "var(--o-mixedgray-10)"
     ],
-    "body": "--o-font_size-display2",
-    "description": "二级数据展示: 二级数据展示[light: 54px, dark: 54px]",
+    "body": "var(--o-mixedgray-10)",
+    "description": "[light: 29, 33, 41, dark: 246, 246, 246]",
     "scope": "css,scss,less"
   },
-  "--o-font_size-display3": {
+  "--o-color-info1": {
+    "prefix": [
+      "var(--o-color-info1)"
+    ],
+    "body": "var(--o-color-info1)",
+    "description": "一级/强调/标题[light: rgb(var(--o-gray-10)), 'dark: rgb(var(--o-gray-10))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info2": {
+    "prefix": [
+      "var(--o-color-info2)"
+    ],
+    "body": "var(--o-color-info2)",
+    "description": "二级/次强调/正文[light: rgb(var(--o-gray-8)), 'dark: rgb(var(--o-gray-8))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info3": {
+    "prefix": [
+      "var(--o-color-info3)"
+    ],
+    "body": "var(--o-color-info3)",
+    "description": "三级/辅助信息[light: rgb(var(--o-gray-6)), 'dark: rgb(var(--o-gray-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info4": {
+    "prefix": [
+      "var(--o-color-info4)"
+    ],
+    "body": "var(--o-color-info4)",
+    "description": "置灰/禁用[light: rgb(var(--o-gray-4)), 'dark: rgb(var(--o-gray-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info1-inverse": {
+    "prefix": [
+      "var(--o-color-info1-inverse)"
+    ],
+    "body": "var(--o-color-info1-inverse)",
+    "description": "一级/次强调/正文反色[light: rgb(var(--o-gray-1)), 'dark: rgb(var(--o-gray-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info2-inverse": {
+    "prefix": [
+      "var(--o-color-info2-inverse)"
+    ],
+    "body": "var(--o-color-info2-inverse)",
+    "description": "二级/辅助信息反色[light: rgb(var(--o-gray-3)), 'dark: rgb(var(--o-gray-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info3-inverse": {
     "prefix": [
-      "--o-font_size-display3"
+      "var(--o-color-info3-inverse)"
     ],
-    "body": "--o-font_size-display3",
-    "description": "三级数据展示: 三级数据展示[light: 36px, dark: 36px]",
+    "body": "var(--o-color-info3-inverse)",
+    "description": "三级/辅助信息反色[light: rgb(var(--o-gray-5)), 'dark: rgb(var(--o-gray-5))]",
     "scope": "css,scss,less"
   },
-  "--o-font_size-display4": {
+  "--o-color-info4-inverse": {
     "prefix": [
-      "--o-font_size-display4"
+      "var(--o-color-info4-inverse)"
     ],
-    "body": "--o-font_size-display4",
-    "description": "四级数据展示: 四级数据展示[light: 28px, dark: 28px]",
+    "body": "var(--o-color-info4-inverse)",
+    "description": "置灰/禁用反色[light: rgb(var(--o-gray-7)), 'dark: rgb(var(--o-gray-7))]",
     "scope": "css,scss,less"
   },
-  "--o-font_size-h1": {
+  "--o-color-neutral1": {
     "prefix": [
-      "--o-font_size-h1"
+      "var(--o-color-neutral1)"
     ],
-    "body": "--o-font_size-h1",
-    "description": "一级标题: 一级标题[light: 24px, dark: 24px]",
+    "body": "var(--o-color-neutral1)",
+    "description": "白底[light: rgb(var(--o-gray-1)), 'dark: rgb(var(--o-gray-1))]",
     "scope": "css,scss,less"
   },
-  "--o-font_size-h2": {
+  "--o-color-neutral2": {
     "prefix": [
-      "--o-font_size-h2"
+      "var(--o-color-neutral2)"
     ],
-    "body": "--o-font_size-h2",
-    "description": "二级标题: 二级标题[light: 20px, dark: 20px]",
+    "body": "var(--o-color-neutral2)",
+    "description": "浅色背景(页面背景)[light: rgb(var(--o-mixedgray-1)), 'dark: rgb(var(--o-mixedgray-1))]",
     "scope": "css,scss,less"
   },
-  "--o-font_size-h3": {
+  "--o-color-neutral3": {
     "prefix": [
-      "--o-font_size-h3"
+      "var(--o-color-neutral3)"
     ],
-    "body": "--o-font_size-h3",
-    "description": "三级标题: 三级标题[light: 18px, dark: 18px]",
+    "body": "var(--o-color-neutral3)",
+    "description": "浅色特殊场景/hover/禁用[light: rgb(var(--o-mixedgray-2)), 'dark: rgb(var(--o-mixedgray-2))]",
     "scope": "css,scss,less"
   },
-  "--o-font_size-h4": {
+  "--o-color-neutral4": {
     "prefix": [
-      "--o-font_size-h4"
+      "var(--o-color-neutral4)"
     ],
-    "body": "--o-font_size-h4",
-    "description": "四级标题: 四级标题[light: 16px, dark: 16px]",
+    "body": "var(--o-color-neutral4)",
+    "description": "常规背景/浅色边框[light: rgb(var(--o-mixedgray-3)), 'dark: rgb(var(--o-mixedgray-3))]",
     "scope": "css,scss,less"
   },
-  "--o-font_size-text": {
+  "--o-color-neutral5": {
     "prefix": [
-      "--o-font_size-text"
+      "var(--o-color-neutral5)"
     ],
-    "body": "--o-font_size-text",
-    "description": "正文: 正文[light: 14px, dark: 14px]",
+    "body": "var(--o-color-neutral5)",
+    "description": "特殊场景/hover/禁用[light: rgb(var(--o-mixedgray-4)), 'dark: rgb(var(--o-mixedgray-4))]",
     "scope": "css,scss,less"
   },
-  "--o-font_size-tip1": {
+  "--o-color-neutral6": {
     "prefix": [
-      "--o-font_size-tip1"
+      "var(--o-color-neutral6)"
     ],
-    "body": "--o-font_size-tip1",
-    "description": "提示文本1: 提示文本1[light: 12px, dark: 12px]",
+    "body": "var(--o-color-neutral6)",
+    "description": "深色背景/常规边框[light: rgb(var(--o-mixedgray-5)), 'dark: rgb(var(--o-mixedgray-5))]",
     "scope": "css,scss,less"
   },
-  "--o-font_size-tip2": {
+  "--o-color-neutral7": {
     "prefix": [
-      "--o-font_size-tip2"
+      "var(--o-color-neutral7)"
     ],
-    "body": "--o-font_size-tip2",
-    "description": "提示文本2: 提示文本2[light: 10px, dark: 10px]",
+    "body": "var(--o-color-neutral7)",
+    "description": "深色边框[light: rgb(var(--o-mixedgray-6)), 'dark: rgb(var(--o-mixedgray-6))]",
     "scope": "css,scss,less"
   },
-  "--o-line_height-display1": {
+  "--o-color-neutral8": {
     "prefix": [
-      "--o-line_height-display1"
+      "var(--o-color-neutral8)"
     ],
-    "body": "--o-line_height-display1",
-    "description": "一级数据展示: 一级数据展示[light: 84px, dark: 84px]",
+    "body": "var(--o-color-neutral8)",
+    "description": "重/特殊场景[light: rgb(var(--o-mixedgray-7)), 'dark: rgb(var(--o-mixedgray-7))]",
     "scope": "css,scss,less"
   },
-  "--o-line_height-display2": {
+  "--o-color-primary6": {
     "prefix": [
-      "--o-line_height-display2"
+      "var(--o-color-primary6)"
     ],
-    "body": "--o-line_height-display2",
-    "description": "二级数据展示: 二级数据展示[light: 76px, dark: 76px]",
+    "body": "var(--o-color-primary6)",
+    "description": "常规[light: rgb(var(--o-blue-6)), 'dark: rgb(var(--o-blue-6))]",
     "scope": "css,scss,less"
   },
-  "--o-line_height-display3": {
+  "--o-color-primary5": {
     "prefix": [
-      "--o-line_height-display3"
+      "var(--o-color-primary5)"
     ],
-    "body": "--o-line_height-display3",
-    "description": "三级数据展示: 三级数据展示[light: 48px, dark: 48px]",
+    "body": "var(--o-color-primary5)",
+    "description": "悬浮[light: rgb(var(--o-blue-5)), 'dark: rgb(var(--o-blue-5))]",
     "scope": "css,scss,less"
   },
-  "--o-line_height-display4": {
+  "--o-color-primary7": {
+    "prefix": [
+      "var(--o-color-primary7)"
+    ],
+    "body": "var(--o-color-primary7)",
+    "description": "激活[light: rgb(var(--o-blue-7)), 'dark: rgb(var(--o-blue-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary4": {
     "prefix": [
-      "--o-line_height-display4"
+      "var(--o-color-primary4)"
     ],
-    "body": "--o-line_height-display4",
-    "description": "四级数据展示: 四级数据展示[light: 36px, dark: 36px]",
+    "body": "var(--o-color-primary4)",
+    "description": "特殊场景[light: rgb(var(--o-blue-4)), 'dark: rgb(var(--o-blue-4))]",
     "scope": "css,scss,less"
   },
-  "--o-line_height-h1": {
+  "--o-color-primary3": {
+    "prefix": [
+      "var(--o-color-primary3)"
+    ],
+    "body": "var(--o-color-primary3)",
+    "description": "一般禁用[light: rgb(var(--o-blue-3)), 'dark: rgb(var(--o-blue-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary2": {
     "prefix": [
-      "--o-line_height-h1"
+      "var(--o-color-primary2)"
     ],
-    "body": "--o-line_height-h1",
-    "description": "一级标题: 一级标题[light: 32px, dark: 32px]",
+    "body": "var(--o-color-primary2)",
+    "description": "文字禁用[light: rgb(var(--o-blue-2)), 'dark: rgb(var(--o-blue-2))]",
     "scope": "css,scss,less"
   },
-  "--o-line_height-h2": {
+  "--o-color-primary1": {
     "prefix": [
-      "--o-line_height-h2"
+      "var(--o-color-primary1)"
     ],
-    "body": "--o-line_height-h2",
-    "description": "二级标题: 二级标题[light: 28px, dark: 28px]",
+    "body": "var(--o-color-primary1)",
+    "description": "浅色/白底悬浮[light: rgb(var(--o-blue-1)), 'dark: rgb(var(--o-blue-1))]",
     "scope": "css,scss,less"
   },
-  "--o-line_height-h3": {
+  "--o-color-success6": {
     "prefix": [
-      "--o-line_height-h3"
+      "var(--o-color-success6)"
     ],
-    "body": "--o-line_height-h3",
-    "description": "三级标题: 三级标题[light: 26px, dark: 26px]",
+    "body": "var(--o-color-success6)",
+    "description": "常规[light: rgb(var(--o-green-6)), 'dark: rgb(var(--o-green-6))]",
     "scope": "css,scss,less"
   },
-  "--o-line_height-h4": {
+  "--o-color-success5": {
     "prefix": [
-      "--o-line_height-h4"
+      "var(--o-color-success5)"
     ],
-    "body": "--o-line_height-h4",
-    "description": "四级标题: 四级标题[light: 24px, dark: 24px]",
+    "body": "var(--o-color-success5)",
+    "description": "悬浮[light: rgb(var(--o-green-5)), 'dark: rgb(var(--o-green-5))]",
     "scope": "css,scss,less"
   },
-  "--o-line_height-text": {
+  "--o-color-success7": {
     "prefix": [
-      "--o-line_height-text"
+      "var(--o-color-success7)"
     ],
-    "body": "--o-line_height-text",
-    "description": "正文: 正文[light: 22px, dark: 22px]",
+    "body": "var(--o-color-success7)",
+    "description": "激活[light: rgb(var(--o-green-7)), 'dark: rgb(var(--o-green-7))]",
     "scope": "css,scss,less"
   },
-  "--o-line_height-tip1": {
+  "--o-color-success4": {
     "prefix": [
-      "--o-line_height-tip1"
+      "var(--o-color-success4)"
     ],
-    "body": "--o-line_height-tip1",
-    "description": "提示文本1: 提示文本1[light: 18px, dark: 18px]",
+    "body": "var(--o-color-success4)",
+    "description": "特殊场景[light: rgb(var(--o-green-4)), 'dark: rgb(var(--o-green-4))]",
     "scope": "css,scss,less"
   },
-  "--o-line_height-tip2": {
+  "--o-color-success3": {
     "prefix": [
-      "--o-line_height-tip2"
+      "var(--o-color-success3)"
     ],
-    "body": "--o-line_height-tip2",
-    "description": "提示文本2: 提示文本2[light: 14px, dark: 14px]",
+    "body": "var(--o-color-success3)",
+    "description": "一般禁用[light: rgb(var(--o-green-3)), 'dark: rgb(var(--o-green-3))]",
     "scope": "css,scss,less"
   },
-  "--o-radius-l": {
+  "--o-color-success2": {
     "prefix": [
-      "--o-radius-l"
+      "var(--o-color-success2)"
     ],
-    "body": "--o-radius-l",
-    "description": "大尺寸圆角: 大尺寸圆角[light: 8px, dark: 8px]",
+    "body": "var(--o-color-success2)",
+    "description": "文字禁用[light: rgb(var(--o-green-2)), 'dark: rgb(var(--o-green-2))]",
     "scope": "css,scss,less"
   },
-  "--o-radius-m": {
+  "--o-color-success1": {
     "prefix": [
-      "--o-radius-m"
+      "var(--o-color-success1)"
     ],
-    "body": "--o-radius-m",
-    "description": "中尺寸圆角: 中尺寸圆角[light: 4px, dark: 4px]",
+    "body": "var(--o-color-success1)",
+    "description": "浅色/白底悬浮[light: rgb(var(--o-green-1)), 'dark: rgb(var(--o-green-1))]",
     "scope": "css,scss,less"
   },
-  "--o-radius-s": {
+  "--o-color-warning6": {
     "prefix": [
-      "--o-radius-s"
+      "var(--o-color-warning6)"
     ],
-    "body": "--o-radius-s",
-    "description": "小尺寸圆角: 小尺寸圆角[light: 2px, dark: 2px]",
+    "body": "var(--o-color-warning6)",
+    "description": "常规[light: rgb(var(--o-orange-6)), 'dark: rgb(var(--o-orange-6))]",
     "scope": "css,scss,less"
   },
-  "--o-duration-s": {
+  "--o-color-warning5": {
     "prefix": [
-      "--o-duration-s"
+      "var(--o-color-warning5)"
     ],
-    "body": "--o-duration-s",
-    "description": "持续时间: 用于退出屏幕的动画[light: 200ms, dark: 200ms]",
+    "body": "var(--o-color-warning5)",
+    "description": "悬浮[light: rgb(var(--o-orange-5)), 'dark: rgb(var(--o-orange-5))]",
     "scope": "css,scss,less"
   },
-  "--o-duration-m1": {
+  "--o-color-warning7": {
     "prefix": [
-      "--o-duration-m1"
+      "var(--o-color-warning7)"
     ],
-    "body": "--o-duration-m1",
-    "description": "持续时间: 用于当曲线为standard-in时进入屏幕的动画[light: 250ms, dark: 250ms]",
+    "body": "var(--o-color-warning7)",
+    "description": "激活[light: rgb(var(--o-orange-7)), 'dark: rgb(var(--o-orange-7))]",
     "scope": "css,scss,less"
   },
-  "--o-duration-m2": {
+  "--o-color-warning4": {
     "prefix": [
-      "--o-duration-m2"
+      "var(--o-color-warning4)"
     ],
-    "body": "--o-duration-m2",
-    "description": "持续时间: 用于当曲线为standard时开始、结束的动画[light: 300ms, dark: 300ms]",
+    "body": "var(--o-color-warning4)",
+    "description": "特殊场景[light: rgb(var(--o-orange-4)), 'dark: rgb(var(--o-orange-4))]",
     "scope": "css,scss,less"
   },
-  "--o-duration-m3": {
+  "--o-color-warning3": {
     "prefix": [
-      "--o-duration-m3"
+      "var(--o-color-warning3)"
     ],
-    "body": "--o-duration-m3",
-    "description": "持续时间: 用于当曲线为emphasized-in时进入屏幕的动画[light: 400ms, dark: 400ms]",
+    "body": "var(--o-color-warning3)",
+    "description": "一般禁用[light: rgb(var(--o-orange-3)), 'dark: rgb(var(--o-orange-3))]",
     "scope": "css,scss,less"
   },
-  "--o-duration-l": {
+  "--o-color-warning2": {
     "prefix": [
-      "--o-duration-l"
+      "var(--o-color-warning2)"
     ],
-    "body": "--o-duration-l",
-    "description": "持续时间: 用于当曲线为emphasized时开始、结束的动画[light: 500ms, dark: 500ms]",
+    "body": "var(--o-color-warning2)",
+    "description": "文字禁用[light: rgb(var(--o-orange-2)), 'dark: rgb(var(--o-orange-2))]",
     "scope": "css,scss,less"
   },
-  "--o-duration-xl": {
+  "--o-color-warning1": {
     "prefix": [
-      "--o-duration-xl"
+      "var(--o-color-warning1)"
     ],
-    "body": "--o-duration-xl",
-    "description": "持续时间: 用于当曲线为emphasized时，轮播切换动画[light: 1000ms, dark: 1000ms]",
+    "body": "var(--o-color-warning1)",
+    "description": "浅色/白底悬浮[light: rgb(var(--o-orange-1)), 'dark: rgb(var(--o-orange-1))]",
     "scope": "css,scss,less"
   },
-  "--o-easing-linear": {
+  "--o-color-danger6": {
     "prefix": [
-      "--o-easing-linear"
+      "var(--o-color-danger6)"
     ],
-    "body": "--o-easing-linear",
-    "description": "线性动画曲线: 线性曲线[light: cubic-bezier(0, 0, 1, 1), dark: cubic-bezier(0, 0, 1, 1)]",
+    "body": "var(--o-color-danger6)",
+    "description": "常规[light: rgb(var(--o-red-6)), 'dark: rgb(var(--o-red-6))]",
     "scope": "css,scss,less"
   },
-  "--o-easing-standard": {
+  "--o-color-danger5": {
     "prefix": [
-      "--o-easing-standard"
+      "var(--o-color-danger5)"
     ],
-    "body": "--o-easing-standard",
-    "description": "动画曲线: 用于组件[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
+    "body": "var(--o-color-danger5)",
+    "description": "悬浮[light: rgb(var(--o-red-5)), 'dark: rgb(var(--o-red-5))]",
     "scope": "css,scss,less"
   },
-  "--o-easing-standard-in": {
+  "--o-color-danger7": {
     "prefix": [
-      "--o-easing-standard-in"
+      "var(--o-color-danger7)"
     ],
-    "body": "--o-easing-standard-in",
-    "description": "动画曲线: 用于组件[light: cubic-bezier(0, 0, 0, 1), dark: cubic-bezier(0, 0, 0, 1)]",
+    "body": "var(--o-color-danger7)",
+    "description": "激活[light: rgb(var(--o-red-7)), 'dark: rgb(var(--o-red-7))]",
     "scope": "css,scss,less"
   },
-  "--o-easing-standard-out": {
+  "--o-color-danger4": {
     "prefix": [
-      "--o-easing-standard-out"
+      "var(--o-color-danger4)"
     ],
-    "body": "--o-easing-standard-out",
-    "description": "动画曲线: 用于组件[light: cubic-bezier(0.3, 0, 1, 1), dark: cubic-bezier(0.3, 0, 1, 1)]",
+    "body": "var(--o-color-danger4)",
+    "description": "特殊场景[light: rgb(var(--o-red-4)), 'dark: rgb(var(--o-red-4))]",
     "scope": "css,scss,less"
   },
-  "--o-easing-emphasized": {
+  "--o-color-danger3": {
     "prefix": [
-      "--o-easing-emphasized"
+      "var(--o-color-danger3)"
     ],
-    "body": "--o-easing-emphasized",
-    "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
+    "body": "var(--o-color-danger3)",
+    "description": "一般禁用[light: rgb(var(--o-red-3)), 'dark: rgb(var(--o-red-3))]",
     "scope": "css,scss,less"
   },
-  "--o-easing-emphasized-in": {
+  "--o-color-danger2": {
     "prefix": [
-      "--o-easing-emphasized-in"
+      "var(--o-color-danger2)"
     ],
-    "body": "--o-easing-emphasized-in",
-    "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.3, 0, 0.8, 0.15), dark: cubic-bezier(0.3, 0, 0.8, 0.15)]",
+    "body": "var(--o-color-danger2)",
+    "description": "文字禁用[light: rgb(var(--o-red-2)), 'dark: rgb(var(--o-red-2))]",
     "scope": "css,scss,less"
   },
-  "--o-easing-emphasized-out": {
+  "--o-color-danger1": {
     "prefix": [
-      "--o-easing-emphasized-out"
+      "var(--o-color-danger1)"
     ],
-    "body": "--o-easing-emphasized-out",
-    "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.05, 0.7, 0.1, 1), dark: cubic-bezier(0.05, 0.7, 0.1, 1)]",
+    "body": "var(--o-color-danger1)",
+    "description": "浅色/白底悬浮[light: rgb(var(--o-red-1)), 'dark: rgb(var(--o-red-1))]",
     "scope": "css,scss,less"
   }
 }
\ No newline at end of file
diff --git a/packages/docs/global.md b/packages/docs/global.md
index 8ff23227..08bd4dea 100644
--- a/packages/docs/global.md
+++ b/packages/docs/global.md
@@ -23,3 +23,7 @@
 | variant | fill outline text                     | outline   |
 | rounded | undefined string 'pill'               | undefined |
 | size    | small normal large                    | normal    |
+
+# 变量定义都在 var.scss 里，同时使用最外层内定义；
+
+# 不同状态通过类改变变量值，而不是新定义多个变量；
diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss
index c927724f..0c6e9d34 100644
--- a/packages/opendesign/src/components/button/style/index.scss
+++ b/packages/opendesign/src/components/button/style/index.scss
@@ -6,7 +6,6 @@
   border: 1px solid transparent;
   transition: all var(--o-duration-s) var(--o-easing-standard);
   white-space: nowrap;
-  cursor: pointer;
 
   display: inline-flex;
   align-items: center;
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index 8915aad5..2c364e0d 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -7,10 +7,10 @@ import { trigger } from '../_shared/event';
 import { Enter } from '../_shared/keycode';
 import { toInputString } from './input';
 import { OResizeObserver } from '../resize-observer';
-import { inputPorps } from './types';
+import { inputProps } from './types';
 import { getRoundClass } from '../_shared/style-class';
 
-const props = defineProps(inputPorps);
+const props = defineProps(inputProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string): void;
diff --git a/packages/opendesign/src/components/input/types.ts b/packages/opendesign/src/components/input/types.ts
index 6c4cd98c..2ce3efbb 100644
--- a/packages/opendesign/src/components/input/types.ts
+++ b/packages/opendesign/src/components/input/types.ts
@@ -1,7 +1,7 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import { SizeT, ShapeT, ColorT, RoundT } from '../_shared/global';
+import type { SizeT, ShapeT, RoundT } from '../_shared/global';
 
-export const inputPorps = {
+export const inputProps = {
   /**
    * 下拉框的值
    * v-model
@@ -94,4 +94,4 @@ export const inputPorps = {
   },
 };
 
-export type InputPorpsT = ExtractPropTypes<typeof inputPorps>;
+export type InputPropsT = ExtractPropTypes<typeof inputProps>;
diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css
index b5711226..4e2ac0e8 100644
--- a/packages/opendesign/src/components/style/dark.token.css
+++ b/packages/opendesign/src/components/style/dark.token.css
@@ -1,689 +1,493 @@
 /* theme: dark */
 :root[theme="dark"] {
   /**
-   * @name 常规色
-   * @type color
-   * @group primary
-   * @description 用于按钮、文本、链接强调状态时常规颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-primary1: #406fe7;
+  --o-blue-1: 0, 13, 77;
   /**
-   * @name 悬浮色
-   * @type color
-   * @group primary
-   * @description 用于按钮、文本、链接强调状态时悬浮颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-primary2: #5988ff;
+  --o-blue-2: 4, 27, 121;
   /**
-   * @name 聚焦色
-   * @type color
-   * @group primary
-   * @description 用于按钮、文本、链接强调状态时聚焦颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-primary3: #002fa7;
+  --o-blue-3: 14, 50, 166;
   /**
-   * @name 禁用色
-   * @type color
-   * @group primary
-   * @description 用于按钮、文本、链接强调状态时禁用颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-primary4: #0c2360;
+  --o-blue-4: 29, 77, 210;
   /**
-   * @name 常规色
-   * @type color
-   * @group major
-   * @description 用于按钮、文本、链接major状态时文本颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-major1: #feb32a;
+  --o-blue-5: 48, 111, 255;
   /**
-   * @name 常规色
-   * @type color
-   * @group normal
-   * @description 用于按钮、文本、链接常态时常规颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-normal1: var(--o-color-info1);
+  --o-blue-6: 60, 126, 255;
   /**
-   * @name 悬浮色
-   * @type color
-   * @group normal
-   * @description 用于按钮、文本、链接常态时悬浮颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-normal2: var(--o-color-primary2);
+  --o-blue-7: 104, 159, 255;
   /**
-   * @name 聚焦色
-   * @type color
-   * @group normal
-   * @description 用于按钮、文本、链接常态时聚焦颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-normal3: var(--o-color-primary3);
+  --o-blue-8: 147, 190, 255;
   /**
-   * @name 禁用色
-   * @type color
-   * @group normal
-   * @description 用于按钮、文本、链接常态时禁用颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-normal4: var(--o-color-info4);
+  --o-blue-9: 190, 218, 255;
   /**
-   * @name 常规色
-   * @type color
-   * @group success
-   * @description 用于按钮、文本、链接成功状态时常规颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-success1: #6dc335;
+  --o-blue-10: 234, 244, 255;
   /**
-   * @name 悬浮色
-   * @type color
-   * @group success
-   * @description 用于按钮、文本、链接成功状态时悬浮颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-success2: #93e95b;
+  --o-yellow-1: 77, 56, 0;
   /**
-   * @name 聚焦色
-   * @type color
-   * @group success
-   * @description 用于按钮、文本、链接成功状态时聚焦颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-success3: #62af30;
+  --o-yellow-2: 120, 94, 7;
   /**
-   * @name 禁用色
-   * @type color
-   * @group success
-   * @description 用于按钮、文本、链接成功状态时禁用颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-success4: #355f1a;
+  --o-yellow-3: 163, 134, 20;
   /**
-   * @name 常规色
-   * @type color
-   * @group warning
-   * @description 用于按钮、文本、链接告警状态时常规颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-warning1: #ff8e36;
+  --o-yellow-4: 207, 179, 37;
   /**
-   * @name 悬浮色
-   * @type color
-   * @group warning
-   * @description 用于按钮、文本、链接告警状态时悬浮颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-warning2: #ffb45c;
+  --o-yellow-5: 250, 225, 60;
   /**
-   * @name 聚焦色
-   * @type color
-   * @group warning
-   * @description 用于按钮、文本、链接告警状态时聚焦颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-warning3: #ff801c;
+  --o-yellow-6: 251, 233, 75;
   /**
-   * @name 禁用色
-   * @type color
-   * @group warning
-   * @description 用于按钮、文本、链接告警状态时禁用颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-warning4: #b54f00;
+  --o-yellow-7: 252, 243, 116;
   /**
-   * @name 常规色
-   * @type color
-   * @group danger
-   * @description 用于按钮、文本、链接错误状态时常规颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-danger1: #f3524d;
+  --o-yellow-8: 253, 250, 157;
   /**
-   * @name 悬浮色
-   * @type color
-   * @group danger
-   * @description 用于按钮、文本、链接错误状态时悬浮颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-danger2: #ff7873;
+  --o-yellow-9: 254, 254, 198;
   /**
-   * @name 聚焦色
-   * @type color
-   * @group danger
-   * @description 用于按钮、文本、链接错误状态时聚焦颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-danger3: #f13b35;
+  --o-yellow-10: 254, 255, 240;
   /**
-   * @name 禁用色
-   * @type color
-   * @group danger
-   * @description 用于按钮、文本、链接错误状态时禁用颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-danger4: #850d09;
+  --o-green-1: 0, 77, 28;
   /**
-   * @name 常规色
-   * @type color
-   * @group info
-   * @description 用于按钮、文本、链接信息状态时常规颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-info1: #242424;
+  --o-green-2: 4, 102, 37;
   /**
-   * @name 悬浮色
-   * @type color
-   * @group info
-   * @description 用于按钮、文本、链接信息状态时悬浮颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-info2: #2e2e2e;
+  --o-green-3: 10, 128, 45;
   /**
-   * @name 聚焦色
-   * @type color
-   * @group info
-   * @description 用于按钮、文本、链接信息状态时聚焦颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-info3: #1e1e1e;
+  --o-green-4: 18, 154, 55;
   /**
-   * @name 禁用色
-   * @type color
-   * @group info
-   * @description 用于按钮、文本、链接信息状态时禁用颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-info4: #151515;
+  --o-green-5: 29, 180, 64;
   /**
-   * @name 一级容器背景色
-   * @type color
-   * @group background
-   * @description 用于页面整体背景色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-bg1: #121212;
+  --o-green-6: 39, 195, 70;
   /**
-   * @name 二级容器背景色
-   * @type color
-   * @group background
-   * @description 用于区块、卡片、弹出框、tooltip背景色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-bg2: #1e1e1e;
+  --o-green-7: 80, 210, 102;
   /**
-   * @name 三级容器背景色
-   * @type color
-   * @group background
-   * @description 用于区块卡片背景色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-bg3: #242424;
+  --o-green-8: 126, 225, 139;
   /**
-   * @name 四级容器背景色
-   * @type color
-   * @group background
-   * @description 用于区块、卡片、表头背景色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-bg4: #2e2e2e;
+  --o-green-9: 178, 240, 183;
   /**
-   * @name 标题色
-   * @type color
-   * @group text
-   * @description 用于强调、标题颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text1: #ffffff;
+  --o-green-10: 235, 255, 236;
   /**
-   * @name 标题反色
-   * @type color
-   * @group text
-   * @description 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text1-inverse: #000000;
+  --o-orange-1: 77, 27, 0;
   /**
-   * @name 正文色
-   * @type color
-   * @group text
-   * @description 用于次强调、次级标题、正文颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text2: #e5e5e5;
+  --o-orange-2: 121, 48, 4;
   /**
-   * @name 正文反色
-   * @type color
-   * @group text
-   * @description 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text2-inverse: #3f3f3f;
+  --o-orange-3: 166, 75, 10;
   /**
-   * @name 提示色
-   * @type color
-   * @group text
-   * @description 用于提示文本颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text3: #b2b2b2;
+  --o-orange-4: 210, 105, 19;
   /**
-   * @name 提示反色
-   * @type color
-   * @group text
-   * @description 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text3-inverse: #707070;
+  --o-orange-5: 255, 141, 31;
   /**
-   * @name 置灰色
-   * @type color
-   * @group text
-   * @description 用于禁用文本颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text4: #555555;
+  --o-orange-6: 255, 150, 38;
   /**
-   * @name 置灰反色
-   * @type color
-   * @group text
-   * @description 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text4-inverse: #2d2d2d;
+  --o-orange-7: 255, 179, 87;
   /**
-   * @name 边框色
-   * @type color
-   * @group border
-   * @description 较明显的边框
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-border1: #b2b2b2;
+  --o-orange-8: 255, 205, 135;
   /**
-   * @name 弱边框色
-   * @type color
-   * @group border
-   * @description 较弱的边框
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-border2: #2d2d2d;
+  --o-orange-9: 255, 227, 184;
   /**
-   * @name 分隔线色1
-   * @type color
-   * @group division
-   * @description 用于分隔线颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-division1: #b2b2b2;
+  --o-orange-10: 255, 247, 232;
   /**
-   * @name 遮罩色1
-   * @type color
-   * @group mask
-   * @description 用于弹窗遮罩色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-mask1: rgba(0, 0, 0, 0.5);
+  --o-red-1: 77, 0, 10;
   /**
-   * @name 遮罩色2
-   * @type color
-   * @group mask
-   * @description 用于loading遮罩色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-mask2: rgba(0, 0, 0, 0.1);
+  --o-red-2: 119, 6, 17;
   /**
-   * @name 阴影1
-   * @type shadow
-   * @group shadow
-   * @description 用于卡片、小弹窗、楼层阴影
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-shadow-1: 0 1px 7px rgba(0, 0, 0, 0.3);
+  --o-red-3: 161, 22, 31;
   /**
-   * @name 阴影2
-   * @type shadow
-   * @group shadow
-   * @description 用于卡片悬浮阴影
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-shadow-2: 0 6px 18px rgba(0, 0, 0, 0.42);
+  --o-red-4: 203, 46, 52;
   /**
-   * @name 阴影3
-   * @type shadow
-   * @group shadow
-   * @description 用于提示阴影
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-shadow-3: 0 10px 32px rgba(0, 0, 0, 0.54);
+  --o-red-5: 245, 78, 78;
   /**
-   * @name 间距1
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距1
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-1: 4px;
+  --o-red-6: 247, 105, 101;
   /**
-   * @name 间距2
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距2
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-2: 8px;
+  --o-red-7: 249, 141, 134;
   /**
-   * @name 间距3
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距3
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-3: 12px;
+  --o-red-8: 251, 176, 167;
   /**
-   * @name 间距4
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距4
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-4: 16px;
+  --o-red-9: 253, 209, 202;
   /**
-   * @name 间距5
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距5
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-5: 24px;
+  --o-red-10: 255, 240, 236;
   /**
-   * @name 间距6
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距6
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-6: 32px;
+  --o-gray-1: 0, 0, 0;
   /**
-   * @name 间距7
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距7
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-7: 40px;
+  --o-gray-2: 36, 36, 36;
   /**
-   * @name 间距8
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距8
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-8: 64px;
+  --o-gray-3: 57, 57, 57;
   /**
-   * @name 大尺寸
-   * @type size
-   * @group size
-   * @description 尺寸
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-size-l: 40px;
+  --o-gray-4: 94, 94, 94;
   /**
-   * @name 中尺寸
-   * @type size
-   * @group size
-   * @description 尺寸
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-size-m: 32px;
+  --o-gray-5: 119, 119, 122;
   /**
-   * @name 小尺寸
-   * @type size
-   * @group size
-   * @description 小尺寸
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-size-s: 24px;
+  --o-gray-6: 166, 166, 166;
   /**
-   * @name 大尺寸图标
-   * @type size
-   * @group icon_size
-   * @description 尺寸
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-icon_size-l: 48px;
+  --o-gray-7: 221, 221, 221;
   /**
-   * @name 中尺寸图标
-   * @type size
-   * @group icon_size
-   * @description 尺寸
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-icon_size-m: 32px;
+  --o-gray-8: 238, 238, 238;
   /**
-   * @name 小尺寸图标
-   * @type size
-   * @group icon_size
-   * @description 小尺寸
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-icon_size-s: 24px;
+  --o-gray-9: 243, 243, 243;
   /**
-   * @name 超小尺寸图标
-   * @type size
-   * @group icon_size
-   * @description 小尺寸
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-icon_size-xs: 16px;
+  --o-gray-10: 255, 255, 255;
   /**
-   * @name 一级数据展示
-   * @type font
-   * @group font_size
-   * @description 一级数据展示
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-font_size-display1: 64px;
+  --o-mixedgray-1: 23, 23, 26;
   /**
-   * @name 二级数据展示
-   * @type font
-   * @group font_size
-   * @description 二级数据展示
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-font_size-display2: 54px;
+  --o-mixedgray-2: 46, 46, 48;
   /**
-   * @name 三级数据展示
-   * @type font
-   * @group font_size
-   * @description 三级数据展示
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-font_size-display3: 36px;
+  --o-mixedgray-3: 72, 72, 73;
   /**
-   * @name 四级数据展示
-   * @type font
-   * @group font_size
-   * @description 四级数据展示
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-font_size-display4: 28px;
+  --o-mixedgray-4: 95, 95, 96;
   /**
-   * @name 一级标题
-   * @type font
-   * @group font_size
-   * @description 一级标题
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-font_size-h1: 24px;
+  --o-mixedgray-5: 120, 120, 122;
   /**
-   * @name 二级标题
-   * @type font
-   * @group font_size
-   * @description 二级标题
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-font_size-h2: 20px;
+  --o-mixedgray-6: 146, 146, 147;
   /**
-   * @name 三级标题
-   * @type font
-   * @group font_size
-   * @description 三级标题
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-font_size-h3: 18px;
+  --o-mixedgray-7: 171, 171, 172;
   /**
-   * @name 四级标题
-   * @type font
-   * @group font_size
-   * @description 四级标题
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-font_size-h4: 16px;
+  --o-mixedgray-8: 197, 197, 197;
   /**
-   * @name 正文
-   * @type font
-   * @group font_size
-   * @description 正文
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-font_size-text: 14px;
+  --o-mixedgray-9: 223, 223, 223;
   /**
-   * @name 提示文本1
-   * @type font
-   * @group font_size
-   * @description 提示文本1
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-font_size-tip1: 12px;
-  /**
-   * @name 提示文本2
-   * @type font
-   * @group font_size
-   * @description 提示文本2
-   */
-  --o-font_size-tip2: 10px;
-  /**
-   * @name 一级数据展示
-   * @type font
-   * @group line_height
-   * @description 一级数据展示
-   */
-  --o-line_height-display1: 84px;
-  /**
-   * @name 二级数据展示
-   * @type font
-   * @group line_height
-   * @description 二级数据展示
-   */
-  --o-line_height-display2: 76px;
-  /**
-   * @name 三级数据展示
-   * @type font
-   * @group line_height
-   * @description 三级数据展示
-   */
-  --o-line_height-display3: 48px;
-  /**
-   * @name 四级数据展示
-   * @type font
-   * @group line_height
-   * @description 四级数据展示
-   */
-  --o-line_height-display4: 36px;
-  /**
-   * @name 一级标题
-   * @type font
-   * @group line_height
-   * @description 一级标题
-   */
-  --o-line_height-h1: 32px;
-  /**
-   * @name 二级标题
-   * @type font
-   * @group line_height
-   * @description 二级标题
-   */
-  --o-line_height-h2: 28px;
-  /**
-   * @name 三级标题
-   * @type font
-   * @group line_height
-   * @description 三级标题
-   */
-  --o-line_height-h3: 26px;
-  /**
-   * @name 四级标题
-   * @type font
-   * @group line_height
-   * @description 四级标题
-   */
-  --o-line_height-h4: 24px;
-  /**
-   * @name 正文
-   * @type font
-   * @group line_height
-   * @description 正文
-   */
-  --o-line_height-text: 22px;
-  /**
-   * @name 提示文本1
-   * @type font
-   * @group line_height
-   * @description 提示文本1
-   */
-  --o-line_height-tip1: 18px;
-  /**
-   * @name 提示文本2
-   * @type font
-   * @group line_height
-   * @description 提示文本2
-   */
-  --o-line_height-tip2: 14px;
-  /**
-   * @name 大尺寸圆角
-   * @type size
-   * @group radius
-   * @description 大尺寸圆角
-   */
-  --o-radius-l: 8px;
-  /**
-   * @name 中尺寸圆角
-   * @type size
-   * @group radius
-   * @description 中尺寸圆角
-   */
-  --o-radius-m: 4px;
-  /**
-   * @name 小尺寸圆角
-   * @type size
-   * @group radius
-   * @description 小尺寸圆角
-   */
-  --o-radius-s: 2px;
-  /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于退出屏幕的动画
-   */
-  --o-duration-s: 200ms;
-  /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为standard-in时进入屏幕的动画
-   */
-  --o-duration-m1: 250ms;
-  /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为standard时开始、结束的动画
-   */
-  --o-duration-m2: 300ms;
-  /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为emphasized-in时进入屏幕的动画
-   */
-  --o-duration-m3: 400ms;
-  /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为emphasized时开始、结束的动画
-   */
-  --o-duration-l: 500ms;
-  /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为emphasized时，轮播切换动画
-   */
-  --o-duration-xl: 1000ms;
-  /**
-   * @name 线性动画曲线
-   * @type animation
-   * @group easing
-   * @description 线性曲线
-   */
-  --o-easing-linear: cubic-bezier(0, 0, 1, 1);
-  /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于组件
-   */
-  --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
-  /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于组件
-   */
-  --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
-  /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于组件
-   */
-  --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
-  /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于大卡片、场景切换
-   */
-  --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
-  /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于大卡片、场景切换
-   */
-  --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
-  /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于大卡片、场景切换
-   */
-  --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --o-mixedgray-10: 246, 246, 246;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css
index 6985f044..6cdf202d 100644
--- a/packages/opendesign/src/components/style/default-light.token.css
+++ b/packages/opendesign/src/components/style/default-light.token.css
@@ -2,689 +2,801 @@
 :root,
 :root[theme="light"] {
   /**
-   * @name 常规色
-   * @type color
-   * @group primary
-   * @description 用于按钮、文本、链接强调状态时常规颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-primary1: #002fa7;
+  --o-blue-1: 232, 243, 255;
   /**
-   * @name 悬浮色
-   * @type color
-   * @group primary
-   * @description 用于按钮、文本、链接强调状态时悬浮颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-primary2: #406fe7;
+  --o-blue-2: 190, 218, 255;
   /**
-   * @name 聚焦色
-   * @type color
-   * @group primary
-   * @description 用于按钮、文本、链接强调状态时聚焦颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-primary3: #00288d;
+  --o-blue-3: 148, 191, 255;
   /**
-   * @name 禁用色
-   * @type color
-   * @group primary
-   * @description 用于按钮、文本、链接强调状态时禁用颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-primary4: #b2c0e4;
+  --o-blue-4: 106, 161, 255;
   /**
-   * @name 常规色
-   * @type color
-   * @group major
-   * @description 用于按钮、文本、链接major状态时文本颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-major1: #feb32a;
+  --o-blue-5: 64, 128, 255;
   /**
-   * @name 常规色
-   * @type color
-   * @group normal
-   * @description 用于按钮、文本、链接常态时常规颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-normal1: var(--o-color-info1);
+  --o-blue-6: 22, 93, 255;
   /**
-   * @name 悬浮色
-   * @type color
-   * @group normal
-   * @description 用于按钮、文本、链接常态时悬浮颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-normal2: var(--o-color-primary2);
+  --o-blue-7: 14, 66, 210;
   /**
-   * @name 聚焦色
-   * @type color
-   * @group normal
-   * @description 用于按钮、文本、链接常态时聚焦颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-normal3: var(--o-color-primary3);
+  --o-blue-8: 7, 44, 166;
   /**
-   * @name 禁用色
-   * @type color
-   * @group normal
-   * @description 用于按钮、文本、链接常态时禁用颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-normal4: var(--o-color-info4);
+  --o-blue-9: 3, 26, 121;
   /**
-   * @name 常规色
-   * @type color
-   * @group success
-   * @description 用于按钮、文本、链接成功状态时常规颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-success1: #6dc335;
+  --o-blue-10: 0, 13, 77;
   /**
-   * @name 悬浮色
-   * @type color
-   * @group success
-   * @description 用于按钮、文本、链接成功状态时悬浮颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-success2: #93e95b;
+  --o-yellow-1: 254, 255, 232;
   /**
-   * @name 聚焦色
-   * @type color
-   * @group success
-   * @description 用于按钮、文本、链接成功状态时聚焦颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-success3: #62af30;
+  --o-yellow-2: 254, 254, 190;
   /**
-   * @name 禁用色
-   * @type color
-   * @group success
-   * @description 用于按钮、文本、链接成功状态时禁用颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-success4: #c5e7ae;
+  --o-yellow-3: 253, 250, 148;
   /**
-   * @name 常规色
-   * @type color
-   * @group warning
-   * @description 用于按钮、文本、链接告警状态时常规颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-warning1: #ff8e36;
+  --o-yellow-4: 252, 242, 107;
   /**
-   * @name 悬浮色
-   * @type color
-   * @group warning
-   * @description 用于按钮、文本、链接告警状态时悬浮颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-warning2: #ffb45c;
+  --o-yellow-5: 251, 232, 66;
   /**
-   * @name 聚焦色
-   * @type color
-   * @group warning
-   * @description 用于按钮、文本、链接告警状态时聚焦颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-warning3: #ff801c;
+  --o-yellow-6: 250, 220, 25;
   /**
-   * @name 禁用色
-   * @type color
-   * @group warning
-   * @description 用于按钮、文本、链接告警状态时禁用颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-warning4: #ffd2af;
+  --o-yellow-7: 207, 175, 15;
   /**
-   * @name 常规色
-   * @type color
-   * @group danger
-   * @description 用于按钮、文本、链接错误状态时常规颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-danger1: #f3524d;
+  --o-yellow-8: 163, 132, 8;
   /**
-   * @name 悬浮色
-   * @type color
-   * @group danger
-   * @description 用于按钮、文本、链接错误状态时悬浮颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-danger2: #ff7873;
+  --o-yellow-9: 120, 93, 3;
   /**
-   * @name 聚焦色
-   * @type color
-   * @group danger
-   * @description 用于按钮、文本、链接错误状态时聚焦颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-danger3: #f13b35;
+  --o-yellow-10: 77, 56, 0;
   /**
-   * @name 禁用色
-   * @type color
-   * @group danger
-   * @description 用于按钮、文本、链接错误状态时禁用颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-danger4: #fabab8;
+  --o-green-1: 232, 255, 234;
   /**
-   * @name 常规色
-   * @type color
-   * @group info
-   * @description 用于按钮、文本、链接信息状态时常规颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-info1: #e5e5e5;
+  --o-green-2: 175, 240, 181;
   /**
-   * @name 悬浮色
-   * @type color
-   * @group info
-   * @description 用于按钮、文本、链接信息状态时悬浮颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-info2: #e5e8f0;
+  --o-green-3: 123, 225, 136;
   /**
-   * @name 聚焦色
-   * @type color
-   * @group info
-   * @description 用于按钮、文本、链接信息状态时聚焦颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-info3: #cccccc;
+  --o-green-4: 76, 210, 99;
   /**
-   * @name 禁用色
-   * @type color
-   * @group info
-   * @description 用于按钮、文本、链接信息状态时禁用颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-info4: #f7f8fa;
+  --o-green-5: 35, 195, 67;
   /**
-   * @name 一级容器背景色
-   * @type color
-   * @group background
-   * @description 用于页面整体背景色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-bg1: #f5f6f8;
+  --o-green-6: 0, 180, 42;
   /**
-   * @name 二级容器背景色
-   * @type color
-   * @group background
-   * @description 用于区块、卡片、弹出框、tooltip背景色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-bg2: #ffffff;
+  --o-green-7: 0, 154, 41;
   /**
-   * @name 三级容器背景色
-   * @type color
-   * @group background
-   * @description 用于区块卡片背景色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-bg3: #f7f8fa;
+  --o-green-8: 0, 128, 38;
   /**
-   * @name 四级容器背景色
-   * @type color
-   * @group background
-   * @description 用于区块、卡片、表头背景色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-bg4: #e5e8f0;
+  --o-green-9: 0, 102, 34;
   /**
-   * @name 标题色
-   * @type color
-   * @group text
-   * @description 用于强调、标题颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text1: #000000;
+  --o-green-10: 0, 77, 28;
   /**
-   * @name 标题反色
-   * @type color
-   * @group text
-   * @description 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text1-inverse: #ffffff;
+  --o-orange-1: 255, 247, 232;
   /**
-   * @name 正文色
-   * @type color
-   * @group text
-   * @description 用于次强调、次级标题、正文颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text2: #3f3f3f;
+  --o-orange-2: 255, 228, 186;
   /**
-   * @name 正文反色
-   * @type color
-   * @group text
-   * @description 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text2-inverse: #e5e5e5;
+  --o-orange-3: 255, 207, 139;
   /**
-   * @name 提示色
-   * @type color
-   * @group text
-   * @description 用于提示文本颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text3: #707070;
+  --o-orange-4: 255, 182, 93;
   /**
-   * @name 提示反色
-   * @type color
-   * @group text
-   * @description 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text3-inverse: #b2b2b2;
+  --o-orange-5: 255, 154, 46;
   /**
-   * @name 置灰色
-   * @type color
-   * @group text
-   * @description 用于禁用文本颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text4: #cccccc;
+  --o-orange-6: 255, 125, 0;
   /**
-   * @name 置灰反色
-   * @type color
-   * @group text
-   * @description 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-text4-inverse: #e5e5e5;
+  --o-orange-7: 210, 95, 0;
   /**
-   * @name 边框色
-   * @type color
-   * @group border
-   * @description 较明显的边框
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-border1: #707070;
+  --o-orange-8: 166, 69, 0;
   /**
-   * @name 弱边框色
-   * @type color
-   * @group border
-   * @description 较弱的边框
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-border2: #e5e5e5;
+  --o-orange-9: 121, 46, 0;
   /**
-   * @name 分隔线色1
-   * @type color
-   * @group division
-   * @description 用于分隔线颜色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-division1: #707070;
+  --o-orange-10: 77, 27, 0;
   /**
-   * @name 遮罩色1
-   * @type color
-   * @group mask
-   * @description 用于弹窗遮罩色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-mask1: rgba(0, 0, 0, 0.5);
+  --o-red-1: 255, 236, 232;
   /**
-   * @name 遮罩色2
-   * @type color
-   * @group mask
-   * @description 用于loading遮罩色
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-red-2: 253, 205, 197;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-red-3: 251, 172, 163;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-red-4: 249, 137, 129;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-red-5: 247, 101, 96;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-red-6: 245, 63, 63;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-red-7: 203, 39, 45;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-red-8: 161, 21, 30;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-red-9: 119, 8, 19;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-red-10: 77, 0, 10;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-gray-1: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-gray-2: 238, 238, 238;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-gray-3: 221, 221, 221;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
+   */
+  --o-gray-4: 198, 198, 198;
+  /**
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-color-mask2: rgba(0, 0, 0, 0.1);
+  --o-gray-5: 139, 139, 139;
   /**
-   * @name 阴影1
-   * @type shadow
-   * @group shadow
-   * @description 用于卡片、小弹窗、楼层阴影
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-shadow-1: 0 1px 5px rgba(45, 47, 51, 0.1);
+  --o-gray-6: 119, 119, 119;
   /**
-   * @name 阴影2
-   * @type shadow
-   * @group shadow
-   * @description 用于卡片悬浮阴影
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-shadow-2: 0 6px 18px rgba(0, 47, 167, 0.14);
+  --o-gray-7: 94, 94, 94;
   /**
-   * @name 阴影3
-   * @type shadow
-   * @group shadow
-   * @description 用于提示阴影
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-shadow-3: 0 10px 32px rgba(45, 47, 51, 0.18);
+  --o-gray-8: 75, 75, 75;
   /**
-   * @name 间距1
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距1
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-1: 4px;
+  --o-gray-9: 44, 44, 44;
   /**
-   * @name 间距2
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距2
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-2: 8px;
+  --o-gray-10: 0, 0, 0;
   /**
-   * @name 间距3
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距3
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-3: 12px;
+  --o-mixedgray-1: 247, 248, 250;
   /**
-   * @name 间距4
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距4
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-4: 16px;
+  --o-mixedgray-2: 242, 243, 245;
   /**
-   * @name 间距5
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距5
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-5: 24px;
+  --o-mixedgray-3: 229, 230, 235;
   /**
-   * @name 间距6
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距6
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-6: 32px;
+  --o-mixedgray-4: 201, 205, 212;
   /**
-   * @name 间距7
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距7
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-7: 40px;
+  --o-mixedgray-5: 169, 174, 184;
   /**
-   * @name 间距8
-   * @type gap
-   * @group gap
-   * @description 用于组件之间的间距8
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-gap-8: 64px;
+  --o-mixedgray-6: 134, 144, 156;
   /**
-   * @name 大尺寸
-   * @type size
-   * @group size
-   * @description 尺寸
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-size-l: 40px;
+  --o-mixedgray-7: 107, 119, 133;
   /**
-   * @name 中尺寸
-   * @type size
-   * @group size
-   * @description 尺寸
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-size-m: 32px;
+  --o-mixedgray-8: 78, 89, 105;
   /**
-   * @name 小尺寸
-   * @type size
-   * @group size
-   * @description 小尺寸
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-size-s: 24px;
+  --o-mixedgray-9: 39, 46, 59;
   /**
-   * @name 大尺寸图标
-   * @type size
-   * @group icon_size
-   * @description 尺寸
+   * @name 
+   * @type palette
+   * @group palette
+   * @description 
    */
-  --o-icon_size-l: 48px;
+  --o-mixedgray-10: 29, 33, 41;
   /**
-   * @name 中尺寸图标
-   * @type size
-   * @group icon_size
-   * @description 尺寸
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/强调/标题
    */
-  --o-icon_size-m: 32px;
+  --o-color-info1: rgb(var(--o-gray-10));
   /**
-   * @name 小尺寸图标
-   * @type size
-   * @group icon_size
-   * @description 小尺寸
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/次强调/正文
    */
-  --o-icon_size-s: 24px;
+  --o-color-info2: rgb(var(--o-gray-8));
   /**
-   * @name 超小尺寸图标
-   * @type size
-   * @group icon_size
-   * @description 小尺寸
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息
    */
-  --o-icon_size-xs: 16px;
+  --o-color-info3: rgb(var(--o-gray-6));
   /**
-   * @name 一级数据展示
-   * @type font
-   * @group font_size
-   * @description 一级数据展示
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用
    */
-  --o-font_size-display1: 64px;
+  --o-color-info4: rgb(var(--o-gray-4));
   /**
-   * @name 二级数据展示
-   * @type font
-   * @group font_size
-   * @description 二级数据展示
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/次强调/正文反色
    */
-  --o-font_size-display2: 54px;
+  --o-color-info1-inverse: rgb(var(--o-gray-1));
   /**
-   * @name 三级数据展示
-   * @type font
-   * @group font_size
-   * @description 三级数据展示
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/辅助信息反色
    */
-  --o-font_size-display3: 36px;
+  --o-color-info2-inverse: rgb(var(--o-gray-3));
   /**
-   * @name 四级数据展示
-   * @type font
-   * @group font_size
-   * @description 四级数据展示
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息反色
    */
-  --o-font_size-display4: 28px;
+  --o-color-info3-inverse: rgb(var(--o-gray-5));
   /**
-   * @name 一级标题
-   * @type font
-   * @group font_size
-   * @description 一级标题
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用反色
    */
-  --o-font_size-h1: 24px;
+  --o-color-info4-inverse: rgb(var(--o-gray-7));
   /**
-   * @name 二级标题
-   * @type font
-   * @group font_size
-   * @description 二级标题
+   * @name 
+   * @type color
+   * @group neutral
+   * @description 白底
    */
-  --o-font_size-h2: 20px;
+  --o-color-neutral1: rgb(var(--o-gray-1));
   /**
-   * @name 三级标题
-   * @type font
-   * @group font_size
-   * @description 三级标题
+   * @name 
+   * @type color
+   * @group neutral
+   * @description 浅色背景(页面背景)
    */
-  --o-font_size-h3: 18px;
+  --o-color-neutral2: rgb(var(--o-mixedgray-1));
   /**
-   * @name 四级标题
-   * @type font
-   * @group font_size
-   * @description 四级标题
+   * @name 
+   * @type color
+   * @group neutral
+   * @description 浅色特殊场景/hover/禁用
    */
-  --o-font_size-h4: 16px;
+  --o-color-neutral3: rgb(var(--o-mixedgray-2));
   /**
-   * @name 正文
-   * @type font
-   * @group font_size
-   * @description 正文
+   * @name 
+   * @type color
+   * @group neutral
+   * @description 常规背景/浅色边框
    */
-  --o-font_size-text: 14px;
+  --o-color-neutral4: rgb(var(--o-mixedgray-3));
   /**
-   * @name 提示文本1
-   * @type font
-   * @group font_size
-   * @description 提示文本1
+   * @name 
+   * @type color
+   * @group neutral
+   * @description 特殊场景/hover/禁用
    */
-  --o-font_size-tip1: 12px;
+  --o-color-neutral5: rgb(var(--o-mixedgray-4));
   /**
-   * @name 提示文本2
-   * @type font
-   * @group font_size
-   * @description 提示文本2
+   * @name 
+   * @type color
+   * @group neutral
+   * @description 深色背景/常规边框
    */
-  --o-font_size-tip2: 10px;
+  --o-color-neutral6: rgb(var(--o-mixedgray-5));
   /**
-   * @name 一级数据展示
-   * @type font
-   * @group line_height
-   * @description 一级数据展示
+   * @name 
+   * @type color
+   * @group neutral
+   * @description 深色边框
    */
-  --o-line_height-display1: 84px;
+  --o-color-neutral7: rgb(var(--o-mixedgray-6));
   /**
-   * @name 二级数据展示
-   * @type font
-   * @group line_height
-   * @description 二级数据展示
+   * @name 
+   * @type color
+   * @group neutral
+   * @description 重/特殊场景
    */
-  --o-line_height-display2: 76px;
+  --o-color-neutral8: rgb(var(--o-mixedgray-7));
   /**
-   * @name 三级数据展示
-   * @type font
-   * @group line_height
-   * @description 三级数据展示
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规
    */
-  --o-line_height-display3: 48px;
+  --o-color-primary6: rgb(var(--o-blue-6));
   /**
-   * @name 四级数据展示
-   * @type font
-   * @group line_height
-   * @description 四级数据展示
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮
    */
-  --o-line_height-display4: 36px;
+  --o-color-primary5: rgb(var(--o-blue-5));
   /**
-   * @name 一级标题
-   * @type font
-   * @group line_height
-   * @description 一级标题
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活
    */
-  --o-line_height-h1: 32px;
+  --o-color-primary7: rgb(var(--o-blue-7));
   /**
-   * @name 二级标题
-   * @type font
-   * @group line_height
-   * @description 二级标题
+   * @name 
+   * @type color
+   * @group primary
+   * @description 特殊场景
    */
-  --o-line_height-h2: 28px;
+  --o-color-primary4: rgb(var(--o-blue-4));
   /**
-   * @name 三级标题
-   * @type font
-   * @group line_height
-   * @description 三级标题
+   * @name 
+   * @type color
+   * @group primary
+   * @description 一般禁用
    */
-  --o-line_height-h3: 26px;
+  --o-color-primary3: rgb(var(--o-blue-3));
   /**
-   * @name 四级标题
-   * @type font
-   * @group line_height
-   * @description 四级标题
+   * @name 
+   * @type color
+   * @group primary
+   * @description 文字禁用
    */
-  --o-line_height-h4: 24px;
+  --o-color-primary2: rgb(var(--o-blue-2));
   /**
-   * @name 正文
-   * @type font
-   * @group line_height
-   * @description 正文
+   * @name 
+   * @type color
+   * @group primary
+   * @description 浅色/白底悬浮
    */
-  --o-line_height-text: 22px;
+  --o-color-primary1: rgb(var(--o-blue-1));
   /**
-   * @name 提示文本1
-   * @type font
-   * @group line_height
-   * @description 提示文本1
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规
    */
-  --o-line_height-tip1: 18px;
+  --o-color-success6: rgb(var(--o-green-6));
   /**
-   * @name 提示文本2
-   * @type font
-   * @group line_height
-   * @description 提示文本2
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮
    */
-  --o-line_height-tip2: 14px;
+  --o-color-success5: rgb(var(--o-green-5));
   /**
-   * @name 大尺寸圆角
-   * @type size
-   * @group radius
-   * @description 大尺寸圆角
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活
    */
-  --o-radius-l: 8px;
+  --o-color-success7: rgb(var(--o-green-7));
   /**
-   * @name 中尺寸圆角
-   * @type size
-   * @group radius
-   * @description 中尺寸圆角
+   * @name 
+   * @type color
+   * @group success
+   * @description 特殊场景
    */
-  --o-radius-m: 4px;
+  --o-color-success4: rgb(var(--o-green-4));
   /**
-   * @name 小尺寸圆角
-   * @type size
-   * @group radius
-   * @description 小尺寸圆角
+   * @name 
+   * @type color
+   * @group success
+   * @description 一般禁用
    */
-  --o-radius-s: 2px;
+  --o-color-success3: rgb(var(--o-green-3));
   /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于退出屏幕的动画
+   * @name 
+   * @type color
+   * @group success
+   * @description 文字禁用
    */
-  --o-duration-s: 200ms;
+  --o-color-success2: rgb(var(--o-green-2));
   /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为standard-in时进入屏幕的动画
+   * @name 
+   * @type color
+   * @group success
+   * @description 浅色/白底悬浮
    */
-  --o-duration-m1: 250ms;
+  --o-color-success1: rgb(var(--o-green-1));
   /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为standard时开始、结束的动画
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规
    */
-  --o-duration-m2: 300ms;
+  --o-color-warning6: rgb(var(--o-orange-6));
   /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为emphasized-in时进入屏幕的动画
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮
    */
-  --o-duration-m3: 400ms;
+  --o-color-warning5: rgb(var(--o-orange-5));
   /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为emphasized时开始、结束的动画
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活
    */
-  --o-duration-l: 500ms;
+  --o-color-warning7: rgb(var(--o-orange-7));
   /**
-   * @name 持续时间
-   * @type animation
-   * @group duration
-   * @description 用于当曲线为emphasized时，轮播切换动画
+   * @name 
+   * @type color
+   * @group warning
+   * @description 特殊场景
    */
-  --o-duration-xl: 1000ms;
+  --o-color-warning4: rgb(var(--o-orange-4));
   /**
-   * @name 线性动画曲线
-   * @type animation
-   * @group easing
-   * @description 线性曲线
+   * @name 
+   * @type color
+   * @group warning
+   * @description 一般禁用
    */
-  --o-easing-linear: cubic-bezier(0, 0, 1, 1);
+  --o-color-warning3: rgb(var(--o-orange-3));
   /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于组件
+   * @name 
+   * @type color
+   * @group warning
+   * @description 文字禁用
    */
-  --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --o-color-warning2: rgb(var(--o-orange-2));
   /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于组件
+   * @name 
+   * @type color
+   * @group warning
+   * @description 浅色/白底悬浮
    */
-  --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
+  --o-color-warning1: rgb(var(--o-orange-1));
   /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于组件
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规
    */
-  --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
+  --o-color-danger6: rgb(var(--o-red-6));
   /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于大卡片、场景切换
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮
    */
-  --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --o-color-danger5: rgb(var(--o-red-5));
   /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于大卡片、场景切换
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活
+   */
+  --o-color-danger7: rgb(var(--o-red-7));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 特殊场景
    */
-  --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --o-color-danger4: rgb(var(--o-red-4));
   /**
-   * @name 动画曲线
-   * @type animation
-   * @group easing
-   * @description 用于大卡片、场景切换
+   * @name 
+   * @type color
+   * @group danger
+   * @description 一般禁用
+   */
+  --o-color-danger3: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 文字禁用
+   */
+  --o-color-danger2: rgb(var(--o-red-2));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 浅色/白底悬浮
    */
-  --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --o-color-danger1: rgb(var(--o-red-1));
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/opendesign-token.json b/packages/opendesign/src/tokens/opendesign-token.json
new file mode 100644
index 00000000..9ae8d86e
--- /dev/null
+++ b/packages/opendesign/src/tokens/opendesign-token.json
@@ -0,0 +1,893 @@
+{
+  "palette": {
+    "name": "基础色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "blue-1",
+        "value": {
+          "light": "232, 243, 255",
+          "dark": "0, 13, 77"
+        }
+      },
+      {
+        "key": "blue-2",
+        "value": {
+          "light": "190, 218, 255",
+          "dark": "4, 27, 121"
+        }
+      },
+      {
+        "key": "blue-3",
+        "value": {
+          "light": "148, 191, 255",
+          "dark": "14, 50, 166"
+        }
+      },
+      {
+        "key": "blue-4",
+        "value": {
+          "light": "106, 161, 255",
+          "dark": "29, 77, 210"
+        }
+      },
+      {
+        "key": "blue-5",
+        "value": {
+          "light": "64, 128, 255",
+          "dark": "48, 111, 255"
+        }
+      },
+      {
+        "key": "blue-6",
+        "value": {
+          "light": "22, 93, 255",
+          "dark": "60, 126, 255"
+        }
+      },
+      {
+        "key": "blue-7",
+        "value": {
+          "light": "14, 66, 210",
+          "dark": "104, 159, 255"
+        }
+      },
+      {
+        "key": "blue-8",
+        "value": {
+          "light": "7, 44, 166",
+          "dark": "147, 190, 255"
+        }
+      },
+      {
+        "key": "blue-9",
+        "value": {
+          "light": "3, 26, 121",
+          "dark": "190, 218, 255"
+        }
+      },
+      {
+        "key": "blue-10",
+        "value": {
+          "light": "0, 13, 77",
+          "dark": "234, 244, 255"
+        }
+      },
+      {
+        "key": "yellow-1",
+        "value": {
+          "light": "254, 255, 232",
+          "dark": "77, 56, 0"
+        }
+      },
+      {
+        "key": "yellow-2",
+        "value": {
+          "light": "254, 254, 190",
+          "dark": "120, 94, 7"
+        }
+      },
+      {
+        "key": "yellow-3",
+        "value": {
+          "light": "253, 250, 148",
+          "dark": "163, 134, 20"
+        }
+      },
+      {
+        "key": "yellow-4",
+        "value": {
+          "light": "252, 242, 107",
+          "dark": "207, 179, 37"
+        }
+      },
+      {
+        "key": "yellow-5",
+        "value": {
+          "light": "251, 232, 66",
+          "dark": "250, 225, 60"
+        }
+      },
+      {
+        "key": "yellow-6",
+        "value": {
+          "light": "250, 220, 25",
+          "dark": "251, 233, 75"
+        }
+      },
+      {
+        "key": "yellow-7",
+        "value": {
+          "light": "207, 175, 15",
+          "dark": "252, 243, 116"
+        }
+      },
+      {
+        "key": "yellow-8",
+        "value": {
+          "light": "163, 132, 8",
+          "dark": "253, 250, 157"
+        }
+      },
+      {
+        "key": "yellow-9",
+        "value": {
+          "light": "120, 93, 3",
+          "dark": "254, 254, 198"
+        }
+      },
+      {
+        "key": "yellow-10",
+        "value": {
+          "light": "77, 56, 0",
+          "dark": "254, 255, 240"
+        }
+      },
+      {
+        "key": "green-1",
+        "value": {
+          "light": "232, 255, 234",
+          "dark": "0, 77, 28"
+        }
+      },
+      {
+        "key": "green-2",
+        "value": {
+          "light": "175, 240, 181",
+          "dark": "4, 102, 37"
+        }
+      },
+      {
+        "key": "green-3",
+        "value": {
+          "light": "123, 225, 136",
+          "dark": "10, 128, 45"
+        }
+      },
+      {
+        "key": "green-4",
+        "value": {
+          "light": "76, 210, 99",
+          "dark": "18, 154, 55"
+        }
+      },
+      {
+        "key": "green-5",
+        "value": {
+          "light": "35, 195, 67",
+          "dark": "29, 180, 64"
+        }
+      },
+      {
+        "key": "green-6",
+        "value": {
+          "light": "0, 180, 42",
+          "dark": "39, 195, 70"
+        }
+      },
+      {
+        "key": "green-7",
+        "value": {
+          "light": "0, 154, 41",
+          "dark": "80, 210, 102"
+        }
+      },
+      {
+        "key": "green-8",
+        "value": {
+          "light": "0, 128, 38",
+          "dark": "126, 225, 139"
+        }
+      },
+      {
+        "key": "green-9",
+        "value": {
+          "light": "0, 102, 34",
+          "dark": "178, 240, 183"
+        }
+      },
+      {
+        "key": "green-10",
+        "value": {
+          "light": "0, 77, 28",
+          "dark": "235, 255, 236"
+        }
+      },
+      {
+        "key": "orange-1",
+        "value": {
+          "light": "255, 247, 232",
+          "dark": "77, 27, 0"
+        }
+      },
+      {
+        "key": "orange-2",
+        "value": {
+          "light": "255, 228, 186",
+          "dark": "121, 48, 4"
+        }
+      },
+      {
+        "key": "orange-3",
+        "value": {
+          "light": "255, 207, 139",
+          "dark": "166, 75, 10"
+        }
+      },
+      {
+        "key": "orange-4",
+        "value": {
+          "light": "255, 182, 93",
+          "dark": "210, 105, 19"
+        }
+      },
+      {
+        "key": "orange-5",
+        "value": {
+          "light": "255, 154, 46",
+          "dark": "255, 141, 31"
+        }
+      },
+      {
+        "key": "orange-6",
+        "value": {
+          "light": "255, 125, 0",
+          "dark": "255, 150, 38"
+        }
+      },
+      {
+        "key": "orange-7",
+        "value": {
+          "light": "210, 95, 0",
+          "dark": "255, 179, 87"
+        }
+      },
+      {
+        "key": "orange-8",
+        "value": {
+          "light": "166, 69, 0",
+          "dark": "255, 205, 135"
+        }
+      },
+      {
+        "key": "orange-9",
+        "value": {
+          "light": "121, 46, 0",
+          "dark": "255, 227, 184"
+        }
+      },
+      {
+        "key": "orange-10",
+        "value": {
+          "light": "77, 27, 0",
+          "dark": "255, 247, 232"
+        }
+      },
+      {
+        "key": "red-1",
+        "value": {
+          "light": "255, 236, 232",
+          "dark": "77, 0, 10"
+        }
+      },
+      {
+        "key": "red-2",
+        "value": {
+          "light": "253, 205, 197",
+          "dark": "119, 6, 17"
+        }
+      },
+      {
+        "key": "red-3",
+        "value": {
+          "light": "251, 172, 163",
+          "dark": "161, 22, 31"
+        }
+      },
+      {
+        "key": "red-4",
+        "value": {
+          "light": "249, 137, 129",
+          "dark": "203, 46, 52"
+        }
+      },
+      {
+        "key": "red-5",
+        "value": {
+          "light": "247, 101, 96",
+          "dark": "245, 78, 78"
+        }
+      },
+      {
+        "key": "red-6",
+        "value": {
+          "light": "245, 63, 63",
+          "dark": "247, 105, 101"
+        }
+      },
+      {
+        "key": "red-7",
+        "value": {
+          "light": "203, 39, 45",
+          "dark": "249, 141, 134"
+        }
+      },
+      {
+        "key": "red-8",
+        "value": {
+          "light": "161, 21, 30",
+          "dark": "251, 176, 167"
+        }
+      },
+      {
+        "key": "red-9",
+        "value": {
+          "light": "119, 8, 19",
+          "dark": "253, 209, 202"
+        }
+      },
+      {
+        "key": "red-10",
+        "value": {
+          "light": "77, 0, 10",
+          "dark": "255, 240, 236"
+        }
+      },
+      {
+        "key": "gray-1",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "0, 0, 0"
+        }
+      },
+      {
+        "key": "gray-2",
+        "value": {
+          "light": "238, 238, 238",
+          "dark": "36, 36, 36"
+        }
+      },
+      {
+        "key": "gray-3",
+        "value": {
+          "light": "221, 221, 221",
+          "dark": "57, 57, 57"
+        }
+      },
+      {
+        "key": "gray-4",
+        "value": {
+          "light": "198, 198, 198",
+          "dark": "94, 94, 94"
+        }
+      },
+      {
+        "key": "gray-5",
+        "value": {
+          "light": "139, 139, 139",
+          "dark": "119, 119, 122"
+        }
+      },
+      {
+        "key": "gray-6",
+        "value": {
+          "light": "119, 119, 119",
+          "dark": "166, 166, 166"
+        }
+      },
+      {
+        "key": "gray-7",
+        "value": {
+          "light": "94, 94, 94",
+          "dark": "221, 221, 221"
+        }
+      },
+      {
+        "key": "gray-8",
+        "value": {
+          "light": "75, 75, 75",
+          "dark": "238, 238, 238"
+        }
+      },
+      {
+        "key": "gray-9",
+        "value": {
+          "light": "44, 44, 44",
+          "dark": "243, 243, 243"
+        }
+      },
+      {
+        "key": "gray-10",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "255, 255, 255"
+        }
+      },
+      {
+        "key": "mixedgray-1",
+        "value": {
+          "light": "247, 248, 250",
+          "dark": "23, 23, 26"
+        }
+      },
+      {
+        "key": "mixedgray-2",
+        "value": {
+          "light": "242, 243, 245",
+          "dark": "46, 46, 48"
+        }
+      },
+      {
+        "key": "mixedgray-3",
+        "value": {
+          "light": "229, 230, 235",
+          "dark": "72, 72, 73"
+        }
+      },
+      {
+        "key": "mixedgray-4",
+        "value": {
+          "light": "201, 205, 212",
+          "dark": "95, 95, 96"
+        }
+      },
+      {
+        "key": "mixedgray-5",
+        "value": {
+          "light": "169, 174, 184",
+          "dark": "120, 120, 122"
+        }
+      },
+      {
+        "key": "mixedgray-6",
+        "value": {
+          "light": "134, 144, 156",
+          "dark": "146, 146, 147"
+        }
+      },
+      {
+        "key": "mixedgray-7",
+        "value": {
+          "light": "107, 119, 133",
+          "dark": "171, 171, 172"
+        }
+      },
+      {
+        "key": "mixedgray-8",
+        "value": {
+          "light": "78, 89, 105",
+          "dark": "197, 197, 197"
+        }
+      },
+      {
+        "key": "mixedgray-9",
+        "value": {
+          "light": "39, 46, 59",
+          "dark": "223, 223, 223"
+        }
+      },
+      {
+        "key": "mixedgray-10",
+        "value": {
+          "light": "29, 33, 41",
+          "dark": "246, 246, 246"
+        }
+      }
+    ]
+  },
+  "info": {
+    "name": "信息色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-info1",
+        "description": "一级/强调/标题",
+        "value": {
+          "light": "rgb(var(--o-gray-10))",
+          "'dark": "rgb(var(--o-gray-10))"
+        }
+      },
+      {
+        "key": "color-info2",
+        "description": "二级/次强调/正文",
+        "value": {
+          "light": "rgb(var(--o-gray-8))",
+          "'dark": "rgb(var(--o-gray-8))"
+        }
+      },
+      {
+        "key": "color-info3",
+        "description": "三级/辅助信息",
+        "value": {
+          "light": "rgb(var(--o-gray-6))",
+          "'dark": "rgb(var(--o-gray-6))"
+        }
+      },
+      {
+        "key": "color-info4",
+        "description": "置灰/禁用",
+        "value": {
+          "light": "rgb(var(--o-gray-4))",
+          "'dark": "rgb(var(--o-gray-4))"
+        }
+      },
+      {
+        "key": "color-info1-inverse",
+        "description": "一级/次强调/正文反色",
+        "value": {
+          "light": "rgb(var(--o-gray-1))",
+          "'dark": "rgb(var(--o-gray-1))"
+        }
+      },
+      {
+        "key": "color-info2-inverse",
+        "description": "二级/辅助信息反色",
+        "value": {
+          "light": "rgb(var(--o-gray-3))",
+          "'dark": "rgb(var(--o-gray-3))"
+        }
+      },
+      {
+        "key": "color-info3-inverse",
+        "description": "三级/辅助信息反色",
+        "value": {
+          "light": "rgb(var(--o-gray-5))",
+          "'dark": "rgb(var(--o-gray-5))"
+        }
+      },
+      {
+        "key": "color-info4-inverse",
+        "description": "置灰/禁用反色",
+        "value": {
+          "light": "rgb(var(--o-gray-7))",
+          "'dark": "rgb(var(--o-gray-7))"
+        }
+      }
+    ]
+  },
+  "neutral": {
+    "name": "中性色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-neutral1",
+        "description": "白底",
+        "value": {
+          "light": "rgb(var(--o-gray-1))",
+          "'dark": "rgb(var(--o-gray-1))"
+        }
+      },
+      {
+        "key": "color-neutral2",
+        "description": "浅色背景(页面背景)",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-1))",
+          "'dark": "rgb(var(--o-mixedgray-1))"
+        }
+      },
+      {
+        "key": "color-neutral3",
+        "description": "浅色特殊场景/hover/禁用",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-2))",
+          "'dark": "rgb(var(--o-mixedgray-2))"
+        }
+      },
+      {
+        "key": "color-neutral4",
+        "description": "常规背景/浅色边框",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-3))",
+          "'dark": "rgb(var(--o-mixedgray-3))"
+        }
+      },
+      {
+        "key": "color-neutral5",
+        "description": "特殊场景/hover/禁用",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-4))",
+          "'dark": "rgb(var(--o-mixedgray-4))"
+        }
+      },
+      {
+        "key": "color-neutral6",
+        "description": "深色背景/常规边框",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-5))",
+          "'dark": "rgb(var(--o-mixedgray-5))"
+        }
+      },
+      {
+        "key": "color-neutral7",
+        "description": "深色边框",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-6))",
+          "'dark": "rgb(var(--o-mixedgray-6))"
+        }
+      },
+      {
+        "key": "color-neutral8",
+        "description": "重/特殊场景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-7))",
+          "'dark": "rgb(var(--o-mixedgray-7))"
+        }
+      }
+    ]
+  },
+  "primary": {
+    "name": "主色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-primary6",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-blue-6))",
+          "'dark": "rgb(var(--o-blue-6))"
+        }
+      },
+      {
+        "key": "color-primary5",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-blue-5))",
+          "'dark": "rgb(var(--o-blue-5))"
+        }
+      },
+      {
+        "key": "color-primary7",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-blue-7))",
+          "'dark": "rgb(var(--o-blue-7))"
+        }
+      },
+      {
+        "key": "color-primary4",
+        "description": "特殊场景",
+        "value": {
+          "light": "rgb(var(--o-blue-4))",
+          "'dark": "rgb(var(--o-blue-4))"
+        }
+      },
+      {
+        "key": "color-primary3",
+        "description": "一般禁用",
+        "value": {
+          "light": "rgb(var(--o-blue-3))",
+          "'dark": "rgb(var(--o-blue-3))"
+        }
+      },
+      {
+        "key": "color-primary2",
+        "description": "文字禁用",
+        "value": {
+          "light": "rgb(var(--o-blue-2))",
+          "'dark": "rgb(var(--o-blue-2))"
+        }
+      },
+      {
+        "key": "color-primary1",
+        "description": "浅色/白底悬浮",
+        "value": {
+          "light": "rgb(var(--o-blue-1))",
+          "'dark": "rgb(var(--o-blue-1))"
+        }
+      }
+    ]
+  },
+  "success": {
+    "name": "成功色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-success6",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-green-6))",
+          "'dark": "rgb(var(--o-green-6))"
+        }
+      },
+      {
+        "key": "color-success5",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-green-5))",
+          "'dark": "rgb(var(--o-green-5))"
+        }
+      },
+      {
+        "key": "color-success7",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-green-7))",
+          "'dark": "rgb(var(--o-green-7))"
+        }
+      },
+      {
+        "key": "color-success4",
+        "description": "特殊场景",
+        "value": {
+          "light": "rgb(var(--o-green-4))",
+          "'dark": "rgb(var(--o-green-4))"
+        }
+      },
+      {
+        "key": "color-success3",
+        "description": "一般禁用",
+        "value": {
+          "light": "rgb(var(--o-green-3))",
+          "'dark": "rgb(var(--o-green-3))"
+        }
+      },
+      {
+        "key": "color-success2",
+        "description": "文字禁用",
+        "value": {
+          "light": "rgb(var(--o-green-2))",
+          "'dark": "rgb(var(--o-green-2))"
+        }
+      },
+      {
+        "key": "color-success1",
+        "description": "浅色/白底悬浮",
+        "value": {
+          "light": "rgb(var(--o-green-1))",
+          "'dark": "rgb(var(--o-green-1))"
+        }
+      }
+    ]
+  },
+  "warning": {
+    "name": "告警色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-warning6",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-orange-6))",
+          "'dark": "rgb(var(--o-orange-6))"
+        }
+      },
+      {
+        "key": "color-warning5",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-orange-5))",
+          "'dark": "rgb(var(--o-orange-5))"
+        }
+      },
+      {
+        "key": "color-warning7",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-orange-7))",
+          "'dark": "rgb(var(--o-orange-7))"
+        }
+      },
+      {
+        "key": "color-warning4",
+        "description": "特殊场景",
+        "value": {
+          "light": "rgb(var(--o-orange-4))",
+          "'dark": "rgb(var(--o-orange-4))"
+        }
+      },
+      {
+        "key": "color-warning3",
+        "description": "一般禁用",
+        "value": {
+          "light": "rgb(var(--o-orange-3))",
+          "'dark": "rgb(var(--o-orange-3))"
+        }
+      },
+      {
+        "key": "color-warning2",
+        "description": "文字禁用",
+        "value": {
+          "light": "rgb(var(--o-orange-2))",
+          "'dark": "rgb(var(--o-orange-2))"
+        }
+      },
+      {
+        "key": "color-warning1",
+        "description": "浅色/白底悬浮",
+        "value": {
+          "light": "rgb(var(--o-orange-1))",
+          "'dark": "rgb(var(--o-orange-1))"
+        }
+      }
+    ]
+  },
+  "danger": {
+    "name": "危险色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-danger6",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-red-6))",
+          "'dark": "rgb(var(--o-red-6))"
+        }
+      },
+      {
+        "key": "color-danger5",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-red-5))",
+          "'dark": "rgb(var(--o-red-5))"
+        }
+      },
+      {
+        "key": "color-danger7",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-red-7))",
+          "'dark": "rgb(var(--o-red-7))"
+        }
+      },
+      {
+        "key": "color-danger4",
+        "description": "特殊场景",
+        "value": {
+          "light": "rgb(var(--o-red-4))",
+          "'dark": "rgb(var(--o-red-4))"
+        }
+      },
+      {
+        "key": "color-danger3",
+        "description": "一般禁用",
+        "value": {
+          "light": "rgb(var(--o-red-3))",
+          "'dark": "rgb(var(--o-red-3))"
+        }
+      },
+      {
+        "key": "color-danger2",
+        "description": "文字禁用",
+        "value": {
+          "light": "rgb(var(--o-red-2))",
+          "'dark": "rgb(var(--o-red-2))"
+        }
+      },
+      {
+        "key": "color-danger1",
+        "description": "浅色/白底悬浮",
+        "value": {
+          "light": "rgb(var(--o-red-1))",
+          "'dark": "rgb(var(--o-red-1))"
+        }
+      }
+    ]
+  }
+}
diff --git a/packages/opendesign/src/tokens/token.config.ts b/packages/opendesign/src/tokens/token.config.ts
index 062a84cb..ad571baa 100644
--- a/packages/opendesign/src/tokens/token.config.ts
+++ b/packages/opendesign/src/tokens/token.config.ts
@@ -3,6 +3,6 @@ module.exports = {
   output: '../components/style/',
   themes: ['light', 'dark'],
   defaultTheme: 'light',
-  tokenFile: ['./tokens.json'],
+  tokenFile: ['./opendesign-token.json'],
   codeSnippetsFile: '../../../../.vscode/opendesign.token.code-snippets'
 };
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/tokens.json b/packages/opendesign/src/tokens/tokens.json
index 6d7dadb1..d2927c45 100644
--- a/packages/opendesign/src/tokens/tokens.json
+++ b/packages/opendesign/src/tokens/tokens.json
@@ -188,7 +188,7 @@
     ]
   },
   "danger": {
-    "name": "错误色",
+    "name": "危险色",
     "type": "color",
     "typeName": "颜色",
     "value": [
diff --git a/packages/scripts/src/gen-tokens/index.ts b/packages/scripts/src/gen-tokens/index.ts
index cf373dec..3e734e46 100644
--- a/packages/scripts/src/gen-tokens/index.ts
+++ b/packages/scripts/src/gen-tokens/index.ts
@@ -189,13 +189,13 @@ function generateCodeSnippets(tokens: Record<string, FlatTokenT>, outFile: strin
   const snippets: Record<string, any> = {};
   Object.keys(tokens).forEach(k => {
     const token = tokens[k];
-    const { value, tokenKey, name, description } = token;
+    const { value, tokenKey, description } = token;
     const themes = Object.keys(value).map(theme => `${theme}: ${value[theme]}`);
-    const desc = `${name}: ${description}[${themes.join(', ')}]`;
+    const desc = `${description || ''}[${themes.join(', ')}]`;
 
     snippets[tokenKey] = {
-      prefix: [tokenKey],
-      body: tokenKey,
+      prefix: [`var(${tokenKey})`],
+      body: `var(${tokenKey})`,
       description: desc,
       scope: 'css,scss,less'
     };
-- 
Gitee


From 216c98d7e2d20b430e30f4407eb68a895f662ccf Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 24 Feb 2023 11:10:19 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/opendesign.token.code-snippets        |  808 ++++++++++---
 .../src/components/_shared/global.ts          |    2 +-
 .../src/components/button/style/var.scss      |   18 +-
 .../src/components/style/dark.token.css       |  910 +++++++++++++--
 .../components/style/default-light.token.css  |  738 +++++++++---
 .../src/tokens/opendesign-token.json          | 1025 +++++++++++++++--
 packages/portal/src/components/TheAside.vue   |   16 +-
 packages/portal/src/components/TheHeader.vue  |    6 +-
 packages/portal/src/router.ts                 |    2 +-
 packages/portal/src/style.scss                |    6 +-
 10 files changed, 3032 insertions(+), 499 deletions(-)

diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets
index ca7871c7..1fd66484 100644
--- a/.vscode/opendesign.token.code-snippets
+++ b/.vscode/opendesign.token.code-snippets
@@ -564,7 +564,7 @@
       "var(--o-color-info1)"
     ],
     "body": "var(--o-color-info1)",
-    "description": "一级/强调/标题[light: rgb(var(--o-gray-10)), 'dark: rgb(var(--o-gray-10))]",
+    "description": "一级/强调/标题[light: rgb(var(--o-gray-10)), dark: rgb(var(--o-gray-10))]",
     "scope": "css,scss,less"
   },
   "--o-color-info2": {
@@ -572,7 +572,7 @@
       "var(--o-color-info2)"
     ],
     "body": "var(--o-color-info2)",
-    "description": "二级/次强调/正文[light: rgb(var(--o-gray-8)), 'dark: rgb(var(--o-gray-8))]",
+    "description": "二级/次强调/正文[light: rgb(var(--o-gray-8)), dark: rgb(var(--o-gray-8))]",
     "scope": "css,scss,less"
   },
   "--o-color-info3": {
@@ -580,7 +580,7 @@
       "var(--o-color-info3)"
     ],
     "body": "var(--o-color-info3)",
-    "description": "三级/辅助信息[light: rgb(var(--o-gray-6)), 'dark: rgb(var(--o-gray-6))]",
+    "description": "三级/辅助信息[light: rgb(var(--o-gray-6)), dark: rgb(var(--o-gray-6))]",
     "scope": "css,scss,less"
   },
   "--o-color-info4": {
@@ -588,7 +588,7 @@
       "var(--o-color-info4)"
     ],
     "body": "var(--o-color-info4)",
-    "description": "置灰/禁用[light: rgb(var(--o-gray-4)), 'dark: rgb(var(--o-gray-4))]",
+    "description": "置灰/禁用[light: rgb(var(--o-gray-4)), dark: rgb(var(--o-gray-4))]",
     "scope": "css,scss,less"
   },
   "--o-color-info1-inverse": {
@@ -596,7 +596,7 @@
       "var(--o-color-info1-inverse)"
     ],
     "body": "var(--o-color-info1-inverse)",
-    "description": "一级/次强调/正文反色[light: rgb(var(--o-gray-1)), 'dark: rgb(var(--o-gray-1))]",
+    "description": "一级/次强调/正文反色[light: rgb(var(--o-gray-1)), dark: rgb(var(--o-gray-1))]",
     "scope": "css,scss,less"
   },
   "--o-color-info2-inverse": {
@@ -604,7 +604,7 @@
       "var(--o-color-info2-inverse)"
     ],
     "body": "var(--o-color-info2-inverse)",
-    "description": "二级/辅助信息反色[light: rgb(var(--o-gray-3)), 'dark: rgb(var(--o-gray-3))]",
+    "description": "二级/辅助信息反色[light: rgb(var(--o-gray-3)), dark: rgb(var(--o-gray-3))]",
     "scope": "css,scss,less"
   },
   "--o-color-info3-inverse": {
@@ -612,7 +612,7 @@
       "var(--o-color-info3-inverse)"
     ],
     "body": "var(--o-color-info3-inverse)",
-    "description": "三级/辅助信息反色[light: rgb(var(--o-gray-5)), 'dark: rgb(var(--o-gray-5))]",
+    "description": "三级/辅助信息反色[light: rgb(var(--o-gray-5)), dark: rgb(var(--o-gray-5))]",
     "scope": "css,scss,less"
   },
   "--o-color-info4-inverse": {
@@ -620,119 +620,119 @@
       "var(--o-color-info4-inverse)"
     ],
     "body": "var(--o-color-info4-inverse)",
-    "description": "置灰/禁用反色[light: rgb(var(--o-gray-7)), 'dark: rgb(var(--o-gray-7))]",
+    "description": "置灰/禁用反色[light: rgb(var(--o-gray-7)), dark: rgb(var(--o-gray-7))]",
     "scope": "css,scss,less"
   },
-  "--o-color-neutral1": {
+  "--o-color-mask1": {
     "prefix": [
-      "var(--o-color-neutral1)"
+      "var(--o-color-mask1)"
     ],
-    "body": "var(--o-color-neutral1)",
-    "description": "白底[light: rgb(var(--o-gray-1)), 'dark: rgb(var(--o-gray-1))]",
+    "body": "var(--o-color-mask1)",
+    "description": "全局遮罩[light: rgba(var(--o-gray-10), .2), dark: rgba(var(--o-gray-10), .2)]",
     "scope": "css,scss,less"
   },
-  "--o-color-neutral2": {
+  "--o-color-mask2": {
     "prefix": [
-      "var(--o-color-neutral2)"
+      "var(--o-color-mask2)"
     ],
-    "body": "var(--o-color-neutral2)",
-    "description": "浅色背景(页面背景)[light: rgb(var(--o-mixedgray-1)), 'dark: rgb(var(--o-mixedgray-1))]",
+    "body": "var(--o-color-mask2)",
+    "description": "局部遮罩[light: rgba(var(--o-gray-10), .1), dark: rgba(var(--o-gray-10), .1)]",
     "scope": "css,scss,less"
   },
-  "--o-color-neutral3": {
+  "--o-color-fill1": {
     "prefix": [
-      "var(--o-color-neutral3)"
+      "var(--o-color-fill1)"
     ],
-    "body": "var(--o-color-neutral3)",
-    "description": "浅色特殊场景/hover/禁用[light: rgb(var(--o-mixedgray-2)), 'dark: rgb(var(--o-mixedgray-2))]",
+    "body": "var(--o-color-fill1)",
+    "description": "一级填充/页面背景[light: rgb(var(--o-mixedgray-1)), dark: rgb(var(--o-mixedgray-1))]",
     "scope": "css,scss,less"
   },
-  "--o-color-neutral4": {
+  "--o-color-fill2": {
     "prefix": [
-      "var(--o-color-neutral4)"
+      "var(--o-color-fill2)"
     ],
-    "body": "var(--o-color-neutral4)",
-    "description": "常规背景/浅色边框[light: rgb(var(--o-mixedgray-3)), 'dark: rgb(var(--o-mixedgray-3))]",
+    "body": "var(--o-color-fill2)",
+    "description": "二级填充/区块、卡片[light: rgb(var(--o-gray-1)), dark: rgb(var(--o-gray-1))]",
     "scope": "css,scss,less"
   },
-  "--o-color-neutral5": {
+  "--o-color-fill3": {
     "prefix": [
-      "var(--o-color-neutral5)"
+      "var(--o-color-fill3)"
     ],
-    "body": "var(--o-color-neutral5)",
-    "description": "特殊场景/hover/禁用[light: rgb(var(--o-mixedgray-4)), 'dark: rgb(var(--o-mixedgray-4))]",
+    "body": "var(--o-color-fill3)",
+    "description": "三级填充/卡片[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-3))]",
     "scope": "css,scss,less"
   },
-  "--o-color-neutral6": {
+  "--o-color-fill4": {
     "prefix": [
-      "var(--o-color-neutral6)"
+      "var(--o-color-fill4)"
     ],
-    "body": "var(--o-color-neutral6)",
-    "description": "深色背景/常规边框[light: rgb(var(--o-mixedgray-5)), 'dark: rgb(var(--o-mixedgray-5))]",
+    "body": "var(--o-color-fill4)",
+    "description": "四级填充/禁用[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-4))]",
     "scope": "css,scss,less"
   },
-  "--o-color-neutral7": {
+  "--o-color-control1": {
     "prefix": [
-      "var(--o-color-neutral7)"
+      "var(--o-color-control1)"
     ],
-    "body": "var(--o-color-neutral7)",
-    "description": "深色边框[light: rgb(var(--o-mixedgray-6)), 'dark: rgb(var(--o-mixedgray-6))]",
+    "body": "var(--o-color-control1)",
+    "description": "常规[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-3))]",
     "scope": "css,scss,less"
   },
-  "--o-color-neutral8": {
+  "--o-color-control2": {
     "prefix": [
-      "var(--o-color-neutral8)"
+      "var(--o-color-control2)"
     ],
-    "body": "var(--o-color-neutral8)",
-    "description": "重/特殊场景[light: rgb(var(--o-mixedgray-7)), 'dark: rgb(var(--o-mixedgray-7))]",
+    "body": "var(--o-color-control2)",
+    "description": "悬浮[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-4))]",
     "scope": "css,scss,less"
   },
-  "--o-color-primary6": {
+  "--o-color-control3": {
     "prefix": [
-      "var(--o-color-primary6)"
+      "var(--o-color-control3)"
     ],
-    "body": "var(--o-color-primary6)",
-    "description": "常规[light: rgb(var(--o-blue-6)), 'dark: rgb(var(--o-blue-6))]",
+    "body": "var(--o-color-control3)",
+    "description": "激活[light: rgb(var(--o-mixedgray-6)), dark: rgb(var(--o-mixedgray-6))]",
     "scope": "css,scss,less"
   },
-  "--o-color-primary5": {
+  "--o-color-control4": {
     "prefix": [
-      "var(--o-color-primary5)"
+      "var(--o-color-control4)"
     ],
-    "body": "var(--o-color-primary5)",
-    "description": "悬浮[light: rgb(var(--o-blue-5)), 'dark: rgb(var(--o-blue-5))]",
+    "body": "var(--o-color-control4)",
+    "description": "禁用[light: rgb(var(--o-mixedgray-5)), dark: rgb(var(--o-mixedgray-5))]",
     "scope": "css,scss,less"
   },
-  "--o-color-primary7": {
+  "--o-color-control1-light": {
     "prefix": [
-      "var(--o-color-primary7)"
+      "var(--o-color-control1-light)"
     ],
-    "body": "var(--o-color-primary7)",
-    "description": "激活[light: rgb(var(--o-blue-7)), 'dark: rgb(var(--o-blue-7))]",
+    "body": "var(--o-color-control1-light)",
+    "description": "浅/控件常规[light: rgb(var(--o-mixedgray-2)), dark: rgb(var(--o-mixedgray-2))]",
     "scope": "css,scss,less"
   },
-  "--o-color-primary4": {
+  "--o-color-control2-light": {
     "prefix": [
-      "var(--o-color-primary4)"
+      "var(--o-color-control2-light)"
     ],
-    "body": "var(--o-color-primary4)",
-    "description": "特殊场景[light: rgb(var(--o-blue-4)), 'dark: rgb(var(--o-blue-4))]",
+    "body": "var(--o-color-control2-light)",
+    "description": "浅/控件悬浮[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-3))]",
     "scope": "css,scss,less"
   },
-  "--o-color-primary3": {
+  "--o-color-control3-light": {
     "prefix": [
-      "var(--o-color-primary3)"
+      "var(--o-color-control3-light)"
     ],
-    "body": "var(--o-color-primary3)",
-    "description": "一般禁用[light: rgb(var(--o-blue-3)), 'dark: rgb(var(--o-blue-3))]",
+    "body": "var(--o-color-control3-light)",
+    "description": "浅/控件激活[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-4))]",
     "scope": "css,scss,less"
   },
-  "--o-color-primary2": {
+  "--o-color-control4-light": {
     "prefix": [
-      "var(--o-color-primary2)"
+      "var(--o-color-control4-light)"
     ],
-    "body": "var(--o-color-primary2)",
-    "description": "文字禁用[light: rgb(var(--o-blue-2)), 'dark: rgb(var(--o-blue-2))]",
+    "body": "var(--o-color-control4-light)",
+    "description": "浅/控件禁用[light: rgb(var(--o-mixedgray-1)), dark: rgb(var(--o-mixedgray-1))]",
     "scope": "css,scss,less"
   },
   "--o-color-primary1": {
@@ -740,55 +740,63 @@
       "var(--o-color-primary1)"
     ],
     "body": "var(--o-color-primary1)",
-    "description": "浅色/白底悬浮[light: rgb(var(--o-blue-1)), 'dark: rgb(var(--o-blue-1))]",
+    "description": "常规[light: rgb(var(--o-blue-6)), dark: rgb(var(--o-blue-6))]",
     "scope": "css,scss,less"
   },
-  "--o-color-success6": {
+  "--o-color-primary2": {
     "prefix": [
-      "var(--o-color-success6)"
+      "var(--o-color-primary2)"
     ],
-    "body": "var(--o-color-success6)",
-    "description": "常规[light: rgb(var(--o-green-6)), 'dark: rgb(var(--o-green-6))]",
+    "body": "var(--o-color-primary2)",
+    "description": "悬浮[light: rgb(var(--o-blue-5)), dark: rgb(var(--o-blue-5))]",
     "scope": "css,scss,less"
   },
-  "--o-color-success5": {
+  "--o-color-primary3": {
     "prefix": [
-      "var(--o-color-success5)"
+      "var(--o-color-primary3)"
     ],
-    "body": "var(--o-color-success5)",
-    "description": "悬浮[light: rgb(var(--o-green-5)), 'dark: rgb(var(--o-green-5))]",
+    "body": "var(--o-color-primary3)",
+    "description": "激活[light: rgb(var(--o-blue-7)), dark: rgb(var(--o-blue-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary4": {
+    "prefix": [
+      "var(--o-color-primary4)"
+    ],
+    "body": "var(--o-color-primary4)",
+    "description": "禁用[light: rgb(var(--o-blue-3)), dark: rgb(var(--o-blue-3))]",
     "scope": "css,scss,less"
   },
-  "--o-color-success7": {
+  "--o-color-primary1-light": {
     "prefix": [
-      "var(--o-color-success7)"
+      "var(--o-color-primary1-light)"
     ],
-    "body": "var(--o-color-success7)",
-    "description": "激活[light: rgb(var(--o-green-7)), 'dark: rgb(var(--o-green-7))]",
+    "body": "var(--o-color-primary1-light)",
+    "description": "浅/常规[light: rgb(var(--o-blue-2)), dark: rgb(var(--o-blue-2))]",
     "scope": "css,scss,less"
   },
-  "--o-color-success4": {
+  "--o-color-primary2-light": {
     "prefix": [
-      "var(--o-color-success4)"
+      "var(--o-color-primary2-light)"
     ],
-    "body": "var(--o-color-success4)",
-    "description": "特殊场景[light: rgb(var(--o-green-4)), 'dark: rgb(var(--o-green-4))]",
+    "body": "var(--o-color-primary2-light)",
+    "description": "浅/悬浮[light: rgb(var(--o-blue-3)), dark: rgb(var(--o-blue-3))]",
     "scope": "css,scss,less"
   },
-  "--o-color-success3": {
+  "--o-color-primary3-light": {
     "prefix": [
-      "var(--o-color-success3)"
+      "var(--o-color-primary3-light)"
     ],
-    "body": "var(--o-color-success3)",
-    "description": "一般禁用[light: rgb(var(--o-green-3)), 'dark: rgb(var(--o-green-3))]",
+    "body": "var(--o-color-primary3-light)",
+    "description": "浅/激活[light: rgb(var(--o-blue-4)), dark: rgb(var(--o-blue-4))]",
     "scope": "css,scss,less"
   },
-  "--o-color-success2": {
+  "--o-color-primary5-light": {
     "prefix": [
-      "var(--o-color-success2)"
+      "var(--o-color-primary5-light)"
     ],
-    "body": "var(--o-color-success2)",
-    "description": "文字禁用[light: rgb(var(--o-green-2)), 'dark: rgb(var(--o-green-2))]",
+    "body": "var(--o-color-primary5-light)",
+    "description": "浅/禁用[light: rgb(var(--o-blue-1)), dark: rgb(var(--o-blue-1))]",
     "scope": "css,scss,less"
   },
   "--o-color-success1": {
@@ -796,55 +804,63 @@
       "var(--o-color-success1)"
     ],
     "body": "var(--o-color-success1)",
-    "description": "浅色/白底悬浮[light: rgb(var(--o-green-1)), 'dark: rgb(var(--o-green-1))]",
+    "description": "常规[light: rgb(var(--o-green-6)), dark: rgb(var(--o-green-6))]",
     "scope": "css,scss,less"
   },
-  "--o-color-warning6": {
+  "--o-color-success2": {
     "prefix": [
-      "var(--o-color-warning6)"
+      "var(--o-color-success2)"
     ],
-    "body": "var(--o-color-warning6)",
-    "description": "常规[light: rgb(var(--o-orange-6)), 'dark: rgb(var(--o-orange-6))]",
+    "body": "var(--o-color-success2)",
+    "description": "悬浮[light: rgb(var(--o-green-5)), dark: rgb(var(--o-green-5))]",
     "scope": "css,scss,less"
   },
-  "--o-color-warning5": {
+  "--o-color-success3": {
     "prefix": [
-      "var(--o-color-warning5)"
+      "var(--o-color-success3)"
     ],
-    "body": "var(--o-color-warning5)",
-    "description": "悬浮[light: rgb(var(--o-orange-5)), 'dark: rgb(var(--o-orange-5))]",
+    "body": "var(--o-color-success3)",
+    "description": "激活[light: rgb(var(--o-green-7)), dark: rgb(var(--o-green-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success5": {
+    "prefix": [
+      "var(--o-color-success5)"
+    ],
+    "body": "var(--o-color-success5)",
+    "description": "禁用[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]",
     "scope": "css,scss,less"
   },
-  "--o-color-warning7": {
+  "--o-color-success1-light": {
     "prefix": [
-      "var(--o-color-warning7)"
+      "var(--o-color-success1-light)"
     ],
-    "body": "var(--o-color-warning7)",
-    "description": "激活[light: rgb(var(--o-orange-7)), 'dark: rgb(var(--o-orange-7))]",
+    "body": "var(--o-color-success1-light)",
+    "description": "浅/常规[light: rgb(var(--o-green-2)), dark: rgb(var(--o-green-2))]",
     "scope": "css,scss,less"
   },
-  "--o-color-warning4": {
+  "--o-color-success2-light": {
     "prefix": [
-      "var(--o-color-warning4)"
+      "var(--o-color-success2-light)"
     ],
-    "body": "var(--o-color-warning4)",
-    "description": "特殊场景[light: rgb(var(--o-orange-4)), 'dark: rgb(var(--o-orange-4))]",
+    "body": "var(--o-color-success2-light)",
+    "description": "浅/悬浮[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]",
     "scope": "css,scss,less"
   },
-  "--o-color-warning3": {
+  "--o-color-success3-light": {
     "prefix": [
-      "var(--o-color-warning3)"
+      "var(--o-color-success3-light)"
     ],
-    "body": "var(--o-color-warning3)",
-    "description": "一般禁用[light: rgb(var(--o-orange-3)), 'dark: rgb(var(--o-orange-3))]",
+    "body": "var(--o-color-success3-light)",
+    "description": "浅/激活[light: rgb(var(--o-green-4)), dark: rgb(var(--o-green-4))]",
     "scope": "css,scss,less"
   },
-  "--o-color-warning2": {
+  "--o-color-success5-light": {
     "prefix": [
-      "var(--o-color-warning2)"
+      "var(--o-color-success5-light)"
     ],
-    "body": "var(--o-color-warning2)",
-    "description": "文字禁用[light: rgb(var(--o-orange-2)), 'dark: rgb(var(--o-orange-2))]",
+    "body": "var(--o-color-success5-light)",
+    "description": "浅/禁用[light: rgb(var(--o-green-1)), dark: rgb(var(--o-green-1))]",
     "scope": "css,scss,less"
   },
   "--o-color-warning1": {
@@ -852,55 +868,63 @@
       "var(--o-color-warning1)"
     ],
     "body": "var(--o-color-warning1)",
-    "description": "浅色/白底悬浮[light: rgb(var(--o-orange-1)), 'dark: rgb(var(--o-orange-1))]",
+    "description": "常规[light: rgb(var(--o-orange-6)), dark: rgb(var(--o-orange-6))]",
     "scope": "css,scss,less"
   },
-  "--o-color-danger6": {
+  "--o-color-warning2": {
     "prefix": [
-      "var(--o-color-danger6)"
+      "var(--o-color-warning2)"
     ],
-    "body": "var(--o-color-danger6)",
-    "description": "常规[light: rgb(var(--o-red-6)), 'dark: rgb(var(--o-red-6))]",
+    "body": "var(--o-color-warning2)",
+    "description": "悬浮[light: rgb(var(--o-orange-5)), dark: rgb(var(--o-orange-5))]",
     "scope": "css,scss,less"
   },
-  "--o-color-danger5": {
+  "--o-color-warning3": {
     "prefix": [
-      "var(--o-color-danger5)"
+      "var(--o-color-warning3)"
     ],
-    "body": "var(--o-color-danger5)",
-    "description": "悬浮[light: rgb(var(--o-red-5)), 'dark: rgb(var(--o-red-5))]",
+    "body": "var(--o-color-warning3)",
+    "description": "激活[light: rgb(var(--o-orange-7)), dark: rgb(var(--o-orange-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning5": {
+    "prefix": [
+      "var(--o-color-warning5)"
+    ],
+    "body": "var(--o-color-warning5)",
+    "description": "禁用[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]",
     "scope": "css,scss,less"
   },
-  "--o-color-danger7": {
+  "--o-color-warning1-light": {
     "prefix": [
-      "var(--o-color-danger7)"
+      "var(--o-color-warning1-light)"
     ],
-    "body": "var(--o-color-danger7)",
-    "description": "激活[light: rgb(var(--o-red-7)), 'dark: rgb(var(--o-red-7))]",
+    "body": "var(--o-color-warning1-light)",
+    "description": "浅/常规[light: rgb(var(--o-orange-2)), dark: rgb(var(--o-orange-2))]",
     "scope": "css,scss,less"
   },
-  "--o-color-danger4": {
+  "--o-color-warning2-light": {
     "prefix": [
-      "var(--o-color-danger4)"
+      "var(--o-color-warning2-light)"
     ],
-    "body": "var(--o-color-danger4)",
-    "description": "特殊场景[light: rgb(var(--o-red-4)), 'dark: rgb(var(--o-red-4))]",
+    "body": "var(--o-color-warning2-light)",
+    "description": "浅/悬浮[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]",
     "scope": "css,scss,less"
   },
-  "--o-color-danger3": {
+  "--o-color-warning3-light": {
     "prefix": [
-      "var(--o-color-danger3)"
+      "var(--o-color-warning3-light)"
     ],
-    "body": "var(--o-color-danger3)",
-    "description": "一般禁用[light: rgb(var(--o-red-3)), 'dark: rgb(var(--o-red-3))]",
+    "body": "var(--o-color-warning3-light)",
+    "description": "浅/激活[light: rgb(var(--o-orange-4)), dark: rgb(var(--o-orange-4))]",
     "scope": "css,scss,less"
   },
-  "--o-color-danger2": {
+  "--o-color-warning5-light": {
     "prefix": [
-      "var(--o-color-danger2)"
+      "var(--o-color-warning5-light)"
     ],
-    "body": "var(--o-color-danger2)",
-    "description": "文字禁用[light: rgb(var(--o-red-2)), 'dark: rgb(var(--o-red-2))]",
+    "body": "var(--o-color-warning5-light)",
+    "description": "浅/禁用[light: rgb(var(--o-orange-1)), dark: rgb(var(--o-orange-1))]",
     "scope": "css,scss,less"
   },
   "--o-color-danger1": {
@@ -908,7 +932,511 @@
       "var(--o-color-danger1)"
     ],
     "body": "var(--o-color-danger1)",
-    "description": "浅色/白底悬浮[light: rgb(var(--o-red-1)), 'dark: rgb(var(--o-red-1))]",
+    "description": "常规[light: rgb(var(--o-red-6)), dark: rgb(var(--o-red-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger2": {
+    "prefix": [
+      "var(--o-color-danger2)"
+    ],
+    "body": "var(--o-color-danger2)",
+    "description": "悬浮[light: rgb(var(--o-red-5)), dark: rgb(var(--o-red-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger3": {
+    "prefix": [
+      "var(--o-color-danger3)"
+    ],
+    "body": "var(--o-color-danger3)",
+    "description": "激活[light: rgb(var(--o-red-7)), dark: rgb(var(--o-red-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger5": {
+    "prefix": [
+      "var(--o-color-danger5)"
+    ],
+    "body": "var(--o-color-danger5)",
+    "description": "禁用[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger1-light": {
+    "prefix": [
+      "var(--o-color-danger1-light)"
+    ],
+    "body": "var(--o-color-danger1-light)",
+    "description": "浅/常规[light: rgb(var(--o-red-2)), dark: rgb(var(--o-red-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger2-light": {
+    "prefix": [
+      "var(--o-color-danger2-light)"
+    ],
+    "body": "var(--o-color-danger2-light)",
+    "description": "浅/悬浮[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger3-light": {
+    "prefix": [
+      "var(--o-color-danger3-light)"
+    ],
+    "body": "var(--o-color-danger3-light)",
+    "description": "浅/激活[light: rgb(var(--o-red-4)), dark: rgb(var(--o-red-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger5-light": {
+    "prefix": [
+      "var(--o-color-danger5-light)"
+    ],
+    "body": "var(--o-color-danger5-light)",
+    "description": "浅/禁用[light: rgb(var(--o-red-1)), dark: rgb(var(--o-red-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-1": {
+    "prefix": [
+      "var(--o-shadow-1)"
+    ],
+    "body": "var(--o-shadow-1)",
+    "description": "用于卡片、小弹窗、楼层阴影[light: 0 1px 5px rgba(var(--o-gray-10), 0.1), dark: 0 1px 7px rgba(var(--o-gray-10), 0.3)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-2": {
+    "prefix": [
+      "var(--o-shadow-2)"
+    ],
+    "body": "var(--o-shadow-2)",
+    "description": "用于卡片悬浮阴影[light: 0 6px 18px rgba(var(--o-gray-10), 0.14), dark: 0 6px 18px rgba(var(--o-gray-10), 0.42)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-3": {
+    "prefix": [
+      "var(--o-shadow-3)"
+    ],
+    "body": "var(--o-shadow-3)",
+    "description": "用于提示阴影[light: 0 10px 32px rgba(var(--o-gray-10), 0.18), dark: 0 10px 32px rgba(var(--o-gray-10), 0.54)]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-1": {
+    "prefix": [
+      "var(--o-gap-1)"
+    ],
+    "body": "var(--o-gap-1)",
+    "description": "用于组件之间的间距1[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-2": {
+    "prefix": [
+      "var(--o-gap-2)"
+    ],
+    "body": "var(--o-gap-2)",
+    "description": "用于组件之间的间距2[light: 8px, dark: 8px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-3": {
+    "prefix": [
+      "var(--o-gap-3)"
+    ],
+    "body": "var(--o-gap-3)",
+    "description": "用于组件之间的间距3[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-4": {
+    "prefix": [
+      "var(--o-gap-4)"
+    ],
+    "body": "var(--o-gap-4)",
+    "description": "用于组件之间的间距4[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-5": {
+    "prefix": [
+      "var(--o-gap-5)"
+    ],
+    "body": "var(--o-gap-5)",
+    "description": "用于组件之间的间距5[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-6": {
+    "prefix": [
+      "var(--o-gap-6)"
+    ],
+    "body": "var(--o-gap-6)",
+    "description": "用于组件之间的间距6[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-7": {
+    "prefix": [
+      "var(--o-gap-7)"
+    ],
+    "body": "var(--o-gap-7)",
+    "description": "用于组件之间的间距7[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-8": {
+    "prefix": [
+      "var(--o-gap-8)"
+    ],
+    "body": "var(--o-gap-8)",
+    "description": "用于组件之间的间距8[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-size-l": {
+    "prefix": [
+      "var(--o-size-l)"
+    ],
+    "body": "var(--o-size-l)",
+    "description": "尺寸[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-size-m": {
+    "prefix": [
+      "var(--o-size-m)"
+    ],
+    "body": "var(--o-size-m)",
+    "description": "尺寸[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-size-s": {
+    "prefix": [
+      "var(--o-size-s)"
+    ],
+    "body": "var(--o-size-s)",
+    "description": "小尺寸[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-l": {
+    "prefix": [
+      "var(--o-icon_size-l)"
+    ],
+    "body": "var(--o-icon_size-l)",
+    "description": "尺寸[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-m": {
+    "prefix": [
+      "var(--o-icon_size-m)"
+    ],
+    "body": "var(--o-icon_size-m)",
+    "description": "尺寸[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-s": {
+    "prefix": [
+      "var(--o-icon_size-s)"
+    ],
+    "body": "var(--o-icon_size-s)",
+    "description": "小尺寸[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-xs": {
+    "prefix": [
+      "var(--o-icon_size-xs)"
+    ],
+    "body": "var(--o-icon_size-xs)",
+    "description": "小尺寸[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display1": {
+    "prefix": [
+      "var(--o-font_size-display1)"
+    ],
+    "body": "var(--o-font_size-display1)",
+    "description": "一级数据展示[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display2": {
+    "prefix": [
+      "var(--o-font_size-display2)"
+    ],
+    "body": "var(--o-font_size-display2)",
+    "description": "二级数据展示[light: 54px, dark: 54px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display3": {
+    "prefix": [
+      "var(--o-font_size-display3)"
+    ],
+    "body": "var(--o-font_size-display3)",
+    "description": "三级数据展示[light: 36px, dark: 36px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display4": {
+    "prefix": [
+      "var(--o-font_size-display4)"
+    ],
+    "body": "var(--o-font_size-display4)",
+    "description": "四级数据展示[light: 28px, dark: 28px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h1": {
+    "prefix": [
+      "var(--o-font_size-h1)"
+    ],
+    "body": "var(--o-font_size-h1)",
+    "description": "一级标题[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h2": {
+    "prefix": [
+      "var(--o-font_size-h2)"
+    ],
+    "body": "var(--o-font_size-h2)",
+    "description": "二级标题[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h3": {
+    "prefix": [
+      "var(--o-font_size-h3)"
+    ],
+    "body": "var(--o-font_size-h3)",
+    "description": "三级标题[light: 18px, dark: 18px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h4": {
+    "prefix": [
+      "var(--o-font_size-h4)"
+    ],
+    "body": "var(--o-font_size-h4)",
+    "description": "四级标题[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-text": {
+    "prefix": [
+      "var(--o-font_size-text)"
+    ],
+    "body": "var(--o-font_size-text)",
+    "description": "正文[light: 14px, dark: 14px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-tip1": {
+    "prefix": [
+      "var(--o-font_size-tip1)"
+    ],
+    "body": "var(--o-font_size-tip1)",
+    "description": "提示文本1[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-tip2": {
+    "prefix": [
+      "var(--o-font_size-tip2)"
+    ],
+    "body": "var(--o-font_size-tip2)",
+    "description": "提示文本2[light: 10px, dark: 10px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display1": {
+    "prefix": [
+      "var(--o-line_height-display1)"
+    ],
+    "body": "var(--o-line_height-display1)",
+    "description": "一级数据展示[light: 84px, dark: 84px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display2": {
+    "prefix": [
+      "var(--o-line_height-display2)"
+    ],
+    "body": "var(--o-line_height-display2)",
+    "description": "二级数据展示[light: 76px, dark: 76px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display3": {
+    "prefix": [
+      "var(--o-line_height-display3)"
+    ],
+    "body": "var(--o-line_height-display3)",
+    "description": "三级数据展示[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display4": {
+    "prefix": [
+      "var(--o-line_height-display4)"
+    ],
+    "body": "var(--o-line_height-display4)",
+    "description": "四级数据展示[light: 36px, dark: 36px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h1": {
+    "prefix": [
+      "var(--o-line_height-h1)"
+    ],
+    "body": "var(--o-line_height-h1)",
+    "description": "一级标题[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h2": {
+    "prefix": [
+      "var(--o-line_height-h2)"
+    ],
+    "body": "var(--o-line_height-h2)",
+    "description": "二级标题[light: 28px, dark: 28px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h3": {
+    "prefix": [
+      "var(--o-line_height-h3)"
+    ],
+    "body": "var(--o-line_height-h3)",
+    "description": "三级标题[light: 26px, dark: 26px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h4": {
+    "prefix": [
+      "var(--o-line_height-h4)"
+    ],
+    "body": "var(--o-line_height-h4)",
+    "description": "四级标题[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-text": {
+    "prefix": [
+      "var(--o-line_height-text)"
+    ],
+    "body": "var(--o-line_height-text)",
+    "description": "正文[light: 22px, dark: 22px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-tip1": {
+    "prefix": [
+      "var(--o-line_height-tip1)"
+    ],
+    "body": "var(--o-line_height-tip1)",
+    "description": "提示文本1[light: 18px, dark: 18px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-tip2": {
+    "prefix": [
+      "var(--o-line_height-tip2)"
+    ],
+    "body": "var(--o-line_height-tip2)",
+    "description": "提示文本2[light: 14px, dark: 14px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-l": {
+    "prefix": [
+      "var(--o-radius-l)"
+    ],
+    "body": "var(--o-radius-l)",
+    "description": "大尺寸圆角[light: 8px, dark: 8px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-m": {
+    "prefix": [
+      "var(--o-radius-m)"
+    ],
+    "body": "var(--o-radius-m)",
+    "description": "中尺寸圆角[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-s": {
+    "prefix": [
+      "var(--o-radius-s)"
+    ],
+    "body": "var(--o-radius-s)",
+    "description": "小尺寸圆角[light: 2px, dark: 2px]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-s": {
+    "prefix": [
+      "var(--o-duration-s)"
+    ],
+    "body": "var(--o-duration-s)",
+    "description": "用于退出屏幕的动画[light: 200ms, dark: 200ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m1": {
+    "prefix": [
+      "var(--o-duration-m1)"
+    ],
+    "body": "var(--o-duration-m1)",
+    "description": "用于当曲线为standard-in时进入屏幕的动画[light: 250ms, dark: 250ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m2": {
+    "prefix": [
+      "var(--o-duration-m2)"
+    ],
+    "body": "var(--o-duration-m2)",
+    "description": "用于当曲线为standard时开始、结束的动画[light: 300ms, dark: 300ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m3": {
+    "prefix": [
+      "var(--o-duration-m3)"
+    ],
+    "body": "var(--o-duration-m3)",
+    "description": "用于当曲线为emphasized-in时进入屏幕的动画[light: 400ms, dark: 400ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-l": {
+    "prefix": [
+      "var(--o-duration-l)"
+    ],
+    "body": "var(--o-duration-l)",
+    "description": "用于当曲线为emphasized时开始、结束的动画[light: 500ms, dark: 500ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-xl": {
+    "prefix": [
+      "var(--o-duration-xl)"
+    ],
+    "body": "var(--o-duration-xl)",
+    "description": "用于当曲线为emphasized时，轮播切换动画[light: 1000ms, dark: 1000ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-linear": {
+    "prefix": [
+      "var(--o-easing-linear)"
+    ],
+    "body": "var(--o-easing-linear)",
+    "description": "线性曲线[light: cubic-bezier(0, 0, 1, 1), dark: cubic-bezier(0, 0, 1, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard": {
+    "prefix": [
+      "var(--o-easing-standard)"
+    ],
+    "body": "var(--o-easing-standard)",
+    "description": "用于组件[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard-in": {
+    "prefix": [
+      "var(--o-easing-standard-in)"
+    ],
+    "body": "var(--o-easing-standard-in)",
+    "description": "用于组件[light: cubic-bezier(0, 0, 0, 1), dark: cubic-bezier(0, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard-out": {
+    "prefix": [
+      "var(--o-easing-standard-out)"
+    ],
+    "body": "var(--o-easing-standard-out)",
+    "description": "用于组件[light: cubic-bezier(0.3, 0, 1, 1), dark: cubic-bezier(0.3, 0, 1, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized": {
+    "prefix": [
+      "var(--o-easing-emphasized)"
+    ],
+    "body": "var(--o-easing-emphasized)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized-in": {
+    "prefix": [
+      "var(--o-easing-emphasized-in)"
+    ],
+    "body": "var(--o-easing-emphasized-in)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.3, 0, 0.8, 0.15), dark: cubic-bezier(0.3, 0, 0.8, 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized-out": {
+    "prefix": [
+      "var(--o-easing-emphasized-out)"
+    ],
+    "body": "var(--o-easing-emphasized-out)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.05, 0.7, 0.1, 1), dark: cubic-bezier(0.05, 0.7, 0.1, 1)]",
     "scope": "css,scss,less"
   }
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts
index 37880a80..2c167f96 100644
--- a/packages/opendesign/src/components/_shared/global.ts
+++ b/packages/opendesign/src/components/_shared/global.ts
@@ -20,7 +20,7 @@ export function initRound(m: string, s: string, l: string) {
 // 方向
 export type DirectionT = 'horizontal' | 'vertical';
 
-export type VariantT = 'fill' | 'outline' | 'text';
+export type VariantT = 'default' | 'outline' | 'text';
 
 export type ColorT = 'normal' | 'primary' | 'success' | 'warning' | 'danger';
 
diff --git a/packages/opendesign/src/components/button/style/var.scss b/packages/opendesign/src/components/button/style/var.scss
index 1fb355be..e351abe6 100644
--- a/packages/opendesign/src/components/button/style/var.scss
+++ b/packages/opendesign/src/components/button/style/var.scss
@@ -1,15 +1,15 @@
 .o-btn-normal {
-  --btn-color: var(--o-color-text2);
-  --btn-color-hover: var(--o-color-primary2);
-  --btn-color-active: var(--o-color-primary3);
+  --btn-color: var(--o-color-info2);
+  --btn-color-hover: var(--o-color-info2);
+  --btn-color-active: var(--o-color-info2);
 
-  --btn-bg: var(--o-color-normal1);
-  --btn-bg-hover: var(--o-color-primary2);
-  --btn-bg-active: var(--o-color-primary3);
+  --btn-bg: var(--o-color-neutral4);
+  --btn-bg-hover: var(--o-color-neutral2);
+  --btn-bg-active: var(--o-color-neutral6);
 
-  --btn-bd: var(--o-color-normal1);
-  --btn-bd-hover: var(--o-color-primary2);
-  --btn-bd-active: var(--o-color-primary3);
+  --btn-bd: var(--o-color-neutral4);
+  --btn-bd-hover: var(--o-color-neutral2);
+  --btn-bd-active: var(--o-color-neutral6);
 }
 .o-btn-primary {
   --btn-color: var(--o-color-primary1);
diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css
index 4e2ac0e8..504b02f5 100644
--- a/packages/opendesign/src/components/style/dark.token.css
+++ b/packages/opendesign/src/components/style/dark.token.css
@@ -3,491 +3,1261 @@
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-1: 0, 13, 77;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-2: 4, 27, 121;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-3: 14, 50, 166;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-4: 29, 77, 210;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-5: 48, 111, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-6: 60, 126, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-7: 104, 159, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-8: 147, 190, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-9: 190, 218, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-10: 234, 244, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-1: 77, 56, 0;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-2: 120, 94, 7;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-3: 163, 134, 20;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-4: 207, 179, 37;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-5: 250, 225, 60;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-6: 251, 233, 75;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-7: 252, 243, 116;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-8: 253, 250, 157;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-9: 254, 254, 198;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-10: 254, 255, 240;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-1: 0, 77, 28;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-2: 4, 102, 37;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-3: 10, 128, 45;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-4: 18, 154, 55;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-5: 29, 180, 64;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-6: 39, 195, 70;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-7: 80, 210, 102;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-8: 126, 225, 139;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-9: 178, 240, 183;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-10: 235, 255, 236;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-1: 77, 27, 0;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-2: 121, 48, 4;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-3: 166, 75, 10;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-4: 210, 105, 19;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-5: 255, 141, 31;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-6: 255, 150, 38;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-7: 255, 179, 87;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-8: 255, 205, 135;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-9: 255, 227, 184;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-10: 255, 247, 232;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-1: 77, 0, 10;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-2: 119, 6, 17;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-3: 161, 22, 31;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-4: 203, 46, 52;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-5: 245, 78, 78;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-6: 247, 105, 101;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-7: 249, 141, 134;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-8: 251, 176, 167;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-9: 253, 209, 202;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-10: 255, 240, 236;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-1: 0, 0, 0;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-2: 36, 36, 36;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-3: 57, 57, 57;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-4: 94, 94, 94;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-5: 119, 119, 122;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-6: 166, 166, 166;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-7: 221, 221, 221;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-8: 238, 238, 238;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-9: 243, 243, 243;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-10: 255, 255, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-1: 23, 23, 26;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-2: 46, 46, 48;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-3: 72, 72, 73;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-4: 95, 95, 96;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-5: 120, 120, 122;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-6: 146, 146, 147;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-7: 171, 171, 172;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-8: 197, 197, 197;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-9: 223, 223, 223;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-10: 246, 246, 246;
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/强调/标题
+   */
+  --o-color-info1: rgb(var(--o-gray-10));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/次强调/正文
+   */
+  --o-color-info2: rgb(var(--o-gray-8));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息
+   */
+  --o-color-info3: rgb(var(--o-gray-6));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用
+   */
+  --o-color-info4: rgb(var(--o-gray-4));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/次强调/正文反色
+   */
+  --o-color-info1-inverse: rgb(var(--o-gray-1));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/辅助信息反色
+   */
+  --o-color-info2-inverse: rgb(var(--o-gray-3));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息反色
+   */
+  --o-color-info3-inverse: rgb(var(--o-gray-5));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用反色
+   */
+  --o-color-info4-inverse: rgb(var(--o-gray-7));
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 全局遮罩
+   */
+  --o-color-mask1: rgba(var(--o-gray-10), .2);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 局部遮罩
+   */
+  --o-color-mask2: rgba(var(--o-gray-10), .1);
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 一级填充/页面背景
+   */
+  --o-color-fill1: rgb(var(--o-mixedgray-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 二级填充/区块、卡片
+   */
+  --o-color-fill2: rgb(var(--o-gray-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 三级填充/卡片
+   */
+  --o-color-fill3: rgb(var(--o-mixedgray-3));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 四级填充/禁用
+   */
+  --o-color-fill4: rgb(var(--o-mixedgray-4));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规
+   */
+  --o-color-control1: rgb(var(--o-mixedgray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮
+   */
+  --o-color-control2: rgb(var(--o-mixedgray-4));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活
+   */
+  --o-color-control3: rgb(var(--o-mixedgray-6));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用
+   */
+  --o-color-control4: rgb(var(--o-mixedgray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 浅/控件常规
+   */
+  --o-color-control1-light: rgb(var(--o-mixedgray-2));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 浅/控件悬浮
+   */
+  --o-color-control2-light: rgb(var(--o-mixedgray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 浅/控件激活
+   */
+  --o-color-control3-light: rgb(var(--o-mixedgray-4));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 浅/控件禁用
+   */
+  --o-color-control4-light: rgb(var(--o-mixedgray-1));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规
+   */
+  --o-color-primary1: rgb(var(--o-blue-6));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮
+   */
+  --o-color-primary2: rgb(var(--o-blue-5));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活
+   */
+  --o-color-primary3: rgb(var(--o-blue-7));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用
+   */
+  --o-color-primary4: rgb(var(--o-blue-3));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 浅/常规
+   */
+  --o-color-primary1-light: rgb(var(--o-blue-2));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 浅/悬浮
+   */
+  --o-color-primary2-light: rgb(var(--o-blue-3));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 浅/激活
+   */
+  --o-color-primary3-light: rgb(var(--o-blue-4));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 浅/禁用
+   */
+  --o-color-primary5-light: rgb(var(--o-blue-1));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规
+   */
+  --o-color-success1: rgb(var(--o-green-6));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮
+   */
+  --o-color-success2: rgb(var(--o-green-5));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活
+   */
+  --o-color-success3: rgb(var(--o-green-7));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用
+   */
+  --o-color-success5: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 浅/常规
+   */
+  --o-color-success1-light: rgb(var(--o-green-2));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 浅/悬浮
+   */
+  --o-color-success2-light: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 浅/激活
+   */
+  --o-color-success3-light: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 浅/禁用
+   */
+  --o-color-success5-light: rgb(var(--o-green-1));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规
+   */
+  --o-color-warning1: rgb(var(--o-orange-6));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮
+   */
+  --o-color-warning2: rgb(var(--o-orange-5));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活
+   */
+  --o-color-warning3: rgb(var(--o-orange-7));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用
+   */
+  --o-color-warning5: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 浅/常规
+   */
+  --o-color-warning1-light: rgb(var(--o-orange-2));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 浅/悬浮
+   */
+  --o-color-warning2-light: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 浅/激活
+   */
+  --o-color-warning3-light: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 浅/禁用
+   */
+  --o-color-warning5-light: rgb(var(--o-orange-1));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规
+   */
+  --o-color-danger1: rgb(var(--o-red-6));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮
+   */
+  --o-color-danger2: rgb(var(--o-red-5));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活
+   */
+  --o-color-danger3: rgb(var(--o-red-7));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用
+   */
+  --o-color-danger5: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 浅/常规
+   */
+  --o-color-danger1-light: rgb(var(--o-red-2));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 浅/悬浮
+   */
+  --o-color-danger2-light: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 浅/激活
+   */
+  --o-color-danger3-light: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 浅/禁用
+   */
+  --o-color-danger5-light: rgb(var(--o-red-1));
+  /**
+   * @name 阴影1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 1px 7px rgba(var(--o-gray-10), 0.3);
+  /**
+   * @name 阴影2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 6px 18px rgba(var(--o-gray-10), 0.42);
+  /**
+   * @name 阴影3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 10px 32px rgba(var(--o-gray-10), 0.54);
+  /**
+   * @name 间距1
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距1
+   */
+  --o-gap-1: 4px;
+  /**
+   * @name 间距2
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距2
+   */
+  --o-gap-2: 8px;
+  /**
+   * @name 间距3
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距3
+   */
+  --o-gap-3: 12px;
+  /**
+   * @name 间距4
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距4
+   */
+  --o-gap-4: 16px;
+  /**
+   * @name 间距5
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距5
+   */
+  --o-gap-5: 24px;
+  /**
+   * @name 间距6
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距6
+   */
+  --o-gap-6: 32px;
+  /**
+   * @name 间距7
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距7
+   */
+  --o-gap-7: 40px;
+  /**
+   * @name 间距8
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距8
+   */
+  --o-gap-8: 64px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group size
+   * @description 尺寸
+   */
+  --o-size-l: 40px;
+  /**
+   * @name 中尺寸
+   * @type size
+   * @group size
+   * @description 尺寸
+   */
+  --o-size-m: 32px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group size
+   * @description 小尺寸
+   */
+  --o-size-s: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 尺寸
+   */
+  --o-icon_size-l: 48px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 尺寸
+   */
+  --o-icon_size-m: 32px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸
+   */
+  --o-icon_size-s: 24px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸
+   */
+  --o-icon_size-xs: 16px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group font_size
+   * @description 一级数据展示
+   */
+  --o-font_size-display1: 64px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group font_size
+   * @description 二级数据展示
+   */
+  --o-font_size-display2: 54px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group font_size
+   * @description 三级数据展示
+   */
+  --o-font_size-display3: 36px;
+  /**
+   * @name 四级数据展示
+   * @type font
+   * @group font_size
+   * @description 四级数据展示
+   */
+  --o-font_size-display4: 28px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group font_size
+   * @description 一级标题
+   */
+  --o-font_size-h1: 24px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group font_size
+   * @description 二级标题
+   */
+  --o-font_size-h2: 20px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group font_size
+   * @description 三级标题
+   */
+  --o-font_size-h3: 18px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group font_size
+   * @description 四级标题
+   */
+  --o-font_size-h4: 16px;
+  /**
+   * @name 正文
+   * @type font
+   * @group font_size
+   * @description 正文
+   */
+  --o-font_size-text: 14px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group font_size
+   * @description 提示文本1
+   */
+  --o-font_size-tip1: 12px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group font_size
+   * @description 提示文本2
+   */
+  --o-font_size-tip2: 10px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group line_height
+   * @description 一级数据展示
+   */
+  --o-line_height-display1: 84px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group line_height
+   * @description 二级数据展示
+   */
+  --o-line_height-display2: 76px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group line_height
+   * @description 三级数据展示
+   */
+  --o-line_height-display3: 48px;
+  /**
+   * @name 四级数据展示
+   * @type font
+   * @group line_height
+   * @description 四级数据展示
+   */
+  --o-line_height-display4: 36px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group line_height
+   * @description 一级标题
+   */
+  --o-line_height-h1: 32px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group line_height
+   * @description 二级标题
+   */
+  --o-line_height-h2: 28px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group line_height
+   * @description 三级标题
+   */
+  --o-line_height-h3: 26px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group line_height
+   * @description 四级标题
+   */
+  --o-line_height-h4: 24px;
+  /**
+   * @name 正文
+   * @type font
+   * @group line_height
+   * @description 正文
+   */
+  --o-line_height-text: 22px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group line_height
+   * @description 提示文本1
+   */
+  --o-line_height-tip1: 18px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group line_height
+   * @description 提示文本2
+   */
+  --o-line_height-tip2: 14px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 8px;
+  /**
+   * @name 中尺寸圆角
+   * @type size
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 4px;
+  /**
+   * @name 小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 小尺寸圆角
+   */
+  --o-radius-s: 2px;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于退出屏幕的动画
+   */
+  --o-duration-s: 200ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为standard-in时进入屏幕的动画
+   */
+  --o-duration-m1: 250ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为standard时开始、结束的动画
+   */
+  --o-duration-m2: 300ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized-in时进入屏幕的动画
+   */
+  --o-duration-m3: 400ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized时开始、结束的动画
+   */
+  --o-duration-l: 500ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized时，轮播切换动画
+   */
+  --o-duration-xl: 1000ms;
+  /**
+   * @name 线性动画曲线
+   * @type animation
+   * @group easing
+   * @description 线性曲线
+   */
+  --o-easing-linear: cubic-bezier(0, 0, 1, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css
index 6cdf202d..14b37e79 100644
--- a/packages/opendesign/src/components/style/default-light.token.css
+++ b/packages/opendesign/src/components/style/default-light.token.css
@@ -4,490 +4,490 @@
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-1: 232, 243, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-2: 190, 218, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-3: 148, 191, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-4: 106, 161, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-5: 64, 128, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-6: 22, 93, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-7: 14, 66, 210;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-8: 7, 44, 166;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-9: 3, 26, 121;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group blue
    * @description 
    */
   --o-blue-10: 0, 13, 77;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-1: 254, 255, 232;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-2: 254, 254, 190;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-3: 253, 250, 148;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-4: 252, 242, 107;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-5: 251, 232, 66;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-6: 250, 220, 25;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-7: 207, 175, 15;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-8: 163, 132, 8;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-9: 120, 93, 3;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group yellow
    * @description 
    */
   --o-yellow-10: 77, 56, 0;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-1: 232, 255, 234;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-2: 175, 240, 181;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-3: 123, 225, 136;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-4: 76, 210, 99;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-5: 35, 195, 67;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-6: 0, 180, 42;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-7: 0, 154, 41;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-8: 0, 128, 38;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-9: 0, 102, 34;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group green
    * @description 
    */
   --o-green-10: 0, 77, 28;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-1: 255, 247, 232;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-2: 255, 228, 186;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-3: 255, 207, 139;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-4: 255, 182, 93;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-5: 255, 154, 46;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-6: 255, 125, 0;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-7: 210, 95, 0;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-8: 166, 69, 0;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-9: 121, 46, 0;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group orange
    * @description 
    */
   --o-orange-10: 77, 27, 0;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-1: 255, 236, 232;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-2: 253, 205, 197;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-3: 251, 172, 163;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-4: 249, 137, 129;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-5: 247, 101, 96;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-6: 245, 63, 63;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-7: 203, 39, 45;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-8: 161, 21, 30;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-9: 119, 8, 19;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group red
    * @description 
    */
   --o-red-10: 77, 0, 10;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-1: 255, 255, 255;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-2: 238, 238, 238;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-3: 221, 221, 221;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-4: 198, 198, 198;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-5: 139, 139, 139;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-6: 119, 119, 119;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-7: 94, 94, 94;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-8: 75, 75, 75;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-9: 44, 44, 44;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group gray
    * @description 
    */
   --o-gray-10: 0, 0, 0;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-1: 247, 248, 250;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-2: 242, 243, 245;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-3: 229, 230, 235;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-4: 201, 205, 212;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-5: 169, 174, 184;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-6: 134, 144, 156;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-7: 107, 119, 133;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-8: 78, 89, 105;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-9: 39, 46, 59;
   /**
    * @name 
    * @type palette
-   * @group palette
+   * @group mixedgray
    * @description 
    */
   --o-mixedgray-10: 29, 33, 41;
@@ -550,253 +550,715 @@
   /**
    * @name 
    * @type color
-   * @group neutral
-   * @description 白底
+   * @group mask
+   * @description 全局遮罩
    */
-  --o-color-neutral1: rgb(var(--o-gray-1));
+  --o-color-mask1: rgba(var(--o-gray-10), .2);
   /**
    * @name 
    * @type color
-   * @group neutral
-   * @description 浅色背景(页面背景)
+   * @group mask
+   * @description 局部遮罩
    */
-  --o-color-neutral2: rgb(var(--o-mixedgray-1));
+  --o-color-mask2: rgba(var(--o-gray-10), .1);
   /**
    * @name 
    * @type color
-   * @group neutral
-   * @description 浅色特殊场景/hover/禁用
+   * @group fill
+   * @description 一级填充/页面背景
    */
-  --o-color-neutral3: rgb(var(--o-mixedgray-2));
+  --o-color-fill1: rgb(var(--o-mixedgray-1));
   /**
    * @name 
    * @type color
-   * @group neutral
-   * @description 常规背景/浅色边框
+   * @group fill
+   * @description 二级填充/区块、卡片
    */
-  --o-color-neutral4: rgb(var(--o-mixedgray-3));
+  --o-color-fill2: rgb(var(--o-gray-1));
   /**
    * @name 
    * @type color
-   * @group neutral
-   * @description 特殊场景/hover/禁用
+   * @group fill
+   * @description 三级填充/卡片
    */
-  --o-color-neutral5: rgb(var(--o-mixedgray-4));
+  --o-color-fill3: rgb(var(--o-mixedgray-3));
   /**
    * @name 
    * @type color
-   * @group neutral
-   * @description 深色背景/常规边框
+   * @group fill
+   * @description 四级填充/禁用
    */
-  --o-color-neutral6: rgb(var(--o-mixedgray-5));
+  --o-color-fill4: rgb(var(--o-mixedgray-4));
   /**
    * @name 
    * @type color
-   * @group neutral
-   * @description 深色边框
+   * @group control
+   * @description 常规
+   */
+  --o-color-control1: rgb(var(--o-mixedgray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮
+   */
+  --o-color-control2: rgb(var(--o-mixedgray-4));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活
+   */
+  --o-color-control3: rgb(var(--o-mixedgray-6));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用
+   */
+  --o-color-control4: rgb(var(--o-mixedgray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 浅/控件常规
+   */
+  --o-color-control1-light: rgb(var(--o-mixedgray-2));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 浅/控件悬浮
+   */
+  --o-color-control2-light: rgb(var(--o-mixedgray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 浅/控件激活
    */
-  --o-color-neutral7: rgb(var(--o-mixedgray-6));
+  --o-color-control3-light: rgb(var(--o-mixedgray-4));
   /**
    * @name 
    * @type color
-   * @group neutral
-   * @description 重/特殊场景
+   * @group control
+   * @description 浅/控件禁用
    */
-  --o-color-neutral8: rgb(var(--o-mixedgray-7));
+  --o-color-control4-light: rgb(var(--o-mixedgray-1));
   /**
    * @name 
    * @type color
    * @group primary
    * @description 常规
    */
-  --o-color-primary6: rgb(var(--o-blue-6));
+  --o-color-primary1: rgb(var(--o-blue-6));
   /**
    * @name 
    * @type color
    * @group primary
    * @description 悬浮
    */
-  --o-color-primary5: rgb(var(--o-blue-5));
+  --o-color-primary2: rgb(var(--o-blue-5));
   /**
    * @name 
    * @type color
    * @group primary
    * @description 激活
    */
-  --o-color-primary7: rgb(var(--o-blue-7));
+  --o-color-primary3: rgb(var(--o-blue-7));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用
+   */
+  --o-color-primary4: rgb(var(--o-blue-3));
   /**
    * @name 
    * @type color
    * @group primary
-   * @description 特殊场景
+   * @description 浅/常规
    */
-  --o-color-primary4: rgb(var(--o-blue-4));
+  --o-color-primary1-light: rgb(var(--o-blue-2));
   /**
    * @name 
    * @type color
    * @group primary
-   * @description 一般禁用
+   * @description 浅/悬浮
    */
-  --o-color-primary3: rgb(var(--o-blue-3));
+  --o-color-primary2-light: rgb(var(--o-blue-3));
   /**
    * @name 
    * @type color
    * @group primary
-   * @description 文字禁用
+   * @description 浅/激活
    */
-  --o-color-primary2: rgb(var(--o-blue-2));
+  --o-color-primary3-light: rgb(var(--o-blue-4));
   /**
    * @name 
    * @type color
    * @group primary
-   * @description 浅色/白底悬浮
+   * @description 浅/禁用
    */
-  --o-color-primary1: rgb(var(--o-blue-1));
+  --o-color-primary5-light: rgb(var(--o-blue-1));
   /**
    * @name 
    * @type color
    * @group success
    * @description 常规
    */
-  --o-color-success6: rgb(var(--o-green-6));
+  --o-color-success1: rgb(var(--o-green-6));
   /**
    * @name 
    * @type color
    * @group success
    * @description 悬浮
    */
-  --o-color-success5: rgb(var(--o-green-5));
+  --o-color-success2: rgb(var(--o-green-5));
   /**
    * @name 
    * @type color
    * @group success
    * @description 激活
    */
-  --o-color-success7: rgb(var(--o-green-7));
+  --o-color-success3: rgb(var(--o-green-7));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用
+   */
+  --o-color-success5: rgb(var(--o-green-3));
   /**
    * @name 
    * @type color
    * @group success
-   * @description 特殊场景
+   * @description 浅/常规
    */
-  --o-color-success4: rgb(var(--o-green-4));
+  --o-color-success1-light: rgb(var(--o-green-2));
   /**
    * @name 
    * @type color
    * @group success
-   * @description 一般禁用
+   * @description 浅/悬浮
    */
-  --o-color-success3: rgb(var(--o-green-3));
+  --o-color-success2-light: rgb(var(--o-green-3));
   /**
    * @name 
    * @type color
    * @group success
-   * @description 文字禁用
+   * @description 浅/激活
    */
-  --o-color-success2: rgb(var(--o-green-2));
+  --o-color-success3-light: rgb(var(--o-green-4));
   /**
    * @name 
    * @type color
    * @group success
-   * @description 浅色/白底悬浮
+   * @description 浅/禁用
    */
-  --o-color-success1: rgb(var(--o-green-1));
+  --o-color-success5-light: rgb(var(--o-green-1));
   /**
    * @name 
    * @type color
    * @group warning
    * @description 常规
    */
-  --o-color-warning6: rgb(var(--o-orange-6));
+  --o-color-warning1: rgb(var(--o-orange-6));
   /**
    * @name 
    * @type color
    * @group warning
    * @description 悬浮
    */
-  --o-color-warning5: rgb(var(--o-orange-5));
+  --o-color-warning2: rgb(var(--o-orange-5));
   /**
    * @name 
    * @type color
    * @group warning
    * @description 激活
    */
-  --o-color-warning7: rgb(var(--o-orange-7));
+  --o-color-warning3: rgb(var(--o-orange-7));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用
+   */
+  --o-color-warning5: rgb(var(--o-orange-3));
   /**
    * @name 
    * @type color
    * @group warning
-   * @description 特殊场景
+   * @description 浅/常规
    */
-  --o-color-warning4: rgb(var(--o-orange-4));
+  --o-color-warning1-light: rgb(var(--o-orange-2));
   /**
    * @name 
    * @type color
    * @group warning
-   * @description 一般禁用
+   * @description 浅/悬浮
    */
-  --o-color-warning3: rgb(var(--o-orange-3));
+  --o-color-warning2-light: rgb(var(--o-orange-3));
   /**
    * @name 
    * @type color
    * @group warning
-   * @description 文字禁用
+   * @description 浅/激活
    */
-  --o-color-warning2: rgb(var(--o-orange-2));
+  --o-color-warning3-light: rgb(var(--o-orange-4));
   /**
    * @name 
    * @type color
    * @group warning
-   * @description 浅色/白底悬浮
+   * @description 浅/禁用
    */
-  --o-color-warning1: rgb(var(--o-orange-1));
+  --o-color-warning5-light: rgb(var(--o-orange-1));
   /**
    * @name 
    * @type color
    * @group danger
    * @description 常规
    */
-  --o-color-danger6: rgb(var(--o-red-6));
+  --o-color-danger1: rgb(var(--o-red-6));
   /**
    * @name 
    * @type color
    * @group danger
    * @description 悬浮
    */
-  --o-color-danger5: rgb(var(--o-red-5));
+  --o-color-danger2: rgb(var(--o-red-5));
   /**
    * @name 
    * @type color
    * @group danger
    * @description 激活
    */
-  --o-color-danger7: rgb(var(--o-red-7));
+  --o-color-danger3: rgb(var(--o-red-7));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用
+   */
+  --o-color-danger5: rgb(var(--o-red-3));
   /**
    * @name 
    * @type color
    * @group danger
-   * @description 特殊场景
+   * @description 浅/常规
    */
-  --o-color-danger4: rgb(var(--o-red-4));
+  --o-color-danger1-light: rgb(var(--o-red-2));
   /**
    * @name 
    * @type color
    * @group danger
-   * @description 一般禁用
+   * @description 浅/悬浮
    */
-  --o-color-danger3: rgb(var(--o-red-3));
+  --o-color-danger2-light: rgb(var(--o-red-3));
   /**
    * @name 
    * @type color
    * @group danger
-   * @description 文字禁用
+   * @description 浅/激活
    */
-  --o-color-danger2: rgb(var(--o-red-2));
+  --o-color-danger3-light: rgb(var(--o-red-4));
   /**
    * @name 
    * @type color
    * @group danger
-   * @description 浅色/白底悬浮
+   * @description 浅/禁用
+   */
+  --o-color-danger5-light: rgb(var(--o-red-1));
+  /**
+   * @name 阴影1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 1px 5px rgba(var(--o-gray-10), 0.1);
+  /**
+   * @name 阴影2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 6px 18px rgba(var(--o-gray-10), 0.14);
+  /**
+   * @name 阴影3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 10px 32px rgba(var(--o-gray-10), 0.18);
+  /**
+   * @name 间距1
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距1
+   */
+  --o-gap-1: 4px;
+  /**
+   * @name 间距2
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距2
+   */
+  --o-gap-2: 8px;
+  /**
+   * @name 间距3
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距3
+   */
+  --o-gap-3: 12px;
+  /**
+   * @name 间距4
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距4
+   */
+  --o-gap-4: 16px;
+  /**
+   * @name 间距5
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距5
+   */
+  --o-gap-5: 24px;
+  /**
+   * @name 间距6
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距6
+   */
+  --o-gap-6: 32px;
+  /**
+   * @name 间距7
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距7
+   */
+  --o-gap-7: 40px;
+  /**
+   * @name 间距8
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距8
+   */
+  --o-gap-8: 64px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group size
+   * @description 尺寸
+   */
+  --o-size-l: 40px;
+  /**
+   * @name 中尺寸
+   * @type size
+   * @group size
+   * @description 尺寸
+   */
+  --o-size-m: 32px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group size
+   * @description 小尺寸
+   */
+  --o-size-s: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 尺寸
+   */
+  --o-icon_size-l: 48px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 尺寸
+   */
+  --o-icon_size-m: 32px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸
+   */
+  --o-icon_size-s: 24px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸
+   */
+  --o-icon_size-xs: 16px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group font_size
+   * @description 一级数据展示
+   */
+  --o-font_size-display1: 64px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group font_size
+   * @description 二级数据展示
+   */
+  --o-font_size-display2: 54px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group font_size
+   * @description 三级数据展示
+   */
+  --o-font_size-display3: 36px;
+  /**
+   * @name 四级数据展示
+   * @type font
+   * @group font_size
+   * @description 四级数据展示
+   */
+  --o-font_size-display4: 28px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group font_size
+   * @description 一级标题
+   */
+  --o-font_size-h1: 24px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group font_size
+   * @description 二级标题
+   */
+  --o-font_size-h2: 20px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group font_size
+   * @description 三级标题
+   */
+  --o-font_size-h3: 18px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group font_size
+   * @description 四级标题
+   */
+  --o-font_size-h4: 16px;
+  /**
+   * @name 正文
+   * @type font
+   * @group font_size
+   * @description 正文
+   */
+  --o-font_size-text: 14px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group font_size
+   * @description 提示文本1
+   */
+  --o-font_size-tip1: 12px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group font_size
+   * @description 提示文本2
+   */
+  --o-font_size-tip2: 10px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group line_height
+   * @description 一级数据展示
+   */
+  --o-line_height-display1: 84px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group line_height
+   * @description 二级数据展示
+   */
+  --o-line_height-display2: 76px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group line_height
+   * @description 三级数据展示
+   */
+  --o-line_height-display3: 48px;
+  /**
+   * @name 四级数据展示
+   * @type font
+   * @group line_height
+   * @description 四级数据展示
+   */
+  --o-line_height-display4: 36px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group line_height
+   * @description 一级标题
+   */
+  --o-line_height-h1: 32px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group line_height
+   * @description 二级标题
+   */
+  --o-line_height-h2: 28px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group line_height
+   * @description 三级标题
+   */
+  --o-line_height-h3: 26px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group line_height
+   * @description 四级标题
+   */
+  --o-line_height-h4: 24px;
+  /**
+   * @name 正文
+   * @type font
+   * @group line_height
+   * @description 正文
+   */
+  --o-line_height-text: 22px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group line_height
+   * @description 提示文本1
+   */
+  --o-line_height-tip1: 18px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group line_height
+   * @description 提示文本2
+   */
+  --o-line_height-tip2: 14px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 8px;
+  /**
+   * @name 中尺寸圆角
+   * @type size
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 4px;
+  /**
+   * @name 小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 小尺寸圆角
+   */
+  --o-radius-s: 2px;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于退出屏幕的动画
+   */
+  --o-duration-s: 200ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为standard-in时进入屏幕的动画
+   */
+  --o-duration-m1: 250ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为standard时开始、结束的动画
+   */
+  --o-duration-m2: 300ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized-in时进入屏幕的动画
+   */
+  --o-duration-m3: 400ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized时开始、结束的动画
+   */
+  --o-duration-l: 500ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized时，轮播切换动画
+   */
+  --o-duration-xl: 1000ms;
+  /**
+   * @name 线性动画曲线
+   * @type animation
+   * @group easing
+   * @description 线性曲线
+   */
+  --o-easing-linear: cubic-bezier(0, 0, 1, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
    */
-  --o-color-danger1: rgb(var(--o-red-1));
+  --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/opendesign-token.json b/packages/opendesign/src/tokens/opendesign-token.json
index 9ae8d86e..41e529e1 100644
--- a/packages/opendesign/src/tokens/opendesign-token.json
+++ b/packages/opendesign/src/tokens/opendesign-token.json
@@ -1,11 +1,12 @@
 {
-  "palette": {
-    "name": "基础色",
+  "blue": {
+    "name": "蓝色",
     "type": "palette",
     "typeName": "色盘",
     "value": [
       {
         "key": "blue-1",
+        "colorType": "Blue",
         "value": {
           "light": "232, 243, 255",
           "dark": "0, 13, 77"
@@ -13,6 +14,7 @@
       },
       {
         "key": "blue-2",
+        "colorType": "Blue",
         "value": {
           "light": "190, 218, 255",
           "dark": "4, 27, 121"
@@ -20,6 +22,7 @@
       },
       {
         "key": "blue-3",
+        "colorType": "Blue",
         "value": {
           "light": "148, 191, 255",
           "dark": "14, 50, 166"
@@ -27,6 +30,7 @@
       },
       {
         "key": "blue-4",
+        "colorType": "Blue",
         "value": {
           "light": "106, 161, 255",
           "dark": "29, 77, 210"
@@ -34,6 +38,7 @@
       },
       {
         "key": "blue-5",
+        "colorType": "Blue",
         "value": {
           "light": "64, 128, 255",
           "dark": "48, 111, 255"
@@ -41,6 +46,7 @@
       },
       {
         "key": "blue-6",
+        "colorType": "Blue",
         "value": {
           "light": "22, 93, 255",
           "dark": "60, 126, 255"
@@ -48,6 +54,7 @@
       },
       {
         "key": "blue-7",
+        "colorType": "Blue",
         "value": {
           "light": "14, 66, 210",
           "dark": "104, 159, 255"
@@ -55,6 +62,7 @@
       },
       {
         "key": "blue-8",
+        "colorType": "Blue",
         "value": {
           "light": "7, 44, 166",
           "dark": "147, 190, 255"
@@ -62,6 +70,7 @@
       },
       {
         "key": "blue-9",
+        "colorType": "Blue",
         "value": {
           "light": "3, 26, 121",
           "dark": "190, 218, 255"
@@ -69,13 +78,22 @@
       },
       {
         "key": "blue-10",
+        "colorType": "Blue",
         "value": {
           "light": "0, 13, 77",
           "dark": "234, 244, 255"
         }
-      },
+      }
+    ]
+  },
+  "yellow": {
+    "name": "黄色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
       {
         "key": "yellow-1",
+        "colorType": "Yellow",
         "value": {
           "light": "254, 255, 232",
           "dark": "77, 56, 0"
@@ -83,6 +101,7 @@
       },
       {
         "key": "yellow-2",
+        "colorType": "Yellow",
         "value": {
           "light": "254, 254, 190",
           "dark": "120, 94, 7"
@@ -90,6 +109,7 @@
       },
       {
         "key": "yellow-3",
+        "colorType": "Yellow",
         "value": {
           "light": "253, 250, 148",
           "dark": "163, 134, 20"
@@ -97,6 +117,7 @@
       },
       {
         "key": "yellow-4",
+        "colorType": "Yellow",
         "value": {
           "light": "252, 242, 107",
           "dark": "207, 179, 37"
@@ -104,6 +125,7 @@
       },
       {
         "key": "yellow-5",
+        "colorType": "Yellow",
         "value": {
           "light": "251, 232, 66",
           "dark": "250, 225, 60"
@@ -111,6 +133,7 @@
       },
       {
         "key": "yellow-6",
+        "colorType": "Yellow",
         "value": {
           "light": "250, 220, 25",
           "dark": "251, 233, 75"
@@ -118,6 +141,7 @@
       },
       {
         "key": "yellow-7",
+        "colorType": "Yellow",
         "value": {
           "light": "207, 175, 15",
           "dark": "252, 243, 116"
@@ -125,6 +149,7 @@
       },
       {
         "key": "yellow-8",
+        "colorType": "Yellow",
         "value": {
           "light": "163, 132, 8",
           "dark": "253, 250, 157"
@@ -132,6 +157,7 @@
       },
       {
         "key": "yellow-9",
+        "colorType": "Yellow",
         "value": {
           "light": "120, 93, 3",
           "dark": "254, 254, 198"
@@ -139,13 +165,22 @@
       },
       {
         "key": "yellow-10",
+        "colorType": "Yellow",
         "value": {
           "light": "77, 56, 0",
           "dark": "254, 255, 240"
         }
-      },
+      }
+    ]
+  },
+  "green": {
+    "name": "绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
       {
         "key": "green-1",
+        "colorType": "Green",
         "value": {
           "light": "232, 255, 234",
           "dark": "0, 77, 28"
@@ -153,6 +188,7 @@
       },
       {
         "key": "green-2",
+        "colorType": "Green",
         "value": {
           "light": "175, 240, 181",
           "dark": "4, 102, 37"
@@ -160,6 +196,7 @@
       },
       {
         "key": "green-3",
+        "colorType": "Green",
         "value": {
           "light": "123, 225, 136",
           "dark": "10, 128, 45"
@@ -167,6 +204,7 @@
       },
       {
         "key": "green-4",
+        "colorType": "Green",
         "value": {
           "light": "76, 210, 99",
           "dark": "18, 154, 55"
@@ -174,6 +212,7 @@
       },
       {
         "key": "green-5",
+        "colorType": "Green",
         "value": {
           "light": "35, 195, 67",
           "dark": "29, 180, 64"
@@ -181,6 +220,7 @@
       },
       {
         "key": "green-6",
+        "colorType": "Green",
         "value": {
           "light": "0, 180, 42",
           "dark": "39, 195, 70"
@@ -188,6 +228,7 @@
       },
       {
         "key": "green-7",
+        "colorType": "Green",
         "value": {
           "light": "0, 154, 41",
           "dark": "80, 210, 102"
@@ -195,6 +236,7 @@
       },
       {
         "key": "green-8",
+        "colorType": "Green",
         "value": {
           "light": "0, 128, 38",
           "dark": "126, 225, 139"
@@ -202,6 +244,7 @@
       },
       {
         "key": "green-9",
+        "colorType": "Green",
         "value": {
           "light": "0, 102, 34",
           "dark": "178, 240, 183"
@@ -209,13 +252,22 @@
       },
       {
         "key": "green-10",
+        "colorType": "Green",
         "value": {
           "light": "0, 77, 28",
           "dark": "235, 255, 236"
         }
-      },
+      }
+    ]
+  },
+  "orange": {
+    "name": "橘红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
       {
         "key": "orange-1",
+        "colorType": "Orange",
         "value": {
           "light": "255, 247, 232",
           "dark": "77, 27, 0"
@@ -223,6 +275,7 @@
       },
       {
         "key": "orange-2",
+        "colorType": "Orange",
         "value": {
           "light": "255, 228, 186",
           "dark": "121, 48, 4"
@@ -230,6 +283,7 @@
       },
       {
         "key": "orange-3",
+        "colorType": "Orange",
         "value": {
           "light": "255, 207, 139",
           "dark": "166, 75, 10"
@@ -237,6 +291,7 @@
       },
       {
         "key": "orange-4",
+        "colorType": "Orange",
         "value": {
           "light": "255, 182, 93",
           "dark": "210, 105, 19"
@@ -244,6 +299,7 @@
       },
       {
         "key": "orange-5",
+        "colorType": "Orange",
         "value": {
           "light": "255, 154, 46",
           "dark": "255, 141, 31"
@@ -251,6 +307,7 @@
       },
       {
         "key": "orange-6",
+        "colorType": "Orange",
         "value": {
           "light": "255, 125, 0",
           "dark": "255, 150, 38"
@@ -258,6 +315,7 @@
       },
       {
         "key": "orange-7",
+        "colorType": "Orange",
         "value": {
           "light": "210, 95, 0",
           "dark": "255, 179, 87"
@@ -265,6 +323,7 @@
       },
       {
         "key": "orange-8",
+        "colorType": "Orange",
         "value": {
           "light": "166, 69, 0",
           "dark": "255, 205, 135"
@@ -272,6 +331,7 @@
       },
       {
         "key": "orange-9",
+        "colorType": "Orange",
         "value": {
           "light": "121, 46, 0",
           "dark": "255, 227, 184"
@@ -279,13 +339,22 @@
       },
       {
         "key": "orange-10",
+        "colorType": "Orange",
         "value": {
           "light": "77, 27, 0",
           "dark": "255, 247, 232"
         }
-      },
+      }
+    ]
+  },
+  "red": {
+    "name": "红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
       {
         "key": "red-1",
+        "colorType": "Red",
         "value": {
           "light": "255, 236, 232",
           "dark": "77, 0, 10"
@@ -293,6 +362,7 @@
       },
       {
         "key": "red-2",
+        "colorType": "Red",
         "value": {
           "light": "253, 205, 197",
           "dark": "119, 6, 17"
@@ -300,6 +370,7 @@
       },
       {
         "key": "red-3",
+        "colorType": "Red",
         "value": {
           "light": "251, 172, 163",
           "dark": "161, 22, 31"
@@ -307,6 +378,7 @@
       },
       {
         "key": "red-4",
+        "colorType": "Red",
         "value": {
           "light": "249, 137, 129",
           "dark": "203, 46, 52"
@@ -314,6 +386,7 @@
       },
       {
         "key": "red-5",
+        "colorType": "Red",
         "value": {
           "light": "247, 101, 96",
           "dark": "245, 78, 78"
@@ -321,6 +394,7 @@
       },
       {
         "key": "red-6",
+        "colorType": "Red",
         "value": {
           "light": "245, 63, 63",
           "dark": "247, 105, 101"
@@ -328,6 +402,7 @@
       },
       {
         "key": "red-7",
+        "colorType": "Red",
         "value": {
           "light": "203, 39, 45",
           "dark": "249, 141, 134"
@@ -335,6 +410,7 @@
       },
       {
         "key": "red-8",
+        "colorType": "Red",
         "value": {
           "light": "161, 21, 30",
           "dark": "251, 176, 167"
@@ -342,6 +418,7 @@
       },
       {
         "key": "red-9",
+        "colorType": "Red",
         "value": {
           "light": "119, 8, 19",
           "dark": "253, 209, 202"
@@ -349,13 +426,22 @@
       },
       {
         "key": "red-10",
+        "colorType": "Red",
         "value": {
           "light": "77, 0, 10",
           "dark": "255, 240, 236"
         }
-      },
+      }
+    ]
+  },
+  "gray": {
+    "name": "中性灰",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
       {
         "key": "gray-1",
+        "colorType": "Gray",
         "value": {
           "light": "255, 255, 255",
           "dark": "0, 0, 0"
@@ -363,6 +449,7 @@
       },
       {
         "key": "gray-2",
+        "colorType": "Gray",
         "value": {
           "light": "238, 238, 238",
           "dark": "36, 36, 36"
@@ -370,6 +457,7 @@
       },
       {
         "key": "gray-3",
+        "colorType": "Gray",
         "value": {
           "light": "221, 221, 221",
           "dark": "57, 57, 57"
@@ -377,6 +465,7 @@
       },
       {
         "key": "gray-4",
+        "colorType": "Gray",
         "value": {
           "light": "198, 198, 198",
           "dark": "94, 94, 94"
@@ -384,6 +473,7 @@
       },
       {
         "key": "gray-5",
+        "colorType": "Gray",
         "value": {
           "light": "139, 139, 139",
           "dark": "119, 119, 122"
@@ -391,6 +481,7 @@
       },
       {
         "key": "gray-6",
+        "colorType": "Gray",
         "value": {
           "light": "119, 119, 119",
           "dark": "166, 166, 166"
@@ -398,6 +489,7 @@
       },
       {
         "key": "gray-7",
+        "colorType": "Gray",
         "value": {
           "light": "94, 94, 94",
           "dark": "221, 221, 221"
@@ -405,6 +497,7 @@
       },
       {
         "key": "gray-8",
+        "colorType": "Gray",
         "value": {
           "light": "75, 75, 75",
           "dark": "238, 238, 238"
@@ -412,6 +505,7 @@
       },
       {
         "key": "gray-9",
+        "colorType": "Gray",
         "value": {
           "light": "44, 44, 44",
           "dark": "243, 243, 243"
@@ -419,13 +513,22 @@
       },
       {
         "key": "gray-10",
+        "colorType": "Gray",
         "value": {
           "light": "0, 0, 0",
           "dark": "255, 255, 255"
         }
-      },
+      }
+    ]
+  },
+  "mixedgray": {
+    "name": "混合中性色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
       {
         "key": "mixedgray-1",
+        "colorType": "Mixedgray",
         "value": {
           "light": "247, 248, 250",
           "dark": "23, 23, 26"
@@ -433,6 +536,7 @@
       },
       {
         "key": "mixedgray-2",
+        "colorType": "Mixedgray",
         "value": {
           "light": "242, 243, 245",
           "dark": "46, 46, 48"
@@ -440,6 +544,7 @@
       },
       {
         "key": "mixedgray-3",
+        "colorType": "Mixedgray",
         "value": {
           "light": "229, 230, 235",
           "dark": "72, 72, 73"
@@ -447,6 +552,7 @@
       },
       {
         "key": "mixedgray-4",
+        "colorType": "Mixedgray",
         "value": {
           "light": "201, 205, 212",
           "dark": "95, 95, 96"
@@ -454,6 +560,7 @@
       },
       {
         "key": "mixedgray-5",
+        "colorType": "Mixedgray",
         "value": {
           "light": "169, 174, 184",
           "dark": "120, 120, 122"
@@ -461,6 +568,7 @@
       },
       {
         "key": "mixedgray-6",
+        "colorType": "Mixedgray",
         "value": {
           "light": "134, 144, 156",
           "dark": "146, 146, 147"
@@ -468,6 +576,7 @@
       },
       {
         "key": "mixedgray-7",
+        "colorType": "Mixedgray",
         "value": {
           "light": "107, 119, 133",
           "dark": "171, 171, 172"
@@ -475,6 +584,7 @@
       },
       {
         "key": "mixedgray-8",
+        "colorType": "Mixedgray",
         "value": {
           "light": "78, 89, 105",
           "dark": "197, 197, 197"
@@ -482,6 +592,7 @@
       },
       {
         "key": "mixedgray-9",
+        "colorType": "Mixedgray",
         "value": {
           "light": "39, 46, 59",
           "dark": "223, 223, 223"
@@ -489,6 +600,7 @@
       },
       {
         "key": "mixedgray-10",
+        "colorType": "Mixedgray",
         "value": {
           "light": "29, 33, 41",
           "dark": "246, 246, 246"
@@ -506,7 +618,7 @@
         "description": "一级/强调/标题",
         "value": {
           "light": "rgb(var(--o-gray-10))",
-          "'dark": "rgb(var(--o-gray-10))"
+          "dark": "rgb(var(--o-gray-10))"
         }
       },
       {
@@ -514,7 +626,7 @@
         "description": "二级/次强调/正文",
         "value": {
           "light": "rgb(var(--o-gray-8))",
-          "'dark": "rgb(var(--o-gray-8))"
+          "dark": "rgb(var(--o-gray-8))"
         }
       },
       {
@@ -522,7 +634,7 @@
         "description": "三级/辅助信息",
         "value": {
           "light": "rgb(var(--o-gray-6))",
-          "'dark": "rgb(var(--o-gray-6))"
+          "dark": "rgb(var(--o-gray-6))"
         }
       },
       {
@@ -530,7 +642,7 @@
         "description": "置灰/禁用",
         "value": {
           "light": "rgb(var(--o-gray-4))",
-          "'dark": "rgb(var(--o-gray-4))"
+          "dark": "rgb(var(--o-gray-4))"
         }
       },
       {
@@ -538,7 +650,7 @@
         "description": "一级/次强调/正文反色",
         "value": {
           "light": "rgb(var(--o-gray-1))",
-          "'dark": "rgb(var(--o-gray-1))"
+          "dark": "rgb(var(--o-gray-1))"
         }
       },
       {
@@ -546,7 +658,7 @@
         "description": "二级/辅助信息反色",
         "value": {
           "light": "rgb(var(--o-gray-3))",
-          "'dark": "rgb(var(--o-gray-3))"
+          "dark": "rgb(var(--o-gray-3))"
         }
       },
       {
@@ -554,7 +666,7 @@
         "description": "三级/辅助信息反色",
         "value": {
           "light": "rgb(var(--o-gray-5))",
-          "'dark": "rgb(var(--o-gray-5))"
+          "dark": "rgb(var(--o-gray-5))"
         }
       },
       {
@@ -562,141 +674,211 @@
         "description": "置灰/禁用反色",
         "value": {
           "light": "rgb(var(--o-gray-7))",
-          "'dark": "rgb(var(--o-gray-7))"
+          "dark": "rgb(var(--o-gray-7))"
         }
       }
     ]
   },
-  "neutral": {
-    "name": "中性色",
+  "mask": {
+    "name": "遮罩色",
     "type": "color",
     "typeName": "颜色",
     "value": [
       {
-        "key": "color-neutral1",
-        "description": "白底",
+        "key": "color-mask1",
+        "description": "全局遮罩",
         "value": {
-          "light": "rgb(var(--o-gray-1))",
-          "'dark": "rgb(var(--o-gray-1))"
+          "light": "rgba(var(--o-gray-10), .2)",
+          "dark": "rgba(var(--o-gray-10), .2)"
         }
       },
       {
-        "key": "color-neutral2",
-        "description": "浅色背景(页面背景)",
+        "key": "color-mask2",
+        "description": "局部遮罩",
+        "value": {
+          "light": "rgba(var(--o-gray-10), .1)",
+          "dark": "rgba(var(--o-gray-10), .1)"
+        }
+      }
+    ]
+  },
+  "fill": {
+    "name": "填充色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-fill1",
+        "description": "一级填充/页面背景",
         "value": {
           "light": "rgb(var(--o-mixedgray-1))",
-          "'dark": "rgb(var(--o-mixedgray-1))"
+          "dark": "rgb(var(--o-mixedgray-1))"
         }
       },
       {
-        "key": "color-neutral3",
-        "description": "浅色特殊场景/hover/禁用",
+        "key": "color-fill2",
+        "description": "二级填充/区块、卡片",
         "value": {
-          "light": "rgb(var(--o-mixedgray-2))",
-          "'dark": "rgb(var(--o-mixedgray-2))"
+          "light": "rgb(var(--o-gray-1))",
+          "dark": "rgb(var(--o-gray-1))"
         }
       },
       {
-        "key": "color-neutral4",
-        "description": "常规背景/浅色边框",
+        "key": "color-fill3",
+        "description": "三级填充/卡片",
         "value": {
           "light": "rgb(var(--o-mixedgray-3))",
-          "'dark": "rgb(var(--o-mixedgray-3))"
+          "dark": "rgb(var(--o-mixedgray-3))"
         }
       },
       {
-        "key": "color-neutral5",
-        "description": "特殊场景/hover/禁用",
+        "key": "color-fill4",
+        "description": "四级填充/禁用",
         "value": {
           "light": "rgb(var(--o-mixedgray-4))",
-          "'dark": "rgb(var(--o-mixedgray-4))"
+          "dark": "rgb(var(--o-mixedgray-4))"
+        }
+      }
+    ]
+  },
+  "control": {
+    "name": "控件色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-control1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-3))",
+          "dark": "rgb(var(--o-mixedgray-3))"
         }
       },
       {
-        "key": "color-neutral6",
-        "description": "深色背景/常规边框",
+        "key": "color-control2",
+        "description": "悬浮",
         "value": {
-          "light": "rgb(var(--o-mixedgray-5))",
-          "'dark": "rgb(var(--o-mixedgray-5))"
+          "light": "rgb(var(--o-mixedgray-4))",
+          "dark": "rgb(var(--o-mixedgray-4))"
         }
       },
       {
-        "key": "color-neutral7",
-        "description": "深色边框",
+        "key": "color-control3",
+        "description": "激活",
         "value": {
           "light": "rgb(var(--o-mixedgray-6))",
-          "'dark": "rgb(var(--o-mixedgray-6))"
+          "dark": "rgb(var(--o-mixedgray-6))"
         }
       },
       {
-        "key": "color-neutral8",
-        "description": "重/特殊场景",
+        "key": "color-control4",
+        "description": "禁用",
         "value": {
-          "light": "rgb(var(--o-mixedgray-7))",
-          "'dark": "rgb(var(--o-mixedgray-7))"
+          "light": "rgb(var(--o-mixedgray-5))",
+          "dark": "rgb(var(--o-mixedgray-5))"
+        }
+      },
+      {
+        "key": "color-control1-light",
+        "description": "浅/控件常规",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-2))",
+          "dark": "rgb(var(--o-mixedgray-2))"
+        }
+      },
+      {
+        "key": "color-control2-light",
+        "description": "浅/控件悬浮",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-3))",
+          "dark": "rgb(var(--o-mixedgray-3))"
+        }
+      },
+      {
+        "key": "color-control3-light",
+        "description": "浅/控件激活",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-4))",
+          "dark": "rgb(var(--o-mixedgray-4))"
+        }
+      },
+      {
+        "key": "color-control4-light",
+        "description": "浅/控件禁用",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-1))",
+          "dark": "rgb(var(--o-mixedgray-1))"
         }
       }
     ]
   },
   "primary": {
-    "name": "主色",
+    "name": "强调色",
     "type": "color",
     "typeName": "颜色",
     "value": [
       {
-        "key": "color-primary6",
+        "key": "color-primary1",
         "description": "常规",
         "value": {
           "light": "rgb(var(--o-blue-6))",
-          "'dark": "rgb(var(--o-blue-6))"
+          "dark": "rgb(var(--o-blue-6))"
         }
       },
       {
-        "key": "color-primary5",
+        "key": "color-primary2",
         "description": "悬浮",
         "value": {
           "light": "rgb(var(--o-blue-5))",
-          "'dark": "rgb(var(--o-blue-5))"
+          "dark": "rgb(var(--o-blue-5))"
         }
       },
       {
-        "key": "color-primary7",
+        "key": "color-primary3",
         "description": "激活",
         "value": {
           "light": "rgb(var(--o-blue-7))",
-          "'dark": "rgb(var(--o-blue-7))"
+          "dark": "rgb(var(--o-blue-7))"
         }
       },
       {
         "key": "color-primary4",
-        "description": "特殊场景",
+        "description": "禁用",
         "value": {
-          "light": "rgb(var(--o-blue-4))",
-          "'dark": "rgb(var(--o-blue-4))"
+          "light": "rgb(var(--o-blue-3))",
+          "dark": "rgb(var(--o-blue-3))"
         }
       },
       {
-        "key": "color-primary3",
-        "description": "一般禁用",
+        "key": "color-primary1-light",
+        "description": "浅/常规",
+        "value": {
+          "light": "rgb(var(--o-blue-2))",
+          "dark": "rgb(var(--o-blue-2))"
+        }
+      },
+      {
+        "key": "color-primary2-light",
+        "description": "浅/悬浮",
         "value": {
           "light": "rgb(var(--o-blue-3))",
-          "'dark": "rgb(var(--o-blue-3))"
+          "dark": "rgb(var(--o-blue-3))"
         }
       },
       {
-        "key": "color-primary2",
-        "description": "文字禁用",
+        "key": "color-primary3-light",
+        "description": "浅/激活",
         "value": {
-          "light": "rgb(var(--o-blue-2))",
-          "'dark": "rgb(var(--o-blue-2))"
+          "light": "rgb(var(--o-blue-4))",
+          "dark": "rgb(var(--o-blue-4))"
         }
       },
       {
-        "key": "color-primary1",
-        "description": "浅色/白底悬浮",
+        "key": "color-primary5-light",
+        "description": "浅/禁用",
         "value": {
           "light": "rgb(var(--o-blue-1))",
-          "'dark": "rgb(var(--o-blue-1))"
+          "dark": "rgb(var(--o-blue-1))"
         }
       }
     ]
@@ -707,59 +889,67 @@
     "typeName": "颜色",
     "value": [
       {
-        "key": "color-success6",
+        "key": "color-success1",
         "description": "常规",
         "value": {
           "light": "rgb(var(--o-green-6))",
-          "'dark": "rgb(var(--o-green-6))"
+          "dark": "rgb(var(--o-green-6))"
         }
       },
       {
-        "key": "color-success5",
+        "key": "color-success2",
         "description": "悬浮",
         "value": {
           "light": "rgb(var(--o-green-5))",
-          "'dark": "rgb(var(--o-green-5))"
+          "dark": "rgb(var(--o-green-5))"
         }
       },
       {
-        "key": "color-success7",
+        "key": "color-success3",
         "description": "激活",
         "value": {
           "light": "rgb(var(--o-green-7))",
-          "'dark": "rgb(var(--o-green-7))"
+          "dark": "rgb(var(--o-green-7))"
         }
       },
       {
-        "key": "color-success4",
-        "description": "特殊场景",
+        "key": "color-success5",
+        "description": "禁用",
         "value": {
-          "light": "rgb(var(--o-green-4))",
-          "'dark": "rgb(var(--o-green-4))"
+          "light": "rgb(var(--o-green-3))",
+          "dark": "rgb(var(--o-green-3))"
         }
       },
       {
-        "key": "color-success3",
-        "description": "一般禁用",
+        "key": "color-success1-light",
+        "description": "浅/常规",
+        "value": {
+          "light": "rgb(var(--o-green-2))",
+          "dark": "rgb(var(--o-green-2))"
+        }
+      },
+      {
+        "key": "color-success2-light",
+        "description": "浅/悬浮",
         "value": {
           "light": "rgb(var(--o-green-3))",
-          "'dark": "rgb(var(--o-green-3))"
+          "dark": "rgb(var(--o-green-3))"
         }
       },
       {
-        "key": "color-success2",
-        "description": "文字禁用",
+        "key": "color-success3-light",
+        "description": "浅/激活",
         "value": {
-          "light": "rgb(var(--o-green-2))",
-          "'dark": "rgb(var(--o-green-2))"
+          "light": "rgb(var(--o-green-4))",
+          "dark": "rgb(var(--o-green-4))"
         }
       },
       {
-        "key": "color-success1",
-        "description": "浅色/白底悬浮",
+        "key": "color-success5-light",
+        "description": "浅/禁用",
         "value": {
           "light": "rgb(var(--o-green-1))",
-          "'dark": "rgb(var(--o-green-1))"
+          "dark": "rgb(var(--o-green-1))"
         }
       }
     ]
@@ -770,59 +960,67 @@
     "typeName": "颜色",
     "value": [
       {
-        "key": "color-warning6",
+        "key": "color-warning1",
         "description": "常规",
         "value": {
           "light": "rgb(var(--o-orange-6))",
-          "'dark": "rgb(var(--o-orange-6))"
+          "dark": "rgb(var(--o-orange-6))"
         }
       },
       {
-        "key": "color-warning5",
+        "key": "color-warning2",
         "description": "悬浮",
         "value": {
           "light": "rgb(var(--o-orange-5))",
-          "'dark": "rgb(var(--o-orange-5))"
+          "dark": "rgb(var(--o-orange-5))"
         }
       },
       {
-        "key": "color-warning7",
+        "key": "color-warning3",
         "description": "激活",
         "value": {
           "light": "rgb(var(--o-orange-7))",
-          "'dark": "rgb(var(--o-orange-7))"
+          "dark": "rgb(var(--o-orange-7))"
         }
       },
       {
-        "key": "color-warning4",
-        "description": "特殊场景",
+        "key": "color-warning5",
+        "description": "禁用",
         "value": {
-          "light": "rgb(var(--o-orange-4))",
-          "'dark": "rgb(var(--o-orange-4))"
+          "light": "rgb(var(--o-orange-3))",
+          "dark": "rgb(var(--o-orange-3))"
         }
       },
       {
-        "key": "color-warning3",
-        "description": "一般禁用",
+        "key": "color-warning1-light",
+        "description": "浅/常规",
+        "value": {
+          "light": "rgb(var(--o-orange-2))",
+          "dark": "rgb(var(--o-orange-2))"
+        }
+      },
+      {
+        "key": "color-warning2-light",
+        "description": "浅/悬浮",
         "value": {
           "light": "rgb(var(--o-orange-3))",
-          "'dark": "rgb(var(--o-orange-3))"
+          "dark": "rgb(var(--o-orange-3))"
         }
       },
       {
-        "key": "color-warning2",
-        "description": "文字禁用",
+        "key": "color-warning3-light",
+        "description": "浅/激活",
         "value": {
-          "light": "rgb(var(--o-orange-2))",
-          "'dark": "rgb(var(--o-orange-2))"
+          "light": "rgb(var(--o-orange-4))",
+          "dark": "rgb(var(--o-orange-4))"
         }
       },
       {
-        "key": "color-warning1",
-        "description": "浅色/白底悬浮",
+        "key": "color-warning5-light",
+        "description": "浅/禁用",
         "value": {
           "light": "rgb(var(--o-orange-1))",
-          "'dark": "rgb(var(--o-orange-1))"
+          "dark": "rgb(var(--o-orange-1))"
         }
       }
     ]
@@ -833,59 +1031,634 @@
     "typeName": "颜色",
     "value": [
       {
-        "key": "color-danger6",
+        "key": "color-danger1",
         "description": "常规",
         "value": {
           "light": "rgb(var(--o-red-6))",
-          "'dark": "rgb(var(--o-red-6))"
+          "dark": "rgb(var(--o-red-6))"
         }
       },
       {
-        "key": "color-danger5",
+        "key": "color-danger2",
         "description": "悬浮",
         "value": {
           "light": "rgb(var(--o-red-5))",
-          "'dark": "rgb(var(--o-red-5))"
+          "dark": "rgb(var(--o-red-5))"
         }
       },
       {
-        "key": "color-danger7",
+        "key": "color-danger3",
         "description": "激活",
         "value": {
           "light": "rgb(var(--o-red-7))",
-          "'dark": "rgb(var(--o-red-7))"
+          "dark": "rgb(var(--o-red-7))"
         }
       },
       {
-        "key": "color-danger4",
-        "description": "特殊场景",
+        "key": "color-danger5",
+        "description": "禁用",
         "value": {
-          "light": "rgb(var(--o-red-4))",
-          "'dark": "rgb(var(--o-red-4))"
+          "light": "rgb(var(--o-red-3))",
+          "dark": "rgb(var(--o-red-3))"
         }
       },
       {
-        "key": "color-danger3",
-        "description": "一般禁用",
+        "key": "color-danger1-light",
+        "description": "浅/常规",
+        "value": {
+          "light": "rgb(var(--o-red-2))",
+          "dark": "rgb(var(--o-red-2))"
+        }
+      },
+      {
+        "key": "color-danger2-light",
+        "description": "浅/悬浮",
         "value": {
           "light": "rgb(var(--o-red-3))",
-          "'dark": "rgb(var(--o-red-3))"
+          "dark": "rgb(var(--o-red-3))"
         }
       },
       {
-        "key": "color-danger2",
-        "description": "文字禁用",
+        "key": "color-danger3-light",
+        "description": "浅/激活",
         "value": {
-          "light": "rgb(var(--o-red-2))",
-          "'dark": "rgb(var(--o-red-2))"
+          "light": "rgb(var(--o-red-4))",
+          "dark": "rgb(var(--o-red-4))"
         }
       },
       {
-        "key": "color-danger1",
-        "description": "浅色/白底悬浮",
+        "key": "color-danger5-light",
+        "description": "浅/禁用",
         "value": {
           "light": "rgb(var(--o-red-1))",
-          "'dark": "rgb(var(--o-red-1))"
+          "dark": "rgb(var(--o-red-1))"
+        }
+      }
+    ]
+  },
+  "shadow": {
+    "name": "阴影",
+    "type": "shadow",
+    "typeName": "阴影",
+    "value": [
+      {
+        "key": "shadow-1",
+        "name": "阴影1",
+        "description": "用于卡片、小弹窗、楼层阴影",
+        "value": {
+          "light": "0 1px 5px rgba(var(--o-gray-10), 0.1)",
+          "dark": "0 1px 7px rgba(var(--o-gray-10), 0.3)"
+        }
+      },
+      {
+        "key": "shadow-2",
+        "name": "阴影2",
+        "description": "用于卡片悬浮阴影",
+        "value": {
+          "light": "0 6px 18px rgba(var(--o-gray-10), 0.14)",
+          "dark": "0 6px 18px rgba(var(--o-gray-10), 0.42)"
+        }
+      },
+      {
+        "key": "shadow-3",
+        "name": "阴影3",
+        "description": "用于提示阴影",
+        "value": {
+          "light": "0 10px 32px rgba(var(--o-gray-10), 0.18)",
+          "dark": "0 10px 32px rgba(var(--o-gray-10), 0.54)"
+        }
+      }
+    ]
+  },
+  "gap": {
+    "name": "间距",
+    "type": "gap",
+    "typeName": "间距",
+    "value": [
+      {
+        "key": "gap-1",
+        "name": "间距1",
+        "description": "用于组件之间的间距1",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "gap-2",
+        "name": "间距2",
+        "description": "用于组件之间的间距2",
+        "value": {
+          "light": "8px",
+          "dark": "8px"
+        }
+      },
+      {
+        "key": "gap-3",
+        "name": "间距3",
+        "description": "用于组件之间的间距3",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      },
+      {
+        "key": "gap-4",
+        "name": "间距4",
+        "description": "用于组件之间的间距4",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "gap-5",
+        "name": "间距5",
+        "description": "用于组件之间的间距5",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "gap-6",
+        "name": "间距6",
+        "description": "用于组件之间的间距6",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "gap-7",
+        "name": "间距7",
+        "description": "用于组件之间的间距7",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "gap-8",
+        "name": "间距8",
+        "description": "用于组件之间的间距8",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      }
+    ]
+  },
+  "size": {
+    "name": "组件尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "size-l",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "size-m",
+        "name": "中尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "size-s",
+        "name": "小尺寸",
+        "description": "小尺寸",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      }
+    ]
+  },
+  "icon_size": {
+    "name": "图标尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "icon_size-l",
+        "name": "大尺寸图标",
+        "description": "尺寸",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "icon_size-m",
+        "name": "中尺寸图标",
+        "description": "尺寸",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "icon_size-s",
+        "name": "小尺寸图标",
+        "description": "小尺寸",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "icon_size-xs",
+        "name": "超小尺寸图标",
+        "description": "小尺寸",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      }
+    ]
+  },
+  "font_size": {
+    "name": "字体尺寸",
+    "type": "font",
+    "typeName": "字体",
+    "value": [
+      {
+        "key": "font_size-display1",
+        "name": "一级数据展示",
+        "description": "一级数据展示",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "font_size-display2",
+        "name": "二级数据展示",
+        "description": "二级数据展示",
+        "value": {
+          "light": "54px",
+          "dark": "54px"
+        }
+      },
+      {
+        "key": "font_size-display3",
+        "name": "三级数据展示",
+        "description": "三级数据展示",
+        "value": {
+          "light": "36px",
+          "dark": "36px"
+        }
+      },
+      {
+        "key": "font_size-display4",
+        "name": "四级数据展示",
+        "description": "四级数据展示",
+        "value": {
+          "light": "28px",
+          "dark": "28px"
+        }
+      },
+      {
+        "key": "font_size-h1",
+        "name": "一级标题",
+        "description": "一级标题",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "font_size-h2",
+        "name": "二级标题",
+        "description": "二级标题",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "font_size-h3",
+        "name": "三级标题",
+        "description": "三级标题",
+        "value": {
+          "light": "18px",
+          "dark": "18px"
+        }
+      },
+      {
+        "key": "font_size-h4",
+        "name": "四级标题",
+        "description": "四级标题",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "font_size-text",
+        "name": "正文",
+        "description": "正文",
+        "value": {
+          "light": "14px",
+          "dark": "14px"
+        }
+      },
+      {
+        "key": "font_size-tip1",
+        "name": "提示文本1",
+        "description": "提示文本1",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      },
+      {
+        "key": "font_size-tip2",
+        "name": "提示文本2",
+        "description": "提示文本2",
+        "value": {
+          "light": "10px",
+          "dark": "10px"
+        }
+      }
+    ]
+  },
+  "line_height": {
+    "name": "字体行高",
+    "type": "font",
+    "typeName": "字体",
+    "value": [
+      {
+        "key": "line_height-display1",
+        "name": "一级数据展示",
+        "description": "一级数据展示",
+        "value": {
+          "light": "84px",
+          "dark": "84px"
+        }
+      },
+      {
+        "key": "line_height-display2",
+        "name": "二级数据展示",
+        "description": "二级数据展示",
+        "value": {
+          "light": "76px",
+          "dark": "76px"
+        }
+      },
+      {
+        "key": "line_height-display3",
+        "name": "三级数据展示",
+        "description": "三级数据展示",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "line_height-display4",
+        "name": "四级数据展示",
+        "description": "四级数据展示",
+        "value": {
+          "light": "36px",
+          "dark": "36px"
+        }
+      },
+      {
+        "key": "line_height-h1",
+        "name": "一级标题",
+        "description": "一级标题",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "line_height-h2",
+        "name": "二级标题",
+        "description": "二级标题",
+        "value": {
+          "light": "28px",
+          "dark": "28px"
+        }
+      },
+      {
+        "key": "line_height-h3",
+        "name": "三级标题",
+        "description": "三级标题",
+        "value": {
+          "light": "26px",
+          "dark": "26px"
+        }
+      },
+      {
+        "key": "line_height-h4",
+        "name": "四级标题",
+        "description": "四级标题",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "line_height-text",
+        "name": "正文",
+        "description": "正文",
+        "value": {
+          "light": "22px",
+          "dark": "22px"
+        }
+      },
+      {
+        "key": "line_height-tip1",
+        "name": "提示文本1",
+        "description": "提示文本1",
+        "value": {
+          "light": "18px",
+          "dark": "18px"
+        }
+      },
+      {
+        "key": "line_height-tip2",
+        "name": "提示文本2",
+        "description": "提示文本2",
+        "value": {
+          "light": "14px",
+          "dark": "14px"
+        }
+      }
+    ]
+  },
+  "radius": {
+    "name": "圆角尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "radius-l",
+        "name": "大尺寸圆角",
+        "description": "大尺寸圆角",
+        "value": {
+          "light": "8px",
+          "dark": "8px"
+        }
+      },
+      {
+        "key": "radius-m",
+        "name": "中尺寸圆角",
+        "description": "中尺寸圆角",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius-s",
+        "name": "小尺寸圆角",
+        "description": "小尺寸圆角",
+        "value": {
+          "light": "2px",
+          "dark": "2px"
+        }
+      }
+    ]
+  },
+  "duration": {
+    "name": "动画持续时间",
+    "type": "animation",
+    "typeName": "动画",
+    "value": [
+      {
+        "key": "duration-s",
+        "name": "持续时间",
+        "description": "用于退出屏幕的动画",
+        "value": {
+          "light": "200ms",
+          "dark": "200ms"
+        }
+      },
+      {
+        "key": "duration-m1",
+        "name": "持续时间",
+        "description": "用于当曲线为standard-in时进入屏幕的动画",
+        "value": {
+          "light": "250ms",
+          "dark": "250ms"
+        }
+      },
+      {
+        "key": "duration-m2",
+        "name": "持续时间",
+        "description": "用于当曲线为standard时开始、结束的动画",
+        "value": {
+          "light": "300ms",
+          "dark": "300ms"
+        }
+      },
+      {
+        "key": "duration-m3",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized-in时进入屏幕的动画",
+        "value": {
+          "light": "400ms",
+          "dark": "400ms"
+        }
+      },
+      {
+        "key": "duration-l",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时开始、结束的动画",
+        "value": {
+          "light": "500ms",
+          "dark": "500ms"
+        }
+      },
+      {
+        "key": "duration-xl",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时，轮播切换动画",
+        "value": {
+          "light": "1000ms",
+          "dark": "1000ms"
+        }
+      }
+    ]
+  },
+  "easing": {
+    "name": "动画曲线",
+    "type": "animation",
+    "typeName": "动画",
+    "value": [
+      {
+        "key": "easing-linear",
+        "name": "线性动画曲线",
+        "description": "线性曲线",
+        "value": {
+          "light": "cubic-bezier(0, 0, 1, 1)",
+          "dark": "cubic-bezier(0, 0, 1, 1)"
+        }
+      },
+      {
+        "key": "easing-standard",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-standard-in",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0, 0, 0, 1)",
+          "dark": "cubic-bezier(0, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-standard-out",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 1, 1)",
+          "dark": "cubic-bezier(0.3, 0, 1, 1)"
+        }
+      },
+      {
+        "key": "easing-emphasized",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-emphasized-in",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 0.8, 0.15)",
+          "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)"
+        }
+      },
+      {
+        "key": "easing-emphasized-out",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.05, 0.7, 0.1, 1)",
+          "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)"
         }
       }
     ]
diff --git a/packages/portal/src/components/TheAside.vue b/packages/portal/src/components/TheAside.vue
index 66203d4e..569aff7c 100644
--- a/packages/portal/src/components/TheAside.vue
+++ b/packages/portal/src/components/TheAside.vue
@@ -43,24 +43,24 @@ const navClick = (item: typeof navList[0]) => {
 </template>
 <style lang="scss" scoped>
 .the-aside {
-  background-color: var(--o-color-bg3);
-  color: var(--o-color-text1);
-  border-right: 1px solid var(--o-color-border2);
+  background-color: var(--o-color-fill2);
+  color: var(--o-color-info1);
 }
 .aside-title {
-  padding: 8px;
+  padding: 16px;
   text-align: center;
-  border-bottom: 1px solid var(--o-color-border2);
+  border-bottom: 1px solid var(--o-color-control1-light);
+  font-size: var(--o-font_size-h1);
 }
 .nav-item {
   padding: 8px 16px;
   cursor: pointer;
   &:hover {
-    background-color: var(--o-color-bg4);
+    background-color: var(--o-color-primary1-light);
   }
   &.active {
-    color: var(--o-color-primary1);
-    background-color: var(--o-color-bg4);
+    color: var(--o-color-info1-inverse);
+    background-color: var(--o-color-primary1);
   }
 }
 </style>
diff --git a/packages/portal/src/components/TheHeader.vue b/packages/portal/src/components/TheHeader.vue
index 53473da4..25d59026 100644
--- a/packages/portal/src/components/TheHeader.vue
+++ b/packages/portal/src/components/TheHeader.vue
@@ -19,12 +19,12 @@ const globalSetting = () => {
 </template>
 <style lang="scss" scoped>
 .the-header {
-  color: var(--o-color-text1);
+  color: var(--o-color-info1);
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--o-color-bg3);
-  box-shadow: 0px 2px 8px rgba($color: #000000, $alpha: 0.1);
+  background-color: var(--o-color-fill2);
+  box-shadow: 0px 1px 1px rgba(var(--o-gray-10), 0.1);
 }
 .tools {
   position: absolute;
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 7a7b8261..fbc00dd8 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -5,7 +5,7 @@ export const routes = [
   {
     path: '/',
     name: 'Home',
-    label: '首页',
+    label: '通用',
     component: TheHome,
   },
   {
diff --git a/packages/portal/src/style.scss b/packages/portal/src/style.scss
index b05e7b7c..aa50dfcc 100644
--- a/packages/portal/src/style.scss
+++ b/packages/portal/src/style.scss
@@ -6,8 +6,8 @@
 
   color-scheme: light dark;
 
-  color: #213547;
-  background-color: #ffffff;
+  color: var(--o-color-info1);
+  background-color: var(--o-color-fill1);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -45,7 +45,7 @@ body {
   gap: 8px;
 }
 section {
-  border: 1px solid var(--o-color-border2);
+  border: 1px solid var(--o-color-control1-light);
   padding: var(--o-gap-4);
 
   h4 {
-- 
Gitee


From 8033bf079f3e5366be611148993806e0997ccf4e Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 24 Feb 2023 15:29:56 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=88=B7=E6=96=B0=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/opendesign.token.code-snippets        |  50 ++---
 .../src/components/_shared/global.ts          |   2 +-
 .../components/button/__demo__/BtnBasic.vue   |  91 ++++++---
 .../components/button/__demo__/BtnIcon.vue    |  24 +--
 .../components/button/__demo__/BtnRound.vue   |  18 +-
 .../src/components/button/style/index.scss    |  14 +-
 .../src/components/button/style/var.scss      | 179 +++++++++++++-----
 .../opendesign/src/components/button/types.ts |   4 +-
 .../src/components/style/dark.token.css       |  22 +--
 .../components/style/default-light.token.css  |  22 +--
 .../src/tokens/opendesign-token.json          |  30 +--
 packages/portal/src/style.scss                |  14 +-
 12 files changed, 299 insertions(+), 171 deletions(-)

diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets
index 1fd66484..fa7f59cb 100644
--- a/.vscode/opendesign.token.code-snippets
+++ b/.vscode/opendesign.token.code-snippets
@@ -708,7 +708,7 @@
       "var(--o-color-control1-light)"
     ],
     "body": "var(--o-color-control1-light)",
-    "description": "浅/控件常规[light: rgb(var(--o-mixedgray-2)), dark: rgb(var(--o-mixedgray-2))]",
+    "description": "浅/控件常规[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-3))]",
     "scope": "css,scss,less"
   },
   "--o-color-control2-light": {
@@ -716,7 +716,7 @@
       "var(--o-color-control2-light)"
     ],
     "body": "var(--o-color-control2-light)",
-    "description": "浅/控件悬浮[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-3))]",
+    "description": "浅/控件悬浮[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-4))]",
     "scope": "css,scss,less"
   },
   "--o-color-control3-light": {
@@ -724,7 +724,7 @@
       "var(--o-color-control3-light)"
     ],
     "body": "var(--o-color-control3-light)",
-    "description": "浅/控件激活[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-4))]",
+    "description": "浅/控件激活[light: rgb(var(--o-mixedgray-5)), dark: rgb(var(--o-mixedgray-5))]",
     "scope": "css,scss,less"
   },
   "--o-color-control4-light": {
@@ -732,7 +732,7 @@
       "var(--o-color-control4-light)"
     ],
     "body": "var(--o-color-control4-light)",
-    "description": "浅/控件禁用[light: rgb(var(--o-mixedgray-1)), dark: rgb(var(--o-mixedgray-1))]",
+    "description": "浅/控件禁用[light: rgb(var(--o-mixedgray-2)), dark: rgb(var(--o-mixedgray-2))]",
     "scope": "css,scss,less"
   },
   "--o-color-primary1": {
@@ -791,11 +791,11 @@
     "description": "浅/激活[light: rgb(var(--o-blue-4)), dark: rgb(var(--o-blue-4))]",
     "scope": "css,scss,less"
   },
-  "--o-color-primary5-light": {
+  "--o-color-primary4-light": {
     "prefix": [
-      "var(--o-color-primary5-light)"
+      "var(--o-color-primary4-light)"
     ],
-    "body": "var(--o-color-primary5-light)",
+    "body": "var(--o-color-primary4-light)",
     "description": "浅/禁用[light: rgb(var(--o-blue-1)), dark: rgb(var(--o-blue-1))]",
     "scope": "css,scss,less"
   },
@@ -823,11 +823,11 @@
     "description": "激活[light: rgb(var(--o-green-7)), dark: rgb(var(--o-green-7))]",
     "scope": "css,scss,less"
   },
-  "--o-color-success5": {
+  "--o-color-success4": {
     "prefix": [
-      "var(--o-color-success5)"
+      "var(--o-color-success4)"
     ],
-    "body": "var(--o-color-success5)",
+    "body": "var(--o-color-success4)",
     "description": "禁用[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]",
     "scope": "css,scss,less"
   },
@@ -855,11 +855,11 @@
     "description": "浅/激活[light: rgb(var(--o-green-4)), dark: rgb(var(--o-green-4))]",
     "scope": "css,scss,less"
   },
-  "--o-color-success5-light": {
+  "--o-color-success4-light": {
     "prefix": [
-      "var(--o-color-success5-light)"
+      "var(--o-color-success4-light)"
     ],
-    "body": "var(--o-color-success5-light)",
+    "body": "var(--o-color-success4-light)",
     "description": "浅/禁用[light: rgb(var(--o-green-1)), dark: rgb(var(--o-green-1))]",
     "scope": "css,scss,less"
   },
@@ -887,11 +887,11 @@
     "description": "激活[light: rgb(var(--o-orange-7)), dark: rgb(var(--o-orange-7))]",
     "scope": "css,scss,less"
   },
-  "--o-color-warning5": {
+  "--o-color-warning4": {
     "prefix": [
-      "var(--o-color-warning5)"
+      "var(--o-color-warning4)"
     ],
-    "body": "var(--o-color-warning5)",
+    "body": "var(--o-color-warning4)",
     "description": "禁用[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]",
     "scope": "css,scss,less"
   },
@@ -919,11 +919,11 @@
     "description": "浅/激活[light: rgb(var(--o-orange-4)), dark: rgb(var(--o-orange-4))]",
     "scope": "css,scss,less"
   },
-  "--o-color-warning5-light": {
+  "--o-color-warning4-light": {
     "prefix": [
-      "var(--o-color-warning5-light)"
+      "var(--o-color-warning4-light)"
     ],
-    "body": "var(--o-color-warning5-light)",
+    "body": "var(--o-color-warning4-light)",
     "description": "浅/禁用[light: rgb(var(--o-orange-1)), dark: rgb(var(--o-orange-1))]",
     "scope": "css,scss,less"
   },
@@ -951,11 +951,11 @@
     "description": "激活[light: rgb(var(--o-red-7)), dark: rgb(var(--o-red-7))]",
     "scope": "css,scss,less"
   },
-  "--o-color-danger5": {
+  "--o-color-danger4": {
     "prefix": [
-      "var(--o-color-danger5)"
+      "var(--o-color-danger4)"
     ],
-    "body": "var(--o-color-danger5)",
+    "body": "var(--o-color-danger4)",
     "description": "禁用[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]",
     "scope": "css,scss,less"
   },
@@ -983,11 +983,11 @@
     "description": "浅/激活[light: rgb(var(--o-red-4)), dark: rgb(var(--o-red-4))]",
     "scope": "css,scss,less"
   },
-  "--o-color-danger5-light": {
+  "--o-color-danger4-light": {
     "prefix": [
-      "var(--o-color-danger5-light)"
+      "var(--o-color-danger4-light)"
     ],
-    "body": "var(--o-color-danger5-light)",
+    "body": "var(--o-color-danger4-light)",
     "description": "浅/禁用[light: rgb(var(--o-red-1)), dark: rgb(var(--o-red-1))]",
     "scope": "css,scss,less"
   },
diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts
index 2c167f96..e09958d8 100644
--- a/packages/opendesign/src/components/_shared/global.ts
+++ b/packages/opendesign/src/components/_shared/global.ts
@@ -20,7 +20,7 @@ export function initRound(m: string, s: string, l: string) {
 // 方向
 export type DirectionT = 'horizontal' | 'vertical';
 
-export type VariantT = 'default' | 'outline' | 'text';
+export type VariantT = 'solid' | 'outline' | 'text';
 
 export type ColorT = 'normal' | 'primary' | 'success' | 'warning' | 'danger';
 
diff --git a/packages/opendesign/src/components/button/__demo__/BtnBasic.vue b/packages/opendesign/src/components/button/__demo__/BtnBasic.vue
index 86eb0e50..48e282c2 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnBasic.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnBasic.vue
@@ -6,51 +6,80 @@ import { OButton } from '../index';
   <section style="align-items: flex-start">
     <div>
       <p>color: normal</p>
-      <section>
-        <OButton variant="outline">Outline Button</OButton>
-        <OButton variant="fill">Fill Button</OButton>
-        <OButton variant="text">Text Button</OButton>
-      </section>
+      <div class="block">
+        <div class="row">
+          <OButton variant="outline">Outline Button</OButton>
+          <OButton variant="solid">Fill Button</OButton>
+          <OButton variant="text">Text Button</OButton>
+        </div>
+        <div class="row">
+          <OButton variant="outline" disabled>Outline Button</OButton>
+          <OButton variant="solid" disabled>Fill Button</OButton>
+          <OButton variant="text" disabled>Text Button</OButton>
+        </div>
+      </div>
     </div>
     <div>
       <p>color: primary</p>
-      <section>
-        <OButton variant="outline" color="primary">Outline Button</OButton>
-        <OButton variant="fill" color="primary">Fill Button</OButton>
-        <OButton variant="text" color="primary">Text Button</OButton>
-      </section>
+      <div class="block">
+        <div class="row">
+          <OButton variant="outline" color="primary">Outline Button</OButton>
+          <OButton variant="solid" color="primary">Fill Button</OButton>
+          <OButton variant="text" color="primary">Text Button</OButton>
+        </div>
+        <div class="row">
+          <OButton variant="outline" color="primary" disabled>Outline Button</OButton>
+          <OButton variant="solid" color="primary" disabled>Fill Button</OButton>
+          <OButton variant="text" color="primary" disabled>Text Button</OButton>
+        </div>
+      </div>
     </div>
     <div>
       <p>color: success</p>
-      <section>
-        <OButton variant="outline" color="success">Outline Button</OButton>
-        <OButton variant="fill" color="success">Fill Button</OButton>
-        <OButton variant="text" color="success">Text Button</OButton>
-      </section>
+      <div class="block">
+        <div class="row">
+          <OButton variant="outline" color="success">Outline Button</OButton>
+          <OButton variant="solid" color="success">Fill Button</OButton>
+          <OButton variant="text" color="success">Text Button</OButton>
+        </div>
+        <div class="row">
+          <OButton variant="outline" color="success" disabled>Outline Button</OButton>
+          <OButton variant="solid" color="success" disabled>Fill Button</OButton>
+          <OButton variant="text" color="success" disabled>Text Button</OButton>
+        </div>
+      </div>
     </div>
     <div>
       <p>color: warning</p>
-      <section>
-        <OButton variant="outline" color="warning">Outline Button</OButton>
-        <OButton variant="fill" color="warning">Fill Button</OButton>
-        <OButton variant="text" color="warning">Text Button</OButton>
-      </section>
+      <div class="block">
+        <div class="row">
+          <OButton variant="outline" color="warning">Outline Button</OButton>
+          <OButton variant="solid" color="warning">Fill Button</OButton>
+          <OButton variant="text" color="warning">Text Button</OButton>
+        </div>
+        <div class="row">
+          <OButton variant="outline" color="warning" disabled>Outline Button</OButton>
+          <OButton variant="solid" color="warning" disabled>Fill Button</OButton>
+          <OButton variant="text" color="warning" disabled>Text Button</OButton>
+        </div>
+      </div>
     </div>
     <div>
       <p>color: danger</p>
-      <section>
-        <OButton variant="outline" color="danger">Outline Button</OButton>
-        <OButton variant="fill" color="danger">Fill Button</OButton>
-        <OButton variant="text" color="danger">Text Button</OButton>
-      </section>
+      <div class="block">
+        <div class="row">
+          <OButton variant="outline" color="danger">Outline Button</OButton>
+          <OButton variant="solid" color="danger">Fill Button</OButton>
+          <OButton variant="text" color="danger">Text Button</OButton>
+        </div>
+        <div class="row">
+          <OButton variant="outline" color="danger" disabled>Outline Button</OButton>
+          <OButton variant="solid" color="danger" disabled>Fill Button</OButton>
+          <OButton variant="text" color="danger" disabled>Text Button</OButton>
+        </div>
+      </div>
     </div>
   </section>
-  <h4>Disabled</h4>
-  <section>
-    <OButton variant="outline" disabled>Outline Button</OButton>
-    <OButton variant="fill" disabled>Fill Button</OButton>
-    <OButton variant="text" disabled>Text Button</OButton>
-  </section>
 
   <h4>Size</h4>
   <section>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnIcon.vue b/packages/opendesign/src/components/button/__demo__/BtnIcon.vue
index 7a3868ce..583110f5 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnIcon.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnIcon.vue
@@ -5,41 +5,41 @@ import { IconAdd } from '../../icons';
 <template>
   <h4>Icon</h4>
   <section>
-    <OButton type="primary" size="large">
+    <OButton variant="solid" size="large">
       <template #icon><IconAdd /></template>Primary Button
     </OButton>
-    <OButton type="primary">
+    <OButton variant="solid">
       <template #icon><IconAdd /></template>Primary Button
     </OButton>
-    <OButton type="primary" size="small">
+    <OButton variant="solid" size="small">
       <template #icon><IconAdd /></template>Primary Button
     </OButton>
-    <OButton type="outline" size="large">
+    <OButton variant="outline" size="large">
       <template #icon><IconAdd /></template>Outline Button
     </OButton>
-    <OButton type="outline">
+    <OButton variant="outline">
       <template #icon><IconAdd /></template>Outline Button
     </OButton>
-    <OButton type="outline" size="small">
+    <OButton variant="outline" size="small">
       <template #icon><IconAdd /></template>Outline Button
     </OButton>
-    <OButton type="primary" size="large">
+    <OButton variant="text" size="large">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton type="outline">
+    <OButton variant="text">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton type="outline" size="small">
+    <OButton variant="text" size="small">
       <template #icon><IconAdd /></template>
     </OButton>
 
-    <OButton type="primary" size="large" shape="round">
+    <OButton variant="solid" size="large" round="pill">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton type="outline" shape="round">
+    <OButton variant="outline" round="pill">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton type="outline" size="small" shape="round">
+    <OButton variant="text" size="small" round="pill">
       <template #icon><IconAdd /></template>
     </OButton>
   </section>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnRound.vue b/packages/opendesign/src/components/button/__demo__/BtnRound.vue
index b157d978..8305a2c9 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnRound.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnRound.vue
@@ -18,23 +18,23 @@ const onClick = () => {
     <div>
       <p>round="pill"</p>
       <section>
-        <OButton type="primary" size="large" round="pill">
+        <OButton variant="solid" size="large" round="pill">
           <template #icon><IconAdd /></template>
         </OButton>
-        <OButton type="outline" round="pill">
+        <OButton variant="outline" round="pill">
           <template #icon><IconAdd /></template>
         </OButton>
-        <OButton type="outline" size="small" round="pill">
+        <OButton variant="text" size="small" round="pill">
           <template #icon><IconAdd /></template>
         </OButton>
 
-        <OButton type="primary" size="large" round="pill">
+        <OButton variant="solid" size="large" round="pill">
           <template #icon><IconAdd /></template>Round Button
         </OButton>
-        <OButton type="outline" round="pill">
+        <OButton variant="outline" round="pill">
           <template #icon><IconAdd /></template>Round Button
         </OButton>
-        <OButton type="outline" size="small" round="pill">
+        <OButton variant="text" size="small" round="pill">
           <template #icon><IconAdd /></template>Round Button
         </OButton>
       </section>
@@ -42,13 +42,13 @@ const onClick = () => {
     <div>
       <p>round="{{ r }}"</p>
       <section>
-        <OButton type="primary" size="large" :round="r + 'px'" @click="onClick">
+        <OButton variant="solid" size="large" :round="r + 'px'" @click="onClick">
           <template #icon><IconAdd /></template>Round Button
         </OButton>
-        <OButton type="outline" :round="r + 'px'">
+        <OButton variant="outline" :round="r + 'px'">
           <template #icon><IconAdd /></template>Round Button
         </OButton>
-        <OButton type="outline" size="small" :round="r + 'px'">
+        <OButton variant="text" size="small" :round="r + 'px'">
           <template #icon><IconAdd /></template>Round Button
         </OButton>
       </section>
diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss
index 0c6e9d34..9032e6f6 100644
--- a/packages/opendesign/src/components/button/style/index.scss
+++ b/packages/opendesign/src/components/button/style/index.scss
@@ -10,9 +10,12 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-}
-.o-btn-disabled {
-  cursor: not-allowed;
+  &:hover {
+    cursor: pointer;
+  }
+  &.o-btn-disabled {
+    cursor: not-allowed;
+  }
 }
 
 .o-btn-outline {
@@ -34,7 +37,7 @@
   }
 }
 
-.o-btn-fill {
+.o-btn-solid {
   color: var(--btn-color);
   border: 1px solid var(--btn-bd);
   background-color: var(--btn-bg);
@@ -42,7 +45,7 @@
     &:hover {
       color: var(--btn-color-hover);
       border: 1px solid var(--btn-bd-hover);
-      background-color: var(--btn-bg-active);
+      background-color: var(--btn-bg-hover);
     }
 
     &:active {
@@ -57,6 +60,7 @@
 }
 .o-btn-text {
   color: var(--btn-color);
+  background-color: transparent;
 
   &:not(.o-btn-disabled) {
     &:hover {
diff --git a/packages/opendesign/src/components/button/style/var.scss b/packages/opendesign/src/components/button/style/var.scss
index e351abe6..dff05dfe 100644
--- a/packages/opendesign/src/components/button/style/var.scss
+++ b/packages/opendesign/src/components/button/style/var.scss
@@ -1,87 +1,170 @@
 .o-btn-normal {
-  --btn-color: var(--o-color-info2);
-  --btn-color-hover: var(--o-color-info2);
-  --btn-color-active: var(--o-color-info2);
+  --btn-color: var(--o-color-info1);
+  --btn-color-hover: var(--o-color-info1);
+  --btn-color-active: var(--o-color-info1);
 
-  --btn-bg: var(--o-color-neutral4);
-  --btn-bg-hover: var(--o-color-neutral2);
-  --btn-bg-active: var(--o-color-neutral6);
+  --btn-bd: var(--o-color-control1);
+  --btn-bd-hover: var(--o-color-control2);
+  --btn-bd-active: var(--o-color-control3);
 
-  --btn-bd: var(--o-color-neutral4);
-  --btn-bd-hover: var(--o-color-neutral2);
-  --btn-bd-active: var(--o-color-neutral6);
+  &.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-bd: var(--o-color-control1-light);
+    --btn-bd-hover: var(--o-color-control2-light);
+    --btn-bd-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);
+  }
+
+  &.o-btn-disabled {
+    --btn-color: var(--o-color-info4);
+    --btn-bg: var(--o-color-control4-light);
+    --btn-bd: var(--o-color-control4-light);
+  }
 }
 .o-btn-primary {
   --btn-color: var(--o-color-primary1);
-  --btn-color-hover: var(--o-color-primary2);
-  --btn-color-active: var(--o-color-primary3);
-
-  --btn-bg: var(--o-color-primary1);
-  --btn-bg-hover: var(--o-color-primary2);
-  --btn-bg-active: var(--o-color-primary3);
+  --btn-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);
+
+  &.o-btn-solid {
+    --btn-bg: var(--o-color-primary1);
+    --btn-bg-hover: var(--o-color-primary2);
+    --btn-bg-active: var(--o-color-primary3);
+
+    --btn-bd: var(--o-color-primary1);
+    --btn-bd-hover: var(--o-color-primary2);
+    --btn-bd-active: var(--o-color-primary3);
+  }
+
+  &.o-btn-text {
+    --btn-bg-hover: var(--o-color-primary1-light);
+    --btn-bg-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);
+  }
 }
 .o-btn-success {
   --btn-color: var(--o-color-success1);
-  --btn-color-hover: var(--o-color-success2);
-  --btn-color-active: var(--o-color-success3);
-
-  --btn-bg: var(--o-color-success1);
-  --btn-bg-hover: var(--o-color-success2);
-  --btn-bg-active: var(--o-color-success3);
+  --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);
+
+  &.o-btn-solid {
+    --btn-bg: var(--o-color-success1);
+    --btn-bg-hover: var(--o-color-success2);
+    --btn-bg-active: var(--o-color-success3);
+
+    --btn-bd: var(--o-color-success1);
+    --btn-bd-hover: var(--o-color-success2);
+    --btn-bd-active: var(--o-color-success3);
+  }
+
+  &.o-btn-text {
+    --btn-bg-hover: var(--o-color-success1-light);
+    --btn-bg-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);
+  }
 }
 .o-btn-warning {
   --btn-color: var(--o-color-warning1);
-  --btn-color-hover: var(--o-color-warning2);
-  --btn-color-active: var(--o-color-warning3);
-
-  --btn-bg: var(--o-color-warning1);
-  --btn-bg-hover: var(--o-color-warning2);
-  --btn-bg-active: var(--o-color-warning3);
+  --btn-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);
+
+  &.o-btn-solid {
+    --btn-bg: var(--o-color-warning1);
+    --btn-bg-hover: var(--o-color-warning2);
+    --btn-bg-active: var(--o-color-warning3);
+
+    --btn-bd: var(--o-color-warning1);
+    --btn-bd-hover: var(--o-color-warning2);
+    --btn-bd-active: var(--o-color-warning3);
+  }
+
+  &.o-btn-text {
+    --btn-bg-hover: var(--o-color-warning1-light);
+    --btn-bg-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);
+  }
 }
 .o-btn-danger {
   --btn-color: var(--o-color-danger1);
-  --btn-color-hover: var(--o-color-danger2);
-  --btn-color-active: var(--o-color-danger3);
-
-  --btn-bg: var(--o-color-danger1);
-  --btn-bg-hover: var(--o-color-danger2);
-  --btn-bg-active: var(--o-color-danger3);
+  --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);
-}
 
-.o-btn-fill {
-  --btn-color: var(--o-color-text1-inverse);
-  --btn-color-hover: var(--o-color-text1-inverse);
-  --btn-color-active: var(--o-color-text1-inverse);
+  &.o-btn-solid {
+    --btn-bg: var(--o-color-danger1);
+    --btn-bg-hover: var(--o-color-danger2);
+    --btn-bg-active: var(--o-color-danger3);
 
-  &.o-btn-normal:not(.o-btn-disabled) {
-    --btn-color: var(--o-color-text2);
+    --btn-bd: var(--o-color-danger1);
+    --btn-bd-hover: var(--o-color-danger2);
+    --btn-bd-active: var(--o-color-danger3);
   }
-}
 
-.o-btn-disabled {
-  --btn-color: var(--o-color-text4);
-  --btn-bg: var(--o-color-normal4);
-  --btn-bd: var(--o-color-normal4);
+  &.o-btn-text {
+    --btn-bg-hover: var(--o-color-danger1-light);
+    --btn-bg-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);
+  }
 }
-.o-btn-text {
-  --btn-color-hover: var(--o-color-text1-inverse);
-  --btn-color-active: var(--o-color-text1-inverse);
+
+.o-btn-solid {
+  --btn-color: var(--o-color-info1-inverse);
+  --btn-color-hover: var(--o-color-info1-inverse);
+  --btn-color-active: var(--o-color-info1-inverse);
+
+  &.o-btn-normal:not(.o-btn-disabled) {
+    --btn-color: var(--o-color-info1);
+    --btn-color-hover: var(--o-color-info1);
+    --btn-color-active: var(--o-color-info1);
+  }
+  &.o-btn-disabled {
+    --btn-color: var(--o-color-info1-inverse);
+    &.o-btn-normal {
+      --btn-color: var(--o-color-info4);
+    }
+  }
 }
 
 .o-btn-small {
diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts
index 71b02fa7..7a86e12f 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, ColorT, VariantT } from '../_shared/global';
+import { SizeT, RoundT, VariantT } from '../_shared/global';
 
 export type ButtonTypeT = 'primary' | 'outline' | 'text' | 'link'
 
@@ -8,7 +8,7 @@ export const buttonProps = {
    * 颜色类型：ColorT
    */
   color: {
-    type: String as PropType<ColorT>,
+    type: String as PropType<'normal' | 'primary' | 'success' | 'warning' | 'danger'>,
     default: 'normal'
   },
   /**
diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css
index 504b02f5..72e07e8b 100644
--- a/packages/opendesign/src/components/style/dark.token.css
+++ b/packages/opendesign/src/components/style/dark.token.css
@@ -622,28 +622,28 @@
    * @group control
    * @description 浅/控件常规
    */
-  --o-color-control1-light: rgb(var(--o-mixedgray-2));
+  --o-color-control1-light: rgb(var(--o-mixedgray-3));
   /**
    * @name 
    * @type color
    * @group control
    * @description 浅/控件悬浮
    */
-  --o-color-control2-light: rgb(var(--o-mixedgray-3));
+  --o-color-control2-light: rgb(var(--o-mixedgray-4));
   /**
    * @name 
    * @type color
    * @group control
    * @description 浅/控件激活
    */
-  --o-color-control3-light: rgb(var(--o-mixedgray-4));
+  --o-color-control3-light: rgb(var(--o-mixedgray-5));
   /**
    * @name 
    * @type color
    * @group control
    * @description 浅/控件禁用
    */
-  --o-color-control4-light: rgb(var(--o-mixedgray-1));
+  --o-color-control4-light: rgb(var(--o-mixedgray-2));
   /**
    * @name 
    * @type color
@@ -699,7 +699,7 @@
    * @group primary
    * @description 浅/禁用
    */
-  --o-color-primary5-light: rgb(var(--o-blue-1));
+  --o-color-primary4-light: rgb(var(--o-blue-1));
   /**
    * @name 
    * @type color
@@ -727,7 +727,7 @@
    * @group success
    * @description 禁用
    */
-  --o-color-success5: rgb(var(--o-green-3));
+  --o-color-success4: rgb(var(--o-green-3));
   /**
    * @name 
    * @type color
@@ -755,7 +755,7 @@
    * @group success
    * @description 浅/禁用
    */
-  --o-color-success5-light: rgb(var(--o-green-1));
+  --o-color-success4-light: rgb(var(--o-green-1));
   /**
    * @name 
    * @type color
@@ -783,7 +783,7 @@
    * @group warning
    * @description 禁用
    */
-  --o-color-warning5: rgb(var(--o-orange-3));
+  --o-color-warning4: rgb(var(--o-orange-3));
   /**
    * @name 
    * @type color
@@ -811,7 +811,7 @@
    * @group warning
    * @description 浅/禁用
    */
-  --o-color-warning5-light: rgb(var(--o-orange-1));
+  --o-color-warning4-light: rgb(var(--o-orange-1));
   /**
    * @name 
    * @type color
@@ -839,7 +839,7 @@
    * @group danger
    * @description 禁用
    */
-  --o-color-danger5: rgb(var(--o-red-3));
+  --o-color-danger4: rgb(var(--o-red-3));
   /**
    * @name 
    * @type color
@@ -867,7 +867,7 @@
    * @group danger
    * @description 浅/禁用
    */
-  --o-color-danger5-light: rgb(var(--o-red-1));
+  --o-color-danger4-light: rgb(var(--o-red-1));
   /**
    * @name 阴影1
    * @type shadow
diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css
index 14b37e79..0f947c26 100644
--- a/packages/opendesign/src/components/style/default-light.token.css
+++ b/packages/opendesign/src/components/style/default-light.token.css
@@ -623,28 +623,28 @@
    * @group control
    * @description 浅/控件常规
    */
-  --o-color-control1-light: rgb(var(--o-mixedgray-2));
+  --o-color-control1-light: rgb(var(--o-mixedgray-3));
   /**
    * @name 
    * @type color
    * @group control
    * @description 浅/控件悬浮
    */
-  --o-color-control2-light: rgb(var(--o-mixedgray-3));
+  --o-color-control2-light: rgb(var(--o-mixedgray-4));
   /**
    * @name 
    * @type color
    * @group control
    * @description 浅/控件激活
    */
-  --o-color-control3-light: rgb(var(--o-mixedgray-4));
+  --o-color-control3-light: rgb(var(--o-mixedgray-5));
   /**
    * @name 
    * @type color
    * @group control
    * @description 浅/控件禁用
    */
-  --o-color-control4-light: rgb(var(--o-mixedgray-1));
+  --o-color-control4-light: rgb(var(--o-mixedgray-2));
   /**
    * @name 
    * @type color
@@ -700,7 +700,7 @@
    * @group primary
    * @description 浅/禁用
    */
-  --o-color-primary5-light: rgb(var(--o-blue-1));
+  --o-color-primary4-light: rgb(var(--o-blue-1));
   /**
    * @name 
    * @type color
@@ -728,7 +728,7 @@
    * @group success
    * @description 禁用
    */
-  --o-color-success5: rgb(var(--o-green-3));
+  --o-color-success4: rgb(var(--o-green-3));
   /**
    * @name 
    * @type color
@@ -756,7 +756,7 @@
    * @group success
    * @description 浅/禁用
    */
-  --o-color-success5-light: rgb(var(--o-green-1));
+  --o-color-success4-light: rgb(var(--o-green-1));
   /**
    * @name 
    * @type color
@@ -784,7 +784,7 @@
    * @group warning
    * @description 禁用
    */
-  --o-color-warning5: rgb(var(--o-orange-3));
+  --o-color-warning4: rgb(var(--o-orange-3));
   /**
    * @name 
    * @type color
@@ -812,7 +812,7 @@
    * @group warning
    * @description 浅/禁用
    */
-  --o-color-warning5-light: rgb(var(--o-orange-1));
+  --o-color-warning4-light: rgb(var(--o-orange-1));
   /**
    * @name 
    * @type color
@@ -840,7 +840,7 @@
    * @group danger
    * @description 禁用
    */
-  --o-color-danger5: rgb(var(--o-red-3));
+  --o-color-danger4: rgb(var(--o-red-3));
   /**
    * @name 
    * @type color
@@ -868,7 +868,7 @@
    * @group danger
    * @description 浅/禁用
    */
-  --o-color-danger5-light: rgb(var(--o-red-1));
+  --o-color-danger4-light: rgb(var(--o-red-1));
   /**
    * @name 阴影1
    * @type shadow
diff --git a/packages/opendesign/src/tokens/opendesign-token.json b/packages/opendesign/src/tokens/opendesign-token.json
index 41e529e1..74b6839e 100644
--- a/packages/opendesign/src/tokens/opendesign-token.json
+++ b/packages/opendesign/src/tokens/opendesign-token.json
@@ -782,32 +782,32 @@
         "key": "color-control1-light",
         "description": "浅/控件常规",
         "value": {
-          "light": "rgb(var(--o-mixedgray-2))",
-          "dark": "rgb(var(--o-mixedgray-2))"
+          "light": "rgb(var(--o-mixedgray-3))",
+          "dark": "rgb(var(--o-mixedgray-3))"
         }
       },
       {
         "key": "color-control2-light",
         "description": "浅/控件悬浮",
         "value": {
-          "light": "rgb(var(--o-mixedgray-3))",
-          "dark": "rgb(var(--o-mixedgray-3))"
+          "light": "rgb(var(--o-mixedgray-4))",
+          "dark": "rgb(var(--o-mixedgray-4))"
         }
       },
       {
         "key": "color-control3-light",
         "description": "浅/控件激活",
         "value": {
-          "light": "rgb(var(--o-mixedgray-4))",
-          "dark": "rgb(var(--o-mixedgray-4))"
+          "light": "rgb(var(--o-mixedgray-5))",
+          "dark": "rgb(var(--o-mixedgray-5))"
         }
       },
       {
         "key": "color-control4-light",
         "description": "浅/控件禁用",
         "value": {
-          "light": "rgb(var(--o-mixedgray-1))",
-          "dark": "rgb(var(--o-mixedgray-1))"
+          "light": "rgb(var(--o-mixedgray-2))",
+          "dark": "rgb(var(--o-mixedgray-2))"
         }
       }
     ]
@@ -874,7 +874,7 @@
         }
       },
       {
-        "key": "color-primary5-light",
+        "key": "color-primary4-light",
         "description": "浅/禁用",
         "value": {
           "light": "rgb(var(--o-blue-1))",
@@ -913,7 +913,7 @@
         }
       },
       {
-        "key": "color-success5",
+        "key": "color-success4",
         "description": "禁用",
         "value": {
           "light": "rgb(var(--o-green-3))",
@@ -945,7 +945,7 @@
         }
       },
       {
-        "key": "color-success5-light",
+        "key": "color-success4-light",
         "description": "浅/禁用",
         "value": {
           "light": "rgb(var(--o-green-1))",
@@ -984,7 +984,7 @@
         }
       },
       {
-        "key": "color-warning5",
+        "key": "color-warning4",
         "description": "禁用",
         "value": {
           "light": "rgb(var(--o-orange-3))",
@@ -1016,7 +1016,7 @@
         }
       },
       {
-        "key": "color-warning5-light",
+        "key": "color-warning4-light",
         "description": "浅/禁用",
         "value": {
           "light": "rgb(var(--o-orange-1))",
@@ -1055,7 +1055,7 @@
         }
       },
       {
-        "key": "color-danger5",
+        "key": "color-danger4",
         "description": "禁用",
         "value": {
           "light": "rgb(var(--o-red-3))",
@@ -1087,7 +1087,7 @@
         }
       },
       {
-        "key": "color-danger5-light",
+        "key": "color-danger4-light",
         "description": "浅/禁用",
         "value": {
           "light": "rgb(var(--o-red-1))",
diff --git a/packages/portal/src/style.scss b/packages/portal/src/style.scss
index aa50dfcc..7812ee8e 100644
--- a/packages/portal/src/style.scss
+++ b/packages/portal/src/style.scss
@@ -44,8 +44,20 @@ body {
   flex-wrap: wrap;
   gap: 8px;
 }
+.block {
+  padding: var(--o-gap-4);
+  border: 1px solid var(--o-color-control2-light);
+}
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 8px;
+}
 section {
-  border: 1px solid var(--o-color-control1-light);
+  border: 1px solid var(--o-color-control2-light);
   padding: var(--o-gap-4);
 
   h4 {
-- 
Gitee