feat(theme/datasource&setting): change datasource and setting panel theme variable

Author: wenmine

packages/configurator/src/code-list-configurator/CodeListConfigurator.vue

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

packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue

@@ -195,8 +195,8 @@ export default {
     width: 24px;
     height: 24px;
     font-size: 16px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-    background: var(--ti-lowcode-canvas-wrap-bg);
+    color: var(--te-common-text-secondary);
+    background: var(--te-common-bg-container);
     border: 1px solid var(--ti-lowcode-left-button-border-color);
     border-radius: 2px;
     display: inline-flex;
@@ -223,7 +223,7 @@ export default {
     border: 1px solid var(--ti-lowcode-optionitem-border-color);
     background: var(--ti-lowcode-optionitem-background-color);
     margin-bottom: -1px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     padding: 7px;
     display: grid;
     grid-template-columns: 3fr auto;

packages/configurator/src/input-configurator/InputConfigurator.vue

@@ -66,7 +66,7 @@ export default {
   font-size: 16px;
   &:hover {
     cursor: pointer;
-    color: var(--ti-lowcode-dialog-font-color);
+    color: var(--te-common-text-primary);
   }
 }
 </style>

packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue

@@ -268,7 +268,7 @@ export default {
       box-sizing: border-box;
       width: 48px;
       border: 1px solid var(--ti-lowcode-tabs-border-color);
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
       border-radius: 4px;
       padding: 4px;
       margin: 0 4px 4px 4px;
@@ -313,13 +313,13 @@ export default {
     justify-content: center;
     align-items: center;
     display: flex;
-    background: var(--ti-lowcode-canvas-wrap-bg);
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    background: var(--te-common-bg-container);
+    color: var(--te-common-text-secondary);
     transition: none;
   }
 
   :deep(.splitpanes__splitter) {
-    background: var(--ti-lowcode-toolbar-view-hover-bg);
+    background: var(--te-common-bg-container);
     border-left: var(--ti-lowcode-tabs-border-color);
   }
 
@@ -328,7 +328,7 @@ export default {
 
     .customize {
       margin-bottom: 8px;
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
     }
   }
 }

packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue

@@ -107,15 +107,15 @@ export default {
   padding-right: 20px;
   width: 136px;
   cursor: pointer;
-  background: var(--ti-lowcode-tabs-bg);
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  background: var(--te-common-bg-prompt);
+  color: var(--te-common-text-secondary);
   border: 1px solid var(--ti-lowcode-tabs-active-bg);
   border-radius: 3px;
   .icon-box {
     border-right: 1px solid var(--ti-lowcode-tabs-active-bg);
     padding: 4px 8px;
     .tiny-svg {
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
       font-size: 14px;
     }
   }

packages/configurator/src/slider-configurator/SliderConfigurator.vue

@@ -95,22 +95,22 @@ export default {
     height: 3px;
     width: 100%;
     border-radius: 2px;
-    background-color: var(--ti-lowcode-canvas-wrap-bg);
+    background-color: var(--te-common-bg-container);
     .tiny-slider__handle {
       width: 10px;
       height: 10px;
       margin: -4px -5px 0 -5px;
       border-radius: 50%;
       border: none;
       cursor: ew-resize;
-      background-color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      background-color: var(--te-common-text-secondary);
       box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 0px 0.5px;
     }
     .tiny-slider__range {
       height: 3px;
       border-radius: 3px;
       margin-top: 0;
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
     }
 
     .tiny-slider__tips {

packages/configurator/src/slot-configurator/SlotConfigurator.vue

@@ -141,7 +141,7 @@ export default {
   }
   .slot-name {
     width: 30%;
-    color: var(--ti-lowcode-dialog-font-color);
+    color: var(--te-common-text-primary);
     font-size: 12px;
     display: flex;
     justify-content: space-between;

packages/engine-cli/template/designer/src/configurators/MyInputConfigurator.vue

@@ -57,7 +57,7 @@ export default {
   font-size: 16px;
   &:hover {
     cursor: pointer;
-    color: var(--ti-lowcode-dialog-font-color);
+    color: var(--te-common-text-primary);
   }
 }
 </style>

packages/plugins/datasource/src/DataSourceField.vue

@@ -186,10 +186,10 @@ export default {
         align-items: center;
 
         &.field-row-add {
-          color: var(--ti-lowcode-datasource-json-border-colorr);
+          color: var(--ti-lowcode-datasource-json-border-color);
 
           svg {
-            color: var(--ti-lowcode-datasource-json-border-colorr);
+            color: var(--ti-lowcode-datasource-json-border-color);
           }
         }
       }

packages/plugins/datasource/src/DataSourceList.vue

@@ -152,7 +152,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      color: var(--ti-lowcode-base-gray-90);
+      color: var(--te-common-text-primary);
       .item-name {
         display: flex;
         align-items: center;