Skip to content

Commit

Permalink
feat: Modify css variables (#1051)
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuanlid
xuanlid authored Jan 20, 2025
1 parent ed569f6 commit 4e4b18e
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 103 deletions.
79 changes: 40 additions & 39 deletions packages/theme/base/src/base.less
View file
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;
--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
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-100); //线条-白色背景分割线颜色 #333333
--te-common-border-bg-divider: var(--te-base-gray-90); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4D4D
--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

0 comments on commit 4e4b18e

Please sign in to comment.