feat: variable convergence in js/schema/mate/page

opentiny · Jan 27, 2025 · cc309fe · cc309fe
1 parent a2883f1
commit cc309fe
Show file tree

Hide file tree

Showing 25 changed files with 169 additions and 108 deletions.
diff --git a/packages/plugins/materials/index.js b/packages/plugins/materials/index.js
@@ -18,6 +18,7 @@ import MaterialBlock from './src/meta/block'
 import MaterialComponent from './src/meta/component'
 import MaterialHeader from './src/components/header/Main.vue'
 import { basePropertyOptions } from './src/js/options'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,

diff --git a/packages/plugins/materials/src/meta/block/src/BlockDetail.vue b/packages/plugins/materials/src/meta/block/src/BlockDetail.vue
@@ -114,24 +114,22 @@ export default {
 <style lang="less" scoped>
 .block-detail-panel {
   width: 228px;
-  background-color: var(--te-common-bg-container);
+  background-color: var(--te-materials-block-detail-bg-color);
   border-radius: 3px;
 
   .block-detail-title {
     font-size: 14px;
-    color: var(--ti-lowcode-toolbar-icon-color);
+    color: var(--te-materials-block-detail-text-color);
     padding: 10px 8px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid var(--te-common-border-default);
+    border-bottom: 1px solid var(--te-materials-block-detail-border-color);
 
     .block-detail-icon {
       width: 20px;
       height: 20px;
-      color: var(--ti-lowcode-toolbar-title-color);
-      background: var(--te-common-bg-container);
-      border: 1px solid var(--te-common-border-default);
+      color: var(--te-materials-block-detail-icon-color);
       font-size: 12px;
       cursor: pointer;
       display: inline-flex;
@@ -143,15 +141,15 @@ export default {
       right: 10px;
 
       &:hover {
-        color: var(--ti-lowcode-toolbar-icon-color);
-        background: var(--ti-lowcode-icon-hover-bg);
+        color: var(--te-materials-block-detail-icon-hover-color);
+        background: var(--te-materials-block-detail-icon-hover-bg-color);
       }
     }
   }
 
   .block-detail-content {
     &:not(:last-child) {
-      border-bottom: 1px solid var(--te-common-border-default);
+      border-bottom: 1px solid var(--te-materials-block-detail-border-color);
     }
 
     .block-detail-history {
@@ -160,20 +158,20 @@ export default {
 
     .block-detail-item {
       padding: 8px 12px;
-      color: var(--te-common-text-primary);
+      color: var(--te-materials-block-detail-text-color);
       font-size: 12px;
       span {
         margin-right: 4px;
       }
 
       .block-item-history {
-        color: var(--ti-lowcode-toolbar-title-color);
+        color: var(--te-materials-block-detail-text-color);
         margin-top: 4px;
       }
     }
 
     .block-detail-show-more {
-      color: var(--ti-lowcode-node-current-bg);
+      color: var(--te-materials-block-detail-text-emphasize-color);
       cursor: pointer;
     }
 

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
@@ -408,7 +408,7 @@ export default {
   }
   &.block-editing-option {
     padding: 0;
-    border-bottom: 1px solid var(--ti-lowcode-materials-block-group-item-border-color);
+    border-bottom: 1px solid var(--te-materials-block-group-item-border-color);
     :deep(.tiny-input__inner) {
       border-color: transparent;
       width: 180px;
@@ -419,14 +419,14 @@ export default {
       margin-left: 0;
     }
     :deep(svg) {
-      color: var(--ti-lowcode-component-svg-button-color);
+      color: var(--te-materials-block-group-svg-color);
     }
     :deep(.tiny-button) {
       padding: 0 2px;
     }
   }
   &.show-underline {
-    border-bottom: 1px solid var(--ti-lowcode-materials-block-group-item-border-color);
+    border-bottom: 1px solid var(--te-materials-block-group-item-border-color);
   }
   .block-option-content {
     display: flex;
@@ -462,27 +462,17 @@ export default {
   width: 220px;
   height: 108px;
   box-sizing: border-box;
-  background-color: var(--ti-lowcode-materials-block-group-delete-popover-bg-color);
   padding: 6px;
 
-  &[x-placement^='right'] {
-    .popper__arrow {
-      &,
-      &::after {
-        border-right-color: var(--te-common-bg-container);
-      }
-    }
-  }
-
   .popper-confirm-header {
     font-size: var(--te-base-font-size-1);
-    color: var(--te-common-text-primary);
+    color: var(--te-materials-block-group-popper-title-color);
     font-weight: var(--te-base-font-weight-7);
     margin-bottom: 12px;
   }
   .popper-confirm-content {
     font-size: 12px;
-    color: var(--te-common-text-secondary);
+    color: var(--te-materials-block-group-popper-content-color);
   }
   .popper-confirm-footer {
     text-align: right;

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
@@ -74,7 +74,7 @@ export default {
   .icon-wrap {
     width: 20px;
     height: 20px;
-    color: var(--ti-lowcode-text-color);
+    color: var(--te-materials-block-group-arrange-icon-color);
     font-size: 16px;
     border-radius: 2px;
     cursor: pointer;
@@ -83,10 +83,10 @@ export default {
     align-items: center;
     transition: 0.3s;
     &:hover {
-      color: var(--te-common-text-checked);
+      color: var(--te-materials-block-group-arrange-icon-hover-color);
     }
     &.active {
-      color: var(--te-common-text-checked);
+      color: var(--te-materials-block-group-arrange-icon-active-color);
     }
   }
   .icon-wrap + .icon-wrap {

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
@@ -98,7 +98,7 @@ export default {
 
 <style lang="less" scoped>
 .block-add-filters {
-  color: var(--ti-lowcode-materials-block-filter-text-color);
+  color: var(--te-materials-block-filter-text-color);
   & > div {
     min-height: 24px;
   }
@@ -117,13 +117,13 @@ export default {
       align-items: center;
       justify-content: flex-start;
       width: 76px;
-      color: var(--te-common-text-secondary);
+      color: var(--te-materials-block-filter-text-color);
       border-radius: 2px;
     }
 
     .block-filters-item-value {
       flex: 1;
-      color: var(--te-common-text-primary);
+      color: var(--te-materials-block-filter-value-color);
       .block-filters-value-item {
         cursor: pointer;
         display: inline-block;
@@ -139,7 +139,7 @@ export default {
       :deep(.tiny-select.tiny-select .tiny-select__tags) {
         max-width: calc(100% - 24px) !important;
         .tiny-tag {
-          background-color: var(--te-common-bg-disabled);
+          background-color: var(--te-materials-block-filter-tag-bg-color);
         }
       }
     }

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue
@@ -78,11 +78,11 @@ export default {
 
 <style lang="less" scoped>
 .sort-text {
-  color: var(--te-common-text-secondary);
+  color: var(--te-materials-block-sort-text-color);
   margin-right: 6px;
 }
 .sort-caret {
-  color: var(--te-common-text-secondary);
+  color: var(--te-materials-block-sort-text-color);
   cursor: pointer;
 }
 

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
@@ -194,7 +194,7 @@ export default {
       margin-left: 8px;
     }
     .footer-text {
-      color: var(--te-common-text-secondary);
+      color: var(--te-materials-block-transfer-footer-text-color);
     }
   }
 }

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue
@@ -44,17 +44,17 @@ export default {
 <style lang="less" scoped>
 .block-add-transfer-panel {
   height: 100%;
-  border: 1px solid var(--te-common-border-default);
+  border: 1px solid var(--te-materials-block-transfer-border-color);
   border-radius: 6px;
   overflow: hidden;
-  background-color: var(--ti-lowcode-materials-block-transfer-bg-color);
+  background-color: var(--te-materials-block-transfer-bg-color);
 
   .panel-header {
-    color: var(--ti-lowcode-materials-block-transfer-header-text-color);
+    color: var(--te-materials-block-transfer-header-text-color);
     padding: 10px;
     display: flex;
     justify-content: space-between;
-    background-color: var(--ti-lowcode-materials-block-transfer-header-bg-color);
+    background-color: var(--te-materials-block-transfer-header-bg-color);
   }
 
   .panel-body {

diff --git a/packages/plugins/materials/src/meta/block/src/BlockPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
@@ -173,7 +173,7 @@ export default {
   flex-direction: column;
   .tiny-search {
     padding: 0 12px 12px 12px;
-    border-bottom: 1px solid var(--ti-lowcode-plugin-panel-header-border-bottom-color);
+    border-bottom: 1px solid var(--te-materials-block-panel-border-color);
     :deep(.tiny-input__inner) {
       height: 30px;
     }

diff --git a/packages/plugins/materials/src/meta/block/src/BlockVersionSelect.vue b/packages/plugins/materials/src/meta/block/src/BlockVersionSelect.vue
@@ -141,22 +141,4 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
-.version-list-panel {
-  :deep(.plugin-setting-header) {
-    color: var(--ti-lowcode-component-block-version-list-panel-title-color);
-  }
-}
-.close-icon {
-  margin-left: 16px;
-}
-.tiny-button.tiny-button {
-  &.fallback-btn {
-    min-width: unset;
-    padding: 0;
-  }
-  &.tiny-button--text.is-disabled {
-    color: var(--ti-button-text-color-disabled);
-  }
-}
-</style>
+<style lang="less" scoped></style>
diff --git a/packages/plugins/materials/src/meta/component/src/Main.vue b/packages/plugins/materials/src/meta/component/src/Main.vue
@@ -143,18 +143,18 @@ export default {
   .component-group {
     display: grid;
     width: 100%;
-    color: var(--ti-lowcode-materials-component-list-color);
+    color: var(--te-materials-component-list-color);
 
     .component-item {
       padding: var(--te-common-vertical-form-label-spacing) 0 var(--te-common-vertical-form-label-spacing);
       margin-bottom: var(--te-common-vertical-form-label-spacing);
       text-align: center;
       user-select: none;
       cursor: move;
-      background: var(--te-common-bg-default);
+      background: var(--te-materials-component-list-item-bg-color);
 
       &:hover {
-        background: var(--te-common-bg-container);
+        background: var(--te-materials-component-list-item-hover-bg-color);
         border-radius: 4px;
       }
 
@@ -164,7 +164,7 @@ export default {
         svg {
           font-size: 40px;
           vertical-align: middle;
-          color: var(--te-common-icon-secondary);
+          color: var(--te-materials-component-list-item-icon-color);
           overflow: hidden;
         }
       }

diff --git a/packages/plugins/materials/src/styles/vars.less b/packages/plugins/materials/src/styles/vars.less
@@ -0,0 +1,44 @@
+:root {
+  // 组件列表  组件名称颜色
+  --te-materials-component-list-color: var(--te-common-text-primary);
+  --te-materials-component-list-item-bg-color: var(--te-common-bg-default);
+  --te-materials-component-list-item-hover-bg-color: var(--te-common-bg-container);
+  --te-materials-component-list-item-icon-color: var(--te-common-icon-secondary);
+
+  // 区块详情
+  --te-materials-block-detail-bg-color: var(--te-common-bg-default);
+  --te-materials-block-detail-text-color: var(--te-common-text-primary);
+  --te-materials-block-detail-border-color: var(--te-common-border-divider);
+  --te-materials-block-detail-icon-color: var(--te-common-icon-primary);
+  --te-materials-block-detail-icon-hover-color: var(--te-common-icon-primary);
+  --te-materials-block-detail-icon-hover-bg-color: var(--te-common-bg-prompt);
+  --te-materials-block-detail-text-emphasize-color: var(--te-common-text-emphasize);
+
+  // 区块分组
+  --te-materials-block-group-item-border-color: var(--te-common-border-active);
+  --te-materials-block-group-popper-title-color: var(--te-common-text-primary);
+  --te-materials-block-group-popper-content-color: var(--te-common-text-secondary);
+  --te-materials-block-group-svg-color: var(--te-common-icon-primary);
+
+  --te-materials-block-group-arrange-icon-color: var(--te-common-icon-secondary);
+  --te-materials-block-group-arrange-icon-hover-color: var(--te-common-text-checked);
+  --te-materials-block-group-arrange-icon-active-color: var(--te-common-text-checked);
+
+  // 添加区块筛选模块字体颜色
+  --te-materials-block-filter-text-color: var(--te-common-text-secondary);
+  --te-materials-block-filter-value-color: var(--te-common-text-primary);
+  --te-materials-block-filter-tag-bg-color: var(--te-common-bg-disabled);
+
+  --te-materials-block-sort-text-color: var(--te-common-text-secondary);
+
+  // 添加区块穿梭框面板背景颜色
+  --te-materials-block-transfer-bg-color: var(--te-common-bg-default);
+  --te-materials-block-transfer-border-color: var(--te-common-border-default);
+  // 添加区块穿梭框面板头部字体颜色
+  --te-materials-block-transfer-header-text-color: var(--te-common-text-primary);
+  // 添加区块穿梭框面板头部背景颜色
+  --te-materials-block-transfer-header-bg-color: var(--te-common-bg-container);
+  --te-materials-block-transfer-footer-text-color: var(--te-common-text-secondary);
+
+  --te-materials-block-panel-border-color: var(--te-common-border-divider);
+}
diff --git a/packages/plugins/page/index.js b/packages/plugins/page/index.js
@@ -14,6 +14,7 @@ import entry, { api } from './src/Main.vue'
 import metaData from './meta.js'
 import { PageService } from './src/composable'
 import PageGeneral from './src/PageGeneral.vue'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,