From cf678a2dae2275449a5b098fa4f73991de8981d7 Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Wed, 25 Sep 2024 17:22:22 +0800
Subject: [PATCH] feat(theme): common theme & fix review

---
 packages/common/component/ConfigItem.vue      |  2 +-
 packages/common/component/MetaCodeEditor.vue  |  6 +--
 .../JsSlotConfigurator.vue                    |  4 +-
 .../slot-configurator/SlotConfigurator.vue    |  4 +-
 packages/layout/src/DesignSettings.vue        | 26 +++++------
 packages/plugins/block/src/BlockEventList.vue |  2 +-
 .../plugins/block/src/BlockPropertyList.vue   |  2 +-
 .../src/DataSourceRemoteDataResult.vue        |  2 +-
 .../src/meta/block/src/BlockGroup.vue         | 17 -------
 .../background/BackgroundImageSetting.vue     | 16 +++----
 .../components/background/LinearGradient.vue  | 16 +++----
 .../src/components/spacing/SpacingGroup.vue   |  4 --
 .../components/typography/TypographyMore.vue  |  1 -
 packages/theme/base/src/common.less           |  6 +--
 packages/theme/base/src/component-common.less | 21 ++++-----
 .../theme/base/src/page/base-config-page.less |  2 +-
 packages/theme/base/src/var-component.less    | 15 ------
 packages/theme/dark/button.less               | 34 --------------
 packages/theme/dark/canvas.less               |  4 +-
 packages/theme/dark/index.less                |  1 +
 packages/theme/dark/metaComponent.less        |  2 +-
 packages/theme/dark/settings.less             |  2 +-
 packages/theme/dark/tutorial.less             |  2 +-
 packages/theme/dark/variable.less             | 45 ------------------
 packages/theme/light/block.less               |  2 +-
 packages/theme/light/button.less              | 36 ---------------
 packages/theme/light/index.less               |  1 +
 packages/theme/light/materials.less           |  2 +-
 packages/theme/light/metaComponent.less       |  2 +-
 packages/theme/light/settings.less            |  2 +-
 packages/theme/light/toolbar.less             |  2 +-
 packages/theme/light/tutorial.less            |  2 +-
 packages/theme/light/variable.less            | 46 -------------------
 33 files changed, 64 insertions(+), 267 deletions(-)
 delete mode 100644 packages/theme/base/src/var-component.less
 delete mode 100644 packages/theme/dark/button.less
 delete mode 100644 packages/theme/light/button.less

diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index 4a33cf408..383853875 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -600,7 +600,7 @@ export default {
 
   .prop-description {
     margin-top: 8px;
-    color: var(--ti-lowcode-common-text-desc-color);
+    color: var(--te-common-text-weaken);
   }
   .label-tip {
     padding: 2px 0;
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 7230a5762..e415050b2 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -294,7 +294,7 @@ export default {
   }
 
   &.empty-color {
-    color: var(--ti-lowcode-common-text-desc-color);
+    color: var(--te-common-text-weaken);
   }
 
   .edit-icon {
@@ -328,7 +328,7 @@ export default {
     color: var(--ti-lowcode-meta-code-editor-header-tips-container-color);
 
     .header-tips-title {
-      color: var(--ti-lowcode-base-text-color-3);
+      color: var();
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
@@ -357,7 +357,7 @@ export default {
 
       code {
         font-family: Microsoft YaHei, Microsoft YaHei-Normal;
-        color: var(--ti-lowcode-base-text-color-3);
+        color: var();
       }
     }
   }
diff --git a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
index b930ff4f1..292166d86 100644
--- a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
+++ b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
@@ -234,11 +234,11 @@ export default {
   position: relative;
   width: 60px;
   height: 20px;
-  border: 1px solid var(--ti-lowcode-base-bg);
+  border: 1px solid var(--te-common-bg-container);
   outline: 0;
   border-radius: 10px;
   box-sizing: border-box;
-  background: var(--ti-lowcode-base-bg);
+  background: var(--te-common-bg-container);
   transition: border-color 0.3s, background-color 0.3s;
   vertical-align: middle;
 }
diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
index a024634cc..b686b0d1e 100644
--- a/packages/configurator/src/slot-configurator/SlotConfigurator.vue
+++ b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
@@ -171,11 +171,11 @@ export default {
   position: relative;
   width: 40px;
   height: 20px;
-  border: 1px solid var(--ti-lowcode-base-bg);
+  border: 1px solid var(--te-common-bg-container);
   outline: 0;
   border-radius: 10px;
   box-sizing: border-box;
-  background: var(--ti-lowcode-base-bg);
+  background: var(--te-common-bg-container);
   transition: border-color 0.3s, background-color 0.3s;
   vertical-align: middle;
 }
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 1c5e26ded..4caec2ed3 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -57,23 +57,12 @@ export default {
     flex-direction: column;
     .tiny-tabs__nav-scroll {
       margin-left: 12px;
-      .tiny-tabs__nav {
-        display: inline-flex;
-        justify-content: center;
-        float: none;
-      }
       .tiny-tabs__active-bar {
-        width: 40px !important;
-        height: 2px;
+        height: 3px;
         background-color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color);
       }
-      .tiny-tabs__item__title {
-        margin-left: 6px;
-      }
-    }
-    .tiny-tabs__header {
-      padding-bottom: 12px;
     }
+
     .tiny-tabs__content {
       flex: 1;
       overflow-y: auto;
@@ -81,7 +70,8 @@ export default {
       margin: 0;
     }
     .tiny-tabs__item {
-      margin-right: 26px;
+      flex: 1;
+      background-color: var(--ti-lowcode-setting-panel-bg-color);
       color: var(--ti-lowcode-setting-panel-tabs-item-title-color);
       &:hover {
         color: var(--ti-lowcode-setting-panel-tabs-item-title-hover-color);
@@ -89,6 +79,14 @@ export default {
       &.is-active {
         color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color);
       }
+
+      .tiny-tabs__item__title {
+        padding-bottom: 2px;
+      }
+    }
+
+    .tiny-tabs__nav-wrap-not-separator::after {
+      z-index: 2;
     }
   }
 
diff --git a/packages/plugins/block/src/BlockEventList.vue b/packages/plugins/block/src/BlockEventList.vue
index 1f058d428..25bedb507 100644
--- a/packages/plugins/block/src/BlockEventList.vue
+++ b/packages/plugins/block/src/BlockEventList.vue
@@ -83,7 +83,7 @@ export default {
   }
   .icon-plus {
     margin-right: 6px;
-    stroke: var(--ti-lowcode-base-text-color-3);
+    stroke: var(--te-common-text-weaken);
   }
 }
 </style>
diff --git a/packages/plugins/block/src/BlockPropertyList.vue b/packages/plugins/block/src/BlockPropertyList.vue
index b786354e4..c94ba9bf2 100644
--- a/packages/plugins/block/src/BlockPropertyList.vue
+++ b/packages/plugins/block/src/BlockPropertyList.vue
@@ -104,7 +104,7 @@ export default {
   }
   .icon-plus {
     margin-right: 6px;
-    stroke: var(--ti-lowcode-base-text-color-3);
+    stroke: var(--te-common-text-weaken);
   }
 }
 </style>
diff --git a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
index f617f188e..ed81a4a5a 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
@@ -105,7 +105,7 @@ export default {
     z-index: 9999;
     .tiny-button {
       border-radius: 4px;
-      border-color: var(--ti-lowcode-button-default-border-color);
+      border-color: var(--te-common-border-default);
     }
   }
 
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
index aecd230ba..ec2a11eaf 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
@@ -408,23 +408,6 @@ export default {
     width: calc(100% - 36px);
   }
 
-  .blocks-header-icon {
-    width: 28px;
-    height: 28px;
-    font-size: 16px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-    background: var(--ti-lowcode-canvas-wrap-bg);
-    border: 1px solid var(--ti-lowcode-toolbar-border-color);
-    border-radius: 2px;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    &:hover {
-      color: var(--ti-lowcode-toolbar-icon-color);
-      background: var(--ti-lowcode-button-hover-bg);
-    }
-  }
   .add-group-btn {
     font-size: 16px;
     width: 32px;
diff --git a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
index 015440aad..eaa75a620 100644
--- a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
+++ b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
@@ -169,13 +169,13 @@ export default {
     .row-content {
       flex: auto;
       display: flex;
-      border: 1px solid var(--ti-lowcode-tabs-border-color);
-
+      border: 1px solid var(--te-common-border-default);
+      color: var(--te-common-text-primary);
       .row-content-item {
         flex: 1;
         padding: 4px 0;
-        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;
@@ -194,13 +194,13 @@ export default {
         }
 
         &:hover {
-          color: var(--ti-lowcode-toolbar-icon-color);
-          background-color: var(--ti-lowcode-button-hover-bg);
+          color: var(--te-common-text-primary);
+          background-color: var(--te-common-bg-container);
         }
 
         &.selected {
-          color: var(--ti-lowcode-toolbar-icon-color);
-          background-color: var(--ti-lowcode-radio-button-active-bg);
+          color: var(--te-common-text-primary);
+          background-color: var(--te-common-bg-prompt);
         }
 
         .overflow-svg {
diff --git a/packages/settings/styles/src/components/background/LinearGradient.vue b/packages/settings/styles/src/components/background/LinearGradient.vue
index 2a34f36e9..56afcae2d 100644
--- a/packages/settings/styles/src/components/background/LinearGradient.vue
+++ b/packages/settings/styles/src/components/background/LinearGradient.vue
@@ -79,9 +79,8 @@ const updateStyle = (property) => {
   emit('updateStyle', property)
 }
 
-const inputAngle = (val) => {
-  state.angle = Number(val)
-  rotateAngle()
+const angleChange = () => {
+  updateStyle({ [BACKGROUND_PROPERTY.BackgroundImage]: `linear-gradient(${state.angle}deg, black, white)` })
 }
 
 const rotateAngle = () => {
@@ -89,6 +88,11 @@ const rotateAngle = () => {
   angleChange()
 }
 
+const inputAngle = (val) => {
+  state.angle = Number(val)
+  rotateAngle()
+}
+
 const counterclockwiseRotate = () => {
   state.angle = state.angle % DAUBLE_PI_DEG
   state.angle -= QUARTER_PI_DEG
@@ -126,10 +130,6 @@ const handleClickAngle = (e) => {
   rotateAngle()
 }
 
-const angleChange = () => {
-  updateStyle({ [BACKGROUND_PROPERTY.BackgroundImage]: `linear-gradient(${state.angle}deg, black, white)` })
-}
-
 const updateGradient = ({ repeat }) => {
   updateStyle({ [BACKGROUND_PROPERTY.BackgroundRepeat]: repeat ?? '' })
 }
@@ -142,7 +142,7 @@ onMounted(() => {
   state.angle = angleMatch ? Number(angleMatch[1]) : ONE_PI_DEG
   rotateAngle()
 
-  const rColor = /\#(?:[a-f0-9]{6}|[a-f0-9]{3})/ // #fff | #fff
+  const rColor = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/ // #fff | #fff
   const rLengthPercentage = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/ // .5 5px 50%
   const rLinearColorStop = new RegExp(`${rColor.source}(?:\\s+${rLengthPercentage.source})?`)
   const rComma = /\s*,\s*/
diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
index 9379bcee4..056dc3ace 100644
--- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
@@ -583,10 +583,6 @@ export default {
     .reference-wrapper {
       & > div {
         padding: 2px;
-
-        &.active {
-          background: var(--ti-lowcode-button-hover-bg);
-        }
       }
     }
   }
diff --git a/packages/settings/styles/src/components/typography/TypographyMore.vue b/packages/settings/styles/src/components/typography/TypographyMore.vue
index 5a31e1a3d..88d858265 100644
--- a/packages/settings/styles/src/components/typography/TypographyMore.vue
+++ b/packages/settings/styles/src/components/typography/TypographyMore.vue
@@ -199,7 +199,6 @@ export default {
 
           &:hover {
             color: var(--ti-lowcode-toolbar-icon-color);
-            background-color: var(--ti-lowcode-button-hover-bg);
           }
 
           &:not(:last-child)::after {
diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
index d529ca58d..8d9fb5308 100644
--- a/packages/theme/base/src/common.less
+++ b/packages/theme/base/src/common.less
@@ -27,7 +27,7 @@
   --te-common-border-disabled: var(--te-base-dark-5); // 线条-禁用色  #dbdbdb
   --te-common-border-secondary: var(--te-base-gray-31); // 线条-次要按钮描边色  #595959
   --te-common-border-prompt: var(--te-base-gray-13); // 线条-三级按钮默认色/表单内按钮 #dbdbdb
-  --te-common-border-hover: var(--te-base-gray-18); // 线条-按钮边框悬浮色 #c2c2c2
+  --te-common-border-hover: var(--te-base-gray-18); // 线条-按钮边框悬浮色/复选框/单选框，欧仁边框色 #c2c2c2
   --te-common-border-divider: var(--te-base-gray-11); //线条-白色背景分割线颜色 #ebebeb
   --te-common-border-bg-divider: var(--te-base-gray-13); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb
   --te-common-border-checked: var(--te-base-blue-6); // 线条 选中色 #1476ff
@@ -45,7 +45,7 @@
   --te-common-bg-tag: var(--te-base-green-14); // tag标签-背景色 #e6f2d5
   --te-common-bg-default: var(--te-base-gray-1); // 白色背景-输入框背景/面板背景色 #fff
   --te-common-bg-component: var(--te-base-gray-1); // 白色背景-输入框等组件默认背景/面板背景色 #fff
-  --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签 背景色 #f0f0f0
+  --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0
 }
 
 :root[data-theme='dark'] {
@@ -92,5 +92,5 @@
   --te-common-bg-tag: var(--te-base-dark-28); // tag标签-背景色 #1d312a
   --te-common-bg-default: var(--te-base-dark-27); // 深色背景-输入框背景/面板背景色 #212329
   --te-common-bg-component: var(--te-base-gray-1); // 深色背景-输入框等组件默认背景/面板背景色 #212329
-  --te-common-bg-disabled: var(--te-base-dark-29); // tag标签-背景色 #2a2c31
+  --te-common-bg-disabled: var(--te-base-dark-29); // 禁用/标签/下拉框多选标签 背景色 #2a2c31
 }
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
index a8436c197..046ffa665 100644
--- a/packages/theme/base/src/component-common.less
+++ b/packages/theme/base/src/component-common.less
@@ -1,5 +1,3 @@
-@import './var-component.less';
-
 // 1、select 下拉框组件
 .tiny-select {
   .tiny-input {
@@ -184,6 +182,7 @@
   .tiny-tabs__header {
     .tiny-tabs__item__title {
       padding: 0 12px;
+      line-height: 2;
     }
     .tiny-tabs__nav {
       display: flex;
@@ -194,11 +193,9 @@
     .tiny-tabs__item {
       flex-grow: 1;
       font-size: var(--te-base-font-size-base);
-      height: 24px;
-      line-height: 24px;
       color: var(--te-common-text-secondary);
       background-color: var(--te-common-bg-container);
-      // min-width: 120px;
+      height: auto;
       text-align: center;
       &.is-active {
         color: var(--te-common-text-primary);
@@ -464,7 +461,7 @@
 .tiny-radio {
   margin-right: 20px;
   .tiny-radio__inner {
-    border: 1px solid var(--te-common-border-hover); // 单选待确认
+    border: 1px solid var(--te-common-border-hover);
   }
   .tiny-radio__label {
     font-size: var(--te-base-font-size-base);
@@ -485,7 +482,7 @@
     }
     .tiny-radio-button__orig-radio:checked {
       & + .tiny-radio-button__inner {
-        background-color: var(--te-common-bg-primary-checked); // 待确认,原来： --te-common-bg-primary
+        background-color: var(--te-common-bg-primary-checked);
         border-color: var(--te-common-border-secondary);
         &:hover {
           box-shadow: none;
@@ -509,7 +506,7 @@
     }
     .tiny-checkbox__inner {
       border-radius: var(--te-base-border-radius-1);
-      border: 1px solid var(--te-common-border-hover); // 待确认
+      border: 1px solid var(--te-common-border-hover);
       line-height: 24px;
     }
   }
@@ -590,7 +587,7 @@
       &[x-placement^='top'] {
         .popper__arrow {
           &.popper__arrow::after {
-            border-top-color: var(--te-common-text-inverse); // 等待确认
+            border-top-color: var(--te-common-text-inverse);
           }
         }
       }
@@ -726,19 +723,17 @@
 
 // 21、progress进度条
 .tiny-progress.tiny-progress--line.progress-first {
-  .component-css-vars-progress();
   &.tiny-progress-bar__outer {
-    background-color: var(--te-common-border-divider); // 待确认
+    background-color: var(--te-common-border-divider);
   }
   .tiny-progress__text {
     margin-left: 12px;
-    color: var(--te-common-text-primary); // 待确认
+    color: var(--te-common-text-primary);
   }
 }
 
 // 22、开关
 .tiny-switch {
-  .component-css-vars-switch();
   background-color: var(--te-common-bg-disabled); // 待确认是用背景色 还是线条色
   &.tiny-switch-checked {
     background-color: var(--te-common-bg-primary-checked);
diff --git a/packages/theme/base/src/page/base-config-page.less b/packages/theme/base/src/page/base-config-page.less
index dd3439835..4b3b8e899 100644
--- a/packages/theme/base/src/page/base-config-page.less
+++ b/packages/theme/base/src/page/base-config-page.less
@@ -121,7 +121,7 @@ td {
 }
 
 .global-desc-info {
-  color: var(--ti-lowcode-common-text-desc-color);
+  color: #808080;
 }
 
 .text-ellipsis-multiple {
diff --git a/packages/theme/base/src/var-component.less b/packages/theme/base/src/var-component.less
deleted file mode 100644
index add9e7a44..000000000
--- a/packages/theme/base/src/var-component.less
+++ /dev/null
@@ -1,15 +0,0 @@
-.component-css-vars-progress() {
-  --ti-progress-bar-outer-bg-color: var(--te-common-border-divider);
-  --ti-progress-text-font-color: var(--te-common-text-primary);
-}
-
-.component-css-vars-switch() {
-  --ti-switch-bg-color: var(--te-common-bg-disabled); //存疑 是用背景色 还是线条色
-  --ti-switch-checked-bg-color: var(--te-base-blue-6); // 存疑
-  --ti-switch-after-bg-color: var(--te-common-bg-default);
-}
-
-.component-css-vars-dropdown() {
-  --ti-dropdown-trigger-font-color: #adb0b8; //存疑
-  --ti-dropdown-caret-hover-bg-color: #8a8e99; // 8a8e99
-}
diff --git a/packages/theme/dark/button.less b/packages/theme/dark/button.less
deleted file mode 100644
index d2c9da9d8..000000000
--- a/packages/theme/dark/button.less
+++ /dev/null
@@ -1,34 +0,0 @@
-button {
-  --ti-lowcode-button-primary-color: #fff;
-  --ti-lowcode-button-primary-border-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-button-primary-bg-color: var(--ti-lowcode-common-primary-color);
-
-  --ti-lowcode-button-primary-hover-color: #fff;
-  --ti-lowcode-button-primary-hover-border-color: var(--ti-lowcode-common-primary-hover-color);
-  --ti-lowcode-button-primary-hover-bg-color: var(--ti-lowcode-common-primary-hover-color);
-
-  // button info 字体颜色
-  --ti-lowcode-button-info-color: #fff;
-  --ti-lowcode-button-info-border-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-button-info-bg-color: var(--ti-lowcode-common-primary-color);
-
-  // info 保存按钮 hover 背景色
-  --ti-lowcode-button-info-hover-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-button-info-hover-border-color: var(--ti-lowcode-common-primary-hover-color);
-  --ti-lowcode-button-info-hover-bg-color: var(--ti-lowcode-common-primary-hover-color);
-
-  // 默认按钮颜色
-  --ti-lowcode-button-default-color: var(--ti-lowcode-toolbar-breadcrumb-color);
-  --ti-lowcode-button-default-border-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-button-default-bg: transparent;
-
-  // 默认按钮 hover 颜色
-  --ti-lowcode-button-default-hover-color: #fff;
-  --ti-lowcode-button-default-hover-border-color: #6b6b6b;
-  --ti-lowcode-button-default-hover-bg: #6b6b6b;
-
-  // 默认按钮禁用颜色
-  --ti-lowcode-button-default-disabled-color: #4a4b4e;
-  --ti-lowcode-button-default-disabled-border-color: transparent;
-  --ti-lowcode-button-default-disabled-bg: var(--ti-lowcode-base-bg-1);
-}
diff --git a/packages/theme/dark/canvas.less b/packages/theme/dark/canvas.less
index 9201f8342..8bf0cd027 100644
--- a/packages/theme/dark/canvas.less
+++ b/packages/theme/dark/canvas.less
@@ -6,7 +6,7 @@
   --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-base-text-color-2);
   --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-base-text-color-2);
   --ti-lowcode-canvas-corner-mark-left-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--ti-lowcode-base-text-color-3);
+  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--te-common-text-weaken);
   --ti-lowcode-canvas-corner-mark-bottom-right-border-color: #c2c2c2;
   --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: #f5f5f5;
   --ti-lowcode-canvas-corner-mark-right-color: var(--ti-lowcode-base-gray-0);
@@ -24,5 +24,5 @@
   --ti-lowcode-canvas-menu-item-color: #adb0b8; // 右键菜单文字颜色
   --ti-lowcode-canvas-menu-item-hover-bg-color: #5e5e5e;
   --ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-2);
-  --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-3);
+  --ti-lowcode-canvas-menu-item-disabled-color: var(---te-common-text-weaken);
 }
diff --git a/packages/theme/dark/index.less b/packages/theme/dark/index.less
index 8fdcaa2be..a4f8c143d 100644
--- a/packages/theme/dark/index.less
+++ b/packages/theme/dark/index.less
@@ -1,4 +1,5 @@
 // 主题配置优先于公共配置
+@import './base.less';
 @import './variable.less';
 @import './block.less';
 @import './life-cycles.less';
diff --git a/packages/theme/dark/metaComponent.less b/packages/theme/dark/metaComponent.less
index cea6734aa..b185a2e41 100644
--- a/packages/theme/dark/metaComponent.less
+++ b/packages/theme/dark/metaComponent.less
@@ -9,7 +9,7 @@
 
   // MetaCodeEditor
   --ti-lowcode-meta-codeEditor-color: #d9d9d9;
-  --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-button-default-border-color);
+  --ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default);
   --ti-lowcode-meta-codeEditor-hover-color: #fff;
   --ti-lowcode-meta-codeEditor-border-hover-color: #6b6b6b;
 }
diff --git a/packages/theme/dark/settings.less b/packages/theme/dark/settings.less
index fe74f0cdc..db48b7a56 100644
--- a/packages/theme/dark/settings.less
+++ b/packages/theme/dark/settings.less
@@ -37,7 +37,7 @@
   --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-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3);
+  --ti-lowcode-className-selector-dropdown-list-tips-color: var(---te-common-text-weaken);
 }
 
 :root {
diff --git a/packages/theme/dark/tutorial.less b/packages/theme/dark/tutorial.less
index 28f063eef..f872e57f7 100644
--- a/packages/theme/dark/tutorial.less
+++ b/packages/theme/dark/tutorial.less
@@ -1,5 +1,5 @@
 #tiny-engine-left-panel {
   --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1);
   --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-2);
-  --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-base-bg);
+  --ti-lowcode-tutorial-hover-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less
index beed6faae..6e0dd680b 100644
--- a/packages/theme/dark/variable.less
+++ b/packages/theme/dark/variable.less
@@ -221,42 +221,8 @@
   --ti-lowcode-select-tags-bg-color: #5e5e5e;
   // 下拉框suffix图标悬浮颜色
   --ti-lowcode-select-suffix-icon-color-hover: #fff;
-  // select 下拉框背景色
-  --ti-lowcode-dropdown-bg-color: #202020;
-  // select 下拉面板边框颜色
-  --ti-lowcode-dropdown-border-color: #333;
-  // select 下拉面板选型字体颜色
-  --ti-lowcode-dropdown-item-text-color: #d9d9d9;
-  // select 下拉框选项hover背景色
-  --ti-lowcode-dropdown-item-hover-bg-color: var(--ti-lowcode-common-component-bg);
-  // select 下拉框选项选中背景色
-  --ti-lowcode-dropdown-item-selected-bg: var(--ti-lowcode-common-component-hover-bg);
-  // select 下拉框选项选中字体颜色
-  --ti-lowcode-dropdown-item-selected-color: #ebebeb;
-  // select 下拉框选项hover字体颜色
-  --ti-lowcode-dropdown-item-hover-text-color: #ebebeb;
-  // button info 字体颜色
-  --ti-lowcode-button-info-color: #fff;
-  // button default 背景颜色
-  --ti-lowcode-button-default-bg: transparent;
-  // 按钮hover字体颜色
-  --ti-lowcode-button-default-hover-color: #fff;
-  // 按钮hover背景色
-  --ti-lowcode-button-default-hover-bg: #6b6b6b;
-  --ti-lowcode-button-default-hover-border-color: #6b6b6b;
-  // info 保存按钮背景色
-  --ti-lowcode-button-info-bg: var(--ti-lowcode-common-primary-color);
-  // info 保存按钮 hover 背景色
-  --ti-lowcode-button-info-hover-bg: var(--ti-lowcode-common-primary-hover-color);
-  // primary 按钮字体颜色
-  --ti-lowcode-button-primary-color: #fff;
-  // 按钮边框颜色
-  --ti-lowcode-button-border-color: #333;
-
   // 组件icon颜色
   --ti-lowcode-component-icon-color: #d9d9d9;
-  // 组件item hover 背景色
-  --ti-lowcode-component-item-hover-bg: #4d4d4d;
   // 左侧插件激活背景色
   --ti-lowcode-left-panel-active-bg: #2f2f2f;
   // 左侧插件激活边框色
@@ -264,10 +230,6 @@
   // 左侧按钮边框色
   --ti-lowcode-left-button-border-color: #212121;
 
-  // list-item 项背景色
-  --ti-lowcode-list-item-bg: #333;
-  // list-item 项激活背景色
-  --ti-lowcode-list-item-active-bg: #404040;
   // radio 按钮组激活背景色
   --ti-lowcode-radio-button-active-bg: #2b2b2b;
   // grid 布局设置按钮字体颜色
@@ -429,8 +391,6 @@
 
   //左侧插件栏hover背景色
   --ti-plugins-hover-bg-color: #ffffff;
-  //左侧插件栏hover文字色
-  --ti-plugins-hover-text-color: #4d4d4d;
   //左侧插件栏hover边框色
   --ti-plugins-hover-border-color: #9e9e9e;
   // 表格行间背景色
@@ -443,9 +403,4 @@
   --ti-lowcode-meta-list-item-border-color: #2b2b2b;
   // 属性设置、事件设置等列表的背景色
   --ti-lowcode-meta-list-item-bg-color: #363636;
-
-  // 空数据图标颜色
-  --ti-lowcode-empty-icon-color: #fff;
-  --ti-lowcode-popover-option-popper-border-color: transparent;
-  --ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-common-primary-text-color);
 }
diff --git a/packages/theme/light/block.less b/packages/theme/light/block.less
index 9b3afa156..0d85bda2c 100644
--- a/packages/theme/light/block.less
+++ b/packages/theme/light/block.less
@@ -27,7 +27,7 @@
   --ti-lowcode-component-block-version-list-version-color: var(--ti-lowcode-common-primary-color);
   --ti-lowcode-component-block-version-list-panel-title-color: var(--ti-lowcode-common-text-title-color);
   --ti-lowcode-component-block-version-list-time-color: var(--ti-lowcode-common-text-title-color);
-  --ti-lowcode-component-block-version-list-desc-color: var(--ti-lowcode-common-text-desc-color);
+  --ti-lowcode-component-block-version-list-desc-color: var(--te-common-text-weaken);
   --ti-lowcode-component-block-version-list-current-version-color: var(--ti-lowcode-base-text-color-2);
   --ti-lowcode-component-block-setting-popover-bg: var(--ti-lowcode-base-gray-0);
   --ti-lowcode-component-block-setting-item-hover-bg: var(--ti-lowcode-base-bg-2);
diff --git a/packages/theme/light/button.less b/packages/theme/light/button.less
deleted file mode 100644
index 4d23f2280..000000000
--- a/packages/theme/light/button.less
+++ /dev/null
@@ -1,36 +0,0 @@
-button {
-  // primary 按钮字体颜色
-  // --ti-lowcode-button-primary-color: #fff;
-  --ti-lowcode-button-primary-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-button-primary-border-color: var(--ti-lowcode-base-bg-3);
-  --ti-lowcode-button-primary-bg-color: var(--ti-lowcode-base-bg-3);
-
-  --ti-lowcode-button-primary-hover-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-button-primary-hover-border-color: var(--ti-lowcode-base-bg-4);
-  --ti-lowcode-button-primary-hover-bg-color: var(--ti-lowcode-base-bg-4);
-
-  // button info 字体颜色
-  --ti-lowcode-button-info-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-button-info-border-color: var(--ti-lowcode-base-bg-3);
-  --ti-lowcode-button-info-bg-color: var(--ti-lowcode-base-bg-3);
-
-  // info 保存按钮 hover
-  --ti-lowcode-button-info-hover-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-button-info-hover-border-color: var(--ti-lowcode-base-bg-4);
-  --ti-lowcode-button-info-hover-bg-color: var(--ti-lowcode-base-bg-4);
-
-  // 默认按钮颜色
-  --ti-lowcode-button-default-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮颜色
-  --ti-lowcode-button-default-border-color: var(--ti-lowcode-base-secondary-button-border-color); // 默认按钮边框色
-  --ti-lowcode-button-default-bg: var(--ti-lowcode-base-gray-0);
-
-  // 按钮hover字体颜色
-  --ti-lowcode-button-default-hover-color: var(--ti-lowcode-base-primary-color-1);
-  --ti-lowcode-button-default-hover-border-color: var(--ti-lowcode-base-secondary-button-border-hover-color);
-  --ti-lowcode-button-default-hover-bg: var(--ti-lowcode-base-gray-0);
-
-  // 默认按钮禁用颜色
-  --ti-lowcode-button-default-disabled-color: var(--ti-lowcode-base-text-color-4);
-  --ti-lowcode-button-default-disabled-border-color: transparent;
-  --ti-lowcode-button-default-disabled-bg: var(--ti-lowcode-base-bg-1);
-}
diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less
index 66a84d889..60c943fad 100644
--- a/packages/theme/light/index.less
+++ b/packages/theme/light/index.less
@@ -1,4 +1,5 @@
 // 主题配置优先于公共配置
+@import './base.less';
 @import './variable.less';
 @import './tutorial.less';
 @import './help.less';
diff --git a/packages/theme/light/materials.less b/packages/theme/light/materials.less
index eb46f29a3..b18119956 100644
--- a/packages/theme/light/materials.less
+++ b/packages/theme/light/materials.less
@@ -18,7 +18,7 @@
   // 添加区块筛选模块选中字体颜色
   --ti-lowcode-materials-block-filter-selected-text-color: var(--ti-lowcode-common-primary-text-color);
   // 添加区块穿梭框面板头部背景颜色
-  --ti-lowcode-materials-block-transfer-header-bg-color: var(--ti-lowcode-base-bg);
+  --ti-lowcode-materials-block-transfer-header-bg-color: var(--te-common-bg-container);
   // 区块分组添加区块筛选项 hover 颜色
   --ti-lowcode-materials-block-filter-hover-color: var(--ti-lowcode-common-primary-text-color);
   // 组件列表  组件名称颜色
diff --git a/packages/theme/light/metaComponent.less b/packages/theme/light/metaComponent.less
index 210eb094d..49cf1a5a3 100644
--- a/packages/theme/light/metaComponent.less
+++ b/packages/theme/light/metaComponent.less
@@ -12,7 +12,7 @@
   --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-base-default-button-border-color);
   --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-base-default-button-border-hover-color);
-  --ti-lowcode-meta-codeEditor-icon-color: var(--ti-lowcode-base-text-color-3);
+  --ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken);
 }
 
 // config-item label popover tips
diff --git a/packages/theme/light/settings.less b/packages/theme/light/settings.less
index c71950759..85b0ed336 100644
--- a/packages/theme/light/settings.less
+++ b/packages/theme/light/settings.less
@@ -37,7 +37,7 @@
   --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-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3);
+  --ti-lowcode-className-selector-dropdown-list-tips-color: var(--te-common-text-weaken);
 }
 
 :root {
diff --git a/packages/theme/light/toolbar.less b/packages/theme/light/toolbar.less
index 3846b6caf..057378c2a 100644
--- a/packages/theme/light/toolbar.less
+++ b/packages/theme/light/toolbar.less
@@ -5,7 +5,7 @@
   --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-1);
   --ti-lowcode-toolbar-title-color: var(--ti-lowcode-base-gray-90);
   --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-base-bg);
+  --ti-lowcode-toolbar-hover-color: var(--te-common-bg-container);
   --ti-lowcode-toolbar-view-active-bg: rgb(235, 235, 235); // 相当于 规范中定义的 #191919 透明度5%
   --ti-lowcode-toolbar-left-icon-bg-hover: rgb(240, 240, 240);
   --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0);
diff --git a/packages/theme/light/tutorial.less b/packages/theme/light/tutorial.less
index 45404b2f6..39f0d5dbc 100644
--- a/packages/theme/light/tutorial.less
+++ b/packages/theme/light/tutorial.less
@@ -1,5 +1,5 @@
 #tiny-engine-left-panel {
   --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1);
   --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-base-bg);
