From 57da42f7b6e3f34a39faf98e88ba8823466ed90c Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Thu, 5 Dec 2024 16:37:17 +0800
Subject: [PATCH 1/2] feat(theme/baseVariable): change base variable and common
 variable

---
 .../src/configurators/MyInputConfigurator.vue |   2 +-
 .../container/src/components/CanvasAction.vue |  15 +-
 .../src/components/CanvasDivider.vue          |   4 +-
 .../src/components/CanvasResizeBorder.vue     |   2 +-
 .../src/components/shortCutPopover.vue        |  10 +-
 packages/canvas/layout/src/CanvasLayout.vue   |   2 +-
 packages/common/component/SearchEmpty.vue     |   3 +-
 .../src/components/inputs/ResetButton.vue     |   2 +-
 packages/theme/base/src/base.less             | 614 ++++++------------
 packages/theme/base/src/common.less           | 155 ++---
 packages/theme/base/src/component-common.less |  54 +-
 .../theme/base/src/page/base-config-page.less |  33 +-
 packages/theme/dark/canvas.less               |  43 +-
 packages/theme/dark/setting-style.less        |  11 +-
 packages/theme/light/canvas.less              |  17 +-
 packages/theme/light/setting-style.less       |  14 +-
 16 files changed, 400 insertions(+), 581 deletions(-)

diff --git a/designer-demo/src/configurators/MyInputConfigurator.vue b/designer-demo/src/configurators/MyInputConfigurator.vue
index 47a9b11e5..26dbd6be8 100644
--- a/designer-demo/src/configurators/MyInputConfigurator.vue
+++ b/designer-demo/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>
diff --git a/packages/canvas/container/src/components/CanvasAction.vue b/packages/canvas/container/src/components/CanvasAction.vue
index 04284bf0e..c3a2ba3f5 100644
--- a/packages/canvas/container/src/components/CanvasAction.vue
+++ b/packages/canvas/container/src/components/CanvasAction.vue
@@ -671,21 +671,8 @@ export default {
     }
   }
 }
