From 371c89cafb04830732c922909f4107426fc46810 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Wed, 17 Jul 2024 20:32:39 -0700 Subject: [PATCH] fix: engine component light color theme variable replacement --- packages/theme/base/src/base.less | 61 +++- packages/theme/base/src/common.less | 179 ++++++++++ packages/theme/base/src/component-common.less | 1 + packages/theme/base/src/dark/dark-common.less | 72 +--- .../theme/base/src/dark/dark-component.js | 3 - packages/theme/base/src/index.js | 19 +- .../theme/base/src/light/light-common.less | 61 +--- .../theme/base/src/light/light-component.js | 3 - packages/theme/base/src/var-component.less | 0 packages/theme/light/base.less | 273 --------------- packages/theme/light/block.less | 44 +-- packages/theme/light/bridge.less | 12 +- packages/theme/light/canvas.less | 39 +-- packages/theme/light/datasource.less | 66 ++-- packages/theme/light/events.less | 48 +-- packages/theme/light/gpt-dialog.less | 48 +-- packages/theme/light/help.less | 20 +- packages/theme/light/i18n.less | 6 +- packages/theme/light/index.less | 1 - packages/theme/light/life-cycles.less | 8 +- packages/theme/light/materials.less | 10 +- packages/theme/light/metaComponent.less | 80 +++-- packages/theme/light/pageManage.less | 24 +- packages/theme/light/plugin-js.less | 8 +- packages/theme/light/setting-style.less | 12 +- packages/theme/light/settings.less | 56 ++-- packages/theme/light/toolbar.less | 2 +- packages/theme/light/tutorial.less | 6 +- packages/theme/light/variable.less | 315 +++++++++--------- 29 files changed, 642 insertions(+), 835 deletions(-) create mode 100644 packages/theme/base/src/common.less delete mode 100644 packages/theme/base/src/dark/dark-component.js delete mode 100644 packages/theme/base/src/light/light-component.js delete mode 100644 packages/theme/base/src/var-component.less delete mode 100644 packages/theme/light/base.less diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less index b6b881924..c710b53e6 100644 --- a/packages/theme/base/src/base.less +++ b/packages/theme/base/src/base.less @@ -1,6 +1,8 @@ :root { // 透明色 --ti-base-color-transparent: transparent; + --ti-base-color-inherit: inherit; + --ti-base-color-unset: unset; // 灰阶 --ti-lowcode-base-gray-1: #fff; @@ -24,7 +26,7 @@ --ti-lowcode-base-gray-19: #afafaf; --ti-lowcode-base-gray-20: #ababab; --ti-lowcode-base-gray-21: #adb0b8; - + --ti-lowcode-base-gray-22: #1476ff1a; --ti-lowcode-base-gray-23: #a6a6a6; --ti-lowcode-base-gray-24: #a7aab2; --ti-lowcode-base-gray-25: #4d4d4d; @@ -38,7 +40,8 @@ --ti-lowcode-base-gray-33: #6a6a6a; --ti-lowcode-base-gray-34: #6b6b6b; --ti-lowcode-base-gray-35: #606165; - + --ti-lowcode-base-gray-36: #dddddd; + --ti-lowcode-base-gray-37: #cbcbcb; --ti-lowcode-base-gray-38: #626262; --ti-lowcode-base-gray-39: #737373; --ti-lowcode-base-gray-40: #757575; @@ -50,6 +53,18 @@ --ti-lowcode-base-gray-46: #999; --ti-lowcode-base-gray-47: #9d9d9d; --ti-lowcode-base-gray-48: #9f9f9f; + --ti-lowcode-base-gray-49: #999999; + --ti-lowcode-base-gray-50: #8a887b; + --ti-lowcode-base-gray-51: #f3f3f3; + --ti-lowcode-base-gray-52: #d1d1d1; + --ti-lowcode-base-gray-53: #bdbdbd; + --ti-lowcode-base-gray-54: #dfdfdf; + --ti-lowcode-base-gray-55: #bfbfbf; + --ti-lowcode-base-gray-56: #b5b5b5; + --ti-lowcode-base-gray-57: #f3f3f5; + --ti-lowcode-base-gray-58: #919191; + --ti-lowcode-base-gray-59: #e7e8e9; + --ti-lowcode-base-gray-60: #9e9e9e; // black --ti-lowcode-base-dark-1: #1f1f1f; @@ -66,7 +81,7 @@ --ti-lowcode-base-dark-12: #2b2b2b; --ti-lowcode-base-dark-13: #262626; --ti-lowcode-base-dark-14: #222; - --ti-lowcode-base-dark-15: #202020; + --ti-lowcode-base-dark-16: #292929; --ti-lowcode-base-dark-17: #292929; --ti-lowcode-base-dark-18: #3c3c3c; @@ -95,6 +110,11 @@ --ti-lowcode-base-red-13: #f2c5c2; --ti-lowcode-base-red-14: #c7000b; --ti-lowcode-base-red-15: #fce3e1; + --ti-lowcode-base-red-16: #feeaeb; + --ti-lowcode-base-red-17: #dc544f; + --ti-lowcode-base-red-18: #ff0000; + --ti-lowcode-base-red-19: #ea384c; + --ti-lowcode-base-red-20: #c92c3f; // expand-orange --ti-lowcode-base-orange-1: #fff5e8; @@ -111,6 +131,8 @@ --ti-lowcode-base-orange-12: #d6a981; --ti-lowcode-base-orange-13: #f2d8c2; --ti-lowcode-base-orange-14: #fa9841; + --ti-lowcode-base-orange-15: #facb4b; + --ti-lowcode-base-orange-16: #ffb100; // expand-yellow --ti-lowcode-base-yellow-1: #fcf9eb; @@ -126,6 +148,7 @@ --ti-lowcode-base-yellow-11: #9e7e3f; --ti-lowcode-base-yellow-12: #d4b57f; --ti-lowcode-base-yellow-13: #e6d3b8; + --ti-lowcode-base-yellow-14: #501c1c; // expand-lemon --ti-lowcode-base-lemon-1: #fcfae8; @@ -187,6 +210,7 @@ --ti-lowcode-base-green-12: #77c78f; --ti-lowcode-base-green-13: #b8e6c7; --ti-lowcode-base-green-14: #e6f2d5; + --ti-lowcode-base-green-15: #2ad986; // expand-mint --ti-lowcode-base-mint-1: #e8fcfa; @@ -238,6 +262,11 @@ --ti-lowcode-base-blue-16: #7693f5; --ti-lowcode-base-blue-17: #526ecc; --ti-lowcode-base-blue-18: #deecff; + --ti-lowcode-base-blue-19: #5073e5; + --ti-lowcode-base-blue-20: #5e7ce0; + --ti-lowcode-base-blue-21: #6bb0ff; + --ti-lowcode-base-blue-22: #006cff; + --ti-lowcode-base-blue-23: #8bbefa; // expand-indigo --ti-lowcode-base-indigo-1: #eee8ff; @@ -315,6 +344,8 @@ --ti-lowcode-base-bg-4: #595959; --ti-lowcode-base-bg-5: #fff; --ti-lowcode-base-bg-6: #5959591a; + --ti-lowcode-base-bg-7: rgba(0, 255, 0, 0.1); + --ti-lowcode-base-bg-8: rgba(242, 48, 48, 0.3); --ti-lowcode-base-dark-bg: #141414; --ti-lowcode-base-dark-bg-2: #333; --ti-lowcode-base-dark-bg-3: #e6e6e6; @@ -331,7 +362,6 @@ --ti-lowcode-base-text-color-4: #c2c2c2; --ti-lowcode-base-dark-text-color: #e6e6e6; --ti-lowcode-base-dark-text-color-1: #a6a6a6; - --ti-lowcode-base-text-dark-color-2: #595959; // 文本链接色 --ti-lowcode-base-text-link-color: #191919; @@ -345,11 +375,9 @@ --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-default-button-border-hover-color: #191919; --ti-lowcode-base-default-button-border-disable-color: #dbdbdb; --ti-lowcode-base-dark-secondary-button-border-color: #a6a6a6; --ti-lowcode-base-dark-secondary-button-border-hover-color: #3d3d3d; - --ti-lowcode-base-dark-default-button-border-color: #595959; --ti-lowcode-base-dark-default-button-border-hover-color: #e6e6e6; // 分割线 @@ -358,6 +386,17 @@ --ti-lowcode-base-dark-split-color-1: rgba(255, 255, 255, 0.08); // 白色背景分割线 --ti-lowcode-base-dark-split-color-2: rgba(255, 255, 255, 0.15); + // rgba + --ti-lowcode-base-rgba-1: rgba(0, 0, 0, 0.2); + --ti-lowcode-base-rgba-2: rgba(0, 0, 0, 0.08); + --ti-lowcode-base-rgba-3: rgba(242, 48, 48, 0.1); + --ti-lowcode-base-rgba-4: rgba(20, 118, 255, 0.1); + --ti-lowcode-base-rgba-5: rgba(255, 0, 0); + --ti-lowcode-base-rgba-6: rgba(0, 0, 0, 0.5); + --ti-lowcode-base-rgba-7: rgba(200, 200, 200, 0.2); + --ti-lowcode-base-rgba-8: rgba(255, 255, 255, 0.1); + --ti-lowcode-base-rgba-9: rgba(76, 152, 241, 0.15); + // 状态色 --ti-lowcode-base-error-color: #f23030; --ti-lowcode-base-warn-color: #ff8800; @@ -425,4 +464,14 @@ --ti-lowcode-base-font-weight-8: 800; // 中黑 --ti-lowcode-base-font-weight-9: 900; // 黑体 --ti-lowcode-base-font-weight-bold: 700; + + /** + * 1.5 圆角 + **/ + --ti-common-border-radius-normal: 2px; // 常规 + --ti-common-border-radius-0: 0px; // 直角 + --ti-common-border-radius-1: 4px; // 圆角-1 + --ti-common-border-radius-2: 6px; // 圆角-1 + --ti-common-border-radius-3: 8px; // 圆角-2 + --ti-common-border-radius-4: 50%; // 圆形 } diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less new file mode 100644 index 000000000..4921c4046 --- /dev/null +++ b/packages/theme/base/src/common.less @@ -0,0 +1,179 @@ +// common变量定义 +:root { + // 背景色 + --ti-lowcode-common-component-bg: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-component-bg-1: var(--ti-lowcode-base-bg); + --ti-lowcode-common-component-bg-2: var(--ti-lowcode-base-bg-5); + --ti-lowcode-common-component-bg-3: var(--ti-lowcode-base-gray-22); + --ti-lowcode-common-component-bg-4: var(--ti-lowcode-base-bg-2); + --ti-lowcode-common-component-bg-5: var(--ti-lowcode-base-gray-6); + --ti-lowcode-common-component-bg-6: var(--ti-lowcode-base-bg-7); + --ti-lowcode-common-component-bg-7: var(--ti-lowcode-base-red-6); + --ti-lowcode-common-component-bg-8: var(--ti-lowcode-base-bg-8); + --ti-lowcode-common-component-bg-9: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-component-bg-10: var(--ti-lowcode-base-bg-3); + --ti-lowcode-common-component-bg-11: var(--ti-lowcode-base-gray-13); + --ti-lowcode-common-component-bg-12: var(--ti-lowcode-base-orange-6); + --ti-lowcode-common-component-bg-13: var(--ti-lowcode-base-bg-1); + --ti-lowcode-common-component-bg-14: var(--ti-lowcode-base-red-16); + --ti-lowcode-common-component-bg-15: var(--ti-lowcode-base-gray-8); + --ti-lowcode-common-component-bg-16: var(--ti-base-color-inherit); + --ti-lowcode-common-component-bg-17: var(--ti-lowcode-base-rgba-3); + --ti-lowcode-common-component-bg-18: var(--ti-lowcode-base-rgba-4); + --ti-lowcode-common-component-bg-19: var(--ti-lowcode-base-gray-11); + --ti-lowcode-common-component-bg-20: var(--ti-lowcode-base-gray-15); + --ti-lowcode-common-component-bg-21: var(--ti-lowcode-base-rgba-6); + --ti-lowcode-common-component-bg-22: var(--ti-lowcode-base-gray-51); + --ti-lowcode-common-component-bg-23: var(--ti-lowcode-base-rgba-5); + --ti-lowcode-common-component-bg-24: var(--ti-lowcode-base-gray-14); + --ti-lowcode-common-component-bg-25: var(--ti-lowcode-base-gray-5); + --ti-lowcode-common-component-bg-26: var(--ti-lowcode-base-gray-3); + --ti-lowcode-common-component-bg-27: var(--ti-lowcode-base-invalidate-color); + --ti-lowcode-common-component-bg-28: var(--ti-lowcode-base-bg-6); + --ti-lowcode-common-component-bg-29: var(--ti-lowcode-base-dark-6); + --ti-lowcode-common-component-bg-30: var(--ti-lowcode-base-gray-10); + --ti-lowcode-common-component-bg-31: var(--ti-lowcode-base-gray-47); + --ti-lowcode-common-component-bg-32: var(--ti-lowcode-base-gray-55); + --ti-lowcode-common-component-bg-33: var(--ti-lowcode-base-gray-56); + --ti-lowcode-common-component-bg-34: var(--ti-lowcode-base-dark-21); + --ti-lowcode-common-component-bg-35: var(--ti-lowcode-base-dark-bg-7); + --ti-lowcode-common-component-bg-36: var(--ti-lowcode-base-gray-41); + --ti-lowcode-common-component-bg-37: var(--ti-lowcode-base-orange-16); + --ti-lowcode-common-component-bg-38: var(--ti-lowcode-base-red-20); + --ti-lowcode-common-component-bg-39: var(--ti-lowcode-base-rgba-9); + --ti-lowcode-common-component-bg-40: var(--ti-lowcode-base-gray-57); + --ti-lowcode-common-component-bg-41: var(--ti-lowcode-base-gray-58); + --ti-lowcode-common-component-bg-42: var(--ti-lowcode-base-gray-59); + --ti-lowcode-common-component-bg-43: var(--ti-lowcode-base-blue-20); + --ti-lowcode-common-component-bg-44: var(--ti-lowcode-base-rgba-7); + --ti-lowcode-common-component-bg-45: var(--ti-lowcode-base-red-19); + + // 文本 + --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-secondary-text-color: var(--ti-lowcode-base-gray-18); + --ti-lowcode-common-third-text-color: var(--ti-lowcode-base-gray-20); + --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-gray-31); + --ti-lowcode-common-text-desc-color: var(--ti-lowcode-base-gray-43); + --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-gray-31); + --ti-lowcode-common-text-color-1: var(--ti-lowcode-base-gray-33); + --ti-lowcode-common-text-color-2: var(--ti-lowcode-base-gray-12); + --ti-lowcode-common-text-color-3: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-text-color-4: var(--ti-lowcode-base-mint-14); + --ti-lowcode-common-text-color-5: var(--ti-lowcode-base-gray-43); + --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-gray-31); + --ti-lowcode-common-text-color-7: var(--ti-lowcode-base-text-color-2); + --ti-lowcode-common-text-color-8: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-common-text-color-9: var(--ti-lowcode-base-dark-20); + --ti-lowcode-common-text-color-10: var(--ti-lowcode-base-text-link-color-3); + --ti-lowcode-common-text-color-11: var(--ti-lowcode-base-gray-37); + --ti-lowcode-common-text-color-12: var(--ti-lowcode-base-yellow-14); + --ti-lowcode-common-text-color-13: var(--ti-base-color-inherit); + --ti-lowcode-common-text-color-14: var(--ti-lowcode-base-gray-44); + --ti-lowcode-common-text-color-15: var(--ti-lowcode-base-dark-11); + --ti-lowcode-common-text-color-16: var(--ti-lowcode-base-blue-19); + --ti-lowcode-common-text-color-17: var(--ti-lowcode-base-blue-14); + --ti-lowcode-common-text-color-18: var(--ti-lowcode-base-dark-26); + --ti-lowcode-common-text-color-19: var(--ti-lowcode-base-gray-32); + --ti-lowcode-common-text-color-20: var(--ti-lowcode-base-rgba-5); + --ti-lowcode-common-text-color-21: var(--ti-lowcode-base-rgba-6); + --ti-lowcode-common-text-color-22: var(--ti-lowcode-base-gray-46); + --ti-lowcode-common-text-color-23: var(--ti-lowcode-base-gray-14); + --ti-lowcode-common-text-color-24: var(--ti-lowcode-base-gray-17); + --ti-lowcode-common-text-color-25: var(--ti-lowcode-base-gray-30); + --ti-lowcode-common-text-color-26: var(--ti-lowcode-base-gray-42); + --ti-lowcode-common-text-color-27: var(--ti-lowcode-base-gray-40); + --ti-lowcode-common-text-color-28: var(--ti-lowcode-base-gray-52); + --ti-lowcode-common-text-color-29: var(--ti-lowcode-base-gray-39); + --ti-lowcode-common-text-color-30: var(--ti-lowcode-base-dark-21); + --ti-lowcode-common-text-color-31: var(--ti-lowcode-base-blue-21); + --ti-lowcode-common-text-color-32: var(--ti-lowcode-base-blue-23); + --ti-lowcode-common-text-color-33: var(--ti-lowcode-base-blue-20); + --ti-lowcode-common-text-color-34: var(--ti-lowcode-base-gray-25); + + // 边框 + --ti-lowcode-common-border-color-1: var(--ti-lowcode-base-gray-9); + --ti-lowcode-common-border-color-2: var(--ti-lowcode-base-gray-6); + --ti-lowcode-common-border-color-3: var(--ti-lowcode-base-gray-35); + --ti-lowcode-common-border-color-4: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-common-border-color-5: var(--ti-lowcode-base-gray-20); + --ti-lowcode-common-border-color-6: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-border-color-7: var(--ti-lowcode-base-gray-36); + --ti-lowcode-common-border-color-8: var(--ti-lowcode-base-gray-13); + --ti-lowcode-common-border-color-9: var(--ti-lowcode-base-kelly-6); + --ti-lowcode-common-border-color-10: var(--ti-lowcode-base-rgba-2); + --ti-lowcode-common-border-color-11: var(--ti-lowcode-base-red-17); + --ti-lowcode-common-border-color-12: var(--ti-lowcode-base-gray-11); + --ti-lowcode-common-border-color-13: var(--ti-lowcode-base-gray-18); + --ti-lowcode-common-border-color-14: var(--ti-lowcode-base-gray-43); + --ti-lowcode-common-border-color-15: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-border-color-16: var(--ti-lowcode-base-gray-46); + --ti-lowcode-common-border-color-17: var(--ti-lowcode-base-dark-20); + --ti-lowcode-common-border-color-18: var(--ti-base-color-transparent); + --ti-lowcode-common-border-color-19: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-border-color-20: var(--ti-lowcode-base-gray-30); + --ti-lowcode-common-border-color-21: var(--ti-lowcode-base-gray-48); + --ti-lowcode-common-border-color-22: var(--ti-lowcode-base-gray-16); + --ti-lowcode-common-border-color-23: var(--ti-lowcode-base-gray-29); + --ti-lowcode-common-border-color-24: var(--ti-lowcode-base-green-15); + --ti-lowcode-common-border-color-25: var(--ti-lowcode-base-gray-60); + + // 提示 + --ti-lowcode-common-primary-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-info-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-warning-color: var(--ti-lowcode-base-orange-6); + --ti-lowcode-common-warning-color-1: var(--ti-lowcode-base-lemon-6); + --ti-lowcode-common-warning-color-2: var(--ti-lowcode-base-orange-15); + --ti-lowcode-common-error-color: var(--ti-lowcode-base-red-6); + --ti-lowcode-common-error-color-1: var(--ti-lowcode-base-red-18); + + // 按钮 + --ti-lowcode-common-btn-default-color: var(--ti-lowcode-base-dark-5); // 默认按钮颜色 + --ti-lowcode-common-btn-default-disabled-color: var(--ti-lowcode-base-gray-18); // 默认禁用颜色 + --ti-lowcode-common-btn-default-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 颜色 + --ti-lowcode-common-btn-default-border-color: var(--ti-lowcode-base-dark-5); // 默认按钮边框色 + --ti-lowcode-common-btn-default-border-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 边框色 + --ti-lowcode-common-search-bg: var(--ti-lowcode-base-gray-1); // tinysearch 背景色 + + // 关闭按钮 + --ti-lowcode-common-close-icon-text-color: var(--ti-lowcode-base-dark-5); // 关闭按钮默认颜色 + --ti-lowcode-common-close-icon-text-color-1: var(--ti-lowcode-base-dark-22); + --ti-lowcode-common-close-icon-text-hover-color: var(--ti-lowcode-base-dark-5); + + // svg按钮 + --ti-lowcode-common-svg-button-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-svg-button-hover-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-svg-button-hover-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-common-svg-button-active-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-svg-button-active-bg-color: var(--ti-lowcode-base-bg-1); + + // 圆角 + --ti-lowcode-common-radius-6: var(--ti-common-border-radius-2); + + //状态 + --ti-lowcode-common-status-error: var(--ti-lowcode-base-error-color); + --ti-lowcode-common-status-success: var(--ti-lowcode-base-success-color); + + // 权重值 + --ti-lowcode-common-font-weight-normal: var(--ti-lowcode-base-font-weight-bold); + + // 其他 + --ti-lowcode-common-dark-1: var(--ti-lowcode-base-dark-1); + --ti-lowcode-common-dark-2: var(--ti-lowcode-base-dark-13); + --ti-lowcode-common-gray-18: var(--ti-lowcode-base-gray-18); + --ti-lowcode-common-gray-19: var(--ti-lowcode-base-gray-19); + --ti-lowcode-common-gray-26: var(--ti-lowcode-base-gray-26); + --ti-lowcode-common-gray-49: var(--ti-lowcode-base-gray-49); + --ti-lowcode-common-gray-50: var(--ti-lowcode-base-gray-50); + --ti-lowcode-common-gray-53: var(--ti-lowcode-base-gray-53); + --ti-lowcode-common-gray-54: var(--ti-lowcode-base-gray-54); + --ti-lowcode-common-blue-22: var(--ti-lowcode-base-blue-22); + --ti-lowcode-common-bg-0: var(--ti-base-color-transparent); + --ti-lowcode-common-layout-bg: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-header-bg: var(--ti-lowcode-base-gray-8); + --ti-lowcode-common-text-hover: var(--ti-lowcode-base-blue-17); + --ti-lowcode-common-component-hover-bg: var(--ti-lowcode-base-gray-5); + --ti-lowcode-common-rgba-1: var(--ti-lowcode-base-rgba-1); + --ti-lowcode-common-color-unset: var(--ti-base-color-unset); +} diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less index e69de29bb..2c8dfc8ee 100644 --- a/packages/theme/base/src/component-common.less +++ b/packages/theme/base/src/component-common.less @@ -0,0 +1 @@ +// 用于写tinyvue组件的样式 diff --git a/packages/theme/base/src/dark/dark-common.less b/packages/theme/base/src/dark/dark-common.less index 0305e60ad..d388ffd02 100644 --- a/packages/theme/base/src/dark/dark-common.less +++ b/packages/theme/base/src/dark/dark-common.less @@ -1,73 +1,3 @@ -// 暗色主题 +// tinyvue组件的暗色主题 :root { - --ti-lowcode-common-gray-26: var(--ti-lowcode-base-gray-26); - --ti-lowcode-common-transparent-color: var(--ti-base-color-transparent); - --ti-lowcode-common-search-bg: var(--ti-lowcode-base-dark-13); - - // 背景 - --ti-lowcode-common-component-bg: var(--ti-lowcode-base-dark-8); - --ti-lowcode-common-component-hover-bg: var(--ti-lowcode-base-dark-18); - --ti-lowcode-common-layout-bg: var(--ti-lowcode-base-dark-4); - --ti-lowcode-common-header-bg: var(--ti-lowcode-base-dark-6); - --ti-lowcode-common-bg-1: var(--ti-lowcode-base-dark-22); - --ti-lowcode-common-bg-2: var(--ti-lowcode-base-gray-25); - --ti-lowcode-common-bg-3: var(--ti-lowcode-base-dark-12); - --ti-lowcode-common-bg-4: var(--ti-lowcode-base-dark-13); - --ti-lowcode-common-bg-5: var(--ti-lowcode-base-gray-8); - --ti-lowcode-common-bg-6: var(--ti-lowcode-base-dark-24); - --ti-lowcode-common-bg-7: var(--ti-lowcode-base-gray-44); - --ti-lowcode-common-bg-8: var(--ti-lowcode-base-dark-14); - --ti-lowcode-common-bg-9: var(--ti-lowcode-base-dark-16); - --ti-lowcode-common-hover-bg-1: var(--ti-lowcode-base-dark-bg-7); - --ti-lowcode-common-icon-hover-1: var(--ti-lowcode-base-gray-21); - - // 文本 - --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-gray-1); - --ti-lowcode-common-secondary-text-color: var(--ti-lowcode-base-gray-21); - --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-dark-11); - --ti-lowcode-common-text-color-1: var(--ti-lowcode-base-gray-33); - --ti-lowcode-common-text-color-2: var(--ti-lowcode-base-gray-12); - --ti-lowcode-common-text-color-3: var(--ti-lowcode-base-gray-1); - --ti-lowcode-common-text-color-4: var(--ti-lowcode-base-mint-14); - --ti-lowcode-common-text-color-5: var(--ti-lowcode-base-gray-44); - --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-gray-30); - --ti-lowcode-common-text-color-7: var(--ti-lowcode-base-gray-7); - --ti-lowcode-common-text-color-8: var(--ti-lowcode-base-text-color); - --ti-lowcode-common-third-text-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-gray-31); - --ti-lowcode-common-text-desc-color: var(--ti-lowcode-base-gray-43); - --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-gray-31); - - // 边框 - --ti-lowcode-common-border-color-1: var(--ti-lowcode-base-dark-9); - --ti-lowcode-common-border-color-2: var(--ti-lowcode-base-dark-19); - --ti-lowcode-common-border-color-3: var(--ti-lowcode-base-gray-35); - --ti-lowcode-common-border-color-4: var(--ti-lowcode-base-dark-10); - - // 信息 - --ti-lowcode-common-primary-color: var(--ti-lowcode-base-blue-14); - --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-blue-15); - --ti-lowcode-common-error-color: var(--ti-lowcode-base-red-6); - --ti-lowcode-common-info-color: var(--ti-lowcode-base-blue-16); - --ti-lowcode-common-warning-color: var(--ti-lowcode-base-orange-14); - --ti-lowcode-common-empty-color: var(--ti-lowcode-base-gray-45); - --ti-lowcode-common-danger-color: var(--ti-lowcode-base-red-14); - - // 按钮 - --ti-lowcode-common-btn-default-color: var(--ti-lowcode-base-dark-5); // 默认按钮颜色 - --ti-lowcode-common-btn-default-disabled-color: var(--ti-lowcode-base-gray-18); // 默认禁用颜色 - --ti-lowcode-common-btn-default-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 颜色 - --ti-lowcode-common-btn-default-border-color: var(--ti-lowcode-base-dark-5); // 默认按钮边框色 - --ti-lowcode-common-btn-default-border-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 边框色 - - // svg按钮 - --ti-lowcode-common-svg-button-color: var(--ti-lowcode-base-gray-12); - --ti-lowcode-common-svg-button-hover-color: var(--ti-lowcode-base-blue-14); - --ti-lowcode-common-svg-button-hover-bg-color: var(--ti-base-color-transparent); - --ti-lowcode-common-svg-button-active-color: var(--ti-lowcode-base-blue-14); - --ti-lowcode-common-svg-button-active-bg-color: var(--ti-base-color-transparent); - - // 关闭按钮 - --ti-lowcode-common-close-icon-text-color: var(--ti-lowcode-base-gray-20); // 关闭按钮默认颜色 - --ti-lowcode-common-close-icon-text-hover-color: var(--ti-lowcode-base-gray-1); } diff --git a/packages/theme/base/src/dark/dark-component.js b/packages/theme/base/src/dark/dark-component.js deleted file mode 100644 index 6473b5c44..000000000 --- a/packages/theme/base/src/dark/dark-component.js +++ /dev/null @@ -1,3 +0,0 @@ -// 用于定义TinyVue组件的dark样式 -// export const concatThemeDark = { -// } diff --git a/packages/theme/base/src/index.js b/packages/theme/base/src/index.js index 2e64a38b6..bdbe45b70 100644 --- a/packages/theme/base/src/index.js +++ b/packages/theme/base/src/index.js @@ -1,18 +1,7 @@ +// 提供engine主题包的样式定义引入 import './base.less' -import './dark' +import './common.less' +// 须提供变量区分亮暗两套主题，再引入引入dark和light，达到提供tinyvue组件亮暗色两套样式定义引入 +// import './dark' import './light' import './component-common.less' - -// export const tinyEngineThemeLight = { -// id: 'tiny-engine-light-theme', -// name: 'EngineLightTheme', -// cnName: 'EngineLightTheme', -// data: { ...concatThemeLight } -// } - -// export const tinyEngineThemeDark = { -// id: 'tiny-engine-dark-theme', -// name: 'EngineDarkTheme', -// cnName: 'EngineDarkTheme', -// data: { ...concatThemeDark } -// } diff --git a/packages/theme/base/src/light/light-common.less b/packages/theme/base/src/light/light-common.less index 40f7ab599..6dcce4df4 100644 --- a/packages/theme/base/src/light/light-common.less +++ b/packages/theme/base/src/light/light-common.less @@ -1,62 +1,3 @@ -// 亮色主题 +// tinyvue组件的亮色主题 :root { - // - --ti-lowcode-common-dark-1: var(--ti-lowcode-base-dark-1); - --ti-lowcode-common-gray-18: var(--ti-lowcode-base-gray-18); - --ti-lowcode-common-gray-26: var(--ti-lowcode-base-gray-26); - - // 背景色 - --ti-lowcode-common-component-bg: var(--ti-lowcode-base-gray-1); - --ti-lowcode-common-component-hover-bg: var(--ti-lowcode-base-gray-5); - --ti-lowcode-common-layout-bg: var(--ti-lowcode-base-gray-1); - --ti-lowcode-common-header-bg: var(--ti-lowcode-base-gray-8); - --ti-lowcode-common-bg-0: var(--ti-base-color-transparent); - --ti-lowcode-common-text-hover: var(--ti-lowcode-base-blue-17); - - // 文本 - --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-dark-5); - --ti-lowcode-common-secondary-text-color: var(--ti-lowcode-base-gray-18); - --ti-lowcode-common-third-text-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-dark-5); - --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-gray-31); - --ti-lowcode-common-text-desc-color: var(--ti-lowcode-base-gray-43); - --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-gray-31); - --ti-lowcode-common-text-color-1: var(--ti-lowcode-base-gray-33); - --ti-lowcode-common-text-color-2: var(--ti-lowcode-base-gray-12); - --ti-lowcode-common-text-color-3: var(--ti-lowcode-base-gray-1); - --ti-lowcode-common-text-color-4: var(--ti-lowcode-base-mint-14); - --ti-lowcode-common-text-color-5: var(--ti-lowcode-base-gray-43); - --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-gray-31); - // 边框 - --ti-lowcode-common-border-color-1: var(--ti-lowcode-base-gray-9); - --ti-lowcode-common-border-color-3: var(--ti-lowcode-base-gray-35); - --ti-lowcode-common-border-color-4: var(--ti-lowcode-base-gray-9); - - --ti-lowcode-common-hover-bg-1: var(--ti-lowcode-base-gray-5); - // 提示 - --ti-lowcode-common-primary-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-common-info-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-common-warning-color: var(--ti-lowcode-base-orange-6); - --ti-lowcode-common-warning-color-1: var(--ti-lowcode-base-lemon-6); - --ti-lowcode-common-error-color: var(ti-lowcode-base-red-6); - - // 按钮 - --ti-lowcode-common-btn-default-color: var(--ti-lowcode-base-dark-5); // 默认按钮颜色 - --ti-lowcode-common-btn-default-disabled-color: var(--ti-lowcode-base-gray-18); // 默认禁用颜色 - --ti-lowcode-common-btn-default-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 颜色 - --ti-lowcode-common-btn-default-border-color: var(--ti-lowcode-base-dark-5); // 默认按钮边框色 - --ti-lowcode-common-btn-default-border-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 边框色 - --ti-lowcode-common-search-bg: var(--ti-lowcode-base-gray-1); // tinysearch 背景色 - - // 关闭按钮 - --ti-lowcode-common-close-icon-text-color: var(--ti-lowcode-base-dark-5); // 关闭按钮默认颜色 - --ti-lowcode-common-close-icon-text-hover-color: var(--ti-lowcode-base-dark-5); - - // svg按钮 - --ti-lowcode-common-svg-button-color: var(--ti-lowcode-base-dark-5); - --ti-lowcode-common-svg-button-hover-color: var(--ti-lowcode-base-dark-5); - --ti-lowcode-common-svg-button-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-common-svg-button-active-color: var(--ti-lowcode-base-dark-5); - --ti-lowcode-common-svg-button-active-bg-color: var(--ti-lowcode-base-bg-1); } diff --git a/packages/theme/base/src/light/light-component.js b/packages/theme/base/src/light/light-component.js deleted file mode 100644 index 7f6f8da11..000000000 --- a/packages/theme/base/src/light/light-component.js +++ /dev/null @@ -1,3 +0,0 @@ -// 用于定义TinyVue组件的light样式 -// export const concatThemeLight = { -// } diff --git a/packages/theme/base/src/var-component.less b/packages/theme/base/src/var-component.less deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme/light/base.less b/packages/theme/light/base.less deleted file mode 100644 index db2e35310..000000000 --- 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; - - // 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-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-default-button-border-hover-color: #191919; - --ti-lowcode-base-default-button-border-disable-color: #dbdbdb; - - // 分割线 - --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 9b3afa156..2892e98cb 100644 --- a/packages/theme/light/block.less +++ b/packages/theme/light/block.less @@ -10,7 +10,9 @@ --ti-lowcode-component-block-history-list-item-btn-hover-color: var( --ti-lowcode-common-text-main-color ); // 预览还原 hover 颜色 - --ti-lowcode-component-block-history-list-item-btn-hover-bg: var(--ti-lowcode-common-hover-bg-1); // 预览还原背景色 + --ti-lowcode-component-block-history-list-item-btn-hover-bg: var( + --ti-lowcode-common-component-bg-25 + ); // 预览还原背景色 --ti-lowcode-component-block-history-list-item-btn-border-color: var( --ti-lowcode-common-secondary-text-color ); // 预览还原边框色 @@ -19,36 +21,36 @@ --ti-lowcode-component-block-list-item-color: var(--ti-lowcode-common-text-main-color); // 区块列表颜色 --ti-lowcode-component-block-list-shortcut-title-color: var(--ti-lowcode-common-primary-text-color); // 快照标题颜色 --ti-lowcode-component-block-list-shortcut-bg: var(--ti-lowcode-common-component-bg); // 快照标题颜色 - --ti-lowcode-component-block-list-border-color: var(--ti-lowcode-common-border-color-4); // 快照标题颜色 - --ti-lowcode-component-block-list-item-active-bg: #f5f5f5; // 区块 active 背景色 - --ti-lowcode-component-block-version-list-item-border-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-component-block-version-list-item-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-component-block-version-list-version-bg: #1476ff1a; + --ti-lowcode-component-block-list-border-color: var(--ti-lowcode-common-border-color-1); // 快照标题颜色 + --ti-lowcode-component-block-list-item-active-bg: var(----ti-lowcode-common-component-bg-1); // 区块 active 背景色 + --ti-lowcode-component-block-version-list-item-border-color: var(--ti-lowcode-common-border-color-2); + --ti-lowcode-component-block-version-list-item-bg: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-component-block-version-list-version-bg: var(--ti-lowcode-common-component-bg-3); --ti-lowcode-component-block-version-list-version-color: var(--ti-lowcode-common-primary-color); --ti-lowcode-component-block-version-list-panel-title-color: var(--ti-lowcode-common-text-title-color); --ti-lowcode-component-block-version-list-time-color: var(--ti-lowcode-common-text-title-color); --ti-lowcode-component-block-version-list-desc-color: var(--ti-lowcode-common-text-desc-color); - --ti-lowcode-component-block-version-list-current-version-color: var(--ti-lowcode-base-text-color-2); - --ti-lowcode-component-block-setting-popover-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-component-block-setting-item-hover-bg: var(--ti-lowcode-base-bg-2); - --ti-lowcode-component-block-setting-item-text-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-component-block-version-list-current-version-color: var(--ti-lowcode-common-text-color-7); + --ti-lowcode-component-block-setting-popover-bg: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-component-block-setting-item-hover-bg: var(--ti-lowcode-common-component-bg-4); + --ti-lowcode-component-block-setting-item-text-color: var(--ti-lowcode-common-text-color-7); // 区块管理 - 添加分类 - --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-setting-btn-color: var(--ti-lowcode-base-default-button-border-hover-color); - --ti-lowcode-component-block-list-setting-btn-hover-color: var(--ti-lowcode-base-default-button-border-hover-color); - --ti-lowcode-component-block-list-add-group-btn-border-radius: 6px; + --ti-lowcode-component-block-list-add-group-btn-bg: var(--ti-lowcode-common-bg-0); + --ti-lowcode-component-block-list-add-group-btn-border: 1px solid var(--ti-lowcode-common-border-color-4); + --ti-lowcode-component-block-list-setting-btn-color: var(--ti-lowcode-common-component-bg-10); + --ti-lowcode-component-block-list-setting-btn-hover-color: var(--ti-lowcode-common-component-bg-10); + --ti-lowcode-component-block-list-add-group-btn-border-radius: var(ti-lowcode-common-radius-6); } .block-setting-content { - --ti-lowcode-block-config-form-item-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-block-config-form-item-color: var(--ti-lowcode-common-text-color-7); } // 区块设置 - 标签 .block-tag-create { - --ti-lowcode-block-config-tag-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-block-config-tag-bg: var(--ti-lowcode-input-bg); - --ti-lowcode-block-config-tag-hover-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-block-config-tag-hover-bg: #f2f2f2; - --ti-lowcode-block-config-tag-close-color: var(--ti-lowcode-toolbar-icon-color); + --ti-lowcode-block-config-tag-color: var(--ti-lowcode-common-text-color-7); + --ti-lowcode-block-config-tag-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-block-config-tag-hover-color: var(--ti-lowcode-common-text-color-7); + --ti-lowcode-block-config-tag-hover-bg: var(--ti-lowcode-common-component-bg-26); + --ti-lowcode-block-config-tag-close-color: var(--ti-lowcode-common-close-icon-text-color-1); } diff --git a/packages/theme/light/bridge.less b/packages/theme/light/bridge.less index 2b23ddc8b..2a093bd73 100644 --- a/packages/theme/light/bridge.less +++ b/packages/theme/light/bridge.less @@ -1,11 +1,11 @@ .plugin-panel { // 资源管理 - --ti-lowcode-bridge-list-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-bridge-list-bg: var(--ti-lowcode-base-gray-10); - --ti-lowcode-birdge-editor-border-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-birdge-input-label-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-bridge-list-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-bridge-list-bg: var(--ti-lowcode-common-component-bg-1); + --ti-lowcode-birdge-editor-border-color: var(--ti-lowcode-common-border-color-5); + --ti-lowcode-birdge-input-label-color: var(--ti-lowcode-common-text-color-8); // npm工具类中代码预览的主题 - --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-birdge-code-preview-bg-color: #f0f0f0; + --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-birdge-code-preview-bg-color: var(--ti-lowcode-common-component-bg-5); } diff --git a/packages/theme/light/canvas.less b/packages/theme/light/canvas.less index 1342c9457..b0547e165 100644 --- a/packages/theme/light/canvas.less +++ b/packages/theme/light/canvas.less @@ -1,26 +1,27 @@ #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-corner-mark-left-color: var(--ti-lowcode-base-text-color-2); - --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--ti-lowcode-base-text-color-3); - --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-rect-border-color: var(--ti-lowcode-common-border-color-6); + --ti-lowcode-canvas-hover-line-in-bg-color: var(--ti-lowcode-common-component-bg-6); + --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-common-component-bg-7); + --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--ti-lowcode-common-component-bg-8); - --ti-lowcode-canvas-footer-border-top-color: var(--ti-lowcode-common-border-color-4); // canvas 底部面包屑 边框色 + --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-common-border-color-6); + --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-common-text-color-7); + --ti-lowcode-canvas-corner-mark-left-color: var(--ti-lowcode-common-text-color-7); + --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-canvas-corner-mark-bottom-right-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: var(--ti-lowcode-common-component-bg-1); + --ti-lowcode-canvas-corner-mark-right-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-canvas-corner-mark-right-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-canvas-select-corner-mark-left-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--ti-lowcode-common-component-bg-9); + + --ti-lowcode-canvas-footer-border-top-color: var(--ti-lowcode-common-border-color-1); // 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-menu-item-color: var(--ti-lowcode-base-gray-90); // 右键菜单文字颜色 - --ti-lowcode-canvas-menu-item-hover-bg-color: #f5f5f5; - --ti-lowcode-canvas-menu-border-color: #ddd; - --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-4); + --ti-lowcode-canvas-menu-item-color: var(--ti-lowcode-common-component-bg-10); // 右键菜单文字颜色 + --ti-lowcode-canvas-menu-item-hover-bg-color: var(--ti-lowcode-common-component-bg-1); + --ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-7); + --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-common-secondary-text-color); } diff --git a/packages/theme/light/datasource.less b/packages/theme/light/datasource.less index a8d717859..6767b3276 100644 --- a/packages/theme/light/datasource.less +++ b/packages/theme/light/datasource.less @@ -1,44 +1,44 @@ :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(--ti-lowcode-common-text-color-8); + --ti-lowcode-datasource-tabs-border-color: var(--ti-lowcode-common-border-color-8); + --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-common-dark-2); --ti-lowcode-datasource-json-border-colorr: var(--ti-lowcode-common-primary-color); - --ti-lowcode-datasource-tree-border-color: var(--ti-lowcode-base-success-color); + --ti-lowcode-datasource-tree-border-color: var(--ti-lowcode-common-border-color-9); --ti-lowcode-datasource-common-primary-color: var(--ti-lowcode-common-primary-color); - --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-canvas-wrap-bg: var(--ti-lowcode-base-default-button-border-disable-color); - --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-success-border-color: var(--ti-lowcode-common-border-color-9); + --ti-lowcode-datasource-input-icon-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-datasource-dialog-demo-border-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-datasource-canvas-wrap-bg: var(--ti-lowcode-common-component-bg-11); + --ti-lowcode-datasource-dialog-font-color: var(--ti-lowcode-common-text-color-9); + --ti-lowcode-datasource-toolbar-bg: var(--ti-lowcode-common-component-bg-4); + --ti-lowcode-datasource-description-error-color: var(--ti-lowcode-common-status-error); --ti-lowcode-datasource-common-text-main-color: var(--ti-lowcode-common-text-main-color); - --ti-lowcode-datasource-toolbar-more-hover-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-datasource-delete-button-hover-bg: var(--ti-lowcode-base-red-6); + --ti-lowcode-datasource-toolbar-more-hover-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-datasource-delete-button-hover-bg: var(--ti-lowcode-common-component-bg-7); --ti-lowcode-datasource-common-text-color-5: var(--ti-lowcode-common-text-color-5); --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-toolbar-view-hover-bg: var(--ti-lowcode-common-component-bg-27); + --ti-lowcode-datasource-common-hover-bg-1: var(--ti-lowcode-common-component-bg-25); --ti-lowcode-datasource-common-primary-text-color: var(--ti-lowcode-common-primary-text-color); - --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-canvas-handle-hover-bg: var(--ti-lowcode-base-blue-6); - --ti-lowcode-datasource-tabs-active-bg: var(--ti-lowcode-base-gray-20); + --ti-lowcode-datasource-icon-hover-bg: var(--ti-lowcode-common-component-bg-27); + --ti-lowcode-datasource-tabs-bg: var(--ti-lowcode-common-component-bg-5); + --ti-lowcode-datasource-canvas-handle-hover-bg: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-datasource-tabs-active-bg: var(--ti-lowcode-common-component-bg-5); --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-description-minor-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-datasource-description-warning-color: var(--ti-lowcode-common-component-bg-12); + --ti-lowcode-datasource-error-tip-color: var(--ti-lowcode-common-error-color); + --ti-lowcode-datasource-label-color: var(--ti-lowcode-common-text-color-8); // light --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-base-default-button-border-hover-color); - --ti-lowcode-datasource-tabs-bottom-border-color: var(--ti-lowcode-base-default-button-border-hover-color); - --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(--ti-lowcode-base-default-button-border-disable-color); + --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-common-btn-default-color); + --ti-lowcode-datasource-tabs-bottom-border-color: var(--ti-lowcode-common-btn-default-border-color); + --ti-lowcode-datasource-list-bottom-border-color: var(--ti-lowcode-common-component-bg-27); + --ti-lowcode-datasource-switch-off-bg-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-datasource-switch-on-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-datasource-modal-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-datasource-respones-select-color-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-datasource-respones-color-bg: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-datasource-respones-border-color-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-datasource-select-border-right-color-bg: var(--ti-lowcode-common-component-bg-11); --ti-lowcode-datasource-select-border-color: var(--ti-lowcode-common-secondary-text-color); } diff --git a/packages/theme/light/events.less b/packages/theme/light/events.less index 9191a7543..38b33abf4 100644 --- a/packages/theme/light/events.less +++ b/packages/theme/light/events.less @@ -1,38 +1,38 @@ .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(--ti-lowcode-common-primary-text-color); + --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-common-warning-color); } .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(--ti-lowcode-common-primary-text-color); + --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-common-gray-18); + --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); } .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-empty-action-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color); + --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-common-border-color-10); + --ti-lowcode-events-event-bind-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-common-status-success); + --ti-lowcode-events-bind-action-item-linked-color: var(----ti-lowcode-common-text-color-10); + --ti-lowcode-events-empty-action-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-common-warning-color); } .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(--ti-lowcode-common-primary-text-color); + --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-events-advanced-binding-state-color: var(----ti-lowcode-common-text-color-10); } .bind-event-dialog-content { - --ti-lowcode-bind-event-dialog-color: var(--ti-lowcode-base-text-color); - --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-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-common-border-color-10); + --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-common-border-color-10); + --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-common-component-bg-13); } diff --git a/packages/theme/light/gpt-dialog.less b/packages/theme/light/gpt-dialog.less index 5a45c34df..620876651 100644 --- a/packages/theme/light/gpt-dialog.less +++ b/packages/theme/light/gpt-dialog.less @@ -1,51 +1,51 @@ .bind-chatgpt { // chatGPT聊天窗问题模板文字颜色 - --ti-lowcode-chat-model-text: #191919; + --ti-lowcode-chat-model-text: var(--ti-lowcode-common-primary-text-color); // chatGPT聊天窗问题模板文字边框颜色 - --ti-lowcode-chat-model-text-border: #cbcbcb; + --ti-lowcode-chat-model-text-border: var(--ti-lowcode-common-text-color-11); // chatGPT聊天窗提问框图标 - --ti-lowcode-chat-model-input-icon: #999999; + --ti-lowcode-chat-model-input-icon: var(--ti-lowcode-common-gray-49); // chatGPT聊天窗用户头像边框色 - --ti-lowcode-chat-model-avatar-border: #dfe1e6; + --ti-lowcode-chat-model-avatar-border: var(--ti-lowcode-common-border-color-1); // chatGPT聊天窗AI聊天文字背景 - --ti-lowcode-chat-model-ai-text-bg: #1476ff; + --ti-lowcode-chat-model-ai-text-bg: var(--ti-lowcode-common-component-bg-9); // chatGPT聊天窗AI聊天文字背景边框 - --ti-lowcode-chat-model-ai-text-border: #1476ff; + --ti-lowcode-chat-model-ai-text-border: var(--ti-lowcode-common-border-color-6); // chatGPT聊天窗AI聊天文字 - --ti-lowcode-chat-model-ai-text: #ffffff; + --ti-lowcode-chat-model-ai-text: var(--ti-lowcode-common-text-color-12); // chatGPT聊天窗AI连接失败文字背景 - --ti-lowcode-chat-model-ai-fail-text-bg: #feeaeb; + --ti-lowcode-chat-model-ai-fail-text-bg: var(--ti-lowcode-common-component-bg-14); // chatGPT聊天窗AI连接失败文字背景边框 - --ti-lowcode-chat-model-ai-fail-text-border: #dc544f; + --ti-lowcode-chat-model-ai-fail-text-border: var(--ti-lowcode-common-border-color-11); // chatGPT聊天窗AI连接失败文字 - --ti-lowcode-chat-model-ai-fail-text: #191919; + --ti-lowcode-chat-model-ai-fail-text: var(--ti-lowcode-common-primary-text-color); // chatGPT聊天窗用户聊天文字背景 - --ti-lowcode-chat-model-user-text-bg: #fafafa; + --ti-lowcode-chat-model-user-text-bg: var(--ti-lowcode-common-component-bg-4); // chatGPT聊天窗用户聊天文字边框 - --ti-lowcode-chat-model-user-text-border: #dbdbdb; + --ti-lowcode-chat-model-user-text-border: var(--ti-lowcode-common-border-color-8); // chatGPT聊天窗用户聊天文字 - --ti-lowcode-chat-model-user-text: #191919; + --ti-lowcode-chat-model-user-text: var(--ti-lowcode-common-primary-text-color); // chatGPT聊天窗标题文字 - --ti-lowcode-chat-model-title: #333333; + --ti-lowcode-chat-model-title: var(--ti-lowcode-common-text-color-9); // chatGPT聊天窗基础图标 - --ti-lowcode-chat-model-common-icon: #8a887b; + --ti-lowcode-chat-model-common-icon: var(--ti-lowcode-common-gray-50); // chatGPT聊天窗输入框背景 - --ti-lowcode-chat-model-input-bg: #eeeeee; + --ti-lowcode-chat-model-input-bg: var(--ti-lowcode-common-component-bg-15); // chatGPT聊天窗发送按钮背景 - --ti-lowcode-chat-model-button-bg: #1476ff; + --ti-lowcode-chat-model-button-bg: var(--ti-lowcode-common-component-bg-9); // chatGPT聊天窗发送按钮边框 - --ti-lowcode-chat-model-button-border: #1476ff; + --ti-lowcode-chat-model-button-border: var(--ti-lowcode-common-border-color-6); // chatGPT聊天窗发送按钮文字 - --ti-lowcode-chat-model-button-text: #ffffff; + --ti-lowcode-chat-model-button-text: var(--ti-lowcode-common-text-color-3); // chatGPT加载 --ti-lowcode-chat-loading-svg-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-chat-loading-text-color: #595959; + --ti-lowcode-chat-loading-text-color: var(--ti-lowcode-common-text-color-6); } .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-active-bg: #fff; - --ti-lowcode-chat-model-popover-active-color: var(--ti-lowcode-base-text-color-2); + --ti-lowcode-chat-model-popover-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-chat-model-popover-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-chat-model-popover-active-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-chat-model-popover-active-color: var(--ti-lowcode-common-primary-color); } diff --git a/packages/theme/light/help.less b/packages/theme/light/help.less index e53a7e3e8..126522387 100644 --- a/packages/theme/light/help.less +++ b/packages/theme/light/help.less @@ -1,15 +1,15 @@ .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-mask-bg-color: inherit; + --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-help-guide-title-text-color: var(----ti-lowcode-common-primary-text-color); + --ti-lowcode-help-guide-progress-style-text-color: var(----ti-lowcode-common-primary-text-color); + --ti-lowcode-help-guide-mask-bg-color: var(--ti-lowcode-common-component-bg-16); } .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: #191919; - --ti-lowcode-help-box-question-border-top: #ebebeb; - --ti-lowcode-help-box-question-item-text-color: #1476ff; + --ti-lowcode-help-box-bg-color: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-help-box-shadow: 0px 2px 6px 0px var(--ti-lowcode-common-rgba-1); + --ti-lowcode-help-box-title-text-color: var(----ti-lowcode-common-primary-text-color); + --ti-lowcode-help-box-item-text-color: var(----ti-lowcode-common-primary-text-color); + --ti-lowcode-help-box-question-border-top: var(--ti-lowcode-common-border-color-12); + --ti-lowcode-help-box-question-item-text-color: var(--ti-lowcode-common-primary-color); } diff --git a/packages/theme/light/i18n.less b/packages/theme/light/i18n.less index 6b8db462c..52f419087 100644 --- a/packages/theme/light/i18n.less +++ b/packages/theme/light/i18n.less @@ -1,8 +1,8 @@ :root { // 国际化表格操作图标颜色 - --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-common-primary-text-color); // 国际化表格加载中字体颜色 - --ti-lowcode-i18n-loading-text-color: #999999; + --ti-lowcode-i18n-loading-text-color: var(--ti-lowcode-common-gray-49); // 国际化表格加载中图标颜色 - --ti-lowcode-i18n-loading-svg-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-i18n-loading-svg-color: var(--ti-lowcode-common-primary-text-color); } diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less index eef6cef06..54cb05456 100644 --- a/packages/theme/light/index.less +++ b/packages/theme/light/index.less @@ -1,6 +1,5 @@ @import '../common/base.less'; @import '../common/global.less'; -@import './base.less'; // 主题配置优先于公共配置 @import './variable.less'; @import './tutorial.less'; diff --git a/packages/theme/light/life-cycles.less b/packages/theme/light/life-cycles.less index ff5e86f54..2c3370017 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: inherit; - --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(--ti-lowcode-common-text-color-13); + --ti-lowcode-life-cycle-item-hover-bg: var(--ti-lowcode-common-component-bg-25); + --ti-lowcode-life-cycle-item-disable-color: var(--ti-lowcode-common-gray-18); + --ti-lowcode-life-cycle-editor-border: var(--ti-lowcode-common-border-color-4); } diff --git a/packages/theme/light/materials.less b/packages/theme/light/materials.less index eb46f29a3..9fd19be4e 100644 --- a/packages/theme/light/materials.less +++ b/packages/theme/light/materials.less @@ -1,12 +1,12 @@ :root { // 带边框的图标按钮边框颜色 - --ti-lowcode-materials-border-icon-border-color: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-materials-border-icon-border-color: var(--ti-lowcode-common-gray-18); // 带边框的图标按钮图标颜色 - --ti-lowcode-materials-border-icon-svg-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-materials-border-icon-svg-color: var(--ti-lowcode-common-svg-button-color); // 带边框的图标按钮悬浮边框颜色 - --ti-lowcode-materials-border-icon-border-color-hover: var(--ti-lowcode-base-default-button-border-hover-color); + --ti-lowcode-materials-border-icon-border-color-hover: var(--ti-lowcode-common-btn-default-border-color); // 带边框的图标按钮背景颜色 - --ti-lowcode-materials-border-icon-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-materials-border-icon-bg-color: var(--ti-lowcode-common-component-bg-2); // 区块分组下拉选项下边框颜色 --ti-lowcode-materials-block-group-item-border-color: var(--ti-lowcode-common-primary-text-color); // 添加区块筛选模块字体颜色 @@ -18,7 +18,7 @@ // 添加区块筛选模块选中字体颜色 --ti-lowcode-materials-block-filter-selected-text-color: var(--ti-lowcode-common-primary-text-color); // 添加区块穿梭框面板头部背景颜色 - --ti-lowcode-materials-block-transfer-header-bg-color: var(--ti-lowcode-base-bg); + --ti-lowcode-materials-block-transfer-header-bg-color: var(--ti-lowcode-common-component-bg-1); // 区块分组添加区块筛选项 hover 颜色 --ti-lowcode-materials-block-filter-hover-color: var(--ti-lowcode-common-primary-text-color); // 组件列表 组件名称颜色 diff --git a/packages/theme/light/metaComponent.less b/packages/theme/light/metaComponent.less index 58e4b9bc9..8b87a10a6 100644 --- a/packages/theme/light/metaComponent.less +++ b/packages/theme/light/metaComponent.less @@ -1,65 +1,63 @@ :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(--ti-lowcode-common-component-bg-2); + --ti-lowcode-meta-list-item-border-color: var(--ti-lowcode-common-border-color-10); // - --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-meta-list-top-color: var(--ti-lowcode-common-text-color-8); // MetaJsSlot - --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1); + --lowcode-meta-js-slot-color: var(--ti-lowcode-common-text-color-8); // 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-border-hover-color: var(--ti-lowcode-base-default-button-border-hover-color); + --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-common-btn-default-border-color); } // 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(--ti-lowcode-common-text-color-8); + --ti-lowcode-meta-config-item-label-tips-title-color: var(--ti-lowcode-common-primary-text-color); } // configItem .properties-item { - --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-common-status-error); + --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-component-bg-9); - --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(--ti-lowcode-common-component-bg-25); + --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-common-primary-color); } // 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(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-common-primary-text-color); } // 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(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-common-component-bg-10); + --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-common-component-bg-4); + --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-code-editor-source-code-content-border-color: var(--ti-lowcode-common-border-color-13); + --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-common-status-error); } diff --git a/packages/theme/light/pageManage.less b/packages/theme/light/pageManage.less index e9caec3ac..cacebda54 100644 --- a/packages/theme/light/pageManage.less +++ b/packages/theme/light/pageManage.less @@ -1,26 +1,26 @@ :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-title-background-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-common-border-color-14); --ti-lowcode-page-manage-tree-text-background-color: var(--ti-lowcode-common-bg-8); --ti-lowcode-page-manage-tree-node-background-color: var(--ti-lowcode-common-component-bg); - --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-base-gray-90); + --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-common-primary-text-color); --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(--ti-lowcode-common-primary-color); --ti-lowcode-page-manage-content-tips-color: var(--ti-lowcode-common-text-color-5); - --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-base-gray-30); + --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-common-border-color-8); --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-svg-hover-color: var(--ti-lowcode-common-component-bg-10); + --ti-lowcode-page-manage-text-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-page-manage-btn-text-color: var(--ti-lowcode-common-border-color-14); --ti-lowcode-page-manage-btn-text-color-2: var(--ti-lowcode-common-text-color-5); --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-color: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-common-border-color-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-base-gray-60); - --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-page-manage-input-output-text-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-common-component-bg-9); } diff --git a/packages/theme/light/plugin-js.less b/packages/theme/light/plugin-js.less index ad512cd92..8d1f6626e 100644 --- a/packages/theme/light/plugin-js.less +++ b/packages/theme/light/plugin-js.less @@ -1,7 +1,7 @@ // 页面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(--ti-lowcode-common-component-bg-2); + --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-common-border-color-10); + --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-common-primary-color); } diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less index 4afe8bfe8..ff832f87e 100644 --- a/packages/theme/light/setting-style.less +++ b/packages/theme/light/setting-style.less @@ -1,8 +1,8 @@ :root { - --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6); - --ti-lowcode-setting-style-font-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-setting-style-title-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-setting-style-font-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-common-border-color-15); + --ti-lowcode-setting-style-title-color: var(--ti-lowcode-common-primary-text-color); } diff --git a/packages/theme/light/settings.less b/packages/theme/light/settings.less index 6bd21cb73..730c007cf 100644 --- a/packages/theme/light/settings.less +++ b/packages/theme/light/settings.less @@ -1,46 +1,46 @@ // 右侧属性面板 css 变量 #tiny-right-panel { - --ti-lowcode-setting-panel-bg-color: var(--ti-lowcode-base-bg-5); - --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-bg-color: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--ti-lowcode-common-primary-text-color); // 插件设置面板左侧边框 - --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-border-color-1); } // 属性面板-属性-区块关联属性-新建区块属性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); + --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-common-primary-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-block-link-field-link-icon-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-common-status-success); } .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-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3); + --ti-lowcode-className-selector-container-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-common-status-error); + --ti-lowcode-className-selector-container-error-bg-color: var(--ti-lowcode-common-component-bg-17); + --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-common-status-error); + --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-common-border-color-13); + --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-common-border-color-15); + --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-className-selector-container-label-bg-color: var(--ti-lowcode-common-component-bg-18); + --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-common-component-bg); + --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-common-component-bg-5); + --ti-lowcode-className-selector-title-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-common-text-color-5); } :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(--ti-lowcode-common-component-bg-2); + --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-common-primary-text-color); } diff --git a/packages/theme/light/toolbar.less b/packages/theme/light/toolbar.less index 5e60484bd..d9b07056d 100644 --- a/packages/theme/light/toolbar.less +++ b/packages/theme/light/toolbar.less @@ -1,6 +1,6 @@ .tiny-engine-toolbar { // 头部工具栏 - --ti-lowcode-toolbar-border-bottom-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-toolbar-border-bottom-color: var(--ti-lowcode-common-border-color-1); --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-component-bg); --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); diff --git a/packages/theme/light/tutorial.less b/packages/theme/light/tutorial.less index 45404b2f6..6c909e441 100644 --- a/packages/theme/light/tutorial.less +++ b/packages/theme/light/tutorial.less @@ -1,5 +1,5 @@ #tiny-engine-left-panel { - --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-base-bg); + --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-common-component-bg-1); } diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less index d505f8855..e5cc438c7 100644 --- a/packages/theme/light/variable.less +++ b/packages/theme/light/variable.less @@ -5,10 +5,12 @@ // 插件面板 --ti-lowcode-plugin-panel-title-color: var(--ti-lowcode-common-text-title-color); // 插件面板标题色 - --ti-lowcode-plugin-panel-title-font-weight: 700; // 插件面板标题加粗效果 + --ti-lowcode-plugin-panel-title-font-weight: var(--ti-lowcode-common-font-weight-normal); // 插件面板标题加粗效果 --ti-lowcode-plugin-panel-bg: var(--ti-lowcode-common-component-bg); // 插件面板背景色 - --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-common-border-color-4); // 插件面板右侧边框色 - --ti-lowcode-plugin-panel-header-border-bottom-color: #ebebeb; // 插件面板头部区域底部边框线颜色 + --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-common-border-color-1); // 插件面板右侧边框色 + --ti-lowcode-plugin-panel-header-border-bottom-color: var( + --ti-lowcode-common-border-color-12 + ); // 插件面板头部区域底部边框线颜色 // 插件设置面板 --ti-lowcode-plugin-setting-panel-bg: var(--ti-lowcode-common-component-bg); // 插件设置面板背景色 @@ -19,11 +21,11 @@ // ------ 各个模块的主题色，前缀为 --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(--ti-lowcode-common-primary-text-color); + --ti-lowcode-design-toolbar-icon-color: var(--ti-lowcode-common-text-color-14); // 物料-组件列表 - --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-1); --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-hover-bg); // 页面管理 @@ -36,337 +38,332 @@ // 状态管理 --ti-lowcode-data-list-color: var(--ti-lowcode-common-text-main-color); // 状态管理面板头部的底部边框色 - --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-border-color-1); // 状态管理示例背景色 --ti-lowcode-data-example-bg-color: var(--ti-lowcode-common-gray-26); // 状态管理示例文字色 --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-color-2); // 添加高级属性文字颜色 - --ti-lowcode-data-advanced-text-color: #252b3a; + --ti-lowcode-data-advanced-text-color: var(--ti-lowcode-common-text-color-15); // 添加高级属性 hover 文字颜色 - --ti-lowcode-data-advanced-text-hover-color: #5073e5; + --ti-lowcode-data-advanced-text-hover-color: var(--ti-lowcode-common-text-color-16); // 状态管理按激活背景色 - --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-base-gray-0); + --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-common-component-bg-2); // 状态管理按背景色 - --ti-lowcode-data-radio-group-bg: transparent; + --ti-lowcode-data-radio-group-bg: var(--ti-lowcode-common-bg-0); // 教程 --ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-common-text-main-color); // 头部工具栏背景色 - --ti-lowcode-toolbar-bg: #fafafa; + --ti-lowcode-toolbar-bg: var(--ti-lowcode-common-component-bg-4); // 头部工具栏选中背景色 - --ti-lowcode-toolbar-active-bg: transparent; + --ti-lowcode-toolbar-active-bg: var(--ti-lowcode-common-bg-0); // 头部工具栏边框色 - --ti-lowcode-toolbar-border-color: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-toolbar-border-color: var(--ti-lowcode-common-border-color-4); // 头部工具栏icon颜色 - --ti-lowcode-toolbar-icon-color: #404040; + --ti-lowcode-toolbar-icon-color: var(--ti-lowcode-common-close-icon-text-color-1); // 头部工具栏icon颜色 - --ti-lowcode-toolbar-icon-active-color: #4f77ff; + --ti-lowcode-toolbar-icon-active-color: var(--ti-lowcode-common-text-color-17); // 头部工具栏更多more图标颜色 - --ti-lowcode-toolbar-more-color: #000; + --ti-lowcode-toolbar-more-color: var(--ti-lowcode-common-text-color-18); // 头部工具栏更多more图标hover颜色 - --ti-lowcode-toolbar-more-hover-color: #666; + --ti-lowcode-toolbar-more-hover-color: var(--ti-lowcode-common-text-color-19); // 头部工具栏面包屑字体颜色 - --ti-lowcode-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-60); + --ti-lowcode-toolbar-breadcrumb-color: var(--ti-lowcode-common-text-color-8); // 头部工具栏画布大小文本hover背景色 && 头部弹框背景色 && context-menu 背景色 && 大纲树节点hover背景色 && 日期组件背景色 - --ti-lowcode-toolbar-view-hover-bg: #e9e9e9; + --ti-lowcode-toolbar-view-hover-bg: var(--ti-lowcode-common-component-bg-20); // 头部工具栏i18n国际化字体颜色 - --ti-lowcode-toolbar-i18n-color: red; + --ti-lowcode-toolbar-i18n-color: var(--ti-lowcode-common-text-color-20); // 应用发布弹窗图标颜色 --ti-lowcode-toolbar-publish-icon-color: var(--ti-lowcode-common-primary-text-color); // 头部左侧logo颜色 - --ti-lowcode-logo-color: #8a8e99; + --ti-lowcode-logo-color: var(--ti-lowcode-common-text-color-14); // 头部左侧logo颜色 - --ti-lowcode-logo-active-color: rgba(0, 0, 0, 0.5); + --ti-lowcode-logo-active-color: var(--ti-lowcode-common-text-color-21); // 中间画布边框色 - --ti-lowcode-canvas-border-color: #999; + --ti-lowcode-canvas-border-color: var(--ti-lowcode-common-border-color-16); // 右侧属性面板tab页签背景色 - --ti-lowcode-tabs-bg: #ebebeb; + --ti-lowcode-tabs-bg: var(--ti-lowcode-common-component-bg-19); // 右侧属性面板tab页签边框色 - --ti-lowcode-tabs-border-color: #ddd; + --ti-lowcode-tabs-border-color: var(--ti-lowcode-common-border-color-7); // 右侧属性面板tab页签激活状态背景色 - --ti-lowcode-tabs-active-bg: #f3f3f3; + --ti-lowcode-tabs-active-bg: var(--ti-lowcode-common-component-bg-22); // 右侧属性面板折叠面板展开内容边框色 - --ti-lowcode-collapse-active-border-color: #333; + --ti-lowcode-collapse-active-border-color: var(--ti-lowcode-common-border-color-17); // 中间画布外框容器背景色 - --ti-lowcode-canvas-wrap-bg: #e5e5e5; + --ti-lowcode-canvas-wrap-bg: var(--ti-lowcode-common-component-bg-24); // 中间画布拖拽宽度按钮背景色 - --ti-lowcode-canvas-handle-bg: red; + --ti-lowcode-canvas-handle-bg: var(--ti-lowcode-common-component-bg-23); // 中间画布拖拽宽度按钮背景色 - --ti-lowcode-canvas-handle-hover-bg: #5e7ce0; + --ti-lowcode-canvas-handle-hover-bg: var(--ti-lowcode-common-component-bg-43); // 中间画布底部面包屑背景色 - --ti-lowcode-breadcrumb-bg: #fff; + --ti-lowcode-breadcrumb-bg: var(--ti-lowcode-common-component-bg-2); // 中间画布底部面包屑字体颜色 - --ti-lowcode-breadcrumb-color: #999; + --ti-lowcode-breadcrumb-color: var(--ti-lowcode-common-text-color-22); // 中间画布底部面包屑三角箭头颜色 - --ti-lowcode-breadcrumb-icon-color: #ccc; + --ti-lowcode-breadcrumb-icon-color: var(--ti-lowcode-common-text-color-24); // 弹框遮罩层背景色 - --ti-lowcode-mask-modal-bg: rgba(0, 0, 0, 0.5); + --ti-lowcode-mask-modal-bg: var(--ti-lowcode-common-component-bg-21); // 引导提示框遮罩层背景色 - --ti-lowcode-guide-mask-bg: rgba(0, 0, 0, 0.5); + --ti-lowcode-guide-mask-bg: var(--ti-lowcode-common-component-bg-21); // 引导高亮遮罩层背景色 - --ti-lowcode-guide-highlight-mask-bg: rgba(200, 200, 200, 0.2); + --ti-lowcode-guide-highlight-mask-bg: var(--ti-lowcode-common-component-bg-44); // 引导弹框背景色 - --ti-lowcode-guide-dialog-bg: #fff; + --ti-lowcode-guide-dialog-bg: var(--ti-lowcode-common-component-bg-2); // 引导弹框标题，按钮文本字体色 - --ti-lowcode-guide-title-color: #252b3a; + --ti-lowcode-guide-title-color: var(--ti-lowcode-common-text-color-15); // 引导弹框描述文本字体色 - --ti-lowcode-guide-message-color: #575d6c; + --ti-lowcode-guide-message-color: var(--ti-lowcode-common-text-color-25); // collapse 折叠面板激活后字体颜色 - --ti-lowcode-collapse-active-color: #252b3a; + --ti-lowcode-collapse-active-color: var(--ti-lowcode-common-text-color-15); // input 框背景色 - --ti-lowcode-input-bg: #fff; + --ti-lowcode-input-bg: var(--ti-lowcode-common-component-bg-2); // switch 圆点背景色 - --ti-lowcode-switch-after-bg: #fff; + --ti-lowcode-switch-after-bg: var(--ti-lowcode-common-component-bg-2); // switch 圆点 hover 背景色 - --ti-lowcode-switch-after-hover-bg: #f5f5f5; + --ti-lowcode-switch-after-hover-bg: var(--ti-lowcode-common-component-bg-1); // switch 圆点 checked 背景色 - --ti-lowcode-switch-after-checked-bg: #fff; + --ti-lowcode-switch-after-checked-bg: var(--ti-lowcode-common-component-bg-2); // -----下拉框相关主题配置----- // 下拉框聚焦时边框颜色 - --ti-lowcode-select-focus-border-color: var(--ti-lowcode-base-default-button-border-hover-color); + --ti-lowcode-select-focus-border-color: var(--ti-lowcode-common-btn-default-border-color); // 下拉框选中标签字体颜色 - --ti-lowcode-select-tags-text-color: var(--ti-lowcode-base-text-color-3); + --ti-lowcode-select-tags-text-color: var(--ti-lowcode-common-text-color-5); // 下拉框选中标签背景颜色 - --ti-lowcode-select-tags-bg-color: #5959591a; + --ti-lowcode-select-tags-bg-color: var(--ti-lowcode-common-component-bg-28); // 下拉框suffix图标悬浮颜色 - --ti-lowcode-select-suffix-icon-color-hover: var(--ti-lowcode-base-text-color); + --ti-lowcode-select-suffix-icon-color-hover: var(--ti-lowcode-common-primary-text-color); // select 下拉框背景色 - --ti-lowcode-dropdown-bg-color: #202020; + --ti-lowcode-dropdown-bg-color: var(--ti-lowcode-common-component-bg-29); // select 下拉面板边框颜色 - --ti-lowcode-dropdown-border-color: transparent; + --ti-lowcode-dropdown-border-color: var(--ti-lowcode-common-border-color-18); // select 下拉面板选型字体颜色 - --ti-lowcode-dropdown-item-text-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-dropdown-item-text-color: var(--ti-lowcode-common-primary-text-color); // select 下拉框背景色 - --ti-lowcode-dropdown-bg-color: #fff; + --ti-lowcode-dropdown-bg-color: var(--ti-lowcode-common-component-bg-2); // select 下拉框选项hover背景色 - --ti-lowcode-dropdown-item-hover-bg-color: #f2f2f2; + --ti-lowcode-dropdown-item-hover-bg-color: var(--ti-lowcode-common-component-bg-26); // select 下拉框选项选中背景色 - --ti-lowcode-dropdown-item-selected-bg: #fff; + --ti-lowcode-dropdown-item-selected-bg: var(--ti-lowcode-common-component-bg-2); // select 下拉框选项选中字体颜色 - --ti-lowcode-dropdown-item-selected-color: var(--ti-lowcode-base-text-color-2); + --ti-lowcode-dropdown-item-selected-color: var(--ti-lowcode-common-text-color-7); // select 下拉框选项hover字体颜色 - --ti-lowcode-dropdown-item-hover-text-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-dropdown-item-hover-text-color: var(--ti-lowcode-common-primary-text-color); // button info 字体颜色 - --ti-lowcode-button-info-color: #fff; + --ti-lowcode-button-info-color: var(--ti-lowcode-common-text-color-3); // button default 背景颜色 - --ti-lowcode-button-default-bg: #fff; + --ti-lowcode-button-default-bg: var(--ti-lowcode-common-component-bg-2); // 按钮hover字体颜色 --ti-lowcode-button-default-hover-color: var(--ti-lowcode-common-primary-color); // 按钮hover背景色 - --ti-lowcode-button-default-hover-bg: #fff; + --ti-lowcode-button-default-hover-bg: var(--ti-lowcode-common-component-bg-2); --ti-lowcode-button-default-hover-border-color: var(--ti-lowcode-common-primary-color); // info 保存按钮背景色 --ti-lowcode-button-info-bg: var(--ti-lowcode-common-primary-color); // info 保存按钮 hover 背景色 --ti-lowcode-button-info-hover-bg: var(--ti-lowcode-common-primary-hover-color); // primary 按钮字体颜色 - --ti-lowcode-button-primary-color: #fff; + --ti-lowcode-button-primary-color: var(--ti-lowcode-common-text-color-3); // 按钮边框颜色 --ti-lowcode-button-border-color: var(--ti-lowcode-common-primary-color); // 组件icon颜色 - --ti-lowcode-component-icon-color: #8d8d8d; + --ti-lowcode-component-icon-color: var(--ti-lowcode-common-text-color-26); // 组件item hover 背景色 - --ti-lowcode-component-item-hover-bg: #e3e3e3; + --ti-lowcode-component-item-hover-bg: var(--ti-lowcode-common-component-bg-30); // 左侧插件激活背景色 - --ti-lowcode-left-panel-active-bg: #f2f2f2; + --ti-lowcode-left-panel-active-bg: var(--ti-lowcode-common-component-bg-26); // 左侧插件激活边框色 - --ti-lowcode-left-panel-active-border-color: #999; + --ti-lowcode-left-panel-active-border-color: var(--ti-lowcode-common-border-color-16); // 左侧tabs按钮边框色 - --ti-lowcode-left-button-border-color: #ddd; + --ti-lowcode-left-button-border-color: var(--ti-lowcode-common-border-color-7); // list-item 项背景色 - --ti-lowcode-list-item-bg: #fafafa; + --ti-lowcode-list-item-bg: var(--ti-lowcode-common-component-bg-4); // list-item 项激活背景色 - --ti-lowcode-list-item-active-bg: #e9e9e9; + --ti-lowcode-list-item-active-bg: var(--ti-lowcode-common-component-bg-20); // radio 按钮组激活背景色 - --ti-lowcode-radio-button-active-bg: #9d9d9d; + --ti-lowcode-radio-button-active-bg: var(--ti-lowcode-common-component-bg-31); // grid 布局设置按钮字体颜色 - --ti-lowcode-grid-edit-color: #252b3a; + --ti-lowcode-grid-edit-color: var(--ti-lowcode-common-text-color-15); // grid 布局设置按钮背景色 - --ti-lowcode-grid-edit-bg: #fff; + --ti-lowcode-grid-edit-bg: var(--ti-lowcode-common-component-bg-2); // tooltip字体颜色 - --ti-lowcode-tooltip-text-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-tooltip-text-color: var(--ti-lowcode-common-primary-text-color); // tooltip背景颜色 - --ti-lowcode-tooltip-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-tooltip-bg-color: var(--ti-lowcode-common-component-bg-2); // tooltip错误提示背景颜色 - --ti-lowcode-tooltip-error-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-tooltip-error-bg-color: var(--ti-lowcode-common-component-bg-2); // Fit 字体颜色 - --ti-lowcode-fit-label-color: #252b3a; + --ti-lowcode-fit-label-color: var(--ti-lowcode-common-text-color-15); // Fit 背景颜色 - --ti-lowcode-fit-coordinate-bg: #fff; + --ti-lowcode-fit-coordinate-bg: var(--ti-lowcode-common-component-bg-2); // Fit 边框颜色 - --ti-lowcode-fit-coordinate-border-color: #ddd; + --ti-lowcode-fit-coordinate-border-color: var(--ti-lowcode-common-border-color-7); // Fit 圆点颜色 - --ti-lowcode-fit-coordinate-origin-color: #757575; + --ti-lowcode-fit-coordinate-origin-color: var(--ti-lowcode-common-text-color-27); // more icon 选中背景色 - --ti-lowcode-more-icon-selected-bg: #e5e5e5; + --ti-lowcode-more-icon-selected-bg: var(--ti-lowcode-common-component-bg-24); // main menu 背景色 - --ti-lowcode-main-menu-bg: #fff; + --ti-lowcode-main-menu-bg: var(--ti-lowcode-common-component-bg-2); // main menu hover 背景色 - --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-primary-color); + --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-component-bg-9); --ti-lowcode-main-menu-item-hover-color: var(--ti-lowcode-common-text-color-3); // spacing svg 图标上下颜色 - --ti-lowcode-spacing-tb-color: #d1d1d1; + --ti-lowcode-spacing-tb-color: var(--ti-lowcode-common-text-color-28); // spacing svg 图标上下hover颜色 - --ti-lowcode-spacing-tb-hover-color: #bdbdbd; + --ti-lowcode-spacing-tb-hover-color: var(--ti-lowcode-common-gray-53); // spacing svg 图标左右颜色 - --ti-lowcode-spacing-lr-color: #e5e5e5; + --ti-lowcode-spacing-lr-color: var(--ti-lowcode-common-text-color-23); // spacing svg 图标左右hover颜色 - --ti-lowcode-spacing-lr-hover-color: #dfdfdf; + --ti-lowcode-spacing-lr-hover-color: var(--ti-lowcode-common-gray-54); // spacing svg 图标边框颜色 - --ti-lowcode-spacing-border-color: #999; + --ti-lowcode-spacing-border-color: var(--ti-lowcode-common-border-color-16); // position direction 字体颜色 - --ti-lowcode-position-direction-color: #252b3a; + --ti-lowcode-position-direction-color: var(--ti-lowcode-common-text-color-15); // position direction 弹框显示时字体背景色 - --ti-lowcode-position-direction-bg: #bfbfbf; + --ti-lowcode-position-direction-bg: var(--ti-lowcode-common-component-bg-32); // position Relative to 按钮字体颜色 - --ti-lowcode-position-relative-to-color: #252b3a; + --ti-lowcode-position-relative-to-color: var(--ti-lowcode-common-text-color-15); // position Relative to 按钮边框颜色 - --ti-lowcode-position-relative-to-border-color: #ddd; + --ti-lowcode-position-relative-to-border-color: var(--ti-lowcode-common-border-color-7); // position Relative to 按钮背景色 - --ti-lowcode-position-relative-to-bg: #e5e5e5; + --ti-lowcode-position-relative-to-bg: var(--ti-lowcode-common-component-bg-24); // position 选中背景色 - --ti-lowcode-position-selected-bg: #b5b5b5; + --ti-lowcode-position-selected-bg: var(--ti-lowcode-common-component-bg-33); // icon 图标选择弹框背景色 - --ti-lowcode-icon-popover-bg: #ebebeb; + --ti-lowcode-icon-popover-bg: var(--ti-lowcode-common-component-bg-19); // icon 图标选择弹框字体颜色 - --ti-lowcode-icon-popover-color: #666; + --ti-lowcode-icon-popover-color: var(--ti-lowcode-common-text-color-19); // icon 图标选择弹框hover颜色 - --ti-lowcode-icon-popover-hover-color: #333; + --ti-lowcode-icon-popover-hover-color: var(--ti-lowcode-common-text-color-9); // 查看区块详情icon颜色 - --ti-lowcode-block-detail-icon-color: #999; + --ti-lowcode-block-detail-icon-color: var(--ti-lowcode-common-text-color-22); // 顶部按钮显示背景色 - --ti-lowcode-toolbar-button-bg: #ebebeb; + --ti-lowcode-toolbar-button-bg: var(--ti-lowcode-common-component-bg-19); // 顶部隐藏导航栏按钮hover颜色 - --ti-lowcode-toolbar-ellipsis-hover-bg: #f5f5f5; + --ti-lowcode-toolbar-ellipsis-hover-bg: var(--ti-lowcode-common-component-bg-1); // 中间画布底部面包屑hover背景色 - --ti-lowcode-breadcrumb-hover-bg: #fff; + --ti-lowcode-breadcrumb-hover-bg: var(--ti-lowcode-common-component-bg-2); // 弹框中tip提示边框颜色 - --ti-lowcode-dialog-tip-border-color: #575d6c; + --ti-lowcode-dialog-tip-border-color: var(--ti-lowcode-common-border-color-20); // 弹框字体颜色 && 左侧面板 title 字体颜色 - --ti-lowcode-dialog-font-color: #333; + --ti-lowcode-dialog-font-color: var(--ti-lowcode-common-text-color-9); // 输入框icon图标颜色 - --ti-lowcode-input-icon-color: #737373; + --ti-lowcode-input-icon-color: var(--ti-lowcode-common-text-color-29); // 弹框字体颜色 && 图标颜色 && 输入框 suffix 字体颜色 - --ti-lowcode-text-color: #6a6a6a; + --ti-lowcode-text-color: var(--ti-lowcode-common-text-color-1); // 右侧optionitem的边框色 - --ti-lowcode-optionitem-border-color: #9f9f9f; + --ti-lowcode-optionitem-border-color: var(--ti-lowcode-common-border-color-21); // 右侧optionitem的背景色 - --ti-lowcode-optionitem-background-color: #e5e5e5; + --ti-lowcode-optionitem-background-color: var(--ti-lowcode-common-component-bg-24); //tootip里的input框字体颜色 - --ti-lowcode-tootip-input-color: #fff; + --ti-lowcode-tootip-input-color: var(--ti-lowcode-common-text-color-3); //tootip里的input背景颜色 - --ti-lowcode-tootip-input-background-color: #363636; + --ti-lowcode-tootip-input-background-color: var(--ti-lowcode-common-component-bg-34); //tootip里的input框边框颜色 - --ti-lowcode-tootip-input-border-color: #b9b9b9; + --ti-lowcode-tootip-input-border-color: var(--ti-lowcode-common-border-color-22); //tootip里的input框箭头颜色 - --ti-lowcode-tootip-arrow-border-color: #404040; + --ti-lowcode-tootip-arrow-border-color: var(--ti-lowcode-common-close-icon-text-color-1); // dialogBox弹框示例框边框色 - --ti-lowcode-dialog-demo-border-color: #5e5e5e; + --ti-lowcode-dialog-demo-border-color: var(--ti-lowcode-common-border-color-23); // 关闭 icon 图标hover背景色 && 输入框后置文本hover背景色 - --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1); + --ti-lowcode-icon-hover-bg: var(--ti-lowcode-common-component-bg-35); // 说明提示框警告颜色 - --ti-lowcode-description-warning-color: #facb4b; + --ti-lowcode-description-warning-color: var(--ti-lowcode-common-warning-color-2); // 说明提示框错误颜色 - --ti-lowcode-description-error-color: #ff0000; + --ti-lowcode-description-error-color: var(--ti-lowcode-common-error-color-1); // switch checked状态边框色 --ti-lowcode-switch-checked-border-color: var(--ti-lowcode-common-primary-color); // 文本链接颜色 - --ti-lowcode-text-link-color: #6bb0ff; + --ti-lowcode-text-link-color: var(--ti-lowcode-common-text-color-31); // 大纲树node节点选中背景色 --ti-lowcode-node-current-bg: var(--ti-lowcode-common-primary-color); // 大纲树node节点不可拖拽背景色 && 表单校验错误边框色 - --ti-lowcode-node-nodrag-bg: #ea384c; + --ti-lowcode-node-nodrag-bg: var(--ti-lowcode-common-component-bg-45); // 成功状态按钮边框色 - --ti-lowcode-success-border-color: #2ad986; + --ti-lowcode-success-border-color: var(--ti-lowcode-common-border-color-24); // 错误提示颜色 - --ti-lowcode-error-tip-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-error-tip-color: var(--ti-lowcode-common-status-error); // 画布拖拽元素背景色 - --ti-lowcode-drag-ghost-bg: #888; + --ti-lowcode-drag-ghost-bg: var(--ti-lowcode-common-component-bg-36); // 画布拖拽位置线背景色 - --ti-lowcode-ghost-line-bg: #ffb100; + --ti-lowcode-ghost-line-bg: var(--ti-lowcode-common-component-bg-37); // 描述颜色 --ti-lowcode-description-color: var(--ti-lowcode-common-text-color-4); // 更多折叠面板头部hover背景色 - --ti-lowcode-more-collapse-header-hover-color: #afafaf; + --ti-lowcode-more-collapse-header-hover-color: var(--ti-lowcode-common-gray-19); // 绑定时icon图标颜色 - --ti-lowcode-icon-bind-color: #006cff; + --ti-lowcode-icon-bind-color: var(--ti-lowcode-common-blue-22); // 创建字体颜色 - --ti-lowcode-create-color: #575d6c; + --ti-lowcode-create-color: var(--ti-lowcode-common-text-color-25); // 删除按钮hover背景色 && 表单校验错误背景色 - --ti-lowcode-delete-button-hover-bg: #c92c3f; + --ti-lowcode-delete-button-hover-bg: var(--ti-lowcode-common-component-bg-38); // input框focus 获焦时边框颜色 - --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-default-button-border-hover-color); + --ti-lowcode-input-focus-border-color: var(--ti-lowcode-common-btn-default-border-color); // 次要描述字体颜色 && 面包屑label 字体颜色 - --ti-lowcode-description-minor-color: #ababab; + --ti-lowcode-description-minor-color: var(--ti-lowcode-common-third-text-color); // 样式设置 label 字体颜色 - --ti-lowcode-style-setting-label-color: #8bbefa; + --ti-lowcode-style-setting-label-color: var(--ti-lowcode-common-text-color-32); // 样式设置 label 背景颜色 - --ti-lowcode-style-setting-label-bg: rgba(76, 152, 241, 0.15); + --ti-lowcode-style-setting-label-bg: var(--ti-lowcode-common-component-bg-39); // 多人协作item项hover背景色 - --ti-lowcode-user-item-hover-bg: #f3f3f5; + --ti-lowcode-user-item-hover-bg: var(--ti-lowcode-common-component-bg-40); // 多人协作人员头像背景色 - --ti-lowcode-user-header-bg: #919191; + --ti-lowcode-user-header-bg: var(--ti-lowcode-common-component-bg-41); // 工具栏提示框字体颜色 - --ti-lowcode-toolbar-popover-color: #363636; + --ti-lowcode-toolbar-popover-color: var(--ti-lowcode-common-text-color-30); // 工具栏 media 提示框字体颜色 - --ti-lowcode-media-popover-color: var(--ti-lowcode-base-gray-60); + --ti-lowcode-media-popover-color: var(--ti-lowcode-common-text-color-8); // 工具栏 media 提示框标题字体颜色 - --ti-lowcode-media-popover-title-color: #191919; + --ti-lowcode-media-popover-title-color: var(--ti-lowcode-common-primary-text-color); // 工具栏icon禁用颜色 - --ti-lowcode-disabled-color: #c2c2c2; + --ti-lowcode-disabled-color: var(--ti-lowcode-common-gray-18); // 状态管理详情收缩摩纳哥编辑器icon颜色 - --ti-lowcode-state-management-screen-icon-color: #404040; + --ti-lowcode-state-management-screen-icon-color: var(--ti-lowcode-common-close-icon-text-color-1); // 状态管理搜索无结果显示颜色 - --ti-lowcode-state-management-query-color: #404040; + --ti-lowcode-state-management-query-color: var(--ti-lowcode-common-close-icon-text-color-1); // 状态管理代码编辑器边框颜色 - --ti-lowcode-state-management-monaco-editor-border-color: var(--ti-lowcode-base-gray-40); + --ti-lowcode-state-management-monaco-editor-border-color: var(--ti-lowcode-common-border-color-13); // Popover提示框 - --ti-lowcode-popover-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-popover-color: var(--ti-lowcode-common-primary-text-color); // popover 弹框背景色 - --ti-lowcode-popover-bg-color: #fff; + --ti-lowcode-popover-bg-color: var(--ti-lowcode-common-component-bg-2); // 自定义类名lowcode弹框背景色 - --ti-lowcode-custom-popover-bg-color: #fff; + --ti-lowcode-custom-popover-bg-color: var(--ti-lowcode-common-component-bg-2); // 自定义类名lowcode弹框字体颜色 - --ti-lowcode-custom-popover-text-color: #191919; + --ti-lowcode-custom-popover-text-color: var(--ti-lowcode-common-primary-text-color); // 自定义类名lowcode弹框边框颜色 - --ti-lowcode-custom-popover-border-color: #fff; + --ti-lowcode-custom-popover-border-color: var(--ti-lowcode-common-border-color-19); // 滚动条thumb颜色 - --ti-lowcode-scrollbar-thumb-background-color: #e7e8e9; + --ti-lowcode-scrollbar-thumb-background-color: var(--ti-lowcode-common-component-bg-42); // 可点击交互的文字颜色 - --ti-lowcode-common-interaction-text-color: #5e7ce0; + --ti-lowcode-interaction-text-color: var(--ti-lowcode-common-text-color-33); // 数字输入框组件下拉列表文字颜色 - --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-text-color); - + --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-common-text-color-1); //左侧插件栏hover背景色 - --ti-plugins-hover-bg-color: #fff; + --ti-plugins-hover-bg-color: var(--ti-lowcode-common-component-bg-2); //左侧插件栏hover边框色 - --ti-plugins-hover-border-color: #9e9e9e; + --ti-plugins-hover-border-color: var(--ti-lowcode-common-border-color-25); //左侧插件栏hover文字色 - --ti-plugins-hover-text-color: #4d4d4d; + --ti-plugins-hover-text-color: var(--ti-lowcode-common-text-color-34); // 表格行间背景色 - --ti-lowcode-new-table-row-sepline-background: #f0f0f0; - + --ti-lowcode-new-table-row-sepline-background: var(--ti-lowcode-common-component-bg-5); // 查看指引视频 - --ti-lowcode-block-video-tip-color: var(--ti-lowcode-base-primary-color-2); - + --ti-lowcode-block-video-tip-color: var(--ti-lowcode-common-primary-color); // 右侧optionitem的边框色 - --ti-lowcode-optionitem-border-color: rgba(0, 0, 0, 0.08); + --ti-lowcode-optionitem-border-color: var(--ti-lowcode-common-border-color-10); // 右侧optionitem的背景色 - --ti-lowcode-optionitem-background-color: #fff; - + --ti-lowcode-optionitem-background-color: var(--ti-lowcode-common-component-bg-2); // 空数据图标颜色 - --ti-lowcode-empty-icon-color: unset; - - --ti-lowcode-popover-option-popper-border-color: transparent; - --ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-toolbar-more-color); + --ti-lowcode-empty-icon-color: var(--ti-lowcode-common-color-unset); + --ti-lowcode-popover-option-popper-border-color: var(--ti-lowcode-common-border-color-18); + --ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-common-text-color-18); }