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

Author: wenmine

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;