feat: variable convergence in setting

packages/settings/design/src/App.vue

@@ -183,7 +183,7 @@ td {
   .source-code {
     --ti-lowcode-toolbar-bg: var(--ti-lowcode-mask-bg);
     .tiny-button {
-      --ti-button-info-normal-bg-color: var(--te-common-color-info);
+      --ti-button-info-normal-bg-color: #1476ff;
     }
   }
 }

packages/settings/design/src/components/ArrayConfigItemForm.vue

@@ -197,20 +197,20 @@ export default {
   cursor: pointer;
   display: flex;
   align-items: center;
-  color: var(--te-common-text-primary);
+  color: #191919;
   .config-title {
     margin-left: 6px;
   }
 }
 .config-item-form {
   :deep(.tiny-form-item) {
     .tiny-form-item__label {
-      color: var(--te-common-text-secondary);
+      color: #595959;
     }
     .tiny-form-item__content {
       .editor-warp {
-        --ti-lowcode-meta-codeEditor-border-color: var(--te-common-text-secondary);
-        --ti-lowcode-meta-codeEditor-color: var(--te-common-text-secondary);
+        --ti-lowcode-meta-codeEditor-border-color: #595959;
+        --ti-lowcode-meta-codeEditor-color: #595959;
       }
     }
   }

packages/settings/design/src/components/PropertyCanvas.vue

@@ -177,7 +177,7 @@ export default {
   .empty-group-tips {
     margin-top: 100px;
     text-align: center;
-    color: var(--te-common-text-weaken);
+    color: #808080;
     font-size: 12px;
     .empty-data-icon {
       width: 100px;
@@ -236,7 +236,7 @@ export default {
     .tiny-collapse-item {
       &.is-active {
         .tiny-collapse-item__header {
-          border-bottom: 1px solid var(--te-common-border-divider);
+          border-bottom: 1px solid #e6e6e6;
           height: 36px;
         }
       }
@@ -246,11 +246,11 @@ export default {
         align-items: center;
         justify-content: space-between;
         h6 {
-          color: var(--te-common-text-primary);
+          color: #191919;
         }
         .option-icon {
           display: inline-block;
-          color: var(--ti-lowcode-setting-plugin-icon-color);
+          color: #808080;
         }
         .option-tips + .option-tips {
           margin-left: 8px;
@@ -259,12 +259,12 @@ export default {
     }
 
     .tiny-collapse-item__header {
-      color: var(--te-common-text-secondary);
-      background-color: var(--te-common-bg-prompt);
+      color: #595959;
+      background-color: #e6e6e6;
       font-weight: 600;
 
       svg {
-        color: var(--te-common-text-secondary);
+        color: #595959;
         margin-right: 4px;
       }
     }
@@ -273,10 +273,10 @@ export default {
       display: flex;
       flex-wrap: wrap;
       padding: 0;
-      background: var(--ti-lowcode-tabs-active-bg);
+      background: #f3f3f3;
       border-top: none;
-      border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
-      color: var(--te-common-text-secondary);
+      border-bottom: 1px solid #dbdbdb;
+      color: #595959;
 
       .properties-item {
         padding: 3px 10px;
@@ -293,7 +293,7 @@ export default {
         .item-input {
           .meta-array-wrap {
             .top {
-              color: var(--te-common-text-secondary);
+              color: #595959;
             }
             .actions {
               display: none;
@@ -303,7 +303,7 @@ export default {
       }
       .item-container {
         .empty {
-          color: var(--te-common-text-secondary);
+          color: #595959;
         }
       }
     }

packages/settings/design/src/components/PropertyList.vue

@@ -110,10 +110,10 @@ export default {
   padding: 5px 10px;
   cursor: pointer;
   margin-bottom: 5px;
-  color: var(--te-common-text-primary);
+  color: #191919;
   padding: 7px 7px;
   list-style: none;
-  border: 1px solid var(--te-common-border-divider);
+  border: 1px solid #e6e6e6;
 
   &:hover {
     background: var(--ti-lowcode-common-hover-bg-color);

packages/settings/design/src/components/SettingPanel.vue

@@ -257,38 +257,38 @@ export default {
       font-size: 12px;
       flex-shrink: 0;
       margin-right: 10px;
-      color: var(--te-common-text-secondary);
+      color: #595959;
     }
   }
 
   h5 {
     font-size: 13px;
-    color: var(--te-common-text-primary);
+    color: #191919;
     margin: 20px 0;
   }
   .array-config-item {
     width: 100%;
     :deep(.list-group) {
       .option-item {
-        border-top: 1px solid var(--te-common-border-default);
+        border-top: 1px solid #dbdbdb;
       }
       .option-item:last-child {
-        border-bottom: 1px solid var(--te-common-border-default);
+        border-bottom: 1px solid #dbdbdb;
       }
       .item-icon {
-        color: var(--ti-lowcode-setting-plugin-icon-color);
+        color: #808080;
         fill: currentColor;
       }
       .item-text {
-        color: var(--te-common-text-primary);
+        color: #191919;
       }
     }
     .operate-tips-item + .operate-tips-item {
       margin-left: 8px;
     }
     .add-item {
       cursor: pointer;
-      color: var(--te-common-text-emphasize);
+      color: #1476ff;
       margin-top: 8px;
       .icon {
         margin-right: 4px;
@@ -310,7 +310,7 @@ export default {
       .item-label {
         width: 38%;
         word-break: break-all;
-        color: var(--te-common-text-secondary);
+        color: #595959;
       }
       .component-wrap {
         flex: 1;
@@ -382,7 +382,7 @@ export default {
         border-color: transparent;
         padding: 6px 10px;
         &:hover {
-          background-color: var(--te-common-bg-primary-checked);
+          background-color: #1476ff;
         }
       }
     }

packages/settings/events/index.js

@@ -15,6 +15,7 @@ import metaData from './meta'
 import { commonEvents } from './src/commonjs/events.js'
 import BindEventsDialogContent from './src/components/BindEventsDialogContent.vue'
 import BindEventsDialogSidebar from './src/components/BindEventsDialogSidebar.vue'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,

packages/settings/events/src/components/AdvanceConfig.vue

@@ -268,12 +268,12 @@ export default {
     align-items: center;
     display: flex;
     column-gap: 12px;
-    color: var(--ti-lowcode-events-advanced-config-color);
+    color: var(--te-events-advanced-config-text-color);
 
     label {
       width: 80px;
       word-break: keep-all;
-      color: var(--ti-lowcode-events-advanced-label-color);
+      color: var(--te-events-advanced-label-text-color);
       flex-shrink: 0;
     }
 
@@ -284,9 +284,9 @@ export default {
     }
     .binding-state {
       box-sizing: border-box;
-      background: var(--ti-lowcode-events-advanced-binding-state-bg-color);
-      color: var(--ti-lowcode-events-advanced-binding-state-color);
-      border: 1px solid var(--ti-lowcode-events-advanced-binding-state-border-color);
+      background: var(--te-events-advanced-binding-state-bg-color);
+      color: var(--te-events-advanced-binding-state-text-color);
+      border: 1px solid var(--te-events-advanced-binding-state-border-color);
       font-size: 12px;
       height: 30px;
       line-height: 22px;

packages/settings/events/src/components/BindEvents.vue

@@ -282,24 +282,24 @@ export default {
       }
     }
     .event-bind {
-      color: var(--ti-lowcode-events-event-bind-color);
+      color: var(--te-events-event-bind-text-color);
     }
     .bind-action-item {
       display: flex;
       justify-content: space-between;
       padding: 8px 12px;
       cursor: pointer;
-      color: var(--ti-lowcode-events-bind-action-item-color);
-      border-bottom: 1px solid var(--ti-lowcode-events-bind-action-item-border-color);
+      color: var(--te-events-bind-action-item-text-color);
+      border-bottom: 1px solid var(--te-events-bind-action-item-border-color);
       &:first-child {
-        border-top: 1px solid var(--ti-lowcode-events-bind-action-item-border-color);
+        border-top: 1px solid var(--te-events-bind-action-item-border-color);
       }
       &:hover {
-        background: var(--ti-lowcode-events-bind-action-item-hover-bg-color);
+        background: var(--te-events-bind-action-item-bg-color-hover);
       }
 
       .linked {
-        color: var(--ti-lowcode-events-bind-action-item-linked-color);
+        color: var(--te-events-bind-action-item-text-color-link);
       }
     }
   }
@@ -329,8 +329,8 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: var(--ti-lowcode-events-empty-action-bg-color);
-    color: var(--ti-lowcode-events-empty-action-color);
+    background-color: var(--te-events-empty-action-bg-color);
+    color: var(--te-events-empty-action-text-color);
     padding: 24px 18px;
     margin-top: var(--te-common-vertical-item-spacing-normal);
     .empty-action-icon {
@@ -349,20 +349,20 @@ export default {
   }
 }
 .bind-event-list {
-  color: var(--ti-lowcode-events-bind-event-list-color);
+  color: var(--te-events-bind-event-list-text-color);
 }
 .bind-event-list-item-notallow {
   cursor: not-allowed;
   pointer-events: none;
-  color: var(--ti-lowcode-events-bind-event-list-item-disabled-color);
+  color: var(--te-events-bind-event-list-item-text-color-disabled);
 }
 .bind-event-list-item {
   padding: 0 16px;
   margin: 0 -16px;
   line-height: 24px;
   &:hover {
     cursor: pointer;
-    background: var(--lowcode-events-bind-event-list-item-hover-bg-color);
+    background: var(--te-events-bind-event-list-item-bg-color-hover);
   }
 }
 </style>

packages/settings/events/src/components/BindEventsDialog.vue

@@ -249,8 +249,8 @@ export default {
 .bind-event-dialog-tip {
   padding: var(--te-common-vertical-item-spacing-normal) 14px;
   margin-bottom: var(--te-common-vertical-item-spacing-normal);
-  background-color: var(--te-common-bg-container);
-  color: var(--te-common-text-weaken);
+  background-color: var(--te-bind-event-dialog-tip-bg-color);
+  color: var(--te-bind-event-dialog-tip-text-color);
 }
 
 .bind-event-dialog-content {

packages/settings/events/src/components/BindEventsDialogContent.vue

@@ -114,19 +114,19 @@ export default {
   .content-right-top {
     .new-action-tip {
       margin: 8px 0;
-      color: var(--ti-lowcode-bind-event-dialog-new-action-tip-color);
+      color: var(--te-bind-event-dialog-tip-text-color);
     }
   }
   .content-right-bottom {
     .content-right-monaco {
-      border: 1px solid var(--ti-lowcode-bind-event-dialog-content-right-monaco-border-color);
+      border: 1px solid var(--te-bind-event-dialog-content-right-monaco-border-color);
       overflow: hidden;
       position: relative;
 
       .monaco-editor {
         width: 100%;
         height: 216px;
-        color: var(--te-common-text-secondary);
+        color: var(--te-bind-event-dialog-content-right-monaco-text-color);
       }
       .mark {
         width: 100%;
@@ -139,7 +139,7 @@ export default {
 
     .params-tip {
       margin: 8px 0;
-      color: var(--te-common-color-error);
+      color: var(--te-bind-event-dialog-danger-tip-text-color);
     }
   }
   .content-right-top .content-right-title,
@@ -148,17 +148,17 @@ export default {
     .set-params-tip {
       margin-top: 6px;
       font-weight: 400;
-      color: var(--te-common-text-weaken);
+      color: var(--te-bind-event-dialog-tip-text-color);
     }
   }
 
   .tip-error {
     .content-right-monaco {
-      border: 1px solid var(--te-common-color-error);
+      border: 1px solid var(--te-bind-event-dialog-danger-border-color);
     }
     .params-tip,
     .new-action-tip {
-      color: var(--te-common-color-error);
+      color: var(--te-bind-event-dialog-danger-tip-text-color);
     }
   }
 }