From 57697e8509429f65cc10699bda8ef16f95bda0b7 Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Mon, 13 Jan 2025 21:03:20 +0800
Subject: [PATCH 1/2] feat(refactor/theme): change incorrect css variables to
 the common variable

---
 packages/common/component/BlockLinkEvent.vue  |  6 +--
 packages/common/component/ConfigCollapse.vue  |  4 +-
 packages/common/component/ConfigItem.vue      |  2 +-
 packages/common/component/EmptyTip.vue        | 10 ++--
 packages/common/component/MetaCodeEditor.vue  |  2 +-
 packages/common/component/MetaDescription.vue | 20 ++++----
 packages/common/component/MetaListActions.vue |  2 +-
 packages/common/component/MetaListItem.vue    |  4 +-
 packages/common/component/MetaModal.vue       |  2 +-
 packages/common/component/MetaModalItem.vue   |  2 +-
 packages/common/component/MonacoEditor.vue    |  2 +-
 packages/common/component/PluginBlockList.vue |  6 +--
 packages/common/component/PluginSetting.vue   |  2 +-
 packages/common/component/ToolbarBase.vue     |  2 +-
 packages/common/component/VideoGuide.vue      |  2 +-
 .../TabsGroupConfigurator.vue                 |  8 +--
 .../design-core/src/preview/src/Toolbar.vue   |  2 +-
 packages/layout/src/DesignPlugins.vue         |  6 +--
 packages/layout/src/DesignToolbars.vue        |  4 +-
 packages/layout/src/ToolbarCollapse.vue       |  2 +-
 packages/plugins/block/src/BlockConfig.vue    |  2 +-
 packages/plugins/block/src/BlockEventList.vue |  2 +-
 .../plugins/block/src/BlockPropertyForm.vue   |  6 +--
 .../plugins/block/src/BlockPropertyList.vue   |  2 +-
 packages/plugins/block/src/Main.vue           | 10 ++--
 packages/plugins/block/src/SaveNewBlock.vue   |  2 +-
 packages/plugins/bridge/src/BridgeSetting.vue |  4 +-
 packages/plugins/i18n/src/Main.vue            |  8 +--
 .../src/meta/block/src/BlockDetail.vue        | 13 +++--
 .../src/meta/block/src/BlockGroup.vue         |  4 +-
 .../src/meta/block/src/BlockGroupArrange.vue  |  4 +-
 .../src/meta/block/src/BlockGroupTransfer.vue |  2 +-
 .../block/src/BlockGroupTransferPanel.vue     |  2 +-
 .../src/meta/block/src/BlockList.vue          | 18 -------
 .../materials/src/meta/component/src/Main.vue |  4 +-
 packages/plugins/page/src/PageInputOutput.vue |  2 +-
 packages/plugins/page/src/PageSetting.vue     |  6 ---
 packages/plugins/schema/src/Main.vue          |  4 +-
 packages/plugins/script/src/Main.vue          |  2 +-
 .../plugins/state/src/CreateRemoteAPI.vue     | 16 +++---
 packages/plugins/state/src/CreateStore.vue    |  2 +-
 packages/plugins/state/src/CreateVariable.vue | 23 +--------
 packages/plugins/state/src/DataSourceList.vue | 16 ++----
 packages/plugins/state/src/Main.vue           | 17 ++-----
 packages/plugins/tree/src/Main.vue            | 12 ++---
 .../tutorial/src/TutorialVideoPanel.vue       |  4 +-
 packages/toolbars/collaboration/src/Main.vue  | 15 +-----
 .../generate-code/src/FileSelector.vue        | 49 ++++++-------------
 packages/toolbars/logo/src/Main.vue           |  2 +-
 packages/toolbars/logout/src/Main.vue         |  2 +-
 packages/toolbars/media/src/Main.vue          |  4 +-
 51 files changed, 125 insertions(+), 224 deletions(-)