+  --ti-lowcode-tutorial-hover-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less
index 82b8aeea0..92e4c59f8 100644
--- a/packages/theme/light/variable.less
+++ b/packages/theme/light/variable.less
@@ -14,7 +14,6 @@
   --ti-lowcode-common-secondary-text-color: #c2c2c2;
   --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-common-text-desc-color: var(--ti-lowcode-base-text-color-3);
   --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-text-color-1);
   --ti-lowcode-common-text-color-1: #6a6a6a;
   --ti-lowcode-common-text-color-2: #d9d9d9;
@@ -189,43 +188,8 @@
   --ti-lowcode-select-tags-bg-color: #5959591a;
   // 下拉框suffix图标悬浮颜色
   --ti-lowcode-select-suffix-icon-color-hover: var(--ti-lowcode-base-text-color);
-  // select 下拉框背景色
-  --ti-lowcode-dropdown-bg-color: #202020;
-  // select 下拉面板边框颜色
-  --ti-lowcode-dropdown-border-color: transparent;
-  // select 下拉面板选型字体颜色
-  --ti-lowcode-dropdown-item-text-color: var(--ti-lowcode-base-text-color);
-  // select 下拉框背景色
-  --ti-lowcode-dropdown-bg-color: #fff;
-  // select 下拉框选项hover背景色
-  --ti-lowcode-dropdown-item-hover-bg-color: #f2f2f2;
-  // select 下拉框选项选中背景色
-  --ti-lowcode-dropdown-item-selected-bg: #fff;
-  // select 下拉框选项选中字体颜色
-  --ti-lowcode-dropdown-item-selected-color: var(--ti-lowcode-base-text-color-2);
-  // select 下拉框选项hover字体颜色
-  --ti-lowcode-dropdown-item-hover-text-color: var(--ti-lowcode-base-text-color);
-  // button info 字体颜色
-  --ti-lowcode-button-info-color: #fff;
-  // button default 背景颜色
-  --ti-lowcode-button-default-bg: #fff;
-  // 按钮hover字体颜色
-  --ti-lowcode-button-default-hover-color: var(--ti-lowcode-common-primary-color);
-  // 按钮hover背景色
-  --ti-lowcode-button-default-hover-bg: #fff;
-  --ti-lowcode-button-default-hover-border-color: var(--ti-lowcode-common-primary-color);
-  // info 保存按钮背景色
-  --ti-lowcode-button-info-bg: var(--ti-lowcode-common-primary-color);
-  // info 保存按钮 hover 背景色
-  --ti-lowcode-button-info-hover-bg: var(--ti-lowcode-common-primary-hover-color);
-  // primary 按钮字体颜色
-  --ti-lowcode-button-primary-color: #fff;
-  // 按钮边框颜色
-  --ti-lowcode-button-border-color: var(--ti-lowcode-common-primary-color);
   // 组件icon颜色
   --ti-lowcode-component-icon-color: #8d8d8d;
-  // 组件item hover 背景色
-  --ti-lowcode-component-item-hover-bg: #e3e3e3;
   // 左侧插件激活背景色
   --ti-lowcode-left-panel-active-bg: #f2f2f2;
   // 左侧插件激活边框色
@@ -233,10 +197,6 @@
   // 左侧tabs按钮边框色
   --ti-lowcode-left-button-border-color: #ddd;
 
-  // list-item 项背景色
-  --ti-lowcode-list-item-bg: #fafafa;
-  // list-item 项激活背景色
-  --ti-lowcode-list-item-active-bg: #e9e9e9;
   // radio 按钮组激活背景色
   --ti-lowcode-radio-button-active-bg: #9d9d9d;
   // grid 布局设置按钮字体颜色
@@ -423,10 +383,4 @@
   --ti-lowcode-optionitem-border-color: rgba(0, 0, 0, 0.08);
   // 右侧optionitem的背景色
   --ti-lowcode-optionitem-background-color: #fff;
-
-  // 空数据图标颜色
-  --ti-lowcode-empty-icon-color: unset;
-
-  --ti-lowcode-popover-option-popper-border-color: transparent;
-  --ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-toolbar-more-color);
 }