diff --git a/packages/theme/src/base/aurora-theme.less b/packages/theme/src/base/aurora-theme.less index 375e9926d..9fa6c90f4 100644 --- a/packages/theme/src/base/aurora-theme.less +++ b/packages/theme/src/base/aurora-theme.less @@ -73,42 +73,43 @@ /** 2.2 提示类型组件 ----Alert组件、Modal（message）组件、Tag 标签组件、Notify 通知、错误校验等场景 **/ --tv-color-success-text: var(--tv-base-color-success-6); //#52c41a 成功-文本色 --tv-color-success-text-primary: #333; // #333 白色背景一级文本色 - --tv-color-success-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色 --tv-color-success-bg: var(--tv-base-color-success-6); // #52c41a 成功-背景色(深) --tv-color-success-bg-light: #f6ffed; //#f6ffed 成功-背景色(浅) - --tv-color-success-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？） + --tv-color-success-bg-1: #f6ffed; // #f6ffed tag的light类型 --tv-color-success-border: #95de64; //#95de64 成功-边框色(深) + --tv-color-success-border-1: #f6ffed; // #e6f2d5 tag的light类型 --tv-color-success-border-light: #f6ffed; // #f6ffed 成功-边框色（浅） --tv-color-success-icon: var(--tv-base-color-success-6); //#52c41a 成功-图标色 --tv-color-error-text: #f5222d; //#f5222d 错误-文本色/交易金额色 --tv-color-error-text-primary: #333; // #333 白色背景一级文本色 - --tv-color-error-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色 --tv-color-error-bg: #f5222d; // #f5222d 错误-背景色(深) --tv-color-error-bg-light: #fff1f0; // #fff1f0 错误-背景色(浅)/错误校验背景色 - --tv-color-error-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？） + --tv-color-error-bg-1: #fff1f0; // #fff1f0 tag的light类型 --tv-color-error-border: #f5222d; // #ff7875 错误-边框色(深) --tv-color-error-border-light: #fff1f0; // #fff1f0 错误-边框色（浅） + --tv-color-error-border-1: #fff1f0; // #fff1f0 tag的light类型 --tv-color-error-icon: #f5222d; // #f5222d 错误-图标色 --tv-color-warn-text: #faad14; // #faad14 告警-文本色 --tv-color-warn-text-primary: #333; // #333 白色背景一级文本色 - --tv-color-warn-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色 --tv-color-warn-bg: #faad14; // #faad14 告警-背景色(深) --tv-color-warn-bg-light: #fffbe6; // #fffbe6 告警-背景色(浅) - --tv-color-warn-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？） + --tv-color-warn-bg-1: #fffbe6; // #fffbe6 tag的light类型 --tv-color-warn-border: #faad14; // #ffd666 告警-边框色(深) --tv-color-warn-border-light: #fffbe6; // #fffbe6 告警-边框色（浅） + --tv-color-warn-border-1: #fffbe6; // #fffbe6 tag的light类型 --tv-color-warn-icon: #faad14; // #faad14 告警-图标色 --tv-color-info-text: #1890ff; // #1890ff 信息-文本色 --tv-color-info-text-primary: #333; // #333 白色背景一级文本色 - --tv-color-info-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色 + --tv-color-info-text-1: #1890ff; // #1890ff tag的light、plain类型 --tv-color-info-bg: #1890ff; // #1890ff 信息-背景色(深) --tv-color-info-bg-light: #e6f7ff; // #e6f7ff 信息-背景色(浅) - --tv-color-info-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？） + --tv-color-info-bg-1: #e6f7ff; // #e6f7ff：tag的light类型 --tv-color-info-border: #91d5ff; // #91d5ff 信息-边框色(深) --tv-color-info-border-light: #e6f7ff; // #e6f7ff 信息-边框色（浅） + --tv-color-info-border-1: #e6f7ff; // #e6f7ff tag的light类型 --tv-color-info-icon: #1890ff; // #1890ff 信息-图标色 /** 2.3 交互类型颜色---- Button组件、Badge 标记、Link 文字链接 **/ @@ -273,7 +274,7 @@ --tv-color-text-control: var(--tv-base-color-common-10); // #333 左侧导航默认文本色/主要图标按钮/主要图标+按钮 --tv-color-text-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景 --tv-color-text-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：主要按钮文本色 - --tv-color-text-inverse-black: var(--tv-base-color-common-11); // #333 tooltip的light文字 + --tv-color-text-inverse-black: var(--tv-base-color-common-11); // #333 tooltip的light文字 --tv-color-text-active-1: #1890ff; // #1890ff 卡片式tab页签激活文本色 --tv-color-text-active-2: var(--tv-base-color-common-10); // #333 tree选中文本色 --tv-color-text-active-3: #1890ff; // #1890ff tab页签激活色 @@ -310,7 +311,7 @@ --tv-color-bg-header: #f1f1f1; // #f1f1f1 表头背景色(如果只有表格使用，就转成组件级变量） --tv-color-bg-mask: rgba(0, 0, 0, 30%); // 遮罩层带有透明度的背景色 --tv-color-bg-dark: #2e3243; // #2e3243; 深色背景色 顶部导航/ 深色tab/深色提示背景色(目前使用的这个色，找设计师确认） - + /* 2.6.2 禁用 */ --tv-color-bg-disabled: #f5f5f5; // #f5f5f5 禁用背景色 @@ -334,7 +335,7 @@ --tv-color-bg-active-emphasize: #e6f7ff; // #e6f7ff 时间选择选中背景色 --tv-color-bg-active-emphasize-light: rgba(47, 143, 232, 0.1); // rgba(47,143,232,0.1) 表格选中背景色 --tv-color-bg-active-dark: #474c5e; // #474c5e 深色背景悬浮色 - + // -- 暗色新增 -- --tv-color-bg-2: var(--tv-base-color-common-1); // #fff下拉面板/tip背景色 --tv-color-bg-3: var(--tv-base-color-common-1); // #fff 顶部导航背景色/顶部导航下拉背景色/折叠面板背景色/容器二级背景色:左侧导航/折叠面板/表格下展背景 @@ -346,11 +347,11 @@ --tv-color-bg-hover-4: var(--tv-base-color-common-1); // #e6f7ff 表格悬浮/下拉悬浮/左侧导航悬浮 --tv-color-bg-active-primary-1: var(--tv-base-color-brand-5); // #40a9ff 主要按钮悬浮 --tv-color-bg-inverse: var(--tv-base-color-common-1); // #fff 不发生反色的背景色：switch/slider按钮控件背景色 - --tv-color-bg-active-control-1:var(--tv-base-color-common-9); //#999999 radio 选中禁用色 - --tv-color-bg-5:var(--tv-base-color-common-7); // #bfbfbf 轮播指示器背景色 - --tv-color-bg-5-active:var(--tv-base-color-common-1); // #fff 轮播指示器激活背景色 - --tv-color-bg-inverse-tint-1:#606266; // #606266 图片工具栏背景色 - --tv-color-bg-disabled-control:var(--tv-base-color-brand-5); // #40a9ff 滑块高亮部分禁用色 + --tv-color-bg-active-control-1: var(--tv-base-color-common-9); //#999999 radio 选中禁用色 + --tv-color-bg-5: var(--tv-base-color-common-7); // #bfbfbf 轮播指示器背景色 + --tv-color-bg-5-active: var(--tv-base-color-common-1); // #fff 轮播指示器激活背景色 + --tv-color-bg-inverse-tint-1: #606266; // #606266 图片工具栏背景色 + --tv-color-bg-disabled-control: var(--tv-base-color-brand-5); // #40a9ff 滑块高亮部分禁用色 --tv-color-bg-inverse-disabled: var(--tv-base-color-common-1); // #fff 复选框禁用/开个按钮禁用/滑块按钮禁用（此3类场景图标白色部分反色成#999） /** 2.7 边框色/分割线颜色 **/ @@ -373,7 +374,7 @@ --tv-color-border-container: var(--tv-base-color-common-15); // #d9d9d9 卡片选择默认边框 --tv-color-border-container-hover: var(--tv-base-color-brand); // #1890ff 卡片选择悬浮边框 --tv-color-border-container-active: var(--tv-base-color-brand-6); // #1476ff 卡片选择选中边框 - --tv-color-border-inverse-tint:var(--tv-base-color-common-1); // #fff tag边框 + --tv-color-border-inverse-tint: var(--tv-base-color-common-1); // #fff tag边框 --tv-color-border-1: var(--tv-base-color-common-1); // #fff 滑块圆圈描边 /** 3. 字体变量 **/ @@ -445,8 +446,8 @@ /** 8. 阴影变量 box-shadow **/ --tv-shadow-0: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 页面布局容器组件（layout-section）阴影 --tv-shadow-1: 0 0 0 0 rgba(0, 0, 0, 0); // 页面布局容器组件（layout-section）阴影 - --tv-shadow-cell-left:-5px 0 5px 0 rgba(0,0,0,0.10); // 表格固定列阴影 - --tv-shadow-cell-right:5px 0 5px 0 rgba(0,0,0,0.10); // 表格固定列阴影 + --tv-shadow-cell-left: -5px 0 5px 0 rgba(0, 0, 0, 0.10); // 表格固定列阴影 + --tv-shadow-cell-right: 5px 0 5px 0 rgba(0, 0, 0, 0.10); // 表格固定列阴影 --tv-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.08); // 购买浮层 --tv-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.08); // 页面卡片、滑块、顶部导航 diff --git a/packages/theme/src/base/dark-theme.less b/packages/theme/src/base/dark-theme.less index 53e414465..f3bc29a5b 100644 --- a/packages/theme/src/base/dark-theme.less +++ b/packages/theme/src/base/dark-theme.less @@ -100,42 +100,43 @@ /** 2.2 提示类型组件 ----Alert组件、Modal（message）组件、Tag 标签组件、Notify 通知、Tooltip、Badge、错误校验等场景 （仅仅针对主题类场景）**/ --tv-color-success-text: var(--tv-base-color-success-6); // #5BA854 成功-文本色 tag的light、plain类型 --tv-color-success-text-primary: var(--tv-base-color-common-2); // #E6E6E6 常规一级文本色（非主题色） - --tv-color-success-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景文本色：tag的dark类型/tooltip/badge - --tv-color-success-bg: var(--tv-base-color-success-6); //#5BA854 成功-背景色(深) tag的dark类型/tooltip/badge - --tv-color-success-bg-light: #394E3B; // #394E3B 成功-背景色(浅) alert/tag的light类型 - --tv-color-success-bg-white: var(--tv-base-color-common-1); // #fff 常规背景色（非主题色） + --tv-color-success-bg: var(--tv-base-color-success-6); // #5BA854 成功-背景色(深) tag的dark类型/tooltip/badge + --tv-color-success-bg-1: #5ba85433; // tag的light类型 + --tv-color-success-bg-light: #394E3B; // #394E3B 成功-背景色(浅) alert --tv-color-success-border: var(--tv-base-color-success-6); // #5BA854 成功-边框色(深) tooltip/badge/tag的dark、plain类型 --tv-color-success-border-light: #394E3B; // #394E3B 成功-边框色（浅） alert/tag的light类型 + --tv-color-success-border-1: transparent; // tag的light类型 --tv-color-success-icon: var(--tv-base-color-success-6); // #5BA854 成功-图标色 --tv-color-error-text: var(--tv-base-color-error-6); // #D94838 错误-文本色：交易金额色/错误校验/tag的light、plain类型 --tv-color-error-text-primary: var(--tv-base-color-common-2); // #E6E6E6 常规一级文本色（非主题色） - --tv-color-error-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景文本色： tag的dark类型/tooltip/badge --tv-color-error-bg: var(--tv-base-color-error-6); // #D94838 错误-背景色(深) tag的dark类型/tooltip/badge - --tv-color-error-bg-light: #583634; // #583634 错误-背景色(浅):错误校验背景色/alert/tag的light类型 - --tv-color-error-bg-white: var(--tv-base-color-common-1); // #fff 常规背景色（非主题色） + --tv-color-error-bg-1: #d9483833; // tag的light类型 + --tv-color-error-bg-light: #583634; // #583634 错误-背景色(浅):错误校验背景色/alert --tv-color-error-border: var(--tv-base-color-error-6); // #D94838 错误-边框色(深) tooltip/badge/tag的dark、plain类型/错误校验边框色 --tv-color-error-border-light: #583634; // #583634 错误-边框色（浅）alert/tag的light类型 + --tv-color-error-border-1: transparent; // tag的light类型 --tv-color-error-icon: var(--tv-base-color-error-6); // #D94838 错误-图标色 --tv-color-warn-text: var(--tv-base-color-warn-6); // #ff8800 告警-文本色 tag的light、plain类型 --tv-color-warn-text-primary: var(--tv-base-color-common-11); // #E6E6E6 常规一级文本色（非主题色） - --tv-color-warn-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景文本色：tag的dark类型/tooltip/badge --tv-color-warn-bg: var(--tv-base-color-warn-6); // #ff8800 告警-背景色(深) tag的dark类型/tooltip/badge - --tv-color-warn-bg-light: #624626; // #624626 告警-背景色(浅) alert/tag的light类型 - --tv-color-warn-bg-white: var(--tv-base-color-common-1); // #fff 常规背景色（非主题色） + --tv-color-warn-bg-1: #774a1633; // tag的light类型 + --tv-color-warn-bg-light: #624626; // #624626 告警-背景色(浅) alert --tv-color-warn-border: var(--tv-base-color-warn-6); // #ff8800 告警-边框色(深) tooltip/badge/tag的dark、plain类型 --tv-color-warn-border-light: #624626; // #624626 告警-边框色（浅） alert/tag的light类型 + --tv-color-warn-border-1: transparent; // tag的light类型 --tv-color-warn-icon: var(--tv-base-color-warn-6); // #ff8800 告警-图标色 - --tv-color-info-text: var(--tv-base-color-info-7); // #317AF7 信息-文本色 tag的light、plain类型 + --tv-color-info-text: var(--tv-base-color-info-7); // #317AF7 信息-文本色 (tag的light、plain类型) --tv-color-info-text-primary: var(--tv-base-color-common-2); // #E6E6E6 常规一级文本色（非主题色） tag的dark类型/tooltip/badge - --tv-color-info-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景文本色：tag的dark类型/tooltip/badge - --tv-color-info-bg: var(--tv-base-color-info-7); // #317AF7 信息-背景色(深) alert/tag的light类型 - --tv-color-info-bg-light: #2E4364; // #2E4364 信息-背景色(浅) alert/tag的light类型 - --tv-color-info-bg-white: var(--tv-base-color-common-1); // #fff 常规背景色（非主题色） + --tv-color-info-text-1: var(--tv-base-color-info-8); // #5291FF tag的light、plain类型 + --tv-color-info-bg: var(--tv-base-color-info-7); // #317AF7 信息-背景色(深) alert/tag的dark类型 + --tv-color-info-bg-1: #5291ff33; // #5291ff 0.2透明度：tag的light类型 + --tv-color-info-bg-light: #2E4364; // #2E4364 信息-背景色(浅) alert --tv-color-info-border: var(--tv-base-color-info-7); // #317AF7 信息-边框色(深) tooltip/badge/tag的dark、plain类型 --tv-color-info-border-light: #2E4364; // #2E4364 信息-边框色（浅） alert/tag的light类型 + --tv-color-info-border-1: transparent; // tag的light类型 --tv-color-info-icon: var(--tv-base-color-info-7); // #317AF7 信息-图标色 /** 2.3 交互类型颜色---- Button组件、Link 文字链接 **/ @@ -273,7 +274,7 @@ --tv-color-act-info-text-white-hover: var(--tv-base-color-common-1); // #fff 信息hover文本色-2（白色） 基本按钮 --tv-color-act-info-text-white-active: var(--tv-base-color-common-1); // #fff 信息active文本色-2（白色） 基本按钮 - --tv-color-act-info-plain-text-hover: var(--tv-base-color-info-7); // #1476ff 朴素按钮 + --tv-color-act-info-plain-text-hover: var(--tv-base-color-info-7); // #317AF7 朴素按钮 --tv-color-act-info-bg: var(--tv-base-color-info-7); // #317AF7 信息背景色-1（信息主色）：基本按钮 --tv-color-act-info-bg-hover: var(--tv-base-color-info-5); // #4191fa 信息hover背景色-1 基本按钮 @@ -304,7 +305,7 @@ --tv-color-text-active: var(--tv-base-color-info-8); // #5291FF 选中文本色 / 文本高亮色（搜索关键字高亮） --tv-color-text-important: var(--tv-base-color-common-2); // #E6E6E6 重要文本色-文本_金额 --tv-color-text-link: var(--tv-base-color-brand-8); // #5291FF 链接色（链接按钮） - --tv-color-text-link-hover: var(--tv-base-color-brand-6); // #5291FF 链接悬浮色 + --tv-color-text-link-hover: var(--tv-base-color-brand-8); // #5291FF 链接悬浮色 --tv-color-plain-text-hover: var(--tv-base-color-common-2); // #E6E6E6 朴素次要按钮文本悬浮色 // -- 暗色新增 -- --tv-color-text-control: var(--tv-base-color-common-4); // #B3B3B3 左侧导航默认文本色/主要图标按钮/主要图标+按钮 @@ -345,7 +346,7 @@ --tv-color-bg-gray-2: rgba(255, 255, 255, 0.2); // rgba(255,255,255,0.2) 灰色背景-2：灰色标签背景色/进度条灰色背景 --tv-color-bg-header: var(--tv-base-color-common-10); // #262626 表头背景色 --tv-color-bg-mask: rgba(0, 0, 0, 70%); // 遮罩层带有透明度的背景色 - --tv-color-bg-mask-block:rgba(0, 0, 0, 70%);// 模块加载蒙层 + --tv-color-bg-mask-block: rgba(0, 0, 0, 70%); // 模块加载蒙层 --tv-color-bg-dark: var(--tv-base-color-common-11); // #1A1A1A 深色背景色 顶部导航/ 深色tab/深色提示背景色 @@ -383,11 +384,11 @@ --tv-color-bg-hover-4: var(--tv-base-color-common-10); // #262626 表格悬浮/下拉悬浮/左侧导航悬浮 --tv-color-bg-active-primary-1: var(--tv-base-color-common-4); // #B3B3B3 主要按钮悬浮 --tv-color-bg-inverse: var(--tv-base-color-common-1); // #fff 不发生反色的背景色：switch/slider按钮控件背景色 - --tv-color-bg-active-control-1:var(--tv-base-color-brand-4); // #264DAB radio 选中禁用色 - --tv-color-bg-5:var(--tv-base-color-common-6); // #808080 轮播指示器背景色 - --tv-color-bg-5-active:var(--tv-base-color-common-2); // #E6E6E6 轮播指示器激活背景色 - --tv-color-bg-inverse-tint-1:var(--tv-base-color-common-10); // #262626 图片工具栏背景色 - --tv-color-bg-disabled-control:var(--tv-base-color-common-8); // #4D4D4D 滑块高亮部分禁用色 + --tv-color-bg-active-control-1: var(--tv-base-color-brand-4); // #264DAB radio 选中禁用色 + --tv-color-bg-5: var(--tv-base-color-common-6); // #808080 轮播指示器背景色 + --tv-color-bg-5-active: var(--tv-base-color-common-2); // #E6E6E6 轮播指示器激活背景色 + --tv-color-bg-inverse-tint-1: var(--tv-base-color-common-10); // #262626 图片工具栏背景色 + --tv-color-bg-disabled-control: var(--tv-base-color-common-8); // #4D4D4D 滑块高亮部分禁用色 --tv-color-bg-inverse-disabled: var(--tv-base-color-common-5); // #999 复选框禁用/开个按钮禁用/滑块按钮禁用（此3类场景图标白色部分反色成#999） /** 2.7 边框色/分割线颜色 **/ @@ -410,7 +411,7 @@ --tv-color-border-container: rgba(255, 255, 255, 0.1); // rgba(255,255,255,0.1) 卡片选择默认边框 --tv-color-border-container-hover: rgba(255, 255, 255, 0); // rgba(255,255,255,0) 卡片选择悬浮边框 --tv-color-border-container-active: var(--tv-base-color-brand-7); // #317AF7 卡片选择选中边框 - --tv-color-border-inverse-tint:var(--tv-base-color-common-13); // #000 tag边框 + --tv-color-border-inverse-tint: var(--tv-base-color-common-13); // #000 tag边框 --tv-color-border-1: var(--tv-base-color-common-6); // #808080 滑块圆圈描边 /** 3. 字体变量 **/ @@ -483,8 +484,8 @@ /** 8. 阴影变量 box-shadow **/ --tv-shadow-0: 0 4px 16px 0 rgba(0, 0, 0, 0.24); // 卡片选择悬浮效果/页面布局容器组件（layout-section）阴影 --tv-shadow-1: 0 0 0 0 rgba(0, 0, 0, 0); // 页面布局容器组件（layout-section）阴影 - --tv-shadow-cell-left:-5px 0 5px 0 rgba(0,0,0,0.32); // 表格固定列阴影 - --tv-shadow-cell-right:5px 0 5px 0 rgba(0,0,0,0.32); // 表格固定列阴影 + --tv-shadow-cell-left: -5px 0 5px 0 rgba(0, 0, 0, 0.32); // 表格固定列阴影 + --tv-shadow-cell-right: 5px 0 5px 0 rgba(0, 0, 0, 0.32); // 表格固定列阴影 --tv-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.24); // 购买浮层 --tv-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.24); // 页面卡片、滑块、顶部导航 diff --git a/packages/theme/src/base/old-theme.less b/packages/theme/src/base/old-theme.less index 185b33227..d39bb540b 100644 --- a/packages/theme/src/base/old-theme.less +++ b/packages/theme/src/base/old-theme.less @@ -96,42 +96,43 @@ /** 2.2 提示类型组件 ----Alert组件、Modal（message）组件、Tag 标签组件、Notify 通知、错误校验等场景 **/ --tv-color-success-text: var(--tv-base-color-success-6); // #50d4ab #3ac295成功-文本色 --tv-color-success-text-primary: var(--tv-base-color-common-8); // #252b3a 白色背景一级文本色 - --tv-color-success-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色 --tv-color-success-bg: var(--tv-base-color-success-6); //#50d4ab 成功-背景色(深) + --tv-color-success-bg-1: var(--tv-base-color-success-1); // #edfff9 tag的light类型 --tv-color-success-bg-light: var(--tv-base-color-success-1); // #edfff9 成功-背景色(浅) - --tv-color-success-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？） --tv-color-success-border: var(--tv-base-color-success-6); // #50d4ab 成功-边框色(深) --tv-color-success-border-light: var(--tv-base-color-success-3); // #acf2dc 成功-边框色（浅） + --tv-color-success-border-1: var(--tv-base-color-success-3); // #acf2dc tag的light类型 --tv-color-success-icon: var(--tv-base-color-success-6); // #50d4ab 成功-图标色 --tv-color-error-text: var(--tv-base-color-error-6); // #f66f6a 错误-文本色/交易金额色 --tv-color-error-text-primary: var(--tv-base-color-common-8); // #252b3a 白色背景一级文本色 - --tv-color-error-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色 --tv-color-error-bg: var(--tv-base-color-error-6); // #f66f6a 错误-背景色(深) --tv-color-error-bg-light: var(--tv-base-color-error-1); // #ffeeed 错误-背景色(浅)/错误校验背景色 - --tv-color-error-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 + --tv-color-error-bg-1: var(--tv-base-color-error-1); // #ffeeed tag的light类型 --tv-color-error-border: var(--tv-base-color-error-6); // #f66f6a 错误-边框色(深) --tv-color-error-border-light: var(--tv-base-color-error-3); // #ffbcba 错误-边框色（浅） + --tv-color-error-border-1: var(--tv-base-color-error-3); // #ffbcba tag的light类型 --tv-color-error-icon: var(--tv-base-color-error-6); // #f66f6a 错误-图标色 --tv-color-warn-text: var(--tv-base-color-warn-7); // #e37d29 告警-文本色 --tv-color-warn-text-primary: var(--tv-base-color-common-8); // #252b3a 白色背景一级文本色 - --tv-color-warn-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色 --tv-color-warn-bg: var(--tv-base-color-warn-6); // #fa9841 告警-背景色(深) --tv-color-warn-bg-light: var(--tv-base-color-warn-1); // #fff3e8 告警-背景色(浅) - --tv-color-warn-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 + --tv-color-warn-bg-1: var(--tv-base-color-warn-1); // #fff3e8 tag的light类型 --tv-color-warn-border: var(--tv-base-color-warn-6); // #fa9841 告警-边框色(深) --tv-color-warn-border-light: var(--tv-base-color-warn-3); // #ffd0a6 告警-边框色（浅） + --tv-color-warn-border-1: var(--tv-base-color-warn-3); // #ffd0a6 tag的light类型 --tv-color-warn-icon: var(--tv-base-color-warn-6); // #fa9841 告警-图标色 --tv-color-info-text: var(--tv-base-color-info-7); // #526ecc 信息-文本色 --tv-color-info-text-primary: var(--tv-base-color-common-8); // #252b3a 白色背景一级文本色 - --tv-color-info-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色 + --tv-color-info-text-1: var(--tv-base-color-info-7); // #526ecc tag的light、plain类型 --tv-color-info-bg: var(--tv-base-color-info-6); // #5e7ce0 信息-背景色(深) --tv-color-info-bg-light: #ebf6ff; // #ebf6ff 信息-背景色(浅) (规范token中的颜色，又不在这个蓝色系的色阶中，主题部分等设计师帮忙整改） - --tv-color-info-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 + --tv-color-info-bg-1: #ebf6ff; // #ebf6ff tag的light类型 --tv-color-info-border: var(--tv-base-color-info-6); // #5e7ce0 信息-边框色(深) --tv-color-info-border-light: var(--tv-base-color-info-3); // #beccfa 信息-边框色（浅） + --tv-color-info-border-1: var(--tv-base-color-info-3); // #beccfa tag的light类型 --tv-color-info-icon: var(--tv-base-color-info-6); // #5e7ce0 信息-图标色 /** 2.3 交互类型颜色---- Button组件、Badge 标记、Link 文字链接 **/ @@ -299,7 +300,7 @@ --tv-color-text-control: var(--tv-base-color-common-8); // #252b3a 左侧导航默认文本色/主要图标按钮/主要图标+按钮 --tv-color-text-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景 --tv-color-text-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：主要按钮文本色 - --tv-color-text-inverse-black: var(--tv-base-color-common-8); // #252b3a tooltip的light文字 + --tv-color-text-inverse-black: var(--tv-base-color-common-8); // #252b3a tooltip的light文字 --tv-color-text-active-1: var(--tv-base-color-common-1); // #fff 卡片式tab页签激活文本色 --tv-color-text-active-2: var(--tv-base-color-common-8); // #252b3a tree选中文本色 --tv-color-text-active-3: var(--tv-base-color-brand-7); // #526ecc tab页签激活色 @@ -362,7 +363,7 @@ --tv-color-bg-active-emphasize: var(--tv-base-color-brand-2); // #5e7ce0 时间选择选中背景色 --tv-color-bg-active-emphasize-light: var(--tv-base-color-brand-1); // #f0f7ff 表格选中背景色 --tv-color-bg-active-dark: var(--tv-base-color-common-3); // #eef0f5 深色背景色激活色 - + // -- 暗色新增 -- --tv-color-bg-2: var(--tv-base-color-common-1); // #fff下拉面板/tip背景色 --tv-color-bg-3: var(--tv-base-color-common-1); // #fff 顶部导航背景色/顶部导航下拉背景色/折叠面板背景色/容器二级背景色:左侧导航/折叠面板/表格下展背景 @@ -374,11 +375,11 @@ --tv-color-bg-hover-4: var(--tv-base-color-brand-1); // #f2f5fc 表格悬浮/下拉悬浮/左侧导航悬浮 --tv-color-bg-active-primary-1: var(--tv-base-color-brand-5); // #7693f5 主要按钮悬浮 --tv-color-bg-inverse: var(--tv-base-color-common-1); // #fff 不发生反色的背景色：switch/slider按钮控件背景色 - --tv-color-bg-active-control-1:var(--tv-base-color-brand-3); // #beccfa radio 选中禁用色 - --tv-color-bg-5:var(--tv-base-color-common-4); // #dfe1e6轮播指示器背景色 - --tv-color-bg-5-active:var(--tv-base-color-brand); // #5e7ce0 轮播指示器激活背景色 - --tv-color-bg-inverse-tint-1:var(--tv-base-color-common-1); // #fff 图片工具栏背景色 - --tv-color-bg-disabled-control:var(--tv-base-color-common-5); // #adb0b8滑块高亮部分禁用色 + --tv-color-bg-active-control-1: var(--tv-base-color-brand-3); // #beccfa radio 选中禁用色 + --tv-color-bg-5: var(--tv-base-color-common-4); // #dfe1e6轮播指示器背景色 + --tv-color-bg-5-active: var(--tv-base-color-brand); // #5e7ce0 轮播指示器激活背景色 + --tv-color-bg-inverse-tint-1: var(--tv-base-color-common-1); // #fff 图片工具栏背景色 + --tv-color-bg-disabled-control: var(--tv-base-color-common-5); // #adb0b8滑块高亮部分禁用色 --tv-color-bg-inverse-disabled: var(--tv-base-color-common-5); // #adb0b8 复选框禁用/开个按钮禁用/滑块按钮禁用（此3类场景图标白色部分反色成#adb0b8） /** 2.7 边框色/分割线颜色 **/ @@ -401,7 +402,7 @@ --tv-color-border-container: var(--tv-base-color-common-5); // #adb0b8 卡片选择默认边框 --tv-color-border-container-hover: var(--tv-base-color-common-1); // #fff 卡片选择悬浮边框 --tv-color-border-container-active: var(--tv-base-color-brand); // #5e7ce0 卡片选择选中边框 - --tv-color-border-inverse-tint:var(--tv-base-color-common-1); // #fff tag边框 + --tv-color-border-inverse-tint: var(--tv-base-color-common-1); // #fff tag边框 --tv-color-border-1: var(--tv-base-color-common-4); // #dfe1e6 滑块圆圈描边 /** 3. 字体变量 **/ @@ -474,8 +475,8 @@ /** 8. 阴影变量 box-shadow **/ --tv-shadow-0: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 页面布局容器组件（layout-section）阴影 --tv-shadow-1: 0 0 0 0 rgba(0, 0, 0, 0); // 页面布局容器组件（layout-section）阴影 - --tv-shadow-cell-left:-5px 0 5px 0 rgba(0,0,0,0.10); // 表格固定列阴影 - --tv-shadow-cell-right:5px 0 5px 0 rgba(0,0,0,0.10); // 表格固定列阴影 + --tv-shadow-cell-left: -5px 0 5px 0 rgba(0, 0, 0, 0.10); // 表格固定列阴影 + --tv-shadow-cell-right: 5px 0 5px 0 rgba(0, 0, 0, 0.10); // 表格固定列阴影 --tv-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.08); // 购买浮层 --tv-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.08); // 页面卡片、滑块、顶部导航 diff --git a/packages/theme/src/base/vars.less b/packages/theme/src/base/vars.less index 19e060924..3ac1ae96d 100644 --- a/packages/theme/src/base/vars.less +++ b/packages/theme/src/base/vars.less @@ -100,42 +100,43 @@ /** 2.2 提示类型组件 ----Alert组件、Modal（message）组件、Tag 标签组件、Notify 通知、Tooltip、Badge、-错误校验等场景 **/ --tv-color-success-text: var(--tv-base-color-success-6); // #5cb300 成功-文本色 tag的light、plain类型 --tv-color-success-text-primary: var(--tv-base-color-common-11); // #191919 常规一级文本色（非主题色） - --tv-color-success-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景文本色：tag的dark类型/tooltip/badge --tv-color-success-bg: var(--tv-base-color-success-6); //#5cb300 成功-背景色(深) tag的dark类型/tooltip/badge --tv-color-success-bg-light: var(--tv-base-color-success-14); // #e6f2d5 成功-背景色(浅) alert/tag的light类型 - --tv-color-success-bg-white: var(--tv-base-color-common-1); // #fff 常规背景色（非主题色） 确认是否去掉？ + --tv-color-success-bg-1: var(--tv-base-color-success-14); // #e6f2d5 tag的light类型 --tv-color-success-border: var(--tv-base-color-success-6); // #5cb300 成功-边框色(深) tooltip/badge/tag的dark、plain类型 --tv-color-success-border-light: var(--tv-base-color-success-14); // #e6f2d5 成功-边框色（浅） alert/tag的light类型 + --tv-color-success-border-1: var(--tv-base-color-success-14); // #e6f2d5 tag的light类型 --tv-color-success-icon: var(--tv-base-color-success-6); // #5cb300 成功-图标色 --tv-color-error-text: var(--tv-base-color-error-6); // #f23030 #f23030 错误-文本色/交易金额色/错误校验/tag的light、plain类型 --tv-color-error-text-primary: var(--tv-base-color-common-11); // #191919 常规一级文本色（非主题色） - --tv-color-error-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景文本色： tag的dark类型/tooltip/badge --tv-color-error-bg: var(--tv-base-color-error-6); // #f23030 #f23030 错误-背景色(深) tag的dark类型/tooltip/badge + --tv-color-error-bg-1: var(--tv-base-color-error-13); // #fce3e1 tag的light类型 --tv-color-error-bg-light: var(--tv-base-color-error-13); // #fce3e1 错误-背景色(浅):错误校验背景色/alert/tag的light类型 - --tv-color-error-bg-white: var(--tv-base-color-common-1); // #fff 常规背景色（非主题色） --tv-color-error-border: var(--tv-base-color-error-6); // #f23030 #f23030 错误-边框色(深) tooltip/badge/tag的dark、plain类型/错误校验边框色 --tv-color-error-border-light: var(--tv-base-color-error-13); // #fce3e1 错误-边框色（浅） alert/tag的light类型 + --tv-color-error-border-1: var(--tv-base-color-error-13); // #fce3e1 tag的light类型 --tv-color-error-icon: var(--tv-base-color-error-6); // #f23030 #f23030 错误-图标色 --tv-color-warn-text: var(--tv-base-color-warn-6); // #ff8800 告警-文本色 tag的light、plain类型 --tv-color-warn-text-primary: var(--tv-base-color-common-11); // #191919 常规一级文本色（非主题色） - --tv-color-warn-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景文本色：tag的dark类型/tooltip/badge --tv-color-warn-bg: var(--tv-base-color-warn-6); // #ff8800 告警-背景色(深) tag的dark类型/tooltip/badge --tv-color-warn-bg-light: var(--tv-base-color-warn-2); // #ffebd1 告警-背景色(浅) alert/tag的light类型 - --tv-color-warn-bg-white: var(--tv-base-color-common-1); // #fff 常规背景色（非主题色） + --tv-color-warn-bg-1: var(--tv-base-color-warn-2); // #ffebd1 tag的light类型 --tv-color-warn-border: var(--tv-base-color-warn-6); // #ff8800 告警-边框色(深) tooltip/badge/tag的dark、plain类型 --tv-color-warn-border-light: var(--tv-base-color-warn-2); // #ffebd1 告警-边框色（浅） alert/tag的light类型 + --tv-color-warn-border-1: var(--tv-base-color-warn-2); // #ffebd1 tag的light类型 --tv-color-warn-icon: var(--tv-base-color-warn-6); // #ff8800 告警-图标色 --tv-color-info-text: var(--tv-base-color-info-6); // #1476ff 信息-文本色 tag的light、plain类型 --tv-color-info-text-primary: var(--tv-base-color-common-11); // #191919 常规一级文本色（非主题色） tag的dark类型/tooltip/badge - --tv-color-info-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景文本色：tag的dark类型/tooltip/badge + --tv-color-info-text-1: var(--tv-base-color-info-6); // #1476ff --tv-color-info-bg: var(--tv-base-color-info-6); // #1476ff 信息-背景色(深) alert/tag的light类型 + --tv-color-info-bg-1: var(--tv-base-color-info-2); // #deecff --tv-color-info-bg-light: var(--tv-base-color-info-2); // #deecff 信息-背景色(浅) alert/tag的light类型 - --tv-color-info-bg-white: var(--tv-base-color-common-1); // #fff 常规背景色（非主题色） --tv-color-info-border: var(--tv-base-color-info-6); // #1476ff 信息-边框色(深) tooltip/badge/tag的dark、plain类型 --tv-color-info-border-light: var(--tv-base-color-info-2); // #deecff 信息-边框色（浅） alert/tag的light类型 + --tv-color-info-border-1: var(--tv-base-color-info-2); // #deecff tag的light类型 --tv-color-info-icon: var(--tv-base-color-info-6); // #1476ff 信息-图标色 /** 2.3 交互类型颜色---- Button组件、Link 文字链接 **/ @@ -169,7 +170,7 @@ --tv-color-act-primary-border-light-hover-1: var(--tv-base-color-common-7); // #c2c2c2 边框色-2.2 幽灵hover --tv-color-act-primary-border-light-active-1: var(--tv-base-color-common-7); // #c2c2c2 边框色-2.2 幽灵active - + /* 成功-success */ --tv-color-act-success-text: var(--tv-base-color-success-6); // #5cb300 成功文本色-1（成功主色）： 朴素/幽灵/纯文本/链接 @@ -210,7 +211,7 @@ --tv-color-act-warning-text-white: var(--tv-base-color-common-1); // #fff 告警文本色-2（白色）：基本按钮 --tv-color-act-warning-text-white-hover: var(--tv-base-color-common-1); // #fff 告警hover文本色-2（白色） 基本按钮 --tv-color-act-warning-text-white-active: var(--tv-base-color-common-1); // #fff 告警active文本色-2（白色） 基本按钮 - + --tv-color-act-warning-plain-text-hover: var(--tv-base-color-warn-6); // #ff8800 朴素悬浮文本色 --tv-color-act-warning-bg: var(--tv-base-color-warn-6); // #ff8800 告警背景色-1（告警主色）：基本按钮 @@ -310,7 +311,7 @@ --tv-color-text-control: var(--tv-base-color-common-11); // #191919 左侧导航默认文本色/主要图标按钮/主要图标+按钮 --tv-color-text-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景 --tv-color-text-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：主要按钮文本色 - --tv-color-text-inverse-black: var(--tv-base-color-common-11); // #191919 tooltip的light文字 + --tv-color-text-inverse-black: var(--tv-base-color-common-11); // #191919 tooltip的light文字 --tv-color-text-active-1: var(--tv-base-color-common-11); // #191919 卡片式tab页签激活文本色 --tv-color-text-active-2: var(--tv-base-color-info-6); // #1476ff tree选中文本色 --tv-color-text-active-3: var(--tv-base-color-common-11); // #191919 tab页签激活色 @@ -333,7 +334,7 @@ // -- 暗色新增 -- --tv-color-icon-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景 --tv-color-icon-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：按钮下拉线头 - + /** 2.6 背景色 **/ @@ -341,15 +342,15 @@ --tv-color-bg: var(--tv-base-color-common-3); // #f5f5f5 通用背景色 /选块的默认背景颜色/下拉搜索的背景、折叠面板背景色/滑块背景色 --tv-color-bg-primary: var(--tv-base-color-brand); // #191919 主要背景色（品牌色）：slider/step/流程图 --tv-color-bg-secondary: var(--tv-base-color-common-1); // #fff 次要背景色（白色）：// 输入框背景/默认按钮背景/折叠面板头部背景色/下拉面板背景色/穿梭框头部背景 - --tv-color-bg-control: var(--tv-base-color-common-7); // #c2c2c2 单选/复选/开关/滑块默认背景色 + --tv-color-bg-control: var(--tv-base-color-common-7); // #c2c2c2 单选/复选/开关/滑块默认背景色 --tv-color-bg-control-unactive: var(--tv-base-color-common-7); // #c2c2c2 开关组件-关闭状态-背景色 --tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色 --tv-color-bg-gray-2: var(--tv-base-color-common-5); // #e6e6e6 灰色背景-2：灰色标签背景色/进度条灰色背景 --tv-color-bg-header: var(--tv-base-color-common-3); // #f5f5f5 表头背景色 --tv-color-bg-mask: rgba(0, 0, 0, 20%); // 全局加载蒙层/抽屉弹窗蒙层 - --tv-color-bg-mask-block:rgba(255, 255, 255, 70%); // 模块加载蒙层 + --tv-color-bg-mask-block: rgba(255, 255, 255, 70%); // 模块加载蒙层 --tv-color-bg-dark: var(--tv-base-color-brand); // #191919; 深色背景色 顶部导航/ 深色tab/深色提示背景色 - + /* 2.6.2 禁用 */ --tv-color-bg-disabled: var(--tv-base-color-common-4); // #f0f0f0 禁用背景色 @@ -365,7 +366,7 @@ --tv-color-bg-hover-2: var(--tv-base-color-common-5); // #e6e6e6 轮播箭头背景悬浮色 --tv-color-bg-hover-dark: var(--tv-base-color-common-11); // #191919 深色背景悬浮色 - /* 2.6.4 active/选中 */ + /* 2.6.4 active/选中 */ --tv-color-bg-active: var(--tv-base-color-common-3); // #f5f5f5 分页选中背景色/左侧导航选中背景色 --tv-color-bg-active-control: var(--tv-base-color-brand-6); // #1476ff 主色蓝，单选/复选选中背景色、开关“开”的背景色、选块点击背景色、滑块选中背景色、价格曲线、区域选择选中的背景色 --tv-color-bg-active-primary: var(--tv-base-color-brand); // #191919 品牌色，锚点-当前位置的圆点背景色/leftmenuthin左侧导航收起图标选中的背景色、NPS评分选中背景色 @@ -385,11 +386,11 @@ --tv-color-bg-hover-4: var(--tv-base-color-common-1); // #ffffff 表格悬浮/下拉悬浮/左侧导航悬浮 --tv-color-bg-active-primary-1: var(--tv-base-color-common-9); // #595959 主要按钮悬浮 --tv-color-bg-inverse: var(--tv-base-color-common-1); // #fff 不发生反色的背景色：switch/slider按钮控件背景色 - --tv-color-bg-active-control-1:var(--tv-base-color-common-6); // #dbdbdb radio 选中禁用色 - --tv-color-bg-5:var(--tv-base-color-common-5); // #e6e6e6 轮播指示器背景色 - --tv-color-bg-5-active:var(--tv-base-color-common-9); // #595959 轮播指示器激活背景色 - --tv-color-bg-inverse-tint-1:var(--tv-base-color-common-1); // #fff 图片工具栏背景色 - --tv-color-bg-disabled-control:var(--tv-base-color-common-7); // #c2c2c2 滑块高亮部分禁用色 + --tv-color-bg-active-control-1: var(--tv-base-color-common-6); // #dbdbdb radio 选中禁用色 + --tv-color-bg-5: var(--tv-base-color-common-5); // #e6e6e6 轮播指示器背景色 + --tv-color-bg-5-active: var(--tv-base-color-common-9); // #595959 轮播指示器激活背景色 + --tv-color-bg-inverse-tint-1: var(--tv-base-color-common-1); // #fff 图片工具栏背景色 + --tv-color-bg-disabled-control: var(--tv-base-color-common-7); // #c2c2c2 滑块高亮部分禁用色 --tv-color-bg-inverse-disabled: var(--tv-base-color-common-1); // #fff 复选框禁用/开个按钮禁用/滑块按钮禁用（此3类场景图标白色部分反色成#999） /** 2.7 边框色/分割线颜色 **/ @@ -412,7 +413,7 @@ --tv-color-border-container: var(--tv-base-color-common-4); // #f0f0f0 卡片选择默认边框 --tv-color-border-container-hover: var(--tv-base-color-common-1); // #fff 卡片选择悬浮边框 --tv-color-border-container-active: var(--tv-base-color-brand-6); // #1476ff 卡片选择选中边框 - --tv-color-border-inverse-tint:var(--tv-base-color-common-1); // #fff tag边框 + --tv-color-border-inverse-tint: var(--tv-base-color-common-1); // #fff tag边框 --tv-color-border-1: var(--tv-base-color-common-6); // #dbdbdb 滑块圆圈描边 /** 3. 字体变量 **/ @@ -485,8 +486,8 @@ /** 8. 阴影变量 box-shadow **/ --tv-shadow-0: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 页面布局容器组件（layout-section）阴影 --tv-shadow-1: 0 0 0 0 rgba(0, 0, 0, 0); // 页面布局容器组件（layout-section）阴影 - --tv-shadow-cell-left:-5px 0 5px 0 rgba(0,0,0,0.10); // 表格固定列阴影 - --tv-shadow-cell-right:5px 0 5px 0 rgba(0,0,0,0.10); // 表格固定列阴影 + --tv-shadow-cell-left: -5px 0 5px 0 rgba(0, 0, 0, 0.10); // 表格固定列阴影 + --tv-shadow-cell-right: 5px 0 5px 0 rgba(0, 0, 0, 0.10); // 表格固定列阴影 --tv-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.08); // 购买浮层 --tv-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.08); // 页面卡片、滑块、顶部导航 diff --git a/packages/theme/src/image-viewer/vars.less b/packages/theme/src/image-viewer/vars.less index 59f2bde04..e959ee35e 100644 --- a/packages/theme/src/image-viewer/vars.less +++ b/packages/theme/src/image-viewer/vars.less @@ -11,8 +11,8 @@ */ .inject-ImageViewer-vars() { - --tv-ImageViewer-text-color: var(--tv-color-success-text-white, #ffffff); - --tv-ImageViewer-actions-inner-text-color: var(--tv-color-success-text-white, #ffffff); + --tv-ImageViewer-text-color: var(--tv-color-text-inverse, #ffffff); + --tv-ImageViewer-actions-inner-text-color: var(--tv-color-text-inverse, #ffffff); --tv-ImageViewer-close-font-size: var(--tv-font-size-xxl, 20px); --tv-ImageViewer-close-bg-color: var(--tv-color-bg-control-unactive, #c2c2c2); --tv-ImageViewer-actions-border-radius: var(--tv-border-radius-round, 999px); diff --git a/packages/theme/src/link-menu/vars.less b/packages/theme/src/link-menu/vars.less index 42dcb1882..e3d9f46cb 100644 --- a/packages/theme/src/link-menu/vars.less +++ b/packages/theme/src/link-menu/vars.less @@ -20,7 +20,7 @@ // 收藏夹菜单按钮文本色 --tv-LinkMenu-btn-text-color: var(--tv-color-info-text, #1476ff); // 收藏夹设置按钮,弹出框输入框和取消按钮的背景色 - --tv-LinkMenu-btn-bg-color: var(--tv-color-info-bg-white, #ffffff); + --tv-LinkMenu-btn-bg-color: var(--tv-color-bg-inverse, #ffffff); // 收藏夹弹出框的输入框高度 --tv-LinkMenu-input-height: var(--tv-size-height-md, 32px); // 收藏夹弹出框字号 diff --git a/packages/theme/src/tag/vars.less b/packages/theme/src/tag/vars.less index 68e1d0d09..4daa4aded 100644 --- a/packages/theme/src/tag/vars.less +++ b/packages/theme/src/tag/vars.less @@ -98,11 +98,11 @@ // success 主题时标签light的文本色 --tv-Tag-text-color-light-success: var(--tv-color-success-text, #5cb300); // success 主题时标签light的背景色 - --tv-Tag-bg-color-light-success: var(--tv-color-success-bg-light, #e6f2d5); + --tv-Tag-bg-color-light-success: var(--tv-color-success-bg-1, #e6f2d5); // success 主题时标签light的边框色 - --tv-Tag-border-color-light-success: var(--tv-color-success-border-light, #e6f2d5); + --tv-Tag-border-color-light-success: var(--tv-color-success-border-1, #e6f2d5); // success 主题时标签dark的文本色 - --tv-Tag-text-color-dark-success: var(--tv-color-success-text-white, #ffffff); + --tv-Tag-text-color-dark-success: var(--tv-color-text-inverse, #ffffff); // success 主题时标签dark的背景色 --tv-Tag-bg-color-dark-success: var(--tv-color-success-bg, #5cb300); // success 主题时标签dark的边框色 @@ -117,11 +117,11 @@ // error 主题时标签light的文本色 --tv-Tag-text-color-light-danger: var(--tv-color-error-text, #f23030); // error 主题时标签light的背景色 - --tv-Tag-bg-color-light-danger: var(--tv-color-error-bg-light, #fce3e1); + --tv-Tag-bg-color-light-danger: var(--tv-color-error-bg-1, #fce3e1); // error 主题时标签light的边框色 - --tv-Tag-border-color-light-danger: var(--tv-color-error-border-light, #fce3e1); + --tv-Tag-border-color-light-danger: var(--tv-color-error-border-1, #fce3e1); // error 主题时标签dark的文本色 - --tv-Tag-text-color-dark-danger: var(--tv-color-error-text-white, #ffffff); + --tv-Tag-text-color-dark-danger: var(--tv-color-text-inverse, #ffffff); // error 主题时标签dark的背景色 --tv-Tag-bg-color-dark-danger: var(--tv-color-error-bg, #f23030); // error 主题时标签dark的边框色 @@ -136,11 +136,11 @@ // warning 主题时标签light的文本色 --tv-Tag-text-color-light-warning: var(--tv-color-warn-text, #ff8800); // warning 主题时标签light的背景色 - --tv-Tag-bg-color-light-warning: var(--tv-color-warn-bg-light, #ffebd1); + --tv-Tag-bg-color-light-warning: var(--tv-color-warn-bg-1, #ffebd1); // warning 主题时标签light的边框色 - --tv-Tag-border-color-light-warning: var(--tv-color-warn-border-light, #ffebd1); + --tv-Tag-border-color-light-warning: var(--tv-color-warn-border-1, #ffebd1); // warning 主题时标签dark的文本色 - --tv-Tag-text-color-dark-warning: var(--tv-color-warn-text-white, #ffffff); + --tv-Tag-text-color-dark-warning: var(--tv-color-text-inverse, #ffffff); // warning 主题时标签dark的背景色 --tv-Tag-bg-color-dark-warning: var(--tv-color-warn-bg, #ff8800); // warning 主题时标签dark的边框色 @@ -153,13 +153,13 @@ --tv-Tag-border-color-plain-warning: var(--tv-color-warn-border, #ff8800); // info 主题时标签light的文本色 - --tv-Tag-text-color-light-info: var(--tv-color-info-text, #1476ff); + --tv-Tag-text-color-light-info: var(--tv-color-info-text-1, #1476ff); // info 主题时标签light的背景色 - --tv-Tag-bg-color-light-info: var(--tv-color-info-bg-light, #deecff); + --tv-Tag-bg-color-light-info: var(--tv-color-info-bg-1, #deecff); // info 主题时标签light的边框色 - --tv-Tag-border-color-light-info: var(--tv-color-info-border-light, #deecff); + --tv-Tag-border-color-light-info: var(--tv-color-info-border-1, #deecff); // info 主题时标签dark的文本色 - --tv-Tag-text-color-dark-info: var(--tv-color-info-bg-white, #ffffff); + --tv-Tag-text-color-dark-info: var(--tv-color-text-inverse, #ffffff); // info 主题时标签dark的背景色 --tv-Tag-bg-color-dark-info: var(--tv-color-info-bg, #1476ff); // info 主题时标签dark的边框色 diff --git a/packages/theme/src/tooltip/vars.less b/packages/theme/src/tooltip/vars.less index 93f11214e..66d373af7 100644 --- a/packages/theme/src/tooltip/vars.less +++ b/packages/theme/src/tooltip/vars.less @@ -28,28 +28,28 @@ // info类型弹框背景色 --tv-Tooltip-popper-info-bg-color: var(--tv-color-info-bg, #1476ff); // info类型弹框文本色 - --tv-Tooltip-popper-info-text-color: var(--tv-color-info-text-white, #ffffff); + --tv-Tooltip-popper-info-text-color: var(--tv-color-text-inverse, #ffffff); // info类型弹框三角边框色 --tv-Tooltip-popper-info-border-color: var(--tv-color-info-border, #1476ff); // error类型弹框背景色 --tv-Tooltip-popper-error-bg-color: var(--tv-color-error-bg, #f23030); // error类型弹框文本色 - --tv-Tooltip-popper-error-text-color: var(--tv-color-error-text-white, #ffffff); + --tv-Tooltip-popper-error-text-color: var(--tv-color-text-inverse, #ffffff); // error类型弹框三角边框色 --tv-Tooltip-popper-error-border-color: var(--tv-color-error-border, #f23030); // warning类型弹框背景色 --tv-Tooltip-popper-warning-bg-color: var(--tv-color-warn-bg, #ff8800); // warning类型弹框文本色 - --tv-Tooltip-popper-warning-text-color: var(--tv-color-warn-text-white, #ffffff); + --tv-Tooltip-popper-warning-text-color: var(--tv-color-text-inverse, #ffffff); // warning类型弹框三角边框色 --tv-Tooltip-popper-warning-border-color: var(--tv-color-warn-border, #ff8800); // success类型弹框背景色 --tv-Tooltip-popper-success-bg-color: var(--tv-color-success-bg, #5cb300); // success类型弹框文本色 - --tv-Tooltip-popper-success-text-color: var(--tv-color-success-text-white, #ffffff); + --tv-Tooltip-popper-success-text-color: var(--tv-color-text-inverse, #ffffff); // success类型弹框三角边框色 --tv-Tooltip-popper-success-border-color: var(--tv-color-success-border, #5cb300); @@ -63,7 +63,7 @@ // light主题弹框背景色 --tv-Tooltip-popper-light-bg-color: var(--tv-color-bg-inverse, #ffffff); // light主题|禁用弹框文本色 - --tv-Tooltip-popper-light-text-color: var(--tv-color-text-inverse-black, #191919); + --tv-Tooltip-popper-light-text-color: var(--tv-color-text-inverse-black, #191919); // light主题|禁用时弹框边框色 --tv-Tooltip-popper-light-border-color: var(--tv-Tooltip-popper-light-bg-color);