Skip to content

Commit

Permalink
fix: engine component light color theme variable replacement
Browse files Browse the repository at this point in the history
  • Loading branch information
@James-9696
James-9696 committed Jul 18, 2024
1 parent e747cd9 commit 371c89c
Show file tree
Hide file tree
Showing 29 changed files with 642 additions and 835 deletions.
61 changes: 55 additions & 6 deletions packages/theme/base/src/base.less
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;

// 分割线
Expand All @@ -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;
Expand Down Expand Up @@ -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%; // 圆形
}
179 changes: 179 additions & 0 deletions packages/theme/base/src/common.less
View file
Original file line number Diff line number Diff line change
@@ -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);
}
1 change: 1 addition & 0 deletions packages/theme/base/src/component-common.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// 用于写tinyvue组件的样式
Loading

0 comments on commit 371c89c

Please sign in to comment.