diff --git a/packages/theme/src/color-picker/index.less b/packages/theme/src/color-picker/index.less
index 524840d7c2..2e3dbb22d3 100644
--- a/packages/theme/src/color-picker/index.less
+++ b/packages/theme/src/color-picker/index.less
@@ -13,7 +13,7 @@
     border-radius: var(--ti-color-picker-border-radius-sm);
     border: var(--ti-color-picker-border-weight) solid var(--ti-color-picker-border-color);
     box-sizing: content-box;
-    padding: var(--ti-color-picker-spacing);
+    padding: var(--ti-color-picker-padding-vertical) var(--ti-color-picker-padding-horizontal);
     cursor: pointer;
     .component-css-vars-colorpicker();
 
@@ -24,7 +24,7 @@
       align-items: center;
       justify-content: center;
       border-radius: var(--ti-color-picker-border-radius-sm);
-      background: var(--ti-color-picker-background);
+      background: var(--ti-color-picker-bg-color);
     }
 
     .@{colorPickerPrefix}__wrapper {
diff --git a/packages/theme/src/color-picker/vars.less b/packages/theme/src/color-picker/vars.less
index 63165731ec..0413db578e 100644
--- a/packages/theme/src/color-picker/vars.less
+++ b/packages/theme/src/color-picker/vars.less
@@ -1,14 +1,27 @@
 .component-css-vars-colorpicker() {
-  --ti-color-picker-background: var(--ti-common-color-transparent, transparent);
+  // 默认按钮背景色(hide)
+  --ti-color-picker-bg-color: var(--ti-common-color-transparent, transparent);
+  // 按钮边框色
   --ti-color-picker-border-color: var(--ti-base-color-common-2, #adb0b8);
+  // 按钮边框厚度
   --ti-color-picker-border-weight: var(--ti-common-border-weight-normal, 1px);
+  // 没用(hide)
   --ti-color-picker-border-radius-xs: var(--ti-common-border-radius-normal, 2px);
+  // 按钮边框圆角
   --ti-color-picker-border-radius-sm: var(--ti-common-border-radius-1, 4px);
+  // 没用(hide)
   --ti-color-picker-border-radius: var(--ti-common-border-radius-2, 8px);
-  --ti-color-picker-spacing: var(--ti-common-space-base, 4px);
+  // 按钮垂直内边距
+  --ti-color-picker-padding-vertical: var(--ti-common-space-base, 4px);
+  // 按钮水平内边距
+  --ti-color-picker-padding-horizontal: var(--ti-common-space-base, 4px);
+  // 没用(hide)
   --ti-color-picker-spacing-2x: var(--ti-common-space-2x, 8px);
+  // 没用(hide)
   --ti-color-picker-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
+  // 没用(hide)
   --ti-color-picker__select__wrapper-zindex: 1000;
+  // 没用(hide)
   --ti-color-picker__wrapper-bg: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
 
   // 超大尺寸高度
diff --git a/packages/theme/src/color-select-panel/index.less b/packages/theme/src/color-select-panel/index.less
index 9e58b7658f..e83128ca5a 100644
--- a/packages/theme/src/color-select-panel/index.less
+++ b/packages/theme/src/color-select-panel/index.less
@@ -9,10 +9,10 @@
     position: absolute;
     max-width: 300px;
     z-index: var(--ti-color-select-panel__wrapper-zindex);
-    background: var(--ti-color-select-panel__wrapper-bg);
+    background: var(--ti-color-select-panel__wrapper-bg-color);
     gap: var(--ti-color-select-panel-spacing);
-    padding: var(--ti-color-select-panel-spacing-2x);
-    box-shadow: var(--ti-color-select-panel-shadow);
+    padding: var(--ti-color-select-panel-padding-vertical) var(--ti-color-select-panel-padding-horizontal);
+    box-shadow: var(--ti-color-select-panel-box-shadow);
 
     &__tools {
       display: flex;
@@ -82,7 +82,7 @@
       width: 100%;
       height: 20px;
       border-radius: var(--ti-color-select-panel-border-radius-xs);
-      margin-top: var(--ti-color-select-panel-spacing-2x);
+      margin-top: var(--ti-color-select-panel-alpha-margin-top);
       &__slider {
         width: 100%;
         height: 100%;
diff --git a/packages/theme/src/color-select-panel/vars.less b/packages/theme/src/color-select-panel/vars.less
index d7e27bc37c..0c3291a423 100644
--- a/packages/theme/src/color-select-panel/vars.less
+++ b/packages/theme/src/color-select-panel/vars.less
@@ -1,13 +1,28 @@
 .component-css-vars-color-select-panel() {
-  --ti-color-select-panel-background: var(--ti-common-color-transparent, transparent);
+  // 弹出框背景色(hide)
+  --ti-color-select-panel-bg-color: var(--ti-common-color-transparent, transparent);
+  // 弹出框边框色(hide)
   --ti-color-select-panel-border-color: var(--ti-base-color-common-2, #adb0b8);
+  // 弹出框边框厚度(hide)
   --ti-color-select-panel-border-weight: var(--ti-common-border-weight-normal, 1px);
+  // 弹出框右侧色调框圆角
   --ti-color-select-panel-border-radius-xs: var(--ti-common-border-radius-normal, 2px);
+  // 历史记录展开框颜色块圆角
   --ti-color-select-panel-border-radius-sm: var(--ti-common-border-radius-1, 4px);
+  // 无用(hide)
   --ti-color-select-panel-border-radius: var(--ti-common-border-radius-2, 8px);
-  --ti-color-select-panel-spacing: var(--ti-common-space-base, 4px);
-  --ti-color-select-panel-spacing-2x: var(--ti-common-space-2x, 8px);
-  --ti-color-select-panel-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
+  // 弹出框各元素快间隙(hide)
+  --ti-color-select-panel-gap: var(--ti-common-space-base, 4px);
+  // 弹出框垂直内边距
+  --ti-color-select-panel-padding-vertical: var(--ti-common-space-2x, 8px);
+  // 弹出框水平内边距
+  --ti-color-select-panel-padding-horizontal: var(--ti-common-space-2x, 8px);
+  // alpha选择条上外边距
+  --ti-color-select-panel-alpha-margin-top: var(--ti-common-space-2x, 8px);
+  // 弹出框阴影
+  --ti-color-select-panel-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
+  // 弹出框元素层级(hide)
   --ti-color-select-panel__wrapper-zindex: 10;
-  --ti-color-select-panel__wrapper-bg: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
+  // 弹出框背景色
+  --ti-color-select-panel__wrapper-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
 }
\ No newline at end of file
diff --git a/packages/theme/src/date-panel/index.less b/packages/theme/src/date-panel/index.less
index 37af4cf54c..64fea28efa 100644
--- a/packages/theme/src/date-panel/index.less
+++ b/packages/theme/src/date-panel/index.less
@@ -87,7 +87,7 @@
 
   &__shortcut-selected[type='button'] {
     color: var(--ti-picker-panel-shortcut-selected-text-color);
-    background-color: var(--ti-picker-panel-shortcut-selected-background);
+    background-color: var(--ti-picker-panel-shortcut-selected-bg-color);
   }
 
   &__btn {
diff --git a/packages/theme/src/date-panel/vars.less b/packages/theme/src/date-panel/vars.less
index 992da654e8..e1f414a93b 100644
--- a/packages/theme/src/date-panel/vars.less
+++ b/packages/theme/src/date-panel/vars.less
@@ -25,6 +25,8 @@
   --ti-picker-panel-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
   --ti-picker-panel-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
   --ti-picker-panel-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+  // 无用(hide)
   --ti-picker-panel-shortcut-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
-  --ti-picker-panel-shortcut-selected-background: var(--ti-common-color-selected-background, #5e7ce0);
+  // 无用(hide)
+  --ti-picker-panel-shortcut-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
 }
diff --git a/packages/theme/src/date-table/vars.less b/packages/theme/src/date-table/vars.less
index d1077f2f9d..ad857da41f 100644
--- a/packages/theme/src/date-table/vars.less
+++ b/packages/theme/src/date-table/vars.less
@@ -20,6 +20,7 @@
   --ti-date-table-th-text-color: var(--ti-base-color-common-2, #adb0b8);
   --ti-date-table-td-border-radius: 0;
   --ti-date-table-td-pre-month-text-color: var(--ti-base-color-common-2, #adb0b8);
+  // 选中日期文本色
   --ti-date-table-td-normal-text-color: var(--ti-common-color-light, #fff);
   --ti-date-table-td-range-bg-color: #f2f6fc;
   --ti-date-table-td-today-border-color: var(--ti-base-color-brand-6, #5e7ce0);
diff --git a/packages/theme/src/divider/index.less b/packages/theme/src/divider/index.less
index 3f00e21957..8c93374c22 100644
--- a/packages/theme/src/divider/index.less
+++ b/packages/theme/src/divider/index.less
@@ -29,7 +29,7 @@
     font-size: 14px;
     font-weight: 500;
     color: var(--ti-divider-text-color);
-    background-color: var(--ti-divider-text-bg);
+    background-color: var(--ti-divider-text-bg-color);
 
     &.is-left {
       left: 20px;
diff --git a/packages/theme/src/divider/vars.less b/packages/theme/src/divider/vars.less
index 5ba3a5708f..967dc8b0f0 100644
--- a/packages/theme/src/divider/vars.less
+++ b/packages/theme/src/divider/vars.less
@@ -1,5 +1,8 @@
 .component-css-vars-divider() {
+  // 不开放(hide)
   --ti-divider-dividing-line: 1px solid var(--ti-common-color-border, #adb0b8);
-  --ti-divider-text-bg: var(--ti-base-color-bg-1, #ffffff);
+  // 文案背景色
+  --ti-divider-text-bg-color: var(--ti-base-color-bg-1, #ffffff);
+  // 文案文本色
   --ti-divider-text-color: var(--ti-common-color-text-primary, #252b3a);
 }
diff --git a/packages/theme/src/rich-text-editor/index.less b/packages/theme/src/rich-text-editor/index.less
index 41d46ebb1f..44e75db188 100644
--- a/packages/theme/src/rich-text-editor/index.less
+++ b/packages/theme/src/rich-text-editor/index.less
@@ -58,7 +58,7 @@
 
   &__toolbar {
     padding: 8px;
-    border: 1px solid var(--ti-rich-text-editor-box-outline-color);
+    border: 1px solid var(--ti-rich-text-editor-box-border-color);
   }
 
   &__toolbar button {
@@ -89,7 +89,7 @@
     }
 
     &:disabled {
-      color: var(--ti-rich-text-editor-button-disabled);
+      color: var(--ti-rich-text-editor-button-disabled-text-color);
       cursor: not-allowed;
 
       svg {
@@ -129,11 +129,11 @@
     .h-options {
       position: absolute;
       padding: .15rem;
-      background-color: var(--ti-rich-text-edito-options-bg-color);
+      background-color: var(--ti-rich-text-editor-options-bg-color);
       left: 0px;
       display: none;
-      border-radius: var(--ti-rich-text-edito-options-border-radius);
-      box-shadow: var(--ti-rich-text-edito-options-box-shadow);
+      border-radius: var(--ti-rich-text-editor-options-border-radius);
+      box-shadow: var(--ti-rich-text-editor-options-box-shadow);
       z-index: 999;
 
       button {
@@ -145,9 +145,9 @@
           fill: black;
         }
         &:hover {
-          background-color: var(--ti-rich-text-edito-options-item-bg-color);
+          background-color: var(--ti-rich-text-editor-options-item-bg-color);
           svg, path {
-            fill: var(--ti-rich-text-edito-options-item-hover-color);
+            fill: var(--ti-rich-text-editor-options-item-hover-color);
           }
         }
       }
@@ -292,11 +292,11 @@
     .line-height-options {
       position: absolute;
       padding: .15rem;
-      background-color: var(--ti-rich-text-edito-options-bg-color);
+      background-color: var(--ti-rich-text-editor-options-bg-color);
       left: 0px;
       display: none;
-      border-radius: var(--ti-rich-text-edito-options-border-radius);
-      box-shadow: var(--ti-rich-text-edito-options-box-shadow);
+      border-radius: var(--ti-rich-text-editor-options-border-radius);
+      box-shadow: var(--ti-rich-text-editor-options-box-shadow);
       z-index: 999;
 
       button {
@@ -305,8 +305,8 @@
         text-align: center;
         line-height: var(--ti-common-line-height-3);
         &:hover {
-          background-color: var(--ti-rich-text-edito-options-item-bg-color);
-          color: var(--ti-rich-text-edito-options-item-hover-color);
+          background-color: var(--ti-rich-text-editor-options-item-bg-color);
+          color: var(--ti-rich-text-editor-options-item-hover-color);
         }
       }
     }
@@ -340,9 +340,9 @@
     .font-size-options {
       display: none;
       position: absolute;
-      border-radius: var(--ti-rich-text-edito-options-border-radius);
-      background-color: var(--ti-rich-text-edito-options-bg-color);
-      box-shadow: var(--ti-rich-text-edito-options-box-shadow);
+      border-radius: var(--ti-rich-text-editor-options-border-radius);
+      background-color: var(--ti-rich-text-editor-options-bg-color);
+      box-shadow: var(--ti-rich-text-editor-options-box-shadow);
       z-index: 99;
 
       button {
@@ -351,14 +351,14 @@
         text-align: center;
         line-height: var(--ti-common-line-height-3);
         &:hover {
-          background-color: var(--ti-rich-text-edito-options-item-bg-color);
-          color: var(--ti-rich-text-edito-options-item-hover-color);
+          background-color: var(--ti-rich-text-editor-options-item-bg-color);
+          color: var(--ti-rich-text-editor-options-item-hover-color);
         }
       }
     }
 
     &:hover {
-      background-color: var(--ti-rich-text-edito-options-item-bg-color);
+      background-color: var(--ti-rich-text-editor-options-item-bg-color);
 
       .font-size-options {
         display: flex;
@@ -373,7 +373,7 @@
   overflow: auto;
   padding: 10px;
   height: 100%;
-  border: 1px solid var(--ti-rich-text-editor-box-outline-color);
+  border: 1px solid var(--ti-rich-text-editor-box-border-color);
   border-top: 0;
 
   &::-webkit-scrollbar {
diff --git a/packages/theme/src/rich-text-editor/vars.less b/packages/theme/src/rich-text-editor/vars.less
index ab25259877..7ef7aaf971 100644
--- a/packages/theme/src/rich-text-editor/vars.less
+++ b/packages/theme/src/rich-text-editor/vars.less
@@ -1,14 +1,26 @@
 .component-css-vars-rich-text-editor() {
-  --ti-rich-text-editor-box-outline-color: var(--ti-common-color-line-normal, #adb0b8);
+  // 边框色
+  --ti-rich-text-editor-box-border-color: var(--ti-common-color-line-normal, #adb0b8);
+  // 没用(hide)
   --ti-rich-text-editor-box-outline-hover-color: var(--ti-common-color-line-hover, #575d6c);
+  // 选中或悬浮头部图标色
   --ti-rich-text-editor-button-hover: var(--ti-common-color-icon-hover, #5e7ce0);
+  // 没用(hide)
   --ti-rich-text-editor-button-active: var(--ti-common-color-icon-active, #5e7ce0);
-  --ti-rich-text-editor-button-disabled: var(--ti-common-color-icon-disabled, #adb0b8);
+  // 没有效果(hide)
+  --ti-rich-text-editor-button-disabled-text-color: var(--ti-common-color-icon-disabled, #adb0b8);
+  // 没用(hide)
   --ti-rich-text-editor-poplist-item-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
+  // 没用(hide)
   --ti-rich-text-editor-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
-  --ti-rich-text-edito-options-bg-color: var(--ti-common-color-bg-white-normal, #fff);
-  --ti-rich-text-edito-options-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
-  --ti-rich-text-edito-options-border-radius: var(--ti-common-border-radius-normal, 2px);
-  --ti-rich-text-edito-options-item-padding: var(--ti-common-space-6, 6px) var(--ti-common-space-5x, 20px);
-  --ti-rich-text-edito-options-item-hover-color: var(--ti-common-color-icon-hover, #5e7ce0);
+  // 头部图标弹出下拉框背景色
+  --ti-rich-text-editor-options-bg-color: var(--ti-common-color-bg-white-normal, #fff);
+  // 头部图标弹出下拉框阴影
+  --ti-rich-text-editor-options-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
+  // 头部图标弹出下拉框圆角
+  --ti-rich-text-editor-options-border-radius: var(--ti-common-border-radius-normal, 2px);
+  // 没用(hide)
+  --ti-rich-text-editor-options-item-padding: var(--ti-common-space-6, 6px) var(--ti-common-space-5x, 20px);
+  // 头部图标弹出下拉框选项悬浮文本色
+  --ti-rich-text-editor-options-item-hover-color: var(--ti-common-color-icon-hover, #5e7ce0);
 }