feat(refactor/theme): change incorrect css variables to the common va…

packages/common/component/BlockLinkEvent.vue

@@ -198,22 +198,22 @@ export default {
   padding: 3px 0;
   border: 1px solid var(--ti-lowcode-tabs-border-color);
   border-radius: 3px;
-  background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+  background-color: var(--te-common-bg-container);
   box-shadow: 0 1px 15px 0 rgb(0 0 0 / 20%);
   display: flex;
   flex-direction: column;
   .menu-item {
     font-size: 12px;
     display: flex;
     justify-content: space-between;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     padding: 6px 15px;
     &:not(:last-child) {
       border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
     }
     &:hover {
       color: var(--ti-lowcode-toolbar-icon-color);
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
     }
 
     .link-item {

packages/common/component/ConfigCollapse.vue

@@ -40,10 +40,10 @@ export default {
         transition: 0.3s;
 
         &:hover {
-          color: var(--ti-lowcode-toolbar-icon-color);
+          color: var(--te-common-icon-primary);
 
           svg {
-            color: var(--ti-lowcode-toolbar-icon-color);
+            color: var(--te-common-icon-primary);
           }
         }
       }

packages/common/component/ConfigItem.vue

@@ -678,7 +678,7 @@ export default {
     display: flex;
     align-items: center;
     margin-top: 8px;
-    color: var(--ti-lowcode-common-error-color);
+    color: var(--te-common-color-error);
     font-size: 12px;
     .failure-icon {
       width: 16px;

packages/common/component/EmptyTip.vue

@@ -33,12 +33,12 @@ export default {
 <style scoped lang="less">
 .tip {
   display: flex;
-  border: 1px solid var(--ti-lowcode-toolbar-border-color);
-  border-left: 2px solid var(--ti-lowcode-success-border-color);
+  border: 1px solid var(--te-common-border-default);
+  border-left: 2px solid var(--te-common-color-success);
   border-radius: 0 4px 4px 0;
   align-items: center;
   padding: 8px 12px;
-  background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+  background-color: var(--te-common-bg-container);
 
   .left {
     width: 20px;
@@ -52,9 +52,9 @@ export default {
   }
 }
 .waring {
-  border-left: 2px solid var(--ti-lowcode-description-warning-color);
+  border-left: 2px solid var(--te-common-color-warning);
 }
 .error {
-  border-left: 2px solid var(--ti-lowcode-description-error-color);
+  border-left: 2px solid var(--te-common-color-error);
 }
 </style>

packages/common/component/MetaCodeEditor.vue

@@ -325,7 +325,7 @@ export default {
     margin-left: 4px;
     flex-shrink: 0;
     cursor: pointer;
-    color: var(--ti-lowcode-common-text-main-color);
+    color: var(--te-common-text-secondary);
   }
 }
 

packages/common/component/MetaDescription.vue

@@ -92,34 +92,34 @@ export default {
   padding-block: 4px;
   padding-inline: 11px 8px;
   width: auto;
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
-  background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+  color: var(--te-common-text-secondary);
+  background-color: var(--te-common-bg-container);
   box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.3);
   &.warning {
-    color: var(--ti-lowcode-description-warning-color);
+    color: var(--te-common-color-warning);
   }
   &.error {
-    color: var(--ti-lowcode-description-error-color);
+    color: var(--te-common-color-error);
   }
 
   &.border {
-    border-top: 1px solid var(--ti-lowcode-collapse-active-border-color);
-    border-right: 1px solid var(--ti-lowcode-collapse-active-border-color);
-    border-bottom: 1px solid var(--ti-lowcode-collapse-active-border-color);
+    border-top: 1px solid var(--te-common-border-default);
+    border-right: 1px solid var(--te-common-border-default);
+    border-bottom: 1px solid var(--te-common-border-default);
   }
   .content {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
   }
   .footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     .footer-text {
       cursor: pointer;
       &.link {
         display: block;
-        color: var(--ti-lowcode-text-link-color);
+        color: var(--te-common-text-link);
         &:hover {
           text-decoration: underline;
         }

packages/common/component/MetaListActions.vue

@@ -35,7 +35,7 @@ export default {
 .actionsItem {
   display: inline-block;
   padding: 5px 5px;
-  background-color: var(--ti-lowcode-canvas-wrap-bg);
+  background-color: var(--te-common-bg-container);
   &:not(:last-child) {
     border-right: 1px solid var(--ti-lowcode-optionitem-border-color);
   }

packages/common/component/MetaListItem.vue

@@ -249,7 +249,7 @@ export default {
   border-right: none;
   background: var(--ti-lowcode-meta-list-item-bg-color);
   margin-bottom: -1px;
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  color: var(--te-common-text-primary);
   &.active-item {
     background-color: var(--te-common-bg-container);
   }
@@ -264,7 +264,7 @@ export default {
         margin-right: 5px;
         font-size: 12px;
         opacity: 0.4;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-primary);
         &:hover {
           cursor: pointer;
           opacity: 1;

packages/common/component/MetaModal.vue

@@ -74,7 +74,7 @@ export default {
 
   .modal-content {
     padding: 8px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     border: 1px solid var(--ti-lowcode-tabs-border-color);
     border-radius: 4px;
     background-color: var(--ti-lowcode-toolbar-bg);

packages/common/component/MetaModalItem.vue

@@ -123,7 +123,7 @@ export default {
       justify-content: space-between;
       align-items: center;
       padding: 10px 0;
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
 
       .header-title {
         font-size: 14px;

packages/common/component/MonacoEditor.vue

@@ -153,7 +153,7 @@ export default {
   right: var(--base-right-panel-width);
   z-index: 100;
   padding: 10px 16px 16px 16px;
-  background-color: var(--ti-lowcode-common-component-bg);
+  background-color: var(--te-common-bg-default);
   height: auto !important;
 }
 

packages/common/component/PluginBlockList.vue

@@ -437,7 +437,7 @@ export default {
   gap: 12px;
   overflow-y: auto;
   overflow-x: hidden;
-  color: var(--ti-lowcode-common-secondary-text-color);
+  color: var(--te-common-text-secondary);
 
   .block-item {
     display: flex;
@@ -519,7 +519,7 @@ export default {
     }
 
     &.is-active {
-      background: var(--ti-lowcode-component-block-list-item-active-bg, --ti-lowcode-canvas-wrap-bg);
+      background: var(--ti-lowcode-component-block-list-item-active-bg);
     }
 
     &.is-disabled {
@@ -601,7 +601,7 @@ export default {
       }
 
       .block-detail-icon {
-        color: var(--ti-lowcode-base-gray-50);
+        color: var(--te-common-icon-secondary);
         &:hover {
           cursor: pointer;
           color: var(--ti-lowcode-component-block-list-setting-btn-hover-color);

packages/common/component/PluginSetting.vue

@@ -128,7 +128,7 @@ export default {
   top: 0;
   width: var(--base-collection-panel-width);
   height: 100%;
-  border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
+  border-right: 1px solid var(--te-common-border-default);
   background: var(--ti-lowcode-plugin-setting-panel-bg, --ti-lowcode-toolbar-bg);
   overflow: hidden;
   border-left: 1px solid var(--ti-lowcode-plugin-panel-header-border-bottom-color);

packages/common/component/ToolbarBase.vue

@@ -67,7 +67,7 @@ export default {
 </script>
 <style scoped>
 .split-line {
-  color: var(--ti-lowcode-toolbar-border-color);
+  color: var(--te-common-border-default);
   margin: 0 4px;
   font-size: 14px;
 }

packages/common/component/VideoGuide.vue

@@ -50,7 +50,7 @@ export default {
 
 <style lang="less" scoped>
 .block-guide {
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  color: var(--te-common-text-secondary);
   line-height: 2;
   border: none;
   border-color: var(--ti-lowcode-block-video-tip-color);

packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue

@@ -176,17 +176,17 @@ const change = (item) => {
       color: var(--te-common-text-weaken);
 
       &:hover {
-        background-color: var(--ti-lowcode-base-gray-101);
-        color: var(--te-common-text-primary);
+        background-color: var(--te-common-bg-prompt);
+        color: var(--te-common-text-secondary);
         border-radius: 4px;
         .svg-icon {
           color: var(--te-common-text-primary);
         }
       }
 
       &.selected {
-        background-color: var(--ti-lowcode-base-gray-101);
-        color: var(--te-common-text-primary);
+        background-color: var(--te-common-bg-prompt);
+        color: var(--te-common-text-secondary);
         border-radius: 4px;
         .svg-icon {
           color: var(--te-common-text-primary);

packages/design-core/src/preview/src/Toolbar.vue

@@ -69,7 +69,7 @@ export default {
   width: 100%;
   height: var(--base-top-panel-height);
   text-align: center;
-  background-color: var(--ti-lowcode-common-layout-bg);
+  background-color: var(--te-common-bg-default);
   position: relative;
   z-index: 1001;
   border-bottom: 1px solid var(--ti-lowcode-toolbar-border-bottom-color);

packages/layout/src/DesignPlugins.vue

@@ -201,7 +201,7 @@ export default {
   width: var(--base-left-panel-width);
   height: calc(100vh - var(--base-top-panel-height));
   border-right: 1px solid var(--ti-lowcode-plugin-panel-border-right-color);
-  background: var(--ti-lowcode-common-component-bg);
+  background: var(--te-common-bg-default);
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -239,7 +239,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background: var(--ti-lowcode-common-layout-bg);
+  background: var(--te-common-bg-default);
   box-sizing: border-box;
   z-index: 1000;
   border-right: 1px solid var(--ti-lowcode-plugin-panel-border-right-color);
@@ -285,7 +285,7 @@ export default {
         position: relative;
 
         .item-icon {
-          color: var(--ti-lowcode-common-primary-color);
+          color: var(--te-common-text-checked);
         }
       }
 

packages/layout/src/DesignToolbars.vue

@@ -79,7 +79,7 @@ export default {
   width: 100%;
   height: var(--base-top-panel-height);
   text-align: center;
-  background-color: var(--ti-lowcode-common-layout-bg);
+  background-color: var(--te-common-bg-default);
   position: relative;
   z-index: 1001;
   border-bottom: 1px solid var(--ti-lowcode-toolbar-border-bottom-color);
@@ -137,7 +137,7 @@ export default {
         background: var(--ti-lowcode-toolbar-view-active-bg);
       }
       &.active {
-        color: var(--ti-lowcode-common-primary-color);
+        color: var(--te-common-text-checked);
       }
       &.disabled {
         cursor: not-allowed;

packages/layout/src/ToolbarCollapse.vue

@@ -80,7 +80,7 @@ export default {
 
     .empty-line {
       margin: 4px 0px;
-      border-top: 1px solid var(--ti-lowcode-canvas-wrap-bg);
+      border-top: 1px solid var(--te-common-bg-container);
     }
 
     .icon-hides {

packages/plugins/block/src/BlockConfig.vue

@@ -321,7 +321,7 @@ export default {
     line-height: 20px;
     padding-top: 0;
     padding-bottom: 0;
-    border: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
+    border: 1px solid var(--te-common-border-default);
   }
 
   .tiny-input {

packages/plugins/block/src/BlockEventList.vue

@@ -77,7 +77,7 @@ export default {
 }
 .add-button {
   :deep(.tiny-button) {
-    border: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
+    border: 1px solid var(--te-common-border-default);
   }
   .icon-plus {
     margin-right: 6px;

packages/plugins/block/src/BlockPropertyForm.vue

@@ -270,7 +270,7 @@ export default {
   display: inline-block;
   margin-top: 6px;
   font-size: 12px;
-  color: var(--ti-lowcode-common-primary-color);
+  color: var(--te-common-text-checked);
   cursor: pointer;
 
   .text {
@@ -296,8 +296,8 @@ export default {
   width: 280px;
   height: 100%;
   padding: 20px;
-  background-color: var(--ti-lowcode-common-component-bg);
-  border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
+  background-color: var(--te-common-bg-default);
+  border-right: 1px solid var(--te-common-border-default);
 }
 
 .config-list {

packages/plugins/block/src/BlockPropertyList.vue

@@ -90,7 +90,7 @@ export default {
     padding: 0 12px;
     width: 66px;
     margin-right: 5px;
-    border: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
+    border: 1px solid var(--te-common-border-default);
   }
   .plus-icon {
     width: 16px;

packages/plugins/block/src/Main.vue

@@ -507,9 +507,9 @@ export default {
   left: -6px;
   right: 0;
   padding: 8px 16px;
-  background-color: var(--ti-lowcode-component-search-bg);
   border-top: 1px solid var(--te-common-border-divider);
-  color: var(--ti-lowcode-component-block-list-item-color);
+  background-color: var(--te-common-bg-default);
+  color: var(--te-common-text-primary);
   display: flex;
   justify-content: space-between;
   :deep(.tiny-dropdown) {
@@ -527,7 +527,7 @@ export default {
   }
   .footer-layout {
     font-size: 12px;
-    color: var(--ti-lowcode-component-block-list-item-color);
+    color: var(--te-common-text-primary);
     .tiny-svg {
       cursor: pointer;
       margin-left: 8px;
@@ -570,7 +570,7 @@ export default {
     .popper__arrow {
       &,
       &::after {
-        border-right-color: var(--ti-lowcode-common-component-hover-bg);
+        border-right-color: var(--te-common-bg-container);
       }
     }
   }