diff --git a/packages/common/component/BlockDescription.vue b/packages/common/component/BlockDescription.vue
index 1d6fe295c..c4eb6774a 100644
--- a/packages/common/component/BlockDescription.vue
+++ b/packages/common/component/BlockDescription.vue
@@ -46,7 +46,7 @@ export default {
     border-radius: 4px;
     display: flex;
     align-items: center;
-    background-color: var(--te-common-bg-container);
+    background-color: var(--te-component-block-bg-color);
   }
 
   .setting-block {
@@ -54,6 +54,9 @@ export default {
     align-items: center;
     gap: 4px;
     cursor: pointer;
+    .svg-icon {
+      color: var(--te-component-common-block-add-text-color);
+    }
   }
 
   .svg-icon {
diff --git a/packages/common/component/BlockHistoryList.vue b/packages/common/component/BlockHistoryList.vue
index 8ca06d0e5..446fc2ce1 100644
--- a/packages/common/component/BlockHistoryList.vue
+++ b/packages/common/component/BlockHistoryList.vue
@@ -50,18 +50,18 @@ defineEmits(['preview', 'restore'])
   font-size: 12px;
   padding: 2px 8px;
   margin-left: 5px;
-  background-color: var(--te-common-bg-tag);
-  color: var(--te-common-color-success);
+  background-color: var(--te-component-block-history-list-tag-bg-color);
+  color: var(--te-component-block-history-list-tag-text-color);
   border-radius: var(--te-base-border-radius-1);
 }
 .operation-text {
-  color: var(--te-common-text-emphasize);
+  color: var(--te-component-common-text-color-emphasize);
   & + .operation-text {
     margin-left: 8px;
   }
 }
 
 .empty {
-  color: var(--te-common-text-weaken);
+  color: var(--te-component-common-text-color-weaken);
 }
 </style>
diff --git a/packages/common/component/BlockLinkEvent.vue b/packages/common/component/BlockLinkEvent.vue
index f502c1de5..5adbd8a43 100644
--- a/packages/common/component/BlockLinkEvent.vue
+++ b/packages/common/component/BlockLinkEvent.vue
@@ -1,11 +1,13 @@
 <template>
-  <tiny-popover popper-class="quick">
+  <tiny-popover popper-class="quick" :visible-arrow="false">
     <template #reference>
       <span class="link-icon">+</span>
     </template>
     <ul class="context-menu">
       <li v-if="isLinked" class="menu-item" @click="unLink(data.linkedEventName)">取消关联</li>
-      <li v-else class="menu-item" @click="addEvent(data)">+ 新建事件</li>
+      <li v-else class="menu-item add-event" @click="addEvent(data)">
+        <svg-icon name="plus-circle"></svg-icon> 新建事件
+      </li>
       <li class="menu-item" @click="openBlockSetting">管理事件</li>
       <li v-for="item in eventsList" :key="item.name" class="menu-item">
         {{ item.name }}
@@ -186,7 +188,7 @@ export default {
   color: #fff;
   border-radius: 50%;
   line-height: 14px;
-  background-color: var(--ti-lowcode-description-color);
+  background-color: var(--te-component-common-block-add-text-color);
   &:hover {
     cursor: pointer;
     transform: scale(1.3);
@@ -195,32 +197,29 @@ export default {
 
 .context-menu {
   width: 200px;
-  padding: 3px 0;
-  border: 1px solid var(--ti-lowcode-tabs-border-color);
-  border-radius: 3px;
-  background-color: var(--te-common-bg-container);
-  box-shadow: 0 1px 15px 0 rgb(0 0 0 / 20%);
   display: flex;
   flex-direction: column;
   .menu-item {
     font-size: 12px;
     display: flex;
     justify-content: space-between;
-    color: var(--te-common-text-secondary);
-    padding: 6px 15px;
-    &:not(:last-child) {
-      border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
-    }
+    color: var(--te-component-common-text-color-primary);
+    padding: 4px 16px;
+    margin: 0 -16px;
     &:hover {
-      color: var(--ti-lowcode-toolbar-icon-color);
-      background: var(--te-common-bg-container);
+      color: var(--te-component-common-text-color-primary);
+      background: var(--te-component-common-bg-color-hover);
     }
 
     .link-item {
       cursor: pointer;
-      background-color: var(--ti-lowcode-icon-bind-color);
+      background-color: var(--te-component-common-text-color-checked);
       padding: 2px 5px;
     }
+    &.add-event {
+      justify-content: start;
+      gap: 4px;
+    }
   }
 }
 </style>
diff --git a/packages/common/component/BlockLinkField.vue b/packages/common/component/BlockLinkField.vue
index 71d4235e9..fa592eb16 100644
--- a/packages/common/component/BlockLinkField.vue
+++ b/packages/common/component/BlockLinkField.vue
@@ -156,6 +156,7 @@ export default {
   top: 0;
   left: 0;
   transform: translate(-50%, -50%);
+  color: var(--te-component-common-block-add-text-color);
 
   .svg-icon {
     font-size: 14px;
@@ -188,21 +189,21 @@ export default {
   flex-direction: column;
   .menu-item {
     line-height: 18px;
-    color: var(--ti-lowcode-attr-popover-menu-item-color);
+    color: var(--te-component-common-text-color-primary);
     display: flex;
     align-items: center;
     gap: 4px;
     padding: 4px 12px;
     cursor: pointer;
     &:hover {
-      background: var(--ti-lowcode-attr-popover-menu-item-hover-bg-color);
+      background: var(--te-component-common-bg-color-hover);
     }
     &.property {
       justify-content: space-between;
     }
     .link-item {
       cursor: pointer;
-      color: var(--te-common-text-emphasize);
+      color: var(--te-component-common-text-color-emphasize);
     }
   }
 
diff --git a/packages/common/component/ButtonGroup.vue b/packages/common/component/ButtonGroup.vue
index f55498c36..87cec5bc2 100644
--- a/packages/common/component/ButtonGroup.vue
+++ b/packages/common/component/ButtonGroup.vue
@@ -26,7 +26,7 @@
     margin-left: 8px;
   }
   :deep(.tiny-button.tiny-button.tiny-button--default) {
-    border-color: var(--te-common-border-secondary);
+    border-color: var(--te-component-common-button-border-color);
   }
 }
 </style>
diff --git a/packages/common/component/CloseIcon.vue b/packages/common/component/CloseIcon.vue
index ee883ea00..dbe2413e2 100644
--- a/packages/common/component/CloseIcon.vue
+++ b/packages/common/component/CloseIcon.vue
@@ -29,7 +29,7 @@ export default {
 .icon-wrap {
   width: 24px;
   height: 24px;
-  color: var(--te-common-icon-primary);
+  color: var(--te-component-common-icon-color-primary);
   font-size: 16px;
   border-radius: 4px;
   cursor: pointer;
@@ -39,12 +39,12 @@ export default {
   transition: 0.3s;
 
   &:hover {
-    color: var(--te-common-icon-primary);
-    background-color: var(--te-common-bg-prompt);
+    color: var(--te-component-common-icon-color-primary);
+    background-color: var(--te-component-close-icon-bg-color-hover);
   }
   &.active {
-    color: var(--te-common-icon-primary);
-    background-color: var(--te-common-bg-prompt);
+    color: var(--te-component-common-icon-color-primary);
+    background-color: var(--te-component-close-icon-bg-color-active);
   }
 }
 </style>
diff --git a/packages/common/component/ConfigCollapse.vue b/packages/common/component/ConfigCollapse.vue
index 01e51fa0b..cf99132df 100644
--- a/packages/common/component/ConfigCollapse.vue
+++ b/packages/common/component/ConfigCollapse.vue
@@ -40,10 +40,10 @@ export default {
         transition: 0.3s;
 
         &:hover {
-          color: var(--te-common-icon-primary);
+          color: var(--te-component-common-icon-color-primary);
 
           svg {
-            color: var(--te-common-icon-primary);
+            color: var(--te-component-common-icon-color-primary);
           }
         }
       }
diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index ad50df1e0..6ab4a1d6c 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -523,11 +523,11 @@ export default {
     padding-bottom: 0;
   }
   &.active {
-    background: var(--ti-lowcode-meta-config-item-active-bg);
+    background: var(--te-component-common-bg-color-active);
   }
 
   .item-label {
-    color: var(--te-common-text-secondary);
+    color: var(--te-component-common-text-color-secondary);
     font-size: 12px;
     display: flex;
     line-height: 18px;
@@ -549,9 +549,9 @@ export default {
       overflow: hidden;
 
       .binding-state {
-        color: var(--ti-lowcode-meta-config-item-bind-color);
-        background: var(--ti-lowcode-meta-config-item-bind-bg);
-        border: 1px solid var(--ti-lowcode-meta-config-item-bind-border);
+        color: var(--te-component-common-text-color-emphasize);
+        background: var(--te-component-config-item-bind-bg-color);
+        border: 1px solid var(--te-component-config-item-bind-border-color);
         padding: 4px 12px;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -564,21 +564,21 @@ export default {
         :deep(.tiny-input .tiny-input__inner) {
           &,
           &:focus {
-            border-color: var(--ti-lowcode-input-error-color);
-            background-color: var(--ti-lowcode-input-error-bg);
+            border-color: var(--te-component-common-error-color);
+            background-color: var(--te-component-common-bg-color-error);
           }
         }
         :deep(.tiny-textarea__inner) {
           &,
           &:focus {
-            background-color: var(--ti-lowcode-input-error-bg);
+            background-color: var(--te-component-common-bg-color-error);
           }
         }
         :deep(.tiny-textarea) {
           &,
           &:focus {
-            border-color: var(--ti-lowcode-input-error-color);
-            background-color: var(--ti-lowcode-input-error-bg);
+            border-color: var(--te-component-common-error-color);
+            background-color: var(--te-component-common-bg-color-error);
           }
         }
       }
@@ -610,7 +610,7 @@ export default {
 
   .prop-description {
     margin-top: 8px;
-    color: var(--te-common-text-weaken);
+    color: var(--te-component-common-text-color-weaken);
   }
   .label-tip {
     padding: 2px 0;
@@ -635,8 +635,8 @@ export default {
       }
     }
     &.multiType {
-      border-bottom: 1px solid var(--ti-lowcode-toolbar-active-bg);
-      border-top: 1px solid var(--ti-lowcode-toolbar-active-bg);
+      border-bottom: 1px solid var(--te-component-common-border-color-transparent);
+      border-top: 1px solid var(--te-component-common-border-color-transparent);
     }
     &.auto {
       flex-wrap: wrap;
@@ -679,7 +679,7 @@ export default {
     display: flex;
     align-items: center;
     margin-top: 8px;
-    color: var(--te-common-color-error);
+    color: var(--te-component-common-error-color);
     font-size: 12px;
     .failure-icon {
       width: 16px;
@@ -693,7 +693,7 @@ export default {
 
 .error-tips-container {
   padding: 4px 6px;
-  color: var(--ti-lowcode-meta-config-item-error-tips-color);
+  color: var(--te-component-common-error-color);
   .error-icon {
     flex-shrink: 0;
   }
@@ -714,11 +714,11 @@ export default {
         font-size: 16px;
         font-weight: bold;
         margin-bottom: 8px;
-        color: var(--ti-lowcode-meta-config-item-label-tips-title-color);
+        color: var(--te-component-common-text-color-primary);
       }
       .prop-description {
         font-size: 12px;
-        color: var(--ti-lowcode-meta-config-item-label-tips-desc-color);
+        color: var(--te-component-common-text-color-secondary);
         line-height: 18px;
         display: -webkit-box;
         -webkit-box-orient: vertical;
diff --git a/packages/common/component/EmptyTip.vue b/packages/common/component/EmptyTip.vue
index 6b0351755..66b0d9099 100644
--- a/packages/common/component/EmptyTip.vue
+++ b/packages/common/component/EmptyTip.vue
@@ -33,12 +33,12 @@ export default {
 <style scoped lang="less">
 .tip {
   display: flex;
-  border: 1px solid var(--te-common-border-default);
-  border-left: 2px solid var(--te-common-color-success);
+  border: 1px solid var(--te-component-common-border-color);
+  border-left: 2px solid var(--te-component-empty-tip-border-color);
   border-radius: 0 4px 4px 0;
   align-items: center;
   padding: 8px 12px;
-  background-color: var(--te-common-bg-container);
+  background-color: var(--te-component-empty-tip-bg-color);
 
   .left {
     width: 20px;
@@ -52,9 +52,9 @@ export default {
   }
 }
 .waring {
-  border-left: 2px solid var(--te-common-color-warning);
+  border-left: 2px solid var(--te-component-common-warning-color);
 }
 .error {
-  border-left: 2px solid var(--te-common-color-error);
+  border-left: 2px solid var(--te-component-common-error-color);
 }
 </style>
diff --git a/packages/common/component/I18nInput.vue b/packages/common/component/I18nInput.vue
index 137fc3287..8c6a342b8 100644
--- a/packages/common/component/I18nInput.vue
+++ b/packages/common/component/I18nInput.vue
@@ -112,16 +112,6 @@ export default {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  .tiny-svg {
-    outline: none;
-    &:hover {
-      cursor: pointer;
-      color: var(--ti-lowcode-toolbar-icon-color);
-    }
-    &.isBind {
-      color: var(--ti-lowcode-icon-bind-color);
-    }
-  }
 }
 .popover-content {
   position: relative;
@@ -139,7 +129,15 @@ export default {
   }
 }
 .icon-language {
-  color: var(--te-common-icon-secondary);
+  color: var(--te-component-common-icon-color);
+  outline: none;
+  &:hover {
+    cursor: pointer;
+    color: var(--te-component-common-icon-color-hover);
+  }
+  &.isBind {
+    color: var(--te-component-common-icon-color-primary);
+  }
 }
 </style>
 
diff --git a/packages/common/component/LifeCycles.vue b/packages/common/component/LifeCycles.vue
index 5f56b10db..3edf0fab7 100644
--- a/packages/common/component/LifeCycles.vue
+++ b/packages/common/component/LifeCycles.vue
@@ -266,20 +266,15 @@ export default {
     outline: none;
   }
   .life-cycle-btn {
-    color: var(--ti-lowcode-meta-codeEditor-color);
-    border-color: var(--ti-lowcode-meta-codeEditor-border-color);
+    color: var(--te-component-common-text-color-primary);
+    border-color: var(--te-component-common-border-color);
     &:hover {
-      color: var(--ti-lowcode-meta-codeEditor-hover-color);
-      border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);
-    }
-    .icon-plus {
-      margin-right: 6px;
-      stroke: var(--ti-lowcode-meta-codeEditor-icon-color);
+      border-color: var(--te-component-common-border-color-hover);
     }
   }
 }
 .life-cycle-tips {
-  color: var(--ti-lowcode-life-cycle-alert-color);
+  color: var(--te-component-common-text-color-weaken);
   margin: 4px 0 0;
   height: 16px;
   line-height: 16px;
@@ -288,12 +283,12 @@ export default {
   margin-top: 12px;
 }
 .life-cycle-alert {
-  color: var(--ti-lowcode-life-cycle-alert-color);
+  color: var(--te-component-common-text-color-weaken);
   margin-left: 20px;
   margin-right: 20px;
 }
 .life-cycle-content-item {
-  color: var(--te-common-text-primary);
+  color: var(--te-component-common-text-color-primary);
 }
 .opt-button {
   &:last-child {
@@ -308,13 +303,13 @@ export default {
     line-height: 24px;
     cursor: pointer;
     &:hover {
-      background: var(--ti-lowcode-life-cycle-item-hover-bg);
+      background: var(--te-component-common-bg-color-hover);
     }
   }
   .existed {
     cursor: not-allowed;
     pointer-events: none;
-    color: var(--ti-lowcode-life-cycle-item-disable-color);
+    color: var(--te-component-common-text-color-disabled);
   }
 }
 
@@ -343,7 +338,7 @@ export default {
       transition: 0.3s;
 
       &.life-cycle-selected {
-        background: var(--ti-lowcode-life-cycle-item-hover-bg);
+        background: var(--te-component-common-bg-color-active);
       }
 
       .life-cycle-selected__icon {
@@ -355,7 +350,7 @@ export default {
       }
 
       &:hover {
-        background: var(--ti-lowcode-life-cycle-item-hover-bg);
+        background: var(--te-component-common-bg-color-hover);
       }
     }
   }
@@ -363,7 +358,7 @@ export default {
   .dialog-content-right {
     flex: 1;
     .life-cycle-editor {
-      border: 1px solid var(--ti-lowcode-life-cycle-editor-border);
+      border: 1px solid var(--te-component-common-border-color-divider);
       height: 100%;
       box-sizing: border-box;
     }
@@ -382,7 +377,7 @@ export default {
   align-items: center;
   width: 100%;
   .bind-dialog-text {
-    color: var(--te-common-text-primary);
+    color: var(--te-component-common-text-color-primary);
     font-size: var(--te-base-font-size-1);
   }
   .bind-dialog-btn {
diff --git a/packages/common/component/MaskModal.vue b/packages/common/component/MaskModal.vue
index 60052764e..dda90060c 100644
--- a/packages/common/component/MaskModal.vue
+++ b/packages/common/component/MaskModal.vue
@@ -34,7 +34,7 @@ export default {
   left: calc(100% - var(--base-right-panel-width));
   width: var(--base-right-panel-width);
   height: 100%;
-  background-color: var(--ti-lowcode-mask-modal-bg);
+  background-color: var(--te-component-mask-modal-bg-color);
   transition: background-color, 0.2s, ease-in-out;
   z-index: 9;
 }
diff --git a/packages/common/component/MetaChildItem.vue b/packages/common/component/MetaChildItem.vue
index f909cafbf..78720d025 100644
--- a/packages/common/component/MetaChildItem.vue
+++ b/packages/common/component/MetaChildItem.vue
@@ -90,7 +90,7 @@ export default {
 
 <style lang="less" scoped>
 .title {
-  color: var(--te-common-text-primary);
+  color: var(--te-component-common-text-color-primary);
   padding: 0 10px;
   font-weight: bold;
   margin-bottom: 16px;
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 946e07701..39abbc2fe 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -268,22 +268,22 @@ export default {
   display: flex;
   text-align: center;
   .tiny-button.tiny-button.edit-btn {
-    color: var(--te-common-text-primary);
-    border-color: var(--te-common-border-default);
+    color: var(--te-component-common-text-color-primary);
+    border-color: var(--te-component-common-border-color);
     flex: 1;
     text-align: center;
     margin-right: 0;
     &:hover {
-      border-color: var(--te-common-border-active);
+      border-color: var(--te-component-common-border-color-active);
     }
     &:focus {
-      border-color: var(--te-common-border-active);
+      border-color: var(--te-component-common-border-color-active);
     }
     .edit-btn-icon {
       font-size: 14px;
       margin-right: 4px;
       vertical-align: text-top;
-      color: var(--te-common-icon-secondary);
+      color: var(--te-component-common-icon-color);
     }
   }
 }
@@ -306,11 +306,11 @@ export default {
   padding: 4px;
   padding-left: 10px;
   padding-right: 12px;
-  border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color);
+  border: 1px solid var(--te-component-common-border-color);
   border-radius: var(--te-base-border-radius-1);
 
   &:hover {
-    border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);
+    border-color: var(--te-component-common-border-color-divider);
   }
 
   .text-content {
@@ -318,14 +318,14 @@ export default {
   }
 
   &.empty-color {
-    color: var(--te-common-text-weaken);
+    color: var(--te-component-common-text-color-weaken);
   }
 
   .edit-icon {
     margin-left: 4px;
     flex-shrink: 0;
     cursor: pointer;
-    color: var(--te-common-text-secondary);
+    color: var(--te-component-common-text-color-secondary);
   }
 }
 
@@ -349,10 +349,10 @@ export default {
     display: flex;
     height: 17px;
     margin-bottom: 10px;
-    color: var(--ti-lowcode-meta-code-editor-header-tips-container-color);
+    color: var(--te-component-common-text-color-primary);
 
     .header-tips-title {
-      color: var(--te-common-text-weaken);
+      color: var(--te-component-common-text-color-weaken);
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
@@ -381,14 +381,14 @@ export default {
 
       code {
         font-family: Microsoft YaHei, Microsoft YaHei-Normal;
-        color: var(--te-common-text-weaken);
+        color: var(--te-component-common-text-color-weaken);
       }
     }
   }
 
   .error-msg {
     margin-top: 8px;
-    color: var(--ti-lowcode-meta-code-editor-err-msg-color);
+    color: var(--te-component-common-error-color);
     font-weight: bold;
   }
 }
diff --git a/packages/common/component/MetaDescription.vue b/packages/common/component/MetaDescription.vue
index 56c4ed551..738133e1b 100644
--- a/packages/common/component/MetaDescription.vue
+++ b/packages/common/component/MetaDescription.vue
@@ -92,34 +92,33 @@ export default {
   padding-block: 4px;
   padding-inline: 11px 8px;
   width: auto;
-  color: var(--te-common-text-secondary);
-  background-color: var(--te-common-bg-container);
+  color: var(--te-component-common-text-color-secondary);
+  background-color: var(--te-component-meta-description-bg-color);
   box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.3);
   &.warning {
-    color: var(--te-common-color-warning);
+    color: var(--te-component-common-warning-color);
   }
   &.error {
-    color: var(--te-common-color-error);
+    color: var(--te-component-common-error-color);
   }
 
   &.border {
-    border-top: 1px solid var(--te-common-border-default);
-    border-right: 1px solid var(--te-common-border-default);
-    border-bottom: 1px solid var(--te-common-border-default);
+    border: 1px solid var(--te-component-common-border-color);
+    border-left: none;
   }
   .content {
-    color: var(--te-common-text-secondary);
+    color: var(--te-component-common-text-color-secondary);
   }
   .footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: var(--te-common-text-secondary);
+    color: var(--te-component-common-text-color-secondary);
     .footer-text {
       cursor: pointer;
       &.link {
         display: block;
-        color: var(--te-common-text-link);
+        color: var(--te-component-common-text-color-link);
         &:hover {
           text-decoration: underline;
         }
diff --git a/packages/common/component/MetaList.vue b/packages/common/component/MetaList.vue
index 2d724304e..e688d8696 100644
--- a/packages/common/component/MetaList.vue
+++ b/packages/common/component/MetaList.vue
@@ -21,7 +21,7 @@
 .options {
   width: 100%;
   .top {
-    color: var(--ti-lowcode-meta-list-top-color);
+    color: var(--te-component-common-text-color-secondary);
     overflow: hidden;
     .title {
       float: left;
@@ -30,7 +30,7 @@
     }
     .actions {
       float: right;
-      border: 1px solid var(--ti-lowcode-optionitem-border-color);
+      border: 1px solid var(--te-component-common-border-color);
       overflow: hidden;
       border-radius: 4px 4px 0 0;
     }
diff --git a/packages/common/component/MetaListActions.vue b/packages/common/component/MetaListActions.vue
index 04d56584f..acfd0d3b9 100644
--- a/packages/common/component/MetaListActions.vue
+++ b/packages/common/component/MetaListActions.vue
@@ -35,12 +35,12 @@ export default {
 .actionsItem {
   display: inline-block;
   padding: 5px 5px;
-  background-color: var(--te-common-bg-container);
+  background-color: var(--te-component-meta-list-action-bg-color);
   &:not(:last-child) {
-    border-right: 1px solid var(--ti-lowcode-optionitem-border-color);
+    border-right: 1px solid var(--te-component-common-border-color);
   }
   .tiny-svg {
-    color: var(--ti-lowcode-toolbar-icon-color);
+    color: var(--te-component-common-icon-color);
     font-size: 16px;
     &:hover {
       cursor: pointer;
diff --git a/packages/common/component/MetaListItem.vue b/packages/common/component/MetaListItem.vue
index fb32381b2..8d607fe4b 100644
--- a/packages/common/component/MetaListItem.vue
+++ b/packages/common/component/MetaListItem.vue
@@ -244,14 +244,14 @@ export default {
 
 <style lang="less" scoped>
 .item-content {
-  border: 1px solid var(--ti-lowcode-meta-list-item-border-color);
+  border: 1px solid var(--te-component-common-border-color-divider);
   border-left: none;
   border-right: none;
-  background: var(--ti-lowcode-meta-list-item-bg-color);
+  background: var(--te-component-common-bg-color);
   margin-bottom: -1px;
-  color: var(--te-common-text-primary);
+  color: var(--te-component-common-text-color-primary);
   &.active-item {
-    background-color: var(--te-common-bg-container);
+    background-color: var(--te-component-meta-list-item-bg-color);
   }
   .option-input {
     display: flex;
@@ -264,7 +264,7 @@ export default {
         margin-right: 5px;
         font-size: 12px;
         opacity: 0.4;
-        color: var(--te-common-text-primary);
+        color: var(--te-component-common-text-color-primary);
         &:hover {
           cursor: pointer;
           opacity: 1;
diff --git a/packages/common/component/MetaModal.vue b/packages/common/component/MetaModal.vue
index d44d05896..a19dab280 100644
--- a/packages/common/component/MetaModal.vue
+++ b/packages/common/component/MetaModal.vue
@@ -74,10 +74,10 @@ export default {
 
   .modal-content {
     padding: 8px;
-    color: var(--te-common-text-secondary);
-    border: 1px solid var(--ti-lowcode-tabs-border-color);
+    color: var(--te-component-common-text-color-secondary);
+    border: 1px solid var(--te-component-common-border-color);
     border-radius: 4px;
-    background-color: var(--ti-lowcode-toolbar-bg);
+    background-color: var(--te-component-meta-modal-bg-color);
     overflow: auto;
     max-height: 100%;
   }
diff --git a/packages/common/component/MetaModalItem.vue b/packages/common/component/MetaModalItem.vue
index f80ef3323..dda932328 100644
--- a/packages/common/component/MetaModalItem.vue
+++ b/packages/common/component/MetaModalItem.vue
@@ -114,8 +114,8 @@ export default {
     padding: 0 16px;
     margin: auto;
     border-radius: 4px;
-    border: 1px solid var(--ti-lowcode-tabs-border-color);
-    background-color: var(--ti-lowcode-toolbar-bg);
+    border: 1px solid var(--te-component-common-border-color);
+    background-color: var(--te-component-meta-modal-bg-color);
     box-shadow: rgb(0 0 0 / 30%) 0px 1px 15px 0px;
 
     .property-item-header {
@@ -123,7 +123,7 @@ export default {
       justify-content: space-between;
       align-items: center;
       padding: 10px 0;
-      color: var(--te-common-text-secondary);
+      color: var(--te-component-common-text-color-secondary);
 
       .header-title {
         font-size: 14px;
@@ -132,7 +132,7 @@ export default {
       .icon-wrap {
         width: 20px;
         height: 20px;
-        color: var(--ti-lowcode-text-color);
+        color: var(--te-component-common-icon-color);
         font-size: 16px;
         border-radius: 2px;
         cursor: pointer;
@@ -141,8 +141,8 @@ export default {
         align-items: center;
         transition: 0.3s;
         &:hover {
-          color: var(--ti-lowcode-toolbar-icon-color);
-          background: var(--ti-lowcode-icon-hover-bg);
+          color: var(--te-component-common-icon-color-hover);
+          background: var(--te-component-common-bg-color-hover);
         }
       }
     }
diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
index 7a7b57929..0b545ea37 100644
--- a/packages/common/component/MonacoEditor.vue
+++ b/packages/common/component/MonacoEditor.vue
@@ -160,7 +160,7 @@ export default {
   right: var(--base-right-panel-width);
   z-index: 100;
   padding: 10px 16px 16px 16px;
-  background-color: var(--te-common-bg-default);
+  background-color: var(--te-component-common-bg-color);
   height: auto !important;
 }
 
@@ -173,12 +173,12 @@ export default {
   .buttons {
     display: flex;
     gap: 8px;
-    color: var(--ti-lowcode-component-svg-button-color);
+    color: var(--te-component-common-text-color-primary);
     cursor: pointer;
   }
   #icon-buttons {
     :deep(.svg-icon) {
-      color: var(--te-common-icon-secondary);
+      color: var(--te-component-common-text-color-secondary);
     }
   }
   .monaco-btn-fullscreen {
@@ -195,7 +195,7 @@ export default {
 .editor {
   flex: 1;
   overflow: hidden;
-  border: 1px solid var(--ti-lowcode-state-management-monaco-editor-border-color);
+  border: 1px solid var(--te-component-common-border-color-hover);
   border-radius: 6px;
 }
 </style>
diff --git a/packages/common/component/MultiTypeSelector.vue b/packages/common/component/MultiTypeSelector.vue
index 665abec7d..ce25f0c54 100644
--- a/packages/common/component/MultiTypeSelector.vue
+++ b/packages/common/component/MultiTypeSelector.vue
@@ -130,7 +130,7 @@ export default {
     align-items: center;
   }
   .tiny-radio {
-    color: var(--ti-lowcode-toolbar-icon-color);
+    color: var(--te-component-common-icon-color);
   }
   .tiny-radio-group {
     width: 100%;
diff --git a/packages/common/component/PluginBlockItemImg.vue b/packages/common/component/PluginBlockItemImg.vue
index dbd9d61ed..f6e37f260 100644
--- a/packages/common/component/PluginBlockItemImg.vue
+++ b/packages/common/component/PluginBlockItemImg.vue
@@ -66,7 +66,7 @@ const handleCheck = (v) => {
   width: 100%;
   flex: 1;
   border-radius: 4px;
-  background-color: var(--ti-lowcode-component-block-list-item-active-bg);
+  background-color: var(--te-component-block-bg-color);
 
   .top-left {
     display: flex;
@@ -89,7 +89,7 @@ const handleCheck = (v) => {
 .item-default-img {
   width: 84px;
   height: 50px;
-  color: var(--te-common-bg-default);
+  color: var(--te-component-common-bg-color);
 }
 
 .block-item-small-list .item-image {
diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
index 13d8f2964..0d980067d 100644
--- a/packages/common/component/PluginBlockList.vue
+++ b/packages/common/component/PluginBlockList.vue
@@ -356,17 +356,17 @@ export default {
   max-width: 500px;
   max-height: 136px;
   padding: 12px;
-  background: var(--ti-lowcode-component-block-list-shortcut-bg);
+  background: var(--te-component-common-bg-color);
   border-radius: 5px;
-  border: 1px solid var(--te-common-border-default);
+  border: 1px solid var(--te-component-common-border-color);
   top: v-bind('state.top');
   .block-shortcut-title {
-    color: var(--ti-lowcode-component-block-list-shortcut-title-color);
+    color: var(--te-component-common-text-color-primary);
     font-weight: 600;
     margin-bottom: 8px;
   }
   .block-shortcut-description {
-    color: var(--ti-lowcode-component-block-list-item-color);
+    color: var(--te-component-common-text-color-secondary);
     margin-bottom: 20px;
     font-size: 12px;
   }
@@ -384,8 +384,8 @@ export default {
   display: flex;
   align-items: center;
   height: 24px;
-  background-color: var(--te-common-bg-container);
-  color: var(--te-common-text-secondary);
+  background-color: var(--te-component-block-bg-color);
+  color: var(--te-component-common-text-color-secondary);
   position: sticky;
   top: 0;
   z-index: 100;
@@ -404,7 +404,7 @@ export default {
     transform: translateY(-50%);
     width: 1px;
     height: 10px;
-    background-color: var(--te-common-border-default);
+    background-color: var(--te-component-common-border-color);
   }
 }
 
@@ -437,7 +437,7 @@ export default {
   gap: 12px;
   overflow-y: auto;
   overflow-x: hidden;
-  color: var(--te-common-text-secondary);
+  color: var(--te-component-common-text-color-secondary);
 
   .block-item {
     display: flex;
@@ -456,9 +456,9 @@ export default {
       top: 4px;
       text-align: center;
       display: block;
-      color: var(--te-common-text-primary);
+      color: var(--te-component-common-text-color-primary);
       font-size: 12px;
-      background-color: var(--te-common-bg-prompt);
+      background-color: var(--te-component-block-publish-flag-bg-color);
       padding: 2px 4px;
       border-radius: 2px;
       transform: scale(0.9);
@@ -466,7 +466,7 @@ export default {
     }
 
     &.block-item-small-list {
-      color: var(--te-common-text-primary);
+      color: var(--te-component-common-text-color-primary);
       gap: 0;
       &:deep(.block-item-img) {
         width: 54px;
@@ -488,7 +488,7 @@ export default {
         z-index: 9;
       }
       &:hover {
-        background-color: var(--te-common-bg-container);
+        background-color: var(--te-component-common-bg-color-hover);
       }
     }
     &:nth-child(even) {
@@ -511,7 +511,7 @@ export default {
     }
 
     &.is-active {
-      background: var(--ti-lowcode-component-block-list-item-active-bg);
+      background: var(--te-component-common-bg-color-active);
     }
 
     &.is-disabled {
@@ -541,7 +541,7 @@ export default {
         align-items: center;
         width: 100%;
         height: 86px;
-        border: 1px dashed var(--te-common-border-hover);
+        border: 1px dashed var(--te-component-common-border-color-hover);
         border-radius: 4px;
       }
       .item-text {
@@ -549,23 +549,23 @@ export default {
       }
       .svg-icon {
         font-size: 24px;
-        color: var(--ti-lowcode-component-svg-button-color);
+        color: var(--te-component-common-text-color-primary);
       }
 
       &:hover {
         cursor: pointer;
-        color: var(--ti-lowcode-component-svg-button-hover-color);
+        color: var(--te-component-common-text-color-primary);
       }
     }
 
     .item-default-img {
       width: 84px;
       height: 50px;
-      color: var(--te-common-bg-default);
+      color: var(--te-component-common-bg-color);
     }
 
     .item-text {
-      color: var(--te-common-text-secondary);
+      color: var(--te-component-common-text-color-secondary);
       text-align: center;
       font-size: 12px;
       line-height: 1.5;
@@ -597,18 +597,6 @@ export default {
       top: 0;
     }
   }
-  .deploy {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    width: 114px;
-    color: var(--ti-lowcode-toolbar-icon-color);
-    font-weight: bold;
-    vertical-align: middle;
-    text-align: center;
-    margin: -10px -11px;
-    padding: 40px 10px;
-  }
 
   .loading {
     animation-duration: 5s;
@@ -698,7 +686,7 @@ export default {
         line-height: 16px;
       }
       .item-description {
-        color: var(--ti-lowcode-toolbar-title-color);
+        color: var(--te-component-common-text-color-primary);
         font-size: 12px;
       }
     }
@@ -717,7 +705,7 @@ export default {
 }
 .setting-menu {
   font-size: 12px;
-  color: var(--ti-lowcode-component-block-setting-item-text-color);
+  color: var(--te-component-common-text-color-primary);
   .list {
     display: flex;
   }
@@ -725,25 +713,12 @@ export default {
     box-sizing: border-box;
     cursor: pointer;
     &:hover {
-      color: var(--te-common-text-primary);
+      color: var(--te-component-common-text-color-primary);
     }
     .list-item-icon {
       font-size: 14px;
-      color: var(--te-common-icon-secondary);
+      color: var(--te-component-common-icon-color);
     }
   }
 }
 </style>
-
-<style lang="less">
-.tiny-popover.tiny-popper.popper-options.block-setting-popover {
-  background-color: var(--ti-lowcode-component-block-setting-popover-bg);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  .popper__arrow,
-  .popper__arrow::after {
-    border-bottom-color: var(--ti-lowcode-component-block-setting-popover-bg);
-  }
-}
-</style>
diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
index c0f444f6a..35da8bfbf 100644
--- a/packages/common/component/PluginPanel.vue
+++ b/packages/common/component/PluginPanel.vue
@@ -73,7 +73,7 @@ export default {
 .plugin-panel {
   width: 100%;
   height: 100%;
-  background: var(--te-common-bg-default);
+  background: var(--te-component-common-bg-color);
   display: flex;
   flex-direction: column;
   position: relative;
@@ -83,12 +83,11 @@ export default {
     justify-content: space-between;
     align-items: center;
     font-size: 12px;
-    font-weight: var(--ti-lowcode-plugin-panel-title-font-weight);
     font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
       'Helvetica Neue', sans-serif;
     padding: 12px;
-    color: var(--ti-lowcode-plugin-panel-title-color);
-    font-weight: var(--ti-lowcode-plugin-panel-title-font-weight);
+    color: var(--te-component-common-text-color-primary);
+    font-weight: var(--te-base-font-weight-7);
     .plugin-panel-title {
       display: flex;
       align-items: center;
diff --git a/packages/common/component/PluginSetting.vue b/packages/common/component/PluginSetting.vue
index 463c8ec12..b225c2e48 100644
--- a/packages/common/component/PluginSetting.vue
+++ b/packages/common/component/PluginSetting.vue
@@ -128,12 +128,12 @@ export default {
   top: 0;
   width: var(--base-collection-panel-width);
   height: 100%;
-  border-right: 1px solid var(--te-common-border-default);
-  background: var(--te-common-bg-default);
+  border-right: 1px solid var(--te-component-common-border-color);
+  background: var(--te-component-common-bg-color);
   overflow: hidden;
-  border-left: 1px solid var(--ti-lowcode-plugin-panel-header-border-bottom-color);
+  border-left: 1px solid var(--te-component-common-border-color-divider);
   &:not(.second-panel) {
-    box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3);
+    box-shadow: 6px 0px 3px 0px var(--te-component-common-shadow-color);
     border-right: none;
     border-left: none;
   }
@@ -146,13 +146,6 @@ export default {
     z-index: 1;
   }
 
-  .full-screen-label {
-    margin: 0 8px 0 4px;
-    color: var(--ti-common-color-text-weaken);
-    font-size: 12px;
-    line-height: 12px;
-  }
-
   .cursor {
     margin-left: 8px;
     cursor: pointer;
@@ -171,9 +164,9 @@ export default {
     line-height: 40px;
     font-size: 14px;
     line-height: 18px;
-    color: var(--ti-lowcode-plugin-panel-title-color);
+    color: var(--te-component-common-text-color-primary);
     padding: 0 12px;
-    border-bottom: 1px solid var(--ti-lowcode-plugin-panel-header-border-bottom-color);
+    border-bottom: 1px solid var(--te-component-common-border-color-divider);
     .plugin-setting-header-title {
       font-size: 12px;
       font-weight: 700;
diff --git a/packages/common/component/SearchEmpty.vue b/packages/common/component/SearchEmpty.vue
index a7eaa6232..01e1cc4e8 100644
--- a/packages/common/component/SearchEmpty.vue
+++ b/packages/common/component/SearchEmpty.vue
@@ -29,7 +29,7 @@ export default {
   }
   .empty-text {
     font-size: 12px;
-    color: var(--te-common-text-weaken);
+    color: var(--te-component-common-text-color-weaken);
   }
 }
 </style>
diff --git a/packages/common/component/SvgButton.vue b/packages/common/component/SvgButton.vue
index 0ba31e0d0..f2afff29e 100644
--- a/packages/common/component/SvgButton.vue
+++ b/packages/common/component/SvgButton.vue
@@ -55,7 +55,7 @@ export default {
   width: 24px;
   height: 24px;
   font-size: 16px;
-  color: var(--te-common-icon-secondary);
+  color: var(--te-component-common-icon-color);
   border: 1px solid transparent;
   border-radius: 4px;
   display: inline-flex;
@@ -63,10 +63,10 @@ export default {
   align-items: center;
   cursor: pointer;
   &:hover {
-    color: var(--te-common-icon-hover);
+    color: var(--te-component-common-icon-color-hover);
   }
   &.active {
-    color: var(--te-common-icon-hover);
+    color: var(--te-component-common-icon-color-hover);
   }
 
   .svg-icon {
@@ -74,14 +74,14 @@ export default {
   }
 }
 .svg-button-hover {
-  color: var(--te-common-icon-primary);
+  color: var(--te-component-common-icon-color-primary);
   &:hover {
-    color: var(--te-common-icon-primary);
-    background-color: var(--te-common-bg-prompt);
+    color: var(--te-component-common-icon-color-primary);
+    background-color: var(--te-component-svg-button-bg-color-hover);
   }
   &.active {
-    color: var(--te-common-icon-primary);
-    background-color: var(--te-common-bg-prompt);
+    color: var(--te-component-common-icon-color-primary);
+    background-color: var(--te-component-svg-button-bg-color-active);
   }
 }
 </style>
diff --git a/packages/common/component/ToolbarBase.vue b/packages/common/component/ToolbarBase.vue
index 1272cb4d8..cd98916a1 100644
--- a/packages/common/component/ToolbarBase.vue
+++ b/packages/common/component/ToolbarBase.vue
@@ -67,7 +67,7 @@ export default {
 </script>
 <style scoped>
 .split-line {
-  color: var(--te-common-border-default);
+  color: var(--te-component-common-border-color);
   margin: 0 4px;
   font-size: 14px;
 }
diff --git a/packages/common/component/VideoGuide.vue b/packages/common/component/VideoGuide.vue
index fbeac0876..e689ce081 100644
--- a/packages/common/component/VideoGuide.vue
+++ b/packages/common/component/VideoGuide.vue
@@ -50,10 +50,10 @@ export default {
 
 <style lang="less" scoped>
 .block-guide {
-  color: var(--te-common-text-secondary);
+  color: var(--te-component-common-text-color-secondary);
   line-height: 2;
   border: none;
-  border-color: var(--ti-lowcode-block-video-tip-color);
+  border-color: var(--te-component-common-text-color-link);
   margin-bottom: 20px;
   .guide-video {
     width: 250px;
diff --git a/packages/common/component/toolbar-built-in/ToolbarBaseButton.vue b/packages/common/component/toolbar-built-in/ToolbarBaseButton.vue
index dc4359b8a..6c6b88042 100644
--- a/packages/common/component/toolbar-built-in/ToolbarBaseButton.vue
+++ b/packages/common/component/toolbar-built-in/ToolbarBaseButton.vue
@@ -33,7 +33,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .toolbar-button {
-  background-color: var(--te-common-bg-prompt) !important;
+  background-color: var(--te-component-toolbar-base-button-bg-color) !important;
   border: none !important;
   min-width: 70px;
   height: 26px;
@@ -50,14 +50,14 @@ export default {
     position: absolute;
     width: 6px;
     height: 6px;
-    background: var(--ti-lowcode-toolbar-dot-color);
+    background: var(--te-component-common-error-color);
     border-radius: 50%;
     top: -3px;
     right: 2px;
     z-index: 100;
   }
   .svg-icon.svg-icon.svg-icon {
-    color: var(--te-common-icon-primary);
+    color: var(--te-component-common-icon-color-primary);
   }
 }
 </style>
diff --git a/packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue b/packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue
index 2404f3903..1d7edef7e 100644
--- a/packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue
+++ b/packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue
@@ -44,7 +44,7 @@ export default {
 .dots {
   width: 6px;
   height: 6px;
-  background: var(--ti-lowcode-toolbar-dot-color);
+  background: var(--te-component-common-error-color);
   border-radius: 50%;
   display: inline-block;
   position: absolute;
diff --git a/packages/common/index.js b/packages/common/index.js
index 9b8430169..b84602c27 100644
--- a/packages/common/index.js
+++ b/packages/common/index.js
@@ -11,6 +11,7 @@
  */
 
 import './i18n'
+import './styles/vars.less'
 
 export * from './component'
 export * from './composable'
diff --git a/packages/common/styles/vars.less b/packages/common/styles/vars.less
new file mode 100644
index 000000000..2a0f2c014
--- /dev/null
+++ b/packages/common/styles/vars.less
@@ -0,0 +1,61 @@
+:root {
+  --te-component-common-text-color-primary: var(--te-common-text-primary);
+  --te-component-common-text-color-secondary: var(--te-common-text-secondary);
+  --te-component-common-text-color-weaken: var(--te-common-text-weaken);
+  --te-component-common-text-color-disabled: var(--te-common-text-disabled);
+  --te-component-common-text-color-checked: var(--te-common-text-checked);
+  --te-component-common-text-color-link: var(--te-common-text-link);
+  --te-component-common-text-color-emphasize: var(--te-common-text-emphasize);
+  --te-component-common-block-add-text-color: var(--te-common-text-purple);
+
+  --te-component-common-icon-color-primary: var(--te-common-icon-primary);
+  --te-component-common-icon-color: var(--te-common-icon-secondary);
+  --te-component-common-icon-color-hover: var(--te-common-icon-hover);
+  --te-component-common-icon-color-link: var(--te-common-icon-link);
+
+  --te-component-common-bg-color: var(--te-common-bg-default);
+  --te-component-common-bg-color-active: var(--te-common-bg-container);
+  --te-component-common-bg-color-hover: var(--te-common-bg-container);
+  --te-component-common-bg-color-error: var(--te-common-bg-error);
+
+  --te-component-common-error-color: var(--te-common-color-error);
+  --te-component-common-warning-color: var(--te-common-color-warning);
+
+  --te-component-common-border-color-divider: var(--te-common-border-divider);
+  --te-component-common-border-color: var(--te-common-border-default);
+  --te-component-common-border-color-hover: var(--te-common-border-hover);
+  --te-component-common-border-color-active: var(--te-common-border-active);
+  --te-component-common-border-color-transparent: var(--te-base-color-transparent); // 透明色直接使用base的变量
+  --te-component-common-button-border-color: var(--te-common-border-secondary);
+
+  --te-component-common-shadow-color: var(--te-common-shadow-panel);
+
+  --te-component-config-item-bind-bg-color: var(--te-common-bg-info);
+  --te-component-config-item-bind-border-color: var(--te-common-border-info);
+
+  --te-component-block-history-list-tag-bg-color: var(--te-common-bg-tag);
+  --te-component-block-history-list-tag-text-color: var(--te-common-color-success);
+  --te-component-block-bg-color: var(--te-common-bg-container);
+  --te-component-block-publish-flag-bg-color: var(--te-common-bg-prompt);
+
+  --te-component-close-icon-bg-color-active: var(--te-common-bg-prompt);
+  --te-component-close-icon-bg-color-hover: var(--te-common-bg-prompt);
+
+  --te-component-empty-tip-bg-color: var(--te-common-bg-container);
+  --te-component-empty-tip-border-color: var(--te-common-color-success);
+
+  --te-component-meta-description-bg-color: var(--te-common-bg-container);
+
+  --te-component-meta-list-action-bg-color: var(--te-common-bg-container);
+
+  --te-component-mask-modal-bg-color: var(--te-common-mask);
+
+  --te-component-meta-list-item-bg-color: var(--te-common-bg-container);
+
+  --te-component-meta-modal-bg-color: var(--te-common-bg-container-weaken);
+
+  --te-component-svg-button-bg-color-active: var(--te-common-bg-prompt);
+  --te-component-svg-button-bg-color-hover: var(--te-common-bg-prompt);
+
+  --te-component-toolbar-base-button-bg-color: var(--te-common-bg-prompt);
+}
diff --git a/packages/design-core/assets/block-add-prop.svg b/packages/design-core/assets/block-add-prop.svg
index a5915a9d4..82bf61e37 100644
--- a/packages/design-core/assets/block-add-prop.svg
+++ b/packages/design-core/assets/block-add-prop.svg
@@ -4,7 +4,7 @@
 	 viewBox="0 0 132 132" style="enable-background:new 0 0 132 132;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;}
-	.st1{fill:#6E51E0;}
+	.st1{fill:currentColor;}
 	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
 </style>
 <rect id="size" class="st0" width="132" height="132"/>
diff --git a/packages/design-core/assets/block-bind-prop.svg b/packages/design-core/assets/block-bind-prop.svg
index c0556885d..e36a0e97e 100644
--- a/packages/design-core/assets/block-bind-prop.svg
+++ b/packages/design-core/assets/block-bind-prop.svg
@@ -4,7 +4,7 @@
 	 viewBox="0 0 132 132" style="enable-background:new 0 0 132 132;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;}
-	.st1{fill:#6E51E0;}
+	.st1{fill:currentColor;}
 	.st2{fill:#FFFFFF;}
 </style>
 <rect id="size" class="st0" width="132" height="132"/>
diff --git a/packages/layout/index.js b/packages/layout/index.js
index 347c1f381..448d55f20 100644
--- a/packages/layout/index.js
+++ b/packages/layout/index.js
@@ -3,6 +3,7 @@ import metaData from './meta'
 import { LayoutService } from './src/composable'
 import designSmbConfig from '@opentiny/vue-design-smb'
 import { ConfigProvider as TinyConfigProvider } from '@opentiny/vue'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,
diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
index 185bfc8f1..c2f2914f2 100644
--- a/packages/layout/src/DesignPlugins.vue
+++ b/packages/layout/src/DesignPlugins.vue
@@ -200,8 +200,8 @@ export default {
 #tiny-engine-left-panel {
   width: var(--base-left-panel-width);
   height: calc(100vh - var(--base-top-panel-height));
-  border-right: 1px solid var(--ti-lowcode-plugin-panel-border-right-color);
-  background: var(--te-common-bg-default);
+  border-right: 1px solid var(--te-layout-common-border-color);
+  background: var(--te-layout-common-bg-color);
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -239,10 +239,10 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background: var(--te-common-bg-default);
+  background: var(--te-layout-common-bg-color);
   box-sizing: border-box;
   z-index: 1000;
-  border-right: 1px solid var(--ti-lowcode-plugin-panel-border-right-color);
+  border-right: 1px solid var(--te-layout-common-border-color);
 
   &.completed {
     display: block;
@@ -276,7 +276,7 @@ export default {
       &:hover,
       &.active {
         .item-icon {
-          background: var(--ti-lowcode-left-panel-active-bg);
+          background: var(--te-layout-common-bg-color-hover);
           border-radius: 4px;
         }
       }
@@ -285,12 +285,12 @@ export default {
         position: relative;
 
         .item-icon {
-          color: var(--te-common-text-checked);
+          color: var(--te-layout-common-text-color-secondary-checked);
         }
       }
 
       &.prev {
-        border-bottom-color: var(--ti-lowcode-left-panel-active-border-color);
+        border-bottom-color: var(--te-layout-common-border-color);
       }
     }
 
@@ -298,7 +298,7 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
-      color: var(--ti-lowcode-design-plugin-color);
+      color: var(--te-layout-common-text-color);
       font-size: 22px;
       width: 26px;
       height: 26px;
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 2fb7e1473..63621184e 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -57,16 +57,16 @@ export default {
   height: 100%;
   transition: 0.3s linear;
   position: relative;
-  border-left: 1px solid var(--ti-lowcode-plugin-setting-panel-border-left-color);
+  border-left: 1px solid var(--te-layout-common-border-color);
   padding-top: 12px;
-  background-color: var(--ti-lowcode-setting-panel-bg-color);
+  background-color: var(--te-layout-common-bg-color);
 
   .tabs-setting {
     position: absolute;
     top: 9px;
     right: 18px;
     line-height: 26px;
-    color: var(--te-common-icon-secondary);
+    color: var(--te-layout-common-icon-color);
     cursor: pointer;
   }
   .tiny-tabs {
@@ -77,13 +77,13 @@ export default {
     flex-direction: column;
     .tiny-tabs__header .tiny-tabs__nav {
       width: 60%;
-      background-color: var(--te-common-bg-default);
+      background-color: var(--te-layout-common-bg-color);
     }
     .tiny-tabs__nav-scroll {
       margin-left: 12px;
       .tiny-tabs__active-bar {
         height: 3px;
-        background-color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color);
+        background-color: var(--te-layout-common-text-color-active);
       }
     }
 
@@ -98,14 +98,14 @@ export default {
     }
     .tiny-tabs__item {
       flex: 1;
-      background-color: var(--ti-lowcode-setting-panel-bg-color);
-      color: var(--ti-lowcode-setting-panel-tabs-item-title-color);
+      background-color: var(--te-layout-common-bg-color);
+      color: var(--te-layout-common-text-color-secondary);
       margin-right: 5px;
       &:hover {
-        color: var(--ti-lowcode-setting-panel-tabs-item-title-hover-color);
+        color: var(--te-layout-common-text-color-hover);
       }
       &.is-active {
-        color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color);
+        color: var(--te-layout-common-text-color-active);
         border: none;
       }
 
@@ -135,10 +135,10 @@ export default {
 
 @keyframes glow {
   0% {
-    box-shadow: inset 0px 0px 4px var(--ti-lowcode-canvas-handle-hover-bg);
+    box-shadow: inset 0px 0px 4px var(--te-layout-setting-bg-color-hover);
   }
   100% {
-    box-shadow: inset 0px 0px 14px var(--ti-lowcode-canvas-handle-hover-bg);
+    box-shadow: inset 0px 0px 14px var(--te-layout-setting-bg-color-hover);
   }
 }
 </style>
diff --git a/packages/layout/src/DesignToolbars.vue b/packages/layout/src/DesignToolbars.vue
index 2fde3847a..c9e1fb09a 100644
--- a/packages/layout/src/DesignToolbars.vue
+++ b/packages/layout/src/DesignToolbars.vue
@@ -79,10 +79,10 @@ export default {
   width: 100%;
   height: var(--base-top-panel-height);
   text-align: center;
-  background-color: var(--te-common-bg-default);
+  background-color: var(--te-layout-common-bg-color);
   position: relative;
   z-index: 1001;
-  border-bottom: 1px solid var(--ti-lowcode-toolbar-border-bottom-color);
+  border-bottom: 1px solid var(--te-layout-common-border-color);
 
   .toolbar-left,
   .toolbar-center,
@@ -109,7 +109,7 @@ export default {
       svg {
         cursor: pointer;
         font-size: 20px;
-        color: var(--ti-lowcode-toolbar-title-color);
+        color: var(--te-layout-common-text-color);
       }
     }
   }
@@ -117,12 +117,12 @@ export default {
   .toolbar-left {
     margin: 0 1px;
     :deep(.icon) {
-      background: var(--ti-lowcode-toolbar-view-active-bg);
+      background: var(--te-layout-common-active-bg);
       svg {
         font-size: 16px;
       }
       &:not(.disabled):hover {
-        background: var(--ti-lowcode-toolbar-left-icon-bg-hover);
+        background: var(--te-layout-common-icon-bg-color-hover);
       }
     }
   }
@@ -134,10 +134,10 @@ export default {
     :deep(.icon) {
       margin-right: 0;
       &:not(.disabled):hover {
-        background: var(--ti-lowcode-toolbar-view-active-bg);
+        background: var(--te-layout-common-active-bg);
       }
       &.active {
-        color: var(--te-common-text-checked);
+        color: var(--te-layout-common-text-color-secondary-checked);
       }
       &.disabled {
         cursor: not-allowed;
@@ -160,7 +160,7 @@ export default {
     }
 
     .toolbar-right-line {
-      color: var(--ti-lowcode-toolbar-right-line);
+      color: var(--te-layout-common-border-color);
       margin: 0 6px;
     }
     .tiny-locales {
@@ -171,7 +171,7 @@ export default {
       justify-content: center;
       align-items: center;
       :deep(span) {
-        color: var(--ti-lowcode-toolbar-icon-color);
+        color: var(--te-layout-common-text-color-secondary);
         opacity: 0.4;
       }
 
diff --git a/packages/layout/src/ToolbarCollapse.vue b/packages/layout/src/ToolbarCollapse.vue
index b38daef1e..c12dc7cf9 100644
--- a/packages/layout/src/ToolbarCollapse.vue
+++ b/packages/layout/src/ToolbarCollapse.vue
@@ -58,7 +58,7 @@ export default {
   margin-left: 4px;
 
   &:hover {
-    background: var(--ti-lowcode-toolbar-view-active-bg);
+    background: var(--te-layout-common-active-bg);
   }
 }
 
@@ -73,19 +73,19 @@ export default {
       padding: 0 16px;
 
       &:hover {
-        background-color: var(--ti-lowcode-toolbar-ellipsis-hover-bg);
+        background-color: var(--te-layout-common-bg-color-hover);
         cursor: pointer;
       }
     }
 
     .empty-line {
       margin: 4px 0px;
-      border-top: 1px solid var(--te-common-bg-container);
+      border-top: 1px solid var(--te-layout-common-border-color);
     }
 
     .icon-hides {
       margin-right: 8px;
-      color: var(--te-common-icon-primary);
+      color: var(--te-layout-common-icon-color-primary);
     }
   }
 }
diff --git a/packages/layout/src/styles/vars.less b/packages/layout/src/styles/vars.less
new file mode 100644
index 000000000..084b6bbcb
--- /dev/null
+++ b/packages/layout/src/styles/vars.less
@@ -0,0 +1,16 @@
+:root {
+  --te-layout-common-border-color: var(--te-common-border-divider);
+  --te-layout-common-bg-color: var(--te-common-bg-default);
+  --te-layout-common-bg-color-hover: var(--te-common-bg-container);
+  --te-layout-common-active-bg: var(--te-common-bg-prompt);
+  --te-layout-common-text-color-secondary-checked: var(--te-common-text-checked);
+  --te-layout-common-text-color: var(--te-common-text-primary);
+  --te-layout-common-text-color-secondary: var(--te-common-text-secondary);
+  --te-layout-common-text-color-hover: var(--te-common-text-primary);
+  --te-layout-common-text-color-active: var(--te-common-text-primary);
+  --te-layout-common-icon-color-primary: var(--te-common-icon-primary);
+  --te-layout-common-icon-color: var(--te-common-icon-secondary);
+  --te-layout-common-icon-bg-color-hover: var(--te-common-bg-disabled);
+
+  --te-layout-setting-bg-color-hover: var(--te-common-bg-primary-checked);
+}
diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less
index 8bc049f7c..df9db54b1 100644
--- a/packages/theme/base/src/base.less
+++ b/packages/theme/base/src/base.less
@@ -20,6 +20,8 @@
   --te-base-gray-120: #1a1a1a;
   --te-base-gray-125: #191919;
   --te-base-gray-130: #000;
+  --te-base-gray-140: rgba(0, 0, 0, 0.2);
+  --te-base-gray-150: rgba(0, 0, 0, 0.1);
 
   // expand-red
   --te-base-red-10: #fff1f0;
@@ -190,9 +192,10 @@
   --te-base-indigo-90: #19056e;
   --te-base-indigo-100: #0e004d;
   --te-base-indigo-110: #272635;
-  --te-base-indigo-120: #716acc;
-  --te-base-indigo-130: #847acc;
-  --te-base-indigo-140: #bbb8e6;
+  --te-base-indigo-120: #302e47;
+  --te-base-indigo-130: #716acc;
+  --te-base-indigo-140: #847acc;
+  --te-base-indigo-150: #bbb8e6;
 
   // expand-purple
   --te-base-purple-10: #f9ebff;
diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
index c085b6418..c32b5a921 100644
--- a/packages/theme/base/src/common.less
+++ b/packages/theme/base/src/common.less
@@ -17,6 +17,7 @@
   --te-common-text-dark-inverse: var(--te-base-gray-0); // 深色背景下按钮上的文本色 #fff
   --te-common-text-emphasize: var(--te-base-blue-70); // 强调性文字 #1476ff
   --te-common-text-checked: var(--te-base-blue-70); // 选中或者hover文字 #1476ff
+  --te-common-text-purple: var(--te-base-indigo-50); // 区块文本色 #6e51e0
 
   --te-common-icon-primary: var(--te-base-gray-125); // 重要图标色 #191919
   --te-common-icon-hover: var(--te-base-gray-80); // 图标悬浮色 #595959
@@ -60,7 +61,9 @@
   --te-common-bg-scroll-hover: var(--te-base-gray-50); // 滚动条默认背景色#c2c2c2
 
   --te-common-shadow-panel: var(--te-base-box-shadow-rgba-3); // 面板阴影 rgba(0, 0, 0, 0.1)
+  --te-common-bg-purple-hover: var(--te-base-indigo-20); // 紫背景hover色 #e2d9fc
 
+  --te-common-mask: var(--te-base-gray-140); // 蒙层色 rgba(0, 0, 0, 0.2)
   // 通用间距
   --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
   --te-common-vertical-form-label-spacing: 8px; // 上下布局时，表单label与表单元素的间隔
@@ -83,6 +86,7 @@
   --te-common-text-dark-inverse: var(--te-base-gray-130); // 深色背景下按钮上的文本色 #000
   --te-common-text-emphasize: var(--te-base-blue-60); // 强调性文字 #317AF7
   --te-common-text-checked: var(--te-base-blue-60); // 选中或者hover文字 #317AF7
+  --te-common-text-purple: var(--te-base-indigo-130); // 区块文本色 #716acc
 
   --te-common-icon-primary: var(--te-base-gray-30); // 重要图标色 #E6E6E6
   --te-common-icon-hover: var(--te-base-gray-60); //  图标悬浮色 #B3B3B3
@@ -125,7 +129,9 @@
   --te-common-bg-scroll-hover: var(--te-base-gray-100); // 滚动条默认背景色#333333
 
   --te-common-shadow-panel: var(--te-base-box-shadow-rgba-4); // 面板阴影 rgba(0, 0, 0, 0.2)
+  --te-common-bg-purple-hover: var(--te-base-indigo-120); // 紫背景hover色 #302e47
 
+  --te-common-mask: var(--te-base-gray-140); // 蒙层色 rgba(0, 0, 0, 0.2)
   // 通用间距
   --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
   --te-common-vertical-form-label-spacing: 8px; // 上下布局时，表单label与表单元素的间隔
diff --git a/packages/toolbars/breadcrumb/index.js b/packages/toolbars/breadcrumb/index.js
index c168f10c1..350834423 100644
--- a/packages/toolbars/breadcrumb/index.js
+++ b/packages/toolbars/breadcrumb/index.js
@@ -13,6 +13,7 @@
 import entry from './src/Main.vue'
 import metaData from './meta'
 import { BreadcrumbService } from './src/composable'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,
diff --git a/packages/toolbars/breadcrumb/src/Main.vue b/packages/toolbars/breadcrumb/src/Main.vue
index b0efbbdb8..93f565107 100644
--- a/packages/toolbars/breadcrumb/src/Main.vue
+++ b/packages/toolbars/breadcrumb/src/Main.vue
@@ -110,7 +110,7 @@ export default {
   &-title {
     height: 28px;
     padding: 0 8px;
-    background-color: var(--ti-lowcode-toolbar-button-bg);
+    background-color: var(--te-toolbars-breadcrumb-bg-color);
     display: flex;
     border-radius: 4px;
     :deep(.reference-wrapper) {
@@ -133,7 +133,7 @@ export default {
     user-select: none;
 
     :deep(.tiny-breadcrumb__inner) {
-      color: var(--ti-lowcode-media-popover-title-color);
+      color: var(--te-toolbars-breadcrumb-text-color);
       text-decoration: none;
       cursor: pointer;
     }
@@ -145,24 +145,24 @@ export default {
 
     &:last-child :deep(.tiny-breadcrumb__inner) {
       font-weight: normal;
-      color: var(--ti-lowcode-media-popover-title-color);
+      color: var(--te-toolbars-breadcrumb-text-color);
     }
   }
 
   &-title-block {
-    background-color: var(--ti-lowcode-toolbar-breadcrumb-bg);
+    background-color: var(--te-toolbars-breadcrumb-block-bg-color);
     .tiny-breadcrumb__item {
       :deep(.tiny-breadcrumb__inner) {
-        color: var(--ti-lowcode-toolbar-breadcrumb-left-color);
+        color: var(--te-toolbars-breadcrumb-block-text-color);
       }
       &:last-child :deep(.tiny-breadcrumb__inner) {
-        color: var(--ti-lowcode-toolbar-breadcrumb-left-color);
+        color: var(--te-toolbars-breadcrumb-block-text-color);
       }
     }
   }
 
   &-title-block:hover {
-    background-color: var(--ti-lowcode-toolbar-breadcrumb-bg-hover);
+    background-color: var(--te-toolbars-breadcrumb-block-bg-color-hover);
   }
 
   .publish {
diff --git a/packages/toolbars/breadcrumb/src/styles/vars.less b/packages/toolbars/breadcrumb/src/styles/vars.less
new file mode 100644
index 000000000..3a3b0a13a
--- /dev/null
+++ b/packages/toolbars/breadcrumb/src/styles/vars.less
@@ -0,0 +1,7 @@
+:root {
+  --te-toolbars-breadcrumb-bg-color: var(--te-common-bg-prompt);
+  --te-toolbars-breadcrumb-block-bg-color: var(--te-common-color-prompt-secondary);
+  --te-toolbars-breadcrumb-block-bg-color-hover: var(--te-common-bg-purple-hover);
+  --te-toolbars-breadcrumb-text-color: var(--te-common-text-primary);
+  --te-toolbars-breadcrumb-block-text-color: var(--te-common-text-purple);
+}
diff --git a/packages/toolbars/collaboration/index.js b/packages/toolbars/collaboration/index.js
index c0e0c0687..5efbd88c4 100644
--- a/packages/toolbars/collaboration/index.js
+++ b/packages/toolbars/collaboration/index.js
@@ -12,6 +12,7 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,
diff --git a/packages/toolbars/collaboration/src/Main.vue b/packages/toolbars/collaboration/src/Main.vue
index ef3aba6df..2c81c8a3b 100644
--- a/packages/toolbars/collaboration/src/Main.vue
+++ b/packages/toolbars/collaboration/src/Main.vue
@@ -120,7 +120,7 @@ export default {
     width: 100%;
     font-size: 14px;
     padding: 12px 20px;
-    color: var(--te-common-text-secondary);
+    color: var(--te-toolbars-collaboration-text-color-secondary);
     line-height: 18px;
     font-weight: 600;
   }
@@ -131,7 +131,7 @@ export default {
     align-items: center;
 
     &:hover {
-      background: var(--ti-lowcode-toolbar-hover-color);
+      background: var(--te-toolbars-collaboration-bg-color-hover);
     }
 
     .user-item-head {
@@ -142,7 +142,7 @@ export default {
 
     .user-item-name {
       font-size: 14px;
-      color: var(--te-common-text-primary);
+      color: var(--te-toolbars-collaboration-text-color-primary);
       line-height: 16px;
       font-weight: 400;
       margin: 0 4px 0 8px;
@@ -166,7 +166,7 @@ export default {
     border-radius: 50%;
     margin-right: 8px;
     z-index: 9;
-    border: 1px solid var(--ti-lowcode-toolbar-user-img-border-color);
+    border: 1px solid var(--te-toolbars-collaboration-border-color);
   }
 }
 </style>
diff --git a/packages/toolbars/collaboration/src/styles/vars.less b/packages/toolbars/collaboration/src/styles/vars.less
new file mode 100644
index 000000000..216d44020
--- /dev/null
+++ b/packages/toolbars/collaboration/src/styles/vars.less
@@ -0,0 +1,6 @@
+:root {
+  --te-toolbars-collaboration-text-color-primary: var(--te-common-text-primary);
+  --te-toolbars-collaboration-text-color-secondary: var(--te-common-text-secondary);
+  --te-toolbars-collaboration-bg-color-hover: var(--te-common-bg-container);
+  --te-toolbars-collaboration-border-color: var(--te-common-border-default);
+}
diff --git a/packages/toolbars/generate-code/index.js b/packages/toolbars/generate-code/index.js
index e557e8ddc..b41ba40e0 100644
--- a/packages/toolbars/generate-code/index.js
+++ b/packages/toolbars/generate-code/index.js
@@ -13,6 +13,7 @@
 import entry from './src/Main.vue'
 import metaData from './meta'
 import { SaveLocalService } from './src/composable'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,
diff --git a/packages/toolbars/generate-code/src/FileSelector.vue b/packages/toolbars/generate-code/src/FileSelector.vue
index 5a7661d1e..9a631c09c 100644
--- a/packages/toolbars/generate-code/src/FileSelector.vue
+++ b/packages/toolbars/generate-code/src/FileSelector.vue
@@ -121,27 +121,27 @@ export default {
 <style lang="less" scoped>
 .dialog-box {
   :deep(.tiny-dialog-box__content) {
-    background-color: var(--te-common-bg-default);
+    background-color: var(--te-toolbars-generate-code-bg-color);
 
     .tiny-dialog-box__header {
-      background-color: var(--te-common-bg-default);
+      background-color: var(--te-toolbars-generate-code-bg-color);
 
       .tiny-dialog-box__title {
-        color: var(--te-common-text-secondary);
+        color: var(--te-toolbars-generate-code-text-color);
       }
 
       .tiny-dialog-box__headerbtn .tiny-dialog-box__close {
-        fill: var(--te-common-text-secondary) !important;
+        fill: var(--te-toolbars-generate-code-icon-color) !important;
 
         &:hover {
-          fill: var(--te-common-text-primary) !important;
+          fill: var(--te-toolbars-generate-code-icon-color-primary) !important;
         }
       }
     }
 
     .tiny-dialog-box__footer {
       .tiny-button--primary {
-        background-color: var(--te-common-bg-primary);
+        background-color: var(--te-toolbars-generate-code-bg-color-primary);
         border: none;
       }
     }
@@ -160,18 +160,18 @@ export default {
     :deep(.tiny-grid) {
       .tiny-grid__header-wrapper {
         .tiny-grid-header__column {
-          color: var(--te-common-text-secondary);
+          color: var(--te-toolbars-generate-code-text-color);
           height: 30px;
 
           .tiny-grid-resizable.is__line:before {
-            background-color: var(--te-common-bg-default);
+            background-color: var(--te-toolbars-generate-code-bg-color);
           }
         }
 
         .tiny-grid-checkbox__icon,
         .icon-checked-sur {
           svg {
-            color: var(--te-common-border-checked) !important;
+            color: var(--te-toolbars-generate-code-border-color-checked) !important;
           }
         }
       }
@@ -190,14 +190,14 @@ export default {
         }
 
         .tiny-grid-body__row {
-          background-color: var(--te-common-bg-default);
+          background-color: var(--te-toolbars-generate-code-bg-color);
         }
 
         .tiny-grid-body__row {
           &.row__selected {
             .tiny-grid-checkbox__icon {
               svg {
-                color: var(--te-common-border-checked);
+                color: var(--te-toolbars-generate-code-border-color-checked);
                 fill: currentColor;
                 width: 100%;
                 height: 100%;
@@ -208,7 +208,7 @@ export default {
       }
 
       .tiny-grid__empty-text {
-        color: var(--te-common-text-secondary);
+        color: var(--te-toolbars-generate-code-text-color);
       }
     }
   }
diff --git a/packages/toolbars/generate-code/src/Main.vue b/packages/toolbars/generate-code/src/Main.vue
index 49892bd03..cb27a6955 100644
--- a/packages/toolbars/generate-code/src/Main.vue
+++ b/packages/toolbars/generate-code/src/Main.vue
@@ -266,10 +266,10 @@ export default {
     height: 26px;
     padding: 0 8px;
     border-radius: 4px;
-    background-color: var(--ti-lowcode-toolbar-button-bg);
+    background-color: var(--te-toolbars-generate-code-button-bg-color);
     border: none;
     &:not(.disabled):hover {
-      background-color: var(--ti-lowcode-toolbar-button-bg);
+      background-color: var(--te-toolbars-generate-code-button-bg-color);
     }
     .button-title {
       margin-left: 4px;
diff --git a/packages/toolbars/generate-code/src/styles/vars.less b/packages/toolbars/generate-code/src/styles/vars.less
new file mode 100644
index 000000000..7bb3c9212
--- /dev/null
+++ b/packages/toolbars/generate-code/src/styles/vars.less
@@ -0,0 +1,9 @@
+:root {
+  --te-toolbars-generate-code-button-bg-color: var(--te-common-bg-prompt);
+  --te-toolbars-generate-code-text-color: var(--te-common-text-secondary);
+  --te-toolbars-generate-code-icon-color: var(--te-common-icon-secondary);
+  --te-toolbars-generate-code-icon-color-primary: var(--te-common-icon-primary);
+  --te-toolbars-generate-code-bg-color-primary: var(--te-common-bg-primary);
+  --te-toolbars-generate-code-bg-color: var(--te-common-bg-default);
+  --te-toolbars-generate-code-border-color-checked: var(--te-common-border-checked);
+}
diff --git a/packages/toolbars/lang/index.js b/packages/toolbars/lang/index.js
index c0e0c0687..5efbd88c4 100644
--- a/packages/toolbars/lang/index.js
+++ b/packages/toolbars/lang/index.js
@@ -12,6 +12,7 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,
diff --git a/packages/toolbars/lang/src/Main.vue b/packages/toolbars/lang/src/Main.vue
index ccf273c74..49f379e09 100644
--- a/packages/toolbars/lang/src/Main.vue
+++ b/packages/toolbars/lang/src/Main.vue
@@ -61,11 +61,10 @@ export default {
   }
 }
 </script>
-
 <style scoped lang="less">
 .change-lang-box {
   svg {
-    color: var(--ti-lowcode-toolbar-title-color);
+    color: var(--te-toolbars-lang-text-color);
     width: 18px;
     height: 18px;
     &:hover {
@@ -74,6 +73,6 @@ export default {
   }
 }
 .icon {
-  color: var(--ti-lowcode-toolbar-title-color);
+  color: var(--te-toolbars-lang-icon-color);
 }
 </style>
diff --git a/packages/toolbars/lang/src/styles/vars.less b/packages/toolbars/lang/src/styles/vars.less
new file mode 100644
index 000000000..37bd2be27
--- /dev/null
+++ b/packages/toolbars/lang/src/styles/vars.less
@@ -0,0 +1,4 @@
+:root {
+  --te-toolbars-lang-text-color: var(--te-common-text-primary);
+  --te-toolbars-lang-icon-color: var(--te-common-icon-primary);
+}
diff --git a/packages/toolbars/logo/index.js b/packages/toolbars/logo/index.js
index c0e0c0687..5efbd88c4 100644
--- a/packages/toolbars/logo/index.js
+++ b/packages/toolbars/logo/index.js
@@ -12,6 +12,7 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,
diff --git a/packages/toolbars/logo/src/Main.vue b/packages/toolbars/logo/src/Main.vue
index 8f221fdb0..50408a734 100644
--- a/packages/toolbars/logo/src/Main.vue
+++ b/packages/toolbars/logo/src/Main.vue
@@ -332,7 +332,7 @@ onUnmounted(() => {
   .logo-wrap {
     margin: 0 0 0 10px;
     cursor: pointer;
-    color: var(--ti-lowcode-toolbar-title-color);
+    color: var(--te-toolbars-logo-text-color-primary);
     &:active,
     &:hover {
       .menu-icon-wrapper .icon-menu {
@@ -346,7 +346,7 @@ onUnmounted(() => {
       display: flex;
       justify-content: center;
       align-items: center;
-      color: var(--ti-lowcode-toolbar-title-color);
+      color: var(--te-toolbars-logo-text-color-primary);
       font-weight: normal;
       .icon-menu {
         font-size: 20px;
@@ -358,19 +358,19 @@ onUnmounted(() => {
     position: absolute;
     top: var(--base-top-panel-height);
     left: 10px;
-    color: var(--ti-lowcode-toolbar-icon-color);
+    color: var(--te-toolbars-logo-text-color-secondary);
     ul {
       min-width: 130px;
       border: 1px solid transparent;
       border-radius: 6px;
-      background-color: var(--ti-lowcode-main-menu-bg);
+      background-color: var(--te-toolbars-logo-bg-color);
       box-shadow: 0 1px 15px 0 rgb(0 0 0 / 20%);
       padding: 8px 0;
       display: flex;
       flex-direction: column;
       li {
         font-size: 14px;
-        color: var(--ti-lowcode-toolbar-title-color);
+        color: var(--te-toolbars-logo-text-color-primary);
         cursor: pointer;
         height: 32px;
         width: 100%;
@@ -382,7 +382,7 @@ onUnmounted(() => {
           font-size: 16px;
         }
         &:hover {
-          background: var(--ti-lowcode-toolbar-hover-color);
+          background: var(--te-toolbars-logo-bg-color-hover);
         }
 
         &:first-child {
@@ -403,7 +403,7 @@ onUnmounted(() => {
 .icon-help {
   cursor: pointer;
   margin-left: 8px;
-  color: var(--ti-lowcode-toolbar-publish-icon-color);
+  fill: var(--te-toolbars-logo-icon-color);
 }
 
 .app-switching-modal {
@@ -428,7 +428,7 @@ onUnmounted(() => {
       }
 
       &:hover {
-        background: var(--te-common-bg-container);
+        background: var(--te-toolbars-logo-bg-color-hover);
       }
     }
   }
diff --git a/packages/toolbars/logo/src/styles/vars.less b/packages/toolbars/logo/src/styles/vars.less
new file mode 100644
index 000000000..d904605e9
--- /dev/null
+++ b/packages/toolbars/logo/src/styles/vars.less
@@ -0,0 +1,7 @@
+:root {
+  --te-toolbars-logo-text-color-primary: var(--te-common-text-primary);
+  --te-toolbars-logo-text-color-secondary: var(--te-common-text-secondary);
+  --te-toolbars-logo-icon-color: var(--te-common-icon-primary);
+  --te-toolbars-logo-bg-color: var(--te-common-bg-default);
+  --te-toolbars-logo-bg-color-hover: var(--te-common-bg-container);
+}
diff --git a/packages/toolbars/logout/index.js b/packages/toolbars/logout/index.js
index c0e0c0687..5efbd88c4 100644
--- a/packages/toolbars/logout/index.js
+++ b/packages/toolbars/logout/index.js
@@ -12,6 +12,7 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,
diff --git a/packages/toolbars/logout/src/Main.vue b/packages/toolbars/logout/src/Main.vue
index c990d7e12..573fd2357 100644
--- a/packages/toolbars/logout/src/Main.vue
+++ b/packages/toolbars/logout/src/Main.vue
@@ -22,7 +22,7 @@ export default {
 
   span,
   a {
-    color: var(--te-common-text-secondary);
+    color: var(--te-toolbars-logout-text-color);
   }
 }
 </style>
diff --git a/packages/toolbars/logout/src/styles/vars.less b/packages/toolbars/logout/src/styles/vars.less
new file mode 100644
index 000000000..9a5826d27
--- /dev/null
+++ b/packages/toolbars/logout/src/styles/vars.less
@@ -0,0 +1,3 @@
+:root {
+  --te-toolbars-logout-text-color: var(--te-common-text-secondary);
+}
diff --git a/packages/toolbars/media/index.js b/packages/toolbars/media/index.js
index c0e0c0687..5efbd88c4 100644
--- a/packages/toolbars/media/index.js
+++ b/packages/toolbars/media/index.js
@@ -12,6 +12,7 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,
diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue
index 8efc91778..d398a0a13 100644
--- a/packages/toolbars/media/src/Main.vue
+++ b/packages/toolbars/media/src/Main.vue
@@ -427,7 +427,7 @@ export default {
     height: var(--base-top-panel-height);
     line-height: var(--base-top-panel-height);
     padding: 0 7px;
-    color: var(--te-common-text-secondary);
+    color: var(--te-toolbars-media-text-color-secondary);
     display: inline-block;
 
     & > span {
@@ -452,7 +452,7 @@ export default {
 
       svg {
         cursor: pointer;
-        color: var(--ti-lowcode-toolbar-title-color);
+        color: var(--te-toolbars-media-text-color-primary);
         outline: none;
         width: 18px;
         height: 18px;
@@ -461,11 +461,11 @@ export default {
 
       &.active,
       &:hover {
-        background: var(--ti-lowcode-toolbar-view-active-bg);
+        background: var(--te-toolbars-media-bg-color-active);
       }
       &.active {
         svg {
-          color: var(--te-common-text-checked);
+          color: var(--te-toolbars-media-text-color-checked);
         }
       }
     }
@@ -484,7 +484,7 @@ export default {
     font-weight: 600;
   }
   .content {
-    color: var(--te-common-text-secondary);
+    color: var(--te-toolbars-media-text-color-secondary);
   }
 }
 .setting-content {
@@ -506,7 +506,7 @@ export default {
       align-items: center;
       justify-content: space-between;
       label {
-        color: var(--te-common-text-secondary);
+        color: var(--te-toolbars-media-text-color-secondary);
         min-width: 64px;
       }
       &:last-child {
diff --git a/packages/toolbars/media/src/styles/vars.less b/packages/toolbars/media/src/styles/vars.less
new file mode 100644
index 000000000..732305dea
--- /dev/null
+++ b/packages/toolbars/media/src/styles/vars.less
@@ -0,0 +1,6 @@
+:root {
+  --te-toolbars-media-text-color-secondary: var(--te-common-text-secondary);
+  --te-toolbars-media-text-color-primary: var(--te-common-text-primary);
+  --te-toolbars-media-text-color-checked: var(--te-common-text-checked);
+  --te-toolbars-media-bg-color-active: var(--te-common-bg-prompt);
+}
diff --git a/packages/toolbars/redoundo/index.js b/packages/toolbars/redoundo/index.js
index 48dfdcba5..546173c39 100644
--- a/packages/toolbars/redoundo/index.js
+++ b/packages/toolbars/redoundo/index.js
@@ -13,6 +13,7 @@
 import entry from './src/Main.vue'
 import metaData from './meta'
 import { HistoryService } from './src/composable'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,
diff --git a/packages/toolbars/redoundo/src/Main.vue b/packages/toolbars/redoundo/src/Main.vue
index 5b6c2b257..d2c32b2ef 100644
--- a/packages/toolbars/redoundo/src/Main.vue
+++ b/packages/toolbars/redoundo/src/Main.vue
@@ -67,19 +67,19 @@ export default {
     width: 32px;
     border-radius: 6px;
     svg {
-      color: var(--ti-lowcode-toolbar-title-color);
+      color: var(--te-toolbars-redoundo-text-color);
       font-size: 20px;
     }
     &.disabled {
       cursor: not-allowed;
       svg {
-        color: var(--ti-lowcode-disabled-color);
+        color: var(--te-toolbars-redoundo-text-color-disabled);
       }
     }
     &:not(.disabled):hover {
-      background: var(--ti-lowcode-toolbar-view-active-bg);
+      background: var(--te-toolbars-redoundo-bg-color-active);
       svg {
-        color: var(--ti-lowcode-toolbar-active-color);
+        color: var(--te-toolbars-redoundo-icon-color-hover);
       }
     }
     &.redo {
diff --git a/packages/toolbars/redoundo/src/styles/vars.less b/packages/toolbars/redoundo/src/styles/vars.less
new file mode 100644
index 000000000..e4f3f32b3
--- /dev/null
+++ b/packages/toolbars/redoundo/src/styles/vars.less
@@ -0,0 +1,6 @@
+:root {
+  --te-toolbars-redoundo-text-color: var(--te-common-text-primary);
+  --te-toolbars-redoundo-text-color-disabled: var(--te-common-text-disabled);
+  --te-toolbars-redoundo-bg-color-active: var(--te-common-bg-prompt);
+  --te-toolbars-redoundo-icon-color-hover: var(--te-common-icon-hover);
+}
diff --git a/packages/toolbars/save/index.js b/packages/toolbars/save/index.js
index 0cb4859af..9442fa53f 100644
--- a/packages/toolbars/save/index.js
+++ b/packages/toolbars/save/index.js
@@ -12,6 +12,7 @@
 
 import entry, { api } from './src/Main.vue'
 import metaData from './meta'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,
diff --git a/packages/toolbars/save/src/Main.vue b/packages/toolbars/save/src/Main.vue
index d8f0daf32..d15a55897 100644
--- a/packages/toolbars/save/src/Main.vue
+++ b/packages/toolbars/save/src/Main.vue
@@ -177,7 +177,7 @@ export default {
 .dots {
   width: 6px;
   height: 6px;
-  background: var(--ti-lowcode-toolbar-dot-color);
+  background: var(--te-toolbars-save-dot-color);
   border-radius: 50%;
   display: inline-block;
   position: absolute;
@@ -192,7 +192,7 @@ export default {
     margin-right: var(--te-base-space-0);
   }
   .save-button {
-    background-color: var(--ti-lowcode-toolbar-button-bg);
+    background-color: var(--te-toolbars-save-button-bg-color);
     border: none;
     min-width: 70px;
     height: 26px;
@@ -201,7 +201,7 @@ export default {
     padding: 0 8px;
     border-radius: 4px;
     &:not(.disabled):hover {
-      background-color: var(--ti-lowcode-toolbar-button-bg);
+      background-color: var(--te-toolbars-save-button-bg-color);
     }
   }
 
@@ -229,7 +229,7 @@ export default {
     display: flex;
     .save-time-label {
       width: 60px;
-      color: var(--te-common-text-secondary);
+      color: var(--te-toolbars-save-text-color);
     }
 
     .tiny-select {
@@ -240,6 +240,9 @@ export default {
         width: 12px;
       }
     }
+    :deep(.tiny-select.is-disabled .tiny-input__suffix) {
+      display: flex;
+    }
   }
 
   .save-button-group {
@@ -249,10 +252,10 @@ export default {
 
 #saving {
   cursor: not-allowed;
-  color: var(--ti-lowcode-disabled-color);
+  color: var(--te-toolbars-save-text-color-disabled);
 
   :deep(svg) {
-    color: var(--ti-lowcode-disabled-color);
+    color: var(--te-toolbars-save-text-color-disabled);
   }
 }
 
@@ -275,7 +278,7 @@ export default {
 
 <style>
 .changeRole a {
-  color: var(--ti-lowcode-canvas-handle-hover-bg);
+  color: var(--te-toolbars-save-text-color-link);
   padding: 0 5px;
 }
 .save-style .save-time .tiny-input__inner {
diff --git a/packages/toolbars/save/src/styles/vars.less b/packages/toolbars/save/src/styles/vars.less
new file mode 100644
index 000000000..5d095136d
--- /dev/null
+++ b/packages/toolbars/save/src/styles/vars.less
@@ -0,0 +1,7 @@
+:root {
+  --te-toolbars-save-text-color: var(--te-common-text-secondary);
+  --te-toolbars-save-text-color-disabled: var(--te-common-text-disabled);
+  --te-toolbars-save-dot-color: var(--te-common-color-error);
+  --te-toolbars-save-button-bg-color: var(--te-common-bg-prompt);
+  --te-toolbars-save-text-color-link: var(--te-common-text-link);
+}