From 1b3e3f6d7123325108a9bfd6d6569a2750519cb0 Mon Sep 17 00:00:00 2001 From: wenmine Date: Thu, 21 Nov 2024 15:46:49 +0800 Subject: [PATCH 1/5] fix(base-theme): change base css variables --- packages/common/component/SearchEmpty.vue | 2 +- .../src/components/inputs/ResetButton.vue | 2 +- .../src/components/spacing/SpacingGroup.vue | 2 +- packages/theme/base/src/base.less | 614 ++++++------------ packages/theme/base/src/common.less | 149 +++-- packages/theme/base/src/component-common.less | 10 +- packages/theme/light/canvas.less | 4 +- packages/theme/light/setting-style.less | 2 +- packages/theme/light/variable.less | 2 +- 9 files changed, 291 insertions(+), 496 deletions(-) diff --git a/packages/common/component/SearchEmpty.vue b/packages/common/component/SearchEmpty.vue index 74b801fc2d..adb9254333 100644 --- a/packages/common/component/SearchEmpty.vue +++ b/packages/common/component/SearchEmpty.vue @@ -30,7 +30,7 @@ export default { } .empty-text { font-size: 12px; - color: var(--te-base-text-color-3); + color: var(--te-common-text-weaken); } } diff --git a/packages/settings/styles/src/components/inputs/ResetButton.vue b/packages/settings/styles/src/components/inputs/ResetButton.vue index d315561197..540283740d 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); } diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue index 347d441110..524721db6c 100644 --- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue +++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue @@ -499,7 +499,7 @@ export default { line-height: 10px; letter-spacing: -0.2px; display: flex; - color: var(--te-base-text-color); + color: var(--te-common-text-primary); background: transparent; padding: 2px 4px; margin-left: -2px; diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less index a195c7a41d..d4a0e69679 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-15: #f0f0f0; + --te-base-gray-20: #e6e6e6; + --te-base-gray-25: #dbdbdb; + --te-base-gray-30: #c2c2c2; + --te-base-gray-35: #b4b5b8; + --te-base-gray-40: #8b8c8f; + --te-base-gray-45: #808080; + --te-base-gray-50: #595959; + --te-base-gray-55: #4d4e52; + --te-base-gray-60: #36383d; + --te-base-gray-65: #333; + --te-base-gray-70: #2a2c31; + --te-base-gray-80: #212329; + --te-base-gray-85: #1d312a; //暂时放这，他是绿色 + --te-base-gray-90: #191919; + --te-base-gray-100: #000; // 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 fe510a02b4..f01a6da555 100644 --- a/packages/theme/base/src/common.less +++ b/packages/theme/base/src/common.less @@ -1,52 +1,51 @@ // 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-50); // 二级文本色-次要信息/表单标签颜色/选块按钮默认色 #595959 + --te-common-text-weaken: var(--te-base-gray-45); // 三级文本色-弱化信息/提示文字 #808080 + --te-common-text-disabled: var(--te-base-gray-30); // 文本禁用色 #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-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-45); // 图标默认色 #808080 + --te-common-icon-disabled: var(--te-base-gray-30); // 图标禁用色 #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-25); // 线条-输入框默认色 #dbdbdb + --te-common-border-active: var(--te-base-gray-90); // 线条-输入框悬浮色/激活色 #191919 + --te-common-border-disabled: var(--te-base-gray-25); // 线条-禁用色 #dbdbdb + --te-common-border-secondary: var(--te-base-gray-50); // 线条-次要按钮描边色 #595959 + --te-common-border-prompt: var(--te-base-gray-25); // 线条-三级按钮默认色/表单内按钮 #dbdbdb + --te-common-border-hover: var(--te-base-gray-30); // 线条-按钮边框悬浮色/复选框/单选框，欧仁边框色 #c2c2c2 + --te-common-border-divider: var(--te-base-gray-20); //线条-白色背景分割线颜色 #e6e6e6 + --te-common-border-bg-divider: var(--te-base-gray-25); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #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); // 主色-背景色 #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-50); // 次要按钮-背景色 #595959 + --te-common-bg-prompt: var(--te-base-gray-20); // 导航按钮-背景色/选块-选中色 #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-15); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0 + --te-common-bg-switch: var(--te-base-gray-30); // 开关默认色 #c2c2c2 // 通用间距 --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等 @@ -55,49 +54,49 @@ :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-15); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #F0F0F0 + --te-common-text-secondary: var(--te-base-gray-35); // 二级文本色-次要信息/表单标签颜色 #B4B5B8 + --te-common-text-weaken: var(--te-base-gray-40); // 三级文本色-弱化信息/提示文字 #8B8C8F + --te-common-text-disabled: var(--te-base-gray-55); // 文本禁用色 #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-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-15); // 重要图标色 #F0F0F0 + --te-common-icon-secondary: var(--te-base-gray-40); // 图标默认色 #8B8C8F + --te-common-icon-disabled: var(--te-base-gray-30); // 图标禁用色 #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-55); // 线条-输入框默认色 #4D4E52 + --te-common-border-active: var(--te-base-gray-15); // 线条-输入框悬浮色/激活色 #F0F0F0 + --te-common-border-disabled: var(--te-base-gray-60); // 线条-禁用色 #36383D + --te-common-border-secondary: var(--te-base-gray-35); // 线条-次要按钮描边色/禁用色 #B4B5B8 + --te-common-border-prompt: var(--te-base-gray-55); // 线条-三级按钮默认色/表单内按钮 #4D4E52 + --te-common-border-hover: var(--te-base-gray-40); // 线条-按钮边框悬浮色 #8B8C8F + --te-common-border-divider: var(--te-base-gray-60); //线条-白色背景分割线颜色 #36383D + --te-common-border-bg-divider: var(--te-base-gray-55); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #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-15); // 主要按钮-背景色 #F0F0F0 + --te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色 #1476ff + --te-common-bg-primary-emphasize: var(--te-base-blue-60); // 主色-背景色 #1476ff + --te-common-bg-secondary: var(--te-base-gray-35); // 次要按钮-背景色 #B4B5B8 + --te-common-bg-prompt: var(--te-base-gray-40); // 导航按钮-背景色/选块-选中色 #8B8C8F --te-common-bg-container: var( - --te-base-gray-68 + --te-base-gray-60 ); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #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-70); // 浅编辑代码--背景色 #2a2c31 + --te-common-bg-tag: var(--te-base-gray-85); // tag标签-背景色 #1d312a + --te-common-bg-default: var(--te-base-gray-80); // 深色背景-输入框背景/面板背景色 #212329 + --te-common-bg-disabled: var(--te-base-gray-70); // 禁用/标签/下拉框多选标签 背景色 #2a2c31 + --te-common-bg-switch: var(--te-base-gray-55); // 开关默认色 #4D4E52 // 通用间距 --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 ecd0351942..20207b203c 100644 --- a/packages/theme/base/src/component-common.less +++ b/packages/theme/base/src/component-common.less @@ -359,7 +359,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 +391,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 { @@ -461,7 +461,7 @@ color: var(--te-common-text-primary); background-color: var(--te-common-bg-default); 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; } @@ -542,7 +542,7 @@ 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); + box-shadow: 0 2px 12px 0 var(--te-base-box-shadow-rgba-2); .tiny-notify__icon-zone { height: 24px; .tiny-notify__icon-status { @@ -606,7 +606,7 @@ &.tiny-tooltip__popper { background: var(--te-common-bg-default); 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); color: var(--te-common-text-primary); diff --git a/packages/theme/light/canvas.less b/packages/theme/light/canvas.less index d9539b31ed..b705b3275c 100644 --- a/packages/theme/light/canvas.less +++ b/packages/theme/light/canvas.less @@ -1,8 +1,8 @@ #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); diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less index 1782792b42..29df3a0b5f 100644 --- a/packages/theme/light/setting-style.less +++ b/packages/theme/light/setting-style.less @@ -7,5 +7,5 @@ --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-spacing-bg: var(--te-base-gray-50); } diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less index aa5d12c92c..be54fa5b47 100644 --- a/packages/theme/light/variable.less +++ b/packages/theme/light/variable.less @@ -329,7 +329,7 @@ // 样式设置 label 字体颜色 --ti-lowcode-style-setting-label-color: var(--te-common-bg-primary-checked); // 样式设置 label 背景颜色 - --ti-lowcode-style-setting-label-bg: var(--te-base-blue-25); + --ti-lowcode-style-setting-label-bg: var(--te-base-blue-140); // 多人协作item项hover背景色 --ti-lowcode-user-item-hover-bg: #f3f3f5; // 多人协作人员头像背景色 From 8d3683538a8f9f4f72a48a774a0976ec985dd8e7 Mon Sep 17 00:00:00 2001 From: wenmine Date: Thu, 21 Nov 2024 19:21:44 +0800 Subject: [PATCH 2/5] fix(base-theme): correct canvas less --- packages/theme/dark/canvas.less | 41 ++++++++++++++++---------------- packages/theme/light/canvas.less | 13 +++++----- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/theme/dark/canvas.less b/packages/theme/dark/canvas.less index c05a1c6375..4a5b69aaf8 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-emphasize); // 暗色和亮色存在差异 --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-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/light/canvas.less b/packages/theme/light/canvas.less index b705b3275c..de33eb0327 100644 --- a/packages/theme/light/canvas.less +++ b/packages/theme/light/canvas.less @@ -1,3 +1,4 @@ +// 这里为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-green-140); @@ -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); } From 884de5631cbeb4d7831c5edc37256996596a7309 Mon Sep 17 00:00:00 2001 From: wenmine Date: Tue, 26 Nov 2024 19:35:38 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix(base-theme):=20change=20variables:=20--?= =?UTF-8?q?ti-lowcode-toolbar-breadcrumb-color=20->--te-common-text-second?= =?UTF-8?q?ary=EF=BC=8C--ti-lowcode-canvas-wrap-bg=20->=20--te-common-bg-c?= =?UTF-8?q?ontainer=EF=BC=8C--ti-lowcode-common-secondary-text-color=20=20?= =?UTF-8?q?->--te-common-text-secondary=20=EF=BC=8Cand=20fix=20Tabs=20Grou?= =?UTF-8?q?pConfig=20style=EF=BC=8Cblock.less;--ti-lowcode-common-primary-?= =?UTF-8?q?text-color=20->=20--te-common-text-primary?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/CanvasDivider.vue | 4 +- .../src/components/CanvasResizeBorder.vue | 2 +- .../src/components/shortCutPopover.vue | 4 +- packages/canvas/layout/src/CanvasLayout.vue | 2 +- packages/common/component/BindI18n.vue | 2 +- packages/common/component/BlockLinkEvent.vue | 4 +- packages/common/component/MetaDescription.vue | 6 +- packages/common/component/MetaListActions.vue | 2 +- packages/common/component/MetaListItem.vue | 4 +- packages/common/component/MetaModal.vue | 2 +- packages/common/component/MetaModalItem.vue | 2 +- packages/common/component/MonacoEditor.vue | 2 +- packages/common/component/PluginBlockList.vue | 8 +-- packages/common/component/VideoGuide.vue | 2 +- .../CodeListConfigurator.vue | 2 +- .../HtmlAttributesConfigurator.vue | 6 +- .../LayoutGridConfigurator.vue | 8 +-- .../SelectIconConfigurator.vue | 6 +- .../SliderConfigurator.vue | 6 +- .../TabsGroupConfigurator.vue | 33 ++++----- packages/layout/src/DesignPlugins.vue | 4 +- packages/layout/src/DesignToolbars.vue | 2 +- packages/layout/src/ToolbarCollapse.vue | 2 +- packages/plugins/block/src/BlockConfig.vue | 2 +- packages/plugins/block/src/BlockEventList.vue | 2 +- .../plugins/block/src/BlockGroupArrange.vue | 4 +- .../plugins/block/src/BlockPropertyForm.vue | 4 +- .../plugins/block/src/BlockPropertyList.vue | 2 +- packages/plugins/block/src/Main.vue | 6 +- packages/plugins/bridge/src/BridgeSetting.vue | 2 +- .../datasource/src/DataSourceField.vue | 4 +- .../datasource/src/DataSourceRecordList.vue | 2 +- .../datasource/src/DataSourceTemplate.vue | 4 +- .../plugins/datasource/src/DataSourceType.vue | 2 +- packages/plugins/i18n/src/Main.vue | 2 +- .../src/meta/block/src/BlockDetail.vue | 2 +- .../src/meta/block/src/BlockGroupArrange.vue | 4 +- .../src/meta/block/src/BlockGroupSort.vue | 4 +- .../src/meta/block/src/BlockGroupTransfer.vue | 2 +- .../block/src/BlockGroupTransferPanel.vue | 2 +- .../materials/src/meta/component/src/Main.vue | 2 +- packages/plugins/schema/src/Main.vue | 2 +- .../plugins/state/src/CreateRemoteAPI.vue | 6 +- packages/plugins/state/src/CreateStore.vue | 2 +- packages/plugins/state/src/CreateVariable.vue | 2 +- packages/plugins/state/src/DataSourceList.vue | 4 +- packages/plugins/state/src/Main.vue | 6 +- packages/plugins/tree/src/Main.vue | 9 +-- .../tutorial/src/TutorialVideoPanel.vue | 4 +- packages/settings/design/src/App.vue | 3 +- .../src/components/ArrayConfigItemForm.vue | 4 +- .../design/src/components/PropertyCanvas.vue | 12 ++-- .../design/src/components/SettingPanel.vue | 6 +- .../components/BindEventsDialogContent.vue | 2 +- .../settings/props/src/components/Empty.vue | 2 +- .../props/src/components/groups/LifeCycle.vue | 10 +-- .../src/components/groups/TableColumn.vue | 2 +- .../src/components/groups/TablePager.vue | 2 +- .../components/inputs/DraggableOptions.vue | 2 +- packages/settings/styles/src/Main.vue | 2 +- .../components/background/BackgroundGroup.vue | 2 +- .../components/background/ImageSetting.vue | 6 +- .../components/background/RadialGradient.vue | 2 +- .../src/components/border/BorderGroup.vue | 2 +- .../components/classNamesContainer/index.vue | 2 +- .../src/components/inputs/ImageSelect.vue | 2 +- .../src/components/inputs/InputSelect.vue | 2 +- .../src/components/inputs/ModalMask.vue | 2 +- .../src/components/inputs/NumericSelect.vue | 2 +- .../src/components/layout/LayoutGroup.vue | 46 +----------- .../styles/src/components/size/SizeGroup.vue | 1 + .../src/components/spacing/SpacingSetting.vue | 6 +- .../components/typography/TypographyGroup.vue | 1 + .../components/typography/TypographyMore.vue | 6 +- packages/theme/base/src/common.less | 12 ++-- .../theme/base/src/page/base-config-page.less | 4 +- packages/theme/dark/base.less | 2 - packages/theme/dark/block.less | 70 +++++++++---------- packages/theme/dark/datasource.less | 18 ++--- packages/theme/dark/gpt-dialog.less | 2 +- packages/theme/dark/materials.less | 10 +-- packages/theme/dark/metaComponent.less | 7 +- packages/theme/dark/pageManage.less | 10 +-- packages/theme/dark/plugin-js.less | 2 +- packages/theme/dark/setting-style.less | 1 - packages/theme/dark/settings.less | 3 +- packages/theme/dark/tree.less | 10 +-- packages/theme/dark/variable.less | 68 +++++++----------- packages/theme/light/base.less | 2 - packages/theme/light/block.less | 62 +++++++--------- packages/theme/light/datasource.less | 18 ++--- packages/theme/light/gpt-dialog.less | 2 +- packages/theme/light/materials.less | 16 ++--- packages/theme/light/metaComponent.less | 7 +- packages/theme/light/pageManage.less | 8 +-- packages/theme/light/setting-style.less | 1 - packages/theme/light/settings.less | 1 - packages/theme/light/toolbar.less | 2 +- packages/theme/light/tree.less | 11 ++- packages/theme/light/variable.less | 40 ++++------- packages/toolbars/collaboration/src/Main.vue | 2 +- .../generate-code/src/FileSelector.vue | 49 ++++--------- packages/toolbars/logout/src/Main.vue | 2 +- packages/toolbars/media/src/Main.vue | 4 +- 104 files changed, 326 insertions(+), 451 deletions(-) diff --git a/packages/canvas/container/src/components/CanvasDivider.vue b/packages/canvas/container/src/components/CanvasDivider.vue index 9f0b9dcd51..0b333fcd1c 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; } diff --git a/packages/canvas/container/src/components/CanvasResizeBorder.vue b/packages/canvas/container/src/components/CanvasResizeBorder.vue index ef310dd225..136d9d46e3 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 e01f26c743..69e49ac462 100644 --- a/packages/canvas/container/src/components/shortCutPopover.vue +++ b/packages/canvas/container/src/components/shortCutPopover.vue @@ -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 { @@ -171,7 +171,7 @@ export default { 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 bb75e32265..9ddbbfd1e1 100644 --- a/packages/canvas/layout/src/CanvasLayout.vue +++ b/packages/canvas/layout/src/CanvasLayout.vue @@ -21,7 +21,7 @@ const siteCanvasStyle = computed(() => { diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue index 89ab3a67a2..08c15032cf 100644 --- a/packages/settings/styles/src/components/size/SizeGroup.vue +++ b/packages/settings/styles/src/components/size/SizeGroup.vue @@ -487,6 +487,7 @@ span { flex: 0 0 54px; padding: 0 2px; line-height: 24px; + color: var(--te-common-text-secondary); } } diff --git a/packages/settings/styles/src/components/spacing/SpacingSetting.vue b/packages/settings/styles/src/components/spacing/SpacingSetting.vue index c906e2dba8..631f529a1c 100644 --- a/packages/settings/styles/src/components/spacing/SpacingSetting.vue +++ b/packages/settings/styles/src/components/spacing/SpacingSetting.vue @@ -121,7 +121,7 @@ export default { align-items: center; .icon { font-size: 16px; - color: var(--ti-lowcode-toolbar-breadcrumb-color); + color: var(--te-common-text-secondary); margin-right: 18px; } @@ -143,7 +143,7 @@ export default { line-height: 60px; text-align: center; border: 1px solid var(--ti-lowcode-toolbar-border-color); - background: var(--ti-lowcode-canvas-wrap-bg); + background: var(--te-common-bg-container); cursor: pointer; box-sizing: border-box; @@ -179,7 +179,7 @@ export default { margin-left: 3%; text-align: center; border: 1px solid var(--ti-lowcode-toolbar-border-color); - background: var(--ti-lowcode-canvas-wrap-bg); + background: var(--te-common-bg-container); cursor: pointer; transition: 0.3s; box-sizing: border-box; diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue index 9d6c5ac131..dca82610a9 100644 --- a/packages/settings/styles/src/components/typography/TypographyGroup.vue +++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue @@ -497,6 +497,7 @@ export default { diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue index 65c24e0441..9c8d0ac396 100644 --- a/packages/toolbars/media/src/Main.vue +++ b/packages/toolbars/media/src/Main.vue @@ -441,7 +441,7 @@ export default { height: var(--base-top-panel-height); line-height: var(--base-top-panel-height); padding: 0 7px; - color: var(--ti-lowcode-toolbar-breadcrumb-color); + color: var(--te-common-text-secondary); display: inline-block; & > span { @@ -480,7 +480,7 @@ export default { } &.active { svg { - color: var(--ti-lowcode-common-primary-color); + color: var(--te-common-text-checked); } } } From 29d9ab3357f28381f49a6ad70f825537ccf22ce1 Mon Sep 17 00:00:00 2001 From: wenmine Date: Mon, 2 Dec 2024 22:22:53 +0800 Subject: [PATCH 4/5] fix(base-theme): change variables --- packages/common/component/MetaCodeEditor.vue | 2 +- packages/common/component/SearchEmpty.vue | 1 - packages/plugins/block/src/Main.vue | 2 +- .../datasource/src/DataSourceRecordList.vue | 3 +-- packages/plugins/i18n/src/Main.vue | 6 +++--- .../src/meta/block/src/BlockGroup.vue | 2 +- .../materials/src/meta/component/src/Main.vue | 2 +- packages/plugins/page/src/PageInputOutput.vue | 2 +- packages/plugins/script/src/Main.vue | 2 +- packages/plugins/state/src/CreateVariable.vue | 21 ------------------- packages/settings/design/src/App.vue | 2 -- .../src/components/ArrayConfigItemForm.vue | 4 ++-- .../design/src/components/PropertyCanvas.vue | 2 +- .../design/src/components/PropertyList.vue | 2 +- .../design/src/components/SettingPanel.vue | 2 +- packages/theme/base/src/base.less | 1 - packages/theme/base/src/common.less | 2 +- packages/theme/dark/bridge.less | 12 +++++------ packages/theme/dark/datasource.less | 4 ++-- packages/theme/dark/events.less | 16 +++++++------- packages/theme/dark/i18n.less | 14 ++++++++++--- packages/theme/dark/tutorial.less | 4 ++-- packages/theme/light/bridge.less | 12 +++++------ packages/theme/light/i18n.less | 14 ++++++------- packages/theme/light/tutorial.less | 4 ++-- 25 files changed, 60 insertions(+), 78 deletions(-) diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue index d74b7c700d..14f9924525 100644 --- a/packages/common/component/MetaCodeEditor.vue +++ b/packages/common/component/MetaCodeEditor.vue @@ -321,7 +321,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); } } diff --git a/packages/common/component/SearchEmpty.vue b/packages/common/component/SearchEmpty.vue index adb9254333..a7eaa6232f 100644 --- a/packages/common/component/SearchEmpty.vue +++ b/packages/common/component/SearchEmpty.vue @@ -26,7 +26,6 @@ export default { .empty-icon { width: 80px; height: 80px; - color: var(--ti-lowcode-datasource-common-empty-color); } .empty-text { font-size: 12px; diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue index 18e82d794f..50d27d6121 100644 --- a/packages/plugins/block/src/Main.vue +++ b/packages/plugins/block/src/Main.vue @@ -538,7 +538,7 @@ export default { font-size: 12px; color: var(--ti-lowcode-materials-block-group-delete-popover-title-color); .icon { - color: var(--ti-lowcode-warning-color); + color: var(--te-common-color-warning); width: 16px; height: 16px; } diff --git a/packages/plugins/datasource/src/DataSourceRecordList.vue b/packages/plugins/datasource/src/DataSourceRecordList.vue index 32d690392d..10ddb706e8 100644 --- a/packages/plugins/datasource/src/DataSourceRecordList.vue +++ b/packages/plugins/datasource/src/DataSourceRecordList.vue @@ -614,7 +614,7 @@ export default { font-size: 12px; text-align: left; padding: 0; - color: var(--ti-lowcode-base-text-color); + color: var(--te-common-text-primary); .icon-download { margin: 0 1px 4px 0; font-size: 16px; @@ -630,7 +630,6 @@ export default { .empty-icon { width: 50px; height: 50px; - color: var(--ti-lowcode-datasource-common-empty-color); } .add-column { color: var(--ti-lowcode-datasource-json-border-color); diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue index d90ca377f1..5b30193472 100644 --- a/packages/plugins/i18n/src/Main.vue +++ b/packages/plugins/i18n/src/Main.vue @@ -515,12 +515,12 @@ export default { font-size: 12px; text-align: left; padding: 0; - color: var(--ti-lowcode-base-text-color); + color: var(--te-common-text-primary); svg { font-size: 16px; } .tiny-button.tiny-button--text { - color: var(--ti-lowcode-base-text-color); + color: var(--te-common-text-primary); } } } @@ -547,7 +547,7 @@ export default { padding: 20px; svg { font-size: 20px; - color: var(--ti-lowcode-warning-color); + color: var(--te-common-color-warning); } .delete-tip { margin-left: 5px; diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue index 11a0c71d8d..393e678d9b 100644 --- a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue +++ b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue @@ -489,7 +489,7 @@ export default { font-size: 12px; color: var(--ti-lowcode-materials-block-group-delete-popover-title-color); .icon { - color: var(--ti-lowcode-warning-color); + color: var(--te-common-color-warning); width: 16px; height: 16px; } diff --git a/packages/plugins/materials/src/meta/component/src/Main.vue b/packages/plugins/materials/src/meta/component/src/Main.vue index db044a5d5a..286c8872bd 100644 --- a/packages/plugins/materials/src/meta/component/src/Main.vue +++ b/packages/plugins/materials/src/meta/component/src/Main.vue @@ -159,7 +159,7 @@ export default { svg { font-size: 40px; vertical-align: middle; - color: var(--ti-lowcode-component-icon-color); + color: var(--te-common-icon-secondary); overflow: hidden; } } diff --git a/packages/plugins/page/src/PageInputOutput.vue b/packages/plugins/page/src/PageInputOutput.vue index 83663c81b7..de99e0ad84 100644 --- a/packages/plugins/page/src/PageInputOutput.vue +++ b/packages/plugins/page/src/PageInputOutput.vue @@ -128,7 +128,7 @@ export default { margin-top: 12px; } .edit-btn-icon { - color: var(--ti-lowcode-common-text-main-color); + color: var(--te-common-text-secondary); margin-right: 6px; } :deep(.edit-btn) { diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue index a4d1251cdb..129420d0ef 100644 --- a/packages/plugins/script/src/Main.vue +++ b/packages/plugins/script/src/Main.vue @@ -151,7 +151,7 @@ export default { .dots { width: 10px; height: 10px; - background: var(--ti-lowcode-warning-color-1); + background: var(--te-common-color-warning); border-radius: 50%; position: absolute; top: 5px; diff --git a/packages/plugins/state/src/CreateVariable.vue b/packages/plugins/state/src/CreateVariable.vue index 2be1e7e3d0..0bb46c453b 100644 --- a/packages/plugins/state/src/CreateVariable.vue +++ b/packages/plugins/state/src/CreateVariable.vue @@ -500,24 +500,3 @@ export default { } } - - diff --git a/packages/settings/design/src/App.vue b/packages/settings/design/src/App.vue index 93e062b307..7ae0c6e17b 100644 --- a/packages/settings/design/src/App.vue +++ b/packages/settings/design/src/App.vue @@ -97,9 +97,7 @@ export default { diff --git a/packages/canvas/container/src/components/CanvasAction.vue b/packages/canvas/container/src/components/CanvasAction.vue index 04284bf0e6..c3a2ba3f53 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/shortCutPopover.vue b/packages/canvas/container/src/components/shortCutPopover.vue index 69e49ac462..4722705e04 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 { @@ -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,7 +164,7 @@ 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; diff --git a/packages/common/component/BlockLinkEvent.vue b/packages/common/component/BlockLinkEvent.vue index 9869b0d51d..2e0627f523 100644 --- a/packages/common/component/BlockLinkEvent.vue +++ b/packages/common/component/BlockLinkEvent.vue @@ -198,7 +198,7 @@ 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; diff --git a/packages/common/component/ConfigCollapse.vue b/packages/common/component/ConfigCollapse.vue index 1ba8b20e66..01e51fa0ba 100644 --- a/packages/common/component/ConfigCollapse.vue +++ b/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); } } } diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue index 39f81f8e31..23c7915f3b 100644 --- a/packages/common/component/ConfigItem.vue +++ b/packages/common/component/ConfigItem.vue @@ -673,7 +673,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; diff --git a/packages/common/component/EmptyTip.vue b/packages/common/component/EmptyTip.vue index 8e72800e2a..6b03517550 100644 --- a/packages/common/component/EmptyTip.vue +++ b/packages/common/component/EmptyTip.vue @@ -33,12 +33,12 @@ export default { diff --git a/packages/common/component/MetaDescription.vue b/packages/common/component/MetaDescription.vue index 5d12141371..56c4ed5517 100644 --- a/packages/common/component/MetaDescription.vue +++ b/packages/common/component/MetaDescription.vue @@ -93,19 +93,19 @@ export default { padding-inline: 11px 8px; width: auto; color: var(--te-common-text-secondary); - background-color: var(--ti-lowcode-toolbar-view-hover-bg); + 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(--te-common-text-secondary); @@ -119,7 +119,7 @@ export default { cursor: pointer; &.link { display: block; - color: var(--ti-lowcode-text-link-color); + color: var(--te-common-text-link); &:hover { text-decoration: underline; } diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue index b00bcab1c1..9d42792d44 100644 --- a/packages/common/component/PluginBlockList.vue +++ b/packages/common/component/PluginBlockList.vue @@ -630,7 +630,7 @@ export default { } .block-detail-icon { - color: var(--ti-lowcode-base-gray-50); + color: var(--te-common-icon-secondary); &:hover { cursor: pointer; color: var(--ti-lowcode-component-block-list-setting-btn-hover-color); diff --git a/packages/common/component/PluginSetting.vue b/packages/common/component/PluginSetting.vue index b822f87b12..8228261794 100644 --- a/packages/common/component/PluginSetting.vue +++ b/packages/common/component/PluginSetting.vue @@ -129,7 +129,7 @@ export default { top: 0; width: var(--base-collection-panel-width); height: 100%; - border-right: 1px solid var(--ti-lowcode-toolbar-border-color); + border-right: 1px solid var(--te-common-border-default); background: var(--ti-lowcode-plugin-setting-panel-bg, --ti-lowcode-toolbar-bg); overflow: hidden; border-left: 1px solid var(--ti-lowcode-plugin-panel-header-border-bottom-color); diff --git a/packages/common/component/ToolbarBase.vue b/packages/common/component/ToolbarBase.vue index ffc2a1f88b..1272cb4d87 100644 --- a/packages/common/component/ToolbarBase.vue +++ b/packages/common/component/ToolbarBase.vue @@ -67,7 +67,7 @@ export default { diff --git a/packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue b/packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue index 8005b8926d..587eff76ef 100644 --- a/packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue +++ b/packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue @@ -319,7 +319,7 @@ export default { } :deep(.splitpanes__splitter) { - background: var(--ti-lowcode-toolbar-view-hover-bg); + background: var(--te-common-bg-container); border-left: var(--ti-lowcode-tabs-border-color); } diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue index 6e4989a038..f084357570 100644 --- a/packages/configurator/src/slot-configurator/SlotConfigurator.vue +++ b/packages/configurator/src/slot-configurator/SlotConfigurator.vue @@ -141,7 +141,7 @@ export default { } .slot-name { width: 30%; - color: var(--ti-lowcode-dialog-font-color); + color: var(--te-common-text-primary); font-size: 12px; display: flex; justify-content: space-between; diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue index 235f4ce905..1840bcf841 100644 --- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue +++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue @@ -261,11 +261,11 @@ const change = (item) => { &:hover { background-color: var(--te-common-bg-prompt); - color: var(--te-common-text-weaken); + color: var(--te-common-text-secondary); border-radius: 4px; } :deep(.tiny-dropdown__trigger:not(.tiny-dropdown__caret-button):not(.is-disabled)):hover { - color: var(--te-common-text-weaken); + color: var(--te-common-text-secondary); } } } diff --git a/packages/design-core/src/preview/src/Toolbar.vue b/packages/design-core/src/preview/src/Toolbar.vue index 24cc1f0157..008ec2c18c 100644 --- a/packages/design-core/src/preview/src/Toolbar.vue +++ b/packages/design-core/src/preview/src/Toolbar.vue @@ -69,7 +69,7 @@ export default { width: 100%; height: var(--base-top-panel-height); text-align: center; - background-color: var(--ti-lowcode-common-layout-bg); + background-color: var(--te-common-bg-default); position: relative; z-index: 1001; border-bottom: 1px solid var(--ti-lowcode-toolbar-border-bottom-color); diff --git a/packages/engine-cli/template/designer/src/configurators/MyInputConfigurator.vue b/packages/engine-cli/template/designer/src/configurators/MyInputConfigurator.vue index 47a9b11e53..26dbd6be85 100644 --- a/packages/engine-cli/template/designer/src/configurators/MyInputConfigurator.vue +++ b/packages/engine-cli/template/designer/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); } } diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue index b4ccfbaa9e..d7a57941e3 100644 --- a/packages/layout/src/DesignPlugins.vue +++ b/packages/layout/src/DesignPlugins.vue @@ -210,7 +210,7 @@ export default { display: flex; flex-direction: column; justify-content: space-between; - background: var(--ti-lowcode-common-layout-bg); + background: var(--te-common-bg-default); box-sizing: border-box; z-index: 1000; border-right: 1px solid var(--ti-lowcode-plugin-panel-border-right-color); diff --git a/packages/layout/src/DesignToolbars.vue b/packages/layout/src/DesignToolbars.vue index 31220c4e5a..f4fbf84216 100644 --- a/packages/layout/src/DesignToolbars.vue +++ b/packages/layout/src/DesignToolbars.vue @@ -89,7 +89,7 @@ export default { width: 100%; height: var(--base-top-panel-height); text-align: center; - background-color: var(--ti-lowcode-common-layout-bg); + background-color: var(--te-common-bg-default); position: relative; z-index: 1001; border-bottom: 1px solid var(--ti-lowcode-toolbar-border-bottom-color); diff --git a/packages/plugins/block/src/BlockPropertyForm.vue b/packages/plugins/block/src/BlockPropertyForm.vue index 907ca90c42..7c90847639 100644 --- a/packages/plugins/block/src/BlockPropertyForm.vue +++ b/packages/plugins/block/src/BlockPropertyForm.vue @@ -297,7 +297,7 @@ export default { height: 100%; padding: 20px; background-color: var(--te-common-bg-default); - border-right: 1px solid var(--ti-lowcode-toolbar-border-color); + border-right: 1px solid var(--te-common-border-default); } .config-list { diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue index 50d27d6121..6332500bc9 100644 --- a/packages/plugins/block/src/Main.vue +++ b/packages/plugins/block/src/Main.vue @@ -525,7 +525,7 @@ export default { .popper__arrow { &, &::after { - border-right-color: var(--ti-lowcode-common-component-hover-bg); + border-right-color: var(--te-common-bg-container); } } } diff --git a/packages/plugins/block/src/SaveNewBlock.vue b/packages/plugins/block/src/SaveNewBlock.vue index 28fdb0476a..51b214e1ed 100644 --- a/packages/plugins/block/src/SaveNewBlock.vue +++ b/packages/plugins/block/src/SaveNewBlock.vue @@ -135,6 +135,6 @@ export default { diff --git a/packages/plugins/bridge/src/BridgeSetting.vue b/packages/plugins/bridge/src/BridgeSetting.vue index 17735edde1..2c79dd5e0a 100644 --- a/packages/plugins/bridge/src/BridgeSetting.vue +++ b/packages/plugins/bridge/src/BridgeSetting.vue @@ -354,7 +354,7 @@ export default { } .del:hover { - background-color: var(--ti-lowcode-delete-button-hover-bg); + background-color: var(--te-common-color-error); } } .cdn-label-wrap { diff --git a/packages/plugins/datasource/src/DataSourceList.vue b/packages/plugins/datasource/src/DataSourceList.vue index 631b84736b..9676700ecc 100644 --- a/packages/plugins/datasource/src/DataSourceList.vue +++ b/packages/plugins/datasource/src/DataSourceList.vue @@ -152,7 +152,7 @@ export default { display: flex; align-items: center; justify-content: space-between; - color: var(--ti-lowcode-base-gray-90); + color: var(--te-common-text-primary); .item-name { display: flex; align-items: center; diff --git a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue index ed81a4a5a0..fc656f5a15 100644 --- a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue +++ b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue @@ -112,7 +112,7 @@ export default { .monaco-editor { height: 120px; margin-top: 8px; - border: 1px solid var(--ti-lowcode-base-gray-101); + border: 1px solid var(--te-common-border-divider); border-radius: 4px; } } diff --git a/packages/plugins/datasource/src/DataSourceRemoteForm.vue b/packages/plugins/datasource/src/DataSourceRemoteForm.vue index 9bee5dcddb..fe2f016148 100644 --- a/packages/plugins/datasource/src/DataSourceRemoteForm.vue +++ b/packages/plugins/datasource/src/DataSourceRemoteForm.vue @@ -100,18 +100,6 @@ export default { width: 100px; border: none; } - :deep(.tiny-input-group__prepend) { - background: var(--ti-lowcode-datasource-respones-select-color-bg); - border-color: var(--ti-lowcode-datasource-select-border-color); - .tiny-input-suffix { - .tiny-input-display-only { - .tiny-input__inner { - border-color: var(--ti-lowcode-datasource-select-border-right-color-bg); - border-left: none; - } - } - } - } :deep(.tiny-input-suffix) { width: 100px; .tiny-input__inner { @@ -123,9 +111,6 @@ export default { border: none; background: var(--ti-lowcode-datasource-respones-color-bg); } - .requestBtn { - color: var(--ti-lowcode-datasource-respones-border-color-bg); - } :deep(.border-input) { input { border-radius: 0; diff --git a/packages/plugins/datasource/src/DataSourceRemotePanel.vue b/packages/plugins/datasource/src/DataSourceRemotePanel.vue index e39ecacdc5..6d4d4f5801 100644 --- a/packages/plugins/datasource/src/DataSourceRemotePanel.vue +++ b/packages/plugins/datasource/src/DataSourceRemotePanel.vue @@ -305,19 +305,6 @@ export default { :deep(.tiny-tabs__content) { margin: 12px 0; } - :deep(.is-active) { - .tiny-tabs__item__title { - color: var(--ti-lowcode-datasource-tabs-bottom-border-color); - } - } - :deep(.tiny-tabs__item__title) { - font-size: 14px; - } - } - :deep(.tiny-tabs__item__title) { - margin-right: 20px; - margin-left: 15px; - color: var(--ti-lowcode-datasource-label-color); } } } diff --git a/packages/plugins/datasource/src/DataSourceRemoteParameter.vue b/packages/plugins/datasource/src/DataSourceRemoteParameter.vue index 18e8727a54..9fd88ef83b 100644 --- a/packages/plugins/datasource/src/DataSourceRemoteParameter.vue +++ b/packages/plugins/datasource/src/DataSourceRemoteParameter.vue @@ -43,7 +43,7 @@ export default { .monaco-editor { height: 180px; margin-top: 8px; - border: 1px solid var(--ti-lowcode-base-gray-101); + border: 1px solid var(--te-common-border-divider); border-radius: 4px; } diff --git a/packages/plugins/datasource/src/RemoteDataAdapterForm.vue b/packages/plugins/datasource/src/RemoteDataAdapterForm.vue index 464e7cc9b2..88f1be9487 100644 --- a/packages/plugins/datasource/src/RemoteDataAdapterForm.vue +++ b/packages/plugins/datasource/src/RemoteDataAdapterForm.vue @@ -55,12 +55,11 @@ export default { justify-content: space-between; align-items: center; padding: 8px 12px; - background: var(--ti-lowcode-datasource-toolbar-bg); margin-top: 12px; - font-size: 14px; + font-size: 12px; div { - color: var(--ti-lowcode-datasource-toolbar-breadcrumb-color); + color: var(--te-common-text-secondary); } .icon-del { @@ -73,7 +72,7 @@ export default { min-height: 120px; height: 100%; margin-top: 8px; - border: 1px solid var(--ti-lowcode-base-gray-101); + border: 1px solid var(--te-common-border-divider); border-radius: 4px; } diff --git a/packages/plugins/materials/src/meta/block/src/BlockDetail.vue b/packages/plugins/materials/src/meta/block/src/BlockDetail.vue index adafb52c74..84841d3f6c 100644 --- a/packages/plugins/materials/src/meta/block/src/BlockDetail.vue +++ b/packages/plugins/materials/src/meta/block/src/BlockDetail.vue @@ -115,7 +115,7 @@ export default { diff --git a/packages/plugins/page/src/PageGeneral.vue b/packages/plugins/page/src/PageGeneral.vue index c141518e1d..4ae3f3d1de 100644 --- a/packages/plugins/page/src/PageGeneral.vue +++ b/packages/plugins/page/src/PageGeneral.vue @@ -238,7 +238,6 @@ export default { .tiny-input-group__prepend { border: 1px solid var(--ti-lowcode-page-manage-input-group-border-color); background: var(--ti-lowcode-page-manage-input-group-color); - border-right: 1px solid var(--ti-lowcode-page-manage-input-group-border-right-color); } .page-type-radio { color: var(--ti-lowcode-page-manage-title-background-text-color); @@ -256,7 +255,7 @@ export default { } } .tip { - color: var(--ti-lowcode-page-manage-tip-border-color); + color: var(--ti-lowcode-page-manage-tip-text-color); font-size: 12px; border-radius: 3px; display: flex; @@ -279,7 +278,6 @@ export default { .tiny-select-dropdown.parent-fold-select-dropdown { .tiny-tree { background-color: var(--ti-lowcode-page-manage-tree-text-background-color); - .tiny-tree-node { &.is-current { .tiny-tree-node__content { diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue index 4558d22746..7dfdac0de4 100644 --- a/packages/plugins/page/src/PageSetting.vue +++ b/packages/plugins/page/src/PageSetting.vue @@ -392,12 +392,6 @@ export default { diff --git a/packages/plugins/state/src/DataSourceRightPanel.vue b/packages/plugins/state/src/DataSourceRightPanel.vue index 578e5d9c35..96e0234792 100644 --- a/packages/plugins/state/src/DataSourceRightPanel.vue +++ b/packages/plugins/state/src/DataSourceRightPanel.vue @@ -113,7 +113,7 @@ export default { .data-source-right-panel { width: 442px; height: 100%; - border-right: 1px solid var(--ti-lowcode-toolbar-border-color); + border-right: 1px solid var(--te-common-border-default); background: var(--ti-lowcode-toolbar-bg); position: absolute; left: calc(var(--base-left-panel-width) - 6px); @@ -126,7 +126,7 @@ export default { height: 45px; padding: 0 12px; color: var(--ti-lowcode-toolbar-icon-color); - background: var(--ti-lowcode-toolbar-view-hover-bg); + background: var(--te-common-bg-container); border-bottom: 1px solid var(--ti-lowcode-tabs-border-color); } } diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue index 1cd387c42a..12fafb80cf 100644 --- a/packages/plugins/state/src/Main.vue +++ b/packages/plugins/state/src/Main.vue @@ -443,7 +443,7 @@ export default { .data-source-right-panel { width: 492px; height: 100%; - border-right: 1px solid var(--ti-lowcode-toolbar-border-color); + border-right: 1px solid var(--te-common-border-default); background: var(--te-common-bg-default); position: absolute; left: var(--base-left-panel-width); @@ -495,21 +495,12 @@ export default { :deep(.tiny-tabs__item) { flex: 1 1 auto; text-align: center; - color: var(--te-common-text-primary); - &:not(.is-active) { - background-color: var(--ti-lowcode-data-radio-group-bg); - } } :deep(.tiny-tabs__nav) { float: none; display: flex; flex-wrap: wrap; - .tiny-tabs__item { - &.is-active { - background-color: var(--ti-lowcode-data-radio-group-active-bg); - } - } } :deep(.tiny-tabs__content) { diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue index 9e97f7fca1..f87180d48d 100644 --- a/packages/plugins/tree/src/Main.vue +++ b/packages/plugins/tree/src/Main.vue @@ -348,13 +348,13 @@ export default { :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__row) { background-color: var(--te-common-bg-default); &:hover { - background-color: var(--ti-lowcode-common-component-hover-bg); + background-color: var(--te-common-bg-container); } } :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__row:not(.row__hover):nth-child(2n)) { background-color: var(--te-common-bg-default); &:hover { - background-color: var(--ti-lowcode-common-component-hover-bg); + background-color: var(--te-common-bg-container); } } :deep(.tiny-grid-body__row.nav-tree .tiny-grid-cell) { diff --git a/packages/settings/design/src/App.vue b/packages/settings/design/src/App.vue index 7ae0c6e17b..1e3c55f175 100644 --- a/packages/settings/design/src/App.vue +++ b/packages/settings/design/src/App.vue @@ -98,10 +98,8 @@ export default { diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue index 08c15032cf..193cbdaf42 100644 --- a/packages/settings/styles/src/components/size/SizeGroup.vue +++ b/packages/settings/styles/src/components/size/SizeGroup.vue @@ -563,7 +563,7 @@ span { width: 20px; height: 20px; font-size: 18px; - color: var(--ti-lowcode-description-minor-color); + color: var(--te-common-text-secondary); margin-left: 4px; border-radius: 2px; &.selected { diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue index 524721db6c..2359e4753c 100644 --- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue +++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue @@ -3,10 +3,11 @@
@@ -21,7 +22,7 @@ " data-automation-id="margin-top-button" aria-label="Margin top button" - class="tb-path-color" + class="padding-color" @click="clickMargin(SPACING_PROPERTY.MarginTop, $event)" > @@ -39,7 +40,7 @@ " data-automation-id="margin-right-button" aria-label="Margin right button" - class="lr-path-color" + class="padding-color" @click="clickMargin(SPACING_PROPERTY.MarginRight, $event)" > @@ -57,7 +58,7 @@ " data-automation-id="margin-bottom-button" aria-label="Margin bottom button" - class="tb-path-color" + class="padding-color" @click="clickMargin(SPACING_PROPERTY.MarginBottom, $event)" > @@ -75,37 +76,55 @@ " data-automation-id="margin-left-button" aria-label="Margin left button" - class="lr-path-color" + class="margin-color" @click="clickMargin(SPACING_PROPERTY.MarginLeft, $event)" > - - + + - - + +
- + @@ -197,7 +223,7 @@ " data-automation-id="padding-right-button" aria-label="Padding right button" - class="lr-path-color" + class="padding-color" @click="clickPadding(SPACING_PROPERTY.PaddingRight, $event)" > @@ -215,7 +241,7 @@ " data-automation-id="padding-bottom-button" aria-label="Padding bottom button" - class="tb-path-color" + class="padding-color" @click="clickPadding(SPACING_PROPERTY.PaddingBottom, $event)" > @@ -233,37 +259,54 @@ " data-automation-id="padding-left-button" aria-label="Padding left button" - class="lr-path-color" + class="margin-color" @click="clickPadding(SPACING_PROPERTY.PaddingLeft, $event)" > - - + + - - + + diff --git a/packages/settings/styles/src/components/spacing/SpacingSetting.vue b/packages/settings/styles/src/components/spacing/SpacingSetting.vue index 631f529a1c..1f3e43345a 100644 --- a/packages/settings/styles/src/components/spacing/SpacingSetting.vue +++ b/packages/settings/styles/src/components/spacing/SpacingSetting.vue @@ -142,7 +142,7 @@ export default { height: 60px; line-height: 60px; text-align: center; - border: 1px solid var(--ti-lowcode-toolbar-border-color); + border: 1px solid var(--te-common-border-default); background: var(--te-common-bg-container); cursor: pointer; box-sizing: border-box; @@ -178,7 +178,7 @@ export default { line-height: 26px; margin-left: 3%; text-align: center; - border: 1px solid var(--ti-lowcode-toolbar-border-color); + border: 1px solid var(--te-common-border-default); background: var(--te-common-bg-container); cursor: pointer; transition: 0.3s; diff --git a/packages/settings/styles/src/components/typography/TypographyMore.vue b/packages/settings/styles/src/components/typography/TypographyMore.vue index 1d57600d1b..d0e2050dfa 100644 --- a/packages/settings/styles/src/components/typography/TypographyMore.vue +++ b/packages/settings/styles/src/components/typography/TypographyMore.vue @@ -123,7 +123,7 @@ export default { .tiny-collapse-item__header { height: 24px; line-height: 24px; - background-color: var(--ti-lowcode-toolbar-view-hover-bg); + background-color: var(--te-common-bg-container); justify-content: center; transition: 0.3s; @@ -141,7 +141,6 @@ export default { &:hover { color: var(--ti-lowcode-toolbar-icon-color); - background-color: var(--ti-lowcode-more-collapse-header-hover-color); svg { color: var(--ti-lowcode-toolbar-icon-color); diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less index b668c3236b..0d534d7531 100644 --- a/packages/theme/base/src/base.less +++ b/packages/theme/base/src/base.less @@ -22,6 +22,7 @@ --te-base-gray-80: #212329; --te-base-gray-90: #191919; --te-base-gray-100: #000; + --te-base-gray-110: #0f1115; // expand-red --te-base-red-10: #fff1f0; diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less index 346679e440..ceb6dcd1b7 100644 --- a/packages/theme/base/src/common.less +++ b/packages/theme/base/src/common.less @@ -28,7 +28,7 @@ --te-common-border-disabled: var(--te-base-gray-25); // 线条-禁用色 #dbdbdb --te-common-border-secondary: var(--te-base-gray-50); // 线条-次要按钮描边色 #595959 --te-common-border-prompt: var(--te-base-gray-25); // 线条-三级按钮默认色/表单内按钮 #dbdbdb - --te-common-border-hover: var(--te-base-gray-30); // 线条-按钮边框悬浮色/复选框/单选框，欧仁边框色 #c2c2c2 + --te-common-border-hover: var(--te-base-gray-30); // 线条-按钮边框悬浮色/复选框/单选框默认边框色 #c2c2c2 --te-common-border-divider: var(--te-base-gray-20); //线条-白色背景分割线颜色 #e6e6e6 --te-common-border-bg-divider: var(--te-base-gray-25); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb --te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #1476ff @@ -48,6 +48,7 @@ --te-common-bg-disabled: var(--te-base-gray-15); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0 --te-common-bg-switch: var(--te-base-gray-30); // 开关默认色 #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等等 @@ -82,7 +83,7 @@ --te-common-border-disabled: var(--te-base-gray-60); // 线条-禁用色 #36383D --te-common-border-secondary: var(--te-base-gray-35); // 线条-次要按钮描边色/禁用色 #B4B5B8 --te-common-border-prompt: var(--te-base-gray-55); // 线条-三级按钮默认色/表单内按钮 #4D4E52 - --te-common-border-hover: var(--te-base-gray-40); // 线条-按钮边框悬浮色 #8B8C8F + --te-common-border-hover: var(--te-base-gray-40); // 线条-按钮边框悬浮色/复选框/单选框默认边框色 #8B8C8F --te-common-border-divider: var(--te-base-gray-60); //线条-白色背景分割线颜色 #36383D --te-common-border-bg-divider: var(--te-base-gray-55); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4E52 --te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #1476ff @@ -101,6 +102,7 @@ --te-common-bg-disabled: var(--te-base-gray-70); // 禁用/标签/下拉框多选标签 背景色 #2a2c31 --te-common-bg-switch: var(--te-base-gray-55); // 开关默认色 #4D4E52 --te-common-bg-error: var(--te-base-red-20); // 浅色错误背景-背景色 #fce2e0 + --te-common-bg-popover: var(--te-base-gray-110); // 对话框/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 20207b203c..5fe4a85978 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); @@ -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,7 +471,7 @@ 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-box-shadow-rgba-2); @@ -541,7 +553,8 @@ .tiny-notify.tiny-notify { border-radius: var(--te-base-border-radius-2); padding: 12px; - background-color: var(--te-common-bg-default); + 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; @@ -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-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 cc88d56532..89a3480d19 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); + 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; @@ -211,12 +214,10 @@ td { } :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/base.less b/packages/theme/dark/base.less deleted file mode 100644 index a47571674b..0000000000 --- a/packages/theme/dark/base.less +++ /dev/null @@ -1,271 +0,0 @@ -:root { - // 灰阶 - --ti-lowcode-base-gray-0: #fff; - --ti-lowcode-base-gray-10: #e6e6e6; - --ti-lowcode-base-gray-20: #d9d9d9; - --ti-lowcode-base-gray-30: #ccc; - --ti-lowcode-base-gray-40: #a6a6a6; - --ti-lowcode-base-gray-50: #808080; - --ti-lowcode-base-gray-60: #595959; - --ti-lowcode-base-gray-70: #333; - --ti-lowcode-base-gray-80: #292929; - --ti-lowcode-base-gray-90: #1f1f1f; - --ti-lowcode-base-gray-95: #141414; - --ti-lowcode-base-gray-100: #000; - - // expand-red - --ti-lowcode-base-red-1: #ffeae8; - --ti-lowcode-base-red-2: #fccdca; - --ti-lowcode-base-red-3: #faa9a5; - --ti-lowcode-base-red-4: #fa8682; - --ti-lowcode-base-red-5: #f76360; - --ti-lowcode-base-red-6: #f23030; - --ti-lowcode-base-red-7: #cc272a; - --ti-lowcode-base-red-8: #a3171c; - --ti-lowcode-base-red-9: #78080e; - --ti-lowcode-base-red-10: #4d0005; - --ti-lowcode-base-red-11: #a64242; - --ti-lowcode-base-red-12: #d4827f; - --ti-lowcode-base-red-13: #f2c5c2; - - // expand-orange - --ti-lowcode-base-orange-1: #fff5e8; - --ti-lowcode-base-orange-2: #fcdfb8; - --ti-lowcode-base-orange-3: #fcc98b; - --ti-lowcode-base-orange-4: #fcb25c; - --ti-lowcode-base-orange-5: #ff9a2e; - --ti-lowcode-base-orange-6: #ff8800; - --ti-lowcode-base-orange-7: #d96900; - --ti-lowcode-base-orange-8: #a64d00; - --ti-lowcode-base-orange-9: #733400; - --ti-lowcode-base-orange-10: #4d2201; - --ti-lowcode-base-orange-11: #9e6d3f; - --ti-lowcode-base-orange-12: #d6a981; - --ti-lowcode-base-orange-13: #f2d8c2; - - // expand-yellow - --ti-lowcode-base-yellow-1: #fcf9eb; - --ti-lowcode-base-yellow-2: #fcf0c2; - --ti-lowcode-base-yellow-3: #fae396; - --ti-lowcode-base-yellow-4: #f7d56d; - --ti-lowcode-base-yellow-5: #f7c845; - --ti-lowcode-base-yellow-6: #fcbe1e; - --ti-lowcode-base-yellow-7: #d99b0b; - --ti-lowcode-base-yellow-8: #a67711; - --ti-lowcode-base-yellow-9: #7a5202; - --ti-lowcode-base-yellow-10: #4d3200; - --ti-lowcode-base-yellow-11: #9e7e3f; - --ti-lowcode-base-yellow-12: #d4b57f; - --ti-lowcode-base-yellow-13: #e6d3b8; - - // expand-lemon - --ti-lowcode-base-lemon-1: #fcfae8; - --ti-lowcode-base-lemon-2: #fcf6c2; - --ti-lowcode-base-lemon-3: #fcf092; - --ti-lowcode-base-lemon-4: #fae969; - --ti-lowcode-base-lemon-5: #f7e04a; - --ti-lowcode-base-lemon-6: #f7d916; - --ti-lowcode-base-lemon-7: #d9bb16; - --ti-lowcode-base-lemon-8: #a38708; - --ti-lowcode-base-lemon-9: #756002; - --ti-lowcode-base-lemon-10: #4d3d00; - --ti-lowcode-base-lemon-11: #9e8f46; - --ti-lowcode-base-lemon-12: #d6c581; - --ti-lowcode-base-lemon-13: #eddfb2; - - // expand-lime - --ti-lowcode-base-lime-1: #f8fae3; - --ti-lowcode-base-lime-2: #eff5bf; - --ti-lowcode-base-lime-3: #e2ed8e; - --ti-lowcode-base-lime-4: #d5e667; - --ti-lowcode-base-lime-5: #c6de3e; - --ti-lowcode-base-lime-6: #b2d119; - --ti-lowcode-base-lime-7: #95b312; - --ti-lowcode-base-lime-8: #728c0a; - --ti-lowcode-base-lime-9: #576e05; - --ti-lowcode-base-lime-10: #3b4d00; - --ti-lowcode-base-lime-11: #808c46; - --ti-lowcode-base-lime-12: #c1cc7a; - --ti-lowcode-base-lime-13: #3b4d00; - - // expand-kelly - --ti-lowcode-base-kelly-1: #f2fae6; - --ti-lowcode-base-kelly-2: #daf2bb; - --ti-lowcode-base-kelly-3: #b9e683; - --ti-lowcode-base-kelly-4: #9edb58; - --ti-lowcode-base-kelly-5: #7dcc29; - --ti-lowcode-base-kelly-6: #5cb300; - --ti-lowcode-base-kelly-7: #4b9902; - --ti-lowcode-base-kelly-8: #3c8001; - --ti-lowcode-base-kelly-9: #2e6600; - --ti-lowcode-base-kelly-10: #1f4700; - --ti-lowcode-base-kelly-11: #628c38; - --ti-lowcode-base-kelly-12: #a2c777; - --ti-lowcode-base-kelly-13: #d2e6bb; - - // expand-green - --ti-lowcode-base-green-1: #e8fced; - --ti-lowcode-base-green-2: #bbf2c8; - --ti-lowcode-base-green-3: #82e09a; - --ti-lowcode-base-green-4: #51d675; - --ti-lowcode-base-green-5: #25c251; - --ti-lowcode-base-green-6: #00b336; - --ti-lowcode-base-green-7: #029931; - --ti-lowcode-base-green-8: #01802b; - --ti-lowcode-base-green-9: #006624; - --ti-lowcode-base-green-10: #004a1b; - --ti-lowcode-base-green-11: #3d995c; - --ti-lowcode-base-green-12: #77c78f; - --ti-lowcode-base-green-13: #b8e6c7; - - // expand-mint - --ti-lowcode-base-mint-1: #e8fcfa; - --ti-lowcode-base-mint-2: #bff5ef; - --ti-lowcode-base-mint-3: #8be8e0; - --ti-lowcode-base-mint-4: #5dded5; - --ti-lowcode-base-mint-5: #38d6ce; - --ti-lowcode-base-mint-6: #10c7c1; - --ti-lowcode-base-mint-7: #0aaba8; - --ti-lowcode-base-mint-8: #048c8c; - --ti-lowcode-base-mint-9: #046466; - --ti-lowcode-base-mint-10: #004547; - --ti-lowcode-base-mint-11: #3d9996; - --ti-lowcode-base-mint-12: #77c7c2; - --ti-lowcode-base-mint-13: #b8e6e1; - - // expand-sky - --ti-lowcode-base-sky-1: #e8f8fc; - --ti-lowcode-base-sky-2: #c4f2ff; - --ti-lowcode-base-sky-3: #9de4fa; - --ti-lowcode-base-sky-4: #79d8f7; - --ti-lowcode-base-sky-5: #58cbf5; - --ti-lowcode-base-sky-6: #33bcf2; - --ti-lowcode-base-sky-7: #1f9acf; - --ti-lowcode-base-sky-8: #1075a3; - --ti-lowcode-base-sky-9: #065278; - --ti-lowcode-base-sky-10: #00304a; - --ti-lowcode-base-sky-11: #3d7f99; - --ti-lowcode-base-sky-12: #7ab8cc; - --ti-lowcode-base-sky-13: #b6e5f2; - - // expand-blue - --ti-lowcode-base-blue-1: #e3effa; - --ti-lowcode-base-blue-2: #c4e1ff; - --ti-lowcode-base-blue-3: #99c9ff; - --ti-lowcode-base-blue-4: #68abfc; - --ti-lowcode-base-blue-5: #4191fa; - --ti-lowcode-base-blue-6: #1476ff; - --ti-lowcode-base-blue-7: #0f5ed4; - --ti-lowcode-base-blue-8: #0845a6; - --ti-lowcode-base-blue-9: #022e7a; - --ti-lowcode-base-blue-10: #001a4a; - --ti-lowcode-base-blue-11: #3d6899; - --ti-lowcode-base-blue-12: #7fa6d4; - --ti-lowcode-base-blue-13: #b6d4f2; - - // expand-indigo - --ti-lowcode-base-indigo-1: #eee8ff; - --ti-lowcode-base-indigo-2: #ddd7fa; - --ti-lowcode-base-indigo-3: #b19cf7; - --ti-lowcode-base-indigo-4: #957af5; - --ti-lowcode-base-indigo-5: #6e51e0; - --ti-lowcode-base-indigo-6: #512fd6; - --ti-lowcode-base-indigo-7: #391eb0; - --ti-lowcode-base-indigo-8: #27108f; - --ti-lowcode-base-indigo-9: #19056e; - --ti-lowcode-base-indigo-10: #0e004d; - --ti-lowcode-base-indigo-11: #584d99; - --ti-lowcode-base-indigo-12: #847acc; - --ti-lowcode-base-indigo-13: #bbb8e6; - - // expand-purple - --ti-lowcode-base-purple-1: #f5e8ff; - --ti-lowcode-base-purple-2: #e4c5fc; - --ti-lowcode-base-purple-3: #d0a1f7; - --ti-lowcode-base-purple-4: #b878f0; - --ti-lowcode-base-purple-5: #9f53e6; - --ti-lowcode-base-purple-6: #832fd6; - --ti-lowcode-base-purple-7: #641eb0; - --ti-lowcode-base-purple-8: #4c1091; - --ti-lowcode-base-purple-9: #370673; - --ti-lowcode-base-purple-10: #20004d; - --ti-lowcode-base-purple-11: #683d99; - --ti-lowcode-base-purple-12: #a07acc; - --ti-lowcode-base-purple-13: #cbb8e6; - - // expand-pink - --ti-lowcode-base-pink-1: #fce6fb; - --ti-lowcode-base-pink-2: #fcc2f9; - --ti-lowcode-base-pink-3: #f794f2; - --ti-lowcode-base-pink-4: #eb67e6; - --ti-lowcode-base-pink-5: #e841e5; - --ti-lowcode-base-pink-6: #d91ad9; - --ti-lowcode-base-pink-7: #b50fb8; - --ti-lowcode-base-pink-8: #8f0a94; - --ti-lowcode-base-pink-9: #6b0370; - --ti-lowcode-base-pink-10: #47004d; - --ti-lowcode-base-pink-11: #993d99; - --ti-lowcode-base-pink-12: #c97acc; - --ti-lowcode-base-pink-13: #e2b8e6; - - // expand-rose - --ti-lowcode-base-rose-1: #fce6ef; - --ti-lowcode-base-rose-2: #ffc4de; - --ti-lowcode-base-rose-3: #fa9bc9; - --ti-lowcode-base-rose-4: #f56cac; - --ti-lowcode-base-rose-5: #eb4696; - --ti-lowcode-base-rose-6: #e61c81; - --ti-lowcode-base-rose-7: #b50e65; - --ti-lowcode-base-rose-8: #940a54; - --ti-lowcode-base-rose-9: #70033f; - --ti-lowcode-base-rose-10: #4d002b; - --ti-lowcode-base-rose-11: #993d6e; - --ti-lowcode-base-rose-12: #cc7aa6; - --ti-lowcode-base-rose-13: #e6b8d2; - - // 公司品牌色 - --ti-lowcode-base-brand-color: #c7000b; - - // 主色 - --ti-lowcode-base-primary-color-1: #e6e6e6; - --ti-lowcode-base-primary-color-2: #1476ff; - - // 背景色 - --ti-lowcode-base-bg: #141414; - --ti-lowcode-base-bg-1: rgba(0, 0, 0, 0.05); - --ti-lowcode-base-bg-2: #333; - --ti-lowcode-base-bg-3: #e6e6e6; - --ti-lowcode-base-bg-4: #a6a6a6; - --ti-lowcode-base-bg-5: #000; - --ti-lowcode-base-bg-6: #a6a6a61a; - - // 文本色 - --ti-lowcode-base-text-color: #e6e6e6; - --ti-lowcode-base-text-color-1: #a6a6a6; - --ti-lowcode-base-text-color-2: #1476ff; - --ti-lowcode-base-text-color-3: #808080; - --ti-lowcode-base-text-color-4: #595959; - - // 文本链接色 - --ti-lowcode-base-text-link-color: #e6e6e6; - --ti-lowcode-base-text-link-color-1: #a6a6a6; - --ti-lowcode-base-text-link-color-2: #595959; - --ti-lowcode-base-text-link-color-3: #fff; - - // 按钮边框色 - --ti-lowcode-base-secondary-button-border-color: #a6a6a6; - --ti-lowcode-base-secondary-button-border-hover-color: #3d3d3d; - --ti-lowcode-base-default-button-border-color: #595959; - - // 分割线 - --ti-lowcode-base-split-color-1: rgba(255, 255, 255, 0.08); // 白色背景分割线 - --ti-lowcode-base-split-color-2: rgba(255, 255, 255, 0.15); // 灰色背景分割线 - - // 状态色 - --ti-lowcode-base-error-color: #f23030; - --ti-lowcode-base-warn-color: #ff8800; - --ti-lowcode-base-warn-color-1: #f7d916; - --ti-lowcode-base-success-color: #5cb300; - --ti-lowcode-base-prompt-color: #1476ff; - --ti-lowcode-base-invalidate-color: #ebebeb; -} diff --git a/packages/theme/dark/canvas.less b/packages/theme/dark/canvas.less index 4a5b69aaf8..7e02a6934b 100644 --- a/packages/theme/dark/canvas.less +++ b/packages/theme/dark/canvas.less @@ -5,9 +5,9 @@ --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-emphasize); // 暗色和亮色存在差异 + --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-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); diff --git a/packages/theme/dark/datasource.less b/packages/theme/dark/datasource.less index 38ff313eff..7fcffa73a9 100644 --- a/packages/theme/dark/datasource.less +++ b/packages/theme/dark/datasource.less @@ -1,44 +1,39 @@ :root { --ti-lowcode-datasource-toolbar-icon-color: var(--te-common-text-primary); - --ti-lowcode-datasource-tabs-border-color: #313131; - --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-20); + --ti-lowcode-datasource-tabs-border-color: var(--te-common-border-default); + --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--te-common-text-primary); --ti-lowcode-datasource-json-border-color: var(--te-common-border-checked); - --ti-lowcode-datasource-tree-border-color: #2ad986; + --ti-lowcode-datasource-tree-border-color: var(--te-common-color-success); --ti-lowcode-datasource-common-border-primary-color: var(--te-common-border-checked); - --ti-lowcode-datasource-success-border-color: #2ad986; - --ti-lowcode-datasource-input-icon-color: #737373; - --ti-lowcode-datasource-dialog-demo-border-color: #5e5e5e; - --ti-lowcode-datasource-canvas-wrap-bg: #5e5e5e; - --ti-lowcode-datasource-dialog-font-color: var(--ti-lowcode-base-invalidate-color); - --ti-lowcode-datasource-toolbar-bg: #404040; - --ti-lowcode-datasource-description-error-color: #ff0000; - --ti-lowcode-datasource-common-text-main-color: var(--ti-lowcode-base-invalidate-color); - --ti-lowcode-datasource-toolbar-more-hover-color: var(--ti-lowcode-base-invalidate-color); - --ti-lowcode-datasource-delete-button-hover-bg: #c92c3f; + --ti-lowcode-datasource-success-border-color: var(--te-common-color-success); + --ti-lowcode-datasource-input-icon-color: var(--te-common-text-secondary); + --ti-lowcode-datasource-dialog-demo-border-color: var(--te-common-text-secondary); + --ti-lowcode-datasource-canvas-wrap-bg: var(--te-common-border-default); + --ti-lowcode-datasource-dialog-font-color: var(--te-common-text-secondary); + --ti-lowcode-datasource-toolbar-bg: var(--te-common-bg-container); + --ti-lowcode-datasource-description-error-color: var(--te-common-color-error); + --ti-lowcode-datasource-common-text-main-color: var(--te-common-text-secondary); + --ti-lowcode-datasource-toolbar-more-hover-color: var(--te-common-text-weaken); + --ti-lowcode-datasource-delete-button-hover-bg: var(--te-common-color-error); --ti-lowcode-datasource-common-text-color-5: var(--te-common-text-weaken); - --ti-lowcode-datasource-common-empty-color: var(--ti-lowcode-common-empty-color); - --ti-lowcode-datasource-toolbar-view-hover-bg: #4d4d4d; - --ti-lowcode-datasource-common-hover-bg-1: var(--ti-lowcode-common-hover-bg-1); + --ti-lowcode-datasource-common-hover-bg-1: var(--te-common-bg-container); --ti-lowcode-datasource-common-primary-text-color: var(--te-common-text-primary); - --ti-lowcode-datasource-icon-hover-bg: #e5e5e5; - --ti-lowcode-datasource-tabs-bg: #2b2b2b; + --ti-lowcode-datasource-icon-hover-bg: var(--te-common-bg-container); + --ti-lowcode-datasource-tabs-bg: var(--te-common-text-primary); --ti-lowcode-datasource-canvas-handle-hover-bg: var(--te-common-bg-primary-checked); - --ti-lowcode-datasource-tabs-active-bg: #2b2b2b; - --ti-lowcode-datasource-common-error-color: var(--ti-lowcode-common-error-color); - --ti-lowcode-datasource-description-minor-color: #ababab; - --ti-lowcode-datasource-description-warning-color: #facb4b; - --ti-lowcode-datasource-error-tip-color: #de504e; - --ti-lowcode-datasource-label-color: var(--ti-lowcode-common-secondary-text-color); // light - --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-common-bg-7); - --ti-lowcode-datasource-btn-border-color: var(--ti-lowcode-base-gray-10); - --ti-lowcode-datasource-tabs-bottom-border-color: var(--te-common-border-checked); - --ti-lowcode-datasource-list-bottom-border-color: var(--te-common-bg-default); - --ti-lowcode-datasource-switch-off-bg-color: var(--ti-lowcode-base-gray-50); + --ti-lowcode-datasource-common-error-color: var(--te-common-color-error); + --ti-lowcode-datasource-description-minor-color: var(--te-common-text-weaken); + --ti-lowcode-datasource-description-warning-color: var(--te-common-color-warning); + --ti-lowcode-datasource-error-tip-color: var(--te-common-color-error); + --ti-lowcode-datasource-label-color: var(--te-common-text-secondary); // light + --ti-lowcode-datasource-list-hover-color: var(--te-common-bg-container); + --ti-lowcode-datasource-btn-click-color: var(--te-common-border-active); + --ti-lowcode-datasource-switch-off-bg-color: var(--te-common-bg-switch); --ti-lowcode-datasource-switch-on-bg-color: var(--te-common-bg-primary-checked); - --ti-lowcode-datasource-respones-select-color-bg: var(--ti-lowcode-common-bg-4); + --ti-lowcode-datasource-modal-text-color: var(--te-common-text-primary); --ti-lowcode-datasource-respones-color-bg: var(--te-common-bg-primary-checked); - --ti-lowcode-datasource-respones-border-color-bg: var(--ti-lowcode-base-text-link-color-3); - --ti-lowcode-datasource-select-border-right-color-bg: var(--te-common-border-default); - --ti-lowcode-datasource-select-border-color: #2b2b2b; + --ti-lowcode-data-source-border-color: var(--te-common-border-default); + --ti-lowcode-data-source-color: var(--te-common-text-primary); + --ti-lowcode-data-source-box-bg: var(--te-common-bg-container); + --ti-lowcode-datasource-tip-color: var(--te-common-text-weaken); } diff --git a/packages/theme/dark/events.less b/packages/theme/dark/events.less index 37f01aa379..ecc337a967 100644 --- a/packages/theme/dark/events.less +++ b/packages/theme/dark/events.less @@ -1,38 +1,38 @@ .setting-advanced-add-custom-event-tip { --ti-lowcode-events-add-custom-event-tips-color: var(--te-common-text-primary); - --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-base-warn-color); + --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--te-common-color-warning); } .setting-advanced-bind-event-list { --ti-lowcode-events-bind-event-list-color: var(--te-common-text-primary); - --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-base-text-color-4); + --ti-lowcode-events-bind-event-list-item-disabled-color: var(--te-common-text-disabled); --lowcode-events-bind-event-list-item-hover-bg-color: var(--te-common-bg-container); } .bind-action-list { - --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-events-event-bind-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-events-bind-action-item-border-color: var(--te-common-border-default); + --ti-lowcode-events-event-bind-color: var(--te-common-text-checked); --ti-lowcode-events-bind-action-item-color: var(--te-common-text-primary); --ti-lowcode-events-bind-action-item-hover-bg-color: var(--te-common-bg-container); - --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-base-success-color); - --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-events-bind-action-item-linked-bg-color: var(--te-common-color-success); + --ti-lowcode-events-bind-action-item-linked-color: var(--te-common-text-dark-inverse); --ti-lowcode-events-empty-action-bg-color: var(--te-common-bg-container); --ti-lowcode-events-empty-action-color: var(--te-common-text-weaken); --ti-lowcode-events-custom-icon-color: var(--te-common-text-weaken); - --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color); + --ti-lowcode-events-empty-action-tips-strong-color: var(--te-common-color-warning); } .advanced-config-container { --ti-lowcode-events-advanced-config-color: var(--te-common-text-primary); --ti-lowcode-events-advanced-label-color: var(--te-common-text-secondary); - --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-events-advanced-binding-state-bg-color: var(--te-common-bg-primary-checked); + --ti-lowcode-events-advanced-binding-state-color: var(--te-common-text-dark-inverse); } .bind-event-dialog-content { --ti-lowcode-bind-event-dialog-color: var(--te-common-text-secondary); - --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-base-gray-90); + --ti-lowcode-bind-event-dialog-content-left-border-color: var(--te-common-border-default); + --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--te-common-border-default); + --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--te-common-bg-container); --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--te-common-text-secondary); - --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-base-bg-6); + --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--te-common-text-checked); + --ti-lowcode-bind-event-dialog-mark-bg-color: var(--te-common-bg-container); } diff --git a/packages/theme/dark/gpt-dialog.less b/packages/theme/dark/gpt-dialog.less index 205ff46d89..3a3ab8ee65 100644 --- a/packages/theme/dark/gpt-dialog.less +++ b/packages/theme/dark/gpt-dialog.less @@ -1,51 +1,65 @@ -.bind-chatgpt { +.robot-dialog { // chatGPT聊天窗问题模板文字颜色 - --ti-lowcode-chat-model-text: #dfe1e6; + --ti-lowcode-chat-model-text: #191919; // chatGPT聊天窗问题模板文字边框颜色 - --ti-lowcode-chat-model-text-border: #8a8e99; - // chatGPT聊天窗提问框图标 - --ti-lowcode-chat-model-input-icon: #8a8e99; + --ti-lowcode-chat-model-text-border: #cbcbcb; // chatGPT聊天窗用户头像边框色 - --ti-lowcode-chat-model-avatar-border: #8a8e99; + --ti-lowcode-chat-model-avatar-border: #dfe1e6; // chatGPT聊天窗AI聊天文字背景 - --ti-lowcode-chat-model-ai-text-bg: #262626; + --ti-lowcode-chat-model-ai-text-bg: #ffffff; // chatGPT聊天窗AI聊天文字背景边框 - --ti-lowcode-chat-model-ai-text-border: #262626; + --ti-lowcode-chat-model-ai-text-border: #dbdbdb; // chatGPT聊天窗AI聊天文字 - --ti-lowcode-chat-model-ai-text: #dfe1e6; + --ti-lowcode-chat-model-ai-text: #191919; // chatGPT聊天窗AI连接失败文字背景 - --ti-lowcode-chat-model-ai-fail-text-bg: rgba(246, 111, 106, 0.1); + --ti-lowcode-chat-model-ai-fail-text-bg: #feeaeb; // chatGPT聊天窗AI连接失败文字背景边框 - --ti-lowcode-chat-model-ai-fail-text-border: #f66f6a; + --ti-lowcode-chat-model-ai-fail-text-border: #dc544f; // chatGPT聊天窗AI连接失败文字 - --ti-lowcode-chat-model-ai-fail-text: #dfe1e6; + --ti-lowcode-chat-model-ai-fail-text: #191919; // chatGPT聊天窗用户聊天文字背景 - --ti-lowcode-chat-model-user-text-bg: #4f77ff; + --ti-lowcode-chat-model-user-text-bg: rgba(20, 118, 255, 0.12); // chatGPT聊天窗用户聊天文字边框 - --ti-lowcode-chat-model-user-text-border: #4f77ff; + --ti-lowcode-chat-model-user-text-border: #dbdbdb; // chatGPT聊天窗用户聊天文字 - --ti-lowcode-chat-model-user-text: #ffffff; + --ti-lowcode-chat-model-user-text: #191919; // chatGPT聊天窗标题文字 - --ti-lowcode-chat-model-title: #dfe1e6; + --ti-lowcode-chat-model-title: #333333; // chatGPT聊天窗基础图标 --ti-lowcode-chat-model-common-icon: #8a887b; // chatGPT聊天窗输入框背景 - --ti-lowcode-chat-model-input-bg: #1e1e1e; - // chatGPT聊天窗发送按钮背景 - --ti-lowcode-chat-model-button-bg: #2f2f2f; + --ti-lowcode-chat-model-input-bg: #eeeeee; + // chatGPT聊天窗输入框背景 + --ti-lowcode-chat-model-input-border: rgb(129, 168, 255); + // chatGPT聊天窗发送按钮背景渐变色 + --ti-lowcode-chat-model-button-bg-1: rgba(96, 140, 255, 0.8); + --ti-lowcode-chat-model-button-bg-2: rgba(169, 117, 255, 0.8); + --ti-lowcode-chat-model-button-bg-3: rgba(177, 136, 255, 0.8); // chatGPT聊天窗发送按钮边框 - --ti-lowcode-chat-model-button-border: #8a8e99; + --ti-lowcode-chat-model-button-border: #1476ff; // chatGPT聊天窗发送按钮文字 - --ti-lowcode-chat-model-button-text: #dfe1e6; + --ti-lowcode-chat-model-button-text: #ffffff; + // chatGPT背景渐变色 + --ti-lowcode-chat-bg-top-color: rgb(227, 236, 255); + --ti-lowcode-chat-bg-mid-color: rgb(236, 245, 255); + --ti-lowcode-chat-bg-bottom-color: rgb(255, 255, 255); + // chatGPT聊天窗背景色 + --ti-lowcode-chat-model-bg: #ffffff; + // chatGPT聊天窗小助手文字颜色 + --ti-lowcode-chat-model-helper-text: #808080; + // chatGPT聊天窗问题提示字体颜色 + --ti-lowcode-chat-model-tips-text: #595959; + // chatGPT聊天窗问题提示背景颜色 + --ti-lowcode-chat-model-tips-bg: #f5f5f5; // chatGPT加载 --ti-lowcode-chat-loading-svg-color: var(--te-common-icon-link); - --ti-lowcode-chat-loading-text-color: #fff; + --ti-lowcode-chat-loading-text-color: #595959; } .chat-model-popover { - --ti-lowcode-chat-model-popover-bg: #262626; - --ti-lowcode-chat-model-popover-color: #adb0b8; - --ti-lowcode-chat-model-popover-active-bg: #2f2f2f; - --ti-lowcode-chat-model-popover-active-color: #adb0b8; + --ti-lowcode-chat-model-popover-bg: #fff; + --ti-lowcode-chat-model-popover-color: var(--te-common-text-primary); + --ti-lowcode-chat-model-popover-active-bg: #fff; + --ti-lowcode-chat-model-popover-active-color: var(--te-common-text-checked); } diff --git a/packages/theme/dark/help.less b/packages/theme/dark/help.less index e3457c2ec7..8737b4aa68 100644 --- a/packages/theme/dark/help.less +++ b/packages/theme/dark/help.less @@ -1,15 +1,16 @@ .shepherd-modal-overlay-container, .tiny-guide { - --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-base-text-color-4); - --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-base-text-color-4); - --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-base-text-color-4); - --ti-lowcode-help-guide-mask-bg-color: var(--ti-lowcode-base-bg-3); + --ti-lowcode-help-guide-content-text-color: var(--te-common-text-secondary); + --ti-lowcode-help-guide-title-text-color: var(--te-common-text-primary); + --ti-lowcode-help-guide-progress-style-text-color: var(--te-common-text-primary); + --ti-lowcode-help-guide-mask-bg-color: var(--te-common-bg-default); } .help-plugin-box { - --ti-lowcode-help-box-bg-color: #3c3c3c; - --ti-lowcode-help-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5); - --ti-lowcode-help-box-title-text-color: #ffffff; - --ti-lowcode-help-box-item-text-color: #adb0b8; - --ti-lowcode-help-box-question-border-top: rgba(255, 255, 255, 0.1); - --ti-lowcode-help-box-question-item-text-color: #4f77ff; + --ti-lowcode-help-box-bg-color: var(--te-common-bg-default); + --ti-lowcode-help-box-shadow: 0px 2px 6px 0px var(--te-base-box-shadow-rgba-2); + --ti-lowcode-help-box-title-text-color: var(--te-common-text-primary); + --ti-lowcode-help-box-item-text-color: var(--te-common-text-secondary); + --ti-lowcode-help-box-question-border-top: var(--te-common-border-divider); + --ti-lowcode-help-box-question-item-text-color: var(--te-common-text-emphasize); + --ti-lowcode-help-box-item-hover-bg-color: var(--te-common-bg-container); } diff --git a/packages/theme/dark/index.less b/packages/theme/dark/index.less index a4f8c143d9..8fdcaa2bee 100644 --- a/packages/theme/dark/index.less +++ b/packages/theme/dark/index.less @@ -1,5 +1,4 @@ // 主题配置优先于公共配置 -@import './base.less'; @import './variable.less'; @import './block.less'; @import './life-cycles.less'; diff --git a/packages/theme/dark/life-cycles.less b/packages/theme/dark/life-cycles.less index 69a2bce160..8377abf2d4 100644 --- a/packages/theme/dark/life-cycles.less +++ b/packages/theme/dark/life-cycles.less @@ -1,7 +1,7 @@ :root { // 生命周期 - --ti-lowcode-life-cycle-alert-color: #fff; - --ti-lowcode-life-cycle-item-hover-bg: #202020; - --ti-lowcode-life-cycle-item-disable-color: #9d9d9d; - --ti-lowcode-life-cycle-editor-border: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-life-cycle-alert-color: var(--te-common-text-disabled); + --ti-lowcode-life-cycle-item-hover-bg: var(--te-common-bg-container); + --ti-lowcode-life-cycle-item-disable-color: var(--te-common-text-disabled); + --ti-lowcode-life-cycle-editor-border: var(--te-common-border-default); } diff --git a/packages/theme/dark/materials.less b/packages/theme/dark/materials.less index 05aa5d8904..f15dfbda13 100644 --- a/packages/theme/dark/materials.less +++ b/packages/theme/dark/materials.less @@ -2,11 +2,11 @@ // 带边框的图标按钮边框颜色 --ti-lowcode-materials-border-icon-border-color: transparent; // 带边框的图标按钮图标颜色 - --ti-lowcode-materials-border-icon-svg-color: #d9d9d9; + --ti-lowcode-materials-border-icon-svg-color: var(--te-common-text-primary); // 带边框的图标按钮悬浮边框颜色 --ti-lowcode-materials-border-icon-border-color-hover: transparent; // 带边框的图标按钮背景颜色 - --ti-lowcode-materials-border-icon-bg-color: #202020; + --ti-lowcode-materials-border-icon-bg-color: var(--te-common-bg-default); // 区块分组下拉选项下边框颜色 --ti-lowcode-materials-block-group-item-border-color: var(--te-common-border-checked); // 暗色和亮色不同，需注意 // 添加区块筛选模块字体颜色 @@ -16,15 +16,15 @@ // 添加区块穿梭框面板背景颜色 --ti-lowcode-materials-block-transfer-bg-color: var(--te-common-bg-default); // 添加区块穿梭框面板头部字体颜色 - --ti-lowcode-materials-block-transfer-header-text-color: #d9d9d9; + --ti-lowcode-materials-block-transfer-header-text-color: var(--te-common-text-primary); // 添加区块穿梭框面板头部背景颜色 --ti-lowcode-materials-block-transfer-header-bg-color: var(--te-common-bg-default); // 暗色和亮色不同，需注意 // 区块分组添加区块筛选项 hover 颜色 - --ti-lowcode-materials-block-filter-hover-color: var(--te-common-text-secondary); + --ti-lowcode-materials-block-filter-hover-color: var(--te-common-text-secondary); // 暗色和亮色不同，需注意 // 组件列表 组件名称颜色 - --ti-lowcode-materials-component-list-color: var(--ti-lowcode-toolbar-title-color); + --ti-lowcode-materials-component-list-color: var(--te-common-text-secondary); // 删除区块分组气泡弹窗背景色 - --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--te-common-bg-popover); // 删除区块分组气泡弹窗标题色 - --ti-lowcode-materials-block-group-delete-popover-title-color: var(--ti-lowcode-common-secondary-text-color); + --ti-lowcode-materials-block-group-delete-popover-title-color: var(--te-common-text-primary); } diff --git a/packages/theme/dark/metaComponent.less b/packages/theme/dark/metaComponent.less index 4c611147cb..a96b421c32 100644 --- a/packages/theme/dark/metaComponent.less +++ b/packages/theme/dark/metaComponent.less @@ -1,64 +1,59 @@ :root { // MetaListItem - --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-meta-list-item-border-color: transparent; + --ti-lowcode-meta-list-item-bg-color: var(--te-common-bg-default); + --ti-lowcode-meta-list-item-border-color: var(--te-common-border-default); - --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-meta-list-top-color: var(--te-common-text-secondary); // MetaJsSlot - --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1); + --lowcode-meta-js-slot-color: var(--te-common-text-secondary); // MetaCodeEditor - --ti-lowcode-meta-codeEditor-color: #d9d9d9; + --ti-lowcode-meta-codeEditor-color: var(--te-common-text-primary); + --ti-lowcode-meta-codeEditor-hover-color: var(--te-common-text-primary); --ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default); - --ti-lowcode-meta-codeEditor-hover-color: #fff; --ti-lowcode-meta-codeEditor-border-hover-color: var(--te-common-border-active); + --ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken); } // config-item label popover tips .prop-label-tips-container { - --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-config-item-label-tips-title-color: #fff; + --ti-lowcode-meta-config-item-label-tips-desc-color: var(--te-common-text-secondary); + --ti-lowcode-meta-config-item-label-tips-title-color: var(--te-common-text-primary); } // configItem .properties-item { - --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-meta-config-item-error-tips-color: var(--te-common-color-error); --ti-lowcode-meta-config-item-label-color: var(--te-common-text-secondary); - --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-meta-config-item-bind-color: var(--te-common-text-dark-inverse); --ti-lowcode-meta-config-item-bind-bg: var(--te-common-bg-primary-checked); - --ti-lowcode-meta-config-item-active-bg: #fff; - --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-description-color); + --ti-lowcode-meta-config-item-active-bg: var(--te-common-bg-container); + --ti-lowcode-meta-config-item-link-color: var(--te-common-text-checked); } // MetaBindVariable .meta-bind-variable-dialog-box { - --ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var( - --ti-lowcode-base-default-button-border-color - ); - --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-meta-bind-variable-icon-color: var(--te-common-text-primary); + --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--te-common-text-secondary); + --ti-lowcode-meta-bind-variable-content-left-title-color: var(--te-common-text-primary); + --ti-lowcode-meta-bind-variable-content-right-title-color: var(--te-common-text-primary); + --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--te-common-border-default); + --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(--te-common-border-default); + --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--te-common-text-secondary); + --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--te-common-text-secondary); + --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--te-common-text-secondary); + --ti-lowcode-meta-bind-variable-bottom-border-color: var(--te-common-border-default); + --ti-lowcode-meta-bind-variable-top-border-color: var(--te-common-border-default); + --ti-lowcode-meta-bind-variable-bottom-color: var(--te-common-text-secondary); + --ti-lowcode-meta-bind-variable-content-left-list-color: var(--te-common-text-primary); + --ti-lowcode-meta-bind-variable-item-text-color: var(--te-common-text-primary); + --ti-lowcode-meta-bind-variable-header-alert-color: var(--te-common-text-primary); + --ti-lowcode-meta-bind-variable-top-color: var(--te-common-text-primary); } // MetaCodeEditor .meta-code-editor-dialog-box { - --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5); - --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-code-editor-source-code-content-border-color: transparent; - --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-meta-code-editor-header-tips-container-color: var(--te-common-text-primary); + --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--te-common-icon-secondary); + --ti-lowcode-meta-code-editor-err-msg-color: var(--te-common-color-error); } diff --git a/packages/theme/dark/pageManage.less b/packages/theme/dark/pageManage.less index c8b778e9a9..36bcf06fa3 100644 --- a/packages/theme/dark/pageManage.less +++ b/packages/theme/dark/pageManage.less @@ -1,29 +1,12 @@ :root { - --ti-lowcode-page-manage-title-background-text-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-page-manage-tip-background-text-color: var(--ti-lowcode-common-bg-2); - --ti-lowcode-page-manage-tip-text-color: var(--ti-lowcode-common-bg-2); - --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-base-gray-70); + --ti-lowcode-page-manage-title-background-text-color: var(--te-common-text-primary); + --ti-lowcode-page-manage-tip-text-color: var(--te-common-text-weaken); --ti-lowcode-page-manage-icon-text-color: var(--te-common-text-secondary); - --ti-lowcode-page-manage-tree-text-background-color: var(--ti-lowcode-common-bg-8); + --ti-lowcode-page-manage-tree-text-background-color: var(--te-common-bg-default); --ti-lowcode-page-manage-tree-node-background-color: var(--te-common-bg-default); - --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-base-gray-10); - --ti-lowcode-page-manage-input-background-color: var(--ti-lowcode-common-bg-9); - --ti-lowcode-page-manage-input-border-color: var(--ti-lowcode-common-text-color-4); - --ti-lowcode-page-manage-tips-icon-color: var(--te-common-icon-link); - --ti-lowcode-page-manage-content-tips-color: var(--te-common-text-weaken); - --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-common-border-color-2); - --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-primary-hover-color); - --ti-lowcode-page-manage-svg-hover-color: var(--te-common-icon-link); - --ti-lowcode-page-manage-text-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-page-manage-btn-text-color: #999; - --ti-lowcode-page-manage-btn-text-color-2: var(--ti-lowcode-common-bg-7); - --ti-lowcode-page-manage-error-color: var(--ti-lowcode-common-error-color); - --ti-lowcode-page-manage-input-group-color: var(--ti-lowcode-common-bg-4); - --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-common-bg-4); - --ti-lowcode-page-manage-input-group-border-right-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-page-manage-input-output-text-color: var(--ti-lowcode-common-text-color-3); - --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-page-manage-text-color: var(--te-common-text-secondary); + --ti-lowcode-page-manage-input-head-text-color: var(--te-common-text-primary); + --ti-lowcode-page-manage-btn-text-color: var(--te-common-text-weaken); + --ti-lowcode-page-manage-error-color: var(--te-common-color-error); + --ti-lowcode-page-manage-input-group-color: var(--te-common-bg-default); } diff --git a/packages/theme/dark/plugin-js.less b/packages/theme/dark/plugin-js.less index 719954b7ba..9f21c8a0e9 100644 --- a/packages/theme/dark/plugin-js.less +++ b/packages/theme/dark/plugin-js.less @@ -1,7 +1,6 @@ // 页面JS 插件面板 .plugin-page-js-container { --ti-lowcode-plugin-js-bg: var(--te-common-bg-default); - --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-common-bg-4); - --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-plugin-js-head-border-bottom-color: var(--te-common-border-divider); + --ti-lowcode-plugin-js-help-link-color: var(--te-common-text-link); } diff --git a/packages/theme/dark/setting-style.less b/packages/theme/dark/setting-style.less index 4080f5d125..7672f02a1c 100644 --- a/packages/theme/dark/setting-style.less +++ b/packages/theme/dark/setting-style.less @@ -1,7 +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-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/dark/settings.less b/packages/theme/dark/settings.less index d7283ec28c..fb30142320 100644 --- a/packages/theme/dark/settings.less +++ b/packages/theme/dark/settings.less @@ -1,46 +1,38 @@ // 右侧属性面板 css 变量 #tiny-right-panel { - --ti-lowcode-setting-panel-bg-color: #2f2f2f; - --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-setting-panel-tabs-item-title-active-color: #000; - --ti-lowcode-setting-panel-tabs-item-title-hover-color: #fff; + --ti-lowcode-setting-panel-bg-color: var(--te-common-bg-default); + --ti-lowcode-setting-panel-tabs-item-title-color: var(--te-common-text-secondary); + --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--te-common-text-primary); + --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--te-common-text-primary); // 插件设置面板左侧边框 - --ti-lowcode-plugin-setting-panel-border-left-color: var(--te-common-bg-default); + --ti-lowcode-plugin-setting-panel-border-left-color: var(--te-common-border-divider); } // 属性面板-属性-新建区块属性 .block-new-attr-popover { - --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-base-text-color); -} - -// 属性面板-属性-区块关联属性 icon -.block-link-field { - --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-base-success-color); + --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--te-common-text-secondary); + --ti-lowcode-attr-popover-menu-item-color: var(--te-common-text-primary); } .className-container { - --ti-lowcode-className-selector-container-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-className-selector-container-error-bg-color: rgba(242, 48, 48, 0.1); - --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1); - --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-className-selector-dropdown-list-bg-color: #202020; - --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2); + --ti-lowcode-className-selector-container-color: var(--te-common-text-primary); + --ti-lowcode-className-selector-container-error-border-color: var(--te-common-color-error); + --ti-lowcode-className-selector-container-error-bg-color: var(--te-common-bg-error); + --ti-lowcode-className-selector-error-tips-color: var(--te-common-color-error); + --ti-lowcode-className-selector-container-border-color: var(--te-common-border-default); + --ti-lowcode-className-selector-container-hover-border-color: var(--te-common-border-hover); + --ti-lowcode-className-selector-container-empty-tips-color: var(--te-common-text-secondary); + --ti-lowcode-className-selector-container-label-bg-color: var(--te-base-blue-140); + --ti-lowcode-className-selector-container-label-color: var(--te-common-text-checked); + --ti-lowcode-className-selector-container-option-btn-color: var(--te-common-text-checked); + --ti-lowcode-className-selector-dropdown-list-bg-color: var(--te-common-bg-default); + --ti-lowcode-className-selector-dropdown-list-item-color: var(--te-common-text-primary); + --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--te-common-bg-container); --ti-lowcode-className-selector-dropdown-list-tips-color: var(--te-common-text-weaken); } :root { - --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-className-selector-del-popover-bg-color: var(--te-common-bg-default); + --ti-lowcode-className-selector-del-popover-title-color: var(--te-common-text-primary); --ti-lowcode-property-active-color: var(--te-common-bg-primary-checked); } diff --git a/packages/theme/dark/toolbar.less b/packages/theme/dark/toolbar.less index a85dffb018..5254b71f6b 100644 --- a/packages/theme/dark/toolbar.less +++ b/packages/theme/dark/toolbar.less @@ -1,16 +1,15 @@ .tiny-engine-toolbar { // 头部工具栏 --ti-lowcode-toolbar-border-bottom-color: transparent; - --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-bg-6); + --ti-lowcode-toolbar-media-bg: var(--te-common-bg-default); --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-2); - --ti-lowcode-toolbar-title-color: #e6e6e6; + --ti-lowcode-toolbar-title-color: var(--te-common-text-primary); --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-toolbar-hover-color: var(--te-common-bg-container); --ti-lowcode-toolbar-view-active-bg: #2f2f2f; --ti-lowcode-toolbar-left-icon-bg-hover: rgb(240, 240, 240); - --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0); --ti-lowcode-toolbar-active-color: #808080; - --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-common-danger-color); + --ti-lowcode-toolbar-user-img-border-color: var(--te-common-border-divider); + --ti-lowcode-toolbar-dot-color: var(--te-common-color-error); --ti-lowcode-toolbar-right-line: #ebebeb; } diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less index 3d25dfe080..6d6a4e73a5 100644 --- a/packages/theme/dark/variable.less +++ b/packages/theme/dark/variable.less @@ -4,38 +4,21 @@ --base-min-width: 1280px; // ------ 主要的公共主题色，前缀为 --ti-lowcode-common ------- - --ti-lowcode-common-primary-hover-color: #3961eb; - --ti-lowcode-common-component-hover-bg: #3c3c3c; - --ti-lowcode-common-layout-bg: #191818; - --ti-lowcode-common-bg-2: #4d4d4d; - --ti-lowcode-common-bg-3: #2b2b2b; - --ti-lowcode-common-bg-4: #262626; - --ti-lowcode-common-bg-5: #eee; - --ti-lowcode-common-bg-6: #414141; - --ti-lowcode-common-bg-7: #8a8e99; - --ti-lowcode-common-bg-8: #222; - --ti-lowcode-common-bg-9: #292929; - --ti-lowcode-common-hover-bg-1: rgba(255, 255, 255, 0.1); --ti-lowcode-common-transparent-color: transparent; --ti-lowcode-common-secondary-text-color: #adb0b8; - --ti-lowcode-common-text-title-color: #252b3a; --ti-lowcode-common-text-color-1: #6a6a6a; --ti-lowcode-common-text-color-2: #d9d9d9; --ti-lowcode-common-text-color-3: #fff; --ti-lowcode-common-text-color-4: #50d4ab; --ti-lowcode-common-text-color-6: #575d6c; --ti-lowcode-common-third-text-color: #ababab; + --ti-lowcode-common-empty-text-color: var(--te-common-text-weaken); --ti-lowcode-common-danger-color: #c7000b; --ti-lowcode-common-border-color-1: #212121; --ti-lowcode-common-border-color-2: #313131; --ti-lowcode-common-border-color-3: #606165; --ti-lowcode-common-border-color-4: #232323; - --ti-lowcode-common-error-color: var(--ti-lowcode-base-error-color); - - --ti-lowcode-info-color: #7693f5; - --ti-lowcode-warning-color: #fa9841; - --ti-lowcode-warning-color-1: #fac20a; - --ti-lowcode-common-empty-color: #9a9a9a; + --te-common-color-error: var(--te-common-color-error); // tiny vue 的 css 变量，覆盖掉就好 @@ -51,35 +34,29 @@ --ti-lowcode-trigger-color: #adb0b8; --ti-lowcode-trigger-hover-color: #8a8e99; - --ti-lowcode-input-error-color: var(--ti-lowcode-common-error-color); + --ti-lowcode-input-error-color: var(--te-common-color-error); --ti-lowcode-input-error-bg: rgba(246, 111, 106, 0.1); // ------ 公共组件的主题色，前缀为 --ti-lowcode-component-组件名 ------ // tinysearch 边框色 --ti-lowcode-component-input-border-color: transparent; // svgButton - --ti-lowcode-component-svg-button-color: var(--ti-lowcode-common-text-color-2); - --ti-lowcode-component-svg-button-hover-color: var(--te-common-text-checked); // 暗色和亮色不同，需注意 + --ti-lowcode-component-svg-button-color: var(--te-common-text-primary); + --ti-lowcode-component-svg-button-hover-color: var(--te-common-text-primary); --ti-lowcode-component-svg-button-hover-bg-color: var(--te-common-bg-prompt); - --ti-lowcode-component-svg-button-active-color: var(--te-common-text-checked); + --ti-lowcode-component-svg-button-active-color: var(--te-common-text-primary); --ti-lowcode-component-svg-button-active-bg-color: var(--te-common-bg-prompt); --ti-lowcode-tabs-active-border-bottom-color: var(--te-common-border-checked); - --ti-lowcode-tabs-active-color: var(--te-common-text-checked); - --ti-lowcode-form-error-tips-color: var(--ti-lowcode-common-error-color); - // 关闭按钮 - --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-common-third-text-color); // 关闭按钮默认颜色 - // 关闭按钮 hover 颜色 - --ti-lowcode-component-close-icon-text-hover-color: var(--te-common-text-primary); + --ti-lowcode-form-error-tips-color: var(--te-common-color-error); // 设置面板 --ti-lowcode-component-setting-panel-label-color: var(--te-common-text-secondary); --ti-lowcode-component-setting-panel-icon-color: var(--te-common-text-secondary); - --ti-lowcode-component-setting-panel-label-tips-bg: #f2f5fc; // 插件面板 - --ti-lowcode-plugin-panel-title-color: var(--ti-lowcode-dialog-font-color); // 插件面板标题色 + --ti-lowcode-plugin-panel-title-color: var(--te-common-text-primary); // 插件面板标题色 --ti-lowcode-plugin-panel-bg: var(--te-common-bg-default); // 插件面板背景色 --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-canvas-border-color); // 插件面板右侧边框色 --ti-lowcode-plugin-panel-header-border-bottom-color: #262626; // 插件面板头部区域底部边框线颜色 @@ -90,13 +67,12 @@ // ------ 各个模块的主题色，前缀为 --ti-lowcode-模块名 ------- - --ti-lowcode-design-plugin-color: #8a8e99; - --ti-lowcode-design-toolbar-icon-color: #8a8e99; - --ti-lowcode-nav-panel-border-left-color: transparent; + --ti-lowcode-design-plugin-color: var(--te-common-text-weaken); + --ti-lowcode-design-plugin-icon-color: var(--te-common-icon-secondary); // 物料-组件列表 --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-4); - --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-material-component-list-hover-bg: var(--te-common-bg-container); // 页面管理 --ti-lowcode-page-tree-color: var(--ti-lowcode-common-secondary-text-color); @@ -113,18 +89,12 @@ // 状态管理 --ti-lowcode-data-list-color: var(--ti-lowcode-toolbar-icon-color); // 状态管理面板头部的底部边框色 - --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-bg-4); - // 状态管理示例背景色 - --ti-lowcode-data-example-bg-color: var(--te-common-text-primary); - // 状态管理示例文字色 - --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-title-color); + --ti-lowcode-data-header-border-bottom-color: var(--te-common-border-divider); // 添加高级属性文字颜色 --ti-lowcode-data-advanced-text-color: #dfe1e6; // 添加高级属性 hover 文字颜色 --ti-lowcode-data-advanced-text-hover-color: #8a8e99; - // 状态管理按激活背景色 - --ti-lowcode-data-radio-group-active-bg: var(--te-common-bg-primary-checked); // 状态管理按默认背景色 --ti-lowcode-data-radio-group-bg: var(--te-common-bg-default); @@ -135,8 +105,6 @@ --ti-lowcode-toolbar-bg: #404040; // 头部工具栏选中背景色 --ti-lowcode-toolbar-active-bg: #212121; - // 头部工具栏边框色 - --ti-lowcode-toolbar-border-color: #333; // 头部工具栏icon颜色 && 右侧属性面板tabs hover字体颜色 && switch 选中hover圆背景色 --ti-lowcode-toolbar-icon-color: #fff; // 头部工具栏icon颜色 @@ -147,8 +115,6 @@ --ti-lowcode-toolbar-more-color: rgba(217, 217, 217, 0.4); // 头部工具栏更多more图标hover颜色 --ti-lowcode-toolbar-more-hover-color: rgba(217, 217, 217, 0.8); - // 头部工具栏画布大小文本hover背景色 && 头部弹框背景色 && context-menu 背景色 && 大纲树节点hover背景色 && 日期组件背景色 - --ti-lowcode-toolbar-view-hover-bg: #4d4d4d; // 头部工具栏i18n国际化字体颜色 --ti-lowcode-toolbar-i18n-color: rgba(255, 255, 255, 0.4); // 应用发布弹窗图标颜色 @@ -160,11 +126,9 @@ // 中间画布边框色 --ti-lowcode-canvas-border-color: #1a1a1a; // 右侧属性面板tab页签边框色 && 弹框边框色 && context-menu 边框色 - --ti-lowcode-tabs-border-color: #313131; + --ti-lowcode-tabs-border-color: var(--te-common-border-default); // 右侧属性面板tab页签激活状态背景色 && 弹框title背景颜色 --ti-lowcode-tabs-active-bg: #404040; - // 右侧属性面板折叠面板展开内容边框色 - --ti-lowcode-collapse-active-border-color: #333; // 中间画布拖拽宽度按钮背景色 --ti-lowcode-canvas-handle-bg: #2b2b2b; // 中间画布拖拽宽度按钮背景色 @@ -190,23 +154,8 @@ // collapse 折叠面板激活后字体颜色 --ti-lowcode-collapse-active-color: #ebebeb; - // switch 圆点 hover 背景色 - --ti-lowcode-switch-after-hover-bg: #6b6b6b; - // switch 圆点 checked 背景色 - --ti-lowcode-switch-after-checked-bg: #d9d9d9; - // -----下拉框相关主题配置----- - // 下拉框聚焦时边框颜色 - --ti-lowcode-select-focus-border-color: var(--te-common-border-checked); - // 下拉框选中标签字体颜色 - --ti-lowcode-select-tags-text-color: #d9d9d9; - // 下拉框选中标签背景颜色 - --ti-lowcode-select-tags-bg-color: #5e5e5e; - // 下拉框suffix图标悬浮颜色 - --ti-lowcode-select-suffix-icon-color-hover: #fff; - // 组件icon颜色 - --ti-lowcode-component-icon-color: #d9d9d9; // 左侧插件激活背景色 - --ti-lowcode-left-panel-active-bg: #2f2f2f; + --ti-lowcode-left-panel-active-bg: var(--te-base-blue-140); // 左侧插件激活边框色 --ti-lowcode-left-panel-active-border-color: #212121; // 左侧按钮边框色 @@ -215,15 +164,9 @@ // radio 按钮组激活背景色 --ti-lowcode-radio-button-active-bg: #2b2b2b; // grid 布局设置按钮字体颜色 - --ti-lowcode-grid-edit-color: #d9d9d9; + --ti-lowcode-grid-edit-color: var(--te-common-text-primary); // grid 布局设置按钮背景色 - --ti-lowcode-grid-edit-bg: #5e5e5e; - // tooltip字体颜色 - --ti-lowcode-tooltip-text-color: #999; - // tooltip背景颜色 - --ti-lowcode-tooltip-bg-color: #ebebeb; - // tooltip错误提示背景颜色 - --ti-lowcode-tooltip-error-bg-color: #c92c3f; + --ti-lowcode-grid-edit-bg: var(--te-common-bg-default); // Fit 字体颜色 --ti-lowcode-fit-label-color: #ebebeb; @@ -237,7 +180,7 @@ --ti-lowcode-more-icon-selected-bg: #2e2e2e; // main menu 背景色 --ti-lowcode-main-menu-bg: var(--te-common-bg-default); - --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-main-menu-item-hover-bg: var(--te-common-bg-container); --ti-lowcode-main-menu-item-hover-color: var(--ti-lowcode-toolbar-icon-color); // spacing svg 图标上下颜色 --ti-lowcode-spacing-tb-color: #4d4d4d; @@ -247,8 +190,9 @@ --ti-lowcode-spacing-lr-color: #555; // spacing svg 图标左右hover颜色 --ti-lowcode-spacing-lr-hover-color: #626262; + --ti-lowcode-spacing-margin-color: var(--te-base-gray-60); + --ti-lowcode-spacing-padding-color: var(--te-base-gray-55); // spacing svg 图标边框颜色 - --ti-lowcode-spacing-border-color: #333; // position direction 字体颜色 --ti-lowcode-position-direction-color: #ebebeb; // position direction 弹框显示时字体背景色 @@ -274,115 +218,39 @@ --ti-lowcode-breadcrumb-hover-bg: #fff; // 弹框中tip提示边框颜色 --ti-lowcode-dialog-tip-border-color: #d9d9d9; - // 弹框字体颜色 && 左侧面板 title 字体颜色 - --ti-lowcode-dialog-font-color: #ebebeb; // 输入框icon图标颜色 --ti-lowcode-input-icon-color: #737373; // 弹框字体颜色 && 图标颜色 && 输入框 suffix 字体颜色 - --ti-lowcode-text-color: #6a6a6a; + --ti-lowcode-text-color: var(--te-common-text-dark-inverse); // 右侧optionitem的边框色 - --ti-lowcode-optionitem-border-color: #2b2b2b; + --ti-lowcode-optionitem-border-color: var(--te-common-border-default); // 右侧optionitem的背景色 - --ti-lowcode-optionitem-background-color: #363636; - //tootip里的input框字体颜色 - --ti-lowcode-tootip-input-color: #fff; - //tootip里的input背景颜色 - --ti-lowcode-tootip-input-background-color: #363636; + --ti-lowcode-optionitem-background-color: var(--te-common-bg-default); //tootip里的input框边框颜色 - --ti-lowcode-tootip-input-border-color: #2b2b2b; - //tootip里的input框箭头颜色 - --ti-lowcode-tootip-arrow-border-color: #404040; - // dialogBox弹框示例框边框色 - --ti-lowcode-dialog-demo-border-color: #5e5e5e; + --ti-lowcode-tootip-input-border-color: var(--te-common-border-default); // 关闭 icon 图标hover背景色 && 输入框后置文本hover背景色 - --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1); - // 说明提示框警告颜色 - --ti-lowcode-description-warning-color: #facb4b; - // 说明提示框错误颜色 - --ti-lowcode-description-error-color: #ff0000; - // switch checked状态边框色 - --ti-lowcode-switch-checked-border-color: var(--te-common-border-checked); - // 文本链接颜色 - --ti-lowcode-text-link-color: #6bb0ff; + --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1); // 需要确认 // 大纲树node节点选中背景色 --ti-lowcode-node-current-bg: var(--te-common-bg-primary-checked); - // 大纲树node节点不可拖拽背景色 && 表单校验错误边框色 - --ti-lowcode-node-nodrag-bg: #ea384c; - // 成功状态按钮边框色 - --ti-lowcode-success-border-color: #2ad986; - // 错误提示颜色 - --ti-lowcode-error-tip-color: #de504e; - // 画布拖拽元素背景色 - --ti-lowcode-drag-ghost-bg: #888; - // 画布拖拽位置线背景色 - --ti-lowcode-ghost-line-bg: #ffb100; // 描述颜色 - --ti-lowcode-description-color: var(--ti-lowcode-common-text-color-4); - // 更多折叠面板头部hover背景色 - --ti-lowcode-more-collapse-header-hover-color: #5a5a5a; + --ti-lowcode-description-color: var(--te-base-green-40); // 绑定时icon图标颜色 - --ti-lowcode-icon-bind-color: #006cff; - // 创建字体颜色 - --ti-lowcode-create-color: #575d6c; - // 删除按钮hover背景色 && 表单校验错误背景色 - --ti-lowcode-delete-button-hover-bg: #c92c3f; - // input框focus 获焦时边框颜色 - --ti-lowcode-input-focus-border-color: var(--te-common-border-checked); - // 次要描述字体颜色 && 面包屑label 字体颜色 - --ti-lowcode-description-minor-color: #ababab; + --ti-lowcode-icon-bind-color: var(--te-common-text-checked); // 样式设置 label 字体颜色 --ti-lowcode-style-setting-label-color: var(--te-common-bg-primary-checked); // 样式设置 label 背景颜色 - --ti-lowcode-style-setting-label-bg: rgba(76, 152, 241, 0.15); - // 多人协作item项hover背景色 - --ti-lowcode-user-item-hover-bg: rgba(94, 94, 94, 0.8); - // 多人协作人员头像背景色 - --ti-lowcode-user-header-bg: #919191; - // 工具栏提示框字体颜色 - --ti-lowcode-toolbar-popover-color: #363636; - // 工具栏 media 提示框字体颜色 - --ti-lowcode-media-popover-color: #adb0b8; + --ti-lowcode-style-setting-label-bg: var(--te-base-blue-140); // 工具栏 media 提示框标题字体颜色 - --ti-lowcode-media-popover-title-color: #fff; + --ti-lowcode-media-popover-title-color: var(--te-common-text-primary); // 工具栏icon禁用颜色 - --ti-lowcode-disabled-color: #757575; - // 状态管理详情收缩摩纳哥编辑器icon颜色 - --ti-lowcode-state-management-screen-icon-color: #fff; - // 状态管理搜索无结果显示颜色 - --ti-lowcode-state-management-query-color: #fff; + --ti-lowcode-disabled-color: var(--te-common-text-disabled); // 状态管理代码编辑器边框颜色 --ti-lowcode-state-management-monaco-editor-border-color: transparent; - // Popover提示框 - --ti-lowcode-popover-color: var(--ti-lowcode-breadcrumb-color); - --ti-lowcode-popover-bg-color: #191919; - // 自定义类名lowcode弹框背景色 - --ti-lowcode-custom-popover-bg-color: #404040; - // 自定义类名lowcode弹框字体颜色 - --ti-lowcode-custom-popover-text-color: #d9d9d9; - // 自定义类名lowcode弹框边框颜色 - --ti-lowcode-custom-popover-border-color: #313131; - - // 滚动条thumb颜色 - --ti-lowcode-scrollbar-thumb-background-color: rgba(121, 121, 121, 0.4); - // 可点击交互的文字颜色 - --ti-lowcode-common-interaction-text-color: #5e7ce0; // 数字输入框组件下拉列表文字颜色 - --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-text-color); - - //左侧插件栏hover背景色 - --ti-plugins-hover-bg-color: #ffffff; - //左侧插件栏hover边框色 - --ti-plugins-hover-border-color: #9e9e9e; - // 表格行间背景色 - --ti-lowcode-new-table-row-sepline-background: #1f1f1f; + --ti-lowcode-numeric-unit-text-color: var(--te-common-text-primary); // 查看指引视频 - --ti-lowcode-block-video-tip-color: var(--ti-lowcode-base-primary-color-2); - - // 属性设置、事件设置等列表的背景色 - --ti-lowcode-meta-list-item-border-color: #2b2b2b; - // 属性设置、事件设置等列表的背景色 - --ti-lowcode-meta-list-item-bg-color: #363636; + --ti-lowcode-block-video-tip-color: var(--te-common-text-link); } diff --git a/packages/theme/light/base.less b/packages/theme/light/base.less deleted file mode 100644 index 08d1aa34b7..0000000000 --- a/packages/theme/light/base.less +++ /dev/null @@ -1,273 +0,0 @@ -:root { - // 灰阶 - --ti-lowcode-base-gray-0: #fff; - --ti-lowcode-base-gray-5: #fafafa; - --ti-lowcode-base-gray-10: #f5f5f5; - --ti-lowcode-base-gray-20: #f0f0f0; - --ti-lowcode-base-gray-30: #dbdbdb; - --ti-lowcode-base-gray-40: #c2c2c2; - --ti-lowcode-base-gray-50: #808080; - --ti-lowcode-base-gray-60: #595959; - --ti-lowcode-base-gray-70: #333; - --ti-lowcode-base-gray-80: #262626; - --ti-lowcode-base-gray-90: #191919; - --ti-lowcode-base-gray-100: #000; - --ti-lowcode-base-gray-101: #e6e6e6; - - // expand-red - --ti-lowcode-base-red-1: #ffeae8; - --ti-lowcode-base-red-2: #fccdca; - --ti-lowcode-base-red-3: #faa9a5; - --ti-lowcode-base-red-4: #fa8682; - --ti-lowcode-base-red-5: #f76360; - --ti-lowcode-base-red-6: #f23030; - --ti-lowcode-base-red-7: #cc272a; - --ti-lowcode-base-red-8: #a3171c; - --ti-lowcode-base-red-9: #78080e; - --ti-lowcode-base-red-10: #4d0005; - --ti-lowcode-base-red-11: #a64242; - --ti-lowcode-base-red-12: #d4827f; - --ti-lowcode-base-red-13: #f2c5c2; - - // expand-orange - --ti-lowcode-base-orange-1: #fff5e8; - --ti-lowcode-base-orange-2: #fcdfb8; - --ti-lowcode-base-orange-3: #fcc98b; - --ti-lowcode-base-orange-4: #fcb25c; - --ti-lowcode-base-orange-5: #ff9a2e; - --ti-lowcode-base-orange-6: #ff8800; - --ti-lowcode-base-orange-7: #d96900; - --ti-lowcode-base-orange-8: #a64d00; - --ti-lowcode-base-orange-9: #733400; - --ti-lowcode-base-orange-10: #4d2201; - --ti-lowcode-base-orange-11: #9e6d3f; - --ti-lowcode-base-orange-12: #d6a981; - --ti-lowcode-base-orange-13: #f2d8c2; - - // expand-yellow - --ti-lowcode-base-yellow-1: #fcf9eb; - --ti-lowcode-base-yellow-2: #fcf0c2; - --ti-lowcode-base-yellow-3: #fae396; - --ti-lowcode-base-yellow-4: #f7d56d; - --ti-lowcode-base-yellow-5: #f7c845; - --ti-lowcode-base-yellow-6: #fcbe1e; - --ti-lowcode-base-yellow-7: #d99b0b; - --ti-lowcode-base-yellow-8: #a67711; - --ti-lowcode-base-yellow-9: #7a5202; - --ti-lowcode-base-yellow-10: #4d3200; - --ti-lowcode-base-yellow-11: #9e7e3f; - --ti-lowcode-base-yellow-12: #d4b57f; - --ti-lowcode-base-yellow-13: #e6d3b8; - - // expand-lemon - --ti-lowcode-base-lemon-1: #fcfae8; - --ti-lowcode-base-lemon-2: #fcf6c2; - --ti-lowcode-base-lemon-3: #fcf092; - --ti-lowcode-base-lemon-4: #fae969; - --ti-lowcode-base-lemon-5: #f7e04a; - --ti-lowcode-base-lemon-6: #f7d916; - --ti-lowcode-base-lemon-7: #d9bb16; - --ti-lowcode-base-lemon-8: #a38708; - --ti-lowcode-base-lemon-9: #756002; - --ti-lowcode-base-lemon-10: #4d3d00; - --ti-lowcode-base-lemon-11: #9e8f46; - --ti-lowcode-base-lemon-12: #d6c581; - --ti-lowcode-base-lemon-13: #eddfb2; - - // expand-lime - --ti-lowcode-base-lime-1: #f8fae3; - --ti-lowcode-base-lime-2: #eff5bf; - --ti-lowcode-base-lime-3: #e2ed8e; - --ti-lowcode-base-lime-4: #d5e667; - --ti-lowcode-base-lime-5: #c6de3e; - --ti-lowcode-base-lime-6: #b2d119; - --ti-lowcode-base-lime-7: #95b312; - --ti-lowcode-base-lime-8: #728c0a; - --ti-lowcode-base-lime-9: #576e05; - --ti-lowcode-base-lime-10: #3b4d00; - --ti-lowcode-base-lime-11: #808c46; - --ti-lowcode-base-lime-12: #c1cc7a; - --ti-lowcode-base-lime-13: #3b4d00; - - // expand-kelly - --ti-lowcode-base-kelly-1: #f2fae6; - --ti-lowcode-base-kelly-2: #daf2bb; - --ti-lowcode-base-kelly-3: #b9e683; - --ti-lowcode-base-kelly-4: #9edb58; - --ti-lowcode-base-kelly-5: #7dcc29; - --ti-lowcode-base-kelly-6: #5cb300; - --ti-lowcode-base-kelly-7: #4b9902; - --ti-lowcode-base-kelly-8: #3c8001; - --ti-lowcode-base-kelly-9: #2e6600; - --ti-lowcode-base-kelly-10: #1f4700; - --ti-lowcode-base-kelly-11: #628c38; - --ti-lowcode-base-kelly-12: #a2c777; - --ti-lowcode-base-kelly-13: #d2e6bb; - - // expand-green - --ti-lowcode-base-green-1: #e8fced; - --ti-lowcode-base-green-2: #bbf2c8; - --ti-lowcode-base-green-3: #82e09a; - --ti-lowcode-base-green-4: #51d675; - --ti-lowcode-base-green-5: #25c251; - --ti-lowcode-base-green-6: #00b336; - --ti-lowcode-base-green-7: #029931; - --ti-lowcode-base-green-8: #01802b; - --ti-lowcode-base-green-9: #006624; - --ti-lowcode-base-green-10: #004a1b; - --ti-lowcode-base-green-11: #3d995c; - --ti-lowcode-base-green-12: #77c78f; - --ti-lowcode-base-green-13: #b8e6c7; - - // expand-mint - --ti-lowcode-base-mint-1: #e8fcfa; - --ti-lowcode-base-mint-2: #bff5ef; - --ti-lowcode-base-mint-3: #8be8e0; - --ti-lowcode-base-mint-4: #5dded5; - --ti-lowcode-base-mint-5: #38d6ce; - --ti-lowcode-base-mint-6: #10c7c1; - --ti-lowcode-base-mint-7: #0aaba8; - --ti-lowcode-base-mint-8: #048c8c; - --ti-lowcode-base-mint-9: #046466; - --ti-lowcode-base-mint-10: #004547; - --ti-lowcode-base-mint-11: #3d9996; - --ti-lowcode-base-mint-12: #77c7c2; - --ti-lowcode-base-mint-13: #b8e6e1; - - // expand-sky - --ti-lowcode-base-sky-1: #e8f8fc; - --ti-lowcode-base-sky-2: #c4f2ff; - --ti-lowcode-base-sky-3: #9de4fa; - --ti-lowcode-base-sky-4: #79d8f7; - --ti-lowcode-base-sky-5: #58cbf5; - --ti-lowcode-base-sky-6: #33bcf2; - --ti-lowcode-base-sky-7: #1f9acf; - --ti-lowcode-base-sky-8: #1075a3; - --ti-lowcode-base-sky-9: #065278; - --ti-lowcode-base-sky-10: #00304a; - --ti-lowcode-base-sky-11: #3d7f99; - --ti-lowcode-base-sky-12: #7ab8cc; - --ti-lowcode-base-sky-13: #b6e5f2; - - // expand-blue - --ti-lowcode-base-blue-1: #e3effa; - --ti-lowcode-base-blue-2: #c4e1ff; - --ti-lowcode-base-blue-3: #99c9ff; - --ti-lowcode-base-blue-4: #68abfc; - --ti-lowcode-base-blue-5: #4191fa; - --ti-lowcode-base-blue-6: #1476ff; - --ti-lowcode-base-blue-7: #0f5ed4; - --ti-lowcode-base-blue-8: #0845a6; - --ti-lowcode-base-blue-9: #022e7a; - --ti-lowcode-base-blue-10: #001a4a; - --ti-lowcode-base-blue-11: #3d6899; - --ti-lowcode-base-blue-12: #7fa6d4; - --ti-lowcode-base-blue-13: #b6d4f2; - - // expand-indigo - --ti-lowcode-base-indigo-1: #eee8ff; - --ti-lowcode-base-indigo-2: #ddd7fa; - --ti-lowcode-base-indigo-3: #b19cf7; - --ti-lowcode-base-indigo-4: #957af5; - --ti-lowcode-base-indigo-5: #6e51e0; - --ti-lowcode-base-indigo-6: #512fd6; - --ti-lowcode-base-indigo-7: #391eb0; - --ti-lowcode-base-indigo-8: #27108f; - --ti-lowcode-base-indigo-9: #19056e; - --ti-lowcode-base-indigo-10: #0e004d; - --ti-lowcode-base-indigo-11: #584d99; - --ti-lowcode-base-indigo-12: #847acc; - --ti-lowcode-base-indigo-13: #bbb8e6; - - // expand-purple - --ti-lowcode-base-purple-1: #f5e8ff; - --ti-lowcode-base-purple-2: #e4c5fc; - --ti-lowcode-base-purple-3: #d0a1f7; - --ti-lowcode-base-purple-4: #b878f0; - --ti-lowcode-base-purple-5: #9f53e6; - --ti-lowcode-base-purple-6: #832fd6; - --ti-lowcode-base-purple-7: #641eb0; - --ti-lowcode-base-purple-8: #4c1091; - --ti-lowcode-base-purple-9: #370673; - --ti-lowcode-base-purple-10: #20004d; - --ti-lowcode-base-purple-11: #683d99; - --ti-lowcode-base-purple-12: #a07acc; - --ti-lowcode-base-purple-13: #cbb8e6; - - // expand-pink - --ti-lowcode-base-pink-1: #fce6fb; - --ti-lowcode-base-pink-2: #fcc2f9; - --ti-lowcode-base-pink-3: #f794f2; - --ti-lowcode-base-pink-4: #eb67e6; - --ti-lowcode-base-pink-5: #e841e5; - --ti-lowcode-base-pink-6: #d91ad9; - --ti-lowcode-base-pink-7: #b50fb8; - --ti-lowcode-base-pink-8: #8f0a94; - --ti-lowcode-base-pink-9: #6b0370; - --ti-lowcode-base-pink-10: #47004d; - --ti-lowcode-base-pink-11: #993d99; - --ti-lowcode-base-pink-12: #c97acc; - --ti-lowcode-base-pink-13: #e2b8e6; - - // expand-rose - --ti-lowcode-base-rose-1: #fce6ef; - --ti-lowcode-base-rose-2: #ffc4de; - --ti-lowcode-base-rose-3: #fa9bc9; - --ti-lowcode-base-rose-4: #f56cac; - --ti-lowcode-base-rose-5: #eb4696; - --ti-lowcode-base-rose-6: #e61c81; - --ti-lowcode-base-rose-7: #b50e65; - --ti-lowcode-base-rose-8: #940a54; - --ti-lowcode-base-rose-9: #70033f; - --ti-lowcode-base-rose-10: #4d002b; - --ti-lowcode-base-rose-11: #993d6e; - --ti-lowcode-base-rose-12: #cc7aa6; - --ti-lowcode-base-rose-13: #e6b8d2; - - // 公司品牌色 - --ti-lowcode-base-brand-color: #c7000b; - - // 主色 - --ti-lowcode-base-primary-color-1: #191919; - --ti-lowcode-base-primary-color-2: #1476ff; - - // 背景色 - --ti-lowcode-base-bg: #f5f5f5; - --ti-lowcode-base-bg-1: rgba(0, 0, 0, 0.05); - --ti-lowcode-base-bg-2: #fafafa; - --ti-lowcode-base-bg-3: #191919; - --ti-lowcode-base-bg-4: #595959; - --ti-lowcode-base-bg-5: #fff; - --ti-lowcode-base-bg-6: #5959591a; - --ti-lowcode-base-bg-7: #f6f6f6; - - // 文本色 - --ti-lowcode-base-text-color: #191919; - --ti-lowcode-base-text-color-1: #595959; - --ti-lowcode-base-text-color-2: #1476ff; - --ti-lowcode-base-text-color-3: #808080; - --ti-lowcode-base-text-color-4: #c2c2c2; - - // 文本链接色 - --ti-lowcode-base-text-link-color: #191919; - --ti-lowcode-base-text-link-color-1: #595959; - --ti-lowcode-base-text-link-color-2: #c2c2c2; - --ti-lowcode-base-text-link-color-3: #fff; - - // 按钮边框色 - --ti-lowcode-base-secondary-button-border-color: #595959; - --ti-lowcode-base-secondary-button-border-hover-color: #c2c2c2; - --ti-lowcode-base-default-button-border-color: #c2c2c2; - - // 分割线 - --ti-lowcode-base-split-color-1: rgba(0, 0, 0, 0.08); // 白色背景分割线 - --ti-lowcode-base-split-color-2: rgba(0, 0, 0, 0.15); // 灰色背景分割线 - - // 状态色 - --ti-lowcode-base-error-color: #f23030; - --ti-lowcode-base-warn-color: #ff8800; - --ti-lowcode-base-warn-color-1: #f7d916; - --ti-lowcode-base-success-color: #5cb300; - --ti-lowcode-base-prompt-color: #1476ff; - --ti-lowcode-base-invalidate-color: #ebebeb; -} diff --git a/packages/theme/light/block.less b/packages/theme/light/block.less index 110fc094f7..a0204adc76 100644 --- a/packages/theme/light/block.less +++ b/packages/theme/light/block.less @@ -25,7 +25,7 @@ --ti-lowcode-component-block-setting-item-text-color: var(--te-common-text-secondary); // 区块管理 - 添加分类 --ti-lowcode-component-block-list-add-group-btn-bg: transparent; - --ti-lowcode-component-block-list-add-group-btn-border: 1px solid var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-component-block-list-add-group-btn-border: 1px solid var(--te-common-border-default); --ti-lowcode-component-block-list-setting-btn-color: var(--te-common-text-primary); --ti-lowcode-component-block-list-setting-btn-hover-color: var(--te-common-text-primary); --ti-lowcode-component-block-list-add-group-btn-border-radius: 6px; diff --git a/packages/theme/light/datasource.less b/packages/theme/light/datasource.less index 4b9e06f349..12945f8233 100644 --- a/packages/theme/light/datasource.less +++ b/packages/theme/light/datasource.less @@ -1,48 +1,40 @@ :root { - --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-datasource-tabs-border-color: var(--ti-lowcode-base-gray-30); - --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-80); + --ti-lowcode-datasource-toolbar-icon-color: var(--te-common-text-secondary); + --ti-lowcode-datasource-tabs-border-color: var(--te-common-border-default); + --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--te-common-text-primary); --ti-lowcode-datasource-json-border-color: var(--te-common-border-checked); - --ti-lowcode-datasource-tree-border-color: var(--ti-lowcode-base-success-color); + --ti-lowcode-datasource-tree-border-color: var(--te-common-color-success); --ti-lowcode-datasource-common-border-primary-color: var(--te-common-border-checked); - --ti-lowcode-datasource-success-border-color: var(--ti-lowcode-base-success-color); - --ti-lowcode-datasource-input-icon-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-datasource-dialog-demo-border-color: var(--ti-lowcode-base-gray-60); + --ti-lowcode-datasource-success-border-color: var(--te-common-color-success); + --ti-lowcode-datasource-input-icon-color: var(--te-common-text-secondary); + --ti-lowcode-datasource-dialog-demo-border-color: var(--te-common-text-secondary); --ti-lowcode-datasource-canvas-wrap-bg: var(--te-common-border-default); - --ti-lowcode-datasource-dialog-font-color: var(--ti-lowcode-base-gray-70); - --ti-lowcode-datasource-toolbar-bg: var(--ti-lowcode-base-bg-2); - --ti-lowcode-datasource-description-error-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-datasource-common-text-main-color: var(--ti-lowcode-common-text-main-color); - --ti-lowcode-datasource-toolbar-more-hover-color: #808080; - --ti-lowcode-datasource-delete-button-hover-bg: var(--ti-lowcode-base-red-6); + --ti-lowcode-datasource-dialog-font-color: var(--te-common-text-secondary); + --ti-lowcode-datasource-toolbar-bg: var(--te-common-bg-container); + --ti-lowcode-datasource-description-error-color: var(--te-common-color-error); + --ti-lowcode-datasource-common-text-main-color: var(--te-common-text-secondary); + --ti-lowcode-datasource-toolbar-more-hover-color: var(--te-common-text-weaken); + --ti-lowcode-datasource-delete-button-hover-bg: var(--te-common-color-error); --ti-lowcode-datasource-common-text-color-5: var(--te-common-text-weaken); - --ti-lowcode-datasource-common-empty-color: var(--ti-lowcode-common-empty-color); - --ti-lowcode-datasource-toolbar-view-hover-bg: var(--ti-lowcode-base-invalidate-color); - --ti-lowcode-datasource-common-hover-bg-1: var(--ti-lowcode-common-hover-bg-1); + --ti-lowcode-datasource-common-hover-bg-1: var(--te-common-bg-container); --ti-lowcode-datasource-common-primary-text-color: var(--te-common-text-primary); - --ti-lowcode-datasource-icon-hover-bg: var(--ti-lowcode-base-invalidate-color); - --ti-lowcode-datasource-tabs-bg: var(--ti-lowcode-base-gray-20); + --ti-lowcode-datasource-icon-hover-bg: var(--te-common-bg-container); + --ti-lowcode-datasource-tabs-bg: var(--te-common-text-primary); --ti-lowcode-datasource-canvas-handle-hover-bg: var(--te-common-bg-primary-checked); - --ti-lowcode-datasource-tabs-active-bg: var(--ti-lowcode-base-gray-20); - --ti-lowcode-datasource-common-error-color: var(--ti-lowcode-common-error-color); - --ti-lowcode-datasource-description-minor-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-datasource-description-warning-color: var(--ti-lowcode-base-orange-6); - --ti-lowcode-datasource-error-tip-color: var(--ti-lowcode-base-red-6); - --ti-lowcode-datasource-label-color: var(--ti-lowcode-base-gray-60); // light - --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-datasource-common-error-color: var(--te-common-color-error); + --ti-lowcode-datasource-description-minor-color: var(--te-common-text-weaken); + --ti-lowcode-datasource-description-warning-color: var(--te-common-color-warning); + --ti-lowcode-datasource-error-tip-color: var(--te-common-color-error); + --ti-lowcode-datasource-label-color: var(--te-common-text-secondary); // light + --ti-lowcode-datasource-list-hover-color: var(--te-common-bg-container); --ti-lowcode-datasource-btn-click-color: var(--te-common-border-active); - --ti-lowcode-datasource-tabs-bottom-border-color: var(--te-common-border-checked); - --ti-lowcode-datasource-list-bottom-border-color: var(--ti-lowcode-base-invalidate-color); - --ti-lowcode-datasource-switch-off-bg-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-datasource-switch-on-bg-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-datasource-modal-text-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-datasource-respones-select-color-bg: var(--ti-lowcode-base-text-link-color-3); - --ti-lowcode-datasource-respones-color-bg: var(--ti-lowcode-base-blue-6); - --ti-lowcode-datasource-respones-border-color-bg: var(--ti-lowcode-base-text-link-color-3); - --ti-lowcode-datasource-select-border-right-color-bg: var(--te-common-border-default); - --ti-lowcode-datasource-select-border-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-data-source-border-color: rgb(219, 219, 219); - --ti-lowcode-data-source-color: rgb(25, 25, 25); - --ti-lowcode-data-source-box-bg: rgb(245, 245, 245); - --ti-lowcode-datasource-tip-color: rgb(128, 128, 128); + --ti-lowcode-datasource-tabs-color: var(--te-common-border-); + --ti-lowcode-datasource-switch-off-bg-color: var(--te-common-bg-switch); + --ti-lowcode-datasource-switch-on-bg-color: var(--te-common-bg-primary-checked); + --ti-lowcode-datasource-modal-text-color: var(--te-common-text-primary); + --ti-lowcode-datasource-respones-color-bg: var(--te-common-bg-primary-checked); + --ti-lowcode-data-source-border-color: var(--te-common-border-default); + --ti-lowcode-data-source-color: var(--te-common-text-primary); + --ti-lowcode-data-source-box-bg: var(--te-common-bg-container); + --ti-lowcode-datasource-tip-color: var(--te-common-text-weaken); } diff --git a/packages/theme/light/events.less b/packages/theme/light/events.less index 34b0345adf..1216fb547f 100644 --- a/packages/theme/light/events.less +++ b/packages/theme/light/events.less @@ -1,40 +1,40 @@ .setting-advanced-add-custom-event-tip { - --ti-lowcode-events-add-custom-event-tips-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-base-warn-color); + --ti-lowcode-events-add-custom-event-tips-color: var(--te-common-text-primary); + --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--te-common-color-warning); } .setting-advanced-bind-event-list { - --ti-lowcode-events-bind-event-list-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-base-text-color-4); - --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-events-bind-event-list-color: var(--te-common-text-primary); + --ti-lowcode-events-bind-event-list-item-disabled-color: var(--te-common-text-disabled); + --lowcode-events-bind-event-list-item-hover-bg-color: var(--te-common-bg-container); } .bind-action-list { - --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-events-event-bind-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-base-success-color); - --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-events-bind-action-item-border-color: var(--te-common-border-default); + --ti-lowcode-events-event-bind-color: var(--te-common-text-checked); + --ti-lowcode-events-bind-action-item-color: var(--te-common-text-primary); + --ti-lowcode-events-bind-action-item-hover-bg-color: var(---te-common-bg-container); + --ti-lowcode-events-bind-action-item-linked-bg-color: var(--te-common-color-success); + --ti-lowcode-events-bind-action-item-linked-color: var(--te-common-text-dark-inverse); --ti-lowcode-events-empty-action-bg-color: var(--te-common-bg-container); --ti-lowcode-events-empty-action-color: var(--te-common-text-weaken); --ti-lowcode-events-custom-icon-color: var(--te-common-text-weaken); - --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color); + --ti-lowcode-events-empty-action-tips-strong-color: var(--te-common-color-warning); } .advanced-config-container { - --ti-lowcode-events-advanced-config-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-events-advanced-config-color: var(--te-common-text-primary); + --ti-lowcode-events-advanced-label-color: var(--te-common-text-secondary); + --ti-lowcode-events-advanced-binding-state-bg-color: var(--te-common-bg-primary-checked); + --ti-lowcode-events-advanced-binding-state-color: var(--te-common-text-dark-inverse); } .bind-event-dialog-content { --ti-lowcode-bind-event-dialog-color: var(--te-common-text-secondary); - --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-bind-event-dialog-content-left-border-color: var(--te-common-border-default); + --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--te-common-border-default); + --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--te-common-bg-container); + --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--te-common-text-secondary); + --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--te-common-text-checked); + --ti-lowcode-bind-event-dialog-mark-bg-color: var(--te-common-bg-container); } diff --git a/packages/theme/light/gpt-dialog.less b/packages/theme/light/gpt-dialog.less index c7dce61b0e..4457ec3c9d 100644 --- a/packages/theme/light/gpt-dialog.less +++ b/packages/theme/light/gpt-dialog.less @@ -3,8 +3,6 @@ --ti-lowcode-chat-model-text: #191919; // chatGPT聊天窗问题模板文字边框颜色 --ti-lowcode-chat-model-text-border: #cbcbcb; - // chatGPT聊天窗提问框图标 - --ti-lowcode-chat-model-input-icon: #999999; // chatGPT聊天窗用户头像边框色 --ti-lowcode-chat-model-avatar-border: #dfe1e6; // chatGPT聊天窗AI聊天文字背景 @@ -55,13 +53,13 @@ --ti-lowcode-chat-model-tips-bg: #f5f5f5; // chatGPT加载 - --ti-lowcode-chat-loading-svg-color: var(--te-common-icon-link); + --ti-lowcode-chat-loading-svg-color: #1476ff; --ti-lowcode-chat-loading-text-color: #595959; } .chat-model-popover { --ti-lowcode-chat-model-popover-bg: #fff; - --ti-lowcode-chat-model-popover-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-chat-model-popover-color: #191919; --ti-lowcode-chat-model-popover-active-bg: #fff; - --ti-lowcode-chat-model-popover-active-color: var(--ti-lowcode-base-text-color-2); + --ti-lowcode-chat-model-popover-active-color: #1476ff; } diff --git a/packages/theme/light/help.less b/packages/theme/light/help.less index ec1b448a03..23bbc02362 100644 --- a/packages/theme/light/help.less +++ b/packages/theme/light/help.less @@ -1,16 +1,16 @@ .shepherd-modal-overlay-container, .tiny-guide { - --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-base-primary-color-1); - --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-base-primary-color-1); + --ti-lowcode-help-guide-content-text-color: var(--te-common-text-secondary); + --ti-lowcode-help-guide-title-text-color: var(--te-common-text-primary); + --ti-lowcode-help-guide-progress-style-text-color: var(--te-common-text-primary); --ti-lowcode-help-guide-mask-bg-color: inherit; } .help-plugin-box { - --ti-lowcode-help-box-bg-color: #ffffff; - --ti-lowcode-help-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2); - --ti-lowcode-help-box-title-text-color: #191919; - --ti-lowcode-help-box-item-text-color: #595959; - --ti-lowcode-help-box-question-border-top: #ebebeb; - --ti-lowcode-help-box-question-item-text-color: #1476ff; - --ti-lowcode-help-box-item-hover-bg-color: #f5f5f5; + --ti-lowcode-help-box-bg-color: var(--te-common-bg-default); + --ti-lowcode-help-box-shadow: 0px 2px 6px 0px var(--te-base-box-shadow-rgba-2); + --ti-lowcode-help-box-title-text-color: var(--te-common-text-primary); + --ti-lowcode-help-box-item-text-color: var(--te-common-text-secondary); + --ti-lowcode-help-box-question-border-top: var(--te-common-border-divider); + --ti-lowcode-help-box-question-item-text-color: var(--te-common-text-emphasize); + --ti-lowcode-help-box-item-hover-bg-color: var(--te-common-bg-container); } diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less index 60c943fad9..66a84d8890 100644 --- a/packages/theme/light/index.less +++ b/packages/theme/light/index.less @@ -1,5 +1,4 @@ // 主题配置优先于公共配置 -@import './base.less'; @import './variable.less'; @import './tutorial.less'; @import './help.less'; diff --git a/packages/theme/light/life-cycles.less b/packages/theme/light/life-cycles.less index b967a16b25..8377abf2d4 100644 --- a/packages/theme/light/life-cycles.less +++ b/packages/theme/light/life-cycles.less @@ -1,7 +1,7 @@ :root { // 生命周期 - --ti-lowcode-life-cycle-alert-color: #808080; - --ti-lowcode-life-cycle-item-hover-bg: var(--ti-lowcode-common-hover-bg-1); - --ti-lowcode-life-cycle-item-disable-color: var(--ti-lowcode-base-text-link-color-2); - --ti-lowcode-life-cycle-editor-border: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-life-cycle-alert-color: var(--te-common-text-disabled); + --ti-lowcode-life-cycle-item-hover-bg: var(--te-common-bg-container); + --ti-lowcode-life-cycle-item-disable-color: var(--te-common-text-disabled); + --ti-lowcode-life-cycle-editor-border: var(--te-common-border-default); } diff --git a/packages/theme/light/materials.less b/packages/theme/light/materials.less index ad195352d6..5bce3562d4 100644 --- a/packages/theme/light/materials.less +++ b/packages/theme/light/materials.less @@ -1,30 +1,30 @@ :root { // 带边框的图标按钮边框颜色 - --ti-lowcode-materials-border-icon-border-color: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-materials-border-icon-border-color: var(--te-common-border-default); // 带边框的图标按钮图标颜色 - --ti-lowcode-materials-border-icon-svg-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-materials-border-icon-svg-color: var(--te-common-text-primary); // 带边框的图标按钮悬浮边框颜色 --ti-lowcode-materials-border-icon-border-color-hover: var(--te-common-border-active); // 带边框的图标按钮背景颜色 - --ti-lowcode-materials-border-icon-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-materials-border-icon-bg-color: var(--te-common-bg-default); // 区块分组下拉选项下边框颜色 --ti-lowcode-materials-block-group-item-border-color: var(--te-common-text-primary); // 添加区块筛选模块字体颜色 --ti-lowcode-materials-block-filter-text-color: var(--te-common-text-primary); + // 添加区块筛选模块选中字体颜色 + --ti-lowcode-materials-block-filter-selected-text-color: var(--te-common-text-primary); // 添加区块穿梭框面板背景颜色 --ti-lowcode-materials-block-transfer-bg-color: var(--te-common-bg-default); // 添加区块穿梭框面板头部字体颜色 --ti-lowcode-materials-block-transfer-header-text-color: var(--te-common-text-primary); - // 添加区块筛选模块选中字体颜色 - --ti-lowcode-materials-block-filter-selected-text-color: var(--te-common-text-primary); // 添加区块穿梭框面板头部背景颜色 --ti-lowcode-materials-block-transfer-header-bg-color: var(--te-common-bg-container); // 区块分组添加区块筛选项 hover 颜色 --ti-lowcode-materials-block-filter-hover-color: var(--te-common-text-primary); // 组件列表 组件名称颜色 - --ti-lowcode-materials-component-list-color: var(--ti-lowcode-common-text-main-color); + --ti-lowcode-materials-component-list-color: var(--te-common-text-secondary); // 删除区块分组气泡弹窗背景色 - --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--te-common-bg-default); + --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--te-common-bg-popover); // 删除区块分组气泡弹窗标题色 - --ti-lowcode-materials-block-group-delete-popover-title-color: var(--ti-lowcode-common-text-title-color); + --ti-lowcode-materials-block-group-delete-popover-title-color: var(--te-common-text-primary); } diff --git a/packages/theme/light/metaComponent.less b/packages/theme/light/metaComponent.less index 25062480a5..c382c6cfba 100644 --- a/packages/theme/light/metaComponent.less +++ b/packages/theme/light/metaComponent.less @@ -1,65 +1,59 @@ :root { // MetaListItem - --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-meta-list-item-border-color: rgba(0, 0, 0, 0.08); + --ti-lowcode-meta-list-item-bg-color: var(--te-common-bg-default); + --ti-lowcode-meta-list-item-border-color: var(--te-common-border-default); // - --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-meta-list-top-color: var(--te-common-text-secondary); // MetaJsSlot - --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1); + --lowcode-meta-js-slot-color: var(--te-common-text-secondary); // MetaCodeEditor - --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-meta-codeEditor-color: var(--te-common-text-primary); + --ti-lowcode-meta-codeEditor-hover-color: var(--te-common-text-primary); + --ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default); --ti-lowcode-meta-codeEditor-border-hover-color: var(--te-common-border-active); --ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken); } // config-item label popover tips .prop-label-tips-container { - --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-config-item-label-tips-title-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-meta-config-item-label-tips-desc-color: var(--te-common-text-secondary); + --ti-lowcode-meta-config-item-label-tips-title-color: var(--te-common-text-primary); } // configItem .properties-item { - --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-meta-config-item-error-tips-color: var(--te-common-color-error); --ti-lowcode-meta-config-item-label-color: var(--te-common-text-secondary); - --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-meta-config-item-bind-color: var(--te-common-text-dark-inverse); --ti-lowcode-meta-config-item-bind-bg: var(--te-common-bg-primary-checked); - --ti-lowcode-meta-config-item-active-bg: var(--ti-lowcode-common-hover-bg-1); - --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-base-text-color-2); + --ti-lowcode-meta-config-item-active-bg: var(--te-common-bg-container); + --ti-lowcode-meta-config-item-link-color: var(--te-common-text-checked); } // MetaBindVariable .meta-bind-variable-dialog-box { - --ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var( - --ti-lowcode-base-default-button-border-color - ); - --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-meta-bind-variable-icon-color: var(--te-common-text-primary); + --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--te-common-text-secondary); + --ti-lowcode-meta-bind-variable-content-left-title-color: var(--te-common-text-primary); + --ti-lowcode-meta-bind-variable-content-right-title-color: var(--te-common-text-primary); + --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--te-common-border-default); + --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(--te-common-border-default); + --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--te-common-text-secondary); + --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--te-common-text-secondary); + --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--te-common-text-secondary); + --ti-lowcode-meta-bind-variable-bottom-border-color: var(--te-common-border-default); + --ti-lowcode-meta-bind-variable-top-border-color: var(--te-common-border-default); + --ti-lowcode-meta-bind-variable-bottom-color: var(--te-common-text-secondary); + --ti-lowcode-meta-bind-variable-content-left-list-color: var(--te-common-text-primary); + --ti-lowcode-meta-bind-variable-item-text-color: var(--te-common-text-primary); + --ti-lowcode-meta-bind-variable-header-alert-color: var(--te-common-text-primary); + --ti-lowcode-meta-bind-variable-top-color: var(--te-common-text-primary); } // MetaCodeEditor .meta-code-editor-dialog-box { - --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5); - --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-code-editor-source-code-content-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-meta-code-editor-header-tips-container-color: var(--te-common-text-primary); + --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--te-common-icon-secondary); + --ti-lowcode-meta-code-editor-err-msg-color: var(--te-common-color-error); } diff --git a/packages/theme/light/pageManage.less b/packages/theme/light/pageManage.less index f795e65f6e..3402555b3f 100644 --- a/packages/theme/light/pageManage.less +++ b/packages/theme/light/pageManage.less @@ -1,27 +1,12 @@ :root { - --ti-lowcode-page-manage-title-background-text-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-page-manage-tree-text-background-color: var(--ti-lowcode-common-bg-8); + --ti-lowcode-page-manage-title-background-text-color: var(--te-common-text-primary); + --ti-lowcode-page-manage-tip-text-color: var(--te-common-text-weaken); + --ti-lowcode-page-manage-tree-text-background-color: var(--te-common-bg-default); --ti-lowcode-page-manage-tree-node-background-color: var(--te-common-bg-default); - --ti-lowcode-page-manage-tree-node-label-color: #191919; - --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-page-manage-input-background-color: var(--ti-lowcode-common-bg-9); - --ti-lowcode-page-manage-input-border-color: var(--ti-lowcode-common-text-color-4); - --ti-lowcode-page-manage-tips-icon-color: var(--te-common-icon-link); - --ti-lowcode-page-manage-content-tips-color: var(--te-common-text-weaken); - --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-base-gray-30); - --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-text-main-color); - --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-base-bg-3); - --ti-lowcode-page-manage-text-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-page-manage-btn-text-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-page-manage-btn-text-color-2: var(--te-common-text-weaken); - --ti-lowcode-page-manage-error-color: var(--ti-lowcode-common-error-color); - --ti-lowcode-page-manage-input-group-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-page-manage-input-group-border-right-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-page-manage-input-output-text-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-page-manage-tree-node-label-color: var(--te-common-text-primary); + --ti-lowcode-page-manage-text-color: var(--te-common-text-secondary); + --ti-lowcode-page-manage-input-head-text-color: var(--te-common-text-primary); + --ti-lowcode-page-manage-btn-text-color: var(--te-common-text-weaken); + --ti-lowcode-page-manage-error-color: var(--te-common-color-error); + --ti-lowcode-page-manage-input-group-color: var(--te-common-bg-default); } diff --git a/packages/theme/light/plugin-js.less b/packages/theme/light/plugin-js.less index ad512cd922..9f21c8a0e9 100644 --- a/packages/theme/light/plugin-js.less +++ b/packages/theme/light/plugin-js.less @@ -1,7 +1,6 @@ // 页面JS 插件面板 .plugin-page-js-container { - --ti-lowcode-plugin-js-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-plugin-js-bg: var(--te-common-bg-default); + --ti-lowcode-plugin-js-head-border-bottom-color: var(--te-common-border-divider); + --ti-lowcode-plugin-js-help-link-color: var(--te-common-text-link); } diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less index 74274a5b19..7672f02a1c 100644 --- a/packages/theme/light/setting-style.less +++ b/packages/theme/light/setting-style.less @@ -1,10 +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-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-50); + --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/settings.less b/packages/theme/light/settings.less index c2d10a2bb9..b37775e1eb 100644 --- a/packages/theme/light/settings.less +++ b/packages/theme/light/settings.less @@ -1,46 +1,38 @@ // 右侧属性面板 css 变量 #tiny-right-panel { --ti-lowcode-setting-panel-bg-color: var(--te-common-bg-default); - --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-setting-panel-tabs-item-title-color: var(--te-common-text-secondary); + --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--te-common-text-primary); + --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--te-common-text-primary); // 插件设置面板左侧边框 - --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-plugin-setting-panel-border-left-color: var(--te-common-border-divider); } // 属性面板-属性-区块关联属性-新建区块属性popover .block-new-attr-popover { - --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-base-text-color); -} - -// 属性面板-属性-区块关联属性 icon -.block-link-field { - --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-base-success-color); + --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--te-common-text-secondary); + --ti-lowcode-attr-popover-menu-item-color: var(--te-common-text-primary); } .className-container { - --ti-lowcode-className-selector-container-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-className-selector-container-error-bg-color: rgba(242, 48, 48, 0.1); - --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1); - --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-gray-20); + --ti-lowcode-className-selector-container-color: var(--te-common-text-primary); + --ti-lowcode-className-selector-container-error-border-color: var(--te-common-color-error); + --ti-lowcode-className-selector-container-error-bg-color: var(--te-common-bg-error); + --ti-lowcode-className-selector-error-tips-color: var(--te-common-color-error); + --ti-lowcode-className-selector-container-border-color: var(--te-common-border-default); + --ti-lowcode-className-selector-container-hover-border-color: var(--te-common-border-hover); + --ti-lowcode-className-selector-container-empty-tips-color: var(--te-common-text-secondary); + --ti-lowcode-className-selector-container-label-bg-color: var(--te-base-blue-140); + --ti-lowcode-className-selector-container-label-color: var(--te-common-text-checked); + --ti-lowcode-className-selector-container-option-btn-color: var(--te-common-text-checked); + --ti-lowcode-className-selector-dropdown-list-bg-color: var(--te-common-bg-default); + --ti-lowcode-className-selector-dropdown-list-item-color: var(--te-common-text-primary); + --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--te-common-bg-container); --ti-lowcode-className-selector-dropdown-list-tips-color: var(--te-common-text-weaken); } :root { - --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-className-selector-del-popover-bg-color: var(--te-common-bg-default); + --ti-lowcode-className-selector-del-popover-title-color: var(--te-common-text-primary); --ti-lowcode-property-active-color: var(--te-common-bg-primary-checked); } diff --git a/packages/theme/light/toolbar.less b/packages/theme/light/toolbar.less index edaf770cd8..049c9e7ea8 100644 --- a/packages/theme/light/toolbar.less +++ b/packages/theme/light/toolbar.less @@ -3,15 +3,14 @@ --ti-lowcode-toolbar-border-bottom-color: var(--ti-lowcode-common-border-color-4); --ti-lowcode-toolbar-media-bg: var(--te-common-bg-default); --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-1); - --ti-lowcode-toolbar-title-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-base-gray-60); + --ti-lowcode-toolbar-title-color: var(--te-common-text-primary); + --ti-lowcode-toolbar-sub-title-color: var(--te-common-text-secondary); --ti-lowcode-toolbar-hover-color: var(--te-common-bg-container); --ti-lowcode-toolbar-view-active-bg: rgb(235, 235, 235); // 相当于 规范中定义的 #191919 透明度5% --ti-lowcode-toolbar-left-icon-bg-hover: rgb(240, 240, 240); - --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-toolbar-active-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-base-brand-color); + --ti-lowcode-toolbar-active-color: var(--te-common-text-secondary); + --ti-lowcode-toolbar-user-img-border-color: var(--te-common-border-divider); + --ti-lowcode-toolbar-dot-color: var(--te-common-color-error); --ti-lowcode-toolbar-collapsed-toolbar-bg: #f5f5f5; --ti-lowcode-toolbar-right-line: #ebebeb; } diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less index 1bbe0312bb..2e0bafc5fa 100644 --- a/packages/theme/light/variable.less +++ b/packages/theme/light/variable.less @@ -4,50 +4,27 @@ --base-min-width: 1280px; // ------ 主要的公共主题色，前缀为 --ti-lowcode-common ------- - --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-primary-color-2); // hover时，颜色不变 - --ti-lowcode-common-component-hover-bg: #f5f5f5; - --ti-lowcode-common-layout-bg: #fff; --ti-lowcode-common-secondary-text-color: #c2c2c2; - --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-common-text-placeholder-color: var(--te-common-text-secondary); --ti-lowcode-common-text-color-1: #6a6a6a; --ti-lowcode-common-text-color-2: #d9d9d9; --ti-lowcode-common-text-color-3: #fff; --ti-lowcode-common-text-color-4: #50d4ab; - --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-common-text-color-6: var(--te-common-text-secondary); --ti-lowcode-common-border-color-1: #dfe1e6; --ti-lowcode-common-border-color-3: #606165; --ti-lowcode-common-border-color-4: #dfe1e6; - --ti-lowcode-common-hover-bg-1: #f5f5f5; --ti-lowcode-common-third-text-color: #ababab; - --ti-lowcode-common-error-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-common-empty-text-color: var(--ti-lowcode-base-gray-50); - - --ti-lowcode-info-color: var(--ti-lowcode-base-prompt-color); - --ti-lowcode-warning-color: var(--ti-lowcode-base-warn-color); - --ti-lowcode-warning-color-1: var(--ti-lowcode-base-warn-color-1); - --ti-lowcode-dark-1: #464c59; + --ti-lowcode-common-empty-text-color: var(--te-common-text-weaken); // ------ 公共组件的主题色，前缀为 --ti-lowcode-component-组件名 ------- - --ti-lowcode-component-btn-default-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮颜色 - --ti-lowcode-component-btn-default-disabled-color: var(--ti-lowcode-common-secondary-text-color); // 默认禁用颜色 - --ti-lowcode-component-btn-default-hover-color: var(--ti-lowcode-common-text-main-color); // 默认按钮 hover 颜色 - --ti-lowcode-component-btn-default-border-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮边框色 - --ti-lowcode-component-btn-default-border-hover-color: var( - --ti-lowcode-common-text-main-color - ); // 默认按钮 hover 边框色 + // svgButton - --ti-lowcode-component-svg-button-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-component-svg-button-color: var(--te-common-text-primary); --ti-lowcode-component-svg-button-hover-color: var(--te-common-text-primary); --ti-lowcode-component-svg-button-hover-bg-color: var(--te-common-bg-prompt); - --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-component-svg-button-active-color: var(--te-common-text-primary); --ti-lowcode-component-svg-button-active-bg-color: var(--te-common-bg-prompt); - - // 关闭按钮 - --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-base-text-color); // 关闭按钮默认颜色 - --ti-lowcode-component-close-icon-text-hover-color: var(--te-common-text-primary); // 关闭按钮 hover 颜色 - // 插件面板 --ti-lowcode-plugin-panel-title-color: rgb(25, 25, 25); // 插件面板标题色 --ti-lowcode-plugin-panel-title-font-weight: 700; // 插件面板标题加粗效果 @@ -59,51 +36,43 @@ --ti-lowcode-plugin-setting-panel-bg: var(--te-common-bg-default); // 插件设置面板背景色 // 设置面板 - --ti-lowcode-component-setting-panel-label-color: var(--ti-lowcode-common-text-main-color); - --ti-lowcode-component-setting-panel-icon-color: var(--ti-lowcode-common-text-main-color); + --ti-lowcode-component-setting-panel-label-color: var(--te-common-text-secondary); + --ti-lowcode-component-setting-panel-icon-color: var(--te-common-text-secondary); // ------ 各个模块的主题色，前缀为 --ti-lowcode-模块名 ------- - --ti-lowcode-design-plugin-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-design-toolbar-icon-color: #8a8e99; + --ti-lowcode-design-plugin-color: var(--te-common-text-weaken); + --ti-lowcode-design-plugin-icon-color: var(--te-common-icon-secondary); // 物料-组件列表 --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-4); - --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-material-component-list-hover-bg: var(--te-common-bg-container); // 页面管理 - --ti-lowcode-page-tree-color: var(--ti-lowcode-common-text-main-color); + --ti-lowcode-page-tree-color: var(--te-common-text-secondary); --ti-lowcode-page-tree-hover-color: var(--te-common-text-primary); // 数据源 - --ti-lowcode-datasource-list-color: var(--ti-lowcode-common-text-main-color); + --ti-lowcode-datasource-list-color: var(--te-common-text-secondary); // 状态管理 - --ti-lowcode-data-list-color: var(--ti-lowcode-common-text-main-color); + --ti-lowcode-data-list-color: var(--te-common-text-secondary); // 状态管理面板头部的底部边框色 - --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-border-color-4); - // 状态管理示例背景色 - --ti-lowcode-data-example-bg-color: var(--ti-lowcode-dark-1); - // 状态管理示例文字色 - --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-color-2); + --ti-lowcode-data-header-border-bottom-color: var(--te-common-border-divider); // 添加高级属性文字颜色 --ti-lowcode-data-advanced-text-color: #252b3a; // 添加高级属性 hover 文字颜色 --ti-lowcode-data-advanced-text-hover-color: #5073e5; - // 状态管理按激活背景色 - --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-base-gray-0); // 状态管理按背景色 --ti-lowcode-data-radio-group-bg: transparent; // 教程 - --ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-common-text-main-color); + --ti-lowcode-tutorial-list-item-color: var(--te-common-text-secondary); // 头部工具栏背景色 --ti-lowcode-toolbar-bg: #fafafa; // 头部工具栏选中背景色 --ti-lowcode-toolbar-active-bg: transparent; - // 头部工具栏边框色 - --ti-lowcode-toolbar-border-color: var(--ti-lowcode-base-default-button-border-color); // 头部工具栏icon颜色 --ti-lowcode-toolbar-icon-color: #404040; // 头部工具栏icon颜色 @@ -113,8 +82,6 @@ // 头部工具栏更多more图标hover颜色 --ti-lowcode-toolbar-more-hover-color: var(--te-common-icon-secondary); - // 头部工具栏画布大小文本hover背景色 && 头部弹框背景色 && context-menu 背景色 && 大纲树节点hover背景色 && 日期组件背景色 - --ti-lowcode-toolbar-view-hover-bg: #e9e9e9; // 头部工具栏i18n国际化字体颜色 --ti-lowcode-toolbar-i18n-color: red; // 应用发布弹窗图标颜色 @@ -126,15 +93,13 @@ // 中间画布边框色 --ti-lowcode-canvas-border-color: #999; // 右侧属性面板tab页签边框色 - --ti-lowcode-tabs-border-color: #ddd; + --ti-lowcode-tabs-border-color: var(--te-common-border-default); // 右侧属性面板tab页签激活状态背景色 --ti-lowcode-tabs-active-bg: #f3f3f3; - // 右侧属性面板折叠面板展开内容边框色 - --ti-lowcode-collapse-active-border-color: #333; // 中间画布拖拽宽度按钮背景色 --ti-lowcode-canvas-handle-bg: red; // 中间画布拖拽宽度按钮背景色 - --ti-lowcode-canvas-handle-hover-bg: #5e7ce0; + --ti-lowcode-canvas-handle-hover-bg: var(--te-common-bg-primary-checked); // 中间画布底部面包屑背景色 --ti-lowcode-breadcrumb-bg: #fff; // 中间画布底部面包屑字体颜色 @@ -156,26 +121,10 @@ // collapse 折叠面板激活后字体颜色 --ti-lowcode-collapse-active-color: #252b3a; - // switch 圆点背景色 - --ti-lowcode-switch-after-bg: #fff; - // switch 圆点 hover 背景色 - --ti-lowcode-switch-after-hover-bg: #f5f5f5; - // switch 圆点 checked 背景色 - --ti-lowcode-switch-after-checked-bg: #fff; // -----下拉框相关主题配置----- - // 下拉框聚焦时边框颜色 - --ti-lowcode-select-focus-border-color: var(--te-common-border-active); - // 下拉框选中标签字体颜色 - --ti-lowcode-select-tags-text-color: var(--ti-lowcode-base-text-color-3); - // 下拉框选中标签背景颜色 - --ti-lowcode-select-tags-bg-color: #5959591a; - // 下拉框suffix图标悬浮颜色 - --ti-lowcode-select-suffix-icon-color-hover: var(--ti-lowcode-base-text-color); - // 组件icon颜色 - --ti-lowcode-component-icon-color: #8d8d8d; // 左侧插件激活背景色 - --ti-lowcode-left-panel-active-bg: #f2f2f2; + --ti-lowcode-left-panel-active-bg: var(--te-base-blue-20); // 左侧插件激活边框色 --ti-lowcode-left-panel-active-border-color: #999; // 左侧tabs按钮边框色 @@ -184,15 +133,9 @@ // radio 按钮组激活背景色 --ti-lowcode-radio-button-active-bg: #9d9d9d; // grid 布局设置按钮字体颜色 - --ti-lowcode-grid-edit-color: #252b3a; + --ti-lowcode-grid-edit-color: var(--te-common-text-primary); // grid 布局设置按钮背景色 - --ti-lowcode-grid-edit-bg: #fff; - // tooltip字体颜色 - --ti-lowcode-tooltip-text-color: var(--ti-lowcode-base-text-color); - // tooltip背景颜色 - --ti-lowcode-tooltip-bg-color: var(--ti-lowcode-base-bg-5); - // tooltip错误提示背景颜色 - --ti-lowcode-tooltip-error-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-grid-edit-bg: var(--te-common-bg-default); // Fit 字体颜色 --ti-lowcode-fit-label-color: #252b3a; @@ -217,6 +160,8 @@ --ti-lowcode-spacing-lr-color: #e5e5e5; // spacing svg 图标左右hover颜色 --ti-lowcode-spacing-lr-hover-color: #dfdfdf; + --ti-lowcode-spacing-margin-color: var(--te-base-gray-10); + --ti-lowcode-spacing-padding-color: var(--te-base-gray-20); // spacing svg 图标边框颜色 --ti-lowcode-spacing-border-color: #999; // position direction 字体颜色 @@ -254,117 +199,38 @@ --ti-lowcode-breadcrumb-hover-bg: #fff; // 弹框中tip提示边框颜色 --ti-lowcode-dialog-tip-border-color: #575d6c; - // 弹框字体颜色 && 左侧面板 title 字体颜色 - --ti-lowcode-dialog-font-color: #333; // 输入框icon图标颜色 --ti-lowcode-input-icon-color: #737373; // 弹框字体颜色 && 图标颜色 && 输入框 suffix 字体颜色 - --ti-lowcode-text-color: #6a6a6a; + --ti-lowcode-text-color: var(--te-common-text-dark-inverse); // 右侧optionitem的边框色 - --ti-lowcode-optionitem-border-color: #9f9f9f; + --ti-lowcode-optionitem-border-color: var(--te-common-border-default); // 右侧optionitem的背景色 - --ti-lowcode-optionitem-background-color: #e5e5e5; - //tootip里的input框字体颜色 - --ti-lowcode-tootip-input-color: #fff; - //tootip里的input背景颜色 - --ti-lowcode-tootip-input-background-color: #363636; + --ti-lowcode-optionitem-background-color: var(--te-common-bg-default); //tootip里的input框边框颜色 - --ti-lowcode-tootip-input-border-color: #b9b9b9; - //tootip里的input框箭头颜色 - --ti-lowcode-tootip-arrow-border-color: #404040; - // dialogBox弹框示例框边框色 - --ti-lowcode-dialog-demo-border-color: #5e5e5e; + --ti-lowcode-tootip-input-border-color: var(--te-common-border-default); // 关闭 icon 图标hover背景色 && 输入框后置文本hover背景色 - --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1); - // 说明提示框警告颜色 - --ti-lowcode-description-warning-color: #facb4b; - // 说明提示框错误颜色 - --ti-lowcode-description-error-color: #ff0000; - // switch checked状态边框色 - --ti-lowcode-switch-checked-border-color: var(--te-common-border-checked); - // 文本链接颜色 - --ti-lowcode-text-link-color: #6bb0ff; + --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1); // 需要确认 // 大纲树node节点选中背景色 --ti-lowcode-node-current-bg: var(--te-common-bg-primary-checked); - // 大纲树node节点不可拖拽背景色 && 表单校验错误边框色 - --ti-lowcode-node-nodrag-bg: #ea384c; - // 成功状态按钮边框色 - --ti-lowcode-success-border-color: #2ad986; - // 错误提示颜色 - --ti-lowcode-error-tip-color: var(--ti-lowcode-base-error-color); - // 画布拖拽元素背景色 - --ti-lowcode-drag-ghost-bg: #888; - // 画布拖拽位置线背景色 - --ti-lowcode-ghost-line-bg: #ffb100; // 描述颜色 - --ti-lowcode-description-color: var(--ti-lowcode-common-text-color-4); - // 更多折叠面板头部hover背景色 - --ti-lowcode-more-collapse-header-hover-color: #afafaf; + --ti-lowcode-description-color: var(--te-base-green-40); // 绑定时icon图标颜色 - --ti-lowcode-icon-bind-color: #006cff; - // 创建字体颜色 - --ti-lowcode-create-color: #575d6c; - // 删除按钮hover背景色 && 表单校验错误背景色 - --ti-lowcode-delete-button-hover-bg: #c92c3f; - // input框focus 获焦时边框颜色 - --ti-lowcode-input-focus-border-color: var(--te-common-border-active); - // 次要描述字体颜色 && 面包屑label 字体颜色 - --ti-lowcode-description-minor-color: #ababab; + --ti-lowcode-icon-bind-color: var(--te-common-text-checked); // 样式设置 label 字体颜色 --ti-lowcode-style-setting-label-color: var(--te-common-bg-primary-checked); // 样式设置 label 背景颜色 --ti-lowcode-style-setting-label-bg: var(--te-base-blue-140); - // 多人协作item项hover背景色 - --ti-lowcode-user-item-hover-bg: #f3f3f5; - // 多人协作人员头像背景色 - --ti-lowcode-user-header-bg: #919191; - // 工具栏提示框字体颜色 - --ti-lowcode-toolbar-popover-color: #363636; - // 工具栏 media 提示框字体颜色 - --ti-lowcode-media-popover-color: var(--ti-lowcode-base-gray-60); // 工具栏 media 提示框标题字体颜色 - --ti-lowcode-media-popover-title-color: #191919; + --ti-lowcode-media-popover-title-color: var(--te-common-text-primary); // 工具栏icon禁用颜色 - --ti-lowcode-disabled-color: #c2c2c2; - // 状态管理详情收缩摩纳哥编辑器icon颜色 - --ti-lowcode-state-management-screen-icon-color: #404040; - // 状态管理搜索无结果显示颜色 - --ti-lowcode-state-management-query-color: #404040; + --ti-lowcode-disabled-color: var(--te-common-text-disabled); // 状态管理代码编辑器边框颜色 - --ti-lowcode-state-management-monaco-editor-border-color: var(--ti-lowcode-base-gray-40); - - // Popover提示框 - --ti-lowcode-popover-color: var(--ti-lowcode-base-text-color); - // popover 弹框背景色 - --ti-lowcode-popover-bg-color: #fff; - // 自定义类名lowcode弹框背景色 - --ti-lowcode-custom-popover-bg-color: #fff; - // 自定义类名lowcode弹框字体颜色 - --ti-lowcode-custom-popover-text-color: #191919; - // 自定义类名lowcode弹框边框颜色 - --ti-lowcode-custom-popover-border-color: #fff; + --ti-lowcode-state-management-monaco-editor-border-color: var(--te-common-border-hover); - // 滚动条thumb颜色 - --ti-lowcode-scrollbar-thumb-background-color: #e7e8e9; - // 可点击交互的文字颜色 - --ti-lowcode-common-interaction-text-color: #5e7ce0; // 数字输入框组件下拉列表文字颜色 - --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-text-color); - - //左侧插件栏hover背景色 - --ti-plugins-hover-bg-color: #fff; - //左侧插件栏hover边框色 - --ti-plugins-hover-border-color: #9e9e9e; - //左侧插件栏hover文字色 - --ti-plugins-hover-text-color: #4d4d4d; - // 表格行间背景色 - --ti-lowcode-new-table-row-sepline-background: #f0f0f0; + --ti-lowcode-numeric-unit-text-color: var(--te-common-text-primary); // 查看指引视频 --ti-lowcode-block-video-tip-color: var(--te-common-text-link); - - // 右侧optionitem的边框色 - --ti-lowcode-optionitem-border-color: rgba(0, 0, 0, 0.08); - // 右侧optionitem的背景色 - --ti-lowcode-optionitem-background-color: #fff; } diff --git a/packages/toolbars/collaboration/src/Main.vue b/packages/toolbars/collaboration/src/Main.vue index 9ffcbdf9e5..ef3aba6df5 100644 --- a/packages/toolbars/collaboration/src/Main.vue +++ b/packages/toolbars/collaboration/src/Main.vue @@ -142,7 +142,7 @@ export default { .user-item-name { font-size: 14px; - color: var(--ti-lowcode-dialog-font-color); + color: var(--te-common-text-primary); line-height: 16px; font-weight: 400; margin: 0 4px 0 8px; @@ -168,16 +168,5 @@ export default { z-index: 9; border: 1px solid var(--ti-lowcode-toolbar-user-img-border-color); } - - .user-count { - height: 20px; - width: 20px; - color: var(--ti-lowcode-toolbar-icon-color); - background-color: var(--ti-lowcode-user-header-bg); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - } } diff --git a/packages/toolbars/logo/src/Main.vue b/packages/toolbars/logo/src/Main.vue index c286ab35c9..5d5a451a1c 100644 --- a/packages/toolbars/logo/src/Main.vue +++ b/packages/toolbars/logo/src/Main.vue @@ -428,7 +428,7 @@ onUnmounted(() => { } &:hover { - background: var(--ti-lowcode-toolbar-view-hover-bg); + background: var(--te-common-bg-container); } } }