feat: variable convergence in tree

opentiny · Jan 27, 2025 · 80e621b · 80e621b
1 parent 5548442
commit 80e621b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/packages/plugins/tree/index.js b/packages/plugins/tree/index.js
@@ -12,6 +12,7 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta.js'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,

diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
@@ -308,12 +308,12 @@ export default {
     height: calc(100% - 38px);
     overflow-y: scroll;
     padding-top: 12px;
-    border-top: 1px solid var(--ti-lowcode-tree-border-color);
+    border-top: 1px solid var(--te-tree-border-color);
 
     .tree-handle {
       font-size: var(--te-base-font-size-2);
       svg {
-        fill: var(--te-common-icon-secondary);
+        fill: var(--te-tree-icon-color);
       }
     }
   }
@@ -340,22 +340,22 @@ export default {
     line-height: inherit;
   }
   :deep(.high-light-node) {
-    background: var(--te-common-bg-container) !important;
+    background: var(--te-tree-active-bg-color) !important;
 
     :deep(.eyeOpen) {
       display: block !important;
     }
   }
   :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__column) {
-    color: var(--te-common-text-primary);
+    color: var(--te-tree-text-color);
     padding: 0 12px;
     height: 24px !important;
     line-height: 24px;
     .tree-content {
       font-size: 12px;
     }
     .node-isblock {
-      color: var(--te-common-color-prompt-secondary);
+      color: var(--te-tree-block-text-color);
     }
   }
 }

diff --git a/packages/plugins/tree/src/styles/vars.less b/packages/plugins/tree/src/styles/vars.less
@@ -0,0 +1,7 @@
+:root {
+  --te-tree-border-color: var(--te-common-border-divider);
+  --te-tree-icon-color: var(--te-common-icon-secondary);
+  --te-tree-active-bg-color: var(--te-common-bg-container);
+  --te-tree-text-color: var(--te-common-text-primary);
+  --te-tree-block-text-color: var(--te-common-color-prompt-secondary);
+}