From d1fb8d84c9b953f729b6c30dd89e36d81c633abb Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Fri, 6 Dec 2024 14:37:32 +0800
Subject: [PATCH] feat(theme/datasource&setting): change datasource and setting
 panel theme variable

---
 .../CodeListConfigurator.vue                  |   2 +-
 .../HtmlAttributesConfigurator.vue            |   6 +-
 .../input-configurator/InputConfigurator.vue  |   2 +-
 .../LayoutGridConfigurator.vue                |  10 +-
 .../SelectIconConfigurator.vue                |   6 +-
 .../SliderConfigurator.vue                    |   6 +-
 .../slot-configurator/SlotConfigurator.vue    |   2 +-
 .../src/configurators/MyInputConfigurator.vue |   2 +-
 .../datasource/src/DataSourceField.vue        |   4 +-
 .../plugins/datasource/src/DataSourceList.vue |   2 +-
 .../datasource/src/DataSourceRecordList.vue   |   5 +-
 .../src/DataSourceRemoteDataResult.vue        |   2 +-
 .../datasource/src/DataSourceRemoteForm.vue   |  15 ---
 .../datasource/src/DataSourceRemotePanel.vue  |  13 --
 .../src/DataSourceRemoteParameter.vue         |   2 +-
 .../datasource/src/DataSourceTemplate.vue     |   4 +-
 .../plugins/datasource/src/DataSourceType.vue |   2 +-
 .../datasource/src/RemoteDataAdapterForm.vue  |   7 +-
 .../src/meta/block/src/BlockGroupSort.vue     |   4 +-
 .../state/src/DataSourceRightPanel.vue        |   6 +-
 packages/settings/design/src/App.vue          |   7 +-
 .../src/components/ArrayConfigItemForm.vue    |   8 +-
 .../design/src/components/PropertyCanvas.vue  |  18 +--
 .../design/src/components/PropertyList.vue    |   2 +-
 .../design/src/components/SettingPanel.vue    |  18 +--
 .../components/BindEventsDialogContent.vue    |   8 +-
 .../settings/props/src/components/Empty.vue   |   2 +-
 .../props/src/components/groups/LifeCycle.vue |  12 +-
 .../src/components/groups/TableColumn.vue     |   2 +-
 .../src/components/groups/TablePager.vue      |   2 +-
 .../components/inputs/DraggableOptions.vue    |   2 +-
 .../src/components/inputs/NumericSelect.vue   |   1 -
 packages/settings/styles/src/Main.vue         |   2 +-
 .../components/background/BackgroundGroup.vue |   2 +-
 .../components/background/ImageSetting.vue    |   6 +-
 .../components/background/RadialGradient.vue  |   2 +-
 .../src/components/border/BorderGroup.vue     |   2 +-
 .../components/classNamesContainer/index.vue  |   2 +-
 .../src/components/inputs/ImageSelect.vue     |   2 +-
 .../src/components/inputs/InputSelect.vue     |   2 +-
 .../src/components/inputs/ModalMask.vue       |   2 +-
 .../src/components/inputs/NumericSelect.vue   |   2 +-
 .../styles/src/components/layout/GridBox.vue  |   5 +
 .../src/components/layout/LayoutGroup.vue     |  46 +------
 .../styles/src/components/size/SizeGroup.vue  |   3 +-
 .../src/components/spacing/SpacingGroup.vue   | 118 +++++++++++-------
 .../src/components/spacing/SpacingSetting.vue |  10 +-
 .../components/typography/TypographyGroup.vue |   1 +
 .../components/typography/TypographyMore.vue  |   9 +-
 packages/theme/dark/datasource.less           |  79 ++++++------
 packages/theme/dark/settings.less             |  56 ++++-----
 packages/theme/light/datasource.less          |  84 ++++++-------
 packages/theme/light/settings.less            |  54 ++++----
 53 files changed, 304 insertions(+), 369 deletions(-)