diff --git a/packages/common/component/BlockLinkEvent.vue b/packages/common/component/BlockLinkEvent.vue
index 4c89fac7a3..f502c1de53 100644
--- a/packages/common/component/BlockLinkEvent.vue
+++ b/packages/common/component/BlockLinkEvent.vue
@@ -198,7 +198,7 @@ export default {
   padding: 3px 0;
   border: 1px solid var(--ti-lowcode-tabs-border-color);
   border-radius: 3px;
-  background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+  background-color: var(--te-common-bg-container);
   box-shadow: 0 1px 15px 0 rgb(0 0 0 / 20%);
   display: flex;
   flex-direction: column;
@@ -206,14 +206,14 @@ export default {
     font-size: 12px;
     display: flex;
     justify-content: space-between;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     padding: 6px 15px;
     &:not(:last-child) {
       border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
     }
     &:hover {
       color: var(--ti-lowcode-toolbar-icon-color);
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
     }
 
     .link-item {
diff --git a/packages/common/component/ConfigCollapse.vue b/packages/common/component/ConfigCollapse.vue
index 1ba8b20e66..01e51fa0ba 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(--ti-lowcode-toolbar-icon-color);
+          color: var(--te-common-icon-primary);
 
           svg {
-            color: var(--ti-lowcode-toolbar-icon-color);
+            color: var(--te-common-icon-primary);
           }
         }
       }
diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index 040026780c..85ef58c1ae 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -673,7 +673,7 @@ export default {
     display: flex;
     align-items: center;
     margin-top: 8px;
-    color: var(--ti-lowcode-common-error-color);
+    color: var(--te-common-color-error);
     font-size: 12px;
     .failure-icon {
       width: 16px;
diff --git a/packages/common/component/EmptyTip.vue b/packages/common/component/EmptyTip.vue
index 8e72800e2a..6b03517550 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(--ti-lowcode-toolbar-border-color);
-  border-left: 2px solid var(--ti-lowcode-success-border-color);
+  border: 1px solid var(--te-common-border-default);
+  border-left: 2px solid var(--te-common-color-success);
   border-radius: 0 4px 4px 0;
   align-items: center;
   padding: 8px 12px;
-  background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+  background-color: var(--te-common-bg-container);
 
   .left {
     width: 20px;
@@ -52,9 +52,9 @@ export default {
   }
 }
 .waring {
-  border-left: 2px solid var(--ti-lowcode-description-warning-color);
+  border-left: 2px solid var(--te-common-color-warning);
 }
 .error {
-  border-left: 2px solid var(--ti-lowcode-description-error-color);
+  border-left: 2px solid var(--te-common-color-error);
 }
 </style>
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 5e730bf8a9..ee829a0276 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -323,7 +323,7 @@ export default {
     margin-left: 4px;
     flex-shrink: 0;
     cursor: pointer;
-    color: var(--ti-lowcode-common-text-main-color);
+    color: var(--te-common-text-secondary);
   }
 }
 
diff --git a/packages/common/component/MetaDescription.vue b/packages/common/component/MetaDescription.vue
index d6609e29ae..56c4ed5517 100644
--- a/packages/common/component/MetaDescription.vue
+++ b/packages/common/component/MetaDescription.vue
@@ -92,34 +92,34 @@ export default {
   padding-block: 4px;
   padding-inline: 11px 8px;
   width: auto;
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
-  background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+  color: var(--te-common-text-secondary);
+  background-color: var(--te-common-bg-container);
   box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.3);
   &.warning {
-    color: var(--ti-lowcode-description-warning-color);
+    color: var(--te-common-color-warning);
   }
   &.error {
-    color: var(--ti-lowcode-description-error-color);
+    color: var(--te-common-color-error);
   }
 
   &.border {
-    border-top: 1px solid var(--ti-lowcode-collapse-active-border-color);
-    border-right: 1px solid var(--ti-lowcode-collapse-active-border-color);
-    border-bottom: 1px solid var(--ti-lowcode-collapse-active-border-color);
+    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);
   }
   .content {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
   }
   .footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     .footer-text {
       cursor: pointer;
       &.link {
         display: block;
-        color: var(--ti-lowcode-text-link-color);
+        color: var(--te-common-text-link);
         &:hover {
           text-decoration: underline;
         }
diff --git a/packages/common/component/MetaListActions.vue b/packages/common/component/MetaListActions.vue
index 2f77a06796..5013cd0953 100644
--- a/packages/common/component/MetaListActions.vue
+++ b/packages/common/component/MetaListActions.vue
@@ -35,7 +35,7 @@ export default {
 .actionsItem {
   display: inline-block;
   padding: 5px 5px;
-  background-color: var(--ti-lowcode-canvas-wrap-bg);
+  background-color: var(--te-common-bg-container);
   &:not(:last-child) {
     border-right: 1px solid var(--ti-lowcode-optionitem-border-color);
   }
diff --git a/packages/common/component/MetaListItem.vue b/packages/common/component/MetaListItem.vue
index 332baf51c5..b687ba9d4b 100644
--- a/packages/common/component/MetaListItem.vue
+++ b/packages/common/component/MetaListItem.vue
@@ -252,7 +252,7 @@ export default {
   border-right: none;
   background: var(--ti-lowcode-meta-list-item-bg-color);
   margin-bottom: -1px;
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  color: var(--te-common-text-primary);
   &.active-item {
     background-color: var(--te-common-bg-container);
   }
@@ -267,7 +267,7 @@ export default {
         margin-right: 5px;
         font-size: 12px;
         opacity: 0.4;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-primary);
         &:hover {
           cursor: pointer;
           opacity: 1;
diff --git a/packages/common/component/MetaModal.vue b/packages/common/component/MetaModal.vue
index 8bd2115b73..d44d058965 100644
--- a/packages/common/component/MetaModal.vue
+++ b/packages/common/component/MetaModal.vue
@@ -74,7 +74,7 @@ export default {
 
   .modal-content {
     padding: 8px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     border: 1px solid var(--ti-lowcode-tabs-border-color);
     border-radius: 4px;
     background-color: var(--ti-lowcode-toolbar-bg);
diff --git a/packages/common/component/MetaModalItem.vue b/packages/common/component/MetaModalItem.vue
index 9347f06e27..f80ef33237 100644
--- a/packages/common/component/MetaModalItem.vue
+++ b/packages/common/component/MetaModalItem.vue
@@ -123,7 +123,7 @@ export default {
       justify-content: space-between;
       align-items: center;
       padding: 10px 0;
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
 
       .header-title {
         font-size: 14px;
diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
index 27a3f47c17..2d0d7464ac 100644
--- a/packages/common/component/MonacoEditor.vue
+++ b/packages/common/component/MonacoEditor.vue
@@ -151,7 +151,7 @@ export default {
   right: var(--base-left-panel-width);
   z-index: 100;
   padding: 10px 16px 16px 16px;
-  background-color: var(--ti-lowcode-common-component-bg);
+  background-color: var(--te-common-bg-default);
   height: auto !important;
 }
 
diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
index 3709f89730..4242366e4c 100644
--- a/packages/common/component/PluginBlockList.vue
+++ b/packages/common/component/PluginBlockList.vue
@@ -437,7 +437,7 @@ export default {
   gap: 12px;
   overflow-y: auto;
   overflow-x: hidden;
-  color: var(--ti-lowcode-common-secondary-text-color);
+  color: var(--te-common-text-secondary);
 
   .block-item {
     display: flex;
@@ -519,7 +519,7 @@ export default {
     }
 
     &.is-active {
-      background: var(--ti-lowcode-component-block-list-item-active-bg, --ti-lowcode-canvas-wrap-bg);
+      background: var(--ti-lowcode-component-block-list-item-active-bg, --te-common-bg-container);
     }
 
     &.is-disabled {
@@ -601,7 +601,7 @@ export default {
       }
 
       .block-detail-icon {
-        color: var(--ti-lowcode-base-gray-50);
+        color: var(--te-common-icon-secondary);
         &:hover {
           cursor: pointer;
           color: var(--ti-lowcode-component-block-list-setting-btn-hover-color);
diff --git a/packages/common/component/PluginSetting.vue b/packages/common/component/PluginSetting.vue
index 4491fed5c9..e1172327f6 100644
--- a/packages/common/component/PluginSetting.vue
+++ b/packages/common/component/PluginSetting.vue
@@ -124,7 +124,7 @@ export default {
   top: 0;
   width: var(--base-collection-panel-width);
   height: 100%;
-  border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
+  border-right: 1px solid var(--te-common-border-default);
   background: var(--ti-lowcode-plugin-setting-panel-bg, --ti-lowcode-toolbar-bg);
   overflow: hidden;
   border-left: 1px solid var(--ti-lowcode-plugin-panel-header-border-bottom-color);
diff --git a/packages/common/component/ToolbarBase.vue b/packages/common/component/ToolbarBase.vue
index ffc2a1f88b..1272cb4d87 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(--ti-lowcode-toolbar-border-color);
+  color: var(--te-common-border-default);
   margin: 0 4px;
   font-size: 14px;
 }
diff --git a/packages/common/component/VideoGuide.vue b/packages/common/component/VideoGuide.vue
index 825d9d19c7..fbeac0876f 100644
--- a/packages/common/component/VideoGuide.vue
+++ b/packages/common/component/VideoGuide.vue
@@ -50,7 +50,7 @@ export default {
 
 <style lang="less" scoped>
 .block-guide {
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  color: var(--te-common-text-secondary);
   line-height: 2;
   border: none;
   border-color: var(--ti-lowcode-block-video-tip-color);
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 3d22853b73..496e59c3f9 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -176,14 +176,14 @@ const change = (item) => {
       color: var(--te-common-text-weaken);
 
       &:hover {
-        background-color: var(--ti-lowcode-base-gray-101);
-        color: var(--te-common-text-primary);
+        background-color: var(--te-common-bg-prompt);
+        color: var(--te-common-text-secondary);
         border-radius: 4px;
       }
 
       &.selected {
-        background-color: var(--ti-lowcode-base-gray-101);
-        color: var(--te-common-text-primary);
+        background-color: var(--te-common-bg-prompt);
+        color: var(--te-common-text-secondary);
         border-radius: 4px;
       }
     }
diff --git a/packages/design-core/src/preview/src/Toolbar.vue b/packages/design-core/src/preview/src/Toolbar.vue
index 24cc1f0157..008ec2c18c 100644
--- a/packages/design-core/src/preview/src/Toolbar.vue
+++ b/packages/design-core/src/preview/src/Toolbar.vue
@@ -69,7 +69,7 @@ export default {
   width: 100%;
   height: var(--base-top-panel-height);
   text-align: center;
-  background-color: var(--ti-lowcode-common-layout-bg);
+  background-color: var(--te-common-bg-default);
   position: relative;
   z-index: 1001;
   border-bottom: 1px solid var(--ti-lowcode-toolbar-border-bottom-color);
diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
index 27b7c9ee65..2c9f225984 100644
--- a/packages/layout/src/DesignPlugins.vue
+++ b/packages/layout/src/DesignPlugins.vue
@@ -201,7 +201,7 @@ export default {
   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(--ti-lowcode-common-component-bg);
+  background: var(--te-common-bg-default);
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -239,7 +239,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background: var(--ti-lowcode-common-layout-bg);
+  background: var(--te-common-bg-default);
   box-sizing: border-box;
   z-index: 1000;
   border-right: 1px solid var(--ti-lowcode-plugin-panel-border-right-color);
@@ -285,7 +285,7 @@ export default {
         position: relative;
 
         .item-icon {
-          color: var(--ti-lowcode-common-primary-color);
+          color: var(--te-common-text-checked);
         }
       }
 
diff --git a/packages/layout/src/DesignToolbars.vue b/packages/layout/src/DesignToolbars.vue
index 59dd0437c2..2fde3847a2 100644
--- a/packages/layout/src/DesignToolbars.vue
+++ b/packages/layout/src/DesignToolbars.vue
@@ -79,7 +79,7 @@ export default {
   width: 100%;
   height: var(--base-top-panel-height);
   text-align: center;
-  background-color: var(--ti-lowcode-common-layout-bg);
+  background-color: var(--te-common-bg-default);
   position: relative;
   z-index: 1001;
   border-bottom: 1px solid var(--ti-lowcode-toolbar-border-bottom-color);
@@ -137,7 +137,7 @@ export default {
         background: var(--ti-lowcode-toolbar-view-active-bg);
       }
       &.active {
-        color: var(--ti-lowcode-common-primary-color);
+        color: var(--te-common-text-checked);
       }
       &.disabled {
         cursor: not-allowed;
diff --git a/packages/layout/src/ToolbarCollapse.vue b/packages/layout/src/ToolbarCollapse.vue
index 1d648c253b..b38daef1e2 100644
--- a/packages/layout/src/ToolbarCollapse.vue
+++ b/packages/layout/src/ToolbarCollapse.vue
@@ -80,7 +80,7 @@ export default {
 
     .empty-line {
       margin: 4px 0px;
-      border-top: 1px solid var(--ti-lowcode-canvas-wrap-bg);
+      border-top: 1px solid var(--te-common-bg-container);
     }
 
     .icon-hides {
diff --git a/packages/plugins/block/src/BlockConfig.vue b/packages/plugins/block/src/BlockConfig.vue
index 25c13f2045..fc08163f69 100644
--- a/packages/plugins/block/src/BlockConfig.vue
+++ b/packages/plugins/block/src/BlockConfig.vue
@@ -319,7 +319,7 @@ export default {
     line-height: 20px;
     padding-top: 0;
     padding-bottom: 0;
-    border: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
+    border: 1px solid var(--te-common-border-default);
   }
 
   .tiny-input {
diff --git a/packages/plugins/block/src/BlockEventList.vue b/packages/plugins/block/src/BlockEventList.vue
index 8b496e27a0..b148512f81 100644
--- a/packages/plugins/block/src/BlockEventList.vue
+++ b/packages/plugins/block/src/BlockEventList.vue
@@ -78,7 +78,7 @@ export default {
 .add-button {
   padding: 0 0 8px 0;
   :deep(.tiny-button) {
-    border: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
+    border: 1px solid var(--te-common-border-default);
   }
   .icon-plus {
     margin-right: 6px;
diff --git a/packages/plugins/block/src/BlockPropertyForm.vue b/packages/plugins/block/src/BlockPropertyForm.vue
index 8ea1d9834a..27ef7ba430 100644
--- a/packages/plugins/block/src/BlockPropertyForm.vue
+++ b/packages/plugins/block/src/BlockPropertyForm.vue
@@ -270,7 +270,7 @@ export default {
   display: inline-block;
   margin-top: 6px;
   font-size: 12px;
-  color: var(--ti-lowcode-common-primary-color);
+  color: var(--te-common-text-checked);
   cursor: pointer;
 
   .text {
@@ -296,8 +296,8 @@ export default {
   width: 280px;
   height: 100%;
   padding: 20px;
-  background-color: var(--ti-lowcode-common-component-bg);
-  border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
+  background-color: var(--te-common-bg-default);
+  border-right: 1px solid var(--te-common-border-default);
 }
 
 .config-list {
diff --git a/packages/plugins/block/src/BlockPropertyList.vue b/packages/plugins/block/src/BlockPropertyList.vue
index 476ae54dad..d7a2aec43c 100644
--- a/packages/plugins/block/src/BlockPropertyList.vue
+++ b/packages/plugins/block/src/BlockPropertyList.vue
@@ -91,7 +91,7 @@ export default {
     padding: 0 12px;
     width: 66px;
     margin-right: 5px;
-    border: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
+    border: 1px solid var(--te-common-border-default);
   }
   .plus-icon {
     width: 16px;
diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue
index 40bca495e8..ae6e703f2b 100644
--- a/packages/plugins/block/src/Main.vue
+++ b/packages/plugins/block/src/Main.vue
@@ -506,9 +506,9 @@ export default {
   left: -6px;
   right: 0;
   padding: 8px 16px;
-  background-color: var(--ti-lowcode-component-search-bg);
   border-top: 1px solid var(--te-common-border-divider);
-  color: var(--ti-lowcode-component-block-list-item-color);
+  background-color: var(--te-common-bg-default);
+  color: var(--te-common-text-primary);
   display: flex;
   justify-content: space-between;
   :deep(.tiny-dropdown) {
@@ -526,7 +526,7 @@ export default {
   }
   .footer-layout {
     font-size: 12px;
-    color: var(--ti-lowcode-component-block-list-item-color);
+    color: var(--te-common-text-primary);
     .tiny-svg {
       cursor: pointer;
       margin-left: 8px;
@@ -569,7 +569,7 @@ export default {
     .popper__arrow {
       &,
       &::after {
-        border-right-color: var(--ti-lowcode-common-component-hover-bg);
+        border-right-color: var(--te-common-bg-container);
       }
     }
   }
@@ -582,7 +582,7 @@ export default {
     font-size: 12px;
     color: var(--ti-lowcode-materials-block-group-delete-popover-title-color);
     .icon {
-      color: var(--ti-lowcode-warning-color);
+      color: var(--te-common-color-warning);
       width: 16px;
       height: 16px;
     }
diff --git a/packages/plugins/block/src/SaveNewBlock.vue b/packages/plugins/block/src/SaveNewBlock.vue
index 6912fb6a21..9f7d8e751b 100644
--- a/packages/plugins/block/src/SaveNewBlock.vue
+++ b/packages/plugins/block/src/SaveNewBlock.vue
@@ -136,6 +136,6 @@ export default {
 
 <style scoped lang="less">
 .block-tip {
-  color: var(--ti-lowcode-error-tip-color);
+  color: var(--te-common-color-error);
 }
 </style>
diff --git a/packages/plugins/bridge/src/BridgeSetting.vue b/packages/plugins/bridge/src/BridgeSetting.vue
index 47b7998016..4d08477614 100644
--- a/packages/plugins/bridge/src/BridgeSetting.vue
+++ b/packages/plugins/bridge/src/BridgeSetting.vue
@@ -319,7 +319,7 @@ export default {
     color: var(--te-common-text-primary);
     .help-link {
       display: inline-block;
-      color: var(--ti-lowcode-common-primary-color);
+      color: var(--te-common-text-link);
       font-size: 12px;
       margin-left: 16px;
       &:hover {
@@ -354,7 +354,7 @@ export default {
     }
 
     .del:hover {
-      background-color: var(--ti-lowcode-delete-button-hover-bg);
+      background-color: var(--te-common-color-error);
     }
   }
   .cdn-label-wrap {
diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
index 3452ff291f..b44aa703ec 100644
--- a/packages/plugins/i18n/src/Main.vue
+++ b/packages/plugins/i18n/src/Main.vue
@@ -507,7 +507,7 @@ export default {
       margin-top: 13px;
     }
     :deep(.path) {
-      stroke: var(--ti-lowcode-toolbar-breadcrumb-color);
+      stroke: var(--te-common-text-secondary);
     }
   }
   .download-btn {
@@ -517,12 +517,12 @@ export default {
     font-size: 12px;
     text-align: left;
     padding: 0;
-    color: var(--ti-lowcode-base-text-color);
+    color: var(--te-common-text-primary);
     svg {
       font-size: 16px;
     }
     .tiny-button.tiny-button--text {
-      color: var(--ti-lowcode-base-text-color);
+      color: var(--te-common-text-primary);
     }
     &:hover {
       text-decoration: underline;
@@ -558,7 +558,7 @@ export default {
   padding: 20px;
   svg {
     font-size: 20px;
-    color: var(--ti-lowcode-warning-color);
+    color: var(--te-common-color-warning);
   }
   .delete-tip {
     margin-left: 5px;
diff --git a/packages/plugins/materials/src/meta/block/src/BlockDetail.vue b/packages/plugins/materials/src/meta/block/src/BlockDetail.vue
index 0e211e27b2..f54865f86f 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockDetail.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockDetail.vue
@@ -114,7 +114,7 @@ export default {
 <style lang="less" scoped>
 .block-detail-panel {
   width: 228px;
-  background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+  background-color: var(--te-common-bg-container);
   border-radius: 3px;
 
   .block-detail-title {
@@ -124,14 +124,14 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid var(--ti-lowcode-toolbar-popover-color);
+    border-bottom: 1px solid var(--te-common-border-default);
 
     .block-detail-icon {
       width: 20px;
       height: 20px;
       color: var(--ti-lowcode-toolbar-title-color);
-      background: var(--ti-lowcode-canvas-wrap-bg);
-      border: 1px solid var(--ti-lowcode-toolbar-border-color);
+      background: var(--te-common-bg-container);
+      border: 1px solid var(--te-common-border-default);
       font-size: 12px;
       cursor: pointer;
       display: inline-flex;
@@ -151,7 +151,7 @@ export default {
 
   .block-detail-content {
     &:not(:last-child) {
-      border-bottom: 1px solid var(--ti-lowcode-toolbar-border-color);
+      border-bottom: 1px solid var(--te-common-border-default);
     }
 
     .block-detail-history {
@@ -160,9 +160,8 @@ export default {
 
     .block-detail-item {
       padding: 8px 12px;
-      color: var(--ti-lowcode-dialog-font-color);
+      color: var(--te-common-text-primary);
       font-size: 12px;
-
       span {
         margin-right: 4px;
       }
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
index abf841d96c..dcedf23c3c 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
@@ -481,7 +481,7 @@ export default {
     .popper__arrow {
       &,
       &::after {
-        border-right-color: var(--ti-lowcode-common-component-hover-bg);
+        border-right-color: var(--te-common-bg-container);
       }
     }
   }
@@ -494,7 +494,7 @@ export default {
     font-size: 12px;
     color: var(--ti-lowcode-materials-block-group-delete-popover-title-color);
     .icon {
-      color: var(--ti-lowcode-warning-color);
+      color: var(--te-common-color-warning);
       width: 16px;
       height: 16px;
     }
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
index e9c73d8c67..8cbfbd48aa 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
@@ -83,10 +83,10 @@ export default {
     align-items: center;
     transition: 0.3s;
     &:hover {
-      color: var(--ti-lowcode-common-primary-color);
+      color: var(--te-common-text-checked);
     }
     &.active {
-      color: var(--ti-lowcode-common-primary-color);
+      color: var(--te-common-text-checked);
     }
   }
   .icon-wrap + .icon-wrap {
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
index 38a71543e4..416068a4b5 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
@@ -194,7 +194,7 @@ export default {
       margin-left: 8px;
     }
     .footer-text {
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
     }
   }
 }
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue
index cf9ff78686..8309a803e8 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue
@@ -44,7 +44,7 @@ export default {
 <style lang="less" scoped>
 .block-add-transfer-panel {
   height: 100%;
-  border: 1px solid var(--ti-lowcode-component-block-list-border-color);
+  border: 1px solid var(--te-common-border-default);
   border-radius: 6px;
   overflow: hidden;
   background-color: var(--ti-lowcode-materials-block-transfer-bg-color);
diff --git a/packages/plugins/materials/src/meta/block/src/BlockList.vue b/packages/plugins/materials/src/meta/block/src/BlockList.vue
index de6b6613a2..cb22c7aea0 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockList.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockList.vue
@@ -221,21 +221,3 @@ export default {
   }
 }
 </script>
-
-<style lang="less" scoped>
-.block-detail-popover {
-  position: fixed;
-  z-index: 20;
-  .arrow {
-    width: 0;
-    height: 0;
-    border: 10px solid transparent;
-    border-bottom-color: var(--ti-lowcode-toolbar-view-hover-bg);
-    display: inline-block;
-    position: absolute;
-    top: -20px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-</style>
diff --git a/packages/plugins/materials/src/meta/component/src/Main.vue b/packages/plugins/materials/src/meta/component/src/Main.vue
index 06c98dc05c..a4b0fb13b4 100644
--- a/packages/plugins/materials/src/meta/component/src/Main.vue
+++ b/packages/plugins/materials/src/meta/component/src/Main.vue
@@ -151,7 +151,7 @@ export default {
       text-align: center;
       user-select: none;
       cursor: move;
-      background: var(--ti-lowcode-common-component-bg);
+      background: var(--te-common-bg-default);
 
       &:hover {
         background: var(--ti-lowcode-material-component-list-hover-bg);
@@ -164,7 +164,7 @@ export default {
         svg {
           font-size: 40px;
           vertical-align: middle;
-          color: var(--ti-lowcode-component-icon-color);
+          color: var(--te-common-icon-secondary);
           overflow: hidden;
         }
       }
diff --git a/packages/plugins/page/src/PageInputOutput.vue b/packages/plugins/page/src/PageInputOutput.vue
index 83663c81b7..de99e0ad84 100644
--- a/packages/plugins/page/src/PageInputOutput.vue
+++ b/packages/plugins/page/src/PageInputOutput.vue
@@ -128,7 +128,7 @@ export default {
     margin-top: 12px;
   }
   .edit-btn-icon {
-    color: var(--ti-lowcode-common-text-main-color);
+    color: var(--te-common-text-secondary);
     margin-right: 6px;
   }
   :deep(.edit-btn) {
diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue
index b3568420c3..f87bcb1aa3 100644
--- a/packages/plugins/page/src/PageSetting.vue
+++ b/packages/plugins/page/src/PageSetting.vue
@@ -393,12 +393,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tiny-search {
-  padding: 10px;
-  border-top: 1px solid var(--ti-lowcode-page-manage-tip-border-color);
-  border-bottom: 1px solid var(--ti-lowcode-page-manage-tip-border-color);
-}
-
 .block-add-content {
   display: flex;
   flex-direction: column;
diff --git a/packages/plugins/schema/src/Main.vue b/packages/plugins/schema/src/Main.vue
index d9cde77e1c..e5531060ee 100644
--- a/packages/plugins/schema/src/Main.vue
+++ b/packages/plugins/schema/src/Main.vue
@@ -174,7 +174,7 @@ export default {
   position: fixed;
   top: var(--base-top-panel-height);
   left: 41px;
-  background: var(--ti-lowcode-common-component-bg);
+  background: var(--te-common-bg-default);
   box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3);
   z-index: 1000;
   .source-code-header {
@@ -221,7 +221,7 @@ export default {
   }
   .source-code-content {
     height: calc(100% - 42px);
-    border: 1px solid var(--ti-lowcode-base-gray-101);
+    border: 1px solid var(--te-common-border-divider);
     border-radius: 4px;
     margin: 0 12px;
   }
diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
index 12c8356488..e4a71b6235 100644
--- a/packages/plugins/script/src/Main.vue
+++ b/packages/plugins/script/src/Main.vue
@@ -169,7 +169,7 @@ export default {
     height: calc(100% - 54px);
 
     & > div {
-      border: 1px solid var(--ti-lowcode-base-gray-101);
+      border: 1px solid var(--te-common-border-divider);
       border-radius: 4px;
       height: 100%;
     }
diff --git a/packages/plugins/state/src/CreateRemoteAPI.vue b/packages/plugins/state/src/CreateRemoteAPI.vue
index f5fedafe19..c8ad2bcee1 100644
--- a/packages/plugins/state/src/CreateRemoteAPI.vue
+++ b/packages/plugins/state/src/CreateRemoteAPI.vue
@@ -190,7 +190,7 @@ export default {
   padding: 12px;
 
   .error-tip {
-    color: var(--ti-lowcode-error-tip-color);
+    color: var(--te-common-color-error);
     margin-top: 4px;
     font-size: 12px;
   }
@@ -240,24 +240,24 @@ export default {
     align-items: center;
     padding: 8px 12px;
     background: var(--ti-lowcode-toolbar-bg);
-    border-top: 1px solid var(--ti-lowcode-toolbar-border-color);
-    border-bottom: 1px solid var(--ti-lowcode-toolbar-border-color);
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    border-top: 1px solid var(--te-common-border-default);
+    border-bottom: 1px solid var(--te-common-border-default);
+    color: var(--te-common-text-secondary);
   }
 
   .use-service {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     font-size: 12px;
     margin-top: 10px;
 
     span {
-      color: var(--ti-lowcode-description-error-color);
+      color: var(--te-common-color-error);
     }
   }
 
   .send-service {
     text-align: right;
-    border-top: 1px solid var(--ti-lowcode-toolbar-border-color);
+    border-top: 1px solid var(--te-common-border-default);
     padding: 20px 10px;
     margin-bottom: 10px;
 
@@ -297,7 +297,7 @@ export default {
     .icon {
       width: 20px;
       height: 20px;
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
       font-size: 16px;
       border-radius: 2px;
       margin-right: 8px;
diff --git a/packages/plugins/state/src/CreateStore.vue b/packages/plugins/state/src/CreateStore.vue
index 925d023d6c..dd57a4a8ef 100644
--- a/packages/plugins/state/src/CreateStore.vue
+++ b/packages/plugins/state/src/CreateStore.vue
@@ -291,7 +291,7 @@ export default {
 
 .create-content-description {
   font-size: 12px;
-  color: var(--ti-lowcode-common-primary-color);
+  color: var(--te-common-text-emphasize);
   margin-left: 8px;
   cursor: pointer;
 }
diff --git a/packages/plugins/state/src/CreateVariable.vue b/packages/plugins/state/src/CreateVariable.vue
index eb8693d683..8d0d87bf90 100644
--- a/packages/plugins/state/src/CreateVariable.vue
+++ b/packages/plugins/state/src/CreateVariable.vue
@@ -489,7 +489,7 @@ export default {
 
 .create-content-description {
   font-size: 12px;
-  color: var(--ti-lowcode-common-primary-color);
+  color: var(--te-common-text-emphasize);
   margin-left: 8px;
   cursor: pointer;
 }
@@ -507,24 +507,3 @@ export default {
   }
 }
 </style>
-
-<style lang="less">
-.tiny-popover.tiny-popper.state-data-example-tips {
-  background-color: var(--ti-lowcode-data-example-bg-color);
-  color: var(--ti-lowcode-data-example-color);
-
-  &[x-placement^='bottom'] .popper__arrow {
-    &,
-    &::after {
-      border-bottom-color: var(--ti-lowcode-data-example-bg-color);
-    }
-  }
-
-  &[x-placement^='top'] .popper__arrow {
-    &,
-    &::after {
-      border-top-color: var(--ti-lowcode-data-example-bg-color);
-    }
-  }
-}
-</style>
diff --git a/packages/plugins/state/src/DataSourceList.vue b/packages/plugins/state/src/DataSourceList.vue
index ba4b21a5da..221d651ae7 100644
--- a/packages/plugins/state/src/DataSourceList.vue
+++ b/packages/plugins/state/src/DataSourceList.vue
@@ -119,19 +119,16 @@ export default {
   padding-top: 12px;
   border-top: 1px solid var(--te-common-border-divider);
   overflow-y: scroll;
-  .data-source-list-blank {
-    font-size: 12px;
-  }
   .data-source-list-item {
     &.selected,
     &:hover {
-      background: var(--ti-lowcode-common-component-hover-bg);
+      background: var(--te-common-bg-container);
       .item-head-right {
         display: flex;
         justify-content: flex-end;
         width: 30%;
         .svg-button {
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
+          color: var(--te-common-text-secondary);
           font-size: 14px;
           cursor: pointer;
 
@@ -203,18 +200,13 @@ export default {
     p span {
       &:first-child {
         font-size: 14;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
       }
 
       &:last-child {
-        color: var(--ti-lowcode-dialog-font-color);
+        color: var(--te-common-text-primary);
       }
     }
   }
-  &-blank {
-    color: var(--ti-lowcode-state-management-query-color);
-    text-align: center;
-    padding-top: 30px;
-  }
 }
 </style>
diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
index 94cd4ed340..4acba97a41 100644
--- a/packages/plugins/state/src/Main.vue
+++ b/packages/plugins/state/src/Main.vue
@@ -452,9 +452,9 @@ export default {
   .data-source-right-panel {
     width: 492px;
     height: 100%;
-    border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
-    background: var(--ti-lowcode-common-component-bg);
     box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3);
+    border-right: 1px solid var(--te-common-border-divider);
+    background: var(--te-common-bg-default);
     position: absolute;
     left: var(--base-left-panel-width);
     top: 0;
@@ -467,8 +467,8 @@ export default {
       padding: 0 12px;
       font-size: 12px;
       font-weight: 700;
-      color: var(--te-common-text-primary);
-      background: var(--ti-lowcode-common-component-bg);
+      color: var(--ti-lowcode-data-source-color);
+      background: var(--te-common-bg-default);
       border-bottom: 1px solid var(--ti-lowcode-data-header-border-bottom-color);
       .options-wrap {
         display: flex;
@@ -505,21 +505,12 @@ export default {
   :deep(.tiny-tabs__item) {
     flex: 1 1 auto;
     text-align: center;
-    color: var(--ti-lowcode-common-primary-text-color);
-    &:not(.is-active) {
-      background-color: var(--ti-lowcode-data-radio-group-bg);
-    }
   }
 
   :deep(.tiny-tabs__nav) {
     float: none;
     display: flex;
     flex-wrap: wrap;
-    .tiny-tabs__item {
-      &.is-active {
-        background-color: var(--ti-lowcode-data-radio-group-active-bg);
-      }
-    }
   }
 
   :deep(.tiny-tabs__content) {
diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 130cc688a0..246409758b 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -332,24 +332,20 @@ export default {
         width: 14px;
         height: 14px;
         margin-bottom: 2px;
-
-        &:hover {
-          color: var(--ti-lowcode-tree-icon-hover-color);
-        }
       }
     }
   }
 
   :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__row) {
-    background-color: var(--ti-lowcode-common-component-bg);
+    background-color: var(--te-common-bg-default);
     &:hover {
-      background-color: var(--ti-lowcode-common-component-hover-bg);
+      background-color: var(--te-common-bg-container);
     }
   }
   :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__row:not(.row__hover):nth-child(2n)) {
-    background-color: var(--ti-lowcode-common-component-bg);
+    background-color: var(--te-common-bg-default);
     &:hover {
-      background-color: var(--ti-lowcode-common-component-hover-bg);
+      background-color: var(--te-common-bg-container);
     }
   }
   :deep(.tiny-grid-body__row.nav-tree .tiny-grid-cell) {
diff --git a/packages/plugins/tutorial/src/TutorialVideoPanel.vue b/packages/plugins/tutorial/src/TutorialVideoPanel.vue
index ac17ff157f..d8e5404b25 100644
--- a/packages/plugins/tutorial/src/TutorialVideoPanel.vue
+++ b/packages/plugins/tutorial/src/TutorialVideoPanel.vue
@@ -95,13 +95,13 @@ export default {
   }
 
   .content {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     line-height: 25px;
     text-indent: 24px;
     padding-top: 20px;
   }
   :deep(.md) {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     ul {
       padding-left: 20px;
     }
diff --git a/packages/toolbars/collaboration/src/Main.vue b/packages/toolbars/collaboration/src/Main.vue
index 6e32284633..ef3aba6df5 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(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     line-height: 18px;
     font-weight: 600;
   }
@@ -142,7 +142,7 @@ export default {
 
     .user-item-name {
       font-size: 14px;
-      color: var(--ti-lowcode-dialog-font-color);
+      color: var(--te-common-text-primary);
       line-height: 16px;
       font-weight: 400;
       margin: 0 4px 0 8px;
@@ -168,16 +168,5 @@ export default {
     z-index: 9;
     border: 1px solid var(--ti-lowcode-toolbar-user-img-border-color);
   }
-
-  .user-count {
-    height: 20px;
-    width: 20px;
-    color: var(--ti-lowcode-toolbar-icon-color);
-    background-color: var(--ti-lowcode-user-header-bg);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 }
 </style>
diff --git a/packages/toolbars/generate-code/src/FileSelector.vue b/packages/toolbars/generate-code/src/FileSelector.vue
index 9019806721..d220de8fb1 100644
--- a/packages/toolbars/generate-code/src/FileSelector.vue
+++ b/packages/toolbars/generate-code/src/FileSelector.vue
@@ -120,27 +120,27 @@ export default {
 <style lang="less" scoped>
 .dialog-box {
   :deep(.tiny-dialog-box__content) {
-    background-color: var(--ti-lowcode-common-component-bg);
+    background-color: var(--te-common-bg-default);
 
     .tiny-dialog-box__header {
-      background-color: var(--ti-lowcode-common-component-bg);
+      background-color: var(--te-common-bg-default);
 
       .tiny-dialog-box__title {
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
       }
 
       .tiny-dialog-box__headerbtn .tiny-dialog-box__close {
-        fill: var(--ti-lowcode-toolbar-breadcrumb-color) !important;
+        fill: var(--te-common-text-secondary) !important;
 
         &:hover {
-          fill: var(--ti-lowcode-common-primary-text-color) !important;
+          fill: var(--te-common-text-primary) !important;
         }
       }
     }
 
     .tiny-dialog-box__footer {
       .tiny-button--primary {
-        background-color: var(--ti-lowcode-common-danger-color, #191919;);
+        background-color: var(--te-common-bg-primary);
         border: none;
       }
     }
@@ -163,24 +163,19 @@ export default {
 
     :deep(.tiny-grid) {
       .tiny-grid__header-wrapper {
-        background-color: var(--ti-lowcode-toolbar-view-hover-bg);
-
         .tiny-grid-header__column {
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
+          color: var(--te-common-text-secondary);
           height: 30px;
 
           .tiny-grid-resizable.is__line:before {
-            background-color: var(--ti-lowcode-common-component-bg);
+            background-color: var(--te-common-bg-default);
           }
         }
 
-        .tiny-grid__repair {
-          border-color: var(--ti-lowcode-tabs-border-color);
-        }
-
-        .tiny-grid-checkbox__icon {
+        .tiny-grid-checkbox__icon,
+        .icon-checked-sur {
           svg {
-            color: var(--ti-lowcode-common-primary-color);
+            color: var(--te-common-border-checked) !important;
           }
         }
       }
@@ -205,30 +200,14 @@ export default {
         }
 
         .tiny-grid-body__row {
-          background-color: var(--ti-lowcode-common-component-bg);
-        }
-
-        .tiny-grid-body__row,
-        .tiny-grid-body__row:not(.row__hover):nth-child(2n) {
-          background-image: linear-gradient(
-            -180deg,
-            var(--ti-lowcode-new-table-row-sepline-background),
-            var(--ti-lowcode-new-table-row-sepline-background)
-          );
-          background-repeat: no-repeat;
-          background-size: 100% 1px;
-          background-position: 100% 100%;
-
-          &.row__current {
-            background-color: var(--ti-lowcode-toolbar-view-hover-bg);
-          }
+          background-color: var(--te-common-bg-default);
         }
 
         .tiny-grid-body__row {
           &.row__selected {
             .tiny-grid-checkbox__icon {
               svg {
-                color: var(--ti-lowcode-common-primary-color);
+                color: var(--te-common-border-checked);
                 width: 100%;
                 height: 100%;
               }
@@ -238,7 +217,7 @@ export default {
       }
 
       .tiny-grid__empty-text {
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
       }
     }
   }
diff --git a/packages/toolbars/logo/src/Main.vue b/packages/toolbars/logo/src/Main.vue
index c286ab35c9..5d5a451a1c 100644
--- a/packages/toolbars/logo/src/Main.vue
+++ b/packages/toolbars/logo/src/Main.vue
@@ -428,7 +428,7 @@ onUnmounted(() => {
       }
 
       &:hover {
-        background: var(--ti-lowcode-toolbar-view-hover-bg);
+        background: var(--te-common-bg-container);
       }
     }
   }
diff --git a/packages/toolbars/logout/src/Main.vue b/packages/toolbars/logout/src/Main.vue
index e9db18941a..c990d7e127 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(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
   }
 }
 </style>
diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue
index 3f059af9f4..8efc91778b 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(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     display: inline-block;
 
     & > span {
@@ -465,7 +465,7 @@ export default {
       }
       &.active {
         svg {
-          color: var(--ti-lowcode-common-primary-color);
+          color: var(--te-common-text-checked);
         }
       }
     }

From 16dab59686a77d5d2b4d9d204b50da0355d99214 Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Tue, 14 Jan 2025 16:03:08 +0800
Subject: [PATCH 2/2] feat(refactor/theme): change incorrect css variables to
 the common variable review

---
 packages/common/component/PluginBlockList.vue | 2 +-
 packages/plugins/state/src/Main.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
index 4ab8bbbfcb..326513312b 100644
--- a/packages/common/component/PluginBlockList.vue
+++ b/packages/common/component/PluginBlockList.vue
@@ -519,7 +519,7 @@ export default {
     }
 
     &.is-active {
-      background: var(--ti-lowcode-component-block-list-item-active-bg, --te-common-bg-container);
+      background: var(--ti-lowcode-component-block-list-item-active-bg);
     }
 
     &.is-disabled {
diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
index 60c53d0785..152f5372e8 100644
--- a/packages/plugins/state/src/Main.vue
+++ b/packages/plugins/state/src/Main.vue
@@ -471,7 +471,7 @@ export default {
       padding: 0 12px;
       font-size: 12px;
       font-weight: 700;
-      color: var(--ti-lowcode-data-source-color);
+      color: var(--te-common-text-primary);
       background: var(--te-common-bg-default);
       border-bottom: 1px solid var(--ti-lowcode-data-header-border-bottom-color);
       .options-wrap {