-.short-cut-set.tiny-popper.tiny-popover {
-  background: var(--ti-lowcode-toolbar-bg);
+.short-cut-set.short-cut-set.tiny-popper.tiny-popover {
   padding: 10px;
-  .body label,
-  .header {
-    color: var(--ti-lowcode-dialog-font-color);
-    font-size: 12px;
-  }
-  .tiny-popover__title {
-    color: var(--ti-lowcode-dialog-font-color);
-  }
-}
-
-.short-cut-set.tiny-popper.tiny-popover[x-placement^='bottom'] .popper__arrow::after {
-  border-bottom-color: var(--ti-lowcode-toolbar-bg);
 }
 
 .drag-resize {
diff --git a/packages/canvas/container/src/components/CanvasDivider.vue b/packages/canvas/container/src/components/CanvasDivider.vue
index 9f0b9dcd5..0b333fcd1 100644
--- a/packages/canvas/container/src/components/CanvasDivider.vue
+++ b/packages/canvas/container/src/components/CanvasDivider.vue
@@ -215,7 +215,7 @@ export default {
     left: v-bind('state.horizontalLeft');
   }
   &:hover {
-    background-color: var(--ti-lowcode-common-primary-color);
+    background-color: var(--te-common-bg-primary-checked);
     .divider {
       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACbElEQVRIDZ2Vu2sVURCH9yZgbCxMsFFjKQkExScREgQtLISAXbS4GDu10fgHiL1gpxKDCLFRfICCCSpCwEiCYiNWFkYsImIRH4jgY/x+xzNy7t29614HvsycmfnN3j1nd5Nl0cysDrPwEV7DRVjn9Vaent7Y+wYvrWbUG/pJTIHsCzyBd1pg8v0NzcmC2kDswdkizIFmyKZCK4F+uWwGelxPfAx+wFPPpZ58JzyHX3DEa8TdoFmyesYf3ZKu+nd40nyJvGzEc+7JjYWK2aTn3JPXRTRzVhdYhjkvpp78KMieNeW7yGnPZYfSmsfktV3LHSSWoNVhro+CbTTvdzH+KGyI61batdSXdAcXQDYWBcGx1m2+ha/wHRZUwK+C9/ABtA3q6W7S+vadl6AH9LT8hAk4CKdAQtlJuBIis3340zE+gR+PsXqlkVYzNEsz/5wrQR/MQ2qfWYzHX72RWE+UnppPoP3vijUNVm9qCyz60rvSnXTAJtBjOwKr0wbWV8GtaDulkVYzdLbtGaLdINPed1ZVt3Mlf/21r8NVL1Cpj1+sM9IZvAK9uY8qCas2MfAGyPbC9RCZDVXVl/YxbHsc+FCNxDpE3cWDUmHVIoPug2yna4hvhYzZLs/9l2fInjjoZjqA3JaYn07zbccM0Qujw839TyB3B2Q72h4sAcIDQW52uWiABsf63aJ6aQ6h3uqX8A38q5nTULsHsq25YlkCweEgMzv3j77B2He7rK+hhmAFLII+YGsaigULevSU6bHdXFDOp2g8DrIz+Wo+Q99Q6Da7lq9mWdG3aCWNL+BskaA5V6vVHpPT8FpzTevfkrgJcwZ0OJIAAAAASUVORK5CYII=);
     }
@@ -232,7 +232,7 @@ export default {
 
 .divider-line {
   position: absolute;
-  border: 1px dashed var(--ti-lowcode-common-primary-color);
+  border: 1px dashed var(--te-common-border-checked);
   z-index: 2;
 }
 </style>
diff --git a/packages/canvas/container/src/components/CanvasResizeBorder.vue b/packages/canvas/container/src/components/CanvasResizeBorder.vue
index ef310dd22..136d9d46e 100644
--- a/packages/canvas/container/src/components/CanvasResizeBorder.vue
+++ b/packages/canvas/container/src/components/CanvasResizeBorder.vue
@@ -199,7 +199,7 @@ export default {
   &::after {
     content: '';
     display: block;
-    border: 1px solid var(--ti-lowcode-common-primary-color);
+    border: 1px solid var(--te-common-border-checked);
   }
   &.resize-vertical {
     cursor: ns-resize;
diff --git a/packages/canvas/container/src/components/shortCutPopover.vue b/packages/canvas/container/src/components/shortCutPopover.vue
index e01f26c74..4722705e0 100644
--- a/packages/canvas/container/src/components/shortCutPopover.vue
+++ b/packages/canvas/container/src/components/shortCutPopover.vue
@@ -86,7 +86,7 @@ export default {
   display: flex;
   align-items: center;
   padding: 0 10px;
-  border-bottom: 1px solid var(--ti-lowcode-toolbar-border-color, #333);
+  border-bottom: 1px solid var(--te-common-border-default, #333);
   height: 36px;
 
   div {
@@ -96,7 +96,7 @@ export default {
 
   .icon-setting {
     font-size: 16px;
-    fill: var(--ti-lowcode-toolbar-breadcrumb-color, #d9d9d9);
+    fill: var(--te-common-text-secondary, #d9d9d9);
   }
 
   .icon-wrap {
@@ -111,7 +111,7 @@ export default {
     align-items: center;
     transition: 0.3s;
     &:hover {
-      fill: var(--ti-lowcode-toolbar-icon-color, #fff);
+      fill: var(--te-common-icon-primary, #fff);
       background: var(--ti-lowcode-icon-hover-bg, rgba(255, 255, 255, 0.1));
     }
   }
@@ -164,14 +164,14 @@ export default {
     width: 100%;
     padding: 4px 0;
     display: inline-block;
-    background: var(--ti-lowcode-toolbar-view-hover-bg, #4d4d4d);
+    background: var(--te-common-bg-container, #4d4d4d);
     border-radius: 2px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   svg {
-    fill: var(--ti-lowcode-toolbar-breadcrumb-color, #d9d9d9);
+    fill: var(--te-common-text-secondary, #d9d9d9);
     margin-left: 4px;
   }
 }
diff --git a/packages/canvas/layout/src/CanvasLayout.vue b/packages/canvas/layout/src/CanvasLayout.vue
index bb75e3226..9ddbbfd1e 100644
--- a/packages/canvas/layout/src/CanvasLayout.vue
+++ b/packages/canvas/layout/src/CanvasLayout.vue
@@ -21,7 +21,7 @@ const siteCanvasStyle = computed(() => {
 
 <style lang="less" scoped>
 #canvas-wrap {
-  background: var(--ti-lowcode-canvas-wrap-bg);
+  background: var(--te-common-bg-container);
   flex: 1 1 0;
   border: none;
   display: flex;
diff --git a/packages/common/component/SearchEmpty.vue b/packages/common/component/SearchEmpty.vue
index 74b801fc2..a7eaa6232 100644
--- a/packages/common/component/SearchEmpty.vue
+++ b/packages/common/component/SearchEmpty.vue
@@ -26,11 +26,10 @@ export default {
   .empty-icon {
     width: 80px;
     height: 80px;
-    color: var(--ti-lowcode-datasource-common-empty-color);
   }
   .empty-text {
     font-size: 12px;
-    color: var(--te-base-text-color-3);
+    color: var(--te-common-text-weaken);
   }
 }
 </style>
diff --git a/packages/settings/styles/src/components/inputs/ResetButton.vue b/packages/settings/styles/src/components/inputs/ResetButton.vue
index d31556119..540283740 100644
--- a/packages/settings/styles/src/components/inputs/ResetButton.vue
+++ b/packages/settings/styles/src/components/inputs/ResetButton.vue
@@ -41,6 +41,6 @@ export default {
   display: block;
   padding: 8px 4px;
   text-align: center;
-  color: var(--te-common-text-description);
+  color: var(--te-common-text-secondary);
 }
 </style>
diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less
index a195c7a41..c564901d2 100644
--- a/packages/theme/base/src/base.less
+++ b/packages/theme/base/src/base.less
@@ -4,445 +4,241 @@
   --te-base-color-inherit: inherit;
   --te-base-color-unset: unset;
 
-  // 灰阶
-  --te-base-gray-1: #fff;
-  --te-base-gray-2: #fafafa;
-  --te-base-gray-3: #f2f2f2;
-  --te-base-gray-4: #f2f5fc;
-  --te-base-gray-5: #f5f5f5;
-  --te-base-gray-6: #f0f0f0;
-  --te-base-gray-7: #e6e6e6;
-  --te-base-gray-8: #eeeeee;
-  --te-base-gray-9: #dfe1e6;
-  --te-base-gray-10: #e3e3e3;
-  --te-base-gray-11: #ebebeb;
-  --te-base-gray-12: #d9d9d9;
-  --te-base-gray-13: #dbdbdb;
-  --te-base-gray-14: #e5e5e5;
-  --te-base-gray-15: #e9e9e9;
-  --te-base-gray-16: #b9b9b9;
-  --te-base-gray-17: #ccc;
-  --te-base-gray-18: #c2c2c2;
-  --te-base-gray-19: #afafaf;
-  --te-base-gray-20: #ababab;
-  --te-base-gray-21: #adb0b8;
-  --te-base-gray-22: #1476ff1a;
-  --te-base-gray-23: #a6a6a6;
-  --te-base-gray-24: #a7aab2;
-  --te-base-gray-25: #4d4d4d;
-  --te-base-gray-26: #464c59;
-  --te-base-gray-27: #5a5a5a;
-  --te-base-gray-28: #555;
-  --te-base-gray-29: #5e5e5e;
-  --te-base-gray-30: #575d6c;
-  --te-base-gray-31: #595959;
-  --te-base-gray-32: #666;
-  --te-base-gray-33: #6a6a6a;
-  --te-base-gray-34: #6b6b6b;
-  --te-base-gray-35: #606165;
-  --te-base-gray-36: #dddddd;
-  --te-base-gray-37: #cbcbcb;
-  --te-base-gray-38: #626262;
-  --te-base-gray-39: #737373;
-  --te-base-gray-40: #757575;
-  --te-base-gray-41: #888;
-  --te-base-gray-42: #8d8d8d;
-  --te-base-gray-43: #808080;
-  --te-base-gray-44: #8a8e99;
-  --te-base-gray-45: #9a9a9a;
-  --te-base-gray-46: #999;
-  --te-base-gray-47: #9d9d9d;
-  --te-base-gray-48: #9f9f9f;
-  --te-base-gray-49: #999999;
-  --te-base-gray-50: #8a887b;
-  --te-base-gray-51: #f3f3f3;
-  --te-base-gray-52: #d1d1d1;
-  --te-base-gray-53: #bdbdbd;
-  --te-base-gray-54: #dfdfdf;
-  --te-base-gray-55: #bfbfbf;
-  --te-base-gray-56: #b5b5b5;
-  --te-base-gray-57: #f3f3f5;
-  --te-base-gray-58: #919191;
-  --te-base-gray-59: #e7e8e9;
-  --te-base-gray-60: #9e9e9e;
-  --te-base-gray-61: #63666c;
-  --te-base-gray-62: #858585;
-  --te-base-gray-63: #f6eeee;
-  --te-base-gray-64: #f0f1f5;
-  --te-base-gray-65: #b4b5b8;
-  --te-base-gray-66: #8b8c8f;
-  --te-base-gray-67: #4d4e52;
-  --te-base-gray-68: #36383d;
-  --te-base-gray-69: #2b2d33;
-
-  // black
-  --te-base-dark-1: #1f1f1f;
-  --te-base-dark-2: #1a1a1a;
-  --te-base-dark-3: #141414;
-  --te-base-dark-4: #191818;
-  --te-base-dark-5: #191919;
-  --te-base-dark-6: #202020;
-  --te-base-dark-7: #2e2e2e;
-  --te-base-dark-8: #2f2f2f;
-  --te-base-dark-9: #212121;
-  --te-base-dark-10: #232323;
-  --te-base-dark-11: #252b3a;
-  --te-base-dark-12: #2b2b2b;
-  --te-base-dark-13: #262626;
-  --te-base-dark-14: #222;
-  --te-base-dark-15: #323644;
-  --te-base-dark-16: #1e1e1e;
-  --te-base-dark-17: #292929;
-  --te-base-dark-18: #3c3c3c;
-  --te-base-dark-19: #313131;
-  --te-base-dark-20: #333;
-  --te-base-dark-21: #363636;
-  --te-base-dark-22: #404040;
-  --te-base-dark-23: #414141;
-  --te-base-dark-24: #433535;
-  --te-base-dark-25: #041320;
-  --te-base-dark-26: #000;
-  --te-base-dark-27: #212329;
-  --te-base-dark-28: #1d312a;
-  --te-base-dark-29: #2a2c31;
+  --te-base-gray-0: #fff;
+  --te-base-gray-5: #fafafa;
+  --te-base-gray-10: #f5f5f5;
+  --te-base-gray-20: #f0f0f0;
+  --te-base-gray-30: #e6e6e6;
+  --te-base-gray-40: #dbdbdb;
+  --te-base-gray-50: #c2c2c2;
+  --te-base-gray-60: #808080;
+  --te-base-gray-70: #595959;
+  --te-base-gray-80: #333333;
+  --te-base-gray-90: #191919;
+  --te-base-gray-100: #000;
+  --te-base-gray-110: #b4b5b8;
+  --te-base-gray-120: #8b8c8f;
+  --te-base-gray-130: #4d4e52;
+  --te-base-gray-140: #36383d;
+  --te-base-gray-150: #2a2c31;
+  --te-base-gray-160: #212329;
+  --te-base-gray-170: #0f1115;
 
   // expand-red
-  --te-base-red-1: #ffeae8;
-  --te-base-red-2: #fccdca;
-  --te-base-red-3: #faa9a5;
-  --te-base-red-4: #fa8682;
-  --te-base-red-5: #f76360;
-  --te-base-red-6: #f23030;
-  --te-base-red-7: #cc272a;
-  --te-base-red-8: #a3171c;
-  --te-base-red-9: #78080e;
-  --te-base-red-10: #4d0005;
-  --te-base-red-11: #a64242;
-  --te-base-red-12: #d4827f;
-  --te-base-red-13: #f2c5c2;
-  --te-base-red-14: #c7000b;
-  --te-base-red-15: #fce3e1;
-  --te-base-red-16: #feeaeb;
-  --te-base-red-17: #dc544f;
-  --te-base-red-18: #ff0000;
-  --te-base-red-19: #ea384c;
-  --te-base-red-20: #c92c3f;
-  --te-base-red-21: #de504e;
+  --te-base-red-10: #fff1f0;
+  --te-base-red-20: #fce2e0;
+  --te-base-red-30: #faa7a3;
+  --te-base-red-40: #fa8682;
+  --te-base-red-50: #f76360;
+  --te-base-red-60: #f23030;
+  --te-base-red-70: #bf0a1c;
+  --te-base-red-80: #a3171c;
+  --te-base-red-90: #78080e;
+  --te-base-red-100: #4d0005;
+  --te-base-red-110: #a64242;
+  --te-base-red-120: #d4827f;
+  --te-base-red-130: #f2c5c2;
+  --te-base-red-140: rgba(242, 48, 48, 0.3);
 
   // expand-orange
-  --te-base-orange-1: #fff5e8;
-  --te-base-orange-2: #fcdfb8;
-  --te-base-orange-3: #fcc98b;
-  --te-base-orange-4: #fcb25c;
-  --te-base-orange-5: #ff9a2e;
-  --te-base-orange-6: #ff8800;
-  --te-base-orange-7: #d96900;
-  --te-base-orange-8: #a64d00;
-  --te-base-orange-9: #733400;
-  --te-base-orange-10: #4d2201;
-  --te-base-orange-11: #9e6d3f;
-  --te-base-orange-12: #d6a981;
-  --te-base-orange-13: #f2d8c2;
-  --te-base-orange-14: #fa9841;
-  --te-base-orange-15: #facb4b;
-  --te-base-orange-16: #ffb100;
+  --te-base-orange-10: #fff5e8;
+  --te-base-orange-20: #ffebd1;
+  --te-base-orange-30: #fcd5a4;
+  --te-base-orange-40: #fcbc72;
+  --te-base-orange-50: #ff9a2e;
+  --te-base-orange-60: #ff8800;
+  --te-base-orange-70: #d96900;
+  --te-base-orange-80: #a64d00;
+  --te-base-orange-90: #733400;
+  --te-base-orange-100: #4d2201;
+  --te-base-orange-110: #9e6d3f;
+  --te-base-orange-120: #d6a981;
+  --te-base-orange-130: #f2d8c2;
 
   // expand-yellow
-  --te-base-yellow-1: #fcf9eb;
-  --te-base-yellow-2: #fcf0c2;
-  --te-base-yellow-3: #fae396;
-  --te-base-yellow-4: #f7d56d;
-  --te-base-yellow-5: #f7c845;
-  --te-base-yellow-6: #fcbe1e;
-  --te-base-yellow-7: #d99b0b;
-  --te-base-yellow-8: #a67711;
-  --te-base-yellow-9: #7a5202;
-  --te-base-yellow-10: #4d3200;
-  --te-base-yellow-11: #9e7e3f;
-  --te-base-yellow-12: #d4b57f;
-  --te-base-yellow-13: #e6d3b8;
-  --te-base-yellow-14: #501c1c;
-  --te-base-yellow-15: #8d5421;
+  --te-base-yellow-10: #fffae6;
+  --te-base-yellow-20: #fcf0c2;
+  --te-base-yellow-30: #fae49d;
+  --te-base-yellow-40: #f7d56f;
+  --te-base-yellow-50: #fac532;
+  --te-base-yellow-60: #ffb700;
+  --te-base-yellow-70: #e0a210;
+  --te-base-yellow-80: #a67711;
+  --te-base-yellow-90: #7a5202;
+  --te-base-yellow-100: #4d3200;
+  --te-base-yellow-110: #9e7e3f;
+  --te-base-yellow-120: #d4b57f;
+  --te-base-yellow-130: #e6d3b8;
 
   // expand-lemon
-  --te-base-lemon-1: #fcfae8;
-  --te-base-lemon-2: #fcf6c2;
-  --te-base-lemon-3: #fcf092;
-  --te-base-lemon-4: #fae969;
-  --te-base-lemon-5: #f7e04a;
-  --te-base-lemon-6: #f7d916;
-  --te-base-lemon-7: #d9bb16;
-  --te-base-lemon-8: #a38708;
-  --te-base-lemon-9: #756002;
-  --te-base-lemon-10: #4d3d00;
-  --te-base-lemon-11: #9e8f46;
-  --te-base-lemon-12: #d6c581;
-  --te-base-lemon-13: #eddfb2;
+  --te-base-lemon-10: #ffffe6;
+  --te-base-lemon-20: #fcfcc2;
+  --te-base-lemon-30: #faf78e;
+  --te-base-lemon-40: #fcf26a;
+  --te-base-lemon-50: #faee46;
+  --te-base-lemon-60: #f2e70c;
+  --te-base-lemon-70: #d9c816;
+  --te-base-lemon-80: #a38f08;
+  --te-base-lemon-90: #756202;
+  --te-base-lemon-100: #4d3c00;
+  --te-base-lemon-110: #9e8f46;
+  --te-base-lemon-120: #d6c581;
+  --te-base-lemon-130: #eddfb2;
 
   // expand-lime
-  --te-base-lime-1: #f8fae3;
-  --te-base-lime-2: #eff5bf;
-  --te-base-lime-3: #e2ed8e;
-  --te-base-lime-4: #d5e667;
-  --te-base-lime-5: #c6de3e;
-  --te-base-lime-6: #b2d119;
-  --te-base-lime-7: #95b312;
-  --te-base-lime-8: #728c0a;
-  --te-base-lime-9: #576e05;
-  --te-base-lime-10: #3b4d00;
-  --te-base-lime-11: #808c46;
-  --te-base-lime-12: #c1cc7a;
-  --te-base-lime-13: #3b4d00;
+  --te-base-lime-10: #fdffe6;
+  --te-base-lime-20: #eff5bf;
+  --te-base-lime-30: #e2ed8e;
+  --te-base-lime-40: #d5e667;
+  --te-base-lime-50: #c6de3e;
+  --te-base-lime-60: #b2d119;
+  --te-base-lime-70: #95b312;
+  --te-base-lime-80: #728c0a;
+  --te-base-lime-90: #576e05;
+  --te-base-lime-100: #3b4d00;
+  --te-base-lime-110: #808c46;
+  --te-base-lime-120: #c1cc7a;
+  --te-base-lime-130: #3b4d00;
 
   // expand-kelly
-  --te-base-kelly-1: #f2fae6;
-  --te-base-kelly-2: #daf2bb;
-  --te-base-kelly-3: #b9e683;
-  --te-base-kelly-4: #9edb58;
-  --te-base-kelly-5: #7dcc29;
-  --te-base-kelly-6: #5cb300;
-  --te-base-kelly-7: #4b9902;
-  --te-base-kelly-8: #3c8001;
-  --te-base-kelly-9: #2e6600;
-  --te-base-kelly-10: #1f4700;
-  --te-base-kelly-11: #628c38;
-  --te-base-kelly-12: #a2c777;
-  --te-base-kelly-13: #d2e6bb;
+  --te-base-kelly-10: #edf7df;
+  --te-base-kelly-20: #daf2bb;
+  --te-base-kelly-30: #b9e683;
+  --te-base-kelly-40: #9edb58;
+  --te-base-kelly-50: #7dcc29;
+  --te-base-kelly-60: #5cb300;
+  --te-base-kelly-70: #4b9902;
+  --te-base-kelly-80: #3c8001;
+  --te-base-kelly-90: #2e6600;
+  --te-base-kelly-100: #1f4700;
+  --te-base-kelly-110: #628c38;
+  --te-base-kelly-120: #a2c777;
+  --te-base-kelly-130: #d2e6b8;
 
   // expand-green
-  --te-base-green-1: #e8fced;
-  --te-base-green-2: #bbf2c8;
-  --te-base-green-3: #82e09a;
-  --te-base-green-4: #51d675;
-  --te-base-green-5: #25c251;
-  --te-base-green-6: #00b336;
-  --te-base-green-7: #029931;
-  --te-base-green-8: #01802b;
-  --te-base-green-9: #006624;
-  --te-base-green-10: #004a1b;
-  --te-base-green-11: #3d995c;
-  --te-base-green-12: #77c78f;
-  --te-base-green-13: #b8e6c7;
-  --te-base-green-14: #e6f2d5;
-  --te-base-green-15: #2ad986;
+  --te-base-green-10: #e4f7e9;
+  --te-base-green-20: #d5f2dc;
+  --te-base-green-30: #92e0a5;
+  --te-base-green-40: #60d680;
+  --te-base-green-50: #25c251;
+  --te-base-green-60: #00b336;
+  --te-base-green-70: #029931;
+  --te-base-green-80: #01802b;
+  --te-base-green-90: #006624;
+  --te-base-green-100: #004a1b;
+  --te-base-green-110: #1d312a;
+  --te-base-green-120: #77c78f;
+  --te-base-green-130: #b8e6c7;
+  --te-base-green-140: rgba(92, 179, 54, 0.1);
 
   // expand-mint
-  --te-base-mint-1: #e8fcfa;
-  --te-base-mint-2: #bff5ef;
-  --te-base-mint-3: #8be8e0;
-  --te-base-mint-4: #5dded5;
-  --te-base-mint-5: #38d6ce;
-  --te-base-mint-6: #10c7c1;
-  --te-base-mint-7: #0aaba8;
-  --te-base-mint-8: #048c8c;
-  --te-base-mint-9: #046466;
-  --te-base-mint-10: #004547;
-  --te-base-mint-11: #3d9996;
-  --te-base-mint-12: #77c7c2;
-  --te-base-mint-13: #b8e6e1;
-  --te-base-mint-14: #50d4ab;
+  --te-base-mint-10: #e6fcfa;
+  --te-base-mint-20: #d0f5f1;
+  --te-base-mint-30: #97e8e1;
+  --te-base-mint-40: #64ded6;
+  --te-base-mint-50: #38d6ce;
+  --te-base-mint-60: #10c7c1;
+  --te-base-mint-70: #0bb8b2;
+  --te-base-mint-80: #048c8c;
+  --te-base-mint-90: #046466;
+  --te-base-mint-100: #004547;
+  --te-base-mint-110: #3d9996;
+  --te-base-mint-120: #77c7c2;
+  --te-base-mint-130: #b8e6e1;
 
   // expand-sky
-  --te-base-sky-1: #e8f8fc;
-  --te-base-sky-2: #c4f2ff;
-  --te-base-sky-3: #9de4fa;
-  --te-base-sky-4: #79d8f7;
-  --te-base-sky-5: #58cbf5;
-  --te-base-sky-6: #33bcf2;
-  --te-base-sky-7: #1f9acf;
-  --te-base-sky-8: #1075a3;
-  --te-base-sky-9: #065278;
-  --te-base-sky-10: #00304a;
-  --te-base-sky-11: #3d7f99;
-  --te-base-sky-12: #7ab8cc;
-  --te-base-sky-13: #b6e5f2;
+  --te-base-sky-10: #e8faff;
+  --te-base-sky-20: #d6f6ff;
+  --te-base-sky-30: #a5e6fa;
+  --te-base-sky-40: #79d8f7;
+  --te-base-sky-50: #58cbf5;
+  --te-base-sky-60: #33bcf2;
+  --te-base-sky-70: #1f9acf;
+  --te-base-sky-80: #1075a3;
+  --te-base-sky-90: #065278;
+  --te-base-sky-100: #00304a;
+  --te-base-sky-110: #3d7f99;
+  --te-base-sky-120: #7ab8cc;
+  --te-base-sky-130: #b6e5f2;
 
   // expand-blue
-  --te-base-blue-1: #e3effa;
-  --te-base-blue-2: #c4e1ff;
-  --te-base-blue-3: #99c9ff;
-  --te-base-blue-4: #68abfc;
-  --te-base-blue-5: #4191fa;
-  --te-base-blue-6: #1476ff;
-  --te-base-blue-7: #0f5ed4;
-  --te-base-blue-8: #0845a6;
-  --te-base-blue-9: #022e7a;
+  --te-base-blue-10: #f0f7ff;
+  --te-base-blue-20: #e7f1ff;
+  --te-base-blue-30: #b3d6ff;
+  --te-base-blue-40: #7eb7fc;
+  --te-base-blue-50: #4191fa;
+  --te-base-blue-60: #1476ff;
+  --te-base-blue-70: #0f5ed4;
+  --te-base-blue-80: #0845a6;
+  --te-base-blue-90: #022e7a;
   --te-base-blue-10: #001a4a;
-  --te-base-blue-11: #3d6899;
-  --te-base-blue-12: #7fa6d4;
-  --te-base-blue-13: #b6d4f2;
-  --te-base-blue-14: #4f77ff;
-  --te-base-blue-15: #3961eb;
-  --te-base-blue-16: #7693f5;
-  --te-base-blue-17: #526ecc;
-  --te-base-blue-18: #deecff;
-  --te-base-blue-19: #5073e5;
-  --te-base-blue-20: #5e7ce0;
-  --te-base-blue-21: #6bb0ff;
-  --te-base-blue-22: #006cff;
-  --te-base-blue-23: #8bbefa;
-  --te-base-blue-24: #476be5;
-  --te-base-blue-25: rgba(20, 118, 255, 0.1);
+  --te-base-blue-110: #202b3f;
+  --te-base-blue-120: #7fa6d4;
+  --te-base-blue-130: #b6d4f2;
+  --te-base-blue-140: rgba(20, 118, 255, 0.1);
 
   // expand-indigo
-  --te-base-indigo-1: #eee8ff;
-  --te-base-indigo-2: #ddd7fa;
-  --te-base-indigo-3: #b19cf7;
-  --te-base-indigo-4: #957af5;
-  --te-base-indigo-5: #6e51e0;
-  --te-base-indigo-6: #512fd6;
-  --te-base-indigo-7: #391eb0;
-  --te-base-indigo-8: #27108f;
-  --te-base-indigo-9: #19056e;
-  --te-base-indigo-10: #0e004d;
-  --te-base-indigo-11: #584d99;
-  --te-base-indigo-12: #847acc;
-  --te-base-indigo-13: #bbb8e6;
-  --te-base-indigo-14: #a790ff;
+  --te-base-indigo-10: #f0ebff;
+  --te-base-indigo-20: #e2d9fc;
+  --te-base-indigo-30: #a790ff;
+  --te-base-indigo-40: #9479f2;
+  --te-base-indigo-50: #6e51e0;
+  --te-base-indigo-60: #512fd6;
+  --te-base-indigo-70: #391eb0;
+  --te-base-indigo-80: #27108f;
+  --te-base-indigo-90: #19056e;
+  --te-base-indigo-100: #0e004d;
+  --te-base-indigo-110: #2f2e3f;
+  --te-base-indigo-120: #847acc;
+  --te-base-indigo-130: #bbb8e6;
 
   // expand-purple
-  --te-base-purple-1: #f5e8ff;
-  --te-base-purple-2: #e4c5fc;
-  --te-base-purple-3: #d0a1f7;
-  --te-base-purple-4: #b878f0;
-  --te-base-purple-5: #9f53e6;
-  --te-base-purple-6: #832fd6;
-  --te-base-purple-7: #641eb0;
-  --te-base-purple-8: #4c1091;
-  --te-base-purple-9: #370673;
-  --te-base-purple-10: #20004d;
-  --te-base-purple-11: #683d99;
-  --te-base-purple-12: #a07acc;
-  --te-base-purple-13: #cbb8e6;
-  --te-base-purple-14: #f0edfc;
+  --te-base-purple-10: #f9ebff;
+  --te-base-purple-20: #f4e0fc;
+  --te-base-purple-30: #dea3f7;
+  --te-base-purple-40: #cc78f0;
+  --te-base-purple-50: #ba53e6;
+  --te-base-purple-60: #a42fd6;
+  --te-base-purple-70: #841eb0;
+  --te-base-purple-80: #6b1091;
+  --te-base-purple-90: #520673;
+  --te-base-purple-100: #36004d;
+  --te-base-purple-110: #7d3d99;
+  --te-base-purple-120: #b47acc;
+  --te-base-purple-130: #d8b8e6;
 
   // expand-pink
-  --te-base-pink-1: #fce6fb;
-  --te-base-pink-2: #fcc2f9;
-  --te-base-pink-3: #f794f2;
-  --te-base-pink-4: #eb67e6;
-  --te-base-pink-5: #e841e5;
-  --te-base-pink-6: #d91ad9;
-  --te-base-pink-7: #b50fb8;
-  --te-base-pink-8: #8f0a94;
-  --te-base-pink-9: #6b0370;
-  --te-base-pink-10: #47004d;
-  --te-base-pink-11: #993d99;
-  --te-base-pink-12: #c97acc;
-  --te-base-pink-13: #e2b8e6;
+  --te-base-pink-10: #fce8fb;
+  --te-base-pink-20: #fcd4fa;
+  --te-base-pink-30: #f7a1f3;
+  --te-base-pink-40: #eb75e7;
+  --te-base-pink-50: #e841e5;
+  --te-base-pink-60: #d91ad9;
+  --te-base-pink-70: #b50fb8;
+  --te-base-pink-80: #8f0a94;
+  --te-base-pink-90: #6b0370;
+  --te-base-pink-100: #47004d;
+  --te-base-pink-110: #993d99;
+  --te-base-pink-120: #c97acc;
+  --te-base-pink-130: #e2b8e6;
 
   // expand-rose
-  --te-base-rose-1: #fce6ef;
-  --te-base-rose-2: #ffc4de;
-  --te-base-rose-3: #fa9bc9;
-  --te-base-rose-4: #f56cac;
-  --te-base-rose-5: #eb4696;
-  --te-base-rose-6: #e61c81;
-  --te-base-rose-7: #b50e65;
-  --te-base-rose-8: #940a54;
-  --te-base-rose-9: #70033f;
-  --te-base-rose-10: #4d002b;
-  --te-base-rose-11: #993d6e;
-  --te-base-rose-12: #cc7aa6;
-  --te-base-rose-13: #e6b8d2;
-  --te-base-rose-14: #f66f6a;
-
-  // 公司品牌色
-  --te-base-brand-color: #c7000b;
-
-  // 主色
-  --te-base-primary-color-1: #191919;
-  --te-base-primary-color-2: #1476ff;
-
-  // 背景色
-  --te-base-bg: #f5f5f5;
-  --te-base-bg-1: rgba(0, 0, 0, 0.05);
-  --te-base-bg-2: #fafafa;
-  --te-base-bg-3: #191919;
-  --te-base-bg-4: #595959;
-  --te-base-bg-5: #fff;
-  --te-base-bg-6: #5959591a;
-  --te-base-bg-7: rgba(0, 255, 0, 0.1);
-  --te-base-bg-8: rgba(242, 48, 48, 0.3);
-  --te-base-dark-bg: #141414;
-  --te-base-dark-bg-2: #333;
-  --te-base-dark-bg-3: #e6e6e6;
-  --te-base-dark-bg-4: #a6a6a6;
-  --te-base-dark-bg-5: #000;
-  --te-base-dark-bg-6: #a6a6a61a;
-  --te-base-dark-bg-7: rgba(255, 255, 255, 0.1);
-  --te-base-dark-bg-8: rgba(0, 0, 0, 0.16);
-
-  // 文本色
-  --te-base-text-color: #191919;
-  --te-base-text-color-1: #595959;
-  --te-base-text-color-2: #1476ff;
-  --te-base-text-color-3: #808080;
-  --te-base-text-color-4: #c2c2c2;
-  --te-base-dark-text-color: #e6e6e6;
-  --te-base-dark-text-color-1: #a6a6a6;
-
-  // 文本链接色
-  --te-base-text-link-color: #191919;
-  --te-base-text-link-color-1: #595959;
-  --te-base-text-link-color-2: #c2c2c2;
-  --te-base-text-link-color-3: #fff;
-  --te-base-dark-text-link-color: #e6e6e6;
-  --te-base-dark-text-link-color-1: #a6a6a6;
-
-  // 按钮边框色
-  --te-base-button-border-none: none;
-  --te-base-secondary-button-border-color: #595959;
-  --te-base-secondary-button-border-hover-color: #c2c2c2;
-  --te-base-default-button-border-color: #c2c2c2;
-  --te-base-default-button-border-disable-color: #dbdbdb;
-  --te-base-dark-secondary-button-border-color: #a6a6a6;
-  --te-base-dark-secondary-button-border-hover-color: #3d3d3d;
-  --te-base-dark-default-button-border-hover-color: #e6e6e6;
-
-  // 分割线
-  --te-base-split-color-1: rgba(0, 0, 0, 0.08); // 白色背景分割线
-  --te-base-split-color-2: rgba(0, 0, 0, 0.15); // 灰色背景分割线
-  --te-base-dark-split-color-1: rgba(255, 255, 255, 0.08); // 白色背景分割线
-  --te-base-dark-split-color-2: rgba(255, 255, 255, 0.15);
-
-  // rgba
-  --te-base-rgba-1: rgba(0, 0, 0, 0.2);
-  --te-base-rgba-2: rgba(0, 0, 0, 0.08);
-  --te-base-rgba-3: rgba(242, 48, 48, 0.1);
-  --te-base-rgba-4: rgba(20, 118, 255, 0.1);
-  --te-base-rgba-5: rgba(255, 0, 0);
-  --te-base-rgba-6: rgba(0, 0, 0, 0.5);
-  --te-base-rgba-7: rgba(200, 200, 200, 0.2);
-  --te-base-rgba-8: rgba(255, 255, 255, 0.1);
-  --te-base-rgba-9: rgba(76, 152, 241, 0.15);
-  --te-base-rgba-10: rgba(173, 176, 184, 0.6);
-  --te-base-rgba-11: rgba(0, 255, 0, 0.1);
-  --te-base-rgba-12: rgba(242, 48, 48, 0.3);
-  --te-base-rgba-13: rgba(255, 255, 255, 0.08);
-  --te-base-rgba-14: rgba(246, 111, 106, 0.1);
-  --te-base-rgba-15: rgba(217, 217, 217, 0.8);
-  --te-base-rgba-16: rgba(0, 179, 54, 0.6);
-  --te-base-rgba-17: rgba(217, 217, 217, 0.4);
-  --te-base-rgba-18: rgba(255, 255, 255, 0.4);
-  --te-base-rgba-19: rgba(255, 255, 255, 0.5);
-  --te-base-rgba-20: rgba(94, 94, 94, 0.8);
-  --te-base-rgba-21: rgba(121, 121, 121, 0.4);
-  --te-base-rgba-22: rgba(138, 142, 153, 0.99);
-  --te-base-rgba-23: rgba(25, 25, 25, 0.15);
-  --te-base-rgba-24: rgba(0, 0, 0, 0.16);
-  --te-base-rgba-25: rgba(0, 255, 0, 0.1);
-  --te-base-rgba-26: rgba(242, 48, 48, 0.3);
-  --te-base-rgba-27: rgba(0, 0, 0, 0.16);
-  --te-base-rgb-1: rgb(80, 212, 171);
+  --te-base-rose-10: #ffebf3;
+  --te-base-rose-20: #ffd6e8;
+  --te-base-rose-30: #faa0cb;
+  --te-base-rose-40: #f56ead;
+  --te-base-rose-50: #f24998;
+  --te-base-rose-60: #e61c81;
+  --te-base-rose-70: #b50e65;
+  --te-base-rose-80: #940a54;
+  --te-base-rose-90: #70033f;
+  --te-base-rose-100: #4d002b;
+  --te-base-rose-110: #993d6e;
+  --te-base-rose-120: #cc7aa6;
+  --te-base-rose-130: #e6b8d2;
 
-  // 状态色
-  --te-base-error-color: #f23030;
-  --te-base-warn-color: #ff8800;
-  --te-base-warn-color-1: #f7d916;
-  --te-base-success-color: #5cb300;
-  --te-base-prompt-color: #1476ff;
-  --te-base-invalidate-color: #ebebeb;
+  --te-base-box-shadow-rgba-1: rgba(25, 25, 25, 0.15);
+  --te-base-box-shadow-rgba-2: rgba(0, 0, 0, 0.16);
 
   /**
   * 1.1 行高
diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
index fe510a02b..5e77d231f 100644
--- a/packages/theme/base/src/common.less
+++ b/packages/theme/base/src/common.less
@@ -1,52 +1,54 @@
 // common变量定义
 :root {
   //功能色
-  --te-common-color-success: var(--te-base-success-color); // 注释，成功-背景色 #5cb300
-  --te-common-color-warning: var(--te-base-warn-color); // 注释，告警-背景色 #ff8800
-  --te-common-color-error: var(--te-base-error-color); // 注释，错误-背景色 #f23030
-  --te-common-color-info: var(--te-base-prompt-color); // 注释，告警-背景色  #1476ff
-  --te-common-color-prompt-secondary: var(--te-base-indigo-5); // 注释，区块提示-背景色 #6e51e0
+  --te-common-color-success: var(--te-base-kelly-60); // 注释，成功-背景色 #5cb300
+  --te-common-color-warning: var(--te-base-orange-60); // 注释，告警-背景色 #ff8800
+  --te-common-color-error: var(--te-base-red-60); // 注释，错误-背景色 #f23030
+  --te-common-color-info: var(--te-base-blue-60); // 注释，告警-背景色  #1476ff
+  --te-common-color-prompt-secondary: var(--te-base-indigo-50); // 注释，区块提示-背景色 #6e51e0
 
   // 文本色
-  --te-common-text-primary: var(--te-base-dark-5); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #191919
-  --te-common-text-secondary: var(--te-base-gray-31); // 二级文本色-次要信息/表单标签颜色/选块按钮默认色 #595959
-  --te-common-text-weaken: var(--te-base-gray-43); // 三级文本色-弱化信息/提示文字 #808080
-  --te-common-text-disabled: var(--te-base-gray-18); // 文本禁用色 #c2c2c2
-  --te-common-text-link: var(--te-base-blue-6); // 链接色 #1476ff
-  --te-common-text-inverse: var(--te-base-gray-1); // 主按钮上的文本色 #fff
-  --te-common-text-dark-inverse: var(--te-base-gray-1); // 深色背景下按钮上的文本色 #fff
-  --te-common-text-emphasize: var(--te-base-blue-6); // 强调性文字 #1476ff
-  --te-common-text-description: var(--te-base-gray-47); // 描述性文字 #9d9d9d
+  --te-common-text-primary: var(--te-base-gray-90); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #191919
+  --te-common-text-secondary: var(--te-base-gray-70); // 二级文本色-次要信息/表单标签颜色/选块按钮默认色 #595959
+  --te-common-text-weaken: var(--te-base-gray-60); // 三级文本色-弱化信息/提示文字 #808080
+  --te-common-text-disabled: var(--te-base-gray-50); // 文本禁用色 #c2c2c2
+  --te-common-text-link: var(--te-base-blue-60); // 链接色 #1476ff
+  --te-common-text-inverse: var(--te-base-gray-0); // 主按钮上的文本色 #fff
+  --te-common-text-dark-inverse: var(--te-base-gray-0); // 深色背景下按钮上的文本色 #fff
+  --te-common-text-emphasize: var(--te-base-blue-60); // 强调性文字 #1476ff
+  --te-common-text-checked: var(--te-base-blue-60); // 选中或者hover文字 #1476ff
 
-  --te-common-icon-primary: var(--te-base-dark-5); // 重要图标色 #191919
-  --te-common-icon-secondary: var(--te-base-gray-43); // 图标默认色 #808080
-  --te-common-icon-disabled: var(--te-base-gray-18); // 图标禁用色 #c2c2c2
-  --te-common-icon-link: var(--te-base-blue-6); // 图标提示色 #1476ff
+  --te-common-icon-primary: var(--te-base-gray-90); // 重要图标色 #191919
+  --te-common-icon-secondary: var(--te-base-gray-60); // 图标默认色 #808080
+  --te-common-icon-disabled: var(--te-base-gray-50); // 图标禁用色 #c2c2c2
+  --te-common-icon-link: var(--te-base-blue-60); // 图标提示色 #1476ff
 
-  --te-common-border-default: var(--te-base-gray-13); // 线条-输入框默认色 #dbdbdb
-  --te-common-border-active: var(--te-base-dark-5); // 线条-输入框悬浮色/激活色  #191919
-  --te-common-border-disabled: var(--te-base-dark-5); // 线条-禁用色  #dbdbdb
-  --te-common-border-secondary: var(--te-base-gray-31); // 线条-次要按钮描边色  #595959
-  --te-common-border-prompt: var(--te-base-gray-13); // 线条-三级按钮默认色/表单内按钮 #dbdbdb
-  --te-common-border-hover: var(--te-base-gray-18); // 线条-按钮边框悬浮色/复选框/单选框，欧仁边框色 #c2c2c2
-  --te-common-border-divider: var(--te-base-gray-11); //线条-白色背景分割线颜色 #ebebeb
-  --te-common-border-bg-divider: var(--te-base-gray-13); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb
-  --te-common-border-checked: var(--te-base-blue-6); // 线条 选中色 #1476ff
+  --te-common-border-default: var(--te-base-gray-40); // 线条-输入框默认色 #dbdbdb
+  --te-common-border-active: var(--te-base-gray-90); // 线条-输入框悬浮色/激活色  #191919
+  --te-common-border-disabled: var(--te-base-gray-40); // 线条-禁用色  #dbdbdb
+  --te-common-border-secondary: var(--te-base-gray-70); // 线条-次要按钮描边色  #595959
+  --te-common-border-prompt: var(--te-base-gray-40); // 线条-三级按钮默认色/表单内按钮 #dbdbdb
+  --te-common-border-hover: var(--te-base-gray-50); // 线条-按钮边框悬浮色/复选框/单选框默认边框色 #c2c2c2
+  --te-common-border-divider: var(--te-base-gray-30); //线条-白色背景分割线颜色 #e6e6e6
+  --te-common-border-bg-divider: var(--te-base-gray-40); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb
+  --te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #1476ff
 
-  --te-common-bg-primary: var(--te-base-dark-5); // 主要按钮-背景色 #191919
-  --te-common-bg-primary-checked: var(--te-base-blue-6); // 主色-背景色 #1476ff
-  --te-common-bg-primary-emphasize: var(--te-base-blue-6); // 主色-背景色 #1476ff
+  --te-common-bg-primary: var(--te-base-gray-90); // 主要按钮-背景色 #191919
+  --te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色  选中和hover等颜色 #1476ff
+  --te-common-bg-primary-emphasize: var(--te-base-blue-60); // 主色-背景色 强调背景 #1476ff
 
-  --te-common-bg-secondary: var(--te-base-gray-31); // 次要按钮-背景色 #595959
-  --te-common-bg-prompt: var(--te-base-gray-7); // 导航按钮-背景色/选块-选中色 #e6e6e6
+  --te-common-bg-secondary: var(--te-base-gray-70); // 次要按钮-背景色 #595959
+  --te-common-bg-prompt: var(--te-base-gray-30); // 导航按钮-背景色/选块-选中色 #e6e6e6
   --te-common-bg-container: var(
-    --te-base-gray-5
+    --te-base-gray-10
   ); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #f5f5f5
-  --te-common-bg-container-weaken: var(--te-base-gray-2); // 浅编辑代码--背景色 #fafafa
-  --te-common-bg-tag: var(--te-base-green-14); // tag标签-背景色 #e6f2d5
-  --te-common-bg-default: var(--te-base-gray-1); // 白色背景-输入框背景/面板背景色 #fff
-  --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0
-  --te-common-bg-switch: var(--te-base-gray-18); // 开关默认色 #c2c2c2
+  --te-common-bg-container-weaken: var(--te-base-gray-5); // 浅编辑代码--背景色 #fafafa
+  --te-common-bg-tag: var(--te-base-green-10); // tag标签-背景色 #e4f7e9
+  --te-common-bg-default: var(--te-base-gray-0); // 白色背景-输入框背景/面板背景色 #fff
+  --te-common-bg-disabled: var(--te-base-gray-20); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0
+  --te-common-bg-switch: var(--te-base-gray-50); // 开关默认色 #c2c2c2
+  --te-common-bg-error: var(--te-base-red-20); // 浅色错误背景-背景色 #fce2e0
+  --te-common-bg-popover: var(--te-base-gray-0); // 对话框/tooltip/popover背景 #fff
 
   // 通用间距
   --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
@@ -55,49 +57,52 @@
 
 :root[data-theme='dark'] {
   //功能色
-  --te-common-color-success: var(--te-base-success-color); // 注释，成功-背景色 #5cb300
-  --te-common-color-warning: var(--te-base-warn-color); // 注释，告警-背景色 #ff8800
-  --te-common-color-error: var(--te-base-error-color); // 注释，错误-背景色 #f23030
-  --te-common-color-info: var(--te-base-prompt-color); // 注释，说明-背景色  #1476ff
-  --te-common-color-prompt-secondary: var(--te-base-indigo-14); // 注释，区块提示-背景色 #A790FF
+  --te-common-color-success: var(--te-base-kelly-60); // 注释，成功-背景色 #5cb300
+  --te-common-color-warning: var(--te-base-orange-60); // 注释，告警-背景色 #ff8800
+  --te-common-color-error: var(--te-base-red-60); // 注释，错误-背景色 #f23030
+  --te-common-color-info: var(--te-base-blue-60); // 注释，告警-背景色  #1476ff
+  --te-common-color-prompt-secondary: var(--te-base-indigo-30); // 注释，区块提示-背景色 #A790FF
   // 文本色
-  --te-common-text-primary: var(--te-base-gray-64); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #F0F1F5
-  --te-common-text-secondary: var(--te-base-gray-65); // 二级文本色-次要信息/表单标签颜色 #B4B5B8
-  --te-common-text-weaken: var(--te-base-gray-66); // 三级文本色-弱化信息/提示文字 #8B8C8F
-  --te-common-text-disabled: var(--te-base-gray-67); // 文本禁用色 #4D4E52
-  --te-common-text-link: var(--te-base-blue-6); // 链接色 #1476ff
-  --te-common-text-inverse: var(--te-base-dark-26); // 主按钮上的文本色 #000000
-  --te-common-text-dark-inverse: var(--te-base-gray-1); // 深色背景下按钮上的文本色 #fff
-  --te-common-text-emphasize: var(--te-base-blue-6); // 强调性文字 #1476ff
+  --te-common-text-primary: var(--te-base-gray-20); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #F0F0F0
+  --te-common-text-secondary: var(--te-base-gray-110); // 二级文本色-次要信息/表单标签颜色 #B4B5B8
+  --te-common-text-weaken: var(--te-base-gray-120); // 三级文本色-弱化信息/提示文字 #8B8C8F
+  --te-common-text-disabled: var(--te-base-gray-130); // 文本禁用色 #4D4E52
+  --te-common-text-link: var(--te-base-blue-60); // 链接色 #1476ff
+  --te-common-text-inverse: var(--te-base-gray-100); // 主按钮上的文本色 #000000
+  --te-common-text-dark-inverse: var(--te-base-gray-0); // 深色背景下按钮上的文本色 #fff
+  --te-common-text-emphasize: var(--te-base-blue-60); // 强调性文字 #1476ff
+  --te-common-text-checked: var(--te-base-blue-60); // 选中或者hover文字 #1476ff
 
-  --te-common-icon-primary: var(--te-base-gray-64); // 重要图标色 #F0F1F5
-  --te-common-icon-secondary: var(--te-base-gray-66); // 图标默认色 #8B8C8F
-  --te-common-icon-disabled: var(--te-base-gray-18); // 图标禁用色 #C2C2C2
-  --te-common-icon-link: var(--te-base-blue-6); // 图标提示色 #1476ff
+  --te-common-icon-primary: var(--te-base-gray-20); // 重要图标色 #F0F0F0
+  --te-common-icon-secondary: var(--te-base-gray-120); // 图标默认色 #8B8C8F
+  --te-common-icon-disabled: var(--te-base-gray-50); // 图标禁用色 #C2C2C2
+  --te-common-icon-link: var(--te-base-blue-60); // 图标提示色 #1476ff
 
-  --te-common-border-default: var(--te-base-gray-67); // 线条-输入框默认色 #4D4E52
-  --te-common-border-active: var(--te-base-gray-64); // 线条-输入框悬浮色/激活色  #F0F1F5
-  --te-common-border-disabled: var(--te-base-gray-68); // 线条-禁用色  #36383D
-  --te-common-border-secondary: var(--te-base-gray-65); // 线条-次要按钮描边色  #B4B5B8
-  --te-common-border-prompt: var(--te-base-gray-67); // 线条-三级按钮默认色/表单内按钮 #4D4E52
-  --te-common-border-hover: var(--te-base-gray-66); // 线条-按钮边框悬浮色 #8B8C8F
-  --te-common-border-divider: var(--te-base-gray-68); //线条-白色背景分割线颜色 #36383D
-  --te-common-border-bg-divider: var(--te-base-gray-67); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4E52
-  --te-common-border-checked: var(--te-base-blue-6); // 线条 选中色 #1476ff
+  --te-common-border-default: var(--te-base-gray-130); // 线条-输入框默认色 #4D4E52
+  --te-common-border-active: var(--te-base-gray-20); // 线条-输入框悬浮色/激活色  #F0F0F0
+  --te-common-border-disabled: var(--te-base-gray-140); // 线条-禁用色  #36383D
+  --te-common-border-secondary: var(--te-base-gray-110); // 线条-次要按钮描边色/禁用色  #B4B5B8
+  --te-common-border-prompt: var(--te-base-gray-130); // 线条-三级按钮默认色/表单内按钮 #4D4E52
+  --te-common-border-hover: var(--te-base-gray-120); // 线条-按钮边框悬浮色/复选框/单选框默认边框色 #8B8C8F
+  --te-common-border-divider: var(--te-base-gray-140); //线条-白色背景分割线颜色 #36383D
+  --te-common-border-bg-divider: var(--te-base-gray-130); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4E52
+  --te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #1476ff
 
-  --te-common-bg-primary: var(--te-base-gray-64); // 主要按钮-背景色 #F0F1F5
-  --te-common-bg-primary-checked: var(--te-base-blue-6); // 主色-背景色 #1476ff
-  --te-common-bg-primary-emphasize: var(--te-base-blue-6); // 主色-背景色 #1476ff
-  --te-common-bg-secondary: var(--te-base-gray-65); // 次要按钮-背景色 #B4B5B8
-  --te-common-bg-prompt: var(--te-base-gray-66); // 导航按钮-背景色/选块-选中色 #8B8C8F
+  --te-common-bg-primary: var(--te-base-gray-20); // 主要按钮-背景色 #F0F0F0
+  --te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色 选中和hover等颜色 #1476ff
+  --te-common-bg-primary-emphasize: var(--te-base-blue-60); // 主色-背景色 强调背景 #1476ff
+  --te-common-bg-secondary: var(--te-base-gray-110); // 次要按钮-背景色 #B4B5B8
+  --te-common-bg-prompt: var(--te-base-gray-120); // 导航按钮-背景色/选块-选中色 #8B8C8F
   --te-common-bg-container: var(
-    --te-base-gray-68
+    --te-base-gray-140
   ); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #36383D
-  --te-common-bg-container-weaken: var(--te-base-gray-69); // 浅编辑代码--背景色 #2B2D33
-  --te-common-bg-tag: var(--te-base-dark-28); // tag标签-背景色 #1d312a
-  --te-common-bg-default: var(--te-base-dark-27); // 深色背景-输入框背景/面板背景色 #212329
-  --te-common-bg-disabled: var(--te-base-dark-29); // 禁用/标签/下拉框多选标签 背景色 #2a2c31
-  --te-common-bg-switch: var(--te-base-gray-67); // 开关默认色 #4D4E52
+  --te-common-bg-container-weaken: var(--te-base-gray-150); // 浅编辑代码--背景色 #2a2c31
+  --te-common-bg-tag: var(--te-base-green-110); // tag标签-背景色 #1d312a
+  --te-common-bg-default: var(--te-base-gray-160); // 深色背景-输入框背景/面板背景色 #212329
+  --te-common-bg-disabled: var(--te-base-gray-150); // 禁用/标签/下拉框多选标签 背景色 #2a2c31
+  --te-common-bg-switch: var(--te-base-gray-130); // 开关默认色 #4D4E52
+  --te-common-bg-error: var(--te-base-red-20); // 浅色错误背景-背景色 #fce2e0
+  --te-common-bg-popover: var(--te-base-gray-170); // 对话框/tooltip/popover背景 #0F1115
 
   // 通用间距
   --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
index ecd035194..5fe4a8597 100644
--- a/packages/theme/base/src/component-common.less
+++ b/packages/theme/base/src/component-common.less
@@ -29,6 +29,7 @@
 }
 
 .tiny-select-dropdown.tiny-select-dropdown {
+  background-color: var(--te-common-bg-default);
   // 下拉新增列
   .tiny-select__top-create {
     margin: 8px 12px 4px 12px;
@@ -85,6 +86,7 @@
     height: 24px;
     border-color: var(--te-common-border-default);
     color: var(--te-common-text-primary);
+    background-color: transparent;
     font-size: var(--te-base-font-size-base);
     &:hover {
       border-color: var(--te-common-border-active);
@@ -103,6 +105,7 @@
 // 3、折叠框
 .tiny-collapse.tiny-collapse {
   border-top: 0;
+  border-bottom: 0;
   .tiny-collapse-item__header {
     flex-direction: row-reverse;
     font-size: var(--te-base-font-size-base);
@@ -128,6 +131,7 @@
   }
   .tiny-collapse-item {
     border-top-color: var(--te-common-border-bg-divider);
+    border-bottom-color: var(--te-common-border-bg-divider);
     border-bottom: 0;
     border-left: 0;
     border-right: 0;
@@ -162,7 +166,9 @@
         height: 24px;
         .tiny-tree-node__content-left {
           padding: 0 12px;
+          background-color: var(--te-common-bg-default);
           .tiny-tree-node__content-box {
+            color: var(--te-common-text-primary);
             padding: 0 12px 0 4px;
             background-color: var(--te-common-bg-default);
             &:hover {
@@ -242,10 +248,15 @@
 // 7、dialog组件
 .tiny-dialog-box.tiny-dialog-box {
   padding: 20px;
+  background-color: var(--te-common-bg-popover);
   .tiny-dialog-box__header {
     font-size: var(--te-base-font-size-1);
     color: var(--te-common-text-primary);
     padding: 0;
+    background-color: var(--te-common-bg-popover);
+    .tiny-dialog-box__close {
+      color: var(--te-common-text-primary);
+    }
   }
   .tiny-dialog-box__body {
     color: var(--te-common-text-secondary);
@@ -359,7 +370,7 @@
 .tiny-modal__box.tiny-modal__box {
   padding: 20px;
   border-radius: var(--te-base-border-radius-1);
-  box-shadow: 0 0 10px 0 var(--te-base-rgba-23);
+  box-shadow: 0 0 10px 0 var(--te-base-box-shadow-rgba-1);
   .tiny-modal__header {
     padding: 0;
     font-size: var(--te-base-font-size-1);
@@ -391,7 +402,7 @@
 .tiny-modal.tiny-modal.tiny-modal__wrapper.type__message {
   .tiny-modal__box {
     border-radius: var(--te-base-border-radius-2);
-    box-shadow: 0 2px 12px 0 var(--te-base-rgba-24);
+    box-shadow: 0 2px 12px 0 var(--te-base-box-shadow-rgba-2);
     padding: 0;
     height: 38px;
     .tiny-modal__body {
@@ -418,6 +429,7 @@
     color: var(--te-common-text-primary);
     border-color: var(--te-common-border-default);
     text-align: left;
+    background-color: var(--te-common-bg-default);
   }
   &.is-controls-right {
     .tiny-numeric__input-inner {
@@ -459,9 +471,9 @@
   padding: 0px 8px;
   font-size: var(--te-base-font-size-base);
   color: var(--te-common-text-primary);
-  background-color: var(--te-common-bg-default);
+  background-color: var(--te-common-bg-popover);
   border: 0;
-  box-shadow: 0 8px 24px 0 var(--te-base-rgba-27);
+  box-shadow: 0 8px 24px 0 var(--te-base-box-shadow-rgba-2);
 
   height: auto;
 }
@@ -541,8 +553,9 @@
 .tiny-notify.tiny-notify {
   border-radius: var(--te-base-border-radius-2);
   padding: 12px;
-  background-color: var(--te-common-bg-default);
-  box-shadow: 0 2px 12px 0 var(--te-base-rgba-24);
+  background-color: var(--te-common-bg-popover);
+  color: var(--te-common-text-primary);
+  box-shadow: 0 2px 12px 0 var(--te-base-box-shadow-rgba-2);
   .tiny-notify__icon-zone {
     height: 24px;
     .tiny-notify__icon-status {
@@ -550,6 +563,9 @@
       height: 16px;
     }
   }
+  .tiny-notify__title {
+    color: var(--te-common-text-primary);
+  }
   .tiny-notify__content {
     color: var(--te-common-text-secondary);
     font-size: var(--te-base-font-size-base);
@@ -604,11 +620,11 @@
 // 17、tooltip文字提示
 .tiny-tooltip.tiny-tooltip {
   &.tiny-tooltip__popper {
-    background: var(--te-common-bg-default);
+    background: var(--te-common-bg-popover);
     color: var(--te-common-text-primary);
-    box-shadow: 0 0 20px 0 var(--te-base-dark-bg-8);
+    box-shadow: 0 0 20px 0 var(--te-base-box-shadow-rgba-2);
     &[class*='is-'] {
-      background: var(--te-common-bg-default);
+      background: var(--te-common-bg-popover);
       color: var(--te-common-text-primary);
       font-size: var(--te-base-font-size-base);
       padding: 12px;
@@ -683,6 +699,7 @@
       .tiny-grid__header {
         .tiny-grid-header__row {
           .tiny-grid-header__column {
+            color: var(--te-common-text-primary);
             height: 24px;
             &.col__center {
               text-align: left;
@@ -715,6 +732,7 @@
       }
       .tiny-grid__body {
         .tiny-grid-body__row {
+          background-color: var(--te-common-bg-default);
           &.nav-tree .tiny-grid-cell {
             line-height: inherit;
           }
@@ -784,3 +802,21 @@
     }
   }
 }
+
+// 指引弹窗
+
+.tiny-guide.tiny-guide {
+  background-color: var(--te-common-bg-popover);
+  .shepherd-content .shepherd-header,
+  .shepherd-arrow:before {
+    background-color: var(--te-common-bg-popover);
+  }
+  &.shepherd-has-title[data-popper-placement^='bottom'],
+  &.shepherd-has-title[data-popper-placement^='top'],
+  &.shepherd-has-title[data-popper-placement^='left'],
+  &.shepherd-has-title[data-popper-placement^='right'] {
+    .shepherd-arrow:before {
+      background-color: var(--te-common-bg-popover);
+    }
+  }
+}
diff --git a/packages/theme/base/src/page/base-config-page.less b/packages/theme/base/src/page/base-config-page.less
index 3f2e7c305..89a3480d1 100644
--- a/packages/theme/base/src/page/base-config-page.less
+++ b/packages/theme/base/src/page/base-config-page.less
@@ -50,6 +50,7 @@ body {
   margin: 0;
   font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
     sans-serif;
+  color: var(--te-common-text-primary);
 }
 
 ol,
@@ -133,15 +134,16 @@ td {
 }
 
 .tiny-popover.tiny-popover.option-popper {
-  background: var(--ti-lowcode-popover-bg-color);
-  border: 1px solid var(--ti-lowcode-popover-option-popper-border-color);
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  background: var(--te-common-bg-popover);
+  border: 1px solid transparent;
+  color: var(--te-common-text-secondary);
   padding: 0px 8px 12px;
   &[x-placement^='bottom'] {
     .popper__arrow {
+      border-color: transparent;
       &,
       &::after {
-        border-bottom-color: var(--ti-lowcode-popover-bg-color);
+        border-bottom-color: var(--te-common-bg-popover);
       }
     }
   }
@@ -152,18 +154,19 @@ td {
     .popper__arrow {
       left: -7px;
       border-color: transparent;
-
+      &,
       &::after {
-        border-right-color: var(--ti-lowcode-popover-bg-color);
+        border-right-color: var(--te-common-bg-popover);
       }
     }
   }
 
   &[x-placement^='top'] {
     .popper__arrow {
+      border-color: transparent;
       &,
       &::after {
-        border-top-color: var(--ti-lowcode-popover-bg-color);
+        border-top-color: var(--te-common-bg-popover);
       }
     }
   }
@@ -171,17 +174,17 @@ td {
   &[x-placement^='left'] {
     .popper__arrow {
       right: -7px;
-
+      border-color: transparent;
       &,
       &::after {
-        border-left-color: var(--ti-lowcode-popover-bg-color);
+        border-left-color: var(--te-common-bg-popover);
       }
     }
   }
 
   .add-options {
     &.top {
-      border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
+      border-bottom: 1px solid var(--te-common-border-default);
       margin-bottom: 15px;
       overflow: hidden;
       display: flex;
@@ -207,16 +210,14 @@ td {
         margin-bottom: 4px;
 
         :deep(.tiny-form-item__label) {
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
+          color: var(--te-common-text-secondary);
         }
 
         :deep(.tiny-input__inner) {
-          color: var(--ti-lowcode-tootip-input-color);
-          background: var(--ti-lowcode-tootip-input-background-color);
-          border-color: var(--ti-lowcode-tootip-input-border-color);
+          border-color: var(--te-common-border-default);
 
           &:focus {
-            border-color: var(--ti-lowcode-canvas-handle-hover-bg);
+            border-color: var(--te-common-bg-primary-checked);
           }
         }
       }
@@ -247,7 +248,7 @@ td {
       }
 
       &.isBind {
-        color: var(--ti-lowcode-icon-bind-color);
+        color: var(--te-common-text-checked);
       }
     }
   }
diff --git a/packages/theme/dark/canvas.less b/packages/theme/dark/canvas.less
index c05a1c637..7e02a6934 100644
--- a/packages/theme/dark/canvas.less
+++ b/packages/theme/dark/canvas.less
@@ -1,28 +1,27 @@
+// 这里为canvas样式变量，canvas在暗色主题和亮色主题时，很多表现都一致，因此可以不使用common变量，而是直接用base变量
 #canvas-wrap {
-  --ti-lowcode-canvas-rect-border-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-canvas-hover-line-in-bg-color: rgba(0, 255, 0, 0.1);
-  --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-canvas-hover-line-in-forbid-bg-color: rgba(242, 48, 48, 0.3);
-  --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-base-text-color-2);
+  --ti-lowcode-canvas-rect-border-color: var(--te-common-border-checked);
+  --ti-lowcode-canvas-hover-line-in-bg-color: var(--te-base-green-140);
+  --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--te-common-color-error);
+  --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--te-base-red-140);
+  --ti-lowcode-canvas-choose-slot-border-color: var(--te-common-border-checked);
+  --ti-lowcode-canvas-choose-slot-color: var(--te-common-text-dark-inverse); // 暗色和亮色存在差异
   --ti-lowcode-canvas-corner-mark-left-color: var(--te-common-text-emphasize);
-  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--te-common-text-emphasize);
-  --ti-lowcode-canvas-corner-mark-bottom-right-border-color: #c2c2c2;
-  --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: #f5f5f5;
-  --ti-lowcode-canvas-corner-mark-right-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-canvas-corner-mark-right-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-canvas-select-corner-mark-left-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--ti-lowcode-base-primary-color-2);
+  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-canvas-corner-mark-bottom-right-border-color: var(--te-common-border-hover);
+  --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: var(--te-common-bg-primary-emphasize); // 暗色和亮色存在差异
+  --ti-lowcode-canvas-corner-mark-right-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-canvas-corner-mark-right-bg-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-canvas-select-corner-mark-left-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--te-common-bg-primary-checked);
 
   --ti-lowcode-canvas-footer-border-top-color: transparent; // canvas 底部面包屑 边框色
-  --ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-component-bg); // canvas 宽度拖动手柄 背景色
-  --ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色
-  --ti-lowcode-canvas-tab-handle-color: var(
-    --ti-lowcode-common-secondary-text-color
-  ); // canvas 宽度拖动手柄 两条竖线颜色
-  --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-hover-bg); // canvas 右键菜单背景
-  --ti-lowcode-canvas-menu-item-color: #adb0b8; // 右键菜单文字颜色
-  --ti-lowcode-canvas-menu-item-hover-bg-color: #5e5e5e;
-  --ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-2);
+  --ti-lowcode-canvas-tab-handle-bg: var(--te-common-bg-container); // canvas 宽度拖动手柄 背景色
+  --ti-lowcode-canvas-tab-handle-hover-bg: var(--te-common-bg-primary-checked); // canvas 宽度拖动手柄 hover 背景色
+  --ti-lowcode-canvas-tab-handle-color: var(--te-common-border-hover); // canvas 宽度拖动手柄 两条竖线颜色
+  --ti-lowcode-canvas-menu-bg: var(--te-common-bg-container); // canvas 右键菜单背景 暗色和亮色存在差异
+  --ti-lowcode-canvas-menu-item-color: var(--te-common-text-secondary); // 右键菜单文字颜色
+  --ti-lowcode-canvas-menu-item-hover-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-canvas-menu-border-color: var(--te-common-border-default);
   --ti-lowcode-canvas-menu-item-disabled-color: var(--te-common-text-weaken);
 }
diff --git a/packages/theme/dark/setting-style.less b/packages/theme/dark/setting-style.less
index 552eee7e3..7672f02a1 100644
--- a/packages/theme/dark/setting-style.less
+++ b/packages/theme/dark/setting-style.less
@@ -1,8 +1,7 @@
 :root {
-  --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-setting-style-font-color: var(--ti-lowcode-common-secondary-text-color); // light
-  --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-setting-style-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-setting-style-input-bg: var(--te-common-bg-primary-emphasize);
+  --ti-lowcode-setting-style-font-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-setting-style-input-font-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-setting-style-btn-font-color: var(--te-common-text-primary);
+  --ti-lowcode-setting-style-btn-border-color: var(--te-common-border-default);
 }
diff --git a/packages/theme/light/canvas.less b/packages/theme/light/canvas.less
index d9539b31e..de33eb032 100644
--- a/packages/theme/light/canvas.less
+++ b/packages/theme/light/canvas.less
@@ -1,8 +1,9 @@
+// 这里为canvas样式变量，canvas在暗色主题和亮色主题时，很多表现都一致，因此可以不使用common变量，而是直接用base变量
 #canvas-wrap {
   --ti-lowcode-canvas-rect-border-color: var(--te-common-border-checked);
-  --ti-lowcode-canvas-hover-line-in-bg-color: var(--te-base-rgba-25);
+  --ti-lowcode-canvas-hover-line-in-bg-color: var(--te-base-green-140);
   --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--te-common-color-error);
-  --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--te-base-rgba-26);
+  --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--te-base-red-140);
   --ti-lowcode-canvas-choose-slot-border-color: var(--te-common-border-checked);
   --ti-lowcode-canvas-choose-slot-color: var(--te-common-text-dark-inverse);
   --ti-lowcode-canvas-corner-mark-left-color: var(--te-common-text-emphasize);
@@ -14,13 +15,13 @@
   --ti-lowcode-canvas-select-corner-mark-left-color: var(--te-common-text-dark-inverse);
   --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--te-common-bg-primary-checked);
 
-  --ti-lowcode-canvas-footer-border-top-color: var(--ti-lowcode-common-border-color-4); // canvas 底部面包屑 边框色
-  --ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-secondary-text-color); // canvas 宽度拖动手柄 背景色
-  --ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色
-  --ti-lowcode-canvas-tab-handle-color: var(--ti-lowcode-common-text-color-2); // canvas 宽度拖动手柄 两条竖线颜色
-  --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-bg); // canvas 右键菜单背景
+  --ti-lowcode-canvas-footer-border-top-color: var(--te-common-border-default); // canvas 底部面包屑 边框色
+  --ti-lowcode-canvas-tab-handle-bg: var(--te-common-bg-container); // canvas 宽度拖动手柄 背景色
+  --ti-lowcode-canvas-tab-handle-hover-bg: var(--te-common-bg-primary-checked); // canvas 宽度拖动手柄 hover 背景色
+  --ti-lowcode-canvas-tab-handle-color: var(--te-common-border-hover); // canvas 宽度拖动手柄 两条竖线颜色
+  --ti-lowcode-canvas-menu-bg: var(--te-common-bg-default); // canvas 右键菜单背景
   --ti-lowcode-canvas-menu-item-color: var(--te-common-text-primary); // 右键菜单文字颜色
   --ti-lowcode-canvas-menu-item-hover-bg-color: var(--te-common-bg-container);
   --ti-lowcode-canvas-menu-border-color: var(--te-common-border-default);
-  --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-4);
+  --ti-lowcode-canvas-menu-item-disabled-color: var(--te-common-text-weaken);
 }
diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less
index 1782792b4..7672f02a1 100644
--- a/packages/theme/light/setting-style.less
+++ b/packages/theme/light/setting-style.less
@@ -1,11 +1,7 @@
 :root {
-  --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-setting-style-font-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-setting-style-title-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-setting-style-tab-bg-color: var(--ti-lowcode-base-bg-7);
-  --ti-lowcode-setting-style-drag-bar-bg: var(--ti-lowcode-base-bg);
-  --ti-lowcode-setting-style-spacing-bg: var(--te-base-gray-34);
+  --ti-lowcode-setting-style-input-bg: var(--te-common-bg-primary-emphasize);
+  --ti-lowcode-setting-style-font-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-setting-style-input-font-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-setting-style-btn-font-color: var(--te-common-text-primary);
+  --ti-lowcode-setting-style-btn-border-color: var(--te-common-border-default);
 }

From 41111957cf00985fc5e171e7f963d6e0c1db70b9 Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Thu, 5 Dec 2024 19:43:52 +0800
Subject: [PATCH 2/2] feat(theme/baseVariable): change base variable and common
 variable review

---
 packages/theme/base/src/base.less             |  4 ++--
 packages/theme/base/src/component-common.less | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less
index c564901d2..f2e75fe23 100644
--- a/packages/theme/base/src/base.less
+++ b/packages/theme/base/src/base.less
@@ -98,7 +98,7 @@
   --te-base-lime-100: #3b4d00;
   --te-base-lime-110: #808c46;
   --te-base-lime-120: #c1cc7a;
-  --te-base-lime-130: #3b4d00;
+  --te-base-lime-130: #e0e6ac;
 
   // expand-kelly
   --te-base-kelly-10: #edf7df;
@@ -171,7 +171,7 @@
   --te-base-blue-70: #0f5ed4;
   --te-base-blue-80: #0845a6;
   --te-base-blue-90: #022e7a;
-  --te-base-blue-10: #001a4a;
+  --te-base-blue-100: #001a4a;
   --te-base-blue-110: #202b3f;
   --te-base-blue-120: #7fa6d4;
   --te-base-blue-130: #b6d4f2;
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
index 5fe4a8597..a8eb1cef1 100644
--- a/packages/theme/base/src/component-common.less
+++ b/packages/theme/base/src/component-common.less
@@ -630,33 +630,33 @@
       padding: 12px;
       &[x-placement^='top'] {
         .popper__arrow {
-          border-top-color: var(--te-common-text-inverse);
+          border-top-color: var(--te-common-bg-popover);
           &.popper__arrow::after {
-            border-top-color: var(--te-common-text-inverse);
+            border-top-color: var(--te-common-bg-popover);
           }
         }
       }
       &[x-placement^='bottom'] {
         .popper__arrow {
-          border-bottom-color: var(--te-common-text-inverse);
+          border-bottom-color: var(--te-common-bg-popover);
           &.popper__arrow::after {
-            border-bottom-color: var(--te-common-text-inverse);
+            border-bottom-color: var(--te-common-bg-popover);
           }
         }
       }
       &[x-placement^='left'] {
         .popper__arrow {
-          border-left-color: var(--te-common-text-inverse);
+          border-left-color: var(--te-common-bg-popover);
           &.popper__arrow::after {
-            border-left-color: var(--te-common-text-inverse);
+            border-left-color: var(--te-common-bg-popover);
           }
         }
       }
       &[x-placement^='right'] {
         .popper__arrow {
-          border-right-color: var(--te-common-text-inverse);
+          border-right-color: var(--te-common-bg-popover);
           &.popper__arrow::after {
-            border-right-color: var(--te-common-text-inverse);
+            border-right-color: var(--te-common-bg-popover);
           }
         }
       }