diff --git a/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue b/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
index 77648be5a..94623e86d 100644
--- a/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
+++ b/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
@@ -220,7 +220,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/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue b/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
index e503e11cf..5b9aa6df5 100644
--- a/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
+++ b/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
@@ -195,8 +195,8 @@ export default {
     width: 24px;
     height: 24px;
     font-size: 16px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-    background: var(--ti-lowcode-canvas-wrap-bg);
+    color: var(--te-common-text-secondary);
+    background: var(--te-common-bg-container);
     border: 1px solid var(--ti-lowcode-left-button-border-color);
     border-radius: 2px;
     display: inline-flex;
@@ -223,7 +223,7 @@ export default {
     border: 1px solid var(--ti-lowcode-optionitem-border-color);
     background: var(--ti-lowcode-optionitem-background-color);
     margin-bottom: -1px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     padding: 7px;
     display: grid;
     grid-template-columns: 3fr auto;
diff --git a/packages/configurator/src/input-configurator/InputConfigurator.vue b/packages/configurator/src/input-configurator/InputConfigurator.vue
index 37d869347..f2d28ca2f 100644
--- a/packages/configurator/src/input-configurator/InputConfigurator.vue
+++ b/packages/configurator/src/input-configurator/InputConfigurator.vue
@@ -66,7 +66,7 @@ export default {
   font-size: 16px;
   &:hover {
     cursor: pointer;
-    color: var(--ti-lowcode-dialog-font-color);
+    color: var(--te-common-text-primary);
   }
 }
 </style>
diff --git a/packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue b/packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue
index b11b6c368..587eff76e 100644
--- a/packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue
+++ b/packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue
@@ -268,7 +268,7 @@ export default {
       box-sizing: border-box;
       width: 48px;
       border: 1px solid var(--ti-lowcode-tabs-border-color);
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
       border-radius: 4px;
       padding: 4px;
       margin: 0 4px 4px 4px;
@@ -313,13 +313,13 @@ export default {
     justify-content: center;
     align-items: center;
     display: flex;
-    background: var(--ti-lowcode-canvas-wrap-bg);
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    background: var(--te-common-bg-container);
+    color: var(--te-common-text-secondary);
     transition: none;
   }
 
   :deep(.splitpanes__splitter) {
-    background: var(--ti-lowcode-toolbar-view-hover-bg);
+    background: var(--te-common-bg-container);
     border-left: var(--ti-lowcode-tabs-border-color);
   }
 
@@ -328,7 +328,7 @@ export default {
 
     .customize {
       margin-bottom: 8px;
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
     }
   }
 }
diff --git a/packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue b/packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue
index d428041cc..f8ad2fd8a 100644
--- a/packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue
+++ b/packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue
@@ -107,15 +107,15 @@ export default {
   padding-right: 20px;
   width: 136px;
   cursor: pointer;
-  background: var(--ti-lowcode-tabs-bg);
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  background: var(--te-common-bg-prompt);
+  color: var(--te-common-text-secondary);
   border: 1px solid var(--ti-lowcode-tabs-active-bg);
   border-radius: 3px;
   .icon-box {
     border-right: 1px solid var(--ti-lowcode-tabs-active-bg);
     padding: 4px 8px;
     .tiny-svg {
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
       font-size: 14px;
     }
   }
diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index e9ffb6ca8..269355087 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -95,7 +95,7 @@ export default {
     height: 3px;
     width: 100%;
     border-radius: 2px;
-    background-color: var(--ti-lowcode-canvas-wrap-bg);
+    background-color: var(--te-common-bg-container);
     .tiny-slider__handle {
       width: 10px;
       height: 10px;
@@ -103,14 +103,14 @@ export default {
       border-radius: 50%;
       border: none;
       cursor: ew-resize;
-      background-color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      background-color: var(--te-common-text-secondary);
       box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 0px 0.5px;
     }
     .tiny-slider__range {
       height: 3px;
       border-radius: 3px;
       margin-top: 0;
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
     }
 
     .tiny-slider__tips {
diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
index 6e4989a03..f08435757 100644
--- a/packages/configurator/src/slot-configurator/SlotConfigurator.vue
+++ b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
@@ -141,7 +141,7 @@ export default {
   }
   .slot-name {
     width: 30%;
-    color: var(--ti-lowcode-dialog-font-color);
+    color: var(--te-common-text-primary);
     font-size: 12px;
     display: flex;
     justify-content: space-between;
diff --git a/packages/engine-cli/template/designer/src/configurators/MyInputConfigurator.vue b/packages/engine-cli/template/designer/src/configurators/MyInputConfigurator.vue
index 47a9b11e5..26dbd6be8 100644
--- a/packages/engine-cli/template/designer/src/configurators/MyInputConfigurator.vue
+++ b/packages/engine-cli/template/designer/src/configurators/MyInputConfigurator.vue
@@ -57,7 +57,7 @@ export default {
   font-size: 16px;
   &:hover {
     cursor: pointer;
-    color: var(--ti-lowcode-dialog-font-color);
+    color: var(--te-common-text-primary);
   }
 }
 </style>
diff --git a/packages/plugins/datasource/src/DataSourceField.vue b/packages/plugins/datasource/src/DataSourceField.vue
index 167458df4..88e5227b4 100644
--- a/packages/plugins/datasource/src/DataSourceField.vue
+++ b/packages/plugins/datasource/src/DataSourceField.vue
@@ -186,10 +186,10 @@ export default {
         align-items: center;
 
         &.field-row-add {
-          color: var(--ti-lowcode-datasource-json-border-colorr);
+          color: var(--ti-lowcode-datasource-json-border-color);
 
           svg {
-            color: var(--ti-lowcode-datasource-json-border-colorr);
+            color: var(--ti-lowcode-datasource-json-border-color);
           }
         }
       }
diff --git a/packages/plugins/datasource/src/DataSourceList.vue b/packages/plugins/datasource/src/DataSourceList.vue
index 631b84736..9676700ec 100644
--- a/packages/plugins/datasource/src/DataSourceList.vue
+++ b/packages/plugins/datasource/src/DataSourceList.vue
@@ -152,7 +152,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      color: var(--ti-lowcode-base-gray-90);
+      color: var(--te-common-text-primary);
       .item-name {
         display: flex;
         align-items: center;
diff --git a/packages/plugins/datasource/src/DataSourceRecordList.vue b/packages/plugins/datasource/src/DataSourceRecordList.vue
index f24d2868e..d23a72c8d 100644
--- a/packages/plugins/datasource/src/DataSourceRecordList.vue
+++ b/packages/plugins/datasource/src/DataSourceRecordList.vue
@@ -615,7 +615,7 @@ export default {
     font-size: 12px;
     text-align: left;
     padding: 0;
-    color: var(--ti-lowcode-base-text-color);
+    color: var(--te-common-text-primary);
     .icon-download {
       margin: 0 1px 4px 0;
       font-size: 16px;
@@ -631,10 +631,9 @@ export default {
   .empty-icon {
     width: 50px;
     height: 50px;
-    color: var(--ti-lowcode-datasource-common-empty-color);
   }
   .add-column {
-    color: var(--ti-lowcode-datasource-json-border-colorr);
+    color: var(--ti-lowcode-datasource-json-border-color);
     cursor: pointer;
   }
 }
diff --git a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
index 5cdf2319e..e15f0e9c0 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
@@ -123,7 +123,7 @@ export default {
   .monaco-editor {
     height: 120px;
     margin-top: 8px;
-    border: 1px solid var(--ti-lowcode-base-gray-101);
+    border: 1px solid var(--te-common-border-divider);
     border-radius: 4px;
   }
 }
diff --git a/packages/plugins/datasource/src/DataSourceRemoteForm.vue b/packages/plugins/datasource/src/DataSourceRemoteForm.vue
index 9bee5dcdd..fe2f01614 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteForm.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteForm.vue
@@ -100,18 +100,6 @@ export default {
       width: 100px;
       border: none;
     }
-    :deep(.tiny-input-group__prepend) {
-      background: var(--ti-lowcode-datasource-respones-select-color-bg);
-      border-color: var(--ti-lowcode-datasource-select-border-color);
-      .tiny-input-suffix {
-        .tiny-input-display-only {
-          .tiny-input__inner {
-            border-color: var(--ti-lowcode-datasource-select-border-right-color-bg);
-            border-left: none;
-          }
-        }
-      }
-    }
     :deep(.tiny-input-suffix) {
       width: 100px;
       .tiny-input__inner {
@@ -123,9 +111,6 @@ export default {
       border: none;
       background: var(--ti-lowcode-datasource-respones-color-bg);
     }
-    .requestBtn {
-      color: var(--ti-lowcode-datasource-respones-border-color-bg);
-    }
     :deep(.border-input) {
       input {
         border-radius: 0;
diff --git a/packages/plugins/datasource/src/DataSourceRemotePanel.vue b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
index e39ecacdc..6d4d4f580 100644
--- a/packages/plugins/datasource/src/DataSourceRemotePanel.vue
+++ b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
@@ -305,19 +305,6 @@ export default {
       :deep(.tiny-tabs__content) {
         margin: 12px 0;
       }
-      :deep(.is-active) {
-        .tiny-tabs__item__title {
-          color: var(--ti-lowcode-datasource-tabs-bottom-border-color);
-        }
-      }
-      :deep(.tiny-tabs__item__title) {
-        font-size: 14px;
-      }
-    }
-    :deep(.tiny-tabs__item__title) {
-      margin-right: 20px;
-      margin-left: 15px;
-      color: var(--ti-lowcode-datasource-label-color);
     }
   }
 }
diff --git a/packages/plugins/datasource/src/DataSourceRemoteParameter.vue b/packages/plugins/datasource/src/DataSourceRemoteParameter.vue
index 18e8727a5..9fd88ef83 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteParameter.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteParameter.vue
@@ -43,7 +43,7 @@ export default {
 .monaco-editor {
   height: 180px;
   margin-top: 8px;
-  border: 1px solid var(--ti-lowcode-base-gray-101);
+  border: 1px solid var(--te-common-border-divider);
   border-radius: 4px;
 }
 </style>
diff --git a/packages/plugins/datasource/src/DataSourceTemplate.vue b/packages/plugins/datasource/src/DataSourceTemplate.vue
index e3c49d068..8c9a998f1 100644
--- a/packages/plugins/datasource/src/DataSourceTemplate.vue
+++ b/packages/plugins/datasource/src/DataSourceTemplate.vue
@@ -79,7 +79,7 @@ export default {
       }
     }
     .blue::before {
-      border: 1px solid var(--ti-lowcode-datasource-json-border-colorr);
+      border: 1px solid var(--ti-lowcode-datasource-json-border-color);
     }
 
     .green::before {
@@ -105,7 +105,7 @@ export default {
     .tiny-button {
       color: var(--ti-lowcode-datasource-toolbar-breadcrumb-color);
       &.tiny-button--primary {
-        border-color: var(--ti-lowcode-datasource-common-primary-color);
+        border-color: var(--ti-lowcode-datasource-common-border-primary-color);
       }
 
       &.tiny-button--success {
diff --git a/packages/plugins/datasource/src/DataSourceType.vue b/packages/plugins/datasource/src/DataSourceType.vue
index 95d137a49..58f245e44 100644
--- a/packages/plugins/datasource/src/DataSourceType.vue
+++ b/packages/plugins/datasource/src/DataSourceType.vue
@@ -117,7 +117,7 @@ export default {
     &.is-checked {
       color: var(--ti-lowcode-datasource-toolbar-breadcrumb-color);
       .svg-icon {
-        color: var(--ti-lowcode-datasource-common-primary-color);
+        color: var(--ti-lowcode-datasource-common-border-primary-color);
       }
     }
     .svg-icon {
diff --git a/packages/plugins/datasource/src/RemoteDataAdapterForm.vue b/packages/plugins/datasource/src/RemoteDataAdapterForm.vue
index 464e7cc9b..88f1be948 100644
--- a/packages/plugins/datasource/src/RemoteDataAdapterForm.vue
+++ b/packages/plugins/datasource/src/RemoteDataAdapterForm.vue
@@ -55,12 +55,11 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 8px 12px;
-  background: var(--ti-lowcode-datasource-toolbar-bg);
   margin-top: 12px;
-  font-size: 14px;
+  font-size: 12px;
 
   div {
-    color: var(--ti-lowcode-datasource-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
   }
 
   .icon-del {
@@ -73,7 +72,7 @@ export default {
   min-height: 120px;
   height: 100%;
   margin-top: 8px;
-  border: 1px solid var(--ti-lowcode-base-gray-101);
+  border: 1px solid var(--te-common-border-divider);
   border-radius: 4px;
 }
 </style>
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue
index f5c2dd263..df5dc988d 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue
@@ -78,11 +78,11 @@ export default {
 
 <style lang="less" scoped>
 .sort-text {
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  color: var(--te-common-text-secondary);
   margin-right: 6px;
 }
 .sort-caret {
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  color: var(--te-common-text-secondary);
   cursor: pointer;
 }
 
diff --git a/packages/plugins/state/src/DataSourceRightPanel.vue b/packages/plugins/state/src/DataSourceRightPanel.vue
index 578e5d9c3..c64868977 100644
--- a/packages/plugins/state/src/DataSourceRightPanel.vue
+++ b/packages/plugins/state/src/DataSourceRightPanel.vue
@@ -113,7 +113,7 @@ export default {
 .data-source-right-panel {
   width: 442px;
   height: 100%;
-  border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
+  border-right: 1px solid var(--te-common-border-divider);
   background: var(--ti-lowcode-toolbar-bg);
   position: absolute;
   left: calc(var(--base-left-panel-width) - 6px);
@@ -126,8 +126,8 @@ export default {
     height: 45px;
     padding: 0 12px;
     color: var(--ti-lowcode-toolbar-icon-color);
-    background: var(--ti-lowcode-toolbar-view-hover-bg);
-    border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
+    background: var(--te-common-bg-container);
+    border-bottom: 1px solid var(--te-common-border-divider);
   }
 }
 </style>
diff --git a/packages/settings/design/src/App.vue b/packages/settings/design/src/App.vue
index 6f70c0610..1e3c55f17 100644
--- a/packages/settings/design/src/App.vue
+++ b/packages/settings/design/src/App.vue
@@ -97,14 +97,9 @@ export default {
 
 <style lang="less">
 :root {
-  --ti-lowcode-common-primary-color: #5e7ce0;
-  --ti-lowcode-common-text-title-color: #252b3a;
   --ti-lowcode-common-secondary-text-color: #adb0b8;
-  --ti-lowcode-common-text-main-color: #575d6c;
-  --ti-lowcode-design-plugin-color: #8a8e99;
   --ti-lowcode-common-border-color: #dfe1e6;
   --ti-lowcode-common-hover-bg-color: #f2f5fc;
-  --ti-lowcode-title-color: #333;
   --ti-lowcode-mask-bg: #fafafa;
   --max-height: calc(65vh - 70px);
 }
@@ -189,7 +184,7 @@ td {
   .source-code {
     --ti-lowcode-toolbar-bg: var(--ti-lowcode-mask-bg);
     .tiny-button {
-      --ti-button-info-normal-bg-color: var(--ti-lowcode-common-primary-color);
+      --ti-button-info-normal-bg-color: var(--te-common-color-info);
     }
   }
 }
diff --git a/packages/settings/design/src/components/ArrayConfigItemForm.vue b/packages/settings/design/src/components/ArrayConfigItemForm.vue
index 977dc5e67..c80612269 100644
--- a/packages/settings/design/src/components/ArrayConfigItemForm.vue
+++ b/packages/settings/design/src/components/ArrayConfigItemForm.vue
@@ -197,7 +197,7 @@ export default {
   cursor: pointer;
   display: flex;
   align-items: center;
-  color: var(--ti-lowcode-common-text-title-color);
+  color: var(--te-common-text-primary);
   .config-title {
     margin-left: 6px;
   }
@@ -205,12 +205,12 @@ export default {
 .config-item-form {
   :deep(.tiny-form-item) {
     .tiny-form-item__label {
-      color: var(--ti-lowcode-common-text-main-color);
+      color: var(--te-common-text-secondary);
     }
     .tiny-form-item__content {
       .editor-warp {
-        --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-common-secondary-text-color);
-        --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-common-secondary-text-color);
+        --ti-lowcode-meta-codeEditor-border-color: var(--te-common-text-secondary);
+        --ti-lowcode-meta-codeEditor-color: var(--te-common-text-secondary);
       }
     }
   }
diff --git a/packages/settings/design/src/components/PropertyCanvas.vue b/packages/settings/design/src/components/PropertyCanvas.vue
index 20acad789..f133672e0 100644
--- a/packages/settings/design/src/components/PropertyCanvas.vue
+++ b/packages/settings/design/src/components/PropertyCanvas.vue
@@ -177,7 +177,7 @@ export default {
   .empty-group-tips {
     margin-top: 100px;
     text-align: center;
-    color: var(--ti-lowcode-design-plugin-color);
+    color: var(--te-common-text-weaken);
     font-size: 12px;
     .empty-data-icon {
       width: 100px;
@@ -246,11 +246,11 @@ export default {
         align-items: center;
         justify-content: space-between;
         h6 {
-          color: var(--ti-lowcode-common-text-title-color);
+          color: var(--te-common-text-primary);
         }
         .option-icon {
           display: inline-block;
-          color: var(--ti-lowcode-design-plugin-color);
+          color: var(--ti-lowcode-setting-plugin-icon-color);
         }
         .option-tips + .option-tips {
           margin-left: 8px;
@@ -259,12 +259,12 @@ export default {
     }
 
     .tiny-collapse-item__header {
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
-      background-color: var(--ti-lowcode-tabs-bg);
+      color: var(--te-common-text-secondary);
+      background-color: var(--te-common-bg-prompt);
       font-weight: 600;
 
       svg {
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
         margin-right: 4px;
       }
     }
@@ -276,7 +276,7 @@ export default {
       background: var(--ti-lowcode-tabs-active-bg);
       border-top: none;
       border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
 
       .properties-item {
         padding: 3px 10px;
@@ -293,7 +293,7 @@ export default {
         .item-input {
           .meta-array-wrap {
             .top {
-              color: var(--ti-lowcode-toolbar-breadcrumb-color);
+              color: var(--te-common-text-secondary);
             }
             .actions {
               display: none;
@@ -303,7 +303,7 @@ export default {
       }
       .item-container {
         .empty {
-          color: var(--ti-lowcode-common-secondary-text-color);
+          color: var(--te-common-text-secondary);
         }
       }
     }
diff --git a/packages/settings/design/src/components/PropertyList.vue b/packages/settings/design/src/components/PropertyList.vue
index 2f7e40483..ae0f6bab4 100644
--- a/packages/settings/design/src/components/PropertyList.vue
+++ b/packages/settings/design/src/components/PropertyList.vue
@@ -110,7 +110,7 @@ export default {
   padding: 5px 10px;
   cursor: pointer;
   margin-bottom: 5px;
-  color: var(--ti-lowcode-common-text-title-color);
+  color: var(--te-common-text-primary);
   padding: 7px 7px;
   list-style: none;
   border: 1px solid var(--ti-lowcode-common-border-color);
diff --git a/packages/settings/design/src/components/SettingPanel.vue b/packages/settings/design/src/components/SettingPanel.vue
index 6aa65a874..a7144f46b 100644
--- a/packages/settings/design/src/components/SettingPanel.vue
+++ b/packages/settings/design/src/components/SettingPanel.vue
@@ -257,30 +257,30 @@ export default {
       font-size: 12px;
       flex-shrink: 0;
       margin-right: 10px;
-      color: var(--ti-lowcode-common-text-main-color);
+      color: var(--te-common-text-secondary);
     }
   }
 
   h5 {
     font-size: 13px;
-    color: var(--ti-lowcode-title-color);
+    color: var(--te-common-text-primary);
     margin: 20px 0;
   }
   .array-config-item {
     width: 100%;
     :deep(.list-group) {
       .option-item {
-        border-top: 1px solid var(--ti-lowcode-common-border-color);
+        border-top: 1px solid var(--te-common-border-default);
       }
       .option-item:last-child {
-        border-bottom: 1px solid var(--ti-lowcode-common-border-color);
+        border-bottom: 1px solid var(--te-common-border-default);
       }
       .item-icon {
-        color: var(--ti-lowcode-design-plugin-color);
+        color: var(--ti-lowcode-setting-plugin-icon-color);
         fill: currentColor;
       }
       .item-text {
-        color: var(--ti-lowcode-title-color);
+        color: var(--te-common-text-primary);
       }
     }
     .operate-tips-item + .operate-tips-item {
@@ -288,7 +288,7 @@ export default {
     }
     .add-item {
       cursor: pointer;
-      color: var(--ti-lowcode-common-primary-color);
+      color: var(--te-common-text-emphasize);
       margin-top: 8px;
       .icon {
         margin-right: 4px;
@@ -310,7 +310,7 @@ export default {
       .item-label {
         width: 38%;
         word-break: break-all;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
       }
       .component-wrap {
         flex: 1;
@@ -382,7 +382,7 @@ export default {
         border-color: transparent;
         padding: 6px 10px;
         &:hover {
-          background-color: var(--ti-lowcode-common-primary-color);
+          background-color: var(--te-common-bg-primary-checked);
         }
       }
     }
diff --git a/packages/settings/events/src/components/BindEventsDialogContent.vue b/packages/settings/events/src/components/BindEventsDialogContent.vue
index 3da6c581e..8ae30bdb9 100644
--- a/packages/settings/events/src/components/BindEventsDialogContent.vue
+++ b/packages/settings/events/src/components/BindEventsDialogContent.vue
@@ -127,7 +127,7 @@ export default {
         width: 100%;
         height: 216px;
         padding: 12px 8px;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
       }
       .mark {
         width: 100%;
@@ -141,7 +141,7 @@ export default {
 
     .params-tip {
       margin: 8px 0;
-      color: var(--ti-lowcode-error-tip-color);
+      color: var(--te-common-color-error);
     }
   }
   .content-right-top .content-right-title,
@@ -156,11 +156,11 @@ export default {
 
   .tip-error {
     .content-right-monaco {
-      border: 1px solid var(--ti-lowcode-error-tip-color);
+      border: 1px solid var(--te-common-color-error);
     }
     .params-tip,
     .new-action-tip {
-      color: var(--ti-lowcode-error-tip-color);
+      color: var(--te-common-color-error);
     }
   }
 }
diff --git a/packages/settings/props/src/components/Empty.vue b/packages/settings/props/src/components/Empty.vue
index 3095530b6..d5abc4081 100644
--- a/packages/settings/props/src/components/Empty.vue
+++ b/packages/settings/props/src/components/Empty.vue
@@ -36,7 +36,7 @@ export default {
 
 <style lang="less" scoped>
 .empty-tips {
-  color: var(--ti-lowcode-common-text-color-5);
+  color: var(--te-common-text-weaken);
   text-align: center;
   margin-top: 50px;
   font-size: 12px;
diff --git a/packages/settings/props/src/components/groups/LifeCycle.vue b/packages/settings/props/src/components/groups/LifeCycle.vue
index 6de26ba53..95aa890e4 100644
--- a/packages/settings/props/src/components/groups/LifeCycle.vue
+++ b/packages/settings/props/src/components/groups/LifeCycle.vue
@@ -211,7 +211,7 @@ export default {
   li {
     padding: 4px 12px;
     &:hover {
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
       cursor: pointer;
     }
   }
@@ -225,10 +225,10 @@ export default {
     justify-content: space-between;
     padding: 8px 12px;
     cursor: pointer;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
 
     svg {
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
     }
     .icon {
       margin-right: 8px;
@@ -239,7 +239,7 @@ export default {
     }
 
     &:hover {
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
     }
   }
 }
@@ -252,7 +252,7 @@ export default {
     margin-right: 12px;
 
     .life-cycle-list {
-      border: 1px solid var(--ti-lowcode-collapse-active-border-color);
+      border: 1px solid var(--te-common-border-default);
       box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.1);
       border-radius: 4px;
       height: 320px;
@@ -278,7 +278,7 @@ export default {
 
       &:hover {
         color: var(--ti-lowcode-toolbar-icon-color);
-        background: var(--ti-lowcode-canvas-wrap-bg);
+        background: var(--te-common-bg-container);
         .life-cycle-selected {
           opacity: 1;
         }
diff --git a/packages/settings/props/src/components/groups/TableColumn.vue b/packages/settings/props/src/components/groups/TableColumn.vue
index e298b8acb..32d10a07e 100644
--- a/packages/settings/props/src/components/groups/TableColumn.vue
+++ b/packages/settings/props/src/components/groups/TableColumn.vue
@@ -194,7 +194,7 @@ export default {
 .colums {
   width: 100%;
   .top {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     display: flex;
     justify-content: space-between;
     margin-bottom: 5px;
diff --git a/packages/settings/props/src/components/groups/TablePager.vue b/packages/settings/props/src/components/groups/TablePager.vue
index 2d321ea49..389738108 100644
--- a/packages/settings/props/src/components/groups/TablePager.vue
+++ b/packages/settings/props/src/components/groups/TablePager.vue
@@ -62,7 +62,7 @@ export default {
 .colums {
   width: 100%;
   .top {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     display: flex;
     justify-content: space-between;
     margin-bottom: 5px;
diff --git a/packages/settings/props/src/components/inputs/DraggableOptions.vue b/packages/settings/props/src/components/inputs/DraggableOptions.vue
index 33d7ba57c..804baf526 100644
--- a/packages/settings/props/src/components/inputs/DraggableOptions.vue
+++ b/packages/settings/props/src/components/inputs/DraggableOptions.vue
@@ -176,7 +176,7 @@ export default {
 .options {
   width: 100%;
   .top {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     display: flex;
     justify-content: space-between;
     margin-bottom: 5px;
diff --git a/packages/settings/props/src/components/inputs/NumericSelect.vue b/packages/settings/props/src/components/inputs/NumericSelect.vue
index 32cea45a2..05cb3fbdc 100644
--- a/packages/settings/props/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/props/src/components/inputs/NumericSelect.vue
@@ -118,7 +118,6 @@ export default {
         font-size: 14px;
         text-align: center;
         &:hover {
-          color: var(--ti-lowcode-tootip-input-colorf);
           background: var(--ti-lowcode-icon-hover-bg);
         }
       }
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 2ac04daea..99a10d509 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -229,7 +229,7 @@ export default {
       display: block;
       margin-bottom: 8px;
       font-size: 12px;
-      color: var(--ti-lowcode-setting-style-title-color);
+      color: var(--te-common-text-secondary);
     }
   }
   .inline-style {
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 92bd6ba45..96d6bdda4 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -398,7 +398,7 @@ export default {
     padding: 2px;
   }
   .background-label {
-    color: var(--te-common-text-primary);
+    color: var(--te-common-text-secondary);
   }
   .background-color,
   .background-clip {
diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
index bcb0227de..76a8e2291 100644
--- a/packages/settings/styles/src/components/background/ImageSetting.vue
+++ b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -288,7 +288,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   font-size: 12px;
-  color: var(--ti-lowcode-common-text-color-2);
+  color: var(--te-common-text-secondary);
   margin-left: 8px;
   white-space: nowrap;
   overflow: hidden;
@@ -312,7 +312,7 @@ onMounted(() => {
   }
 }
 .choose-image {
-  border-color: var(--ti-lowcode-component-setting-panel-label-color);
+  border-color: var(--te-common-border-default);
   outline: 0px;
   cursor: default;
   user-select: none;
@@ -327,7 +327,7 @@ onMounted(() => {
   justify-content: center;
   height: 24px;
   border-radius: 4px;
-  color: var(--te-common-bg-prompt);
+  color: var(--te-common-text-primary);
   border-width: 1px;
   border-style: solid;
   align-self: center;
diff --git a/packages/settings/styles/src/components/background/RadialGradient.vue b/packages/settings/styles/src/components/background/RadialGradient.vue
index dc62e2dc4..1a4930eb3 100644
--- a/packages/settings/styles/src/components/background/RadialGradient.vue
+++ b/packages/settings/styles/src/components/background/RadialGradient.vue
@@ -134,7 +134,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   font-size: 12px;
-  color: var(--ti-lowcode-common-text-color-2);
+  color: var(--te-common-text-secondary);
   margin-left: 8px;
   white-space: nowrap;
   overflow: hidden;
diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue
index 5eb2432e7..157d502f0 100644
--- a/packages/settings/styles/src/components/border/BorderGroup.vue
+++ b/packages/settings/styles/src/components/border/BorderGroup.vue
@@ -555,7 +555,7 @@ export default {
     }
   }
   svg {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
   }
 }
 .item-row {
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index b9af5b6ed..16613efb5 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -480,7 +480,7 @@ const handleDeleteCurSelector = () => {
 .title {
   margin: 0;
   font-size: 12px;
-  color: var(--ti-lowcode-className-selector-title-color);
+  color: var(--te-common-text-secondary);
   font-weight: normal;
   .help-link {
     vertical-align: middle;
diff --git a/packages/settings/styles/src/components/inputs/ImageSelect.vue b/packages/settings/styles/src/components/inputs/ImageSelect.vue
index 1dc9289dd..e4eaebb4f 100644
--- a/packages/settings/styles/src/components/inputs/ImageSelect.vue
+++ b/packages/settings/styles/src/components/inputs/ImageSelect.vue
@@ -70,7 +70,7 @@ export default {
   width: 100%;
   .icon {
     font-size: 20px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     margin-right: 4px;
   }
 }
diff --git a/packages/settings/styles/src/components/inputs/InputSelect.vue b/packages/settings/styles/src/components/inputs/InputSelect.vue
index 642a50a2a..1dd947a3a 100644
--- a/packages/settings/styles/src/components/inputs/InputSelect.vue
+++ b/packages/settings/styles/src/components/inputs/InputSelect.vue
@@ -118,7 +118,7 @@ export default {
 .input-select {
   display: flex;
   align-items: center;
-  background-color: var(--ti-lowcode-tabs-bg);
+  background-color: var(--te-common-bg-default);
   border-radius: 3px;
   transition: 0.3s;
   &.focus {
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 5266892be..dd2cd466a 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -92,7 +92,7 @@ export default {
     left: 16px;
     z-index: 1000;
     padding: 8px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     border: 1px solid var(--ti-lowcode-tabs-border-color);
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
     border-radius: 8px;
diff --git a/packages/settings/styles/src/components/inputs/NumericSelect.vue b/packages/settings/styles/src/components/inputs/NumericSelect.vue
index b0a775bb3..7d92d67c6 100644
--- a/packages/settings/styles/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/styles/src/components/inputs/NumericSelect.vue
@@ -105,7 +105,7 @@ export default {
 .style-numeric {
   display: flex;
   align-items: center;
-  background-color: var(--ti-lowcode-tabs-bg);
+  background-color: var(--te-common-bg-default);
   border-radius: 3px;
   transition: 0.3s;
   &.focus {
diff --git a/packages/settings/styles/src/components/layout/GridBox.vue b/packages/settings/styles/src/components/layout/GridBox.vue
index 9a2e0a497..de9e031e5 100644
--- a/packages/settings/styles/src/components/layout/GridBox.vue
+++ b/packages/settings/styles/src/components/layout/GridBox.vue
@@ -527,6 +527,7 @@ export default {
       }
     }
   }
+
   .grid-item-wrap {
     grid-column: 1 / -1;
     grid-row-start: 3;
@@ -559,4 +560,8 @@ export default {
     display: inline-block;
   }
 }
+.grid-edit-spacing {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
 </style>
diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue
index 6d927efbd..86c4a2077 100644
--- a/packages/settings/styles/src/components/layout/LayoutGroup.vue
+++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue
@@ -129,7 +129,7 @@ export default {
     flex: 0 0 50px;
     padding: 0 3px;
     line-height: 24px;
-
+    color: var(--te-common-text-secondary);
     span {
       padding: 2px;
     }
@@ -146,50 +146,6 @@ export default {
   .display-content {
     flex: auto;
     display: flex;
-
-    .display-content-item {
-      flex: 1;
-      padding: 4px 0;
-      font-size: 16px;
-      background: var(--ti-lowcode-canvas-wrap-bg);
-      position: relative;
-      color: var(--ti-lowcode-component-setting-panel-icon-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &:not(:last-child)::after {
-        content: '';
-        width: 1px;
-        height: 100%;
-        background: var(--ti-lowcode-tabs-border-color);
-        display: inline-block;
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-
-      &:hover {
-        color: var(--ti-lowcode-property-hover-color);
-      }
-
-      &.selected {
-        color: var(--ti-lowcode-toolbar-icon-color);
-        background-color: var(--ti-lowcode-tabs-bg);
-      }
-
-      &.disabled {
-        background-color: var(--ti-lowcode-error-tip-color);
-
-        &:hover {
-          cursor: not-allowed;
-        }
-      }
-
-      .display-svg {
-        margin: auto;
-      }
-    }
   }
 }
 </style>
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 89ab3a67a..193cbdaf4 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -487,6 +487,7 @@ span {
     flex: 0 0 54px;
     padding: 0 2px;
     line-height: 24px;
+    color: var(--te-common-text-secondary);
   }
 }
 
@@ -562,7 +563,7 @@ span {
     width: 20px;
     height: 20px;
     font-size: 18px;
-    color: var(--ti-lowcode-description-minor-color);
+    color: var(--te-common-text-secondary);
     margin-left: 4px;
     border-radius: 2px;
     &.selected {
diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
index 347d44111..fe59d911f 100644
--- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
@@ -3,10 +3,11 @@
     <div class="spacing-max-icon">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        fill="#F5F5F5"
+        fill="currentColor"
         width="256"
         height="120"
         style="grid-area: 1 / 1 / -1 / -1"
+        class="margin-color"
       >
         <g>
           <g>
@@ -21,7 +22,7 @@
             "
               data-automation-id="margin-top-button"
               aria-label="Margin top button"
-              class="tb-path-color"
+              class="padding-color"
               @click="clickMargin(SPACING_PROPERTY.MarginTop, $event)"
             ></path>
           </g>
@@ -39,7 +40,7 @@
             "
               data-automation-id="margin-right-button"
               aria-label="Margin right button"
-              class="lr-path-color"
+              class="padding-color"
               @click="clickMargin(SPACING_PROPERTY.MarginRight, $event)"
             ></path>
           </g>
@@ -57,7 +58,7 @@
             "
               data-automation-id="margin-bottom-button"
               aria-label="Margin bottom button"
-              class="tb-path-color"
+              class="padding-color"
               @click="clickMargin(SPACING_PROPERTY.MarginBottom, $event)"
             ></path>
           </g>
@@ -75,37 +76,55 @@
             "
               data-automation-id="margin-left-button"
               aria-label="Margin left button"
-              class="lr-path-color"
+              class="margin-color"
               @click="clickMargin(SPACING_PROPERTY.MarginLeft, $event)"
             ></path>
           </g>
         </g>
-        <clipPath id="margin-outer">
-          <rect x="0" y="0" width="256" height="120" fill="#F5F5F5" rx="4" ry="4" style="pointer-events: none"></rect>
+        <clipPath id="margin-outer" class="margin-color">
+          <rect
+            x="0"
+            y="0"
+            width="256"
+            height="120"
+            fill="currentColor"
+            rx="4"
+            ry="4"
+            style="pointer-events: none"
+          ></rect>
         </clipPath>
         <rect
-          class="stroke"
+          class="margin-color"
           clip-path="url(#margin-outer)"
           x="0"
           y="0"
           width="256"
           height="120"
-          fill="#F5F5F5"
+          fill="currentColor"
           rx="4"
           ry="4"
           style="pointer-events: none; stroke-width: 0"
         ></rect>
-        <clipPath id="margin-inner">
-          <rect x="45" y="25" width="168" height="70" fill="#E6E6E6" rx="4" ry="4" style="pointer-events: none"></rect>
+        <clipPath id="margin-inner" class="margin-color">
+          <rect
+            x="45"
+            y="25"
+            width="168"
+            height="70"
+            fill="currentColor"
+            rx="4"
+            ry="4"
+            style="pointer-events: none"
+          ></rect>
         </clipPath>
         <rect
-          class="stroke"
+          class="padding-color"
           clip-path="url(#margin-inner)"
           x="45"
           y="25"
           width="168"
           height="70"
-          fill="#E6E6E6"
+          fill="currentColor"
           rx="4"
           ry="4"
           style="pointer-events: none; stroke-width: 0"
@@ -165,7 +184,14 @@
       </div>
     </div>
     <div class="spacing-min-icon">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="#F5F5F5" width="168" height="70" style="grid-area: 1 / 1 / -1 / -1">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        width="168"
+        height="70"
+        style="grid-area: 1 / 1 / -1 / -1"
+        class="margin-color"
+      >
         <g>
           <g>
             <path
@@ -179,7 +205,7 @@
             "
               data-automation-id="padding-top-button"
               aria-label="Padding top button"
-              class="tb-path-color"
+              class="padding-color"
               @click="clickPadding(SPACING_PROPERTY.PaddingTop, $event)"
             ></path>
           </g>
@@ -197,7 +223,7 @@
             "
               data-automation-id="padding-right-button"
               aria-label="Padding right button"
-              class="lr-path-color"
+              class="padding-color"
               @click="clickPadding(SPACING_PROPERTY.PaddingRight, $event)"
             ></path>
           </g>
@@ -215,7 +241,7 @@
             "
               data-automation-id="padding-bottom-button"
               aria-label="Padding bottom button"
-              class="tb-path-color"
+              class="padding-color"
               @click="clickPadding(SPACING_PROPERTY.PaddingBottom, $event)"
             ></path>
           </g>
@@ -233,37 +259,54 @@
             "
               data-automation-id="padding-left-button"
               aria-label="Padding left button"
-              class="lr-path-color"
+              class="margin-color"
               @click="clickPadding(SPACING_PROPERTY.PaddingLeft, $event)"
             ></path>
           </g>
         </g>
-        <clipPath id="padding-outer">
-          <rect x="5" y="-4" width="168" height="70" fill="#E6E6E6" rx="4" ry="4" style="pointer-events: none"></rect>
+        <clipPath id="padding-outer" class="padding-color">
+          <rect
+            x="5"
+            y="-4"
+            width="168"
+            height="70"
+            fill="currentColor"
+            rx="4"
+            ry="4"
+            style="pointer-events: none"
+          ></rect>
         </clipPath>
         <rect
-          class="stroke"
+          class="stroke padding-color"
           clip-path="url(#padding-outer)"
           x="0"
           y="0"
           width="168"
           height="70"
-          fill="#E6E6E6"
+          fill="currentColor"
           rx="4"
           ry="4"
           style="pointer-events: none; stroke-width: 0"
         ></rect>
-        <clipPath id="padding-inner">
-          <rect x="64" y="25" width="48" height="20" fill="#FFF" rx="4" ry="4" style="pointer-events: none"></rect>
+        <clipPath id="padding-inner" class="inner-color">
+          <rect
+            x="64"
+            y="25"
+            width="48"
+            height="20"
+            fill="currentColor"
+            rx="4"
+            ry="4"
+            style="pointer-events: none"
+          ></rect>
         </clipPath>
         <rect
-          class="stroke"
+          class="stroke inner-color"
           clip-path="url(#padding-inner)"
           x="64"
           y="25"
           width="48"
           height="20"
-          fill="#FFF"
           rx="4"
           ry="4"
           style="pointer-events: none; stroke-width: 0"
@@ -465,7 +508,6 @@ export default {
   outline-style: none;
   cursor: default;
   user-select: none;
-
   .spacing-max-icon {
     grid-area: 1 / 1 / -1 / -1;
     display: grid;
@@ -499,7 +541,7 @@ export default {
     line-height: 10px;
     letter-spacing: -0.2px;
     display: flex;
-    color: var(--te-base-text-color);
+    color: var(--te-common-text-primary);
     background: transparent;
     padding: 2px 4px;
     margin-left: -2px;
@@ -545,24 +587,16 @@ export default {
     }
   }
 
-  .lr-path-color {
+  .margin-color {
     cursor: pointer;
-    color: var(--ti-lowcode-spacing-lr-color);
-    &:hover {
-      color: var(--ti-lowcode-spacing-lr-hover-color);
-    }
+    color: var(--ti-lowcode-spacing-margin-color);
   }
-
-  .tb-path-color {
+  .padding-color {
     cursor: pointer;
-    color: var(--ti-lowcode-spacing-tb-color);
-    &:hover {
-      color: var(--ti-lowcode-spacing-tb-hover-color);
-    }
+    color: var(--ti-lowcode-spacing-padding-color);
   }
-
-  .stroke {
-    stroke: var(--ti-lowcode-spacing-border-color);
+  .inner-color {
+    color: var(--te-common-bg-default);
   }
 }
 </style>
diff --git a/packages/settings/styles/src/components/spacing/SpacingSetting.vue b/packages/settings/styles/src/components/spacing/SpacingSetting.vue
index c906e2dba..1f3e43345 100644
--- a/packages/settings/styles/src/components/spacing/SpacingSetting.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingSetting.vue
@@ -121,7 +121,7 @@ export default {
     align-items: center;
     .icon {
       font-size: 16px;
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
       margin-right: 18px;
     }
 
@@ -142,8 +142,8 @@ export default {
       height: 60px;
       line-height: 60px;
       text-align: center;
-      border: 1px solid var(--ti-lowcode-toolbar-border-color);
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      border: 1px solid var(--te-common-border-default);
+      background: var(--te-common-bg-container);
       cursor: pointer;
       box-sizing: border-box;
 
@@ -178,8 +178,8 @@ export default {
         line-height: 26px;
         margin-left: 3%;
         text-align: center;
-        border: 1px solid var(--ti-lowcode-toolbar-border-color);
-        background: var(--ti-lowcode-canvas-wrap-bg);
+        border: 1px solid var(--te-common-border-default);
+        background: var(--te-common-bg-container);
         cursor: pointer;
         transition: 0.3s;
         box-sizing: border-box;
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index 9d6c5ac13..dca82610a 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -497,6 +497,7 @@ export default {
 <style lang="less" scoped>
 .typography-wrap {
   span {
+    color: var(--te-common-text-secondary);
     padding: 2px;
   }
   .typography-row {
diff --git a/packages/settings/styles/src/components/typography/TypographyMore.vue b/packages/settings/styles/src/components/typography/TypographyMore.vue
index 88d858265..d0e2050df 100644
--- a/packages/settings/styles/src/components/typography/TypographyMore.vue
+++ b/packages/settings/styles/src/components/typography/TypographyMore.vue
@@ -123,7 +123,7 @@ export default {
       .tiny-collapse-item__header {
         height: 24px;
         line-height: 24px;
-        background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+        background-color: var(--te-common-bg-container);
         justify-content: center;
         transition: 0.3s;
 
@@ -141,7 +141,6 @@ export default {
 
         &:hover {
           color: var(--ti-lowcode-toolbar-icon-color);
-          background-color: var(--ti-lowcode-more-collapse-header-hover-color);
 
           svg {
             color: var(--ti-lowcode-toolbar-icon-color);
@@ -191,8 +190,8 @@ export default {
           flex: 1;
           padding: 4px 0;
           font-size: 16px;
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
-          background: var(--ti-lowcode-canvas-wrap-bg);
+          color: var(--te-common-text-secondary);
+          background: var(--te-common-bg-container);
           position: relative;
           display: flex;
           justify-content: center;
@@ -229,7 +228,7 @@ export default {
 
       svg {
         font-size: 14px;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
       }
     }
   }
diff --git a/packages/theme/dark/datasource.less b/packages/theme/dark/datasource.less
index 2ad563e6e..7fcffa73a 100644
--- a/packages/theme/dark/datasource.less
+++ b/packages/theme/dark/datasource.less
@@ -1,44 +1,39 @@
 :root {
-  --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-common-primary-text-color);
-  --ti-lowcode-datasource-tabs-border-color: #313131;
-  --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-datasource-json-border-colorr: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-datasource-tree-border-color: #2ad986;
-  --ti-lowcode-datasource-common-primary-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-datasource-success-border-color: #2ad986;
-  --ti-lowcode-datasource-input-icon-color: #737373;
-  --ti-lowcode-datasource-dialog-demo-border-color: #5e5e5e;
-  --ti-lowcode-datasource-canvas-wrap-bg: #5e5e5e;
-  --ti-lowcode-datasource-dialog-font-color: var(--ti-lowcode-base-invalidate-color);
-  --ti-lowcode-datasource-toolbar-bg: #404040;
-  --ti-lowcode-datasource-description-error-color: #ff0000;
-  --ti-lowcode-datasource-common-text-main-color: var(--ti-lowcode-base-invalidate-color);
-  --ti-lowcode-datasource-toolbar-more-hover-color: var(--ti-lowcode-base-invalidate-color);
-  --ti-lowcode-datasource-delete-button-hover-bg: #c92c3f;
-  --ti-lowcode-datasource-common-text-color-5: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-datasource-common-empty-color: var(--ti-lowcode-common-empty-color);
-  --ti-lowcode-datasource-toolbar-view-hover-bg: #4d4d4d;
-  --ti-lowcode-datasource-common-hover-bg-1: var(--ti-lowcode-common-hover-bg-1);
-  --ti-lowcode-datasource-common-primary-text-color: var(--ti-lowcode-base-gray-10);
-  --ti-lowcode-datasource-icon-hover-bg: #e5e5e5;
-  --ti-lowcode-datasource-tabs-bg: #2b2b2b;
-  --ti-lowcode-datasource-canvas-handle-hover-bg: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-datasource-tabs-active-bg: #2b2b2b;
-  --ti-lowcode-datasource-common-error-color: var(--ti-lowcode-common-error-color);
-  --ti-lowcode-datasource-description-minor-color: #ababab;
-  --ti-lowcode-datasource-description-warning-color: #facb4b;
-  --ti-lowcode-datasource-error-tip-color: #de504e;
-  --ti-lowcode-datasource-label-color: var(--ti-lowcode-common-secondary-text-color); // light
-  --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-common-bg-7);
-  --ti-lowcode-datasource-btn-border-color: var(--ti-lowcode-base-gray-10);
-  --ti-lowcode-datasource-tabs-bottom-border-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-datasource-list-bottom-border-color: var(--ti-lowcode-common-header-bg);
-  --ti-lowcode-datasource-switch-off-bg-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-datasource-switch-on-bg-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-datasource-respones-select-color-bg: var(--ti-lowcode-common-bg-4);
-  --ti-lowcode-datasource-respones-color-bg: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-datasource-respones-border-color-bg: var(--ti-lowcode-base-text-link-color-3);
-  --ti-lowcode-datasource-select-border-right-color-bg: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-datasource-select-border-color: #2b2b2b;
+  --ti-lowcode-datasource-toolbar-icon-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-tabs-border-color: var(--te-common-border-default);
+  --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-json-border-color: var(--te-common-border-checked);
+  --ti-lowcode-datasource-tree-border-color: var(--te-common-color-success);
+  --ti-lowcode-datasource-common-border-primary-color: var(--te-common-border-checked);
+  --ti-lowcode-datasource-success-border-color: var(--te-common-color-success);
+  --ti-lowcode-datasource-input-icon-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-dialog-demo-border-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-canvas-wrap-bg: var(--te-common-border-default);
+  --ti-lowcode-datasource-dialog-font-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-toolbar-bg: var(--te-common-bg-container);
+  --ti-lowcode-datasource-description-error-color: var(--te-common-color-error);
+  --ti-lowcode-datasource-common-text-main-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-toolbar-more-hover-color: var(--te-common-text-weaken);
+  --ti-lowcode-datasource-delete-button-hover-bg: var(--te-common-color-error);
+  --ti-lowcode-datasource-common-text-color-5: var(--te-common-text-weaken);
+  --ti-lowcode-datasource-common-hover-bg-1: var(--te-common-bg-container);
+  --ti-lowcode-datasource-common-primary-text-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-icon-hover-bg: var(--te-common-bg-container);
+  --ti-lowcode-datasource-tabs-bg: var(--te-common-text-primary);
+  --ti-lowcode-datasource-canvas-handle-hover-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-datasource-common-error-color: var(--te-common-color-error);
+  --ti-lowcode-datasource-description-minor-color: var(--te-common-text-weaken);
+  --ti-lowcode-datasource-description-warning-color: var(--te-common-color-warning);
+  --ti-lowcode-datasource-error-tip-color: var(--te-common-color-error);
+  --ti-lowcode-datasource-label-color: var(--te-common-text-secondary); // light
+  --ti-lowcode-datasource-list-hover-color: var(--te-common-bg-container);
+  --ti-lowcode-datasource-btn-click-color: var(--te-common-border-active);
+  --ti-lowcode-datasource-switch-off-bg-color: var(--te-common-bg-switch);
+  --ti-lowcode-datasource-switch-on-bg-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-datasource-modal-text-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-respones-color-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-data-source-border-color: var(--te-common-border-default);
+  --ti-lowcode-data-source-color: var(--te-common-text-primary);
+  --ti-lowcode-data-source-box-bg: var(--te-common-bg-container);
+  --ti-lowcode-datasource-tip-color: var(--te-common-text-weaken);
 }
diff --git a/packages/theme/dark/settings.less b/packages/theme/dark/settings.less
index 4cacf81b4..c8c1a9930 100644
--- a/packages/theme/dark/settings.less
+++ b/packages/theme/dark/settings.less
@@ -1,47 +1,41 @@
 // 右侧属性面板 css 变量
 #tiny-right-panel {
-  --ti-lowcode-setting-panel-bg-color: #2f2f2f;
-  --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-setting-panel-tabs-item-title-active-color: #000;
-  --ti-lowcode-setting-panel-tabs-item-title-hover-color: #fff;
+  --ti-lowcode-setting-panel-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-setting-panel-tabs-item-title-color: var(--te-common-text-secondary);
+  --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--te-common-text-primary);
+  --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--te-common-text-primary);
   // 插件设置面板左侧边框
-  --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-plugin-setting-panel-border-left-color: var(--te-common-border-divider);
 }
 
 // 属性面板-属性-新建区块属性
 .block-new-attr-popover {
-  --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-base-text-color);
-}
-
-// 属性面板-属性-区块关联属性 icon
-.block-link-field {
-  --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-base-success-color);
+  --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--te-common-text-secondary);
+  --ti-lowcode-attr-popover-menu-item-color: var(--te-common-text-primary);
 }
 
 .className-container {
-  --ti-lowcode-className-selector-container-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-className-selector-container-error-bg-color: rgba(242, 48, 48, 0.1);
-  --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1);
-  --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-className-selector-dropdown-list-bg-color: #202020;
-  --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2);
-  --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-className-selector-container-color: var(--te-common-text-primary);
+  --ti-lowcode-className-selector-container-error-border-color: var(--te-common-color-error);
+  --ti-lowcode-className-selector-container-error-bg-color: var(--te-common-bg-error);
+  --ti-lowcode-className-selector-error-tips-color: var(--te-common-color-error);
+  --ti-lowcode-className-selector-container-border-color: var(--te-common-border-default);
+  --ti-lowcode-className-selector-container-hover-border-color: var(--te-common-border-hover);
+  --ti-lowcode-className-selector-container-empty-tips-color: var(--te-common-text-secondary);
+  --ti-lowcode-className-selector-container-label-bg-color: var(--te-base-blue-140);
+  --ti-lowcode-className-selector-container-label-color: var(--te-common-text-checked);
+  --ti-lowcode-className-selector-container-option-btn-color: var(--te-common-text-checked);
+  --ti-lowcode-className-selector-dropdown-list-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-className-selector-dropdown-list-item-color: var(--te-common-text-primary);
+  --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--te-common-bg-container);
   --ti-lowcode-className-selector-dropdown-list-tips-color: var(--te-common-text-weaken);
 }
 
 :root {
-  --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-className-selector-del-popover-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-className-selector-del-popover-title-color: var(--te-common-text-primary);
   --ti-lowcode-property-active-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-spacing-margin-color: var(--te-base-gray-140);
+  --ti-lowcode-spacing-padding-color: var(--te-base-gray-130);
+  --ti-lowcode-setting-plugin-icon-color: var(--te-common-icon-secondary);
 }
diff --git a/packages/theme/light/datasource.less b/packages/theme/light/datasource.less
index d97badd5d..12945f823 100644
--- a/packages/theme/light/datasource.less
+++ b/packages/theme/light/datasource.less
@@ -1,48 +1,40 @@
 :root {
-  --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-datasource-tabs-border-color: var(--ti-lowcode-base-gray-30);
-  --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-80);
-  --ti-lowcode-datasource-json-border-colorr: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-datasource-tree-border-color: var(--ti-lowcode-base-success-color);
-  --ti-lowcode-datasource-common-primary-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-datasource-success-border-color: var(--ti-lowcode-base-success-color);
-  --ti-lowcode-datasource-input-icon-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-datasource-dialog-demo-border-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-datasource-canvas-wrap-bg: var(--ti-lowcode-base-default-button-border-disable-color);
-  --ti-lowcode-datasource-dialog-font-color: var(--ti-lowcode-base-gray-70);
-  --ti-lowcode-datasource-toolbar-bg: var(--ti-lowcode-base-bg-2);
-  --ti-lowcode-datasource-description-error-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-datasource-common-text-main-color: var(--ti-lowcode-common-text-main-color);
-  --ti-lowcode-datasource-toolbar-more-hover-color: #808080;
-  --ti-lowcode-datasource-delete-button-hover-bg: var(--ti-lowcode-base-red-6);
-  --ti-lowcode-datasource-common-text-color-5: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-datasource-common-empty-color: var(--ti-lowcode-common-empty-color);
-  --ti-lowcode-datasource-toolbar-view-hover-bg: var(--ti-lowcode-base-invalidate-color);
-  --ti-lowcode-datasource-common-hover-bg-1: var(--ti-lowcode-common-hover-bg-1);
-  --ti-lowcode-datasource-common-primary-text-color: var(--ti-lowcode-common-primary-text-color);
-  --ti-lowcode-datasource-icon-hover-bg: var(--ti-lowcode-base-invalidate-color);
-  --ti-lowcode-datasource-tabs-bg: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-datasource-canvas-handle-hover-bg: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-datasource-tabs-active-bg: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-datasource-common-error-color: var(--ti-lowcode-common-error-color);
-  --ti-lowcode-datasource-description-minor-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-datasource-description-warning-color: var(--ti-lowcode-base-orange-6);
-  --ti-lowcode-datasource-error-tip-color: var(--ti-lowcode-base-red-6);
-  --ti-lowcode-datasource-label-color: var(--ti-lowcode-base-gray-60); // light
-  --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-base-default-button-border-hover-color);
-  --ti-lowcode-datasource-tabs-bottom-border-color: var(--ti-lowcode-base-default-button-border-hover-color);
-  --ti-lowcode-datasource-list-bottom-border-color: var(--ti-lowcode-base-invalidate-color);
-  --ti-lowcode-datasource-switch-off-bg-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-datasource-switch-on-bg-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-datasource-modal-text-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-datasource-respones-select-color-bg: var(--ti-lowcode-base-text-link-color-3);
-  --ti-lowcode-datasource-respones-color-bg: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-datasource-respones-border-color-bg: var(--ti-lowcode-base-text-link-color-3);
-  --ti-lowcode-datasource-select-border-right-color-bg: var(--ti-lowcode-base-default-button-border-disable-color);
-  --ti-lowcode-datasource-select-border-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-data-source-border-color: rgb(219, 219, 219);
-  --ti-lowcode-data-source-color: rgb(25, 25, 25);
-  --ti-lowcode-data-source-box-bg: rgb(245, 245, 245);
-  --ti-lowcode-datasource-tip-color: rgb(128, 128, 128);
+  --ti-lowcode-datasource-toolbar-icon-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-tabs-border-color: var(--te-common-border-default);
+  --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-json-border-color: var(--te-common-border-checked);
+  --ti-lowcode-datasource-tree-border-color: var(--te-common-color-success);
+  --ti-lowcode-datasource-common-border-primary-color: var(--te-common-border-checked);
+  --ti-lowcode-datasource-success-border-color: var(--te-common-color-success);
+  --ti-lowcode-datasource-input-icon-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-dialog-demo-border-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-canvas-wrap-bg: var(--te-common-border-default);
+  --ti-lowcode-datasource-dialog-font-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-toolbar-bg: var(--te-common-bg-container);
+  --ti-lowcode-datasource-description-error-color: var(--te-common-color-error);
+  --ti-lowcode-datasource-common-text-main-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-toolbar-more-hover-color: var(--te-common-text-weaken);
+  --ti-lowcode-datasource-delete-button-hover-bg: var(--te-common-color-error);
+  --ti-lowcode-datasource-common-text-color-5: var(--te-common-text-weaken);
+  --ti-lowcode-datasource-common-hover-bg-1: var(--te-common-bg-container);
+  --ti-lowcode-datasource-common-primary-text-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-icon-hover-bg: var(--te-common-bg-container);
+  --ti-lowcode-datasource-tabs-bg: var(--te-common-text-primary);
+  --ti-lowcode-datasource-canvas-handle-hover-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-datasource-common-error-color: var(--te-common-color-error);
+  --ti-lowcode-datasource-description-minor-color: var(--te-common-text-weaken);
+  --ti-lowcode-datasource-description-warning-color: var(--te-common-color-warning);
+  --ti-lowcode-datasource-error-tip-color: var(--te-common-color-error);
+  --ti-lowcode-datasource-label-color: var(--te-common-text-secondary); // light
+  --ti-lowcode-datasource-list-hover-color: var(--te-common-bg-container);
+  --ti-lowcode-datasource-btn-click-color: var(--te-common-border-active);
+  --ti-lowcode-datasource-tabs-color: var(--te-common-border-);
+  --ti-lowcode-datasource-switch-off-bg-color: var(--te-common-bg-switch);
+  --ti-lowcode-datasource-switch-on-bg-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-datasource-modal-text-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-respones-color-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-data-source-border-color: var(--te-common-border-default);
+  --ti-lowcode-data-source-color: var(--te-common-text-primary);
+  --ti-lowcode-data-source-box-bg: var(--te-common-bg-container);
+  --ti-lowcode-datasource-tip-color: var(--te-common-text-weaken);
 }
diff --git a/packages/theme/light/settings.less b/packages/theme/light/settings.less
index 17b15c117..3d1ee06b3 100644
--- a/packages/theme/light/settings.less
+++ b/packages/theme/light/settings.less
@@ -1,47 +1,41 @@
 // 右侧属性面板 css 变量
 #tiny-right-panel {
   --ti-lowcode-setting-panel-bg-color: var(--te-common-bg-default);
-  --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-setting-panel-tabs-item-title-color: var(--te-common-text-secondary);
+  --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--te-common-text-primary);
+  --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--te-common-text-primary);
   // 插件设置面板左侧边框
-  --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-border-color-4);
+  --ti-lowcode-plugin-setting-panel-border-left-color: var(--te-common-border-divider);
 }
 
 // 属性面板-属性-区块关联属性-新建区块属性popover
 .block-new-attr-popover {
-  --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-base-text-color);
-}
-
-// 属性面板-属性-区块关联属性 icon
-.block-link-field {
-  --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-base-success-color);
+  --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--te-common-text-secondary);
+  --ti-lowcode-attr-popover-menu-item-color: var(--te-common-text-primary);
 }
 
 .className-container {
-  --ti-lowcode-className-selector-container-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-className-selector-container-error-bg-color: rgba(242, 48, 48, 0.1);
-  --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1);
-  --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-className-selector-container-color: var(--te-common-text-primary);
+  --ti-lowcode-className-selector-container-error-border-color: var(--te-common-color-error);
+  --ti-lowcode-className-selector-container-error-bg-color: var(--te-common-bg-error);
+  --ti-lowcode-className-selector-error-tips-color: var(--te-common-color-error);
+  --ti-lowcode-className-selector-container-border-color: var(--te-common-border-default);
+  --ti-lowcode-className-selector-container-hover-border-color: var(--te-common-border-hover);
+  --ti-lowcode-className-selector-container-empty-tips-color: var(--te-common-text-secondary);
+  --ti-lowcode-className-selector-container-label-bg-color: var(--te-base-blue-140);
+  --ti-lowcode-className-selector-container-label-color: var(--te-common-text-checked);
+  --ti-lowcode-className-selector-container-option-btn-color: var(--te-common-text-checked);
+  --ti-lowcode-className-selector-dropdown-list-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-className-selector-dropdown-list-item-color: var(--te-common-text-primary);
+  --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--te-common-bg-container);
   --ti-lowcode-className-selector-dropdown-list-tips-color: var(--te-common-text-weaken);
 }
 
 :root {
-  --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-className-selector-del-popover-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-className-selector-del-popover-title-color: var(--te-common-text-primary);
   --ti-lowcode-property-active-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-spacing-margin-color: var(--te-base-gray-10);
+  --ti-lowcode-spacing-padding-color: var(--te-base-gray-30);
+  --ti-lowcode-setting-plugin-icon-color: var(--te-common-icon-secondary);
 }