forked from opentiny/tiny-vue
feat(theme): [tag] adjust the common variable and adapt the tag component (#3173)
This commit is contained in:
MomoPoppy
GitHub
parent
8051a9760d
commit
bb59877bba
|
|
@ -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); // 页面卡片、滑块、顶部导航
|
||||
|
|
|
|||
|
|
@ -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); // 页面卡片、滑块、顶部导航
|
||||
|
|
|
|||
|
|
@ -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); // 页面卡片、滑块、顶部导航
|
||||
|
|
|
|||
|
|
@ -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); // 页面卡片、滑块、顶部导航
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// 收藏夹弹出框字号
|
||||
|
|
|
|||
|
|
@ -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的边框色
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue