Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Modify css variables #1051

Merged
merged 2 commits into from
Jan 20, 2025
Merged

feat: Modify css variables #1051

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
156a8c0
fix: Modify css variables
xuanlid Jan 17, 2025
57ff475
fix: Modify css variables
xuanlid Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 40 additions & 39 deletions packages/theme/base/src/base.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,15 @@
--te-base-gray-30: #e6e6e6;
--te-base-gray-40: #dbdbdb;
--te-base-gray-50: #c2c2c2;
--te-base-gray-60: #808080;
--te-base-gray-70: #595959;
--te-base-gray-80: #333333;
--te-base-gray-90: #191919;
--te-base-gray-100: #000;
--te-base-gray-110: #b4b5b8;
--te-base-gray-120: #8b8c8f;
--te-base-gray-130: #4d4e52;
--te-base-gray-140: #36383d;
--te-base-gray-150: #2a2c31;
--te-base-gray-160: #212329;
--te-base-gray-170: #0f1115;
--te-base-gray-60: #b3b3b3;
--te-base-gray-70: #808080;
--te-base-gray-80: #595959;
--te-base-gray-90: #4d4d4d;
--te-base-gray-100: #333333;
--te-base-gray-110: #262626;
--te-base-gray-120: #1a1a1a;
--te-base-gray-125: #191919;
xuanlid marked this conversation as resolved.
Show resolved Hide resolved
--te-base-gray-130: #000;

// expand-red
--te-base-red-10: #fff1f0;
Expand All @@ -35,11 +32,12 @@
--te-base-red-80: #a3171c;
--te-base-red-90: #78080e;
--te-base-red-100: #4d0005;
--te-base-red-110: #a64242;
--te-base-red-120: #d4827f;
--te-base-red-130: #f2c5c2;
--te-base-red-140: rgba(242, 48, 48, 0.3);
--te-base-red-150: #330002;
--te-base-red-110: #33201e;
--te-base-red-120: #a64242;
--te-base-red-130: #b6332a;
--te-base-red-140: #d94838;
--te-base-red-150: #d4827f;
--te-base-red-160: #f2c5c2;

// expand-orange
--te-base-orange-10: #fff5e8;
Expand Down Expand Up @@ -123,14 +121,14 @@
--te-base-green-40: #60d680;
--te-base-green-50: #25c251;
--te-base-green-60: #00b336;
--te-base-green-70: #029931;
--te-base-green-80: #01802b;
--te-base-green-90: #006624;
--te-base-green-100: #004a1b;
--te-base-green-110: #1d312a;
--te-base-green-120: #77c78f;
--te-base-green-130: #b8e6c7;
--te-base-green-140: rgba(92, 179, 54, 0.1);
--te-base-green-70: #39a632;
--te-base-green-80: #029931;
--te-base-green-90: #01802b;
--te-base-green-100: #006624;
--te-base-green-110: #004a1b;
--te-base-green-120: #273726;
--te-base-green-130: #77c78f;
--te-base-green-140: #b8e6c7;

// expand-mint
--te-base-mint-10: #e6fcfa;
Expand Down Expand Up @@ -164,34 +162,37 @@

// expand-blue
--te-base-blue-10: #f0f7ff;
--te-base-blue-20: #e7f1ff;
--te-base-blue-20: #deecff;
--te-base-blue-30: #b3d6ff;
--te-base-blue-40: #7eb7fc;
--te-base-blue-50: #4191fa;
--te-base-blue-60: #1476ff;
--te-base-blue-70: #0f5ed4;
--te-base-blue-80: #0845a6;
--te-base-blue-90: #022e7a;
--te-base-blue-100: #001a4a;
--te-base-blue-110: #202b3f;
--te-base-blue-120: #7fa6d4;
--te-base-blue-130: #b6d4f2;
--te-base-blue-140: rgba(20, 118, 255, 0.1);
--te-base-blue-60: #317af7;
--te-base-blue-70: #1476ff;
--te-base-blue-80: #0f5ed4;
--te-base-blue-90: #0845a6;
--te-base-blue-100: #022e7a;
--te-base-blue-110: #001a4a;
--te-base-blue-120: #0a1831;
--te-base-blue-130: #7fa6d4;
--te-base-blue-140: #b6d4f2;
--te-base-blue-150: rgba(20, 118, 255, 0.1);
--te-base-blue-160: rgba(49, 122, 247, 0.1);

// expand-indigo
--te-base-indigo-10: #f0ebff;
--te-base-indigo-20: #e2d9fc;
--te-base-indigo-30: #a790ff;
--te-base-indigo-30: #b9a6f7;
--te-base-indigo-40: #9479f2;
--te-base-indigo-50: #6e51e0;
--te-base-indigo-60: #512fd6;
--te-base-indigo-70: #391eb0;
--te-base-indigo-80: #27108f;
--te-base-indigo-90: #19056e;
--te-base-indigo-100: #0e004d;
--te-base-indigo-110: #2f2e3f;
--te-base-indigo-120: #847acc;
--te-base-indigo-130: #bbb8e6;
--te-base-indigo-110: #272635;
--te-base-indigo-120: #716acc;
--te-base-indigo-130: #847acc;
--te-base-indigo-140: #bbb8e6;

// expand-purple
--te-base-purple-10: #f9ebff;
Expand Down
131 changes: 67 additions & 64 deletions packages/theme/base/src/common.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,43 @@
--te-common-color-success: var(--te-base-kelly-60); // 注释，成功-背景色 #5cb300
--te-common-color-warning: var(--te-base-orange-60); // 注释，告警-背景色 #ff8800
--te-common-color-error: var(--te-base-red-60); // 注释，错误-背景色 #f23030
--te-common-color-info: var(--te-base-blue-60); // 注释，告警-背景色 #1476ff
--te-common-color-prompt-secondary: var(--te-base-indigo-50); // 注释，区块提示-背景色 #6e51e0
--te-common-color-info: var(--te-base-blue-70); // 注释，提示信息-背景色/选中色 #1476ff
--te-common-color-prompt-secondary: var(--te-base-indigo-10); // 注释，区块提示-背景色 #f0ebff

// 文本色
--te-common-text-primary: var(--te-base-gray-90); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #191919
--te-common-text-secondary: var(--te-base-gray-70); // 二级文本色-次要信息/表单标签颜色/选块按钮默认色 #595959
--te-common-text-weaken: var(--te-base-gray-60); // 三级文本色-弱化信息/提示文字 #808080
--te-common-text-primary: var(--te-base-gray-125); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #191919
--te-common-text-secondary: var(--te-base-gray-80); // 二级文本色-次要信息/表单标签颜色/选块按钮默认色 #595959
--te-common-text-weaken: var(--te-base-gray-70); // 三级文本色-弱化信息/提示文字 #808080
--te-common-text-disabled: var(--te-base-gray-50); // 文本禁用色 #c2c2c2
--te-common-text-link: var(--te-base-blue-60); // 链接色 #1476ff
--te-common-text-link: var(--te-base-blue-70); // 链接色 #1476ff
--te-common-text-inverse: var(--te-base-gray-0); // 主按钮上的文本色 #fff
--te-common-text-dark-inverse: var(--te-base-gray-0); // 深色背景下按钮上的文本色 #fff
--te-common-text-emphasize: var(--te-base-blue-60); // 强调性文字 #1476ff
--te-common-text-checked: var(--te-base-blue-60); // 选中或者hover文字 #1476ff
--te-common-text-emphasize: var(--te-base-blue-70); // 强调性文字 #1476ff
--te-common-text-checked: var(--te-base-blue-70); // 选中或者hover文字 #1476ff

--te-common-icon-primary: var(--te-base-gray-90); // 重要图标色 #191919
--te-common-icon-hover: var(--te-base-gray-70); // 图标悬浮色 #595959
--te-common-icon-secondary: var(--te-base-gray-60); // 图标默认色 #808080
--te-common-icon-primary: var(--te-base-gray-125); // 重要图标色 #191919
--te-common-icon-hover: var(--te-base-gray-80); // 图标悬浮色 #595959
--te-common-icon-secondary: var(--te-base-gray-70); // 图标默认色 #808080
--te-common-icon-disabled: var(--te-base-gray-50); // 图标禁用色 #c2c2c2
--te-common-icon-link: var(--te-base-blue-60); // 图标提示色 #1476ff
--te-common-icon-link: var(--te-base-blue-70); // 图标提示色 #1476ff

--te-common-border-default: var(--te-base-gray-40); // 线条-输入框默认色 #dbdbdb
--te-common-border-active: var(--te-base-gray-90); // 线条-输入框悬浮色/激活色 #191919
--te-common-border-active: var(--te-base-gray-125); // 线条-输入框悬浮色/激活色 #191919
--te-common-border-disabled: var(--te-base-gray-40); // 线条-禁用色 #dbdbdb
--te-common-border-secondary: var(--te-base-gray-70); // 线条-次要按钮描边色 #595959
--te-common-border-secondary: var(--te-base-gray-80); // 线条-次要按钮描边色 #595959
--te-common-border-prompt: var(--te-base-gray-40); // 线条-三级按钮默认色/表单内按钮 #dbdbdb
--te-common-border-hover: var(--te-base-gray-50); // 线条-按钮边框悬浮色/复选框/单选框默认边框色 #c2c2c2
--te-common-border-divider: var(--te-base-gray-30); //线条-白色背景分割线颜色 #e6e6e6
--te-common-border-bg-divider: var(--te-base-gray-40); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb
--te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #1476ff
--te-common-border-checked: var(--te-base-blue-70); // 线条 选中色 #1476ff
--te-common-border-error-hover: var(--te-base-red-30); // 线条 红色按钮边框hover色 #faa7a3
--te-common-border-info: var(--te-base-blue-70); // 输入框提示色 #1476ff

--te-common-bg-primary: var(--te-base-gray-90); // 主要按钮-背景色 #191919
--te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色 选中和hover等颜色 #1476ff
--te-common-bg-primary-emphasize: var(--te-base-blue-60); // 主色-背景色 强调背景 #1476ff
--te-common-bg-primary: var(--te-base-gray-125); // 主要按钮-背景色 #191919
--te-common-bg-primary-checked: var(--te-base-blue-70); // 主色-背景色 选中和hover等颜色 #1476ff
--te-common-bg-primary-emphasize: var(--te-base-blue-70); // 主色-背景色 强调背景 #1476ff

--te-common-bg-secondary: var(--te-base-gray-70); // 次要按钮-背景色 #595959
--te-common-bg-secondary: var(--te-base-gray-80); // 次要按钮-背景色 #595959
--te-common-bg-prompt: var(--te-base-gray-30); // 导航按钮-背景色/选块-选中色 #e6e6e6
--te-common-bg-container: var(
--te-base-gray-10
Expand All @@ -51,8 +52,8 @@
--te-common-bg-switch: var(--te-base-gray-50); // 开关默认色 #c2c2c2
--te-common-bg-error: var(--te-base-red-10); // 浅色错误背景-背景色 #fff1f0
--te-common-bg-popover: var(--te-base-gray-0); // 对话框/tooltip/popover背景 #fff
--te-common-bg-text-emphasize: var(--te-base-blue-140); // 强调性文字背景色 rgba(20, 118, 255, 0.1)
--te-common-bg-info: var(--te-base-blue-20); // 提示框info背景色 #e7f1ff
--te-common-bg-text-emphasize: var(--te-base-blue-150); // 强调性文字背景色 rgba(20, 118, 255, 0.1)
--te-common-bg-info: var(--te-base-blue-20); // 提示框info背景色 #deecff

// 通用间距
--te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
Expand All @@ -61,55 +62,57 @@

:root[data-theme='dark'] {
//功能色
--te-common-color-success: var(--te-base-kelly-60); // 注释，成功-背景色 #5cb300
--te-common-color-success: var(--te-base-green-70); // 注释，成功-背景色 #39a632
--te-common-color-warning: var(--te-base-orange-60); // 注释，告警-背景色 #ff8800
--te-common-color-error: var(--te-base-red-60); // 注释，错误-背景色 #f23030
--te-common-color-info: var(--te-base-blue-60); // 注释，告警-背景色 #1476ff
--te-common-color-prompt-secondary: var(--te-base-indigo-30); // 注释，区块提示-背景色 #A790FF
--te-common-color-error: var(--te-base-red-140); // 注释，错误-背景色 #d94838
--te-common-color-info: var(--te-base-blue-60); // 注释，提示信息-背景色/选中色 #317af7
--te-common-color-prompt-secondary: var(--te-base-indigo-110); // 注释，区块提示-背景色 #272635
// 文本色
--te-common-text-primary: var(--te-base-gray-20); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #F0F0F0
--te-common-text-secondary: var(--te-base-gray-110); // 二级文本色-次要信息/表单标签颜色 #B4B5B8
--te-common-text-weaken: var(--te-base-gray-120); // 三级文本色-弱化信息/提示文字 #8B8C8F
--te-common-text-disabled: var(--te-base-gray-130); // 文本禁用色 #4D4E52
--te-common-text-link: var(--te-base-blue-60); // 链接色 #1476ff
--te-common-text-inverse: var(--te-base-gray-100); // 主按钮上的文本色 #000000
--te-common-text-dark-inverse: var(--te-base-gray-0); // 深色背景下按钮上的文本色 #fff
--te-common-text-emphasize: var(--te-base-blue-60); // 强调性文字 #1476ff
--te-common-text-checked: var(--te-base-blue-60); // 选中或者hover文字 #1476ff
--te-common-text-primary: var(--te-base-gray-30); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #E6E6E6
--te-common-text-secondary: var(--te-base-gray-60); // 二级文本色-次要信息/表单标签颜色 #B3B3B3
--te-common-text-weaken: var(--te-base-gray-70); // 三级文本色-弱化信息/提示文字 #808080
--te-common-text-disabled: var(--te-base-gray-90); // 文本禁用色 #4D4D4D
--te-common-text-link: var(--te-base-blue-60); // 链接色 #317AF7
--te-common-text-inverse: var(--te-base-gray-130); // 主按钮上的文本色 #000
--te-common-text-dark-inverse: var(--te-base-gray-130); // 深色背景下按钮上的文本色 #000
--te-common-text-emphasize: var(--te-base-blue-60); // 强调性文字 #317AF7
--te-common-text-checked: var(--te-base-blue-60); // 选中或者hover文字 #317AF7

--te-common-icon-primary: var(--te-base-gray-20); // 重要图标色 #F0F0F0
--te-common-icon-hover: var(--te-base-gray-110); // 图标悬浮色 #B4B5B8
--te-common-icon-secondary: var(--te-base-gray-120); // 图标默认色 #8B8C8F
--te-common-icon-disabled: var(--te-base-gray-50); // 图标禁用色 #C2C2C2
--te-common-icon-link: var(--te-base-blue-60); // 图标提示色 #1476ff
--te-common-icon-primary: var(--te-base-gray-30); // 重要图标色 #E6E6E6
--te-common-icon-hover: var(--te-base-gray-60); // 图标悬浮色 #B3B3B3
--te-common-icon-secondary: var(--te-base-gray-70); // 图标默认色 #808080
--te-common-icon-disabled: var(--te-base-gray-90); // 图标禁用色 #4D4D4D
--te-common-icon-link: var(--te-base-blue-60); // 图标提示色 #317AF7

--te-common-border-default: var(--te-base-gray-130); // 线条-输入框默认色 #4D4E52
--te-common-border-active: var(--te-base-gray-20); // 线条-输入框悬浮色/激活色 #F0F0F0
--te-common-border-disabled: var(--te-base-gray-140); // 线条-禁用色 #36383D
--te-common-border-secondary: var(--te-base-gray-110); // 线条-次要按钮描边色/禁用色 #B4B5B8
--te-common-border-prompt: var(--te-base-gray-130); // 线条-三级按钮默认色/表单内按钮 #4D4E52
--te-common-border-hover: var(--te-base-gray-120); // 线条-按钮边框悬浮色/复选框/单选框默认边框色 #8B8C8F
--te-common-border-divider: var(--te-base-gray-140); //线条-白色背景分割线颜色 #36383D
--te-common-border-bg-divider: var(--te-base-gray-130); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4E52
--te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #1476ff
--te-common-border-error-hover: var(--te-base-red-90); // 线条 红色按钮边框hover色 #78080e
--te-common-border-default: var(--te-base-gray-90); // 线条-输入框默认色 #4D4D4D
--te-common-border-active: var(--te-base-gray-30); // 线条-输入框悬浮色/激活色 #E6E6E6
--te-common-border-disabled: var(--te-base-gray-90); // 线条-禁用色 #4D4D4D
--te-common-border-secondary: var(--te-base-gray-60); // 线条-次要按钮描边色 #B3B3B3
--te-common-border-prompt: var(--te-base-gray-90); // 线条-三级按钮默认色/表单内按钮 #4D4D4D
--te-common-border-hover: var(--te-base-gray-70); // 线条-按钮边框悬浮色/复选框/单选框默认边框色 #808080
--te-common-border-divider: var(--te-base-gray-110); //线条-白色背景分割线颜色 #262626
--te-common-border-bg-divider: var(--te-base-gray-100); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #333333
--te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #317AF7
--te-common-border-error-hover: var(--te-base-red-130); // 线条 红色按钮边框hover色 #B6332A
--te-common-border-info: var(--te-base-blue-60); // 输入框提示色 #317AF7

--te-common-bg-primary: var(--te-base-gray-20); // 主要按钮-背景色 #F0F0F0
--te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色 选中和hover等颜色 #1476ff
--te-common-bg-primary-emphasize: var(--te-base-blue-60); // 主色-背景色 强调背景 #1476ff
--te-common-bg-secondary: var(--te-base-gray-110); // 次要按钮-背景色 #B4B5B8
--te-common-bg-prompt: var(--te-base-gray-120); // 导航按钮-背景色/选块-选中色 #8B8C8F
--te-common-bg-primary: var(--te-base-gray-30); // 主要按钮-背景色 #E6E6E6
--te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色 选中和hover等颜色 #317AF7
--te-common-bg-primary-emphasize: var(--te-base-blue-60); // 主色-背景色 强调背景 #317AF7
--te-common-bg-secondary: var(--te-base-gray-60); // 次要按钮-背景色 #B3B3B3
--te-common-bg-prompt: var(--te-base-gray-100); // 导航按钮-背景色/选块-选中色 #333333
--te-common-bg-container: var(
--te-base-gray-140
); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #36383D
--te-common-bg-container-weaken: var(--te-base-gray-150); // 浅编辑代码--背景色 #2a2c31
--te-common-bg-tag: var(--te-base-green-110); // tag标签-背景色 #1d312a
--te-common-bg-default: var(--te-base-gray-160); // 深色背景-输入框背景/面板背景色 #212329
--te-common-bg-disabled: var(--te-base-gray-150); // 禁用/标签/下拉框多选标签 背景色 #2a2c31
--te-common-bg-switch: var(--te-base-gray-130); // 开关默认色 #4D4E52
--te-common-bg-error: var(--te-base-red-150); // 深色错误背景-背景色 #330002
--te-common-bg-popover: var(--te-base-gray-170); // 对话框/tooltip/popover背景 #0F1115
--te-common-bg-info: var(--te-base-blue-110); // 提示框info背景色 #202b3f
--te-base-gray-110
); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #262626
--te-common-bg-container-weaken: var(--te-base-gray-110); // 浅编辑代码--背景色 #262626
--te-common-bg-tag: var(--te-base-green-120); // tag标签-背景色 #273726
--te-common-bg-default: var(--te-base-gray-120); // 深色背景-输入框背景/面板背景色 #1A1A1A
--te-common-bg-disabled: var(--te-base-gray-110); // 禁用/标签/下拉框多选标签 背景色 #262626
--te-common-bg-switch: var(--te-base-gray-90); // 开关默认色 #4D4D4D
--te-common-bg-error: var(--te-base-red-110); // 深色错误背景-背景色 #33201E
--te-common-bg-popover: var(--te-base-gray-100); // 对话框/tooltip/popover背景 #333333
--te-common-bg-text-emphasize: var(--te-base-blue-160); // 强调性文字背景色 rgba(49, 122, 247, 0.1)
--te-common-bg-info: var(--te-base-blue-120); // 提示框info背景色 #0A1831

// 通用间距
--te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
Expand Down
Loading