From 156a8c022df5cbf830cedcd3e065a4bb0fb6e5db Mon Sep 17 00:00:00 2001 From: lixuan Date: Fri, 17 Jan 2025 00:25:36 -0800 Subject: [PATCH 1/2] fix: Modify css variables --- packages/theme/base/src/base.less | 79 ++++++++--------- packages/theme/base/src/common.less | 131 ++++++++++++++-------------- 2 files changed, 107 insertions(+), 103 deletions(-) diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less index 3e4c6cf8e..3b09d310c 100644 --- a/packages/theme/base/src/base.less +++ b/packages/theme/base/src/base.less @@ -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; @@ -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; @@ -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; @@ -164,24 +162,26 @@ // 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; @@ -189,9 +189,10 @@ --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; diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less index fdc4bdd18..ddd4bb67b 100644 --- a/packages/theme/base/src/common.less +++ b/packages/theme/base/src/common.less @@ -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 @@ -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等等 @@ -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等等 From 57ff475edd071d85f04e980721c57e1d5abf4584 Mon Sep 17 00:00:00 2001 From: lixuan Date: Fri, 17 Jan 2025 00:49:37 -0800 Subject: [PATCH 2/2] fix: Modify css variables --- packages/theme/base/src/common.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less index ddd4bb67b..ff4314128 100644 --- a/packages/theme/base/src/common.less +++ b/packages/theme/base/src/common.less @@ -90,8 +90,8 @@ --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-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