diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index 4a33cf408..ee70de345 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -513,6 +513,10 @@ export default {
   justify-content: space-between;
   position: relative;
   align-items: center;
+  padding-bottom: 8px;
+  &:last-child {
+    padding-bottom: 0;
+  }
   &.active {
     background: var(--ti-lowcode-meta-config-item-active-bg);
   }
@@ -600,7 +604,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;
@@ -617,7 +621,7 @@ export default {
     display: flex;
     width: 100%;
     align-items: center;
-    padding: 8px 0;
+
     .pro-underline {
       border-bottom: 1px dashed transparent;
       &:hover {
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 7230a5762..f46f715a0 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -253,12 +253,14 @@ export default {
 <style lang="less" scoped>
 .editor-wrap {
   width: 100%;
-
+  display: flex;
+  text-align: center;
   .edit-btn {
     color: var(--ti-lowcode-meta-codeEditor-color);
     border-color: var(--ti-lowcode-meta-codeEditor-border-color);
-    display: flex;
-    align-items: center;
+    flex: 1;
+    text-align: center;
+    margin-right: 0;
     &:hover {
       color: var(--ti-lowcode-meta-codeEditor-hover-color);
       border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);
@@ -281,7 +283,7 @@ export default {
   align-items: center;
   width: 100%;
   height: 32px;
-  padding: 4px 8px;
+  padding: 4px;
   border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color);
   border-radius: 6px;
 
@@ -294,7 +296,7 @@ export default {
   }
 
   &.empty-color {
-    color: var(--ti-lowcode-common-text-desc-color);
+    color: var(--te-common-text-weaken);
   }
 
   .edit-icon {
@@ -328,7 +330,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(--te-common-text-weaken);
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
@@ -357,7 +359,7 @@ export default {
 
       code {
         font-family: Microsoft YaHei, Microsoft YaHei-Normal;
-        color: var(--ti-lowcode-base-text-color-3);
+        color: var(--te-common-text-weaken);
       }
     }
   }
diff --git a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
index b930ff4f1..5e270b44d 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: none;
   outline: 0;
   border-radius: 10px;
   box-sizing: border-box;
-  background: var(--ti-lowcode-base-bg);
+  background-color: var(--te-common-bg-switch);
   transition: border-color 0.3s, background-color 0.3s;
   vertical-align: middle;
 }
@@ -252,12 +252,11 @@ export default {
   transition: all 0.3s;
   width: 16px;
   height: 16px;
-  background-color: #ffffff;
+  background-color: var(--te-common-bg-default);
 }
 
 .e__switch.e_is-checked .e__switch-core {
-  border-color: var(--ti-lowcode-base-blue-6);
-  background-color: var(--ti-lowcode-base-blue-6);
+  background-color: var(--te-common-bg-primary-checked);
 }
 
 .e__switch.e_is-checked .e__switch-core::after {
diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
index a024634cc..4dd00bd52 100644
--- a/packages/configurator/src/slot-configurator/SlotConfigurator.vue
+++ b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
@@ -134,7 +134,6 @@ export default {
 <style lang="less" scoped>
 .slot-list {
   display: flex;
-  margin: 5px 0;
   justify-content: center;
   align-items: center;
   .slot-name {
@@ -171,11 +170,11 @@ export default {
   position: relative;
   width: 40px;
   height: 20px;
-  border: 1px solid var(--ti-lowcode-base-bg);
+  border: none;
   outline: 0;
   border-radius: 10px;
   box-sizing: border-box;
-  background: var(--ti-lowcode-base-bg);
+  background-color: var(--te-common-bg-switch);
   transition: border-color 0.3s, background-color 0.3s;
   vertical-align: middle;
 }
@@ -189,12 +188,11 @@ export default {
   transition: all 0.3s;
   width: 16px;
   height: 16px;
-  background-color: #ffffff;
+  background-color: var(--te-common-bg-default);
 }
 
 .e__switch.e_is-checked .e__switch-core {
-  border-color: var(--ti-lowcode-base-blue-6);
-  background-color: var(--ti-lowcode-base-blue-6);
+  background-color: var(--te-common-bg-primary-checked);
 }
 
 .e__switch.e_is-checked .e__switch-core::after {
diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js
index 065ffa3c2..b1aede90f 100644
--- a/packages/design-core/src/init.js
+++ b/packages/design-core/src/init.js
@@ -17,7 +17,7 @@ import { initMonitor } from '@opentiny/tiny-engine-common/js/monitor'
 import { injectGlobalComponents, setGlobalMonacoEditorTheme, Modal, Notify } from '@opentiny/tiny-engine-common'
 import { initHttp } from '@opentiny/tiny-engine-http'
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
-import { tinyEngineThemeLight } from '@opentiny/tiny-engine-theme-base'
+import { defaultThemeList } from '@opentiny/tiny-engine-theme-base'
 import {
   defineEntry,
   mergeRegistry,
@@ -51,8 +51,10 @@ const defaultLifeCycles = {
 
     initHttp({ env: import.meta.env })
 
+    const theme = newRegistry.config.theme || 'light'
     // eslint-disable-next-line no-new
-    new TinyThemeTool(tinyEngineThemeLight, 'tinyEngineTheme') // 初始化主题
+    new TinyThemeTool(defaultThemeList[theme], defaultThemeList[theme]?.id)
+    document.documentElement?.setAttribute?.('data-theme', theme)
 
     if (import.meta.env.VITE_ERROR_MONITOR === 'true' && import.meta.env.VITE_ERROR_MONITOR_URL) {
       initMonitor(import.meta.env.VITE_ERROR_MONITOR_URL)
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 1c5e26ded..993ef02a7 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,11 +79,19 @@ 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;
     }
   }
 
   :deep(.tiny-collapse-item__content) {
-    padding: 8px 8px 8px 12px;
+    padding: 0 8px 12px 12px; // 这里的bottom为4px + 内部行元素与底部的距离为8px = 12px
   }
 }
 
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/Main.vue b/packages/settings/styles/src/Main.vue
index c8df17eda..9dc4b7298 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -205,7 +205,7 @@ export default {
 <style lang="less" scoped>
 .style-editor {
   justify-content: space-around;
-  padding: 8px 0 0;
+  padding: 12px 0 0;
   column-gap: 8px;
   .line-style {
     padding: 0 8px 0 12px;
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 4ed8c85d6..66de5a473 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -532,7 +532,6 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 4px 0 12px;
     position: relative;
     .background-image-icon {
       font-size: 16px;
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/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue
index 1e614164c..e198a2eaf 100644
--- a/packages/settings/styles/src/components/border/BorderGroup.vue
+++ b/packages/settings/styles/src/components/border/BorderGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['radius-row', { 'show-border': isRaduisSelected(RADIUS_SETTING.Single) }]">
+  <div class="radius-row item-row">
     <div
       :class="['radius-label', { 'is-setting': isRadiusSetting() }]"
       @click="openSetting(BORDER_RADIUS_PROPERTY.BorderRadius, $event)"
@@ -95,7 +95,7 @@
     </div>
   </div>
 
-  <div class="border-label">
+  <div class="border-label item-row">
     <span
       :class="{ 'is-setting': isBorderSetting(), 'set-border-style': true }"
       @click="openSetting(BORDER_PROPERTY.Border, $event)"
@@ -145,7 +145,7 @@
   </div>
   <div class="border-input">
     <div class="border-input-right">
-      <div class="border-row">
+      <div class="border-row item-row">
         <div class="border-label">
           <span
             :class="{ 'is-setting': isBorderColorSetting() }"
@@ -215,7 +215,6 @@
           </tiny-tooltip>
         </div>
       </div>
-      <div class="border-row"></div>
     </div>
   </div>
 
@@ -560,7 +559,6 @@ export default {
 <style lang="less" scoped>
 .border-row {
   display: flex;
-
   .border-col {
     flex: 1;
     display: flex;
@@ -579,22 +577,13 @@ export default {
     color: var(--ti-lowcode-toolbar-breadcrumb-color);
   }
 }
-
+.item-row {
+  margin-bottom: 8px;
+}
 .radius-row {
   display: flex;
   align-items: center;
-  padding-bottom: 8px;
   position: relative;
-  &.show-border::after {
-    content: '';
-    height: 1px;
-    width: calc(100% + 32px);
-    background: var(--ti-lowcode-toolbar-border-color);
-    position: absolute;
-    bottom: 0;
-    left: -16px;
-  }
-
   svg {
     color: var(--ti-lowcode-input-icon-color);
     font-size: 16px;
@@ -622,6 +611,7 @@ export default {
     .radius-content-svg {
       &:hover,
       &.selected {
+        color: var(--ti-lowcode-property-active-color);
         svg {
           color: var(--ti-lowcode-property-active-color);
         }
@@ -694,7 +684,6 @@ export default {
 
 .border-label {
   width: 100%;
-  margin: 10px 0 5px 0;
   color: var(--ti-lowcode-component-setting-panel-label-color);
   .set-border-style {
     line-height: 24px;
@@ -717,8 +706,6 @@ export default {
     }
   }
   .row-item {
-    padding: 5px;
-    border-radius: 3px;
     &:hover {
       svg {
         color: var(--ti-lowcode-toolbar-icon-color);
@@ -726,7 +713,7 @@ export default {
     }
 
     &.selected {
-      // background-color: var(--ti-lowcode-tabs-bg);
+      color: var(--ti-lowcode-property-active-color);
       svg {
         color: var(--ti-lowcode-property-active-color);
       }
@@ -747,8 +734,6 @@ export default {
     .border-row {
       display: flex;
       align-items: center;
-      margin: 5px 0;
-
       .border-label {
         flex: 0 0 40px;
       }
@@ -764,6 +749,7 @@ export default {
           justify-content: center;
           &.selected,
           &:hover {
+            color: var(--ti-lowcode-property-active-color);
             svg {
               color: var(--ti-lowcode-property-active-color);
             }
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index 25425368c..70630c262 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -475,7 +475,7 @@ const handleDeleteCurSelector = () => {
   ::-webkit-scrollbar {
     display: block;
   }
-  padding: 12px 8px 11px 12px;
+  padding: 12px 8px 12px 12px;
 }
 .title {
   margin: 0;
diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue
index c5d367eee..cba6a1b87 100644
--- a/packages/settings/styles/src/components/effects/EffectGroup.vue
+++ b/packages/settings/styles/src/components/effects/EffectGroup.vue
@@ -519,8 +519,10 @@ export default {
   gap: 8px;
   grid-template-columns: 44px auto;
   align-items: center;
-  padding: 8px 0;
-
+  margin-bottom: 8px;
+  &:last-child {
+    margin-bottom: 0;
+  }
   .opacity-label,
   .outline-label,
   .cursor-label {
diff --git a/packages/settings/styles/src/components/inputs/ImageSelect.vue b/packages/settings/styles/src/components/inputs/ImageSelect.vue
index eccc5803e..1dc9289dd 100644
--- a/packages/settings/styles/src/components/inputs/ImageSelect.vue
+++ b/packages/settings/styles/src/components/inputs/ImageSelect.vue
@@ -68,7 +68,6 @@ export default {
 <style lang="less" scoped>
 .background-image {
   width: 100%;
-
   .icon {
     font-size: 20px;
     color: var(--ti-lowcode-toolbar-breadcrumb-color);
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 6a0b8cfd7..0e16b4872 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -447,13 +447,14 @@ export default {
 <style lang="less" scoped>
 .size-row {
   display: flex;
-
+  margin-bottom: 8px;
+  &:last-child {
+    margin-bottom: 0;
+  }
   .size-col {
     flex: 1;
     display: flex;
     align-items: center;
-    padding: 5px 0;
-
     &:not(:last-child) {
       margin-right: 8px;
     }
@@ -471,7 +472,10 @@ export default {
 .overflow-row {
   display: flex;
   align-items: center;
-
+  margin-bottom: 8px;
+  &:last-child {
+    margin-bottom: 0;
+  }
   .overflow-label {
     flex: 0 0 54px;
     padding: 0 2px;
@@ -554,7 +558,10 @@ export default {
 .fit-row {
   display: flex;
   align-items: center;
-  padding: 5px 0;
+  margin-bottom: 8px;
+  &:last-child {
+    margin-bottom: 0;
+  }
   .fit-label {
     flex: 0 0 54px;
     padding: 0 2px;
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/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index 071d8dca9..14cbfaebb 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -34,7 +34,7 @@
       </div>
     </div>
 
-    <div class="typography-row split line">
+    <div class="typography-row split">
       <div class="left typography-col">
         <label
           :class="['typography-label', { 'is-setting': getSettingFlag(TYPO_PROPERTY.LineHeight) }]"
@@ -474,19 +474,8 @@ export default {
     grid-template-columns: 15px 1fr;
     align-items: center;
     margin-bottom: 8px;
-
-    &.line {
-      position: relative;
-      padding-bottom: 10px;
-      &::after {
-        content: '';
-        height: 1px;
-        width: calc(100% + 32px);
-        background: var(--ti-lowcode-toolbar-border-color);
-        position: absolute;
-        bottom: 0;
-        left: -16px;
-      }
+    &:last-child {
+      margin-bottom: 0;
     }
 
     &.split {
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/settings/styles/src/js/useStyle.js b/packages/settings/styles/src/js/useStyle.js
index 5d25eaa12..cf93da8f5 100644
--- a/packages/settings/styles/src/js/useStyle.js
+++ b/packages/settings/styles/src/js/useStyle.js
@@ -177,19 +177,21 @@ watch(
 )
 
 // 监听全局样式的变化，重新解析
-watch(
-  () => useCanvas().getPageSchema?.()?.css,
-  (value) => {
-    state.cssContent = value || ''
-
-    // 解析css
-    const { parseList, selectors, styleObject } = parser(value)
-
-    state.cssParseList = parseList
-    state.selectors = selectors
-    state.styleObject = styleObject
-  }
-)
+setTimeout(() => {
+  watch(
+    () => useCanvas().getPageSchema?.()?.css,
+    (value) => {
+      state.cssContent = value || ''
+
+      // 解析css
+      const { parseList, selectors, styleObject } = parser(value)
+
+      state.cssParseList = parseList
+      state.selectors = selectors
+      state.styleObject = styleObject
+    }
+  )
+}, 0) // 这里需要延时，不然页面初始化的时候，watch不到实际的对象，会使得这里失效
 
 // 计算当前类名下拉列表
 watch(
diff --git a/packages/theme/base/package.json b/packages/theme/base/package.json
index 75e7301b1..7fdfc3922 100644
--- a/packages/theme/base/package.json
+++ b/packages/theme/base/package.json
@@ -22,6 +22,7 @@
   "author": "OpenTiny Team",
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
+  "dependencies": {},
   "devDependencies": {
     "rimraf": "^3.0.2",
     "vite": "^4.3.7"
diff --git a/packages/theme/base/src/base.js b/packages/theme/base/src/base.js
deleted file mode 100644
index 5e6ba2504..000000000
--- a/packages/theme/base/src/base.js
+++ /dev/null
@@ -1,301 +0,0 @@
-export const tinyBaseTheme = {
-  // 灰阶
-  'ti-lowcode-base-gray-0': '#fff',
-  'ti-lowcode-base-gray-5': '#fafafa',
-  'ti-lowcode-base-gray-10': '#f5f5f5',
-  'ti-lowcode-base-gray-15': '#f0f0f0',
-  'ti-lowcode-base-gray-20': '#e6e6e6',
-  'ti-lowcode-base-gray-25': '#d9d9d9',
-  'ti-lowcode-base-gray-30': '#dbdbdb',
-  'ti-lowcode-base-gray-35': '#ccc',
-  'ti-lowcode-base-gray-40': '#c2c2c2',
-  'ti-lowcode-base-gray-45': '#a6a6a6',
-  'ti-lowcode-base-gray-50': '#808080',
-  'ti-lowcode-base-gray-60': '#595959',
-  'ti-lowcode-base-gray-70': '#333',
-  'ti-lowcode-base-gray-75': '#262626',
-  'ti-lowcode-base-gray-80': '#292929',
-  'ti-lowcode-base-gray-85': '#1f1f1f',
-  'ti-lowcode-base-gray-90': '#141414',
-  'ti-lowcode-base-gray-95': '#191919',
-  'ti-lowcode-base-gray-100': '#000',
-
-  // expand-red
-  'ti-lowcode-base-red-1': '#ffeae8',
-  'ti-lowcode-base-red-2': '#fccdca',
-  'ti-lowcode-base-red-3': '#faa9a5',
-  'ti-lowcode-base-red-4': '#fa8682',
-  'ti-lowcode-base-red-5': '#f76360',
-  'ti-lowcode-base-red-6': '#f23030',
-  'ti-lowcode-base-red-7': '#cc272a',
-  'ti-lowcode-base-red-8': '#a3171c',
-  'ti-lowcode-base-red-9': '#78080e',
-  'ti-lowcode-base-red-10': '#4d0005',
-  'ti-lowcode-base-red-11': '#a64242',
-  'ti-lowcode-base-red-12': '#d4827f',
-  'ti-lowcode-base-red-13': '#f2c5c2',
-
-  // expand-orange
-  'ti-lowcode-base-orange-1': '#fff5e8',
-  'ti-lowcode-base-orange-2': '#fcdfb8',
-  'ti-lowcode-base-orange-3': '#fcc98b',
-  'ti-lowcode-base-orange-4': '#fcb25c',
-  'ti-lowcode-base-orange-5': '#ff9a2e',
-  'ti-lowcode-base-orange-6': '#ff8800',
-  'ti-lowcode-base-orange-7': '#d96900',
-  'ti-lowcode-base-orange-8': '#a64d00',
-  'ti-lowcode-base-orange-9': '#733400',
-  'ti-lowcode-base-orange-10': '#4d2201',
-  'ti-lowcode-base-orange-11': '#9e6d3f',
-  'ti-lowcode-base-orange-12': '#d6a981',
-  'ti-lowcode-base-orange-13': '#f2d8c2',
-
-  // expand-yellow
-  'ti-lowcode-base-yellow-1': '#fcf9eb',
-  'ti-lowcode-base-yellow-2': '#fcf0c2',
-  'ti-lowcode-base-yellow-3': '#fae396',
-  'ti-lowcode-base-yellow-4': '#f7d56d',
-  'ti-lowcode-base-yellow-5': '#f7c845',
-  'ti-lowcode-base-yellow-6': '#fcbe1e',
-  'ti-lowcode-base-yellow-7': '#d99b0b',
-  'ti-lowcode-base-yellow-8': '#a67711',
-  'ti-lowcode-base-yellow-9': '#7a5202',
-  'ti-lowcode-base-yellow-10': '#4d3200',
-  'ti-lowcode-base-yellow-11': '#9e7e3f',
-  'ti-lowcode-base-yellow-12': '#d4b57f',
-  'ti-lowcode-base-yellow-13': '#e6d3b8',
-
-  // expand-lemon
-  'ti-lowcode-base-lemon-1': '#fcfae8',
-  'ti-lowcode-base-lemon-2': '#fcf6c2',
-  'ti-lowcode-base-lemon-3': '#fcf092',
-  'ti-lowcode-base-lemon-4': '#fae969',
-  'ti-lowcode-base-lemon-5': '#f7e04a',
-  'ti-lowcode-base-lemon-6': '#f7d916',
-  'ti-lowcode-base-lemon-7': '#d9bb16',
-  'ti-lowcode-base-lemon-8': '#a38708',
-  'ti-lowcode-base-lemon-9': '#756002',
-  'ti-lowcode-base-lemon-10': '#4d3d00',
-  'ti-lowcode-base-lemon-11': '#9e8f46',
-  'ti-lowcode-base-lemon-12': '#d6c581',
-  'ti-lowcode-base-lemon-13': '#eddfb2',
-
-  // expand-lime
-  'ti-lowcode-base-lime-1': '#f8fae3',
-  'ti-lowcode-base-lime-2': '#eff5bf',
-  'ti-lowcode-base-lime-3': '#e2ed8e',
-  'ti-lowcode-base-lime-4': '#d5e667',
-  'ti-lowcode-base-lime-5': '#c6de3e',
-  'ti-lowcode-base-lime-6': '#b2d119',
-  'ti-lowcode-base-lime-7': '#95b312',
-  'ti-lowcode-base-lime-8': '#728c0a',
-  'ti-lowcode-base-lime-9': '#576e05',
-  'ti-lowcode-base-lime-10': '#3b4d00',
-  'ti-lowcode-base-lime-11': '#808c46',
-  'ti-lowcode-base-lime-12': '#c1cc7a',
-  'ti-lowcode-base-lime-13': '#3b4d00',
-
-  // expand-kelly
-  'ti-lowcode-base-kelly-1': '#f2fae6',
-  'ti-lowcode-base-kelly-2': '#daf2bb',
-  'ti-lowcode-base-kelly-3': '#b9e683',
-  'ti-lowcode-base-kelly-4': '#9edb58',
-  'ti-lowcode-base-kelly-5': '#7dcc29',
-  'ti-lowcode-base-kelly-6': '#5cb300',
-  'ti-lowcode-base-kelly-7': '#4b9902',
-  'ti-lowcode-base-kelly-8': '#3c8001',
-  'ti-lowcode-base-kelly-9': '#2e6600',
-  'ti-lowcode-base-kelly-10': '#1f4700',
-  'ti-lowcode-base-kelly-11': '#628c38',
-  'ti-lowcode-base-kelly-12': '#a2c777',
-  'ti-lowcode-base-kelly-13': '#d2e6bb',
-
-  // expand-green
-  'ti-lowcode-base-green-1': '#e8fced',
-  'ti-lowcode-base-green-2': '#bbf2c8',
-  'ti-lowcode-base-green-3': '#82e09a',
-  'ti-lowcode-base-green-4': '#51d675',
-  'ti-lowcode-base-green-5': '#25c251',
-  'ti-lowcode-base-green-6': '#00b336',
-  'ti-lowcode-base-green-7': '#029931',
-  'ti-lowcode-base-green-8': '#01802b',
-  'ti-lowcode-base-green-9': '#006624',
-  'ti-lowcode-base-green-10': '#004a1b',
-  'ti-lowcode-base-green-11': '#3d995c',
-  'ti-lowcode-base-green-12': '#77c78f',
-  'ti-lowcode-base-green-13': '#b8e6c7',
-
-  // expand-mint
-  'ti-lowcode-base-mint-1': '#e8fcfa',
-  'ti-lowcode-base-mint-2': '#bff5ef',
-  'ti-lowcode-base-mint-3': '#8be8e0',
-  'ti-lowcode-base-mint-4': '#5dded5',
-  'ti-lowcode-base-mint-5': '#38d6ce',
-  'ti-lowcode-base-mint-6': '#10c7c1',
-  'ti-lowcode-base-mint-7': '#0aaba8',
-  'ti-lowcode-base-mint-8': '#048c8c',
-  'ti-lowcode-base-mint-9': '#046466',
-  'ti-lowcode-base-mint-10': '#004547',
-  'ti-lowcode-base-mint-11': '#3d9996',
-  'ti-lowcode-base-mint-12': '#77c7c2',
-  'ti-lowcode-base-mint-13': '#b8e6e1',
-
-  // expand-sky
-  'ti-lowcode-base-sky-1': '#e8f8fc',
-  'ti-lowcode-base-sky-2': '#c4f2ff',
-  'ti-lowcode-base-sky-3': '#9de4fa',
-  'ti-lowcode-base-sky-4': '#79d8f7',
-  'ti-lowcode-base-sky-5': '#58cbf5',
-  'ti-lowcode-base-sky-6': '#33bcf2',
-  'ti-lowcode-base-sky-7': '#1f9acf',
-  'ti-lowcode-base-sky-8': '#1075a3',
-  'ti-lowcode-base-sky-9': '#065278',
-  'ti-lowcode-base-sky-10': '#00304a',
-  'ti-lowcode-base-sky-11': '#3d7f99',
-  'ti-lowcode-base-sky-12': '#7ab8cc',
-  'ti-lowcode-base-sky-13': '#b6e5f2',
-
-  // expand-blue
-  'ti-lowcode-base-blue-1': '#e3effa',
-  'ti-lowcode-base-blue-2': '#c4e1ff',
-  'ti-lowcode-base-blue-3': '#99c9ff',
-  'ti-lowcode-base-blue-4': '#68abfc',
-  'ti-lowcode-base-blue-5': '#4191fa',
-  'ti-lowcode-base-blue-6': '#1476ff',
-  'ti-lowcode-base-blue-7': '#0f5ed4',
-  'ti-lowcode-base-blue-8': '#0845a6',
-  'ti-lowcode-base-blue-9': '#022e7a',
-  'ti-lowcode-base-blue-10': '#001a4a',
-  'ti-lowcode-base-blue-11': '#3d6899',
-  'ti-lowcode-base-blue-12': '#7fa6d4',
-  'ti-lowcode-base-blue-13': '#b6d4f2',
-
-  // expand-indigo
-  'ti-lowcode-base-indigo-1': '#eee8ff',
-  'ti-lowcode-base-indigo-2': '#ddd7fa',
-  'ti-lowcode-base-indigo-3': '#b19cf7',
-  'ti-lowcode-base-indigo-4': '#957af5',
-  'ti-lowcode-base-indigo-5': '#6e51e0',
-  'ti-lowcode-base-indigo-6': '#512fd6',
-  'ti-lowcode-base-indigo-7': '#391eb0',
-  'ti-lowcode-base-indigo-8': '#27108f',
-  'ti-lowcode-base-indigo-9': '#19056e',
-  'ti-lowcode-base-indigo-10': '#0e004d',
-  'ti-lowcode-base-indigo-11': '#584d99',
-  'ti-lowcode-base-indigo-12': '#847acc',
-  'ti-lowcode-base-indigo-13': '#bbb8e6',
-
-  // expand-purple
-  'ti-lowcode-base-purple-1': '#f5e8ff',
-  'ti-lowcode-base-purple-2': '#e4c5fc',
-  'ti-lowcode-base-purple-3': '#d0a1f7',
-  'ti-lowcode-base-purple-4': '#b878f0',
-  'ti-lowcode-base-purple-5': '#9f53e6',
-  'ti-lowcode-base-purple-6': '#832fd6',
-  'ti-lowcode-base-purple-7': '#641eb0',
-  'ti-lowcode-base-purple-8': '#4c1091',
-  'ti-lowcode-base-purple-9': '#370673',
-  'ti-lowcode-base-purple-10': '#20004d',
-  'ti-lowcode-base-purple-11': '#683d99',
-  'ti-lowcode-base-purple-12': '#a07acc',
-  'ti-lowcode-base-purple-13': '#cbb8e6',
-
-  // expand-pink
-  'ti-lowcode-base-pink-1': '#fce6fb',
-  'ti-lowcode-base-pink-2': '#fcc2f9',
-  'ti-lowcode-base-pink-3': '#f794f2',
-  'ti-lowcode-base-pink-4': '#eb67e6',
-  'ti-lowcode-base-pink-5': '#e841e5',
-  'ti-lowcode-base-pink-6': '#d91ad9',
-  'ti-lowcode-base-pink-7': '#b50fb8',
-  'ti-lowcode-base-pink-8': '#8f0a94',
-  'ti-lowcode-base-pink-9': '#6b0370',
-  'ti-lowcode-base-pink-10': '#47004d',
-  'ti-lowcode-base-pink-11': '#993d99',
-  'ti-lowcode-base-pink-12': '#c97acc',
-  'ti-lowcode-base-pink-13': '#e2b8e6',
-
-  // expand-rose
-  'ti-lowcode-base-rose-1': '#fce6ef',
-  'ti-lowcode-base-rose-2': '#ffc4de',
-  'ti-lowcode-base-rose-3': '#fa9bc9',
-  'ti-lowcode-base-rose-4': '#f56cac',
-  'ti-lowcode-base-rose-5': '#eb4696',
-  'ti-lowcode-base-rose-6': '#e61c81',
-  'ti-lowcode-base-rose-7': '#b50e65',
-  'ti-lowcode-base-rose-8': '#940a54',
-  'ti-lowcode-base-rose-9': '#70033f',
-  'ti-lowcode-base-rose-10': '#4d002b',
-  'ti-lowcode-base-rose-11': '#993d6e',
-  'ti-lowcode-base-rose-12': '#cc7aa6',
-  'ti-lowcode-base-rose-13': '#e6b8d2',
-
-  // 公司品牌色
-  'ti-lowcode-base-brand-color': '#c7000b',
-
-  // 主色
-  'ti-lowcode-base-primary-color-1': '#191919',
-  'ti-lowcode-base-primary-color-2': '#1476ff',
-
-  // 背景色
-  'ti-lowcode-base-bg': '#f5f5f5',
-  'ti-lowcode-base-bg-1': 'rgba(0, 0, 0, 0.05)',
-  'ti-lowcode-base-bg-2': '#fafafa',
-  'ti-lowcode-base-bg-3': '#191919',
-  'ti-lowcode-base-bg-4': '#595959',
-  'ti-lowcode-base-bg-5': '#fff',
-  'ti-lowcode-base-bg-6': '#5959591a',
-  'ti-lowcode-base-dark-bg': '#141414',
-  'ti-lowcode-base-dark-bg-2': '#333',
-  'ti-lowcode-base-dark-bg-3': '#e6e6e6',
-  'ti-lowcode-base-dark-bg-4': '#a6a6a6',
-  'ti-lowcode-base-dark-bg-5': '#000',
-  'ti-lowcode-base-dark-bg-6': '#a6a6a61a',
-
-  // 文本色
-  'ti-lowcode-base-text-color': '#191919',
-  'ti-lowcode-base-text-color-1': '#595959',
-  'ti-lowcode-base-text-color-2': '#1476ff',
-  'ti-lowcode-base-text-color-3': '#808080',
-  'ti-lowcode-base-text-color-4': '#c2c2c2',
-  'ti-lowcode-base-dark-text-color': '#e6e6e6',
-  'ti-lowcode-base-dark-text-color-1': '#a6a6a6',
-  'ti-lowcode-base-text-dark-color-2': '#595959',
-
-  // 文本链接色
-  'ti-lowcode-base-text-link-color': '#191919',
-  'ti-lowcode-base-text-link-color-1': '#595959',
-  'ti-lowcode-base-text-link-color-2': '#c2c2c2',
-  'ti-lowcode-base-text-link-color-3': '#fff',
-  'ti-lowcode-base-dark-text-link-color': '#e6e6e6',
-  'ti-lowcode-base-dark-text-link-color-1': '#a6a6a6',
-
-  // 按钮边框色
-  'ti-lowcode-base-secondary-button-border-color': '#595959',
-  'ti-lowcode-base-secondary-button-border-hover-color': '#c2c2c2',
-  'ti-lowcode-base-default-button-border-color': '#c2c2c2',
-  'ti-lowcode-base-default-button-border-hover-color': '#191919',
-  'ti-lowcode-base-default-button-border-disable-color': '#dbdbdb',
-  'ti-lowcode-base-dark-secondary-button-border-color': '#a6a6a6',
-  'ti-lowcode-base-dark-secondary-button-border-hover-color': '#3d3d3d',
-  'ti-lowcode-base-dark-default-button-border-color': '#595959',
-  'ti-lowcode-base-dark-default-button-border-hover-color': '#e6e6e6',
-
-  // 分割线
-  'ti-lowcode-base-split-color-1': 'rgba(0, 0, 0, 0.08)', // 白色背景分割线
-  'ti-lowcode-base-split-color-2': 'rgba(0, 0, 0, 0.15)', // 灰色背景分割线
-  'ti-lowcode-base-dark-split-color-1': 'rgba(255, 255, 255, 0.08)', // 白色背景分割线
-  'ti-lowcode-base-dark-split-color-2': 'rgba(255, 255, 255, 0.15)',
-
-  // 状态色
-  'ti-lowcode-base-error-color': '#f23030',
-  'ti-lowcode-base-warn-color': '#ff8800',
-  'ti-lowcode-base-warn-color-1': '#f7d916',
-  'ti-lowcode-base-success-color': '#5cb300',
-  'ti-lowcode-base-prompt-color': '#1476ff',
-  'ti-lowcode-base-invalidate-color': '#ebebeb'
-}
-
-export * from './light-component.js'
-
-export * from './dark-component.js'
diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less
new file mode 100644
index 000000000..51e840293
--- /dev/null
+++ b/packages/theme/base/src/base.less
@@ -0,0 +1,514 @@
+:root {
+  // 透明色
+  --te-base-color-transparent: transparent;
+  --te-base-color-inherit: inherit;
+  --te-base-color-unset: unset;
+
+  // 灰阶
+  --te-base-gray-1: #fff;
+  --te-base-gray-2: #fafafa;
+  --te-base-gray-3: #f2f2f2;
+  --te-base-gray-4: #f2f5fc;
+  --te-base-gray-5: #f5f5f5;
+  --te-base-gray-6: #f0f0f0;
+  --te-base-gray-7: #e6e6e6;
+  --te-base-gray-8: #eeeeee;
+  --te-base-gray-9: #dfe1e6;
+  --te-base-gray-10: #e3e3e3;
+  --te-base-gray-11: #ebebeb;
+  --te-base-gray-12: #d9d9d9;
+  --te-base-gray-13: #dbdbdb;
+  --te-base-gray-14: #e5e5e5;
+  --te-base-gray-15: #e9e9e9;
+  --te-base-gray-16: #b9b9b9;
+  --te-base-gray-17: #ccc;
+  --te-base-gray-18: #c2c2c2;
+  --te-base-gray-19: #afafaf;
+  --te-base-gray-20: #ababab;
+  --te-base-gray-21: #adb0b8;
+  --te-base-gray-22: #1476ff1a;
+  --te-base-gray-23: #a6a6a6;
+  --te-base-gray-24: #a7aab2;
+  --te-base-gray-25: #4d4d4d;
+  --te-base-gray-26: #464c59;
+  --te-base-gray-27: #5a5a5a;
+  --te-base-gray-28: #555;
+  --te-base-gray-29: #5e5e5e;
+  --te-base-gray-30: #575d6c;
+  --te-base-gray-31: #595959;
+  --te-base-gray-32: #666;
+  --te-base-gray-33: #6a6a6a;
+  --te-base-gray-34: #6b6b6b;
+  --te-base-gray-35: #606165;
+  --te-base-gray-36: #dddddd;
+  --te-base-gray-37: #cbcbcb;
+  --te-base-gray-38: #626262;
+  --te-base-gray-39: #737373;
+  --te-base-gray-40: #757575;
+  --te-base-gray-41: #888;
+  --te-base-gray-42: #8d8d8d;
+  --te-base-gray-43: #808080;
+  --te-base-gray-44: #8a8e99;
+  --te-base-gray-45: #9a9a9a;
+  --te-base-gray-46: #999;
+  --te-base-gray-47: #9d9d9d;
+  --te-base-gray-48: #9f9f9f;
+  --te-base-gray-49: #999999;
+  --te-base-gray-50: #8a887b;
+  --te-base-gray-51: #f3f3f3;
+  --te-base-gray-52: #d1d1d1;
+  --te-base-gray-53: #bdbdbd;
+  --te-base-gray-54: #dfdfdf;
+  --te-base-gray-55: #bfbfbf;
+  --te-base-gray-56: #b5b5b5;
+  --te-base-gray-57: #f3f3f5;
+  --te-base-gray-58: #919191;
+  --te-base-gray-59: #e7e8e9;
+  --te-base-gray-60: #9e9e9e;
+  --te-base-gray-61: #63666c;
+  --te-base-gray-62: #858585;
+  --te-base-gray-63: #f6eeee;
+  --te-base-gray-64: #f0f1f5;
+  --te-base-gray-65: #b4b5b8;
+  --te-base-gray-66: #8b8c8f;
+  --te-base-gray-67: #4d4e52;
+  --te-base-gray-68: #36383d;
+  --te-base-gray-69: #2b2d33;
+
+  // black
+  --te-base-dark-1: #1f1f1f;
+  --te-base-dark-2: #1a1a1a;
+  --te-base-dark-3: #141414;
+  --te-base-dark-4: #191818;
+  --te-base-dark-5: #191919;
+  --te-base-dark-6: #202020;
+  --te-base-dark-7: #2e2e2e;
+  --te-base-dark-8: #2f2f2f;
+  --te-base-dark-9: #212121;
+  --te-base-dark-10: #232323;
+  --te-base-dark-11: #252b3a;
+  --te-base-dark-12: #2b2b2b;
+  --te-base-dark-13: #262626;
+  --te-base-dark-14: #222;
+  --te-base-dark-15: #323644;
+  --te-base-dark-16: #1e1e1e;
+  --te-base-dark-17: #292929;
+  --te-base-dark-18: #3c3c3c;
+  --te-base-dark-19: #313131;
+  --te-base-dark-20: #333;
+  --te-base-dark-21: #363636;
+  --te-base-dark-22: #404040;
+  --te-base-dark-23: #414141;
+  --te-base-dark-24: #433535;
+  --te-base-dark-25: #041320;
+  --te-base-dark-26: #000;
+  --te-base-dark-27: #212329;
+  --te-base-dark-28: #1d312a;
+  --te-base-dark-29: #2a2c31;
+
+  // expand-red
+  --te-base-red-1: #ffeae8;
+  --te-base-red-2: #fccdca;
+  --te-base-red-3: #faa9a5;
+  --te-base-red-4: #fa8682;
+  --te-base-red-5: #f76360;
+  --te-base-red-6: #f23030;
+  --te-base-red-7: #cc272a;
+  --te-base-red-8: #a3171c;
+  --te-base-red-9: #78080e;
+  --te-base-red-10: #4d0005;
+  --te-base-red-11: #a64242;
+  --te-base-red-12: #d4827f;
+  --te-base-red-13: #f2c5c2;
+  --te-base-red-14: #c7000b;
+  --te-base-red-15: #fce3e1;
+  --te-base-red-16: #feeaeb;
+  --te-base-red-17: #dc544f;
+  --te-base-red-18: #ff0000;
+  --te-base-red-19: #ea384c;
+  --te-base-red-20: #c92c3f;
+  --te-base-red-21: #de504e;
+
+  // expand-orange
+  --te-base-orange-1: #fff5e8;
+  --te-base-orange-2: #fcdfb8;
+  --te-base-orange-3: #fcc98b;
+  --te-base-orange-4: #fcb25c;
+  --te-base-orange-5: #ff9a2e;
+  --te-base-orange-6: #ff8800;
+  --te-base-orange-7: #d96900;
+  --te-base-orange-8: #a64d00;
+  --te-base-orange-9: #733400;
+  --te-base-orange-10: #4d2201;
+  --te-base-orange-11: #9e6d3f;
+  --te-base-orange-12: #d6a981;
+  --te-base-orange-13: #f2d8c2;
+  --te-base-orange-14: #fa9841;
+  --te-base-orange-15: #facb4b;
+  --te-base-orange-16: #ffb100;
+
+  // expand-yellow
+  --te-base-yellow-1: #fcf9eb;
+  --te-base-yellow-2: #fcf0c2;
+  --te-base-yellow-3: #fae396;
+  --te-base-yellow-4: #f7d56d;
+  --te-base-yellow-5: #f7c845;
+  --te-base-yellow-6: #fcbe1e;
+  --te-base-yellow-7: #d99b0b;
+  --te-base-yellow-8: #a67711;
+  --te-base-yellow-9: #7a5202;
+  --te-base-yellow-10: #4d3200;
+  --te-base-yellow-11: #9e7e3f;
+  --te-base-yellow-12: #d4b57f;
+  --te-base-yellow-13: #e6d3b8;
+  --te-base-yellow-14: #501c1c;
+  --te-base-yellow-15: #8d5421;
+
+  // expand-lemon
+  --te-base-lemon-1: #fcfae8;
+  --te-base-lemon-2: #fcf6c2;
+  --te-base-lemon-3: #fcf092;
+  --te-base-lemon-4: #fae969;
+  --te-base-lemon-5: #f7e04a;
+  --te-base-lemon-6: #f7d916;
+  --te-base-lemon-7: #d9bb16;
+  --te-base-lemon-8: #a38708;
+  --te-base-lemon-9: #756002;
+  --te-base-lemon-10: #4d3d00;
+  --te-base-lemon-11: #9e8f46;
+  --te-base-lemon-12: #d6c581;
+  --te-base-lemon-13: #eddfb2;
+
+  // expand-lime
+  --te-base-lime-1: #f8fae3;
+  --te-base-lime-2: #eff5bf;
+  --te-base-lime-3: #e2ed8e;
+  --te-base-lime-4: #d5e667;
+  --te-base-lime-5: #c6de3e;
+  --te-base-lime-6: #b2d119;
+  --te-base-lime-7: #95b312;
+  --te-base-lime-8: #728c0a;
+  --te-base-lime-9: #576e05;
+  --te-base-lime-10: #3b4d00;
+  --te-base-lime-11: #808c46;
+  --te-base-lime-12: #c1cc7a;
+  --te-base-lime-13: #3b4d00;
+
+  // expand-kelly
+  --te-base-kelly-1: #f2fae6;
+  --te-base-kelly-2: #daf2bb;
+  --te-base-kelly-3: #b9e683;
+  --te-base-kelly-4: #9edb58;
+  --te-base-kelly-5: #7dcc29;
+  --te-base-kelly-6: #5cb300;
+  --te-base-kelly-7: #4b9902;
+  --te-base-kelly-8: #3c8001;
+  --te-base-kelly-9: #2e6600;
+  --te-base-kelly-10: #1f4700;
+  --te-base-kelly-11: #628c38;
+  --te-base-kelly-12: #a2c777;
+  --te-base-kelly-13: #d2e6bb;
+
+  // expand-green
+  --te-base-green-1: #e8fced;
+  --te-base-green-2: #bbf2c8;
+  --te-base-green-3: #82e09a;
+  --te-base-green-4: #51d675;
+  --te-base-green-5: #25c251;
+  --te-base-green-6: #00b336;
+  --te-base-green-7: #029931;
+  --te-base-green-8: #01802b;
+  --te-base-green-9: #006624;
+  --te-base-green-10: #004a1b;
+  --te-base-green-11: #3d995c;
+  --te-base-green-12: #77c78f;
+  --te-base-green-13: #b8e6c7;
+  --te-base-green-14: #e6f2d5;
+  --te-base-green-15: #2ad986;
+
+  // expand-mint
+  --te-base-mint-1: #e8fcfa;
+  --te-base-mint-2: #bff5ef;
+  --te-base-mint-3: #8be8e0;
+  --te-base-mint-4: #5dded5;
+  --te-base-mint-5: #38d6ce;
+  --te-base-mint-6: #10c7c1;
+  --te-base-mint-7: #0aaba8;
+  --te-base-mint-8: #048c8c;
+  --te-base-mint-9: #046466;
+  --te-base-mint-10: #004547;
+  --te-base-mint-11: #3d9996;
+  --te-base-mint-12: #77c7c2;
+  --te-base-mint-13: #b8e6e1;
+  --te-base-mint-14: #50d4ab;
+
+  // expand-sky
+  --te-base-sky-1: #e8f8fc;
+  --te-base-sky-2: #c4f2ff;
+  --te-base-sky-3: #9de4fa;
+  --te-base-sky-4: #79d8f7;
+  --te-base-sky-5: #58cbf5;
+  --te-base-sky-6: #33bcf2;
+  --te-base-sky-7: #1f9acf;
+  --te-base-sky-8: #1075a3;
+  --te-base-sky-9: #065278;
+  --te-base-sky-10: #00304a;
+  --te-base-sky-11: #3d7f99;
+  --te-base-sky-12: #7ab8cc;
+  --te-base-sky-13: #b6e5f2;
+
+  // expand-blue
+  --te-base-blue-1: #e3effa;
+  --te-base-blue-2: #c4e1ff;
+  --te-base-blue-3: #99c9ff;
+  --te-base-blue-4: #68abfc;
+  --te-base-blue-5: #4191fa;
+  --te-base-blue-6: #1476ff;
+  --te-base-blue-7: #0f5ed4;
+  --te-base-blue-8: #0845a6;
+  --te-base-blue-9: #022e7a;
+  --te-base-blue-10: #001a4a;
+  --te-base-blue-11: #3d6899;
+  --te-base-blue-12: #7fa6d4;
+  --te-base-blue-13: #b6d4f2;
+  --te-base-blue-14: #4f77ff;
+  --te-base-blue-15: #3961eb;
+  --te-base-blue-16: #7693f5;
+  --te-base-blue-17: #526ecc;
+  --te-base-blue-18: #deecff;
+  --te-base-blue-19: #5073e5;
+  --te-base-blue-20: #5e7ce0;
+  --te-base-blue-21: #6bb0ff;
+  --te-base-blue-22: #006cff;
+  --te-base-blue-23: #8bbefa;
+  --te-base-blue-24: #476be5;
+
+  // expand-indigo
+  --te-base-indigo-1: #eee8ff;
+  --te-base-indigo-2: #ddd7fa;
+  --te-base-indigo-3: #b19cf7;
+  --te-base-indigo-4: #957af5;
+  --te-base-indigo-5: #6e51e0;
+  --te-base-indigo-6: #512fd6;
+  --te-base-indigo-7: #391eb0;
+  --te-base-indigo-8: #27108f;
+  --te-base-indigo-9: #19056e;
+  --te-base-indigo-10: #0e004d;
+  --te-base-indigo-11: #584d99;
+  --te-base-indigo-12: #847acc;
+  --te-base-indigo-13: #bbb8e6;
+  --te-base-indigo-14: #a790ff;
+
+  // expand-purple
+  --te-base-purple-1: #f5e8ff;
+  --te-base-purple-2: #e4c5fc;
+  --te-base-purple-3: #d0a1f7;
+  --te-base-purple-4: #b878f0;
+  --te-base-purple-5: #9f53e6;
+  --te-base-purple-6: #832fd6;
+  --te-base-purple-7: #641eb0;
+  --te-base-purple-8: #4c1091;
+  --te-base-purple-9: #370673;
+  --te-base-purple-10: #20004d;
+  --te-base-purple-11: #683d99;
+  --te-base-purple-12: #a07acc;
+  --te-base-purple-13: #cbb8e6;
+  --te-base-purple-14: #f0edfc;
+
+  // expand-pink
+  --te-base-pink-1: #fce6fb;
+  --te-base-pink-2: #fcc2f9;
+  --te-base-pink-3: #f794f2;
+  --te-base-pink-4: #eb67e6;
+  --te-base-pink-5: #e841e5;
+  --te-base-pink-6: #d91ad9;
+  --te-base-pink-7: #b50fb8;
+  --te-base-pink-8: #8f0a94;
+  --te-base-pink-9: #6b0370;
+  --te-base-pink-10: #47004d;
+  --te-base-pink-11: #993d99;
+  --te-base-pink-12: #c97acc;
+  --te-base-pink-13: #e2b8e6;
+
+  // expand-rose
+  --te-base-rose-1: #fce6ef;
+  --te-base-rose-2: #ffc4de;
+  --te-base-rose-3: #fa9bc9;
+  --te-base-rose-4: #f56cac;
+  --te-base-rose-5: #eb4696;
+  --te-base-rose-6: #e61c81;
+  --te-base-rose-7: #b50e65;
+  --te-base-rose-8: #940a54;
+  --te-base-rose-9: #70033f;
+  --te-base-rose-10: #4d002b;
+  --te-base-rose-11: #993d6e;
+  --te-base-rose-12: #cc7aa6;
+  --te-base-rose-13: #e6b8d2;
+  --te-base-rose-14: #f66f6a;
+
+  // 公司品牌色
+  --te-base-brand-color: #c7000b;
+
+  // 主色
+  --te-base-primary-color-1: #191919;
+  --te-base-primary-color-2: #1476ff;
+
+  // 背景色
+  --te-base-bg: #f5f5f5;
+  --te-base-bg-1: rgba(0, 0, 0, 0.05);
+  --te-base-bg-2: #fafafa;
+  --te-base-bg-3: #191919;
+  --te-base-bg-4: #595959;
+  --te-base-bg-5: #fff;
+  --te-base-bg-6: #5959591a;
+  --te-base-bg-7: rgba(0, 255, 0, 0.1);
+  --te-base-bg-8: rgba(242, 48, 48, 0.3);
+  --te-base-dark-bg: #141414;
+  --te-base-dark-bg-2: #333;
+  --te-base-dark-bg-3: #e6e6e6;
+  --te-base-dark-bg-4: #a6a6a6;
+  --te-base-dark-bg-5: #000;
+  --te-base-dark-bg-6: #a6a6a61a;
+  --te-base-dark-bg-7: rgba(255, 255, 255, 0.1);
+
+  // 文本色
+  --te-base-text-color: #191919;
+  --te-base-text-color-1: #595959;
+  --te-base-text-color-2: #1476ff;
+  --te-base-text-color-3: #808080;
+  --te-base-text-color-4: #c2c2c2;
+  --te-base-dark-text-color: #e6e6e6;
+  --te-base-dark-text-color-1: #a6a6a6;
+
+  // 文本链接色
+  --te-base-text-link-color: #191919;
+  --te-base-text-link-color-1: #595959;
+  --te-base-text-link-color-2: #c2c2c2;
+  --te-base-text-link-color-3: #fff;
+  --te-base-dark-text-link-color: #e6e6e6;
+  --te-base-dark-text-link-color-1: #a6a6a6;
+
+  // 按钮边框色
+  --te-base-button-border-none: none;
+  --te-base-secondary-button-border-color: #595959;
+  --te-base-secondary-button-border-hover-color: #c2c2c2;
+  --te-base-default-button-border-color: #c2c2c2;
+  --te-base-default-button-border-disable-color: #dbdbdb;
+  --te-base-dark-secondary-button-border-color: #a6a6a6;
+  --te-base-dark-secondary-button-border-hover-color: #3d3d3d;
+  --te-base-dark-default-button-border-hover-color: #e6e6e6;
+
+  // 分割线
+  --te-base-split-color-1: rgba(0, 0, 0, 0.08); // 白色背景分割线
+  --te-base-split-color-2: rgba(0, 0, 0, 0.15); // 灰色背景分割线
+  --te-base-dark-split-color-1: rgba(255, 255, 255, 0.08); // 白色背景分割线
+  --te-base-dark-split-color-2: rgba(255, 255, 255, 0.15);
+
+  // rgba
+  --te-base-rgba-1: rgba(0, 0, 0, 0.2);
+  --te-base-rgba-2: rgba(0, 0, 0, 0.08);
+  --te-base-rgba-3: rgba(242, 48, 48, 0.1);
+  --te-base-rgba-4: rgba(20, 118, 255, 0.1);
+  --te-base-rgba-5: rgba(255, 0, 0);
+  --te-base-rgba-6: rgba(0, 0, 0, 0.5);
+  --te-base-rgba-7: rgba(200, 200, 200, 0.2);
+  --te-base-rgba-8: rgba(255, 255, 255, 0.1);
+  --te-base-rgba-9: rgba(76, 152, 241, 0.15);
+  --te-base-rgba-10: rgba(173, 176, 184, 0.6);
+  --te-base-rgba-11: rgba(0, 255, 0, 0.1);
+  --te-base-rgba-12: rgba(242, 48, 48, 0.3);
+  --te-base-rgba-13: rgba(255, 255, 255, 0.08);
+  --te-base-rgba-14: rgba(246, 111, 106, 0.1);
+  --te-base-rgba-15: rgba(217, 217, 217, 0.8);
+  --te-base-rgba-16: rgba(0, 179, 54, 0.6);
+  --te-base-rgba-17: rgba(217, 217, 217, 0.4);
+  --te-base-rgba-18: rgba(255, 255, 255, 0.4);
+  --te-base-rgba-19: rgba(255, 255, 255, 0.5);
+  --te-base-rgba-20: rgba(94, 94, 94, 0.8);
+  --te-base-rgba-21: rgba(121, 121, 121, 0.4);
+  --te-base-rgba-22: rgba(138, 142, 153, 0.99);
+  --te-base-rgba-23: rgba(25, 25, 25, 0.15);
+  --te-base-rgba-24: rgba(0, 0, 0, 0.16);
+  --te-base-rgba-25: rgba(0, 255, 0, 0.1);
+  --te-base-rgba-26: rgba(242, 48, 48, 0.3);
+  --te-base-rgb-1: rgb(80, 212, 171);
+
+  // 状态色
+  --te-base-error-color: #f23030;
+  --te-base-warn-color: #ff8800;
+  --te-base-warn-color-1: #f7d916;
+  --te-base-success-color: #5cb300;
+  --te-base-prompt-color: #1476ff;
+  --te-base-invalidate-color: #ebebeb;
+
+  /**
+  * 1.1 行高
+  */
+  --te-base-line-height-number: 1.5; // 文字行高倍数，建议组件中设置行高使用该变量，如有特殊情况，请自行定义
+  --te-base-line-height-base: 12px; //  跟字号保持一致
+  --te-base-line-height-1: 14px;
+  --te-base-line-height-2: 16px;
+  --te-base-line-height-3: 18px;
+  --te-base-line-height-4: 20px;
+  --te-base-line-height-5: 24px;
+  --te-base-line-height-6: 32px;
+  --te-base-line-height-7: 36px;
+
+  /**
+  * 1.2 间距
+  * 适用于组件中的margin、padding
+  **/
+  /* 基础间距 */
+  --te-base-space-base: 4px;
+  --te-base-space-2x: calc(var(--te-base-space-base) * 2); // 间距-2
+  --te-base-space-3x: calc(var(--te-base-space-base) * 3); // 间距-3
+  --te-base-space-4x: calc(var(--te-base-space-base) * 4); // 间距-4
+  --te-base-space-5x: calc(var(--te-base-space-base) * 5); // 间距-5
+  --te-base-space-6x: calc(var(--te-base-space-base) * 6); // 间距-6
+  --te-base-space-8x: calc(var(--te-base-space-base) * 8); // 间距-7
+  --te-base-space-10x: calc(var(--te-base-space-base) * 10); // 间距-8
+
+  /* 其他间距 */
+  --te-base-space-0: 0px; // 其他间距-1
+  --te-base-space-1: 1px; // 其他间距-2
+  --te-base-space-2: 2px; // 下拉面板距离上部输入框的间距
+  --te-base-space-6: 6px; // 其他间距-3
+  --te-base-space-10: 10px; // 其他间距-4
+
+  /**
+   * 1.3 字号
+  **/
+  --te-base-font-size-sm: 11px; // 正文-小号字体，常用作提示
+  --te-base-font-size-base: 12px; // 正文-常规
+  --te-base-font-size-1: 14px;
+  --te-base-font-size-2: 16px;
+  --te-base-font-size-3: 18px;
+  --te-base-font-size-4: 20px;
+  --te-base-font-size-5: 24px;
+  --te-base-font-size-6: 32px;
+  --te-base-font-size-7: 36px;
+
+  /**
+  * 1.4字重
+  **/
+  --te-base-font-weight-1: 100; // 极细
+  --te-base-font-weight-2: 200; // 纤细
+  --te-base-font-weight-3: 300; // 细体
+  --te-base-font-weight-4: normal; // 常规
+  --te-base-font-weight-5: 500; // 中等
+  --te-base-font-weight-6: 600; // 半粗
+  --te-base-font-weight-7: bold; // 粗体
+  --te-base-font-weight-8: 800; // 中黑
+  --te-base-font-weight-9: 900; // 黑体
+  --te-base-font-weight-bold: 700;
+
+  /**
+  * 1.5 圆角
+  **/
+  --te-base-border-radius-normal: 2px; // 常规
+  --te-base-border-radius-0: 0px; // 直角
+  --te-base-border-radius-1: 4px; // 圆角-1
+  --te-base-border-radius-2: 6px; // 圆角-2
+  --te-base-border-radius-3: 8px; // 圆角-3
+  --te-base-border-radius-4: 50%; // 圆形
+}
diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
new file mode 100644
index 000000000..9bb549d47
--- /dev/null
+++ b/packages/theme/base/src/common.less
@@ -0,0 +1,96 @@
+// common变量定义
+:root {
+  //功能色
+  --te-common-color-success: var(--te-base-success-color); // 注释，成功-背景色 #5cb300
+  --te-common-color-warning: var(--te-base-warn-color); // 注释，告警-背景色 #ff8800
+  --te-common-color-error: var(--te-base-error-color); // 注释，错误-背景色 #f23030
+  --te-common-color-info: var(--te-base-prompt-color); // 注释，告警-背景色  #1476ff
+  --te-common-color-prompt-secondary: var(--te-base-indigo-5); // 注释，区块提示-背景色 #6e51e0
+
+  // 文本色
+  --te-common-text-primary: var(--te-base-dark-5); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #191919
+  --te-common-text-secondary: var(--te-base-gray-31); // 二级文本色-次要信息/表单标签颜色/选块按钮默认色 #595959
+  --te-common-text-weaken: var(--te-base-gray-43); // 三级文本色-弱化信息/提示文字 #808080
+  --te-common-text-disabled: var(--te-base-gray-18); // 文本禁用色 #c2c2c2
+  --te-common-text-link: var(--te-base-blue-6); // 链接色 #1476ff
+  --te-common-text-inverse: var(--te-base-gray-1); // 主按钮上的文本色 #fff
+  --te-common-text-dark-inverse: var(--te-base-gray-1); // 深色背景下按钮上的文本色 #fff
+  --te-common-text-emphasize: var(--te-base-blue-6); // 强调性文字 #1476ff
+
+  --te-common-icon-primary: var(--te-base-dark-5); // 重要图标色 #191919
+  --te-common-icon-secondary: var(--te-base-gray-43); // 图标默认色 #808080
+  --te-common-icon-disabled: var(--te-base-gray-18); // 图标禁用色 #c2c2c2
+  --te-common-icon-link: var(--te-base-blue-6); // 图标提示色 #1476ff
+
+  --te-common-border-default: var(--te-base-gray-13); // 线条-输入框默认色 #dbdbdb
+  --te-common-border-active: var(--te-base-dark-5); // 线条-输入框悬浮色/激活色  #191919
+  --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-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
+
+  --te-common-bg-primary: var(--te-base-dark-5); // 主要按钮-背景色 #191919
+  --te-common-bg-primary-checked: var(--te-base-blue-6); // 主色-背景色 #1476ff
+  --te-common-bg-primary-emphasize: var(--te-base-blue-6); // 主色-背景色 #1476ff
+
+  --te-common-bg-secondary: var(--te-base-gray-31); // 次要按钮-背景色 #595959
+  --te-common-bg-prompt: var(--te-base-gray-7); // 导航按钮-背景色/选块-选中色 #e6e6e6
+  --te-common-bg-container: var(
+    --te-base-gray-5
+  ); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #f5f5f5
+  --te-common-bg-container-weaken: var(--te-base-gray-2); // 浅编辑代码--背景色 #fafafa
+  --te-common-bg-tag: var(--te-base-green-14); // tag标签-背景色 #e6f2d5
+  --te-common-bg-default: var(--te-base-gray-1); // 白色背景-输入框背景/面板背景色 #fff
+  --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0
+  --te-common-bg-switch: var(--te-base-gray-18); // 开关默认色 #c2c2c2
+}
+
+:root[data-theme='dark'] {
+  //功能色
+  --te-common-color-success: var(--te-base-success-color); // 注释，成功-背景色 #5cb300
+  --te-common-color-warning: var(--te-base-warn-color); // 注释，告警-背景色 #ff8800
+  --te-common-color-error: var(--te-base-error-color); // 注释，错误-背景色 #f23030
+  --te-common-color-info: var(--te-base-prompt-color); // 注释，说明-背景色  #1476ff
+  --te-common-color-prompt-secondary: var(--te-base-indigo-14); // 注释，区块提示-背景色 #A790FF
+  // 文本色
+  --te-common-text-primary: var(--te-base-gray-64); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #F0F1F5
+  --te-common-text-secondary: var(--te-base-gray-65); // 二级文本色-次要信息/表单标签颜色 #B4B5B8
+  --te-common-text-weaken: var(--te-base-gray-66); // 三级文本色-弱化信息/提示文字 #8B8C8F
+  --te-common-text-disabled: var(--te-base-gray-67); // 文本禁用色 #4D4E52
+  --te-common-text-link: var(--te-base-blue-6); // 链接色 #1476ff
+  --te-common-text-inverse: var(--te-base-dark-26); // 主按钮上的文本色 #000000
+  --te-common-text-dark-inverse: var(--te-base-gray-1); // 深色背景下按钮上的文本色 #fff
+  --te-common-text-emphasize: var(--te-base-blue-6); // 强调性文字 #1476ff
+
+  --te-common-icon-primary: var(--te-base-gray-64); // 重要图标色 #F0F1F5
+  --te-common-icon-secondary: var(--te-base-gray-66); // 图标默认色 #8B8C8F
+  --te-common-icon-disabled: var(--te-base-gray-18); // 图标禁用色 #C2C2C2
+  --te-common-icon-link: var(--te-base-blue-6); // 图标提示色 #1476ff
+
+  --te-common-border-default: var(--te-base-gray-67); // 线条-输入框默认色 #4D4E52
+  --te-common-border-active: var(--te-base-gray-64); // 线条-输入框悬浮色/激活色  #F0F1F5
+  --te-common-border-disabled: var(--te-base-gray-68); // 线条-禁用色  #36383D
+  --te-common-border-secondary: var(--te-base-gray-65); // 线条-次要按钮描边色  #B4B5B8
+  --te-common-border-prompt: var(--te-base-gray-67); // 线条-三级按钮默认色/表单内按钮 #4D4E52
+  --te-common-border-hover: var(--te-base-gray-66); // 线条-按钮边框悬浮色 #8B8C8F
+  --te-common-border-divider: var(--te-base-gray-68); //线条-白色背景分割线颜色 #36383D
+  --te-common-border-bg-divider: var(--te-base-gray-67); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4E52
+  --te-common-border-checked: var(--te-base-blue-6); // 线条 选中色 #1476ff
+
+  --te-common-bg-primary: var(--te-base-gray-64); // 主要按钮-背景色 #F0F1F5
+  --te-common-bg-primary-checked: var(--te-base-blue-6); // 主色-背景色 #1476ff
+  --te-common-bg-primary-emphasize: var(--te-base-blue-6); // 主色-背景色 #1476ff
+  --te-common-bg-secondary: var(--te-base-gray-65); // 次要按钮-背景色 #B4B5B8
+  --te-common-bg-prompt: var(--te-base-gray-66); // 导航按钮-背景色/选块-选中色 #8B8C8F
+  --te-common-bg-container: var(
+    --te-base-gray-68
+  ); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #36383D
+  --te-common-bg-container-weaken: var(--te-base-gray-69); // 浅编辑代码--背景色 #2B2D33
+  --te-common-bg-tag: var(--te-base-dark-28); // tag标签-背景色 #1d312a
+  --te-common-bg-default: var(--te-base-dark-27); // 深色背景-输入框背景/面板背景色 #212329
+  --te-common-bg-disabled: var(--te-base-dark-29); // 禁用/标签/下拉框多选标签 背景色 #2a2c31
+  --te-common-bg-switch: var(--te-base-gray-67); // 开关默认色 #4D4E52
+}
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
new file mode 100644
index 000000000..ec6fb9581
--- /dev/null
+++ b/packages/theme/base/src/component-common.less
@@ -0,0 +1,752 @@
+// 1、select 下拉框组件
+.tiny-select {
+  .tiny-input {
+    // 输入框
+    &.is-focus .tiny-input__inner {
+      border-color: var(--te-common-border-default);
+      color: var(--te-common-text-primary);
+      font-size: var(--te-base-font-size-base);
+    }
+    //  下拉右侧箭头图标
+    .tiny-select__caret {
+      font-size: var(--te-base-font-size-1);
+      color: var(--te-common-text-weaken);
+    }
+  }
+  .tiny-select__tags {
+    .tiny-tag {
+      color: var(--te-common-text-weaken);
+      background-color: var(--te-common-bg-tag); // 选择框
+
+      .tiny-tag__close {
+        color: var(--te-common-text-primary);
+        &:hover {
+          color: var(--te-common-text-primary);
+        }
+      }
+    }
+  }
+}
+
+.tiny-select-dropdown {
+  // 下拉新增列
+  .tiny-select__top-create {
+    margin: 8px 12px 4px 12px;
+    > div {
+      color: var(--te-common-text-emphasize);
+      font-size: var(--te-base-font-size-1);
+    }
+  }
+  // 下拉选项框
+  .tiny-select-dropdown__item {
+    padding: 0px 12px;
+  }
+  // 下拉选项框上下边距
+  .tiny-popper {
+    padding: 8px 0px;
+  }
+  // 带搜索的下拉
+  .tiny-select-dropdown__search {
+    margin: 0 12px 4px 12px;
+  }
+  // 选项框字体
+  .tiny-option {
+    // 选中状态
+    &.selected {
+      color: var(--te-common-text-emphasize);
+      background-color: var(--te-common-bg-default);
+      &:hover {
+        background-color: var(--te-common-bg-container);
+      }
+    }
+    color: var(--te-common-text-primary);
+    // 悬浮状态
+    &.hover,
+    &:hover {
+      background-color: var(--te-common-bg-container);
+    }
+  }
+  // 选项框图标
+  .tiny-option > .tiny-option__icon {
+    font-size: var(--te-base-font-size-1);
+    margin-right: 4px;
+    color: var(--te-common-text-primary);
+  }
+}
+
+// 2、input框
+.tiny-input {
+  &.tiny-input-prefix .tiny-input__inner {
+    padding: 0 8px 0 30px;
+  }
+  .tiny-input__inner {
+    border-radius: var(--te-base-border-radius-1);
+    padding: 0 8px 0 12px;
+    height: 24px;
+    border-color: var(--te-common-border-default);
+    color: var(--te-common-text-primary);
+    font-size: var(--te-base-font-size-base);
+    &:hover {
+      border-color: var(--te-common-border-active);
+    }
+    &:focus {
+      border-color: var(--te-common-border-active);
+    }
+  }
+  &.is-disabled .tiny-input__inner {
+    background: var(--te-common-bg-disabled);
+    color: var(--te-common-text-disabled);
+    font-size: var(--te-base-font-size-base);
+  }
+}
+
+// 3、折叠框
+.tiny-collapse {
+  border-top: 0;
+  .tiny-collapse-item__header {
+    flex-direction: row-reverse;
+    font-size: var(--te-base-font-size-base);
+    color: var(--te-common-text-primary);
+    font-weight: var(--te-base-font-weight-7);
+    background-color: var(--te-common-bg-default);
+    padding: 0 8px 0 12px;
+    border: 0px;
+    border-bottom-style: none;
+
+    .tiny-collapse-item__word-overflow {
+      margin: 12px 0px;
+      width: 100%;
+      line-height: var(--te-base-line-height-4);
+    }
+    .tiny-collapse-item__arrow {
+      display: flex;
+      svg {
+        font-size: var(--te-base-font-size-1);
+        color: var(--te-common-text-weaken);
+      }
+    }
+  }
+  .tiny-collapse-item {
+    border-top-color: var(--te-common-border-bg-divider);
+    border-bottom: 0px;
+    margin: 0;
+  }
+  .tiny-collapse-item__content {
+    border: 0px;
+    padding: 12px;
+  }
+  .tiny-collapse-item,
+  .tiny-collapse-item__wrap {
+    background-color: var(--te-common-bg-default);
+  }
+
+  .tiny-collapse-item__content {
+    color: var(--te-common-text-primary);
+  }
+
+  .tiny-collapse-item__wrap {
+    overflow: inherit;
+  }
+}
+
+// 4、树-tree
+.tiny-tree {
+  .tiny-tree-node__wrapper {
+    cursor: pointer;
+    color: var(--te-common-text-primary);
+    font-size: var(--te-base-font-size-base);
+    .tiny-tree-node {
+      .tiny-tree-node__content {
+        height: 24px;
+        .tiny-tree-node__content-left {
+          padding: 0 12px;
+          .tiny-tree-node__content-box {
+            padding: 0 12px 0 4px;
+            background-color: var(--te-common-bg-default);
+            &:hover {
+              background-color: var(--te-common-bg-container);
+            }
+          }
+        }
+      }
+      .is-current:not(.show-checkbox) > .tiny-tree-node__content .tiny-tree-node__content-box,
+      .is-current:not(.show-checkbox) > .tiny-tree-node__content .tiny-tree-node__content-right {
+        background-color: var(--te-common-bg-container);
+      }
+    }
+  }
+}
+
+// 5、页签tabs
+.tiny-tabs {
+  .tiny-tabs__header {
+    .tiny-tabs__item__title {
+      padding: 0 12px;
+      line-height: 2;
+    }
+    .tiny-tabs__nav {
+      display: flex;
+      width: 100%; // 要验证一下是否需要写死
+      border-radius: var(--te-base-border-radius-1);
+      text-align: center;
+    }
+    .tiny-tabs__item {
+      flex-grow: 1;
+      font-size: var(--te-base-font-size-base);
+      color: var(--te-common-text-secondary);
+      background-color: var(--te-common-bg-container);
+      height: auto;
+      text-align: center;
+      &.is-active {
+        color: var(--te-common-text-primary);
+        background-color: var(--te-common-bg-default);
+        border-radius: var(--te-base-border-radius-1);
+      }
+    }
+  }
+}
+
+// 6、search组件
+.tiny-search {
+  .tiny-search__line {
+    height: 24px;
+    border-radius: var(--te-base-border-radius-1);
+    border: 1px solid var(--te-common-border-default);
+    font-size: var(--te-base-font-size-base);
+  }
+  .tiny-search__input {
+    padding: 0 8px 0 12px;
+  }
+  .tiny-search__input-btn {
+    a {
+      height: 24px;
+      line-height: 24px;
+    }
+  }
+  .tiny-search__input-btn svg {
+    font-size: var(--te-base-font-size-2);
+    color: var(--te-common-text-weaken);
+  }
+}
+
+// 7、dialog组件
+.tiny-dialog-box {
+  padding: 20px;
+  .tiny-dialog-box__header {
+    font-size: var(--te-base-font-size-1);
+    color: var(--te-common-text-primary);
+    padding: 0;
+  }
+  .tiny-dialog-box__body {
+    color: var(--te-common-text-secondary);
+    padding: 0;
+    margin-top: 16px;
+  }
+  .tiny-dialog-box__footer {
+    margin-top: 16px;
+    padding: 0;
+    display: flex;
+    flex-direction: row-reverse;
+  }
+}
+
+// 8、button按钮
+.tiny-button {
+  font-size: var(--te-base-font-size-base);
+  border-radius: var(--te-base-border-radius-1);
+  padding: 0 8px;
+  height: 24px;
+  line-height: 24px;
+  // 默认按钮
+  &.tiny-button--default {
+    margin-right: 8px;
+    margin-left: 0px;
+    border: 1px solid var(--te-common-border-secondary);
+    color: var(--te-common-text-primary);
+    background-color: var(--te-common-bg-default);
+    &:hover {
+      border: 1px solid var(--te-common-border-hover);
+    }
+  }
+  // 确认按钮
+  &.tiny-button--primary {
+    background-color: var(--te-common-bg-primary);
+    color: var(--te-common-text-inverse);
+    border: 1px solid var(--te-common-border-active);
+    &:hover {
+      border: 1px solid var(--te-common-border-hover);
+      background-color: var(--te-common-bg-secondary);
+    }
+  }
+  &.tiny-button--info {
+    color: var(--te-common-text-inverse);
+    border-color: var(--te-common-border-active);
+    background-color: var(--te-common-bg-primary);
+
+    &:hover {
+      border-color: var(--te-common-border-secondary);
+    }
+  }
+  &.tiny-button--text {
+    color: var(--te-common-text-emphasize);
+    &:hover {
+      color: var(--te-common-text-emphasize);
+      text-decoration: none;
+    }
+  }
+  // 图标按钮
+  &:not(.is-circle) .tiny-svg.is-text {
+    margin-right: 4px;
+  }
+}
+
+.tiny-button-group {
+  ul.tiny-group-item {
+    border-radius: var(--te-base-border-radius-normal);
+    li {
+      background-color: var(--te-common-bg-container);
+      &.active {
+        &:hover button:not(.disabled),
+        button:not(.disabled) {
+          background: var(--te-common-bg-prompt);
+          color: var(--te-common-text-primary);
+        }
+      }
+
+      &:hover {
+        button:not(.disabled) {
+          color: var(--te-common-text-primary);
+          background-color: var(--te-common-bg-default);
+        }
+      }
+
+      &:not(:last-child) {
+        margin-right: 0;
+      }
+    }
+
+    button {
+      background-color: var(--te-common-bg-container);
+      color: var(--te-common-text-secondary);
+
+      &::before {
+        background: var(--te-common-border-default);
+      }
+    }
+  }
+}
+
+// 9、modal模态框
+.tiny-modal__box {
+  padding: 20px;
+  border-radius: var(--te-base-border-radius-1);
+  box-shadow: 0 0 10px 0 var(--te-base-rgba-23);
+  .tiny-modal__header {
+    padding: 0;
+    font-size: var(--te-base-font-size-1);
+    color: var(--te-common-text-primary);
+    font-weight: var(--te-base-font-weight-4);
+  }
+  .tiny-modal__close-btn,
+  .tiny-modal__zoom-btn {
+    width: 16px;
+    height: 16px;
+    top: 0px;
+    right: 0;
+    color: var(--te-common-text-weaken);
+  }
+  .tiny-modal__body {
+    margin-top: 12px;
+    font-size: var(--te-base-font-size-base);
+    color: var(--te-common-text-secondary);
+  }
+  .tiny-modal__footer {
+    padding: 0;
+    margin-top: 16px;
+    display: flex;
+    flex-direction: row-reverse;
+  }
+}
+
+//10、modal的消息提示框
+.tiny-modal.tiny-modal__wrapper.type__message {
+  .tiny-modal__box {
+    border-radius: var(--te-base-border-radius-2);
+    box-shadow: 0 2px 12px 0 var(--te-base-rgba-24);
+    padding: 0;
+    height: 38px;
+    .tiny-modal__body {
+      margin: 12px;
+      padding: 0;
+    }
+  }
+  .tiny-modal__content {
+    .tiny-modal__text {
+      font-size: var(--te-base-font-size-base);
+      color: var(--te-common-text-primary);
+    }
+  }
+  .tiny-modal__close-wrapper .tiny-modal__close-btn {
+    color: var(--te-common-text-weaken);
+  }
+}
+
+// 11、numeric 组件
+.tiny-numeric {
+  .tiny-numeric__input-inner {
+    height: 24px;
+    border-radius: var(--te-base-border-radius-1);
+    color: var(--te-common-text-primary);
+    border-color: var(--te-common-border-default);
+    text-align: left;
+  }
+  &.is-controls-right {
+    .tiny-numeric__input-inner {
+      padding: 0 42px 0 12px;
+    }
+    //加减按钮
+    .tiny-numeric__decrease,
+    .tiny-numeric__increase {
+      width: 14px;
+      border-left: 1px solid var(--te-common-border-default);
+    }
+  }
+  .tiny-numeric-base .is-disabled {
+    background: var(--te-common-bg-disabled);
+    color: var(--te-common-text-disabled);
+  }
+  .tiny-numeric__input {
+    background-color: var(--te-common-bg-default);
+    border-color: var(--te-common-border-default);
+    &.has-unit .tiny-numeric__input-inner {
+      padding: 0 42px 0 12px;
+    }
+  }
+  .tiny-numeric__unit {
+    color: var(--te-common-text-weaken);
+    background: var(--te-common-border-default);
+    border: 0;
+    width: 14px;
+    margin-right: 4px;
+  }
+}
+
+// 12、popover气泡卡片
+.tiny-popover.tiny-popper[x-placement] {
+  padding: 0px 8px;
+  font-size: var(--te-base-font-size-base);
+  color: var(--te-common-text-primary);
+  background-color: var(--te-common-bg-default);
+
+  height: auto;
+  line-height: 28px;
+}
+
+// 13、tag标签
+.tiny-tag {
+  font-size: var(--te-base-font-size-base);
+  color: var(--te-common-text-secondary);
+  background: var(--te-common-bg-disabled);
+  border-radius: var(--te-base-border-radius-1);
+  .tiny-tag__close {
+    margin: 0 0 0 4px;
+    color: var(--te-common-text-weaken);
+  }
+}
+
+// 14、radio 单选
+.tiny-radio {
+  margin-right: 20px;
+  .tiny-radio__inner {
+    border: 1px solid var(--te-common-border-hover);
+  }
+  .tiny-radio__label {
+    font-size: var(--te-base-font-size-base);
+    color: var(--te-common-text-primary);
+    padding-left: 6px;
+  }
+  .tiny-radio__input.is-checked .tiny-radio__inner::after {
+    background-color: var(--te-common-bg-primary-checked);
+  }
+}
+
+.tiny-radio-group {
+  .tiny-radio-button {
+    &:first-child {
+      .tiny-radio-button__inner {
+        border-color: var(--te-common-border-secondary);
+      }
+    }
+    .tiny-radio-button__orig-radio:checked {
+      & + .tiny-radio-button__inner {
+        background-color: var(--te-common-bg-primary-checked);
+        border-color: var(--te-common-border-secondary);
+        &:hover {
+          box-shadow: none;
+        }
+      }
+    }
+    &__inner {
+      background-color: var(--te-common-bg-default);
+      color: var(--te-common-text-primary);
+      border-color: var(--te-common-border-secondary);
+    }
+  }
+}
+
+// 15、checkbox 复选框适配
+.tiny-checkbox {
+  .tiny-checkbox__input {
+    &.is-checked .tiny-checkbox__inner {
+      background-color: var(--te-common-bg-primary-checked);
+      border-color: var(--te-common-border-checked);
+    }
+    .tiny-checkbox__inner {
+      border-radius: var(--te-base-border-radius-1);
+      border: 1px solid var(--te-common-border-hover);
+      line-height: 24px;
+    }
+  }
+  .tiny-checkbox__label {
+    line-height: 24px;
+    color: var(--te-common-text-primary);
+  }
+}
+
+// 16、notify通知
+.tiny-notify {
+  border-radius: var(--te-base-border-radius-2);
+  padding: 12px;
+  background-color: var(--te-common-bg-default);
+  box-shadow: 0 2px 12px 0 var(--te-base-rgba-24);
+  .tiny-notify__icon-zone {
+    .tiny-notify__icon-status {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  .tiny-notify__content {
+    color: var(--te-common-text-secondary);
+    font-size: var(--te-base-font-size-base);
+    > a {
+      color: var(--te-common-text-link);
+    }
+  }
+  .tiny-notify__message-zone {
+    margin: 0 0 0 8px;
+    .tiny-notify__title-wrapper {
+      font-size: var(--te-base-font-size-1);
+      font-weight: var(--te-base-font-weight-4);
+      color: var(--te-common-text-primary);
+    }
+  }
+  .tiny-notify__close-zone {
+    padding: 0;
+    &.tiny-notify__icon-close {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &.tiny-notify--error {
+    .tiny-notify__icon-status {
+      color: var(--te-common-color-error);
+    }
+  }
+
+  &.tiny-notify--info {
+    .tiny-notify__icon-status {
+      color: var(--te-common-color-info);
+    }
+  }
+
+  &.tiny-notify--success {
+    .tiny-notify__icon-status {
+      color: var(--te-common-color-success);
+    }
+  }
+
+  &.tiny-notify--warning {
+    .tiny-notify__icon-status {
+      color: var(--te-common-color-warning);
+    }
+  }
+}
+
+// 17、tooltip文字提示
+.tiny-tooltip {
+  &.tiny-tooltip__popper {
+    box-shadow: 0 4px 16px 0 var(--te-base-rgba-23);
+    &[class*='is-'] {
+      background: var(--te-common-bg-default);
+      color: var(--te-common-text-primary);
+      font-size: var(--te-base-font-size-base);
+      padding: 12px;
+      &[x-placement^='top'] {
+        .popper__arrow {
+          &.popper__arrow::after {
+            border-top-color: var(--te-common-text-inverse);
+          }
+        }
+      }
+      &[x-placement^='bottom'] {
+        .popper__arrow {
+          &.popper__arrow::after {
+            border-bottom-color: var(--te-common-text-inverse);
+          }
+        }
+      }
+      &[x-placement^='left'] {
+        .popper__arrow {
+          &.popper__arrow::after {
+            border-left-color: var(--te-common-text-inverse);
+          }
+        }
+      }
+      &[x-placement^='right'] {
+        .popper__arrow {
+          &.popper__arrow::after {
+            border-right-color: var(--te-common-text-inverse);
+          }
+        }
+      }
+    }
+  }
+}
+
+// 18、表单
+.tiny-form {
+  .tiny-form-item {
+    .tiny-form-item__label {
+      color: var(--te-common-text-secondary);
+      font-size: var(--te-base-font-size-base);
+    }
+  }
+  .tiny-form--label-left.label-align .tiny-form-item .tiny-form-item__label {
+    padding-left: 0;
+    padding-right: 16px;
+  }
+  .tiny-form-item.is-text.is-required.is-no-asterisk.tiny-form-item--default {
+    margin-bottom: 12px;
+  }
+  .tiny-form-item__error--block {
+    padding-top: 4px;
+  }
+  .tiny-form-item__error {
+    font-size: var(--te-base-font-size-base);
+  }
+}
+
+// 19、表格
+.tiny-grid__wrapper {
+  .tiny-grid {
+    font-size: var(--te-base-font-size-base);
+    background-color: var(--te-common-bg-default);
+    color: var(--te-common-text-primary);
+    cursor: pointer;
+    .tiny-grid__header-wrapper {
+      background-color: var(--te-common-bg-container);
+      .tiny-grid__header {
+        .tiny-grid-header__row {
+          .tiny-grid-header__column {
+            height: 24px;
+            &.col__center {
+              text-align: left;
+            }
+          }
+          .tiny-grid-cell {
+            border-color: var(--te-common-text-secondary);
+            font-weight: var(--te-base-font-weight-4);
+            font-size: var(--te-base-font-size-base);
+            .icon-half-select,
+            .icon-checked-sur {
+              color: var(--te-common-text-primary);
+            }
+          }
+          .tiny-grid-resizable.is__line {
+            color: var(--te-common-border-hover);
+            height: 10px;
+            margin-bottom: 9px;
+          }
+        }
+      }
+    }
+    .tiny-grid__body-wrapper {
+      .high-light-node {
+        background-color: var(--te-common-bg-container);
+        &.tiny-grid-body__column {
+          font-size: var(--te-base-font-size-base);
+          color: var(--te-common-text-primary);
+        }
+      }
+      .tiny-grid__body {
+        .tiny-grid-body__row {
+          &.nav-tree .tiny-grid-cell {
+            line-height: inherit;
+          }
+          .tiny-grid-body__column,
+          .tiny-grid-footer__column {
+            height: 30px;
+            text-align: left;
+            border-bottom: 0;
+            &:hover {
+              background-color: var(--te-common-bg-container);
+            }
+            .tiny-grid-cell {
+              padding: 0;
+            }
+          }
+          .tiny-grid-tree-wrapper .tiny-grid-tree__node-btn {
+            fill: var(--te-common-icon-secondary);
+          }
+        }
+      }
+    }
+  }
+}
+
+// 20、loading组件
+.tiny-loading {
+  .tiny-loading__spinner {
+    margin-top: 0;
+    transform: translateY(-50%);
+  }
+  // 适配尺寸medium
+  .tiny-loading__spinner-medium img,
+  .tiny-loading__spinner-medium svg {
+    width: 28px;
+    height: 28px;
+  }
+}
+
+// 21、progress进度条
+.tiny-progress.tiny-progress--line.progress-first {
+  &.tiny-progress-bar__outer {
+    background-color: var(--te-common-border-divider);
+  }
+  .tiny-progress__text {
+    margin-left: 12px;
+    color: var(--te-common-text-primary);
+  }
+}
+
+// 22、开关
+.tiny-switch {
+  background-color: var(--te-common-bg-switch);
+  border: none;
+  &.tiny-switch-checked {
+    background-color: var(--te-common-bg-primary-checked);
+  }
+  &::after {
+    background-color: var(--te-common-bg-default);
+  }
+}
+
+// 23、下拉菜单
+.tiny-dropdown {
+  &__trigger {
+    color: var(--te-common-text-primary);
+    &:not(&__caret-button):hover {
+      color: var(--te-common-text-weaken);
+    }
+  }
+}
diff --git a/packages/theme/base/src/dark-component.js b/packages/theme/base/src/dark-component.js
deleted file mode 100644
index 9cd4c8985..000000000
--- a/packages/theme/base/src/dark-component.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export const concatThemeDark = {
-  // 弹窗
-  'ti-dialog-box-bg-color': '#2f2f2f',
-  'ti-dialog-box-head-title-text-color': '#e6e6e6',
-  'ti-dialog-box-close-icon-color-hover': '#adb0b8',
-  'ti-dialog-box-close-icon-color': '#fff',
-  'ti-dialog-box-body-text-color': '#191919',
-  // 手风琴
-  'ti-collapse-item-text-color': '#e6e6e6',
-  'ti-collapse-item-header-bg-color': '#222222',
-  'ti-collapse-item-header-padding-vertical': '20px',
-  'ti-collapse-item-wrap-bg-color': '#2f2f2f',
-  'ti-collapse-item-bg-color': '#2f2f2f',
-  // dropdown组件
-  'ti-dropdown-text-color-hover': '#8a8e99',
-  // input 组件
-  'ti-input-text-color': '#d9d9d9',
-  'ti-input-bg-color': '#262626',
-  'ti-input-border-color': 'transparent'
-}
diff --git a/packages/theme/base/src/dark/dark-common.js b/packages/theme/base/src/dark/dark-common.js
new file mode 100644
index 000000000..d9a04cfa9
--- /dev/null
+++ b/packages/theme/base/src/dark/dark-common.js
@@ -0,0 +1,4 @@
+// tinyvue组件的暗色主题
+export const tinyThemeDark = {
+  //功能色
+}
diff --git a/packages/theme/base/src/index.js b/packages/theme/base/src/index.js
index aa6208bab..8c75f537a 100644
--- a/packages/theme/base/src/index.js
+++ b/packages/theme/base/src/index.js
@@ -1,15 +1,26 @@
-import { tinyBaseTheme, concatThemeLight, concatThemeDark } from './base'
+// 提供engine主题包的样式定义引入
+import './base.less'
+import './common.less'
+import { tinyThemeDark } from './dark/dark-common'
+import { tinyThemeLight } from './light/light-common'
+import './page/base-config-page.less'
+import './component-common.less'
 
-export const tinyEngineThemeLight = {
-  id: 'tiny-engine-light-theme',
-  name: 'EngineLightTheme',
-  cnName: 'EngineLightTheme',
-  data: { ...tinyBaseTheme, ...concatThemeLight }
+export const tinyThemeLightVars = {
+  id: 'tiny-theme-light',
+  name: 'tinyThemeLight',
+  cnName: '',
+  data: { ...tinyThemeLight }
 }
 
-export const tinyEngineThemeDark = {
-  id: 'tiny-engine-dark-theme',
-  name: 'EngineDarkTheme',
-  cnName: 'EngineDarkTheme',
-  data: { ...tinyBaseTheme, ...concatThemeDark }
+export const tinyThemeDarkVars = {
+  id: 'tiny-theme-dark',
+  name: 'tinyThemeDark',
+  cnName: '',
+  data: { ...tinyThemeDark }
+}
+
+export const defaultThemeList = {
+  light: tinyThemeLightVars,
+  dark: tinyThemeDarkVars
 }
diff --git a/packages/theme/base/src/light-component.js b/packages/theme/base/src/light-component.js
deleted file mode 100644
index fc24f2662..000000000
--- a/packages/theme/base/src/light-component.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export const concatThemeLight = {
-  // 弹窗
-  'ti-dialog-box-bg-color': '#fff',
-  'ti-dialog-box-head-title-text-color': '#191919',
-  'ti-dialog-box-close-icon-color-hover': '#1f1f1f',
-  'ti-dialog-box-close-icon-color': '#808080',
-  'ti-dialog-box-body-text-color': '#191919',
-  // collapse手风琴
-  'ti-collapse-item-text-color': '#191919',
-  'ti-collapse-item-header-bg-color': 'transparent',
-  'ti-collapse-item-header-padding-vertical': '20px',
-  'ti-collapse-item-wrap-bg-color': '#fff',
-  'ti-collapse-item-bg-color': '#fff',
-  // dropdown组件
-  'ti-dropdown-text-color-hover': '#526ecc',
-  // input组件
-  'ti-input-text-color': '#191919',
-  'ti-input-bg-color': '#fff',
-  'ti-input-border-color': '#c2c2c2'
-}
diff --git a/packages/theme/base/src/light/light-common.js b/packages/theme/base/src/light/light-common.js
new file mode 100644
index 000000000..1abdc0f57
--- /dev/null
+++ b/packages/theme/base/src/light/light-common.js
@@ -0,0 +1,4 @@
+// tinyvue组件的亮色主题
+export const tinyThemeLight = {
+  //功能色
+}
diff --git a/packages/theme/common/base.less b/packages/theme/base/src/page/base-config-page.less
similarity index 82%
rename from packages/theme/common/base.less
rename to packages/theme/base/src/page/base-config-page.less
index 69a5c3e89..b295912f1 100644
--- a/packages/theme/common/base.less
+++ b/packages/theme/base/src/page/base-config-page.less
@@ -3,12 +3,36 @@ html {
 }
 
 body {
-  padding: 0;
-  margin: 0;
-  font-family: Microsoft YaHei, Microsoft YaHei-Normal;
-}
+  *,
+  .lowcode-scrollbar,
+  .lowcode-scrollbar-thin {
+    &::-webkit-scrollbar-track,
+    &::-webkit-scrollbar-track-piece,
+    &::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
 
-body {
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--te-common-border-default);
+
+      &:hover {
+        background-color: var(--te-common-border-hover);
+      }
+    }
+  }
+  *,
+  .lowcode-scrollbar {
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+  }
+  .lowcode-scrollbar-thin {
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+  }
   --base-left-panel-width: 280px;
   --base-right-panel-width: 280px;
   --base-top-panel-height: 40px;
@@ -22,7 +46,10 @@ body {
     (100vw - (var(--base-left-panel-width) + var(--base-right-panel-width) + var(--base-nav-panel-width) - 1px))
   );
   -webkit-font-smoothing: subpixel-antialiased;
-  background: #f9f9f9;
+  padding: 0;
+  margin: 0;
+  font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
 }
 
 ol,
@@ -66,45 +93,8 @@ td {
   outline: none;
 }
 
-.text-ellipsis-multiple {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: var(--ellipsis-line, 2);
-  -webkit-box-orient: vertical;
-}
-
-body {
-  *,
-  .lowcode-scrollbar,
-  .lowcode-scrollbar-thin {
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-track-piece,
-    &::-webkit-scrollbar-corner {
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: #dbdbdb;
-
-      &:hover {
-        background-color: #c2c2c2;
-      }
-    }
-  }
-  *,
-  .lowcode-scrollbar {
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-  }
-  .lowcode-scrollbar-thin {
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 4px;
-    }
-  }
+#tiny-engine .svg-icon {
+  fill: currentColor;
 }
 
 // support for not webkit browser and won't override ::webkit-scrollbar-* selector
@@ -112,7 +102,7 @@ body {
   body {
     * {
       scrollbar-width: thin;
-      scrollbar-color: #dbdbdb transparent;
+      scrollbar-color: var(--te-common-border-default) transparent;
     }
   }
 }
@@ -129,3 +119,15 @@ body {
     display: none;
   }
 }
+
+.global-desc-info {
+  color: var(--te-common-text-weaken);
+}
+
+.text-ellipsis-multiple {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
diff --git a/packages/theme/common/global.less b/packages/theme/common/global.less
deleted file mode 100644
index 1f47ba294..000000000
--- a/packages/theme/common/global.less
+++ /dev/null
@@ -1,1958 +0,0 @@
-:root {
-  --ti-lowcode-property-active-color: #4f77ff; // 属性被激活的颜色
-  --ti-lowcode-property-hover-color: #4f77ff; // 属性被hover的颜色
-  --ti-lowcode-block-video-tip-color: rgb(80, 212, 171); // 区块播放视频提示颜色
-}
-
-// tiny-vue popover 弹框样式
-.tiny-popover.tiny-popper {
-  color: var(--ti-lowcode-popover-color);
-  background: var(--ti-lowcode-popover-bg-color);
-  border: none;
-  padding: 6px;
-  border-radius: 6px;
-  line-height: 16px;
-  box-shadow: rgb(0 0 0 / 15%) 0 5px 10px;
-
-  &[x-placement^='bottom'] {
-    .popper__arrow {
-      top: -6px;
-
-      &,
-      &::after {
-        border-bottom-color: var(--ti-lowcode-popover-bg-color);
-      }
-    }
-  }
-
-  &[x-placement^='right'] {
-    margin-left: 16px;
-
-    .popper__arrow {
-      left: -7px;
-      border-color: transparent;
-
-      &::after {
-        border-right-color: var(--ti-lowcode-popover-bg-color);
-      }
-    }
-  }
-
-  &[x-placement^='top'] {
-    .popper__arrow {
-      &,
-      &::after {
-        border-top-color: var(--ti-lowcode-popover-bg-color);
-      }
-    }
-  }
-
-  &[x-placement^='left'] {
-    .popper__arrow {
-      right: -7px;
-
-      &,
-      &::after {
-        border-left-color: var(--ti-lowcode-popover-bg-color);
-      }
-    }
-  }
-
-  &.data-source-popper {
-    background: var(--ti-lowcode-tabs-bg);
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-    border: 1px solid var(--ti-lowcode-tabs-border-color);
-    padding: 6px 0;
-    border-radius: 4px;
-
-    &[x-placement^='bottom'] {
-      .popper__arrow {
-        &,
-        &::after {
-          border-bottom-color: var(--ti-lowcode-tabs-bg);
-        }
-      }
-    }
-
-    &[x-placement^='right'] {
-      margin-left: 16px;
-
-      .popper__arrow {
-        left: -7px;
-        border-color: transparent;
-
-        &::after {
-          border-right-color: var(--ti-lowcode-tabs-bg);
-        }
-      }
-    }
-
-    &[x-placement^='top'] {
-      .popper__arrow {
-        bottom: -7px;
-
-        &,
-        &::after {
-          border-top-color: var(--ti-lowcode-tabs-bg);
-        }
-      }
-    }
-
-    &[x-placement^='left'] {
-      .popper__arrow {
-        right: -7px;
-
-        &,
-        &::after {
-          border-left-color: var(--ti-lowcode-tabs-bg);
-        }
-      }
-    }
-
-    &.data-remote-popper {
-      background: var(--ti-lowcode-toolbar-view-hover-bg);
-      border-color: var(--ti-lowcode-toolbar-border-color);
-
-      &[x-placement^='bottom'] {
-        .popper__arrow {
-          &,
-          &::after {
-            border-bottom-color: var(--ti-lowcode-toolbar-view-hover-bg);
-          }
-        }
-      }
-
-      &[x-placement^='right'] {
-        margin-left: 16px;
-
-        .popper__arrow {
-          left: -7px;
-          border-color: transparent;
-
-          &::after {
-            border-right-color: var(--ti-lowcode-toolbar-view-hover-bg);
-          }
-        }
-      }
-
-      &[x-placement^='top'] {
-        .popper__arrow {
-          bottom: -7px;
-
-          &,
-          &::after {
-            border-top-color: var(--ti-lowcode-toolbar-view-hover-bg);
-          }
-        }
-      }
-
-      &[x-placement^='left'] {
-        .popper__arrow {
-          right: -7px;
-
-          &,
-          &::after {
-            border-left-color: var(--ti-lowcode-toolbar-view-hover-bg);
-          }
-        }
-      }
-
-      li {
-        padding: 4px 10px;
-        font-size: 12px;
-
-        &:hover {
-          background: var(--ti-lowcode-canvas-wrap-bg);
-          cursor: pointer;
-        }
-      }
-    }
-
-    li {
-      cursor: pointer;
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
-      padding: 4px 8px;
-      transition: 0.3s;
-
-      &:hover {
-        color: var(--ti-lowcode-tootip-input-color);
-        background: var(--ti-lowcode-toolbar-active-bg);
-      }
-    }
-  }
-
-  &.lowcode {
-    background: var(--ti-lowcode-custom-popover-bg-color);
-    border: 1px solid var(--ti-lowcode-custom-popover-border-color);
-    color: var(--ti-lowcode-custom-popover-text-color);
-
-    .popper__arrow,
-    .popper__arrow::after {
-      border-bottom-color: var(--ti-lowcode-custom-popover-bg-color);
-    }
-
-    .languageContent {
-      width: 100%;
-    }
-  }
-
-  &.option-popper {
-    background: var(--ti-lowcode-popover-bg-color);
-    border: 1px solid var(--ti-lowcode-popover-option-popper-border-color);
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-
-    &[x-placement^='bottom'] {
-      .popper__arrow {
-        &,
-        &::after {
-          border-bottom-color: var(--ti-lowcode-popover-bg-color);
-        }
-      }
-    }
-
-    &[x-placement^='right'] {
-      margin-left: 16px;
-
-      .popper__arrow {
-        left: -7px;
-        border-color: transparent;
-
-        &::after {
-          border-right-color: var(--ti-lowcode-popover-bg-color);
-        }
-      }
-    }
-
-    &[x-placement^='top'] {
-      .popper__arrow {
-        &,
-        &::after {
-          border-top-color: var(--ti-lowcode-popover-bg-color);
-        }
-      }
-    }
-
-    &[x-placement^='left'] {
-      .popper__arrow {
-        right: -7px;
-
-        &,
-        &::after {
-          border-left-color: var(--ti-lowcode-popover-bg-color);
-        }
-      }
-    }
-
-    .add-options {
-      &.top {
-        border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
-        margin-bottom: 15px;
-        overflow: hidden;
-        display: flex;
-        height: 26px;
-        justify-content: space-between;
-        align-items: center;
-        padding: 6px;
-
-        .title {
-          font-weight: 600;
-        }
-
-        .icon-close {
-          margin-bottom: 4px;
-          margin-right: 0px;
-        }
-      }
-
-      .demo-form {
-        padding: 6px;
-
-        .tiny-form-item {
-          margin-bottom: 4px;
-
-          :deep(.tiny-form-item__label) {
-            color: var(--ti-lowcode-toolbar-breadcrumb-color);
-          }
-
-          :deep(.tiny-input__inner) {
-            color: var(--ti-lowcode-tootip-input-color);
-            background: var(--ti-lowcode-tootip-input-background-color);
-            border-color: var(--ti-lowcode-tootip-input-border-color);
-
-            &:focus {
-              border-color: var(--ti-lowcode-canvas-handle-hover-bg);
-            }
-          }
-        }
-
-        :deep(.btn) {
-          .tiny-form-item__content {
-            display: flex;
-
-            .tiny-button {
-              min-width: auto;
-              flex: 1;
-            }
-          }
-        }
-      }
-
-      .tiny-svg {
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
-        font-size: 14px;
-
-        &.icon-close {
-          margin: 10px;
-        }
-
-        &:hover {
-          cursor: pointer;
-        }
-
-        &.header-icon {
-          margin-right: 0;
-        }
-
-        &.isBind {
-          color: var(--ti-lowcode-icon-bind-color);
-        }
-      }
-    }
-  }
-
-  &.option-popper {
-    padding: 2px 0;
-    min-width: 6%;
-    width: auto;
-
-    .list {
-      li {
-        text-align: center;
-
-        &:hover {
-          background: var(--ti-lowcode-canvas-wrap-bg);
-        }
-      }
-    }
-
-    &.collaborator {
-      padding: 0;
-    }
-
-    &.fixed-left {
-      top: 24px !important;
-      transform: translateX(calc(4px - var(--base-right-panel-width)));
-      height: calc(100% - 36px);
-    }
-  }
-
-  &.media-icon-popover {
-    color: var(--ti-lowcode-media-popover-color);
-    font-size: 12px;
-    font-weight: 400;
-    padding: 20px;
-
-    &[x-placement^='bottom'] {
-      margin-top: 16px;
-    }
-
-    .tiny-popover__title {
-      color: var(--ti-lowcode-media-popover-title-color);
-      font-size: 14px;
-      line-height: 18px;
-      font-weight: 600;
-      margin-bottom: 0;
-    }
-
-    .media-title {
-      color: var(--ti-lowcode-media-popover-title-color);
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-      .sub-title {
-        color: var(--ti-lowcode-media-popover-color);
-      }
-      .icon-stars {
-        font-size: 16px;
-        margin-right: 4px;
-      }
-    }
-
-    .content {
-      margin-top: 6px;
-    }
-  }
-
-  &.toolbar-right-popover {
-    color: var(--ti-lowcode-toolbar-hover-popper);
-    font-size: 14px;
-    padding: 10px 16px;
-    border-radius: 6px;
-    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
-      'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
-    &[x-placement^='bottom'] {
-      margin-top: 8px;
-    }
-
-    &.collaboration-popover[x-placement^='bottom'] {
-      margin-top: 14px;
-    }
-    &.collaborator {
-      padding: 10px 0;
-    }
-  }
-
-  &.block-add-transfer-popover {
-    background: var(--ti-lowcode-toolbar-bg);
-    border: 1px solid var(--ti-lowcode-tabs-border-color);
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-    padding: 0;
-
-    .popper__arrow {
-      display: none;
-    }
-
-    &[x-placement^='top'] {
-      margin-bottom: 0;
-    }
-
-    .sort-item {
-      padding: 6px 10px 6px 24px;
-      transition: 0.3s;
-      position: relative;
-
-      &:hover {
-        background: var(--ti-lowcode-button-hover-bg);
-      }
-    }
-  }
-
-  &.data-remote-popper {
-    width: 12%;
-  }
-
-  &.toolbar-media-popper {
-    padding: 0;
-    font-size: 12px;
-    border-color: var(--ti-lowcode-tabs-border-color);
-
-    &[x-placement^='bottom'] {
-      margin-top: 6px;
-    }
-
-    &[x-placement^='right'] {
-      .popper__arrow {
-        border-color: transparent;
-
-        &::after {
-          border-right-color: var(--ti-lowcode-toolbar-media-bg);
-        }
-      }
-    }
-
-    &[x-placement^='top'] {
-      .popper__arrow {
-        &,
-        &::after {
-          border-top-color: var(--ti-lowcode-toolbar-media-bg);
-        }
-      }
-    }
-
-    &[x-placement^='left'] {
-      .popper__arrow {
-        &,
-        &::after {
-          border-left-color: var(--ti-lowcode-toolbar-media-bg);
-        }
-      }
-    }
-
-    .content-wrap {
-      padding: 20px;
-      .title {
-        width: 100%;
-        color: var(--ti-lowcode-media-popover-title-color);
-        background: var(--ti-lowcode-tabs-active-bg);
-        display: inline-block;
-        box-sizing: border-box;
-        font-size: 14px;
-        &.text-title {
-          background: transparent;
-        }
-      }
-
-      .list {
-        border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
-
-        li {
-          padding: 4px 8px;
-          transition: 0.3s;
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
-
-          .tiny-svg {
-            margin-right: 6px;
-            color: var(--ti-lowcode-toolbar-breadcrumb-color);
-          }
-
-          &:hover {
-            background: var(--ti-lowcode-canvas-wrap-bg);
-          }
-        }
-      }
-
-      .more-setting {
-        li {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          color: var(--ti-lowcode-toolbar-sub-title-color);
-          padding-top: 12px;
-        }
-      }
-
-      .tips {
-        padding: 8px;
-
-        span {
-          display: inline-block;
-          padding: 4px 8px;
-          color: var(--ti-lowcode-dialog-font-color);
-          background: var(--ti-lowcode-canvas-wrap-bg);
-          border-left: 2px solid var(--ti-lowcode-dialog-tip-border-color);
-        }
-      }
-
-      .setting {
-        display: flex;
-        align-items: center;
-        color: var(--ti-lowcode-toolbar-sub-title-color);
-        padding-top: 12px;
-        & > div {
-          display: flex;
-          align-items: center;
-
-          & + div {
-            margin-left: 12px;
-          }
-
-          label {
-            flex-shrink: 0;
-            margin-right: 8px;
-          }
-        }
-
-        & > span {
-          width: 24px;
-          height: 24px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex-shrink: 0;
-          margin-left: 12px;
-          border-radius: 2px;
-          transition: 0.3s;
-
-          &:hover {
-            background: var(--ti-lowcode-icon-hover-bg);
-            cursor: pointer;
-          }
-
-          .icon-canvas-fit {
-            font-size: 16px;
-            color: var(--ti-lowcode-description-minor-color);
-          }
-        }
-
-        .tiny-input__suffix {
-          right: 4px;
-
-          .tiny-input__suffix-inner {
-            font-size: 12px;
-            color: var(--ti-lowcode-description-minor-color);
-          }
-        }
-
-        .tiny-input-suffix .tiny-input__inner {
-          padding-right: 20px;
-          padding-left: 4px;
-
-          &[readonly] {
-            cursor: not-allowed;
-
-            &:focus {
-              border-color: var(--ti-lowcode-tabs-border-color);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.tiny-pager__selector {
-    background-color: var(--ti-lowcode-common-hover-bg-1);
-
-    .tiny-pager__selector-poplist {
-      background: var(--ti-lowcode-toolbar-view-hover-bg);
-      border: 1px solid var(--ti-lowcode-toolbar-border-color);
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
-
-      .list-item {
-        &.select-pre.is-selected {
-          background: var(--ti-lowcode-canvas-wrap-bg);
-        }
-
-        &:hover {
-          color: var(--ti-lowcode-dialog-font-color);
-          background-color: var(--ti-lowcode-canvas-wrap-bg);
-        }
-      }
-    }
-  }
-
-  &.fit-popper {
-    .fit-content {
-      display: grid;
-      gap: 8px 4px;
-      grid-template-columns: 48px 1fr;
-      padding: 8px;
-      align-items: center;
-    }
-
-    .fit-content-label {
-      color: var(--ti-lowcode-fit-label-color);
-      padding: 2px;
-    }
-
-    .fit-content-main {
-      place-items: start center;
-      height: 64px;
-      display: grid;
-      gap: 4px 8px;
-      grid-template-columns: auto auto;
-      grid-template-rows: 1fr 3fr;
-    }
-
-    .coordinate {
-      grid-column-start: 1;
-      grid-row: 1 / span 3;
-      width: 64px;
-      height: 64px;
-      background: var(--ti-lowcode-fit-coordinate-bg);
-      display: inline-grid;
-      overflow: hidden;
-      justify-items: center;
-      border-width: 1px;
-      box-sizing: border-box;
-      border-style: solid;
-      border-color: var(--ti-lowcode-fit-coordinate-border-color);
-      border-radius: 2px;
-      gap: 0px;
-      grid-template-columns: 1fr 1fr 1fr;
-      grid-template-rows: 1fr 1fr 1fr;
-    }
-
-    .coordinate-origin {
-      background-color: var(--ti-lowcode-fit-coordinate-bg);
-      transition: color 0.1s ease 0s;
-      color: var(--ti-lowcode-fit-coordinate-origin-color);
-      font-size: 19px;
-
-      &:hover,
-      &.selected {
-        color: var(--ti-lowcode-fit-label-color);
-      }
-    }
-
-    .input-wrap {
-      grid-column-end: span 1;
-      grid-row-start: 2;
-      align-items: center;
-      box-sizing: border-box;
-      display: grid;
-      gap: 4px 8px;
-      grid-template-columns: auto auto;
-
-      .left-input {
-        grid-column-start: 1;
-      }
-
-      .top-input {
-        grid-column-start: 2;
-      }
-
-      .left {
-        color: var(--ti-lowcode-fit-label-color);
-        justify-self: center;
-        grid-column-start: 1;
-      }
-
-      .top {
-        color: var(--ti-lowcode-fit-label-color);
-        justify-self: center;
-        grid-column-start: 2;
-      }
-
-      .tiny-input__inner {
-        padding: 0 20px 0 4px;
-      }
-
-      .tiny-input__suffix {
-        right: 4px;
-      }
-    }
-  }
-
-  &.grid-edit-popper {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-
-    .grid-edit-spacing {
-      display: grid;
-      gap: 8px 4px;
-      grid-template-columns: 44px 1fr 24px 1fr;
-      align-items: center;
-      padding: 8px;
-
-      .gap,
-      .direction {
-        grid-column: 1 / -1;
-        display: grid;
-        gap: 4px;
-        grid-template-columns: 48px 1fr;
-      }
-
-      .direction {
-        align-items: center;
-
-        .radio-button {
-          width: 50%;
-        }
-      }
-
-      .gap-label {
-        display: inline-block;
-        height: 28px;
-        line-height: 28px;
-      }
-
-      .gap-input {
-        display: grid;
-        gap: 4px;
-        grid-template-columns: 1fr 24px 1fr;
-
-        .svg-icon {
-          place-self: center;
-          grid-area: 1 / 2 / auto / auto;
-          font-family: inherit;
-          font-size: inherit;
-          position: relative;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: 24px;
-          font-size: 18px;
-        }
-
-        .col {
-          place-self: center;
-        }
-
-        .row {
-          place-self: center;
-          grid-column: 3 / -1;
-        }
-
-        .suffix {
-          min-width: 18px;
-        }
-      }
-
-      .dense {
-        grid-column: 2 / -1;
-        display: flex;
-        align-items: center;
-
-        input[type='checkbox'] {
-          accent-color: var(--ti-lowcode-tootip-arrow-border-color);
-        }
-
-        label {
-          margin-right: 4px;
-        }
-      }
-    }
-
-    .grid-edit-layout {
-      padding: 8px;
-
-      .top {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 4px;
-        padding-right: 4px;
-
-        .tiny-svg {
-          font-size: 16px;
-        }
-      }
-
-      .text {
-        margin-left: 4px;
-      }
-
-      .item-icon {
-        display: none;
-        color: var(--ti-lowcode-input-icon-color);
-
-        &:hover {
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
-        }
-
-        & + .item-icon {
-          margin-left: 8px;
-        }
-      }
-
-      .option-input {
-        &:hover .item-icon {
-          display: inline-block;
-        }
-      }
-
-      .layout-item {
-        .tiny-svg {
-          margin-right: 0;
-        }
-
-        & + .layout-item {
-          margin-top: 8px;
-        }
-      }
-    }
-
-    .is-setting {
-      color: var(--ti-lowcode-style-setting-label-color);
-      background-color: var(--ti-lowcode-style-setting-label-bg);
-    }
-  }
-
-  &.icon-popover {
-    background-color: var(--ti-lowcode-icon-popover-bg);
-    filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 0px 1px) drop-shadow(rgba(0, 0, 0, 0.5) 0px 2px 4px)
-      drop-shadow(rgba(0, 0, 0, 0.5) 0px 4px 12px);
-
-    &[x-placement^='left'] {
-      .popper__arrow {
-        right: -6px;
-
-        &,
-        &::after {
-          border-left-color: var(--ti-lowcode-icon-popover-bg);
-        }
-      }
-    }
-  }
-}
-
-// tiny-vue dialogBox 弹框样式
-.tiny-dialog-box__wrapper {
-  .tiny-dialog-box {
-    border-radius: 6px;
-    background-color: var(--ti-lowcode-dialog-box-bg-color);
-    .tiny-dialog-box__header {
-      color: var(--ti-lowcode-dialog-header-color);
-      background-color: var(--ti-lowcode-dialog-box-bg-color);
-      .tiny-dialog-box__headerbtn {
-        color: var(--ti-lowcode-dialog-close-btn-color);
-
-        &:hover {
-          color: var(--ti-lowcode-dialog-close-btn-hover-color);
-        }
-      }
-    }
-
-    .tiny-dialog-box__body {
-      color: var(--ti-lowcode-dialog-box-body-color);
-
-      .tiny-collapse {
-        margin: 16px 0;
-      }
-
-      .tiny-collapse-item__header {
-        padding: 0 8px;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
-        background-color: var(--ti-lowcode-toolbar-active-bg);
-
-        svg {
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
-        }
-      }
-
-      .tiny-collapse-item {
-        border: none;
-        margin-top: 0;
-        padding-top: 0;
-        padding-bottom: 0;
-        background: var(--ti-lowcode-toolbar-bg);
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
-      }
-
-      .tiny-collapse-item__wrap {
-        background-color: var(--ti-lowcode-toolbar-view-hover-bg);
-      }
-
-      .tiny-collapse-item__content {
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
-        border: 1px solid var(--ti-lowcode-dialog-demo-border-color);
-        border-top: none;
-      }
-    }
-  }
-
-  .switch-tip {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-
-    .icon {
-      font-size: 28px;
-      margin-right: 12px;
-    }
-  }
-
-  &.update-page {
-    .tiny-dialog-box__body {
-      .tiny-input {
-        margin-bottom: 10px;
-        background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
-
-        input {
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
-        }
-      }
-    }
-  }
-}
-
-// tiny-vue modal 模态框
-.tiny-modal__wrapper {
-  .tiny-modal__box {
-    .tiny-modal__status-wrapper {
-      display: none;
-    }
-
-    .tiny-modal__close-btn {
-      color: var(--ti-lowcode-modal-close-btn-color);
-
-      &:hover {
-        background-color: unset;
-        color: var(--ti-lowcode-modal-close-btn-hover-color);
-      }
-    }
-
-    .tiny-modal__body {
-      .modal-content {
-        color: var(--ti-lowcode-modal-content-color);
-      }
-    }
-
-    .tiny-modal__footer {
-      display: flex;
-      justify-content: center;
-
-      .tiny-button--primary {
-        margin-left: 8px;
-      }
-    }
-  }
-
-  &.status__custom {
-    .tiny-modal__footer {
-      .tiny-button--default {
-        display: none;
-      }
-    }
-  }
-}
-
-// tiny-vue tooltip 提示框
-.tiny-tooltip.tiny-tooltip__popper {
-  &.is-dark {
-    color: var(--ti-lowcode-tooltip-text-color);
-    background: var(--ti-lowcode-tooltip-bg-color);
-    padding: 6px;
-    border-radius: 2px;
-    box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px;
-    font-size: 14px;
-  }
-
-  &.is-error {
-    background-color: var(--ti-lowcode-tooltip-error-bg-color);
-
-    &[x-placement^='top'] {
-      .popper__arrow {
-        &,
-        &::after {
-          border-top-color: var(--ti-lowcode-tooltip-error-bg-color);
-        }
-      }
-    }
-
-    &[x-placement^='bottom'] {
-      .popper__arrow {
-        &,
-        &::after {
-          border-bottom-color: var(--ti-lowcode-tooltip-error-bg-color);
-        }
-      }
-    }
-
-    &[x-placement^='left'] {
-      .popper__arrow {
-        &,
-        &::after {
-          border-left-color: var(--ti-lowcode-tooltip-error-bg-color);
-        }
-      }
-    }
-
-    &[x-placement^='right'] {
-      .popper__arrow {
-        &,
-        &::after {
-          border-right-color: var(--ti-lowcode-tooltip-error-bg-color);
-        }
-      }
-    }
-  }
-
-  &.tiny-form__valid.is-error {
-    &[x-placement^='top'] {
-      .popper__arrow {
-        bottom: -6px;
-      }
-    }
-  }
-
-  &[x-placement^='top'] {
-    .popper__arrow {
-      &,
-      &::after {
-        border-top-color: var(--ti-lowcode-tooltip-bg-color);
-      }
-    }
-  }
-
-  &[x-placement^='bottom'] {
-    .popper__arrow {
-      &,
-      &::after {
-        border-bottom-color: var(--ti-lowcode-tooltip-bg-color);
-      }
-    }
-  }
-
-  &[x-placement^='left'] {
-    .popper__arrow {
-      &,
-      &::after {
-        border-left-color: var(--ti-lowcode-tooltip-bg-color);
-      }
-    }
-  }
-
-  &[x-placement^='right'] {
-    .popper__arrow {
-      &,
-      &::after {
-        border-right-color: var(--ti-lowcode-tooltip-bg-color);
-      }
-    }
-  }
-
-  &.background-type-tooltip {
-    z-index: 9999999 !important;
-  }
-}
-
-.tiny-popper {
-  &.tiny-picker-panel {
-    color: var(--ti-lowcode-dialog-font-color);
-    background: var(--ti-lowcode-toolbar-view-hover-bg);
-    border-color: var(--ti-lowcode-tabs-border-color);
-    box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px;
-
-    .tiny-date-picker__header-label {
-      color: var(--ti-lowcode-dialog-font-color);
-    }
-
-    .tiny-date-picker__time-header {
-      border-color: var(--ti-lowcode-tabs-border-color);
-    }
-
-    .tiny-picker-panel__icon-btn {
-      color: var(--ti-lowcode-description-minor-color);
-
-      &:hover {
-        color: var(--ti-lowcode-toolbar-icon-color);
-      }
-    }
-
-    .tiny-picker-panel__footer {
-      background-color: var(--ti-lowcode-toolbar-view-hover-bg);
-      border-color: var(--ti-lowcode-tabs-border-color);
-
-      .tiny-button--text {
-        color: var(--ti-lowcode-dialog-font-color);
-
-        &:hover {
-          color: var(--ti-lowcode-toolbar-icon-color);
-        }
-      }
-
-      .tiny-button--primary {
-        color: var(--ti-lowcode-toolbar-icon-color);
-        border-color: var(--ti-lowcode-toolbar-border-color);
-        background-color: var(--ti-lowcode-button-info-bg-color);
-
-        &:hover {
-          color: var(--ti-lowcode-toolbar-icon-color);
-          border-color: var(--ti-lowcode-toolbar-border-color);
-          background-color: var(--ti-lowcode-button-info-hover-bg);
-        }
-      }
-    }
-
-    .tiny-date-table {
-      td.next-month,
-      td.pre-month {
-        color: var(--ti-lowcode-description-minor-color);
-
-        span:hover {
-          color: var(--ti-lowcode-toolbar-icon-color);
-          background: var(--ti-lowcode-canvas-wrap-bg);
-        }
-      }
-
-      th {
-        color: var(--ti-lowcode-dialog-font-color);
-      }
-
-      td.current:not(.disabled) span {
-        background-color: var(--ti-lowcode-canvas-wrap-bg);
-      }
-
-      td.available:hover span {
-        color: var(--ti-lowcode-toolbar-icon-color);
-        background-color: var(--ti-lowcode-canvas-wrap-bg);
-      }
-    }
-
-    .tiny-time-panel {
-      background: var(--ti-lowcode-toolbar-view-hover-bg);
-      border-color: var(--ti-lowcode-tabs-border-color);
-      box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px;
-    }
-
-    .tiny-time-spinner__item {
-      color: var(--ti-lowcode-description-minor-color);
-
-      &.active:not(.disabled) {
-        color: var(--ti-lowcode-toolbar-icon-color);
-      }
-
-      &:hover:not(.disabled):not(.active) {
-        color: var(--ti-lowcode-toolbar-icon-color);
-        background: var(--ti-lowcode-canvas-wrap-bg);
-      }
-    }
-
-    .tiny-time-panel__footer {
-      border-color: var(--ti-lowcode-tabs-border-color);
-
-      .cancel {
-        color: var(--ti-lowcode-dialog-font-color);
-      }
-
-      .confirm {
-        color: var(--ti-lowcode-button-info-bg);
-      }
-    }
-
-    .tiny-time-panel__content {
-      &::after,
-      &::before {
-        border-color: var(--ti-lowcode-toolbar-border-color);
-      }
-    }
-  }
-}
-
-.tiny-grid {
-  svg {
-    color: var(--ti-grid-primary-color);
-    width: 16px;
-    height: 16px;
-  }
-  .tiny-grid__body-wrapper {
-    .tiny-grid-body__column {
-      border-bottom: 0;
-      cursor: pointer;
-      color: var(--ti-lowcode-base-text-color);
-
-      .tree-box {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-
-        .node-icon {
-          margin-right: 5px;
-        }
-      }
-    }
-
-    .tiny-grid-body__row {
-      .tiny-grid-default-input {
-        background: var(--ti-lowcode-input-bg);
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
-      }
-
-      &,
-      &:not(.row__hover):nth-child(2n) {
-        background: var(--ti-lowcode-tiny-grid-row-hover-bg);
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
-
-        &:hover {
-          background: var(--ti-lowcode-toolbar-bg);
-        }
-
-        &.row__current {
-          background: var(--ti-lowcode-node-current-bg);
-
-          span {
-            color: var(--ti-lowcode-toolbar-breadcrumb-color);
-          }
-
-          svg {
-            color: var(--ti-lowcode-toolbar-breadcrumb-color);
-          }
-        }
-
-        &.sortable-chosen {
-          background: var(--ti-lowcode-node-current-bg);
-
-          &.nodrag {
-            background: var(--ti-lowcode-node-nodrag-bg);
-          }
-        }
-      }
-
-      &.nav-tree {
-        .tiny-grid-body__column {
-          height: 32px;
-        }
-
-        .tiny-grid-cell {
-          display: flex;
-        }
-      }
-    }
-
-    .tiny-grid-tree-wrapper {
-      width: 14px;
-
-      .tiny-grid-tree__node-btn {
-        font-size: 8px;
-        color: var(--ti-lowcode-tree-icon-color);
-
-        &:hover {
-          color: var(--ti-lowcode-toolbar-icon-color);
-        }
-      }
-    }
-  }
-
-  .tiny-grid__fixed-right-wrapper,
-  .tiny-grid__fixed-left-wrapper {
-    background-color: var(--ti-lowcode-common-bg-1);
-  }
-
-  .tiny-grid-checkbox {
-    input {
-      & + .tiny-grid-checkbox__icon {
-        border: 1px solid var(--ti-lowcode-tiny-grid-checkbox-checked-border-color);
-        background-color: transparent;
-        svg {
-          color: var(--ti-lowcode-tiny-grid-checkbox-svg-color);
-        }
-      }
-
-      &:checked + .tiny-grid-checkbox__icon {
-        border: 1px solid var(--ti-lowcode-tiny-grid-checkbox-checked-border-color);
-
-        svg {
-          color: var(--ti-lowcode-common-primary-color);
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      &[type='checkbox']:checked + .tiny-grid-checkbox__icon {
-        background-color: var(--ti-lowcode-tiny-grid-checkbox-checked-bg-color);
-        border-color: var(--ti-lowcode-tiny-grid-checkbox-checked-border-color);
-      }
-    }
-    &.is__indeterminate {
-      .tiny-grid-checkbox__icon svg {
-        color: var(--ti-lowcode-common-primary-color);
-      }
-    }
-  }
-  .tiny-grid-radio {
-    input + .tiny-grid-radio__icon > svg.icon-radio-selected {
-      color: var(--ti-lowcode-tiny-radio-selected-svg-color);
-    }
-  }
-}
-
-.stripe-tiny-grid.tiny-grid {
-  background-color: var(--ti-lowcode-common-component-bg);
-  .tiny-grid {
-    background-color: var(--ti-lowcode-common-component-bg);
-  }
-
-  .tiny-grid__header-wrapper {
-    background-color: var(--ti-lowcode-tabs-bg);
-
-    .tiny-grid-header__column {
-      color: var(--ti-lowcode-stripe-grid-header-text-color);
-      height: 39px;
-    }
-
-    .tiny-grid__repair {
-      border-color: var(--ti-lowcode-tabs-border-color);
-    }
-
-    .tiny-grid-resizable.is__line:before {
-      background-color: var(--ti-lowcode-toolbar-active-bg);
-    }
-  }
-
-  .tiny-grid__body-wrapper {
-    .tiny-grid-body__column {
-      height: 44px;
-    }
-
-    .tiny-grid-body__row,
-    .tiny-grid-body__row:not(.row__hover):nth-child(2n) {
-      background-color: var(--ti-lowcode-stripe-grid-list-2n-bg-color);
-
-      &:hover {
-        background-color: var(--ti-lowcode-stripe-grid-list-item-hover-bg);
-      }
-
-      &.row__current {
-        background-color: var(--ti-lowcode-toolbar-view-hover-bg);
-      }
-    }
-
-    .tiny-grid-body__row:not(.row__hover):nth-child(2n) {
-      background-color: var(--ti-lowcode-stripe-grid-list-n-bg-color);
-    }
-  }
-
-  .tiny-grid__empty-text {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-  }
-}
-
-.tiny-search {
-  div.tiny-search__line {
-    &:hover {
-      background-color: var(--ti-lowcode-search-hover-bg);
-    }
-    &.focus {
-      .tiny-search__input-btn {
-        color: var(--ti-lowcode-search-hover-icon-color);
-      }
-      .tiny-search__prefix svg {
-        color: var(--ti-lowcode-search-hover-icon-color);
-      }
-    }
-
-    .tiny-search__input-btn {
-      color: var(--ti-lowcode-search-icon-color);
-      &:hover {
-        color: var(--ti-lowcode-search-hover-icon-color);
-      }
-    }
-    .tiny-search__prefix svg {
-      color: var(--ti-lowcode-search-icon-color);
-      &:hover {
-        color: var(--ti-lowcode-search-hover-icon-color);
-        cursor: pointer;
-      }
-    }
-    .tiny-search__input {
-      color: var(--ti-lowcode-search-input-color);
-      &::placeholder {
-        color: var(--ti-lowcode-search-input-placeholder-color);
-      }
-    }
-  }
-}
-
-.tiny-input {
-  .tiny-input__inner {
-    border-color: var(--ti-lowcode-input-border-color);
-    background-color: var(--ti-lowcode-input-bg-color);
-    color: var(--ti-lowcode-input-color);
-
-    &:focus {
-      border-color: var(--ti-lowcode-input-focus-border-color);
-    }
-    &::placeholder {
-      color: var(--ti-lowcode-input-placeholder-color);
-    }
-    &:hover {
-      border-color: var(--ti-lowcode-input-hover-border-color);
-    }
-  }
-
-  &.is-disabled {
-    .tiny-input__inner {
-      border-color: var(--ti-lowcode-input-disabled-border-color);
-      background: var(--ti-lowcode-input-disabled-bg-color);
-    }
-  }
-
-  // 全局自定义的错误样式状态，tinyvue 那边要有错误样式必须要包一层 form、form-item
-  // 所以我们这里自定义了一个类，添加这个类，就可以有错误的样式，无需包一层 form、form-item
-  &.status-error {
-    .tiny-input__inner {
-      border-color: var(--ti-lowcode-input-error-border-color);
-      background-color: var(--ti-lowcode-input-error-bg-color);
-    }
-  }
-}
-
-.tiny-textarea {
-  border-color: var(--ti-lowcode-textarea-border-color);
-
-  &:hover,
-  &:has(.tiny-textarea__inner:focus) {
-    border-color: var(--ti-lowcode-textarea-hover-border-color);
-  }
-
-  .tiny-textarea__inner {
-    background-color: var(--ti-lowcode-textarea-input-bg-color);
-    color: var(--ti-lowcode-textarea-input-color);
-  }
-}
-
-.tiny-numeric {
-  .tiny-numeric__decrease,
-  .tiny-numeric__increase {
-    color: var(--ti-lowcode-tiny-numeric-icon-color);
-
-    &:hover {
-      color: var(--ti-lowcode-tiny-numeric-icon-hover-color);
-    }
-  }
-}
-
-span.tiny-switch {
-  background-color: var(--ti-lowcode-tiny-switch-bg-color);
-
-  &.tiny-switch-checked {
-    background-color: var(--ti-lowcode-tiny-switch-checked-bg-color);
-  }
-
-  &::after {
-    background-color: var(--ti-lowcode-tiny-switch-dot-bg);
-  }
-}
-
-.tiny-select {
-  div.tiny-input {
-    &.is-focus {
-      .tiny-input__inner {
-        border-color: var(--ti-lowcode-select-focus-border-color);
-      }
-    }
-  }
-
-  .tiny-select__tags {
-    .tiny-tag {
-      color: var(--ti-lowcode-select-tags-text-color);
-      background-color: var(--ti-lowcode-select-tags-bg-color);
-
-      .tiny-tag__close {
-        color: var(--ti-lowcode-select-tags-text-color);
-        &:hover {
-          color: var(--ti-lowcode-select-suffix-icon-color-hover);
-        }
-      }
-    }
-  }
-
-  .tiny-input {
-    .tiny-input__inner {
-      padding: 8px;
-    }
-
-    .tiny-select__caret {
-      color: var(--ti-lowcode-select-tags-text-color);
-    }
-
-    .tiny-input__suffix-inner {
-      &:hover {
-        .tiny-select__caret {
-          color: var(--ti-lowcode-select-suffix-icon-color-hover);
-        }
-      }
-    }
-  }
-}
-
-.tiny-select-dropdown {
-  &.tiny-popper {
-    background-color: var(--ti-lowcode-dropdown-bg-color);
-    border: 1px solid var(--ti-lowcode-dropdown-border-color);
-
-    &.select-popper {
-      margin-top: 3px;
-
-      .tiny-select-dropdown__item.tiny-option {
-        width: 79px;
-        height: 24px;
-        line-height: 24px;
-        padding: 4px 8px;
-        display: flex;
-        align-items: center;
-      }
-
-      .tiny-select-dropdown__list {
-        padding: 4px 0;
-      }
-
-      .tiny-select-dropdown__wrap {
-        min-height: 50px;
-        margin-bottom: -8px !important;
-        margin-right: -8px !important;
-      }
-    }
-
-    .cursor-option {
-      padding: 0 4px 0 12px;
-
-      .item-icon {
-        font-size: 16px;
-      }
-
-      .item-label {
-        font-size: 14px;
-        margin-left: 4px;
-      }
-    }
-  }
-
-  .tiny-select-dropdown__item {
-    &.tiny-option {
-      color: var(--ti-lowcode-dropdown-item-text-color);
-      background-color: var(--ti-lowcode-dropdown-bg-color);
-
-      &.hover,
-      &:hover {
-        background-color: var(--ti-lowcode-dropdown-item-hover-bg-color);
-        color: var(--ti-lowcode-dropdown-item-hover-text-color);
-      }
-
-      &.selected {
-        color: var(--ti-lowcode-dropdown-item-selected-color);
-        background-color: var(--ti-lowcode-dropdown-item-selected-bg);
-
-        & > span {
-          position: relative;
-        }
-      }
-
-      &.is-disabled > a {
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &.is-multiple {
-    .tiny-select-dropdown__item.tiny-option {
-      &:not(.is-disabled).hover,
-      &:not(.is-disabled):hover {
-        color: var(--ti-lowcode-dropdown-item-hover-text-color);
-        background-color: var(--ti-lowcode-dropdown-item-hover-bg-color);
-
-        .tiny-svg {
-          color: var(--ti-lowcode-dropdown-item-hover-text-color);
-        }
-      }
-
-      &.is-disabled:hover {
-        background-color: transparent;
-      }
-
-      &.selected {
-        color: var(--ti-lowcode-dropdown-item-hover-text-color);
-        background-color: transparent;
-        font-weight: 600;
-
-        .tiny-svg {
-          color: var(--ti-lowcode-dropdown-item-hover-text-color);
-        }
-
-        & > span {
-          padding-left: 0;
-
-          &::before {
-            content: '';
-          }
-        }
-      }
-
-      & > span {
-        padding-left: 0;
-      }
-    }
-  }
-
-  .tiny-select-group__wrap {
-    &:not(:last-of-type)::after {
-      left: 0;
-      right: 0;
-      background: var(--ti-lowcode-toolbar-border-color);
-    }
-
-    .tiny-select-group__title {
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--ti-lowcode-dialog-font-color);
-      background: var(--ti-lowcode-toolbar-bg);
-      padding: 2px 0 2px 8px;
-      margin-bottom: 2px;
-    }
-  }
-
-  .tiny-tree {
-    color: var(--ti-lowcode-dialog-font-color);
-    background: var(--ti-lowcode-toolbar-view-hover-bg);
-
-    .tiny-tree-node__expand-icon {
-      &,
-      &.expanded {
-        color: var(--ti-lowcode-dialog-font-color);
-      }
-
-      &:not(.is-leaf) {
-        margin-left: 12px;
-        margin-right: 6px;
-      }
-    }
-
-    .tiny-tree-node__content {
-      &:hover {
-        background-color: var(--ti-lowcode-canvas-wrap-bg);
-      }
-    }
-
-    .tiny-tree-node {
-      &.is-current,
-      &:focus {
-        & > .tiny-tree-node__content {
-          background-color: var(--ti-lowcode-canvas-wrap-bg);
-        }
-      }
-    }
-  }
-
-  &.position-origin-select {
-    min-width: 72px !important;
-    z-index: 9999999 !important;
-  }
-}
-
-.tiny-tree {
-  .tiny-tree-node__label {
-    font-size: 12px;
-  }
-}
-
-button {
-  &.tiny-button {
-    &.tiny-button--default {
-      color: var(--ti-lowcode-button-default-color);
-      border-color: var(--ti-lowcode-button-default-border-color);
-      background-color: var(--ti-lowcode-button-default-bg);
-
-      &:hover {
-        color: var(--ti-lowcode-button-default-hover-color);
-        border-color: var(--ti-lowcode-button-default-hover-border-color);
-        background-color: var(--ti-lowcode-button-default-hover-bg);
-      }
-
-      &.is-disabled {
-        color: var(--ti-lowcode-button-default-disabled-color);
-        border-color: var(--ti-lowcode-button-default-disabled-border-color);
-        background-color: var(--ti-lowcode-button-default-disabled-bg);
-      }
-    }
-
-    &.tiny-button--info {
-      color: var(--ti-lowcode-button-info-color);
-      border-color: var(--ti-lowcode-button-info-border-color);
-      background-color: var(--ti-lowcode-button-info-bg-color);
-
-      &:hover {
-        color: var(--ti-lowcode-button-info-hover-color);
-        border-color: var(--ti-lowcode-button-info-hover-border-color);
-        background-color: var(--ti-lowcode-button-info-hover-bg-color);
-      }
-    }
-    &.tiny-button--primary {
-      color: var(--ti-lowcode-button-primary-color);
-      border-color: var(--ti-lowcode-button-primary-border-color);
-      background-color: var(--ti-lowcode-button-primary-bg-color);
-
-      &:hover {
-        color: var(--ti-lowcode-button-primary-hover-color);
-        border-color: var(--ti-lowcode-button-primary-hover-border-color);
-        background-color: var(--ti-lowcode-button-primary-hover-bg-color);
-      }
-    }
-  }
-}
-
-.tiny-button-group {
-  ul.tiny-group-item {
-    border: 1px solid var(--ti-lowcode-tabs-border-color);
-    border-radius: 2px;
-
-    li {
-      background-color: var(--ti-lowcode-canvas-wrap-bg);
-
-      &.active {
-        &:hover button:not(.disabled),
-        button:not(.disabled) {
-          background: var(--ti-lowcode-tabs-bg);
-          border-color: var(--ti-lowcode-tabs-bg);
-          color: var(--ti-lowcode-toolbar-icon-color);
-        }
-      }
-
-      &:hover {
-        button:not(.disabled) {
-          color: var(--ti-lowcode-dropdown-item-hover-text-color);
-          background-color: var(--ti-lowcode-common-component-bg);
-        }
-      }
-
-      &:not(:last-child) {
-        margin-right: 0;
-      }
-    }
-
-    button {
-      background-color: var(--ti-lowcode-canvas-wrap-bg);
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
-
-      &::before {
-        background: var(--ti-lowcode-tabs-border-color);
-      }
-    }
-  }
-}
-
-.tiny-form {
-  .tiny-form-item__label {
-    font-size: 12px;
-    padding-right: 8px;
-    color: var(--ti-lowcode-input-label-color);
-  }
-
-  .tiny-form-item {
-    &.is-error {
-      margin-bottom: 20px;
-    }
-  }
-}
-
-.tiny-collapse {
-  border-top: none;
-  border-bottom: none;
-  .tiny-collapse-item {
-    border: none;
-    margin-top: 0;
-    .components-items {
-      .item {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .tiny-collapse-item__header {
-    color: var(--ti-lowcode-collapse-item-header-color);
-    position: relative;
-    min-height: 32px;
-    padding: 12px;
-    font-weight: 700;
-    border-top: 1px solid var(--ti-lowcode-base-invalidate-color);
-
-    &:hover,
-    &.is-active {
-      color: var(--ti-lowcode-collapse-item-header-active-color);
-    }
-
-    .tiny-collapse-item__arrow {
-      color: var(--ti-lowcode-life-cycle-alert-color);
-      line-height: 14px;
-      position: absolute;
-      right: 0;
-    }
-  }
-
-  .tiny-collapse-item,
-  .tiny-collapse-item__wrap {
-    background-color: var(--ti-lowcode-collapse-item-bg-color);
-  }
-
-  .tiny-collapse-item__content {
-    color: var(--ti-lowcode-collapse-item-content-color);
-    padding: 0;
-    border: none;
-    margin-bottom: 12px;
-  }
-
-  .tiny-collapse-item__wrap {
-    overflow: inherit;
-  }
-}
-
-.canvas-slot-choose {
-  div {
-    line-height: 30px;
-    text-align: center;
-    color: var(--ti-lowcode-button-info-color);
-
-    &:hover {
-      background-color: var(--ti-lowcode-component-item-hover-bg);
-    }
-  }
-}
-
-.tiny-notify {
-  .tiny-notify__close-zone {
-    color: var(--ti-lowcode-notify-close-color);
-    &:hover {
-      color: var(--ti-lowcode-notify-close-hover-color);
-    }
-  }
-
-  &.tiny-notify--error {
-    .tiny-notify__icon-status {
-      color: var(--ti-lowcode-base-error-color);
-    }
-  }
-
-  &.tiny-notify--info {
-    .tiny-notify__icon-status {
-      color: var(--ti-lowcode-base-prompt-color);
-    }
-  }
-
-  &.tiny-notify--success {
-    .tiny-notify__icon-status {
-      color: var(--ti-lowcode-base-success-color);
-    }
-  }
-
-  &.tiny-notify--warning {
-    .tiny-notify__icon-status {
-      color: var(--ti-lowcode-base-warn-color);
-    }
-  }
-}
-
-.tiny-tabs {
-  // tiny-tabs button-card模式宽度默认无法铺满父容器，添加此类名修改成铺满父容器
-  &.full-width-tabs {
-    .tiny-tabs__nav {
-      float: none;
-      display: flex;
-      .tiny-tabs__item {
-        flex: 1 1 auto;
-      }
-    }
-  }
-  &__item__title {
-    text-align: center;
-  }
-}
-
-.tiny-dropdown {
-  &__trigger {
-    color: var(--ti-lowcode-trigger-color);
-    &:not(&__caret-button):hover {
-      color: var(--ti-lowcode-trigger-hover-color);
-    }
-  }
-}
-
-.empty-wrap {
-  text-align: center;
-  margin-top: 20px;
-
-  .empty-icon {
-    width: 64px;
-    height: 64px;
-    color: var(--ti-lowcode-empty-icon-color);
-  }
-
-  .empty-text {
-    margin-top: 6px;
-    margin-bottom: 0;
-    font-size: 12px;
-    color: var(--ti-lowcode-common-text-color-5);
-  }
-}
-
-.tiny-radio-group {
-  .tiny-radio-button {
-    &:first-child {
-      .tiny-radio-button__inner {
-        border-color: var(--ti-lowcode-radio-button-border-color);
-      }
-    }
-    .tiny-radio-button__orig-radio:checked {
-      & + .tiny-radio-button__inner {
-        background-color: var(--ti-lowcode-tiny-radio-button-checked-bg);
-        border-color: var(--ti-lowcode-radio-button-border-color);
-        &:hover {
-          box-shadow: none;
-        }
-      }
-    }
-    &__inner {
-      background-color: var(--ti-lowcode-tiny-radio-button-bg);
-      color: var(--ti-lowcode-radio-button-color);
-      border-color: var(--ti-lowcode-radio-button-border-color);
-    }
-  }
-}
-
-.tiny-loading {
-  .tiny-loading__spinner {
-    margin-top: 0;
-    transform: translateY(-50%);
-  }
-}
-
-.global-desc-info {
-  color: var(--ti-lowcode-common-text-desc-color);
-}
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..5db552ce4 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 e43a405a7..a4f8c143d 100644
--- a/packages/theme/dark/index.less
+++ b/packages/theme/dark/index.less
@@ -1,7 +1,5 @@
-@import '../common/base.less';
-@import '../common/global.less';
-@import './base.less';
 // 主题配置优先于公共配置
+@import './base.less';
 @import './variable.less';
 @import './block.less';
 @import './life-cycles.less';
@@ -9,26 +7,12 @@
 @import './help.less';
 @import './settings.less';
 @import './metaComponent.less';
-@import './button.less';
-@import './tiny-collapse.less';
-@import './tiny-modal.less';
-@import './tiny-tabs.less';
-@import './tiny-search.less';
-@import './tiny-grid.less';
 @import './events.less';
-@import './radio.less';
 @import './i18n.less';
 @import './pageManage.less';
 @import './materials.less';
 @import './tree.less';
 @import './canvas.less';
-@import './tiny-dialog-box.less';
-@import './tiny-input.less';
-@import './tiny-switch.less';
-@import './tiny-search.less';
-@import './tiny-numeric.less';
-@import './tiny-checkbox.less';
-@import './tiny-notify.less';
 @import './bridge.less';
 @import './toolbar.less';
 @import './datasource.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/radio.less b/packages/theme/dark/radio.less
deleted file mode 100644
index 50ff79bf3..000000000
--- a/packages/theme/dark/radio.less
+++ /dev/null
@@ -1,19 +0,0 @@
-// 对 tinyvue 主题进行变量覆盖
-#app .tiny-radio[class*='tiny'] {
-  --ti-radio-bordered-checked-background-color: transparent;
-  --ti-radio-inner-bg-color: transparent;
-  --ti-radio-inner-checked-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-radio-bordered-checked-border-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-radio-bordered-hover-border-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-radio-inner-checked-hover-bg-color: var(--ti-lowcode-base-blue-5);
-  --ti-radio-bordered-checked-hover-border-color: var(--ti-lowcode-base-blue-5);
-  --ti-radio-text-color: var(--ti-lowcode-base-text-color);
-  --ti-radio-bordered-active-border-color: var(--ti-lowcode-base-primary-color-2);
-}
-
-.tiny-radio-group {
-  --ti-lowcode-tiny-radio-button-bg: #262626;
-  --ti-lowcode-tiny-radio-button-checked-bg: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-radio-button-color: #fff;
-  --ti-lowcode-radio-button-border-color: transparent;
-}
diff --git a/packages/theme/dark/settings.less b/packages/theme/dark/settings.less
index fe74f0cdc..4cacf81b4 100644
--- a/packages/theme/dark/settings.less
+++ b/packages/theme/dark/settings.less
@@ -37,10 +37,11 @@
   --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 {
   --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-property-active-color: var(--te-common-bg-primary-checked);
 }
diff --git a/packages/theme/dark/tiny-checkbox.less b/packages/theme/dark/tiny-checkbox.less
deleted file mode 100644
index 8e9b9a53e..000000000
--- a/packages/theme/dark/tiny-checkbox.less
+++ /dev/null
@@ -1,27 +0,0 @@
-label.tiny-checkbox[class*='tiny'] {
-  --ti-checkbox-text-color: var(--ti-lowcode-base-gray-10);
-  --ti-checkbox-bg-color-checked: var(--ti-lowcode-base-primary-color-2);
-  --ti-checkbox-bg-color-hover-checked: var(--ti-lowcode-base-primary-color-2);
-  --ti-checkbox-border-color-hover-checked: var(--ti-lowcode-base-primary-color-2);
-  --ti-checkbox-border-color-checked: var(--ti-lowcode-base-primary-color-2);
-  --ti-checkbox-border-color-hover: var(--ti-lowcode-base-gray-40);
-  --ti-checkbox-bg-color-disable: rgba(255, 255, 255, 0.08);
-  --ti-checkbox-border-color-unchecked-disabled: var(--ti-lowcode-base-gray-40);
-}
-
-label.tiny-checkbox-button[class*='tiny'] {
-  --ti-checkbox-button-checked-border-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-checkbox-button-checked-text-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-checkbox-button-bg-color-hover: #fff;
-  --ti-checkbox-button-border-color-hover: var(--ti-lowcode-base-primary-color-2);
-  --ti-checkbox-button-hover-text-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-checkbox-button-disabled-bg-color: rgba(255, 255, 255, 0.08);
-}
-
-label.tiny-checkbox-button:not(.is-disabled).is-checked::after {
-  border-right-color: var(--ti-lowcode-base-primary-color-2);
-}
-
-label.tiny-checkbox-button:not(.is-disabled).is-checked .tiny-checkbox-button__inner {
-  --ti-checkbox-shadow-color: var(--ti-lowcode-base-primary-color-2);
-}
diff --git a/packages/theme/dark/tiny-collapse.less b/packages/theme/dark/tiny-collapse.less
deleted file mode 100644
index 22f139350..000000000
--- a/packages/theme/dark/tiny-collapse.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.tiny-collapse {
-  --ti-lowcode-collapse-item-header-bg-color: #222;
-  --ti-lowcode-collapse-item-header-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-collapse-item-header-active-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-collapse-item-bg-color: #2f2f2f;
-  --ti-lowcode-collapse-item-content-color: var(--ti-lowcode-base-text-color);
-}
diff --git a/packages/theme/dark/tiny-dialog-box.less b/packages/theme/dark/tiny-dialog-box.less
deleted file mode 100644
index 56a010ecb..000000000
--- a/packages/theme/dark/tiny-dialog-box.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.tiny-dialog-box__wrapper {
-  --ti-lowcode-dialog-close-btn-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-dialog-close-btn-hover-color: var(--ti-lowcode-common-primary-text-color);
-  --ti-lowcode-dialog-box-bg-color: #2f2f2f;
-  --ti-lowcode-dialog-box-body-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-dialog-header-color: var(--ti-lowcode-base-text-color);
-}
diff --git a/packages/theme/dark/tiny-grid.less b/packages/theme/dark/tiny-grid.less
deleted file mode 100644
index 73aaeb3dc..000000000
--- a/packages/theme/dark/tiny-grid.less
+++ /dev/null
@@ -1,24 +0,0 @@
-.tiny-grid {
-  --ti-lowcode-tiny-grid-header-color: var(--ti-lowcode-toolbar-breadcrumb-color);
-  --ti-lowcode-tiny-grid-header-color-bg: var(--ti-lowcode-common-bg-4);
-  --ti-lowcode-tiny-grid-row-hover-bg: var(--ti-lowcode-common-component-bg);
-  // 表格checkbox非选中时边框颜色
-  --ti-lowcode-tiny-grid-checkbox-border-color: #8a8e99;
-  // 表格checkbox选中时边框颜色
-  --ti-lowcode-tiny-grid-checkbox-checked-border-color: var(--ti-lowcode-common-primary-color);
-  // 表格checkbox选中时背景颜色
-  --ti-lowcode-tiny-grid-checkbox-checked-bg-color: #fff;
-  // 表格checkbox未选中时图标颜色
-  --ti-lowcode-tiny-grid-checkbox-svg-color: #fff;
-  // 表格radio选中时颜色
-  --ti-lowcode-tiny-radio-selected-svg-color: var(--ti-lowcode-common-primary-color);
-  // ----斑马纹表格----
-  // 斑马纹表格单行背景颜色
-  --ti-lowcode-stripe-grid-list-n-bg-color: #282828;
-  // 斑马纹表格双行背景颜色
-  --ti-lowcode-stripe-grid-list-2n-bg-color: var(--ti-lowcode-common-component-bg);
-  // 斑马纹表格鼠标悬浮时背景颜色
-  --ti-lowcode-stripe-grid-list-item-hover-bg: var(--ti-lowcode-toolbar-view-hover-bg);
-  // 斑马纹表格头部字体颜色
-  --ti-lowcode-stripe-grid-header-text-color: #d9d9d9;
-}
diff --git a/packages/theme/dark/tiny-input.less b/packages/theme/dark/tiny-input.less
deleted file mode 100644
index e98eefb5c..000000000
--- a/packages/theme/dark/tiny-input.less
+++ /dev/null
@@ -1,25 +0,0 @@
-.tiny-input {
-  // input 禁用边框色
-  --ti-lowcode-input-disabled-border-color: #6b6b6b;
-  --ti-lowcode-input-disabled-bg-color: #4d4d4d;
-  --ti-lowcode-input-border-color: transparent;
-  --ti-lowcode-input-bg-color: #262626;
-  --ti-lowcode-input-placeholder-color: rgba(138, 142, 153, 0.6);
-  --ti-lowcode-input-color: #d9d9d9;
-  // input框focus 获焦时边框颜色
-  --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-input-hover-border-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-input-error-border-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-input-error-bg-color: rgba(242, 48, 48, 0.1);
-}
-
-.tiny-textarea {
-  --ti-lowcode-textarea-border-color: #313131;
-  --ti-lowcode-textarea-hover-border-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-textarea-input-bg-color: #262626;
-  --ti-lowcode-textarea-input-color: #fff;
-}
-
-.tiny-form-item__label {
-  --ti-lowcode-input-label-color: var(--ti-lowcode-base-gray-20);
-}
diff --git a/packages/theme/dark/tiny-modal.less b/packages/theme/dark/tiny-modal.less
deleted file mode 100644
index dd5bfa590..000000000
--- a/packages/theme/dark/tiny-modal.less
+++ /dev/null
@@ -1,10 +0,0 @@
-// 覆写组件样式
-:root .tiny-modal[class*='tiny'] {
-  --ti-modal-box-background-color: #2f2f2f;
-  --ti-modal-header-text-color: var(--ti-lowcode-base-text-color);
-}
-.tiny-modal {
-  --ti-lowcode-modal-close-btn-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-modal-close-btn-hover-color: var(--ti-lowcode-common-primary-text-color);
-  --ti-lowcode-modal-content-color: var(--ti-lowcode-common-secondary-text-color);
-}
diff --git a/packages/theme/dark/tiny-notify.less b/packages/theme/dark/tiny-notify.less
deleted file mode 100644
index 1a99c0d36..000000000
--- a/packages/theme/dark/tiny-notify.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.tiny-notify {
-  // notify 样式
-  --ti-lowcode-notify-close-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-notify-close-hover-color: var(--ti-lowcode-base-gray-80);
-}
diff --git a/packages/theme/dark/tiny-numeric.less b/packages/theme/dark/tiny-numeric.less
deleted file mode 100644
index f2c45e001..000000000
--- a/packages/theme/dark/tiny-numeric.less
+++ /dev/null
@@ -1,11 +0,0 @@
-div.tiny-numeric {
-  --ti-numeric-input-normal-bg-color: #262626;
-  --ti-numeric-input-normal-border-color: var(--ti-lowcode-base-gray-60);
-  --ti-numeric-input-normal-text-color: var(--ti-lowcode-base-text-color);
-  --ti-numeric-input-border-color-active: var(--ti-lowcode-base-gray-40);
-  --ti-numeric-input-normal-active-border-color: var(--ti-lowcode-base-gray-40);
-  --ti-numeric-input-icon-color-hover: var(--ti-lowcode-base-gray-40);
-
-  --ti-lowcode-tiny-numeric-icon-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-tiny-numeric-icon-hover-color: var(--ti-lowcode-base-gray-40);
-}
diff --git a/packages/theme/dark/tiny-search.less b/packages/theme/dark/tiny-search.less
deleted file mode 100644
index 0356fb7df..000000000
--- a/packages/theme/dark/tiny-search.less
+++ /dev/null
@@ -1,23 +0,0 @@
-#app .tiny-search {
-  --ti-search-input-border-color: transparent;
-  --ti-search-input-bg-color: #262626;
-  --ti-search-line-hover-border-color: #3c3c3c;
-  --ti-search-input-focus-border-color: #4f77ff;
-  --ti-search-input-text-color: #d9d9d9;
-}
-
-.tiny-search {
-  // 搜索框图标颜色
-  --ti-lowcode-search-icon-color: #737373;
-  // 搜索框图标悬浮时颜色
-  --ti-lowcode-search-hover-icon-color: #d9d9d9;
-  // 搜索框hover背景色
-  --ti-lowcode-search-hover-bg: #3c3c3c;
-
-  // tinysearch  背景色
-  --ti-lowcode-component-search-bg: var(--ti-lowcode-input-bg);
-  // 搜索框hover背景色
-  --ti-lowcode-search-hover-bg: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-search-input-color: #d9d9d9;
-  --ti-lowcode-search-input-placeholder-color: #757575;
-}
diff --git a/packages/theme/dark/tiny-switch.less b/packages/theme/dark/tiny-switch.less
deleted file mode 100644
index 9025824c2..000000000
--- a/packages/theme/dark/tiny-switch.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.tiny-switch {
-  --ti-lowcode-tiny-switch-bg-color: #c2c2c2;
-  --ti-lowcode-tiny-switch-checked-bg-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-tiny-switch-dot-bg: #fff;
-}
diff --git a/packages/theme/dark/tiny-tabs.less b/packages/theme/dark/tiny-tabs.less
deleted file mode 100644
index 1b68112cf..000000000
--- a/packages/theme/dark/tiny-tabs.less
+++ /dev/null
@@ -1,5 +0,0 @@
-#app .tiny-tabs {
-  --ti-tabs-button-card-item-text-color: #a6a6a6;
-  --ti-tabs-button-card-item-hover-text-color: #fff;
-  --ti-tabs-button-card-nav-bg-color: #262626;
-}
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..d148d58a0 100644
--- a/packages/theme/dark/variable.less
+++ b/packages/theme/dark/variable.less
@@ -70,9 +70,9 @@
   // svgButton
   --ti-lowcode-component-svg-button-color: var(--ti-lowcode-common-text-color-2);
   --ti-lowcode-component-svg-button-hover-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-component-svg-button-hover-bg-color: transparent;
+  --ti-lowcode-component-svg-button-hover-bg-color: var(--te-common-bg-prompt);
   --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-component-svg-button-hover-bg-color: transparent;
+  --ti-lowcode-component-svg-button-active-bg-color: var(--te-common-bg-prompt);
 
   --ti-lowcode-tabs-active-border-bottom-color: var(--ti-lowcode-common-primary-color);
   --ti-lowcode-tabs-active-color: var(--ti-lowcode-common-primary-color);
@@ -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/canvas.less b/packages/theme/light/canvas.less
index 1342c9457..aec4ae443 100644
--- a/packages/theme/light/canvas.less
+++ b/packages/theme/light/canvas.less
@@ -1,26 +1,26 @@
 #canvas-wrap {
-  --ti-lowcode-canvas-rect-border-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-canvas-hover-line-in-bg-color: rgba(0, 255, 0, 0.1);
-  --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-canvas-hover-line-in-forbid-bg-color: rgba(242, 48, 48, 0.3);
-  --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-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);
-  --ti-lowcode-canvas-corner-mark-right-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-canvas-select-corner-mark-left-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--ti-lowcode-base-primary-color-2);
+  --ti-lowcode-canvas-rect-border-color: var(--te-common-border-checked);
+  --ti-lowcode-canvas-hover-line-in-bg-color: var(--te-base-rgba-25);
+  --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--te-common-color-error);
+  --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--te-base-rgba-26);
+  --ti-lowcode-canvas-choose-slot-border-color: var(--te-common-border-checked);
+  --ti-lowcode-canvas-choose-slot-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-canvas-corner-mark-left-color: var(--te-common-border-checked);
+  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-canvas-corner-mark-bottom-right-border-color: var(--te-common-border-hover);
+  --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: var(--te-common-bg-container);
+  --ti-lowcode-canvas-corner-mark-right-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-canvas-corner-mark-right-bg-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-canvas-select-corner-mark-left-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--te-common-bg-primary-checked);
 
   --ti-lowcode-canvas-footer-border-top-color: var(--ti-lowcode-common-border-color-4); // canvas 底部面包屑 边框色
   --ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-secondary-text-color); // canvas 宽度拖动手柄 背景色
   --ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色
   --ti-lowcode-canvas-tab-handle-color: var(--ti-lowcode-common-text-color-2); // canvas 宽度拖动手柄 两条竖线颜色
   --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-bg); // canvas 右键菜单背景
-  --ti-lowcode-canvas-menu-item-color: var(--ti-lowcode-base-gray-90); // 右键菜单文字颜色
-  --ti-lowcode-canvas-menu-item-hover-bg-color: #f5f5f5;
-  --ti-lowcode-canvas-menu-border-color: #ddd;
+  --ti-lowcode-canvas-menu-item-color: var(--te-common-text-primary); // 右键菜单文字颜色
+  --ti-lowcode-canvas-menu-item-hover-bg-color: var(--te-common-bg-container);
+  --ti-lowcode-canvas-menu-border-color: var(--te-common-border-default);
   --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-4);
 }
diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less
index eef6cef06..60c943fad 100644
--- a/packages/theme/light/index.less
+++ b/packages/theme/light/index.less
@@ -1,7 +1,5 @@
-@import '../common/base.less';
-@import '../common/global.less';
-@import './base.less';
 // 主题配置优先于公共配置
+@import './base.less';
 @import './variable.less';
 @import './tutorial.less';
 @import './help.less';
@@ -9,24 +7,12 @@
 @import './life-cycles.less';
 @import './settings.less';
 @import './metaComponent.less';
-@import './button.less';
-@import './tiny-collapse.less';
-@import './tiny-modal.less';
-@import './tiny-search.less';
-@import './tiny-grid.less';
 @import './events.less';
-@import './radio.less';
 @import './i18n.less';
 @import './pageManage.less';
 @import './materials.less';
 @import './tree.less';
 @import './canvas.less';
-@import './tiny-dialog-box.less';
-@import './tiny-input.less';
-@import './tiny-switch.less';
-@import './tiny-search.less';
-@import './tiny-numeric.less';
-@import './tiny-notify.less';
 @import './bridge.less';
 @import './toolbar.less';
 @import './datasource.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/radio.less b/packages/theme/light/radio.less
deleted file mode 100644
index b93c1e4e0..000000000
--- a/packages/theme/light/radio.less
+++ /dev/null
@@ -1,6 +0,0 @@
-.tiny-radio-group {
-  --ti-lowcode-tiny-radio-button-bg: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-tiny-radio-button-checked-bg: var(--ti-lowcode-base-bg-3);
-  --ti-lowcode-radio-button-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-radio-button-border-color: var(--ti-lowcode-base-secondary-button-border-color);
-}
diff --git a/packages/theme/light/settings.less b/packages/theme/light/settings.less
index 6bd21cb73..17b15c117 100644
--- a/packages/theme/light/settings.less
+++ b/packages/theme/light/settings.less
@@ -1,6 +1,6 @@
 // 右侧属性面板 css 变量
 #tiny-right-panel {
-  --ti-lowcode-setting-panel-bg-color: var(--ti-lowcode-base-bg-5);
+  --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);
@@ -37,10 +37,11 @@
   --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 {
   --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-property-active-color: var(--te-common-bg-primary-checked);
 }
diff --git a/packages/theme/light/tiny-collapse.less b/packages/theme/light/tiny-collapse.less
deleted file mode 100644
index 84df15bb4..000000000
--- a/packages/theme/light/tiny-collapse.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.tiny-collapse {
-  --ti-lowcode-collapse-item-header-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-collapse-item-header-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-collapse-item-header-active-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-collapse-item-bg-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-collapse-item-content-color: var(--ti-lowcode-base-text-color);
-}
diff --git a/packages/theme/light/tiny-dialog-box.less b/packages/theme/light/tiny-dialog-box.less
deleted file mode 100644
index 25f4c180b..000000000
--- a/packages/theme/light/tiny-dialog-box.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.tiny-dialog-box__wrapper {
-  --ti-lowcode-dialog-box-bg-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-dialog-close-btn-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-dialog-close-btn-hover-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-dialog-box-body-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-dialog-header-color: var(--ti-lowcode-base-text-color);
-}
diff --git a/packages/theme/light/tiny-grid.less b/packages/theme/light/tiny-grid.less
deleted file mode 100644
index a6db2b09a..000000000
--- a/packages/theme/light/tiny-grid.less
+++ /dev/null
@@ -1,24 +0,0 @@
-.tiny-grid {
-  --ti-lowcode-tiny-grid-header-color: var(--ti-lowcode-toolbar-breadcrumb-color);
-  --ti-lowcode-tiny-grid-header-color-bg: #f2f2f2;
-  --ti-lowcode-tiny-grid-row-hover-bg: #f2f5fc;
-  // 表格checkbox非选中时边框颜色
-  --ti-lowcode-tiny-grid-checkbox-border-color: transparent;
-  // 表格checkbox选中时边框颜色
-  --ti-lowcode-tiny-grid-checkbox-checked-border-color: transparent;
-  // 表格checkbox选中时背景颜色
-  --ti-lowcode-tiny-grid-checkbox-checked-bg-color: transparent;
-  // 表格checkbox未选中时图标颜色
-  --ti-lowcode-tiny-grid-checkbox-svg-color: #c2c2c2;
-  // 表格radio选中时颜色
-  --ti-lowcode-tiny-radio-selected-svg-color: var(--ti-lowcode-common-primary-text-color);
-  // ----斑马纹表格----
-  // 斑马纹表格单行背景颜色
-  --ti-lowcode-stripe-grid-list-n-bg-color: var(--ti-lowcode-base-bg-5);
-  // 斑马纹表格双行背景颜色
-  --ti-lowcode-stripe-grid-list-2n-bg-color: var(--ti-lowcode-base-bg-5);
-  // 斑马纹表格鼠标悬浮时背景颜色
-  --ti-lowcode-stripe-grid-list-item-hover-bg: var(--ti-lowcode-base-bg);
-  // 斑马纹表格头部字体颜色
-  --ti-lowcode-stripe-grid-header-text-color: #595959;
-}
diff --git a/packages/theme/light/tiny-input.less b/packages/theme/light/tiny-input.less
deleted file mode 100644
index 4c0984357..000000000
--- a/packages/theme/light/tiny-input.less
+++ /dev/null
@@ -1,24 +0,0 @@
-.tiny-input {
-  // input 禁用边框色
-  --ti-lowcode-input-disabled-border-color: var(--ti-lowcode-base-gray-30);
-  --ti-lowcode-input-disabled-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-input-border-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-input-bg-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-input-placeholder-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-input-color: var(--ti-lowcode-base-text-color);
-  // input框focus 获焦时边框颜色
-  --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-input-hover-border-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-input-error-border-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-input-error-bg-color: rgba(242, 48, 48, 0.1);
-}
-
-.tiny-textarea {
-  --ti-lowcode-textarea-border-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-textarea-hover-border-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-textarea-input-bg-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-textarea-input-color: var(--ti-lowcode-base-text-color);
-}
-.tiny-form-item__label {
-  --ti-lowcode-input-label-color: var(--ti-lowcode-base-text-color-1);
-}
diff --git a/packages/theme/light/tiny-modal.less b/packages/theme/light/tiny-modal.less
deleted file mode 100644
index 6b6068c47..000000000
--- a/packages/theme/light/tiny-modal.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.tiny-modal {
-  --ti-lowcode-modal-close-btn-color: var(--ti-lowcode-base-text-color-3);
-  --ti-lowcode-modal-close-btn-hover-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-modal-content-color: var(--ti-lowcode-base-text-color-1);
-}
diff --git a/packages/theme/light/tiny-notify.less b/packages/theme/light/tiny-notify.less
deleted file mode 100644
index 6dbb0f86c..000000000
--- a/packages/theme/light/tiny-notify.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.tiny-notify {
-  // notify 样式
-  --ti-lowcode-notify-close-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-notify-close-hover-color: var(--ti-lowcode-base-gray-90);
-}
diff --git a/packages/theme/light/tiny-numeric.less b/packages/theme/light/tiny-numeric.less
deleted file mode 100644
index 7ced7418d..000000000
--- a/packages/theme/light/tiny-numeric.less
+++ /dev/null
@@ -1,4 +0,0 @@
-div.tiny-numeric {
-  --ti-lowcode-tiny-numeric-icon-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-tiny-numeric-icon-hover-color: var(--ti-lowcode-base-gray-50);
-}
diff --git a/packages/theme/light/tiny-search.less b/packages/theme/light/tiny-search.less
deleted file mode 100644
index 29f9851d0..000000000
--- a/packages/theme/light/tiny-search.less
+++ /dev/null
@@ -1,14 +0,0 @@
-.tiny-search {
-  // 搜索框图标颜色
-  --ti-lowcode-search-icon-color: #808080;
-  // 搜索框图标悬浮时颜色
-  --ti-lowcode-search-hover-icon-color: #191919;
-
-  // tinysearch  背景色
-  --ti-lowcode-component-search-bg: var(--ti-lowcode-base-bg-5);
-
-  // 搜索框hover背景色
-  --ti-lowcode-search-hover-bg: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-search-input-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-search-input-placeholder-color: var(--ti-lowcode-base-gray-50);
-}
diff --git a/packages/theme/light/tiny-switch.less b/packages/theme/light/tiny-switch.less
deleted file mode 100644
index f0590cade..000000000
--- a/packages/theme/light/tiny-switch.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.tiny-switch {
-  --ti-lowcode-tiny-switch-bg-color: #c2c2c2;
-  --ti-lowcode-tiny-switch-checked-bg-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-tiny-switch-dot-bg: var(--ti-lowcode-base-bg-5);
-}
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..9d1d8a562 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;
@@ -47,9 +46,9 @@
   // svgButton
   --ti-lowcode-component-svg-button-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-component-svg-button-hover-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-component-svg-button-hover-bg-color: rgba(0, 0, 0, 0.05);
+  --ti-lowcode-component-svg-button-hover-bg-color: var(--te-common-bg-prompt);
   --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-component-svg-button-active-bg-color: rgba(0, 0, 0, 0.05);
+  --ti-lowcode-component-svg-button-active-bg-color: var(--te-common-bg-prompt);
 
   // 关闭按钮
   --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-base-text-color); // 关闭按钮默认颜色
@@ -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);
 }